Propriedade component

Em vez de usar o atributo src com caminhos de arquivo em strings, <page-route> permite passar referências de construtor ou classe diretamente pela propriedade component.

Essa abordagem é altamente recomendada ao empacotar aplicações, pois oferece verificação de tipos durante a compilação e mapeamento de código-fonte confiável.

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

Benefícios da propriedade component

• Segurança de tipos: o TypeScript valida referências de classe durante a compilação.
• Assistência da IDE: preenchimento automático e renomeação de símbolos funcionam nativamente.
• Tree-shaking: importações estáticas permitem que o empacotador remova código não utilizado.
• Suporte a HMR: substituições de módulos mais rápidas durante o desenvolvimento.

Formatos de componente

O valor passado para a propriedade component pode ser:

1. String HTML simples

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

2. Modelo literal do Markup

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

3. Nó DOM nativo

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

4. Função carregadora contextual

Uma função que recebe dados de navegação, parâmetros do caminho e parâmetros de consulta e retorna qualquer um dos formatos acima:

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