dalila 1.8.2 → 1.8.4

package/dist/runtime/bind.js

@@ -7,7 +7,7 @@
  * @module dalila/runtime
  */
 import { effect, createScope, withScope, isInDevMode, signal } from '../core/index.js';
-import { WRAPPED_HANDLER } from '../form/index.js';
+import { WRAPPED_HANDLER } from '../form/form.js';
 // ============================================================================
 // Utilities
 // ============================================================================
@@ -82,6 +82,148 @@ function warn(message) {
     }
 }
 const expressionCache = new Map();
+const templateInterpolationPlanCache = new Map();
+const TEMPLATE_PLAN_CACHE_MAX_ENTRIES = 250;
+const TEMPLATE_PLAN_CACHE_TTL_MS = 10 * 60 * 1000;
+const TEMPLATE_PLAN_CACHE_CONFIG_KEY = '__dalila_bind_template_cache';
+const BENCH_FLAG = '__dalila_bind_bench';
+const BENCH_STATS_KEY = '__dalila_bind_bench_stats';
+function nowMs() {
+    return typeof performance !== 'undefined' && typeof performance.now === 'function'
+        ? performance.now()
+        : Date.now();
+}
+function coerceCacheSetting(value, fallback) {
+    if (typeof value !== 'number' || !Number.isFinite(value))
+        return fallback;
+    return Math.max(0, Math.floor(value));
+}
+function resolveTemplatePlanCacheConfig(options) {
+    const globalRaw = globalThis[TEMPLATE_PLAN_CACHE_CONFIG_KEY];
+    const fromOptions = options.templatePlanCache;
+    const maxEntries = coerceCacheSetting(fromOptions?.maxEntries ?? globalRaw?.maxEntries, TEMPLATE_PLAN_CACHE_MAX_ENTRIES);
+    const ttlMs = coerceCacheSetting(fromOptions?.ttlMs ?? globalRaw?.ttlMs, TEMPLATE_PLAN_CACHE_TTL_MS);
+    return { maxEntries, ttlMs };
+}
+function createBindBenchSession() {
+    const enabled = isInDevMode() && globalThis[BENCH_FLAG] === true;
+    return {
+        enabled,
+        scanMs: 0,
+        parseMs: 0,
+        totalExpressions: 0,
+        fastPathExpressions: 0,
+        planCacheHit: false,
+    };
+}
+function flushBindBenchSession(session) {
+    if (!session.enabled)
+        return;
+    const stats = {
+        scanMs: Number(session.scanMs.toFixed(3)),
+        parseMs: Number(session.parseMs.toFixed(3)),
+        totalExpressions: session.totalExpressions,
+        fastPathExpressions: session.fastPathExpressions,
+        fastPathHitPercent: session.totalExpressions === 0
+            ? 0
+            : Number(((session.fastPathExpressions / session.totalExpressions) * 100).toFixed(2)),
+        planCacheHit: session.planCacheHit,
+    };
+    const globalObj = globalThis;
+    const bucket = globalObj[BENCH_STATS_KEY] ?? {};
+    const runs = Array.isArray(bucket.runs) ? bucket.runs : [];
+    runs.push(stats);
+    if (runs.length > 200)
+        runs.shift();
+    bucket.runs = runs;
+    bucket.last = stats;
+    globalObj[BENCH_STATS_KEY] = bucket;
+}
+function compileFastPathExpression(expression) {
+    let i = 0;
+    const literalKeywords = {
+        true: true,
+        false: false,
+        null: null,
+        undefined: undefined,
+    };
+    const skipSpaces = () => {
+        while (i < expression.length && /\s/.test(expression[i]))
+            i++;
+    };
+    const readIdentifier = () => {
+        if (i >= expression.length || !isIdentStart(expression[i]))
+            return null;
+        const start = i;
+        i++;
+        while (i < expression.length && isIdentPart(expression[i]))
+            i++;
+        return expression.slice(start, i);
+    };
+    const readNumericIndex = () => {
+        if (i >= expression.length || !/[0-9]/.test(expression[i]))
+            return null;
+        const start = i;
+        i++;
+        while (i < expression.length && /[0-9]/.test(expression[i]))
+            i++;
+        return Number(expression.slice(start, i));
+    };
+    skipSpaces();
+    const root = readIdentifier();
+    if (!root)
+        return null;
+    if (Object.prototype.hasOwnProperty.call(literalKeywords, root)) {
+        skipSpaces();
+        if (i === expression.length) {
+            return { type: 'literal', value: literalKeywords[root] };
+        }
+        // Keep parser behavior for keyword literals followed by extra syntax.
+        return null;
+    }
+    let node = { type: 'identifier', name: root };
+    skipSpaces();
+    while (i < expression.length) {
+        if (expression[i] === '.') {
+            i++;
+            skipSpaces();
+            const prop = readIdentifier();
+            if (!prop)
+                return null;
+            node = {
+                type: 'member',
+                object: node,
+                property: { type: 'literal', value: prop },
+                computed: false,
+                optional: false,
+            };
+            skipSpaces();
+            continue;
+        }
+        if (expression[i] === '[') {
+            i++;
+            skipSpaces();
+            const index = readNumericIndex();
+            if (index === null)
+                return null;
+            skipSpaces();
+            if (expression[i] !== ']')
+                return null;
+            i++;
+            node = {
+                type: 'member',
+                object: node,
+                property: { type: 'literal', value: index },
+                computed: true,
+                optional: false,
+            };
+            skipSpaces();
+            continue;
+        }
+        return null;
+    }
+    return node;
+}
 function isIdentStart(ch) {
     return /[a-zA-Z_$]/.test(ch);
 }
