Registre des modules

Lors de la création d'applications à grande échelle avec des regroupeurs d'actifs modernes (comme Vite ou Webpack), les importations de chaînes dynamiques dans l'attribut src (par exemple <page-route src="./pages/home.js">) sont difficiles à tracer pour les regroupeurs lors de l'analyse statique.

Le Module Registry vous permet de pré-enregistrer une carte des chemins d'accès aux pages vers leurs fonctions de chargeur, permettant ainsi un fractionnement de code et un suivi des actifs appropriés dans votre pipeline de build.

`registerRouteModules`

Enregistre une carte des chemins vers leurs fonctions de chargeur de module.

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

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

Exemples d'intégration

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

Vite prend en charge l'importation automatique de plusieurs fichiers correspondant à un modèle 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 utilise require.context pour tracer les structures de répertoires :

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. Inscription manuelle

Vous pouvez également mapper manuellement les importations :

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

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

Utilisation dans HTML

Une fois les modules enregistrés, définissez vos balises <page-route> comme d'habitude. Le routeur interceptera la chaîne src et la résoudra à l'aide du chargeur pré-enregistré au lieu de déclencher une requête de récupération générique du navigateur :

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

`getRouteModule`

Récupère un chargeur de module enregistré par son chemin.

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

Préchargement des modules enregistrés

Les modules enregistrés peuvent être préchargés avant que l'utilisateur n'y accède.

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'])

modifier ce document