Accesorio de componente

En lugar de utilizar el atributo src con cadenas de ruta de archivo, <page-route> le permite pasar referencias de clase/constructor de componentes directamente utilizando la propiedad component.

Este enfoque es muy recomendable al agrupar aplicaciones, ya que proporciona verificación de tipos en tiempo de compilación y un mapeo de fuentes sólido.

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>
`

Beneficios del prop component

• Seguridad de tipos: TypeScript valida las referencias de clases en tiempo de compilación.
• Asistencia IDE: El autocompletado y el cambio de nombre de símbolos funcionan de forma nativa.
• Tree-Shaking: Las importaciones estáticas permiten a los paquetes eliminar el código no utilizado.
• Soporte HMR: Reemplazos de módulos en caliente más rápidos durante el desarrollo.

Formatos de componentes

El valor pasado a la propiedad component puede ser:

1. Cadena HTML simple

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

2. Literal de plantilla Markup

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

3. Nodo DOM nativo

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

4. Función de cargador contextual

Una función que recibe datos de navegación, parámetros de ruta y consultas de búsqueda, y devuelve cualquiera de los formatos anteriores:

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>
    `
}