@@ -481,15 +623,29 @@ function evalExpressionAst(node, ctx) {
     };
     return evalNode(node);
 }
-function parseInterpolationExpression(expression) {
+function compileInterpolationExpression(expression) {
+    const fastPathAst = compileFastPathExpression(expression);
+    if (fastPathAst) {
+        return { kind: 'fast_path', ast: fastPathAst };
+    }
+    return { kind: 'parser', expression };
+}
+function parseInterpolationExpression(expression, benchSession) {
     let ast = expressionCache.get(expression);
     if (ast === undefined) {
+        const parseStart = benchSession?.enabled ? nowMs() : 0;
         try {
             ast = parseExpression(expression);
             expressionCache.set(expression, ast);
+            if (benchSession?.enabled) {
+                benchSession.parseMs += nowMs() - parseStart;
+            }
         }
         catch (err) {
             expressionCache.set(expression, null);
+            if (benchSession?.enabled) {
+                benchSession.parseMs += nowMs() - parseStart;
+            }
             return {
                 ok: false,
                 message: `Text interpolation parse error in "{${expression}}": ${err.message}`,
@@ -576,31 +732,203 @@ const DEFAULT_RAW_TEXT_SELECTORS = 'pre, code';
 // Text Interpolation
 // ============================================================================
 /**
- * Process a text node and replace {tokens} with reactive bindings
+ * Build interpolation segments for one text node.
  */
-function bindTextNode(node, ctx, cleanups) {
-    const text = node.data;
+function buildTextInterpolationSegments(text) {
     const regex = /\{([^{}]+)\}/g;
-    // Check if there are any tokens
-    if (!regex.test(text))
-        return;
-    // Reset regex
-    regex.lastIndex = 0;
-    const frag = document.createDocumentFragment();
+    const segments = [];
     let cursor = 0;
     let match;
     while ((match = regex.exec(text)) !== null) {
-        // Add text before the token
         const before = text.slice(cursor, match.index);
         if (before) {
-            frag.appendChild(document.createTextNode(before));
+            segments.push({ type: 'text', value: before });
         }
         const rawToken = match[0];
         const expression = match[1].trim();
+        segments.push({
+            type: 'expr',
+            rawToken,
+            expression,
+            compiled: compileInterpolationExpression(expression),
+        });
+        cursor = match.index + match[0].length;
+    }
+    const after = text.slice(cursor);
+    if (after) {
+        segments.push({ type: 'text', value: after });
+    }
+    return segments;
+}
+function getNodePath(root, node) {
+    const path = [];
+    let current = node;
+    while (current && current !== root) {
+        const parentNode = current.parentNode;
+        if (!parentNode)
+            return null;
+        path.push(Array.prototype.indexOf.call(parentNode.childNodes, current));
+        current = parentNode;
+    }
+    if (current !== root)
+        return null;
+    path.reverse();
+    return path;
+}
+function getNodeAtPath(root, path) {
+    let current = root;
+    for (const index of path) {
+        const child = current.childNodes[index];
+        if (!child)
+            return null;
+        current = child;
+    }
+    return current;
+}
+function fnv1aStep(hash, value) {
+    let h = hash ^ value;
+    h = Math.imul(h, 0x01000193);
+    return h >>> 0;
+}
+function fnv1aString(hash, value) {
+    let h = hash;
+    for (let i = 0; i < value.length; i++) {
+        h = fnv1aStep(h, value.charCodeAt(i));
+    }
+    return h;
+}
+function hashNodeStructure(hash, node) {
+    let h = fnv1aStep(hash, node.nodeType);
+    if (node.nodeType === 1) {
+        const el = node;
+        h = fnv1aString(h, el.tagName);
+        h = fnv1aStep(h, el.attributes.length);
+        const attrs = Array.from(el.attributes)
+            .map((attr) => `${attr.name}=${attr.value}`)
+            .sort();
+        for (const attr of attrs) {
+            h = fnv1aString(h, attr);
+        }
+    }
+    else if (node.nodeType === 3) {
+        h = fnv1aString(h, node.data);
+    }
+    else if (node.nodeType === 8) {
+        h = fnv1aString(h, node.data);
+    }
+    h = fnv1aStep(h, node.childNodes.length);
+    for (let i = 0; i < node.childNodes.length; i++) {
+        h = hashNodeStructure(h, node.childNodes[i]);
+    }
+    return h;
+}
+function createInterpolationTemplateSignature(root, rawTextSelectors) {
+    let hash = 0x811c9dc5;
+    hash = fnv1aString(hash, rawTextSelectors);
+    hash = fnv1aString(hash, root.tagName);
+    hash = hashNodeStructure(hash, root);
+    return `${root.tagName}:${hash.toString(16)}`;
+}
+function createInterpolationTemplatePlan(root, rawTextSelectors) {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    const bindings = [];
+    let totalExpressions = 0;
+    let fastPathExpressions = 0;
+    const textBoundary = root.closest('[data-dalila-internal-bound]');
+    while (walker.nextNode()) {
+        const node = walker.currentNode;
+        const parent = node.parentElement;
+        if (parent && parent.closest(rawTextSelectors))
+            continue;
+        if (parent) {
+            const bound = parent.closest('[data-dalila-internal-bound]');
+            if (bound !== textBoundary)
+                continue;
+        }
+        if (!node.data.includes('{'))
+            continue;
+        const segments = buildTextInterpolationSegments(node.data);
+        const hasExpression = segments.some((segment) => segment.type === 'expr');
+        if (!hasExpression)
+            continue;
+        const path = getNodePath(root, node);
+        if (!path)
+            continue;
+        for (const segment of segments) {
+            if (segment.type !== 'expr')
+                continue;
+            totalExpressions++;
+            if (segment.compiled.kind === 'fast_path')
+                fastPathExpressions++;
+        }
+        bindings.push({ path, segments });
+    }
+    return {
+        bindings,
+        totalExpressions,
+        fastPathExpressions,
+    };
+}
+function resolveCompiledExpression(compiled, benchSession) {
+    if (compiled.kind === 'fast_path') {
+        return { ok: true, ast: compiled.ast };
+    }
+    return parseInterpolationExpression(compiled.expression, benchSession);
+}
+function pruneTemplatePlanCache(now, config) {
+    // 1) Remove expired plans first.
+    for (const [key, entry] of templateInterpolationPlanCache) {
+        if (entry.expiresAt <= now) {
+            templateInterpolationPlanCache.delete(key);
+        }
+    }
+    // 2) Enforce LRU cap.
+    while (templateInterpolationPlanCache.size > config.maxEntries) {
+        const oldestKey = templateInterpolationPlanCache.keys().next().value;
+        if (!oldestKey)
+            break;
+        templateInterpolationPlanCache.delete(oldestKey);
+    }
+}
+function getCachedTemplatePlan(signature, now, config) {
+    if (config.maxEntries === 0 || config.ttlMs === 0)
+        return null;
+    const entry = templateInterpolationPlanCache.get(signature);
+    if (!entry)
+        return null;
+    if (entry.expiresAt <= now) {
+        templateInterpolationPlanCache.delete(signature);
+        return null;
+    }
+    // Refresh recency and TTL window.
+    templateInterpolationPlanCache.delete(signature);
+    templateInterpolationPlanCache.set(signature, {
+        plan: entry.plan,
+        lastUsedAt: now,
+        expiresAt: now + config.ttlMs,
+    });
+    return entry.plan;
+}
+function setCachedTemplatePlan(signature, plan, now, config) {
+    if (config.maxEntries === 0 || config.ttlMs === 0)
+        return;
+    templateInterpolationPlanCache.set(signature, {
+        plan,
+        lastUsedAt: now,
+        expiresAt: now + config.ttlMs,
+    });
+    pruneTemplatePlanCache(now, config);
+}
+function bindTextNodeFromPlan(node, plan, ctx, benchSession) {
+    const frag = document.createDocumentFragment();
+    for (const segment of plan.segments) {
+        if (segment.type === 'text') {
+            frag.appendChild(document.createTextNode(segment.value));
+            continue;
+        }
         const textNode = document.createTextNode('');
         let warnedParse = false;
         let warnedMissingIdentifier = false;
-        const parsed = parseInterpolationExpression(expression);
         const applyResult = (result) => {
             if (!result.ok) {
                 if (result.reason === 'parse') {
@@ -615,9 +943,9 @@ function bindTextNode(node, ctx, cleanups) {
                 }
                 // Backward compatibility for "{identifier}" missing from context:
                 // preserve the literal token exactly as before.
-                const simpleIdent = expression.match(/^[a-zA-Z_$][\w$]*$/);
+                const simpleIdent = segment.expression.match(/^[a-zA-Z_$][\w$]*$/);
                 if (result.reason === 'missing_identifier' && simpleIdent && result.identifier === simpleIdent[0]) {
-                    textNode.data = rawToken;
+                    textNode.data = segment.rawToken;
                 }
                 else {
                     textNode.data = '';
@@ -626,10 +954,10 @@ function bindTextNode(node, ctx, cleanups) {
             }
             textNode.data = result.value == null ? '' : String(result.value);
         };
+        const parsed = resolveCompiledExpression(segment.compiled, benchSession);
         if (!parsed.ok) {
             applyResult({ ok: false, reason: 'parse', message: parsed.message });
             frag.appendChild(textNode);
-            cursor = match.index + match[0].length;
             continue;
         }
         // First render is synchronous to avoid empty text until microtask flush.
@@ -641,18 +969,41 @@ function bindTextNode(node, ctx, cleanups) {
             });
         }
         frag.appendChild(textNode);
-        cursor = match.index + match[0].length;
-    }
-    // Add remaining text
-    const after = text.slice(cursor);
-    if (after) {
-        frag.appendChild(document.createTextNode(after));
     }
-    // Replace original node
     if (node.parentNode) {
         node.parentNode.replaceChild(frag, node);
     }
 }
+function bindTextInterpolation(root, ctx, rawTextSelectors, cacheConfig, benchSession) {
+    const signature = createInterpolationTemplateSignature(root, rawTextSelectors);
+    const now = nowMs();
+    let plan = getCachedTemplatePlan(signature, now, cacheConfig);
+    const scanStart = benchSession?.enabled ? nowMs() : 0;
+    if (!plan) {
+        plan = createInterpolationTemplatePlan(root, rawTextSelectors);
+        setCachedTemplatePlan(signature, plan, now, cacheConfig);
+    }
+    else if (benchSession) {
+        benchSession.planCacheHit = true;
+    }
+    if (benchSession?.enabled) {
+        benchSession.scanMs += nowMs() - scanStart;
+        benchSession.totalExpressions = plan.totalExpressions;
+        benchSession.fastPathExpressions = plan.fastPathExpressions;
+    }
+    if (plan.bindings.length === 0)
+        return;
+    const nodesToBind = [];
+    for (const binding of plan.bindings) {
+        const target = getNodeAtPath(root, binding.path);
+        if (target && target.nodeType === 3) {
+            nodesToBind.push({ node: target, binding });
+        }
+    }
+    for (const item of nodesToBind) {
+        bindTextNodeFromPlan(item.node, item.binding, ctx, benchSession);
+    }
+}
 // ============================================================================
 // Event Binding
 // ============================================================================
@@ -780,10 +1131,10 @@ function bindEach(root, ctx, cleanups) {
         const bindingName = normalizeBinding(el.getAttribute('d-each'));
         if (!bindingName)
             continue;
-        const binding = ctx[bindingName];
+        let binding = ctx[bindingName];
         if (binding === undefined) {
             warn(`d-each: "${bindingName}" not found in context`);
-            continue;
+            binding = [];
         }
         const comment = document.createComment('d-each');
         el.parentNode?.replaceChild(comment, el);
@@ -1718,6 +2069,8 @@ function bindArrayOperations(container, fieldArray, cleanups) {
 export function bind(root, ctx, options = {}) {
     const events = options.events ?? DEFAULT_EVENTS;
     const rawTextSelectors = options.rawTextSelectors ?? DEFAULT_RAW_TEXT_SELECTORS;
+    const templatePlanCacheConfig = resolveTemplatePlanCacheConfig(options);
+    const benchSession = createBindBenchSession();
     const htmlRoot = root;
     // HMR support: Register binding context globally in dev mode.
     // Skip for internal (d-each clone) bindings — only the top-level bind owns HMR.
@@ -1735,33 +2088,8 @@ export function bind(root, ctx, options = {}) {
         bindArray(root, ctx, cleanups);
         // 3. d-each — must run early: removes templates before TreeWalker visits them
         bindEach(root, ctx, cleanups);
-        // 4. Text interpolation
-        const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-        const textNodes = [];
-        // Same boundary logic as qsaIncludingRoot: only visit text nodes that
-        // belong to this bind scope, not to nested already-bound subtrees.
-        const textBoundary = root.closest('[data-dalila-internal-bound]');
-        while (walker.nextNode()) {
-            const node = walker.currentNode;
-            const parent = node.parentElement;
-            // Skip nodes inside raw text containers
-            if (parent && parent.closest(rawTextSelectors)) {
-                continue;
-            }
-            // Skip nodes inside already-bound subtrees (d-each clones)
-            if (parent) {
-                const bound = parent.closest('[data-dalila-internal-bound]');
-                if (bound !== textBoundary)
-                    continue;
-            }
-            if (node.data.includes('{')) {
-                textNodes.push(node);
-            }
-        }
-        // Process text nodes (collect first, then process to avoid walker issues)
-        for (const node of textNodes) {
-            bindTextNode(node, ctx, cleanups);
-        }
+        // 4. Text interpolation (template plan cache + lazy parser fallback)
+        bindTextInterpolation(root, ctx, rawTextSelectors, templatePlanCacheConfig, benchSession);
         // 5. d-attr bindings
         bindAttrs(root, ctx, cleanups);
         // 6. d-html bindings
@@ -1788,6 +2116,7 @@ export function bind(root, ctx, options = {}) {
             htmlRoot.setAttribute('d-ready', '');
         });
     }
+    flushBindBenchSession(benchSession);
     // Return dispose function
     return () => {
         // Run manual cleanups (event listeners)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dalila",
-  "version": "1.8.2",
+  "version": "1.8.4",
   "description": "DOM-first reactive framework based on signals",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/componentes/ui/accordion/index.d.ts

@@ -1,2 +0,0 @@
-import type { Accordion, AccordionOptions } from "../ui-types.js";
-export declare function createAccordion(options?: AccordionOptions): Accordion;

package/dist/componentes/ui/accordion/index.js

@@ -1,114 +0,0 @@
-import { signal, computed } from "../../../core/signal.js";
-import { getCurrentScope } from "../../../core/scope.js";
-export function createAccordion(options = {}) {
-    const { single = false, initial = [] } = options;
-    const hasInitial = Object.prototype.hasOwnProperty.call(options, "initial");
-    const seededInitial = single ? initial.slice(0, 1) : initial;
-    const openItems = signal(new Set(seededInitial));
-    const toggle = (itemId) => {
-        openItems.update((current) => {
-            const next = new Set(current);
-            if (next.has(itemId)) {
-                next.delete(itemId);
-            }
-            else {
-                if (single)
-                    next.clear();
-                next.add(itemId);
-            }
-            return next;
-        });
-    };
-    const open = (itemId) => {
-        openItems.update((current) => {
-            const next = new Set(current);
-            if (single)
-                next.clear();
-            next.add(itemId);
-            return next;
-        });
-    };
-    const close = (itemId) => {
-        openItems.update((current) => {
-            const next = new Set(current);
-            next.delete(itemId);
-            return next;
-        });
-    };
-    const _isOpenCache = new Map();
-    const isOpen = (itemId) => {
-        let sig = _isOpenCache.get(itemId);
-        if (!sig) {
-            sig = computed(() => openItems().has(itemId));
-            _isOpenCache.set(itemId, sig);
-        }
-        return sig;
-    };
-    const _attachTo = (el) => {
-        const scope = getCurrentScope();
-        let syncing = false;
-        const allDetails = () => Array.from(el.querySelectorAll("details[data-accordion]"));
-        const syncDOMFromSignal = (set) => {
-            syncing = true;
-            for (const details of allDetails()) {
-                const itemId = details.dataset.accordion;
-                if (!itemId)
-                    continue;
-                details.open = set.has(itemId);
-            }
-            syncing = false;
-        };
-        const syncSignalFromDOM = () => {
-            const next = new Set();
-            for (const details of allDetails()) {
-                if (!details.open)
-                    continue;
-                const itemId = details.dataset.accordion;
-                if (!itemId)
-                    continue;
-                if (single) {
-                    next.clear();
-                }
-                next.add(itemId);
-            }
-            openItems.set(next);
-        };
-        const onToggle = (ev) => {
-            const details = ev.target;
-            if (syncing)
-                return;
-            const itemId = details.dataset.accordion;
-            if (!itemId)
-                return;
-            openItems.update((current) => {
-                const next = new Set(current);
-                if (details.open) {
-                    if (single)
-                        next.clear();
-                    next.add(itemId);
-                }
-                else {
-                    next.delete(itemId);
-                }
-                return next;
-            });
-        };
-        const unsub = openItems.on((set) => {
-            if (!syncing)
-                syncDOMFromSignal(set);
-        });
-        // If initial was not provided, respect current DOM open state.
-        if (!hasInitial)
-            syncSignalFromDOM();
-        else
-            syncDOMFromSignal(openItems());
-        el.addEventListener("toggle", onToggle, true);
-        if (scope) {
-            scope.onCleanup(() => {
-                unsub();
-                el.removeEventListener("toggle", onToggle, true);
-            });
-        }
-    };
-    return { openItems, toggle, open, close, isOpen, _attachTo };
-}

package/dist/componentes/ui/calendar/index.d.ts

@@ -1,2 +0,0 @@
-import type { Calendar, CalendarOptions } from "../ui-types.js";
-export declare function createCalendar(options?: CalendarOptions): Calendar;