Registro de módulos

Ao criar aplicações de grande escala com empacotadores modernos, como Vite ou Webpack, importações dinâmicas por string no atributo src, por exemplo <page-route src="./pages/home.js">, são difíceis de rastrear durante a análise estática.

O registro de módulos permite pré-registrar um mapa de caminhos de páginas para suas funções carregadoras, viabilizando a divisão de código e o rastreamento de recursos no processo de build.

`registerRouteModules`

Registra um mapa de caminhos para suas funções carregadoras de módulos.

typescript
type ModuleLoader = () => Promise<any>

function registerRouteModules(modules: Record<string, ModuleLoader>): void

Exemplos de integração

1. Vite (`import.meta.glob`)

O Vite permite importar automaticamente vários arquivos correspondentes a um padrão glob:

javascript
import { registerRouteModules } from '@beforesemicolon/router'

// 1. Gather all page components (lazy loaders)
const modules = import.meta.glob('./pages/**/*.{ts,js,html}', { eager: false })

// 2. Register with router
registerRouteModules(modules)

2. Webpack (`require.context`)

O Webpack usa require.context para rastrear estruturas de diretórios:

javascript
import { registerRouteModules } from '@beforesemicolon/router'

const context = require.context('./pages', true, /\.(ts|js|html)$/)
const modules = {}

context.keys().forEach((key) => {
    // Map paths to loaders
    modules[key] = () => Promise.resolve(context(key))
})

registerRouteModules(modules)

3. Registro manual

Você também pode mapear as importações manualmente:

javascript
import { registerRouteModules } from '@beforesemicolon/router'

registerRouteModules({
    './pages/home.js': () => import('./pages/home.js'),
    './pages/about.js': () => import('./pages/about.js'),
})

Uso no HTML

Depois de registrar os módulos, defina suas tags <page-route> normalmente. O roteador intercepta a string src e a resolve usando o carregador pré-registrado, em vez de iniciar uma requisição genérica do navegador:

html
<!-- Uses the registered bundler import loader automatically -->
<page-route path="/" src="./pages/home.js"></page-route>

`getRouteModule`

Retorna um carregador de módulo registrado pelo caminho.

typescript
function getRouteModule(path: string): ModuleLoader | undefined

Pré-carregando módulos registrados

Módulos registrados podem ser pré-carregados antes que o usuário navegue até eles.

typescript
function preloadRouteModule(path: string): Promise<void>
function preloadRouteModules(paths: string[]): Promise<void>

javascript
import { preloadRouteModules } from '@beforesemicolon/router'

await preloadRouteModules(['./pages/dashboard.js', './pages/settings.js'])

editar este documento