Module Registry

When building large-scale applications with modern asset bundlers (like Vite or Webpack), dynamic string imports in the src attribute (e.g. <page-route src="./pages/home.js">) are difficult for bundlers to trace during static analysis.

The Module Registry allows you to pre-register a map of page paths to their loader functions, enabling proper code-splitting and asset tracing in your build pipeline.

`registerRouteModules`

Registers a map of paths to their module loader functions.

1type ModuleLoader = () => Promise<any>2 3function registerRouteModules(modules: Record<string, ModuleLoader>): void

Integration Examples

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

Vite supports importing multiple files matching a glob pattern automatically:

1import { registerRouteModules } from '@beforesemicolon/router'2 3// 1. Gather all page components (lazy loaders)4const modules = import.meta.glob('./pages/**/*.{ts,js,html}', { eager: false })5 6// 2. Register with router7registerRouteModules(modules)

2. Webpack (`require.context`)

Webpack uses require.context to trace directory structures:

1import { registerRouteModules } from '@beforesemicolon/router'2 3const context = require.context('./pages', true, /\.(ts|js|html)$/)4const modules = {}5 6context.keys().forEach((key) => {7    // Map paths to loaders8    modules[key] = () => Promise.resolve(context(key))9})10 11registerRouteModules(modules)

3. Manual Registration

You can also manually map imports:

1import { registerRouteModules } from '@beforesemicolon/router'2 3registerRouteModules({4    './pages/home.js': () => import('./pages/home.js'),5    './pages/about.js': () => import('./pages/about.js'),6})

Usage in HTML

Once modules are registered, define your <page-route> tags as normal. The router will intercept the src string and resolve it using the pre-registered loader instead of triggering a generic browser fetch request:

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

`getRouteModule`

Retrieves a registered module loader by its path.

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

Preloading Registered Modules

Registered modules can be preloaded before the user navigates to them.

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

1import { preloadRouteModules } from '@beforesemicolon/router'2 3await preloadRouteModules(['./pages/dashboard.js', './pages/settings.js'])

edit this doc