dalila 1.10.4 → 1.10.5

package/dist/core/html.js

@@ -1,8 +1,21 @@
 // Placeholder tokens injected into raw HTML so that dynamic values can be
 // located and replaced after the browser parses the markup.
-const TOKEN_PREFIX = '__DALILA_SLOT_';
 const TOKEN_SUFFIX = '__';
-const TOKEN_REGEX = /__DALILA_SLOT_(\d+)__/g;
+let tokenNamespaceCounter = 0;
+function escapeRegExp(text) {
+    return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+function createTokenSpec(strings) {
+    const source = strings.join('');
+    let prefix = '';
+    do {
+        prefix = `__DALILA_SLOT_${(tokenNamespaceCounter++).toString(36)}_`;
+    } while (source.includes(prefix));
+    return {
+        prefix,
+        regex: new RegExp(`${escapeRegExp(prefix)}(\\d+)${escapeRegExp(TOKEN_SUFFIX)}`, 'g'),
+    };
+}
 function isNode(value) {
     return typeof Node !== 'undefined' && value instanceof Node;
 }
@@ -35,14 +48,15 @@ function toAttributeValue(value) {
     return String(value);
 }
 /** Walk a text node, replacing placeholder tokens with their corresponding values. */
-function replaceTextTokens(node, values) {
+function replaceTextTokens(node, values, tokenSpec) {
     const text = node.nodeValue ?? '';
-    if (!text.includes(TOKEN_PREFIX))
+    if (!text.includes(tokenSpec.prefix))
         return;
     const fragment = document.createDocumentFragment();
     let lastIndex = 0;
     let match = null;
-    while ((match = TOKEN_REGEX.exec(text))) {
+    tokenSpec.regex.lastIndex = 0;
+    while ((match = tokenSpec.regex.exec(text))) {
         const matchIndex = match.index;
         const tokenLength = match[0].length;
         if (matchIndex > lastIndex) {
@@ -69,11 +83,12 @@ function replaceTextTokens(node, values) {
  * Single-token attributes set to null/undefined/false are removed entirely
  * (useful for conditional boolean attributes like `disabled`).
  */
-function replaceAttributeTokens(element, values) {
+function replaceAttributeTokens(element, values, tokenSpec) {
     for (const attr of Array.from(element.attributes)) {
-        if (!attr.value.includes(TOKEN_PREFIX))
+        if (!attr.value.includes(tokenSpec.prefix))
             continue;
-        const tokenMatches = Array.from(attr.value.matchAll(TOKEN_REGEX));
+        tokenSpec.regex.lastIndex = 0;
+        const tokenMatches = Array.from(attr.value.matchAll(tokenSpec.regex));
         const singleTokenMatch = tokenMatches.length === 1 && attr.value.trim() === tokenMatches[0][0];
         if (singleTokenMatch) {
             const value = values[Number(tokenMatches[0][1])];
@@ -82,7 +97,8 @@ function replaceAttributeTokens(element, values) {
                 continue;
             }
         }
-        const nextValue = attr.value.replace(TOKEN_REGEX, (_, index) => {
+        tokenSpec.regex.lastIndex = 0;
+        const nextValue = attr.value.replace(tokenSpec.regex, (_, index) => {
             const value = values[Number(index)];
             return toAttributeValue(value);
         });
@@ -108,11 +124,12 @@ function replaceAttributeTokens(element, values) {
  * ```
  */
 export function html(strings, ...values) {
+    const tokenSpec = createTokenSpec(strings);
     let markup = '';
     for (let i = 0; i < strings.length; i += 1) {
         markup += strings[i];
         if (i < values.length) {
-            markup += `${TOKEN_PREFIX}${i}${TOKEN_SUFFIX}`;
+            markup += `${tokenSpec.prefix}${i}${TOKEN_SUFFIX}`;
         }
     }
     const template = document.createElement('template');
@@ -125,11 +142,11 @@ export function html(strings, ...values) {
     }
     for (const node of nodes) {
         if (node.nodeType === Node.TEXT_NODE) {
-            replaceTextTokens(node, values);
+            replaceTextTokens(node, values, tokenSpec);
             continue;
         }
         if (node.nodeType === Node.ELEMENT_NODE) {
-            replaceAttributeTokens(node, values);
+            replaceAttributeTokens(node, values, tokenSpec);
         }
     }
     return fragment;

package/dist/core/signal.d.ts

@@ -28,6 +28,7 @@ export declare function setEffectErrorHandler(handler: EffectErrorHandler | null
  * User-provided handlers registered via `setEffectErrorHandler()` always win.
  */
 export declare function setDefaultEffectErrorHandler(handler: EffectErrorHandler | null): void;
+export declare const WRITABLE_SIGNAL_MARKER: unique symbol;
 export interface Signal<T> {
     /** Read the current value (with dependency tracking if inside an effect). */
     (): T;
@@ -39,6 +40,8 @@ export interface Signal<T> {
     peek(): T;
     /** Subscribe to value changes manually (outside of effects). Returns unsubscribe function. */
     on(callback: (value: T) => void): () => void;
+    /** Internal nominal marker used by the runtime to detect writable signals quickly. */
+    readonly [WRITABLE_SIGNAL_MARKER]?: true;
 }
 export interface ReadonlySignal<T> {
     /** Read the current value (with dependency tracking if inside an effect). */
@@ -47,6 +50,8 @@ export interface ReadonlySignal<T> {
     peek(): T;
     /** Subscribe to value changes manually (outside of effects). Returns unsubscribe function. */
     on(callback: (value: T) => void): () => void;
+    /** Internal nominal marker used by the runtime to detect signal mutability quickly. */
+    readonly [WRITABLE_SIGNAL_MARKER]?: boolean;
 }
 export interface ComputedSignal<T> extends ReadonlySignal<T> {
     /** Nominal marker to improve IntelliSense/readability in docs and types. */

package/dist/core/signal.js

@@ -58,6 +58,7 @@ function reportEffectError(error, source) {
     }
     reportEffectErrorWithHandlers(err, source);
 }
+export const WRITABLE_SIGNAL_MARKER = Symbol('dalila.writable-signal');
 /**
  * Currently executing effect for dependency collection.
  * Any signal read while this is set subscribes this effect.
@@ -220,6 +221,12 @@ export function signal(initialValue) {
             subscriber.deps?.delete(subscribers);
         };
     };
+    Object.defineProperty(read, WRITABLE_SIGNAL_MARKER, {
+        value: true,
+        configurable: false,
+        enumerable: false,
+        writable: false,
+    });
     signalRef = read;
     registerSignal(signalRef, 'signal', {
         scopeRef: owningScope,
@@ -257,6 +264,12 @@ export function readonly(source) {
         enumerable: false,
         writable: false,
     });
+    Object.defineProperty(read, WRITABLE_SIGNAL_MARKER, {
+        value: false,
+        configurable: false,
+        enumerable: false,
+        writable: false,
+    });
     return read;
 }
 function assertTimingOptions(waitMs, leading, trailing, kind) {
@@ -452,8 +465,6 @@ export function computed(fn) {
     let dirty = true;
     const subscribers = new Set();
     let signalRef;
-    // Dep sets that `markDirty` is currently registered in (so we can unsubscribe on recompute).
-    let trackedDeps = new Set();
     /**
      * Internal invalidator.
      * Runs synchronously when any dependency changes.
@@ -467,20 +478,11 @@ export function computed(fn) {
     });
     markDirty.disposed = false;
     markDirty.sync = true;
-    const cleanupDeps = () => {
-        for (const depSet of trackedDeps) {
-            depSet.delete(markDirty);
-            untrackDependencyBySet(depSet, markDirty);
-        }
-        trackedDeps.clear();
-        if (markDirty.deps)
-            markDirty.deps.clear();
-    };
     const recomputeIfDirty = () => {
         if (!dirty)
             return;
         trackComputedRunStart(signalRef);
-        cleanupDeps();
+        cleanupEffectDeps(markDirty);
         const prevEffect = activeEffect;
         const prevScope = activeScope;
         // Collect deps into markDirty.
@@ -489,8 +491,6 @@ export function computed(fn) {
         try {
             value = fn();
             dirty = false;
-            if (markDirty.deps)
-                trackedDeps = new Set(markDirty.deps);
         }
         finally {
             trackComputedRunEnd(signalRef);
@@ -534,6 +534,12 @@ export function computed(fn) {
             subscriber.deps?.delete(subscribers);
         };
     };
+    Object.defineProperty(read, WRITABLE_SIGNAL_MARKER, {
+        value: false,
+        configurable: false,
+        enumerable: false,
+        writable: false,
+    });
     signalRef = read;
     registerSignal(signalRef, 'computed', {
         scopeRef: owningScope,

package/dist/runtime/bind.js

@@ -8,7 +8,7 @@
  */
 import { isInDevMode } from '../core/dev.js';
 import { createScope, getCurrentScope, withScope } from '../core/scope.js';
-import { effect, FatalEffectError, signal } from '../core/signal.js';
+import { effect, FatalEffectError, signal, WRITABLE_SIGNAL_MARKER, } from '../core/signal.js';
 import { withSchedulerPriority } from '../core/scheduler.js';
 import { WRAPPED_HANDLER } from '../form/form.js';
 import { linkScopeToDom, withDevtoolsDomTarget } from '../core/devtools.js';
@@ -34,8 +34,14 @@ function isSignal(value) {
 function isWritableSignal(value) {
     if (!isSignal(value))
         return false;
+    const marker = value[WRITABLE_SIGNAL_MARKER];
+    if (marker === true)
+        return true;
+    if (marker === false)
+        return false;
     // `computed()` exposes set/update that always throw. Probe with a no-op write
     // (same value) to detect read-only signals without mutating state.
+    // Keep the fallback for signal-like values that do not carry Dalila's marker.
     try {
         const current = value.peek();
         value.set(current);
@@ -105,6 +111,19 @@ function isWarnAsErrorEnabledForActiveScope() {
 }
 const RAW_BLOCK_SELECTORS = '[d-pre], [d-raw], d-pre, d-raw, [data-dalila-raw]';
 const RAW_BLOCK_STYLE_ID = 'dalila-raw-block-default-styles';
+const INTERNAL_BOUND_SELECTOR = '[data-dalila-internal-bound]';
+function createNearestBoundaryResolver() {
+    const cache = new WeakMap();
+    return (el) => {
+        if (!el)
+            return null;
+        if (cache.has(el))
+            return cache.get(el) ?? null;
+        const nearest = el.closest(INTERNAL_BOUND_SELECTOR);
+        cache.set(el, nearest);
+        return nearest;
+    };
+}
 function ensureRawBlockDefaultStyles() {
     if (typeof document === 'undefined')
         return;
@@ -132,14 +151,15 @@ function elementDepth(el) {
     return depth;
 }
 function collectRawBlocks(root) {
-    const boundary = root.closest('[data-dalila-internal-bound]');
+    const resolveBoundary = createNearestBoundaryResolver();
+    const boundary = resolveBoundary(root);
     const matches = [];
     if (root.matches(RAW_BLOCK_SELECTORS)) {
         matches.push(root);
     }
     matches.push(...Array.from(root.querySelectorAll(RAW_BLOCK_SELECTORS)));
     const inScope = matches.filter((el) => {
-        const bound = el.closest('[data-dalila-internal-bound]');
+        const bound = resolveBoundary(el);
         return bound === boundary;
     });
     inScope.sort((a, b) => elementDepth(a) - elementDepth(b));
@@ -171,7 +191,8 @@ function isInsideRawBlock(el, boundary) {
     return rawRoot.closest('[data-dalila-internal-bound]') === boundary;
 }
 function createBindScanPlan(root) {
-    const boundary = root.closest('[data-dalila-internal-bound]');
+    const resolveBoundary = createNearestBoundaryResolver();
+    const boundary = resolveBoundary(root);
     const elements = [];
     const attrIndex = new Map();
     const tagIndex = new Map();
@@ -191,16 +212,13 @@ function createBindScanPlan(root) {
         }
     };
     if (root.matches('*')) {
-        const rootBoundary = root.closest('[data-dalila-internal-bound]');
-        if (rootBoundary === boundary) {
-            elements.push(root);
-            indexElement(root);
-        }
+        elements.push(root);
+        indexElement(root);
     }
     const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
     while (walker.nextNode()) {
         const el = walker.currentNode;
-        const nearestBound = el.closest('[data-dalila-internal-bound]');
+        const nearestBound = resolveBoundary(el);
         if (nearestBound !== boundary)
             continue;
         elements.push(el);
@@ -208,6 +226,7 @@ function createBindScanPlan(root) {
     }
     return {
         root,
+        boundary,
         elements,
         attrIndex,
         tagIndex,
@@ -275,19 +294,18 @@ function resolveSelectorFromIndex(plan, selector) {
     return null;
 }
 function qsaFromPlan(plan, selector) {
-    const boundary = plan.root.closest('[data-dalila-internal-bound]');
     const cacheable = !selector.includes('[');
     if (cacheable) {
         const cached = plan.selectorCache.get(selector);
         if (cached) {
             return cached.filter((el) => (el === plan.root || plan.root.contains(el))
-                && !isInsideRawBlock(el, boundary));
+                && !isInsideRawBlock(el, plan.boundary));
         }
     }
     const indexed = resolveSelectorFromIndex(plan, selector);
     const source = indexed ?? plan.elements.filter(el => el.matches(selector));
     const matches = source.filter((el) => (el === plan.root || plan.root.contains(el))
-        && !isInsideRawBlock(el, boundary));
+        && !isInsideRawBlock(el, plan.boundary));
     if (cacheable)
         plan.selectorCache.set(selector, matches);
     return matches;
@@ -306,9 +324,9 @@ function qsaIncludingRoot(root, selector) {
     // scope; anything deeper was already bound by a nested bind() call.
     // This also handles manual bind() calls on elements inside a clone:
     // root won't have the marker, but root.closest() will find the clone.
-    const boundary = root.closest('[data-dalila-internal-bound]');
+    const boundary = root.closest(INTERNAL_BOUND_SELECTOR);
     return out.filter(el => {
-        const bound = el.closest('[data-dalila-internal-bound]');
+        const bound = el.closest(INTERNAL_BOUND_SELECTOR);
         if (bound !== boundary)
             return false;
         return !isInsideRawBlock(el, boundary);
@@ -1552,7 +1570,8 @@ function createInterpolationTemplatePlan(root, rawTextSelectors) {
     const bindings = [];
     let totalExpressions = 0;
     let fastPathExpressions = 0;
-    const textBoundary = root.closest('[data-dalila-internal-bound]');
+    const resolveBoundary = createNearestBoundaryResolver();
+    const textBoundary = resolveBoundary(root);
     while (walker.nextNode()) {
         const node = walker.currentNode;
         const parent = node.parentElement;
@@ -1561,7 +1580,7 @@ function createInterpolationTemplatePlan(root, rawTextSelectors) {
         if (parent && parent.closest(RAW_BLOCK_SELECTORS))
             continue;
         if (parent) {
-            const bound = parent.closest('[data-dalila-internal-bound]');
+            const bound = resolveBoundary(parent);
             if (bound !== textBoundary)
                 continue;
         }

package/dist/runtime/fromHtml.js

@@ -15,9 +15,12 @@ export function fromHtml(html, options = {}) {
     const resolvedSecurity = resolveConfiguredRuntimeSecurityOptions(security);
     const template = document.createElement('template');
     setTemplateInnerHTML(template, html, resolvedSecurity);
-    const container = document.createElement('div');
-    container.style.display = 'contents';
-    container.appendChild(template.content);
+    const singleRoot = resolveSingleRootElement(template.content);
+    const container = singleRoot ?? document.createElement('div');
+    if (!singleRoot) {
+        container.style.display = 'contents';
+        container.appendChild(template.content);
+    }
     // Bind BEFORE inserting children so the layout's bind() only processes
     // the layout's own HTML — children are already bound by their own fromHtml() call.
     const dispose = bind(container, data ?? {}, { _internal: true, sanitizeHtml, security });
@@ -37,3 +40,17 @@ export function fromHtml(html, options = {}) {
     }
     return container;
 }
+function resolveSingleRootElement(fragment) {
+    let root = null;
+    for (const node of Array.from(fragment.childNodes)) {
+        if (node.nodeType === Node.TEXT_NODE && !(node.textContent ?? '').trim()) {
+            continue;
+        }
+        if (node.nodeType === Node.ELEMENT_NODE && node instanceof HTMLElement && !root) {
+            root = node;
+            continue;
+        }
+        return null;
+    }
+    return root;
+}

package/dist/runtime/html-sinks.js

@@ -78,9 +78,25 @@ function hasExecutableHtmlScriptTag(value) {
     return false;
 }
 function hasExecutableProtocol(value) {
-    return value.startsWith('javascript:')
-        || value.startsWith('vbscript:')
-        || value.startsWith('data:');
+    if (value.startsWith('javascript:') || value.startsWith('vbscript:')) {
+        return true;
+    }
+    if (!value.startsWith('data:')) {
+        return false;
+    }
+    return hasExecutableDataProtocol(value);
+}
+function hasExecutableDataProtocol(value) {
+    if (!value.startsWith('data:'))
+        return false;
+    const metadataStart = 'data:'.length;
+    const metadataEnd = value.indexOf(',', metadataStart);
+    const metadata = (metadataEnd === -1 ? value.slice(metadataStart) : value.slice(metadataStart, metadataEnd))
+        .toLowerCase();
+    const mediaType = metadata.split(';', 1)[0].trim();
+    return mediaType === 'text/html'
+        || mediaType === 'application/xhtml+xml'
+        || mediaType === 'image/svg+xml';
 }
 function hasExecutableHtmlEventAttribute(value) {
     let index = 0;

package/package.json

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