Accessoire de composant

Au lieu d'utiliser l'attribut src avec des chaînes de chemin de fichier, <page-route> vous permet de transmettre des références de constructeur/classe de composant directement à l'aide de la propriété component.

Cette approche est fortement recommandée lors du regroupement d'applications, car elle fournit une vérification de type au moment de la compilation et un mappage de source robuste.

import { html } from '@beforesemicolon/web-component'
import { HomePage } from './pages/HomePage'
import { AboutPage } from './pages/AboutPage'

// Render route tags using Component imports directly
html`
    <page-route path="/" component="${HomePage}"></page-route>
    <page-route path="/about" component="${AboutPage}"></page-route>
`

Avantages de l'hélice component

• Sécurité des types : TypeScript valide les références de classe au moment de la compilation.
• Assistance IDE : La saisie semi-automatique et le renommage des symboles fonctionnent de manière native.
• Tree-Shaking : Les importations statiques permettent aux bundlers d'éliminer le code inutilisé.
• Support HMR : Remplacements plus rapides des modules à chaud pendant le développement.

Formats de composants

La valeur passée à la propriété component peut être :

1. Chaîne HTML simple

export default '<h2>Welcome Home</h2>'

2. Littéral de modèle Markup

import { html } from '@beforesemicolon/web-component'
export default html`<h2>Welcome Home</h2>`

3. Nœud natif DOM

const container = document.createElement('div')
container.textContent = 'Welcome Home'
export default container

4. Fonction de chargeur contextuel

Une fonction qui reçoit des données de navigation, des paramètres de chemin et des requêtes de recherche, et renvoie l'un des formats ci-dessus :

export default (data, params, query) => {
    return html`
        <h2>Welcome ${data.username}</h2>
        <p>Viewing item ID: ${params.itemId}</p>
        <p>Active filter: ${query.filter}</p>
    `
}