Registro de módulo: Router por Before Semicolon

Registro de módulos

Al crear aplicaciones a gran escala con paquetes de activos modernos (como Vite o Webpack), las importaciones de cadenas dinámicas en el atributo src (por ejemplo, <page-route src="./pages/home.js">) son difíciles de rastrear para los paquetes durante el análisis estático.

El Registro de módulos le permite prerregistrar un mapa de rutas de páginas para sus funciones de cargador, lo que permite una división de código adecuada y un seguimiento de activos en su canal de compilación.

`registerRouteModules`

Registra un mapa de rutas a las funciones del cargador de módulos.

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

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

Ejemplos de integración

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

Vite admite la importación automática de múltiples archivos que coincidan con un patrón global:

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

Webpack usa require.context para rastrear estructuras de directorios:

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

También puedes asignar importaciones manualmente:

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

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

Uso en HTML

Una vez que los módulos estén registrados, defina sus etiquetas <page-route> como de costumbre. El enrutador interceptará la cadena src y la resolverá utilizando el cargador registrado previamente en lugar de activar una solicitud de recuperación genérica del navegador:

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

`getRouteModule`

Recupera un cargador de módulos registrado por su ruta.

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

Precarga de módulos registrados

Los módulos registrados se pueden precargar antes de que el usuario navegue hasta ellos.

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