dalila 1.9.8 → 1.9.10

package/README.md

@@ -60,6 +60,8 @@ bind(document.getElementById('app')!, ctx);
 
 - [Template Binding](./docs/runtime/bind.md) — `bind()`, `mount()`, `configure()`, transitions, portal, text interpolation, events
 - [Components](./docs/runtime/component.md) — `defineComponent`, typed props/emits/refs, slots
+- [Lazy Loading](./docs/runtime/lazy.md) — `createLazyComponent`, `d-lazy`, `createSuspense` wrapper, code splitting
+- [Error Boundary](./docs/runtime/boundary.md) — `createErrorBoundary`, `createErrorBoundaryState`, `withErrorBoundary`, `d-boundary`
 - [FOUC Prevention](./docs/runtime/fouc-prevention.md) — Automatic token hiding
 
 ### Routing

package/dist/core/for.js

@@ -178,6 +178,8 @@ export function forEach(items, template, keyFn) {
         }
     };
     let hasValidatedOnce = false;
+    const reusableOldMap = new Map();
+    const reusableSeenNextKeys = new Set();
     const throwDuplicateKey = (key, scheduleFatal) => {
         const error = new Error(`[Dalila] Duplicate key "${key}" detected in forEach. ` +
             `Keys must be unique within the same list. Check your keyFn implementation.`);
@@ -231,43 +233,42 @@ export function forEach(items, template, keyFn) {
         const newItems = items();
         // Validate again on updates (will be caught by effect error handler)
         validateNoDuplicateKeys(newItems);
-        const oldMap = new Map();
-        currentItems.forEach(item => oldMap.set(item.key, item));
+        reusableOldMap.clear();
+        currentItems.forEach(item => reusableOldMap.set(item.key, item));
         const nextItems = [];
-        const itemsToUpdate = new Set();
-        const seenNextKeys = new Set();
+        reusableSeenNextKeys.clear();
         // Phase 1: Build next list + detect updates/new
         newItems.forEach((item, index) => {
             const key = getKey(item, index);
-            if (seenNextKeys.has(key))
+            if (reusableSeenNextKeys.has(key))
                 return; // prod-mode: ignore dup keys silently
-            seenNextKeys.add(key);
-            const existing = oldMap.get(key);
+            reusableSeenNextKeys.add(key);
+            const existing = reusableOldMap.get(key);
             if (existing) {
+                reusableOldMap.delete(key);
                 if (existing.value !== item) {
-                    itemsToUpdate.add(key);
                     existing.value = item;
+                    existing.dirty = true;
                 }
                 nextItems.push(existing);
             }
             else {
-                itemsToUpdate.add(key);
-                nextItems.push({
+                const created = {
                     key,
                     value: item,
                     start: document.createComment(`for:${key}:start`),
                     end: document.createComment(`for:${key}:end`),
                     scope: null,
-                    indexSignal: signal(index)
-                });
+                    indexSignal: signal(index),
+                    dirty: true,
+                };
+                nextItems.push(created);
             }
         });
         // Phase 2: Remove items no longer present
-        const nextKeys = new Set(nextItems.map(i => i.key));
-        currentItems.forEach(item => {
-            if (!nextKeys.has(item.key))
-                removeRange(item);
-        });
+        for (const staleItem of reusableOldMap.values()) {
+            removeRange(staleItem);
+        }
         // Phase 3: Move/insert items to correct positions
         const parent = end.parentNode;
         if (parent) {
@@ -288,18 +289,20 @@ export function forEach(items, template, keyFn) {
         }
         // Phase 4: Dispose scopes and clear content for changed items
         nextItems.forEach(item => {
-            if (!itemsToUpdate.has(item.key))
+            if (!item.dirty)
                 return;
             disposeItemScope(item);
             clearBetween(item.start, item.end);
         });
-        // Phase 5: Update reactive indices for ALL items
+        // Phase 5: Update reactive indices only when index actually changes
         nextItems.forEach((item, index) => {
-            item.indexSignal.set(index);
+            if (item.indexSignal.peek() !== index) {
+                item.indexSignal.set(index);
+            }
         });
         // Phase 6: Render changed items
         nextItems.forEach(item => {
-            if (!itemsToUpdate.has(item.key))
+            if (!item.dirty)
                 return;
             item.scope = createScope();
             withScope(item.scope, () => {
@@ -308,6 +311,7 @@ export function forEach(items, template, keyFn) {
                 const nodes = Array.isArray(templateResult) ? templateResult : [templateResult];
                 item.end.before(...nodes);
             });
+            item.dirty = false;
         });
         currentItems = nextItems;
     };

package/dist/core/signal.js

@@ -44,16 +44,6 @@ let activeScope = null;
  * Per-tick dedupe for async effects.
  * Multiple writes in the same tick schedule an effect only once.
  */
-const pendingEffects = new Set();
-/**
- * Stable runner per effect (function identity).
- *
- * Why:
- * - when batching, we enqueue a function into the batch queue
- * - dedupe uses function identity
- * - each effect needs a stable runner function across schedules
- */
-const effectRunners = new WeakMap();
 /**
  * Schedule an effect with correct semantics:
  * - computed invalidations run synchronously (mark dirty immediately)
@@ -73,15 +63,12 @@ function scheduleEffect(eff) {
         }
         return;
     }
-    // Dedup before scheduling.
-    if (pendingEffects.has(eff))
+    if (eff.queued)
         return;
-    pendingEffects.add(eff);
-    // Create / reuse stable runner (so batch dedupe works correctly).
-    let runEffect = effectRunners.get(eff);
-    if (!runEffect) {
-        runEffect = () => {
-            pendingEffects.delete(eff);
+    eff.queued = true;
+    if (!eff.runner) {
+        eff.runner = () => {
+            eff.queued = false;
             if (eff.disposed)
                 return;
             try {
@@ -91,14 +78,27 @@ function scheduleEffect(eff) {
                 reportEffectError(error, 'effect');
             }
         };
-        effectRunners.set(eff, runEffect);
     }
     // During batch: defer scheduling into the batch queue (no microtask overhead).
     // Outside batch: schedule in a microtask (coalescing across multiple writes).
     if (isBatching())
-        queueInBatch(runEffect);
+        queueInBatch(eff.runner);
     else
-        scheduleMicrotask(runEffect);
+        scheduleMicrotask(eff.runner);
+}
+function trySubscribeActiveEffect(subscribers, signalRef) {
+    if (!activeEffect || activeEffect.disposed)
+        return;
+    if (activeScope) {
+        const current = getCurrentScope();
+        if (activeScope !== current)
+            return;
+    }
+    if (subscribers.has(activeEffect))
+        return;
+    subscribers.add(activeEffect);
+    (activeEffect.deps ?? (activeEffect.deps = new Set())).add(subscribers);
+    trackDependency(signalRef, activeEffect);
 }
 /**
  * Create a signal: a mutable value with automatic dependency tracking.
@@ -121,28 +121,7 @@ export function signal(initialValue) {
     let signalRef;
     const read = () => {
         trackSignalRead(signalRef);
-        if (activeEffect && !activeEffect.disposed) {
-            // Scope-aware subscription guard (best effort):
-            // - if the active effect is not scoped, allow subscription
-            // - if scoped, only subscribe when currently executing inside that scope
-            if (!activeScope) {
-                if (!subscribers.has(activeEffect)) {
-                    subscribers.add(activeEffect);
-                    (activeEffect.deps ?? (activeEffect.deps = new Set())).add(subscribers);
-                    trackDependency(signalRef, activeEffect);
-                }
-            }
-            else {
-                const current = getCurrentScope();
-                if (activeScope === current) {
-                    if (!subscribers.has(activeEffect)) {
-                        subscribers.add(activeEffect);
-                        (activeEffect.deps ?? (activeEffect.deps = new Set())).add(subscribers);
-                        trackDependency(signalRef, activeEffect);
-                    }
-                }
-            }
-        }
+        trySubscribeActiveEffect(subscribers, signalRef);
         return value;
     };
     const notify = () => {
@@ -223,7 +202,7 @@ export function effect(fn) {
             return;
         run.disposed = true;
         cleanupDeps();
-        pendingEffects.delete(run);
+        run.queued = false;
         trackEffectDispose(run);
     };
     const run = (() => {
@@ -302,25 +281,7 @@ export function computed(fn) {
     const read = () => {
         trackSignalRead(signalRef);
         // Allow effects to subscribe to this computed (same rules as signal()).
-        if (activeEffect && !activeEffect.disposed) {
-            if (!activeScope) {
-                if (!subscribers.has(activeEffect)) {
-                    subscribers.add(activeEffect);
-                    (activeEffect.deps ?? (activeEffect.deps = new Set())).add(subscribers);
-                    trackDependency(signalRef, activeEffect);
-                }
-            }
-            else {
-                const current = getCurrentScope();
-                if (activeScope === current) {
-                    if (!subscribers.has(activeEffect)) {
-                        subscribers.add(activeEffect);
-                        (activeEffect.deps ?? (activeEffect.deps = new Set())).add(subscribers);
-                        trackDependency(signalRef, activeEffect);
-                    }
-                }
-            }
-        }
+        trySubscribeActiveEffect(subscribers, signalRef);
         if (dirty) {
             cleanupDeps();
             const prevEffect = activeEffect;
@@ -426,7 +387,7 @@ export function effectAsync(fn) {
         controller?.abort();
         controller = null;
         cleanupDeps();
-        pendingEffects.delete(run);
+        run.queued = false;
         trackEffectDispose(run);
     };
     const run = (() => {

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

@@ -121,6 +121,11 @@ export interface RouteStackResult {
 export interface CompiledRoute {
     route: RouteTable;
     fullPath: string;
+    normalizedFullPath: string;
+    /** Static first segment of fullPath (null for dynamic/wildcard/root-first paths). */
+    firstStaticSegment: string | null;
+    staticExactPath: string | null;
+    staticPrefixPath: string | null;
     exactPattern: RegExp;
     /** null means root "/" which always matches as prefix */
     prefixPattern: RegExp | null;

package/dist/router/route-tables.js

@@ -92,6 +92,46 @@ function sortRoutes(routes) {
 function escapeRegexSegment(segment) {
     return segment.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
+const routeLevelIndexCache = new WeakMap();
+function resolveFirstStaticSegment(path) {
+    const normalized = normalizePath(path);
+    const segments = normalized.split('/').filter(Boolean);
+    const first = segments[0];
+    if (!first)
+        return null;
+    if (first.startsWith(':') || first.includes('*'))
+        return null;
+    return first;
+}
+function isFullyStaticPath(path) {
+    const normalized = normalizePath(path);
+    const segments = normalized.split('/').filter(Boolean);
+    for (const segment of segments) {
+        if (segment.startsWith(':') || segment.includes('*'))
+            return false;
+    }
+    return true;
+}
+function buildRouteLevelIndex(compiled) {
+    const staticByFirstSegment = new Map();
+    const genericRoutes = [];
+    const staticParentRoutesWithChildren = [];
+    for (const entry of compiled) {
+        if (entry.firstStaticSegment) {
+            const bucket = staticByFirstSegment.get(entry.firstStaticSegment);
+            if (bucket)
+                bucket.push(entry);
+            else
+                staticByFirstSegment.set(entry.firstStaticSegment, [entry]);
+            if (entry.children.length > 0) {
+                staticParentRoutesWithChildren.push(entry);
+            }
+            continue;
+        }
+        genericRoutes.push(entry);
+    }
+    return { staticByFirstSegment, genericRoutes, staticParentRoutesWithChildren };
+}
 function parseDynamicSegment(segment) {
     if (!segment.startsWith(':'))
         return null;
@@ -196,6 +236,7 @@ export function compileRoutes(routes, parentPath = '') {
     return sortRoutes(routes).map(route => {
         const fullPath = joinPaths(parentPath, route.path);
         const normalizedFull = normalizePath(fullPath);
+        const staticPath = isFullyStaticPath(fullPath);
         const exact = parsePath(fullPath);
         const prefix = normalizedFull === '/'
             ? null
@@ -203,6 +244,10 @@ export function compileRoutes(routes, parentPath = '') {
         return {
             route,
             fullPath,
+            normalizedFullPath: normalizedFull,
+            firstStaticSegment: resolveFirstStaticSegment(fullPath),
+            staticExactPath: staticPath ? normalizedFull : null,
+            staticPrefixPath: staticPath && normalizedFull !== '/' ? normalizedFull : null,
             exactPattern: exact.pattern,
             prefixPattern: prefix?.pattern ?? null,
             paramCaptures: exact.paramCaptures,
@@ -214,6 +259,9 @@ export function compileRoutes(routes, parentPath = '') {
 }
 /** Test a pathname against a compiled route's exact pattern. */
 function matchCompiled(pathname, compiled) {
+    if (compiled.staticExactPath !== null) {
+        return pathname === compiled.staticExactPath ? {} : null;
+    }
     const match = pathname.match(compiled.exactPattern);
     if (!match)
         return null;
@@ -223,6 +271,12 @@ function matchCompiled(pathname, compiled) {
 function matchCompiledPrefix(pathname, compiled) {
     if (!compiled.prefixPattern)
         return {};
+    if (compiled.staticPrefixPath !== null) {
+        if (pathname === compiled.staticPrefixPath || pathname.startsWith(`${compiled.staticPrefixPath}/`)) {
+            return {};
+        }
+        return null;
+    }
     const match = pathname.match(compiled.prefixPattern);
     if (!match)
         return null;
@@ -236,11 +290,17 @@ function matchCompiledPrefix(pathname, compiled) {
  */
 export function findCompiledRouteStackResult(pathname, compiled, stack = []) {
     const normalizedPathname = normalizePath(pathname);
-    return findCompiledRouteStackResultNormalized(normalizedPathname, compiled, stack);
+    const firstPathSegment = normalizedPathname.split('/').filter(Boolean)[0] ?? '';
+    return findCompiledRouteStackResultNormalized(normalizedPathname, firstPathSegment, compiled, stack);
 }
-function findCompiledRouteStackResultNormalized(pathname, compiled, stack) {
+function findCompiledRouteStackResultNormalized(pathname, firstPathSegment, compiled, stack) {
+    let levelIndex = routeLevelIndexCache.get(compiled);
+    if (!levelIndex) {
+        levelIndex = buildRouteLevelIndex(compiled);
+        routeLevelIndexCache.set(compiled, levelIndex);
+    }
     let bestPartial = null;
-    for (const entry of compiled) {
+    const tryCandidate = (entry) => {
         const exactParams = matchCompiled(pathname, entry);
         const prefixParams = !exactParams && (entry.route.children || entry.route.layout)
             ? matchCompiledPrefix(pathname, entry)
@@ -253,29 +313,34 @@ function findCompiledRouteStackResultNormalized(pathname, compiled, stack) {
                 path: entry.fullPath,
                 params
             };
-            const newStack = [...stack, match];
+            stack.push(match);
             if (entry.children.length > 0) {
-                const childResult = findCompiledRouteStackResultNormalized(pathname, entry.children, newStack);
+                const childResult = findCompiledRouteStackResultNormalized(pathname, firstPathSegment, entry.children, stack);
                 if (childResult) {
-                    if (childResult.exact)
+                    if (childResult.exact) {
+                        stack.pop();
                         return childResult;
+                    }
                     if (!bestPartial || childResult.stack.length > bestPartial.length) {
                         bestPartial = childResult.stack;
                     }
                 }
             }
             if (isExact && (entry.route.view || entry.route.redirect)) {
-                return { stack: newStack, exact: true };
+                const exactStack = stack.slice();
+                stack.pop();
+                return { stack: exactStack, exact: true };
             }
             if (!isExact && (entry.route.layout || entry.route.children)) {
-                if (!bestPartial || newStack.length > bestPartial.length) {
-                    bestPartial = newStack;
+                if (!bestPartial || stack.length > bestPartial.length) {
+                    bestPartial = stack.slice();
                 }
             }
+            stack.pop();
         }
         else if (entry.children.length > 0) {
             // Parent didn't match but children may have absolute-like paths
-            const childResult = findCompiledRouteStackResultNormalized(pathname, entry.children, stack);
+            const childResult = findCompiledRouteStackResultNormalized(pathname, firstPathSegment, entry.children, stack);
             if (childResult) {
                 if (childResult.exact)
                     return childResult;
@@ -284,6 +349,29 @@ function findCompiledRouteStackResultNormalized(pathname, compiled, stack) {
                 }
             }
         }
+        return null;
+    };
+    const specific = levelIndex.staticByFirstSegment.get(firstPathSegment);
+    if (specific) {
+        for (const entry of specific) {
+            const exact = tryCandidate(entry);
+            if (exact)
+                return exact;
+        }
+    }
+    for (const entry of levelIndex.genericRoutes) {
+        const exact = tryCandidate(entry);
+        if (exact)
+            return exact;
+    }
+    // Preserve support for absolute-like child paths under static parents.
+    // Example: parent "/admin" with child "/login" must still resolve "/login".
+    for (const entry of levelIndex.staticParentRoutesWithChildren) {
+        if (entry.firstStaticSegment === firstPathSegment)
+            continue;
+        const exact = tryCandidate(entry);
+        if (exact)
+            return exact;
     }
     return bestPartial ? { stack: bestPartial, exact: false } : null;
 }

package/dist/router/router.js

@@ -148,17 +148,42 @@ export function createRouter(config) {
     function applyBase(fullPath) {
         if (!basePrefix)
             return fullPath;
-        const url = new URL(fullPath, window.location.origin);
-        const pathname = url.pathname === '/' ? basePrefix : normalizePath(`${basePrefix}${url.pathname}`);
-        return `${pathname}${url.search}${url.hash}`;
+        const location = parseLocation(fullPath);
+        const pathname = location.pathname === '/' ? basePrefix : normalizePath(`${basePrefix}${location.pathname}`);
+        return `${pathname}${location.queryString ? `?${location.queryString}` : ''}${location.hash ? `#${location.hash}` : ''}`;
+    }
+    function parseRelativePath(to) {
+        let rest = to;
+        let hash = '';
+        const hashIdx = rest.indexOf('#');
+        if (hashIdx >= 0) {
+            hash = rest.slice(hashIdx + 1);
+            rest = rest.slice(0, hashIdx);
+        }
+        let queryString = '';
+        const queryIdx = rest.indexOf('?');
+        if (queryIdx >= 0) {
+            queryString = rest.slice(queryIdx + 1);
+            rest = rest.slice(0, queryIdx);
+        }
+        const pathname = stripBase(rest || '/');
+        const fullPath = `${pathname}${queryString ? `?${queryString}` : ''}${hash ? `#${hash}` : ''}`;
+        return { pathname, queryString, hash, fullPath };
+    }
+    function getLocationQuery(location) {
+        if (!location.query) {
+            location.query = new URLSearchParams(location.queryString);
+        }
+        return location.query;
     }
     function parseLocation(to) {
+        // Fast path for most app navigations (absolute pathname within same origin).
+        if (to.startsWith('/')) {
+            return parseRelativePath(to);
+        }
+        // Fallback for relative paths and absolute URLs.
         const url = new URL(to, window.location.href);
-        const pathname = stripBase(url.pathname);
-        const query = new URLSearchParams(url.search);
-        const hash = url.hash ? url.hash.slice(1) : '';
-        const fullPath = `${pathname}${url.search}${hash ? `#${hash}` : ''}`;
-        return { pathname, query, hash, fullPath };
+        return parseRelativePath(`${url.pathname}${url.search}${url.hash}`);
     }
     function joinRoutePaths(parent, child) {
         if (!child || child === '.')
@@ -194,7 +219,7 @@ export function createRouter(config) {
             path: location.pathname,
             fullPath: location.fullPath,
             params: match.params,
-            queryString: location.query.toString(),
+            queryString: location.queryString,
             hash: location.hash
         });
     }
@@ -223,7 +248,7 @@ export function createRouter(config) {
     }
     function resolvePreloadKey(match, location) {
         const routeId = resolvePreloadRouteId(match);
-        const search = location.query.toString();
+        const search = location.queryString;
         const urlKey = search ? `${location.pathname}?${search}` : location.pathname;
         return `${routeId}::${match.path}::${urlKey}`;
     }
@@ -495,7 +520,7 @@ export function createRouter(config) {
             routePath: match.path,
             routeId: manifest?.id,
             params: { ...match.params },
-            queryString: location.query.toString(),
+            queryString: location.queryString,
             tags: resolveMatchTags(match),
             score: resolveMatchScore(match)
         };
@@ -656,7 +681,7 @@ export function createRouter(config) {
                 path: location.pathname,
                 fullPath: location.fullPath,
                 params: {},
-                queryString: location.query.toString(),
+                queryString: location.queryString,
                 hash: location.hash
             });
         statusSignal.set({ state: 'loading', to: toState });
@@ -941,7 +966,7 @@ export function createRouter(config) {
         // Validate all matches first, then load data in parallel
         let dataStack;
         try {
-            const queryValues = createRouteQueryValues(location.query);
+            const queryValues = createRouteQueryValues(getLocationQuery(location));
             // Phase 1: Validate (sequential -- fail fast on first error)
             for (const match of matchStack) {
                 const paramsValues = createRouteParamsValues(match.params);
@@ -1394,7 +1419,7 @@ export function createRouter(config) {
                 }
             }
         }
-        const queryValues = createRouteQueryValues(location.query);
+        const queryValues = createRouteQueryValues(getLocationQuery(location));
         const pending = [];
         for (const match of stack) {
             const preloadFn = match.route.preload ?? match.route.loader;