dalila 1.9.2 → 1.9.4

package/dist/cli/index.js

@@ -9,27 +9,30 @@ const routeArgs = args.slice(2);
 const WATCH_DEBOUNCE_MS = 120;
 function showHelp() {
     console.log(`
-Dalila CLI
+🐰 ✂️  Dalila CLI
 
 Usage:
   dalila routes generate [options]    Generate routes + manifest from app file structure
   dalila routes init                  Initialize app and generate routes outputs
   dalila routes watch [options]       Watch routes and regenerate outputs on changes
   dalila routes --help                Show routes command help
+  dalila check [path] [--strict]     Static analysis of HTML templates against loaders
   dalila help                         Show this help message
 
 Options:
   --output <path>     Output file (default: ./routes.generated.ts)
 
 Examples:
-  dalila routes generate
-  dalila routes generate --output src/routes.generated.ts
-  dalila routes init
+  npx dalila routes generate
+  npx dalila routes generate --output src/routes.generated.ts
+  npx dalila routes init
+  npx dalila check
+  npx dalila check src/app --strict
 `);
 }
 function showRoutesHelp() {
     console.log(`
-Dalila CLI - Routes
+🐰 ✂️  Dalila CLI - Routes
 
 Usage:
   dalila routes generate [options]    Generate routes + manifest from app file structure
@@ -41,10 +44,33 @@ Options:
   --output <path>     Output file (default: ./routes.generated.ts)
 
 Examples:
-  dalila routes generate
-  dalila routes generate --output src/routes.generated.ts
-  dalila routes watch
-  dalila routes init
+  npx dalila routes generate
+  npx dalila routes generate --output src/routes.generated.ts
+  npx dalila routes watch
+  npx dalila routes init
+`);
+}
+function showCheckHelp() {
+    console.log(`
+🐰 ✂️  Dalila CLI - Check
+
+Usage:
+  dalila check [path] [options]     Static analysis of HTML templates
+
+Validates that identifiers used in HTML templates ({expr}, d-* directives)
+match the return type of the corresponding loader() in TypeScript.
+
+Arguments:
+  [path]          App directory to check (default: src/app)
+
+Options:
+  --strict        Fail when exported loader return keys cannot be inferred
+  --help, -h      Show this help message
+
+Examples:
+  npx dalila check
+  npx dalila check src/app
+  npx dalila check --strict
 `);
 }
 function hasHelpFlag(list) {
@@ -156,7 +182,7 @@ function resolveGenerateConfig(cliArgs, cwd = process.cwd()) {
 async function generateRoutes(cliArgs) {
     const { appDir, outputPath } = resolveGenerateConfig(cliArgs);
     console.log('');
-    console.log('🚀 Dalila Routes Generator');
+    console.log('🐰 ✂️  Dalila Routes Generator');
     console.log('');
     try {
         await generateRoutesFile(appDir, outputPath);
@@ -217,7 +243,7 @@ function watchRoutes(cliArgs) {
         process.exit(1);
     }
     console.log('');
-    console.log('👀 Dalila Routes Watch');
+    console.log('🐰 ✂️  Dalila Routes Watch');
     console.log(`   app: ${appDir}`);
     console.log(`   output: ${outputPath}`);
     console.log('');
@@ -331,6 +357,22 @@ async function main() {
             process.exit(1);
         }
     }
+    else if (command === 'check') {
+        const checkArgs = args.slice(1);
+        if (hasHelpFlag(checkArgs)) {
+            showCheckHelp();
+        }
+        else {
+            const strict = checkArgs.includes('--strict');
+            const positional = checkArgs.filter(a => !a.startsWith('--'));
+            const appDir = positional[0]
+                ? path.resolve(positional[0])
+                : resolveDefaultAppDir(process.cwd());
+            const { runCheck } = await import('./check.js');
+            const exitCode = await runCheck(appDir, { strict });
+            process.exit(exitCode);
+        }
+    }
     else if (command === '--help' || command === '-h') {
         showHelp();
     }

package/dist/cli/routes-generator.d.ts

@@ -1,3 +1,28 @@
+export type RouteFileType = 'middleware' | 'layout' | 'page' | 'error' | 'pending' | 'notFound';
+export interface RouteFile {
+    path: string;
+    type: RouteFileType;
+    importName: string;
+    isHtml: boolean;
+    htmlContent?: string;
+    htmlPath?: string;
+    sourceContent?: string;
+    namedExports?: string[];
+    tags?: string[];
+    lazy?: boolean;
+}
+export interface RouteNode {
+    fsPath: string;
+    segment: string;
+    routePath: string;
+    files: RouteFile[];
+    children: RouteNode[];
+}
+export declare function extractParamKeys(routePattern: string): string[];
+export declare function injectHtmlPathTemplates(node: RouteNode, routesDir: string, projectRoot: string): Promise<void>;
+export declare function findProjectRoot(startDir: string): Promise<string | null>;
+export declare function findFile(node: RouteNode, type: RouteFileType, isHtml?: boolean): RouteFile | undefined;
+export declare function buildRouteTree(routesDir: string, currentPath?: string, currentSegment?: string): Promise<RouteNode>;
 export declare function collectHtmlPathDependencyDirs(routesDir: string): string[];
 /**
  * Generate route files from the app directory.

package/dist/cli/routes-generator.js

@@ -128,7 +128,7 @@ function parseRouteParamSegment(segment) {
     }
     return { key: raw, isCatchAll: false, isOptionalCatchAll: false };
 }
-function extractParamKeys(routePattern) {
+export function extractParamKeys(routePattern) {
     const keys = [];
     const segments = normalizeRoutePath(routePattern).split('/').filter(Boolean);
     for (const segment of segments) {
@@ -257,7 +257,7 @@ function resolveHtmlPath(htmlPath, routesDir, filePath, projectRoot) {
     }
     return path.resolve(routeFileDir, htmlPath);
 }
-async function injectHtmlPathTemplates(node, routesDir, projectRoot) {
+export async function injectHtmlPathTemplates(node, routesDir, projectRoot) {
     const syntheticHtmlFiles = [];
     for (const file of node.files) {
         if (file.isHtml || !file.htmlPath)
@@ -299,7 +299,7 @@ const DEFAULT_ROUTE_TAG_POLICY = {
     ],
     priority: ['auth', 'public']
 };
-async function findProjectRoot(startDir) {
+export async function findProjectRoot(startDir) {
     let current = path.resolve(startDir);
     while (true) {
         if (await pathExists(path.join(current, 'package.json'))) {
@@ -409,7 +409,7 @@ function validateManifestTags(entries, policy) {
         }
     }
 }
-function findFile(node, type, isHtml) {
+export function findFile(node, type, isHtml) {
     return node.files.find((file) => {
         if (file.type !== type)
             return false;
@@ -467,16 +467,31 @@ function pageProps(pageHtml, pageTs) {
             if (hasNamedExport(pageTs, 'onMount')) {
                 if (pageTs.lazy) {
                     const lazyLoader = `${pageTs.importName}_lazy`;
-                    props.push(`onMount: (root: HTMLElement) => ${lazyLoader}().then(mod => {
+                    props.push(`onMount: (root: HTMLElement, data: unknown, ctx: unknown) => ${lazyLoader}().then(mod => {
       if (typeof (mod as any).onMount === 'function') {
-        (mod as any).onMount(root);
+        return (mod as any).onMount(root, data, ctx);
       }
+      return undefined;
     })`);
                 }
                 else {
                     props.push(`onMount: ${moduleExport(pageTs, 'onMount')}`);
                 }
             }
+            if (hasNamedExport(pageTs, 'onUnmount')) {
+                if (pageTs.lazy) {
+                    const lazyLoader = `${pageTs.importName}_lazy`;
+                    props.push(`onUnmount: (root: HTMLElement, data: unknown, ctx: unknown) => ${lazyLoader}().then(mod => {
+      if (typeof (mod as any).onUnmount === 'function') {
+        return (mod as any).onUnmount(root, data, ctx);
+      }
+      return undefined;
+    })`);
+                }
+                else {
+                    props.push(`onUnmount: ${moduleExport(pageTs, 'onUnmount')}`);
+                }
+            }
         }
         else {
             props.push(`view: (ctx) => fromHtml(${viewConst}, { data: ${routeDataExpr()}, scope: ctx.scope })`);
@@ -501,6 +516,12 @@ function pageProps(pageHtml, pageTs) {
     if (hasNamedExport(pageTs, 'validation')) {
         props.push(`validation: ${moduleExport(pageTs, 'validation', { allowValue: true })}`);
     }
+    if (hasNamedExport(pageTs, 'onMount')) {
+        props.push(`onMount: ${moduleExport(pageTs, 'onMount')}`);
+    }
+    if (hasNamedExport(pageTs, 'onUnmount')) {
+        props.push(`onUnmount: ${moduleExport(pageTs, 'onUnmount')}`);
+    }
     return props;
 }
 function layoutProps(indent, layoutHtml, layoutTs) {
@@ -591,7 +612,7 @@ function buildRouteTreeSync(routesDir, currentPath = '', currentSegment = '') {
     }
     return node;
 }
-async function buildRouteTree(routesDir, currentPath = '', currentSegment = '') {
+export async function buildRouteTree(routesDir, currentPath = '', currentSegment = '') {
     const node = {
         fsPath: currentPath.replace(/\\/g, '/'),
         segment: currentSegment,

package/dist/router/route-tables.d.ts

@@ -33,6 +33,9 @@ export type RouteRedirectResult = string | null | undefined | Promise<string | n
 export type RouteMiddlewareResult = RouteGuardResult;
 export type RouteMiddleware = (ctx: RouteCtx) => RouteMiddlewareResult;
 export type RouteMiddlewareResolver = RouteMiddleware[] | ((ctx: RouteCtx) => RouteMiddleware[] | null | undefined | Promise<RouteMiddleware[] | null | undefined>);
+export type RouteMountCleanup = () => void;
+export type RouteMountResult = void | RouteMountCleanup | Promise<void | RouteMountCleanup>;
+export type RouteUnmountResult = void | Promise<void>;
 /**
  * Route definition.
  *
@@ -40,19 +43,20 @@ export type RouteMiddlewareResolver = RouteMiddleware[] | ((ctx: RouteCtx) => Ro
  * data loading, state views, children, guards, middleware, redirects,
  * and params/query validation.
  */
-export interface RouteTable {
+export interface RouteTable<T = any> {
     path: string;
     id?: string;
     score?: number;
     paramKeys?: string[];
     tags?: string[];
-    view?: (ctx: RouteCtx, data: any) => Node | DocumentFragment | Node[];
-    layout?: (ctx: RouteCtx, child: Node | DocumentFragment | Node[], data: any) => Node | DocumentFragment | Node[];
-    loader?: (ctx: RouteCtx) => Promise<any>;
-    preload?: (ctx: RouteCtx) => Promise<any>;
-    onMount?: (root: HTMLElement) => void;
+    view?: (ctx: RouteCtx, data: T) => Node | DocumentFragment | Node[];
+    layout?: (ctx: RouteCtx, child: Node | DocumentFragment | Node[], data: T) => Node | DocumentFragment | Node[];
+    loader?: (ctx: RouteCtx) => Promise<T>;
+    preload?: (ctx: RouteCtx) => Promise<T>;
+    onMount?: (root: HTMLElement, data: T, ctx: RouteCtx) => RouteMountResult;
+    onUnmount?: (root: HTMLElement, data: T, ctx: RouteCtx) => RouteUnmountResult;
     pending?: (ctx: RouteCtx) => Node | DocumentFragment | Node[];
-    error?: (ctx: RouteCtx, error: unknown, data?: any) => Node | DocumentFragment | Node[];
+    error?: (ctx: RouteCtx, error: unknown, data?: T) => Node | DocumentFragment | Node[];
     notFound?: (ctx: RouteCtx) => Node | DocumentFragment | Node[];
     children?: RouteTable[];
     middleware?: RouteMiddlewareResolver;
@@ -60,6 +64,23 @@ export interface RouteTable {
     redirect?: string | ((ctx: RouteCtx) => RouteRedirectResult);
     validation?: RouteValidationResolver;
 }
+/**
+ * Helper to define a single route with full type inference between
+ * `loader` return type and the `view` / `layout` / `error` `data` parameter.
+ *
+ * @example
+ * ```ts
+ * const route = defineRoute({
+ *   path: '/users',
+ *   loader: async () => ({ users: await fetchUsers() }),
+ *   view: (ctx, data) => {
+ *     // data is inferred as { users: User[] }
+ *     return fromHtml(tpl, { data });
+ *   },
+ * });
+ * ```
+ */
+export declare function defineRoute<T = any>(route: RouteTable<T>): RouteTable<T>;
 /** Immutable snapshot of the current navigation state. */
 export interface RouteState {
     path: string;

package/dist/router/route-tables.js

@@ -1,3 +1,22 @@
+/**
+ * Helper to define a single route with full type inference between
+ * `loader` return type and the `view` / `layout` / `error` `data` parameter.
+ *
+ * @example
+ * ```ts
+ * const route = defineRoute({
+ *   path: '/users',
+ *   loader: async () => ({ users: await fetchUsers() }),
+ *   view: (ctx, data) => {
+ *     // data is inferred as { users: User[] }
+ *     return fromHtml(tpl, { data });
+ *   },
+ * });
+ * ```
+ */
+export function defineRoute(route) {
+    return route;
+}
 /** Normalize a path: ensure leading slash, collapse duplicates, strip trailing slash. */
 export function normalizePath(path) {
     if (!path)

package/dist/router/router.js

@@ -109,6 +109,11 @@ export function createRouter(config) {
     let currentLoaderController = null;
     let started = false;
     let navigationToken = 0;
+    let activeLeafRoute = null;
+    let activeRouteMountCleanup = null;
+    let activeRouteUnmountHook = null;
+    let activeLeafData = undefined;
+    let activeLeafCtx = null;
     const transitionCoalescing = new Map();
     const scrollPositions = new LRUCache(config.scrollPositionsCacheSize ?? 100);
     const preloadTagsByKey = new Map();
@@ -582,10 +587,43 @@ export function createRouter(config) {
             replace: true
         };
     }
+    function runRouteUnmountLifecycle() {
+        const cleanup = activeRouteMountCleanup;
+        const onUnmount = activeRouteUnmountHook;
+        const data = activeLeafData;
+        const ctx = activeLeafCtx;
+        activeRouteMountCleanup = null;
+        activeRouteUnmountHook = null;
+        activeLeafRoute = null;
+        activeLeafData = undefined;
+        activeLeafCtx = null;
+        if (cleanup) {
+            try {
+                cleanup();
+            }
+            catch (error) {
+                console.error('[Dalila] Error in onMount cleanup lifecycle hook:', error);
+            }
+        }
+        if (onUnmount) {
+            try {
+                const result = onUnmount(outletElement, data, ctx);
+                if (result && typeof result.then === 'function') {
+                    void result.catch((error) => {
+                        console.error('[Dalila] Error in onUnmount lifecycle hook:', error);
+                    });
+                }
+            }
+            catch (error) {
+                console.error('[Dalila] Error in onUnmount lifecycle hook:', error);
+            }
+        }
+    }
     /**
      * Mount nodes into outlet and remove loading state
      */
     function mountToOutlet(...nodes) {
+        runRouteUnmountLifecycle();
         outletElement.replaceChildren(...nodes);
         queueMicrotask(() => {
             outletElement.removeAttribute('d-loading');
@@ -950,7 +988,7 @@ export function createRouter(config) {
         }
         commitRouteState();
         try {
-            mountViewStack(matchStack, ctx, dataStack);
+            mountViewStack(matchStack, ctx, dataStack, token);
             await finishSuccessfulTransition();
         }
         catch (error) {
@@ -986,16 +1024,18 @@ export function createRouter(config) {
         return promise;
     }
     /** Compose and mount the view stack (leaf view wrapped by parent layouts). */
-    function mountViewStack(matchStack, ctx, dataStack) {
+    function mountViewStack(matchStack, ctx, dataStack, navToken) {
         try {
             let content = null;
             let leafRoute = null;
+            let leafData = undefined;
             for (let i = matchStack.length - 1; i >= 0; i--) {
                 const match = matchStack[i];
                 const data = dataStack[i];
                 const route = match.route;
                 if (i === matchStack.length - 1) {
                     leafRoute = route;
+                    leafData = data;
                     if (!route.view) {
                         console.warn(`[Dalila] Leaf route ${match.path} has no view function`);
                         return;
@@ -1027,11 +1067,54 @@ export function createRouter(config) {
             if (content) {
                 const nodes = Array.isArray(content) ? content : [content];
                 mountToOutlet(...nodes);
+                activeLeafRoute = leafRoute ?? null;
+                activeRouteUnmountHook = leafRoute?.onUnmount ?? null;
+                activeLeafData = leafData;
+                activeLeafCtx = ctx;
                 // Call onMount lifecycle hook if present
                 if (leafRoute?.onMount) {
                     queueMicrotask(() => {
+                        if (navigationToken !== navToken)
+                            return;
+                        if (activeLeafRoute !== leafRoute)
+                            return;
                         try {
-                            leafRoute.onMount(outletElement);
+                            const result = leafRoute.onMount(outletElement, leafData, ctx);
+                            if (typeof result === 'function') {
+                                if (navigationToken === navToken && activeLeafRoute === leafRoute) {
+                                    activeRouteMountCleanup = result;
+                                }
+                                else {
+                                    try {
+                                        result();
+                                    }
+                                    catch (cleanupError) {
+                                        console.error('[Dalila] Error in stale onMount cleanup lifecycle hook:', cleanupError);
+                                    }
+                                }
+                                return;
+                            }
+                            if (result && typeof result.then === 'function') {
+                                void result
+                                    .then((resolved) => {
+                                    if (typeof resolved !== 'function')
+                                        return;
+                                    if (navigationToken === navToken && activeLeafRoute === leafRoute) {
+                                        activeRouteMountCleanup = resolved;
+                                    }
+                                    else {
+                                        try {
+                                            resolved();
+                                        }
+                                        catch (cleanupError) {
+                                            console.error('[Dalila] Error in stale async onMount cleanup lifecycle hook:', cleanupError);
+                                        }
+                                    }
+                                })
+                                    .catch((error) => {
+                                    console.error('[Dalila] Error in onMount lifecycle hook:', error);
+                                });
+                            }
                         }
                         catch (error) {
                             console.error('[Dalila] Error in onMount lifecycle hook:', error);
@@ -1413,6 +1496,7 @@ export function createRouter(config) {
         document.removeEventListener('click', handleLink);
         document.removeEventListener('pointerover', handleLinkIntent);
         document.removeEventListener('focusin', handleLinkIntent);
+        runRouteUnmountLifecycle();
         if (currentLoaderController) {
             currentLoaderController.abort();
             currentLoaderController = null;

package/dist/routes.generated.d.ts

@@ -0,0 +1,2 @@
+import type { RouteTable } from 'dalila/router';
+export declare const routes: RouteTable[];

package/dist/routes.generated.js

@@ -0,0 +1,76 @@
+// This file is auto-generated by 'dalila routes generate'
+// Do not edit manually - your changes will be overwritten
+import { fromHtml } from 'dalila';
+const layout_html = `<div class="app-shell">
+  <h1>Router + PageVM + Componente</h1>
+  <nav>
+    <a href="/examples/router-simple/" d-link>Home</a>
+    <a href="/examples/router-simple/about" d-link>Sobre</a>
+  </nav>
+  <main id="outlet-slot" data-slot="children"></main>
+</div>
+`;
+const page_html = `<section>
+  <h2>Home</h2>
+  <p>PageVM da rota: <strong>HomePageVM</strong></p>
+  <status-badge d-props-text="status"></status-badge>
+  <div style="display:flex; gap:.5rem; margin-top:.75rem;">
+    <button d-on-click="increment">Incrementar</button>
+    <button d-on-click="openModal">Abrir modal</button>
+  </div>
+
+  <d-dialog d-ui="infoDialog" class="d-dialog">
+    <d-dialog-header>
+      <d-dialog-title>Modal Dalila</d-dialog-title>
+      <d-dialog-close d-on-click="closeModal">&times;</d-dialog-close>
+    </d-dialog-header>
+    <d-dialog-body>
+      <p>This modal is mounted with <code>mountUI()</code> in the route <code>onMount</code>.</p>
+      <p>Status atual: <strong d-text="status"></strong></p>
+    </d-dialog-body>
+    <d-dialog-footer>
+      <button d-on-click="closeModal">Fechar</button>
+    </d-dialog-footer>
+  </d-dialog>
+</section>
+`;
+const about_page_html = `<section>
+  <h2>Sobre</h2>
+  <p>PageVM da rota: <strong>AboutPageVM</strong></p>
+  <p>Nome atual: <strong d-text="nomeUpper"></strong></p>
+  <input d-bind-value="nome" placeholder="Digite um nome" />
+</section>
+`;
+const page_lazy = () => import('./app/page.js');
+const about_page_lazy = () => import('./app/about/page.js');
+export const routes = [
+    {
+        path: '/',
+        layout: (ctx, children) => fromHtml(layout_html, { data: { ...ctx.params, params: ctx.params, query: ctx.query.toString(), path: ctx.path, fullPath: ctx.fullPath }, children, scope: ctx.scope }),
+        children: [
+            { path: '', view: (ctx, data) => fromHtml(page_html, { data: { ...ctx.params, ...(data ?? {}), params: ctx.params, query: ctx.query.toString(), path: ctx.path, fullPath: ctx.fullPath }, scope: ctx.scope }), loader: (...args) => page_lazy().then(mod => {
+                    const exported = mod.loader;
+                    if (typeof exported === 'function') {
+                        return exported(...args);
+                    }
+                    return undefined;
+                }), onMount: (root, data, ctx) => page_lazy().then(mod => {
+                    if (typeof mod.onMount === 'function') {
+                        return mod.onMount(root, data, ctx);
+                    }
+                    return undefined;
+                }) },
+            {
+                path: 'about',
+                view: (ctx, data) => fromHtml(about_page_html, { data: { ...ctx.params, ...(data ?? {}), params: ctx.params, query: ctx.query.toString(), path: ctx.path, fullPath: ctx.fullPath }, scope: ctx.scope }),
+                loader: (...args) => about_page_lazy().then(mod => {
+                    const exported = mod.loader;
+                    if (typeof exported === 'function') {
+                        return exported(...args);
+                    }
+                    return undefined;
+                }),
+            }
+        ]
+    }
+];

package/dist/routes.generated.manifest.d.ts

@@ -0,0 +1,4 @@
+import type { RouteManifestEntry } from 'dalila/router';
+export declare const routeManifest: RouteManifestEntry[];
+export declare function getRouteManifestEntry(id: string): RouteManifestEntry | undefined;
+export declare function prefetchRouteById(id: string): Promise<void>;

package/dist/routes.generated.manifest.js

@@ -0,0 +1,32 @@
+// This file is auto-generated by 'dalila routes generate'
+// Do not edit manually - your changes will be overwritten
+export const routeManifest = [
+    {
+        id: 'root',
+        pattern: '/',
+        score: 1000,
+        paramKeys: [],
+        tags: [],
+        modules: ["./app/page.js"],
+        load: () => import('./app/page.js').then(() => undefined)
+    },
+    {
+        id: 'about',
+        pattern: '/about',
+        score: 301,
+        paramKeys: [],
+        tags: [],
+        modules: ["./app/page.js", "./app/about/page.js"],
+        load: () => Promise.all([import('./app/page.js'), import('./app/about/page.js')]).then(() => undefined)
+    },
+];
+const manifestById = new Map(routeManifest.map(route => [route.id, route]));
+export function getRouteManifestEntry(id) {
+    return manifestById.get(id);
+}
+export async function prefetchRouteById(id) {
+    const entry = manifestById.get(id);
+    if (!entry)
+        return;
+    await entry.load();
+}

package/dist/routes.generated.types.d.ts

@@ -0,0 +1,11 @@
+export type RoutePattern = '/' | '/about';
+export type RouteParamsByPattern = {
+    '/': {};
+    '/about': {};
+};
+export type RouteSearchByPattern = {
+    [P in RoutePattern]: Record<string, string | string[]>;
+};
+export type RouteParams<P extends RoutePattern> = RouteParamsByPattern[P];
+export type RouteSearch<P extends RoutePattern> = RouteSearchByPattern[P];
+export declare function buildRoutePath<P extends RoutePattern>(pattern: P, params: RouteParams<P>): string;

package/dist/routes.generated.types.js

@@ -0,0 +1,37 @@
+// This file is auto-generated by 'dalila routes generate'
+// Do not edit manually - your changes will be overwritten
+export function buildRoutePath(pattern, params) {
+    const out = [];
+    for (const segment of pattern.split('/').filter(Boolean)) {
+        if (!segment.startsWith(':')) {
+            out.push(segment);
+            continue;
+        }
+        const isOptionalCatchAll = segment.endsWith('*?');
+        const isCatchAll = isOptionalCatchAll || segment.endsWith('*');
+        const key = segment.slice(1, isCatchAll ? (isOptionalCatchAll ? -2 : -1) : undefined);
+        const value = params[key];
+        if (isCatchAll) {
+            if (value === undefined || value === null) {
+                if (isOptionalCatchAll)
+                    continue;
+                throw new Error(`Missing route param: ${key}`);
+            }
+            if (!Array.isArray(value)) {
+                throw new Error(`Route param "${key}" must be an array`);
+            }
+            if (value.length === 0) {
+                if (isOptionalCatchAll)
+                    continue;
+                throw new Error(`Route param "${key}" cannot be empty`);
+            }
+            out.push(...value.map(v => encodeURIComponent(String(v))));
+            continue;
+        }
+        if (value === undefined || value === null) {
+            throw new Error(`Missing route param: ${key}`);
+        }
+        out.push(encodeURIComponent(String(value)));
+    }
+    return out.length === 0 ? '/' : `/${out.join('/')}`;
+}