dalila 1.10.3 → 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/persist.js

@@ -492,6 +492,9 @@ function escapeInlineScriptContent(script) {
         }
     });
 }
+function stringifyInlineScriptLiteral(value) {
+    return escapeInlineScriptContent(JSON.stringify(value));
+}
 /**
  * Generate a minimal inline script to prevent FOUC.
  *
@@ -499,13 +502,14 @@ function escapeInlineScriptContent(script) {
  */
 export function createPreloadScript(options) {
     const { storageKey, defaultValue, target = 'documentElement', attribute = 'data-theme', storageType = 'localStorage', } = options;
-    // Use JSON.stringify to safely embed strings (avoid breaking quotes / injection)
-    const k = JSON.stringify(storageKey);
-    const d = JSON.stringify(defaultValue);
-    const a = JSON.stringify(attribute);
+    const safeTarget = target === 'body' ? 'body' : 'documentElement';
+    const safeStorageType = storageType === 'sessionStorage' ? 'sessionStorage' : 'localStorage';
+    const k = stringifyInlineScriptLiteral(storageKey);
+    const d = stringifyInlineScriptLiteral(defaultValue);
+    const a = stringifyInlineScriptLiteral(attribute);
     // Still minified
-    const script = `(function(){try{var s=${storageType}.getItem(${k});var v=s==null?${d}:JSON.parse(s);document.${target}.setAttribute(${a},v)}catch(e){document.${target}.setAttribute(${a},${d})}})();`;
-    return escapeInlineScriptContent(script);
+    const script = `(function(){try{var s=${safeStorageType}.getItem(${k});var v=s==null?${d}:JSON.parse(s);document.${safeTarget}.setAttribute(${a},v)}catch(e){document.${safeTarget}.setAttribute(${a},${d})}})();`;
+    return script;
 }
 export function createThemeScript(storageKey, defaultTheme = 'light') {
     return createPreloadScript({

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

@@ -1,6 +1,5 @@
 const TRUSTED_POLICY_CACHE_KEY = Symbol.for('dalila.runtime.trustedTypesPolicies');
 const TRUSTED_POLICY_PARSE_SUFFIX = '--dalila-parse';
-const EXECUTABLE_HTML_EVENT_ATTR_PATTERN = /<[^>]+\son[a-z0-9:_-]+\s*=/i;
 const EXECUTABLE_HTML_URL_ATTR_NAMES = new Set([
     'href',
     'src',
@@ -9,7 +8,6 @@ const EXECUTABLE_HTML_URL_ATTR_NAMES = new Set([
     'action',
     'poster',
 ]);
-const EXECUTABLE_DATA_URL_PATTERN = /^data:(?:text\/html|application\/xhtml\+xml|image\/svg\+xml)\b/i;
 function getTrustedPolicyCache() {
     const host = globalThis;
     if (host[TRUSTED_POLICY_CACHE_KEY] instanceof Map) {
@@ -42,7 +40,7 @@ function isHtmlAttributeNameChar(code) {
         && code !== 0x60;
 }
 function isTagBoundaryChar(char) {
-    return !char || /[\s/>]/.test(char);
+    return !char || char === '/' || char === '>' || isHtmlWhitespaceCode(char.charCodeAt(0));
 }
 function getPreviousNonWhitespaceChar(value, end, start = 0) {
     for (let index = end - 1; index >= start; index -= 1) {
@@ -80,9 +78,101 @@ function hasExecutableHtmlScriptTag(value) {
     return false;
 }
 function hasExecutableProtocol(value) {
-    return value.startsWith('javascript:')
-        || value.startsWith('vbscript:')
-        || EXECUTABLE_DATA_URL_PATTERN.test(value);
+    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;
+    while (index < value.length) {
+        const tagStart = value.indexOf('<', index);
+        if (tagStart === -1)
+            return false;
+        let cursor = tagStart + 1;
+        const firstCode = value.charCodeAt(cursor);
+        if (Number.isNaN(firstCode)
+            || value[cursor] === '/'
+            || value[cursor] === '!'
+            || value[cursor] === '?') {
+            index = cursor;
+            continue;
+        }
+        while (cursor < value.length
+            && !isHtmlWhitespaceCode(value.charCodeAt(cursor))
+            && value[cursor] !== '>') {
+            cursor += 1;
+        }
+        while (cursor < value.length && value[cursor] !== '>') {
+            while (cursor < value.length && isHtmlWhitespaceCode(value.charCodeAt(cursor))) {
+                cursor += 1;
+            }
+            if (cursor >= value.length || value[cursor] === '>') {
+                break;
+            }
+            if (value[cursor] === '/') {
+                cursor += 1;
+                continue;
+            }
+            const nameStart = cursor;
+            while (cursor < value.length && isHtmlAttributeNameChar(value.charCodeAt(cursor))) {
+                cursor += 1;
+            }
+            if (cursor === nameStart) {
+                cursor += 1;
+                continue;
+            }
+            const attrName = value.slice(nameStart, cursor).toLowerCase();
+            while (cursor < value.length && isHtmlWhitespaceCode(value.charCodeAt(cursor))) {
+                cursor += 1;
+            }
+            if (value[cursor] !== '=') {
+                continue;
+            }
+            if (attrName.startsWith('on')) {
+                return true;
+            }
+            cursor += 1;
+            while (cursor < value.length && isHtmlWhitespaceCode(value.charCodeAt(cursor))) {
+                cursor += 1;
+            }
+            if (cursor >= value.length) {
+                break;
+            }
+            const quote = value[cursor];
+            if (quote === '"' || quote === '\'') {
+                cursor += 1;
+                const closingQuoteIndex = value.indexOf(quote, cursor);
+                if (closingQuoteIndex === -1) {
+                    break;
+                }
+                cursor = closingQuoteIndex + 1;
+                continue;
+            }
+            while (cursor < value.length
+                && !isHtmlWhitespaceCode(value.charCodeAt(cursor))
+                && value[cursor] !== '>') {
+                cursor += 1;
+            }
+        }
+        index = cursor + 1;
+    }
+    return false;
 }
 function hasExecutableHtmlUrlAttribute(value) {
     let index = 0;
@@ -194,7 +284,7 @@ export function hasExecutableHtmlSinkPattern(value) {
     if (!value)
         return false;
     return hasExecutableHtmlScriptTag(value)
-        || EXECUTABLE_HTML_EVENT_ATTR_PATTERN.test(value)
+        || hasExecutableHtmlEventAttribute(value)
         || hasExecutableHtmlUrlAttribute(value);
 }
 function getTrustedTypesApi() {

package/package.json

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

package/scripts/dev-server.cjs

@@ -116,19 +116,27 @@ function createForbiddenPathError() {
   return error;
 }
 
-function isPathInsideRoot(candidatePath) {
+function toServedRelativePath(candidatePath) {
+  if (typeof candidatePath !== 'string' || candidatePath.length === 0) {
+    return null;
+  }
+
   const normalizedPath = path.resolve(candidatePath);
   const relativePath = path.relative(rootDirAbs, normalizedPath);
-  return relativePath === '' || (!relativePath.startsWith('..') && !path.isAbsolute(relativePath));
-}
+  if (relativePath === '') {
+    return '';
+  }
 
-function normalizeServedPath(candidatePath) {
-  if (typeof candidatePath !== 'string' || candidatePath.length === 0) {
+  if (relativePath.startsWith('..') || path.isAbsolute(relativePath)) {
     return null;
   }
 
-  const normalizedPath = path.resolve(candidatePath);
-  return isPathInsideRoot(normalizedPath) ? normalizedPath : null;
+  return relativePath;
+}
+
+function normalizeServedPath(candidatePath) {
+  const relativePath = toServedRelativePath(candidatePath);
+  return relativePath == null ? null : path.join(rootDirAbs, relativePath);
 }
 
 function statServedPath(targetPath) {
@@ -219,6 +227,10 @@ function stringifyInlineScriptPayload(value, indent = 0) {
     .join('\n');
 }
 
+function stringifyInlineScriptLiteral(value) {
+  return escapeInlineScriptContent(JSON.stringify(value));
+}
+
 function normalizePreloadStorageType(storageType) {
   return storageType === 'sessionStorage' ? 'sessionStorage' : 'localStorage';
 }
@@ -763,14 +775,14 @@ function findTypeScriptFiles(dir, files = []) {
  */
 function generatePreloadScript(name, defaultValue, storageType = 'localStorage') {
   const safeStorageType = normalizePreloadStorageType(storageType);
-  const payload = JSON.stringify({
+  const payload = stringifyInlineScriptLiteral({
     key: name,
     defaultValue,
     storageType: safeStorageType,
   });
-  const fallbackValue = JSON.stringify(defaultValue);
+  const fallbackValue = stringifyInlineScriptLiteral(defaultValue);
   const script = `(function(){try{var p=${payload};var s=window[p.storageType];var v=s.getItem(p.key);document.documentElement.setAttribute('data-theme',v==null?p.defaultValue:JSON.parse(v))}catch(e){document.documentElement.setAttribute('data-theme',${fallbackValue})}})();`;
-  return escapeInlineScriptContent(script);
+  return script;
 }
 
 function renderPreloadScriptTags(baseDir) {