dalila 1.9.25 → 1.10.0

package/dist/cli/check.js

@@ -1,6 +1,10 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import { buildRouteTree, injectHtmlPathTemplates, findFile, findProjectRoot, extractParamKeys, } from './routes-generator.js';
+const VOID_HTML_TAGS = new Set([
+    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+    'link', 'meta', 'param', 'source', 'track', 'wbr',
+]);
 // ============================================================================
 // TypeScript Compiler API (dynamic import)
 // ============================================================================
@@ -406,6 +410,161 @@ function extractRootIdentifiers(expr) {
     }
     return result;
 }
+function findContainingRange(offset, ranges) {
+    for (const range of ranges) {
+        if (offset < range.start)
+            break;
+        if (offset >= range.start && offset < range.end)
+            return range;
+    }
+    return null;
+}
+function isInsideRange(offset, ranges) {
+    return findContainingRange(offset, ranges) !== null;
+}
+function hasRawMarkerAttribute(attrs) {
+    let i = 0;
+    while (i < attrs.length) {
+        while (i < attrs.length && /\s/.test(attrs[i]))
+            i++;
+        if (i >= attrs.length)
+            break;
+        if (attrs[i] === '/') {
+            i++;
+            continue;
+        }
+        const nameStart = i;
+        while (i < attrs.length && !/[\s=\/]/.test(attrs[i]))
+            i++;
+        if (i === nameStart) {
+            i++;
+            continue;
+        }
+        const name = attrs.slice(nameStart, i).toLowerCase();
+        if (name === 'd-pre' || name === 'd-raw')
+            return true;
+        while (i < attrs.length && /\s/.test(attrs[i]))
+            i++;
+        if (attrs[i] !== '=')
+            continue;
+        i++; // skip '='
+        while (i < attrs.length && /\s/.test(attrs[i]))
+            i++;
+        if (i >= attrs.length)
+            break;
+        const quote = attrs[i];
+        if (quote === '"' || quote === "'") {
+            i++;
+            while (i < attrs.length && attrs[i] !== quote)
+                i++;
+            if (i < attrs.length)
+                i++;
+            continue;
+        }
+        while (i < attrs.length && !/\s/.test(attrs[i]))
+            i++;
+    }
+    return false;
+}
+function extractRawTemplateRanges(html, options = {}) {
+    const ranges = [];
+    const stack = [];
+    const lowerHtml = html.toLowerCase();
+    let i = 0;
+    while (i < html.length) {
+        // script/style contents are raw text in HTML parsing; ignore any
+        // "<...>" sequences inside them to avoid false tag detection.
+        const scriptLike = stack[stack.length - 1];
+        if (scriptLike && (scriptLike.tagName === 'script' || scriptLike.tagName === 'style')) {
+            const closeNeedle = `</${scriptLike.tagName}`;
+            const closeIndex = lowerHtml.indexOf(closeNeedle, i);
+            if (closeIndex === -1)
+                break;
+            if (closeIndex > i) {
+                i = closeIndex;
+                continue;
+            }
+        }
+        if (html[i] !== '<') {
+            i++;
+            continue;
+        }
+        let j = i + 1;
+        let inString = null;
+        let escaped = false;
+        while (j < html.length) {
+            const ch = html[j];
+            if (inString) {
+                if (escaped) {
+                    escaped = false;
+                }
+                else if (ch === '\\') {
+                    escaped = true;
+                }
+                else if (ch === inString) {
+                    inString = null;
+                }
+                j++;
+                continue;
+            }
+            if (ch === '"' || ch === "'") {
+                inString = ch;
+                j++;
+                continue;
+            }
+            if (ch === '>')
+                break;
+            j++;
+        }
+        if (j >= html.length)
+            break;
+        const fullTag = html.slice(i, j + 1);
+        const inner = html.slice(i + 1, j).trim();
+        const isClosingTag = inner.startsWith('/');
+        const normalized = isClosingTag ? inner.slice(1).trim() : inner;
+        const nameMatch = /^([a-zA-Z][\w:-]*)/.exec(normalized);
+        if (!nameMatch) {
+            i = j + 1;
+            continue;
+        }
+        const tagName = nameMatch[1].toLowerCase();
+        const attrs = normalized.slice(nameMatch[1].length);
+        if (isClosingTag) {
+            for (let stackIdx = stack.length - 1; stackIdx >= 0; stackIdx--) {
+                if (stack[stackIdx].tagName !== tagName)
+                    continue;
+                const entry = stack.splice(stackIdx, 1)[0];
+                if (entry.isRaw) {
+                    ranges.push({ start: entry.start, end: i + fullTag.length });
+                }
+                break;
+            }
+            i = j + 1;
+            continue;
+        }
+        const isRawTag = (options.includePreCode && (tagName === 'pre' || tagName === 'code'))
+            || tagName === 'd-pre'
+            || tagName === 'd-raw'
+            || hasRawMarkerAttribute(attrs);
+        const isSelfClosingTag = VOID_HTML_TAGS.has(tagName);
+        if (isSelfClosingTag) {
+            if (isRawTag) {
+                ranges.push({ start: i, end: i + fullTag.length });
+            }
+            i = j + 1;
+            continue;
+        }
+        stack.push({ tagName, isRaw: isRawTag, start: i });
+        i = j + 1;
+    }
+    for (const entry of stack) {
+        if (entry.isRaw) {
+            ranges.push({ start: entry.start, end: html.length });
+        }
+    }
+    ranges.sort((a, b) => a.start - b.start);
+    return ranges;
+}
 /**
  * Extract all template identifiers from HTML content.
  *
@@ -413,7 +572,7 @@ function extractRootIdentifiers(expr) {
  * 1. Text interpolation `{expr}` — only outside HTML tags
  * 2. Context-binding directives `d-*="value"` — specific set
  */
-function extractTemplateIdentifiers(html) {
+function extractTemplateIdentifiers(html, rawRanges = [], interpolationRawRanges = rawRanges) {
     const identifiers = [];
     const lines = html.split('\n');
     const lineOffsets = [];
@@ -439,6 +598,13 @@ function extractTemplateIdentifiers(html) {
     let tagQuote = null;
     let i = 0;
     while (i < html.length) {
+        if (!inTag) {
+            const rawRange = findContainingRange(i, interpolationRawRanges);
+            if (rawRange) {
+                i = rawRange.end;
+                continue;
+            }
+        }
         const ch = html[i];
         if (!inTag && ch === '<') {
             inTag = true;
@@ -524,6 +690,8 @@ function extractTemplateIdentifiers(html) {
     DIRECTIVE_RE.lastIndex = 0;
     let match;
     while ((match = DIRECTIVE_RE.exec(html))) {
+        if (isInsideRange(match.index, rawRanges))
+            continue;
         const directive = match[1];
         const value = match[3].trim();
         if (!value)
@@ -544,11 +712,16 @@ function extractTemplateIdentifiers(html) {
     }
     return identifiers;
 }
-function extractLoopRanges(html) {
+function extractLoopRanges(html, rawRanges = []) {
     const ranges = [];
     const stack = [];
     let i = 0;
     while (i < html.length) {
+        const rawRange = findContainingRange(i, rawRanges);
+        if (rawRange) {
+            i = rawRange.end;
+            continue;
+        }
         if (html[i] !== '<') {
             i++;
             continue;
@@ -591,7 +764,7 @@ function extractLoopRanges(html) {
             i = j + 1;
             continue;
         }
-        const tagName = nameMatch[1];
+        const tagName = nameMatch[1].toLowerCase();
         const attrs = normalized.slice(tagName.length);
         const isSelfClosingTag = !isClosingTag && /\/\s*$/.test(normalized);
         if (isClosingTag) {
@@ -699,8 +872,10 @@ const LOOP_FORCED_CHECK_SOURCES = new Set([
     'd-virtual-overscan',
 ]);
 function checkHtmlContent(html, filePath, validIdentifiers, diagnostics) {
-    const ids = extractTemplateIdentifiers(html);
-    const loopRanges = extractLoopRanges(html);
+    const rawRanges = extractRawTemplateRanges(html);
+    const interpolationRawRanges = extractRawTemplateRanges(html, { includePreCode: true });
+    const ids = extractTemplateIdentifiers(html, rawRanges, interpolationRawRanges);
+    const loopRanges = extractLoopRanges(html, rawRanges);
     for (const id of ids) {
         if (validIdentifiers.has(id.name))
             continue;

package/dist/runtime/bind.d.ts

@@ -15,7 +15,8 @@ export interface BindOptions {
      */
     events?: string[];
     /**
-     * Selectors for elements where text interpolation should be skipped
+     * Selectors for elements where text interpolation should be skipped.
+     * `d-pre` / `d-raw` subtrees are always skipped regardless of this option.
      */
     rawTextSelectors?: string;
     /**

package/dist/runtime/bind.js

@@ -103,6 +103,73 @@ function isWarnAsErrorEnabledForActiveScope() {
     }
     return false;
 }
+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';
+function ensureRawBlockDefaultStyles() {
+    if (typeof document === 'undefined')
+        return;
+    if (document.getElementById(RAW_BLOCK_STYLE_ID))
+        return;
+    const style = document.createElement('style');
+    style.id = RAW_BLOCK_STYLE_ID;
+    style.textContent = `
+[data-dalila-raw] { white-space: pre-wrap; }
+d-pre[data-dalila-raw], d-raw[data-dalila-raw] { display: block; }
+  `.trim();
+    if (document.head) {
+        document.head.appendChild(style);
+        return;
+    }
+    document.documentElement?.appendChild(style);
+}
+function elementDepth(el) {
+    let depth = 0;
+    let cursor = el.parentElement;
+    while (cursor) {
+        depth += 1;
+        cursor = cursor.parentElement;
+    }
+    return depth;
+}
+function collectRawBlocks(root) {
+    const boundary = root.closest('[data-dalila-internal-bound]');
+    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]');
+        return bound === boundary;
+    });
+    inScope.sort((a, b) => elementDepth(a) - elementDepth(b));
+    const roots = [];
+    for (const el of inScope) {
+        if (roots.some((parent) => parent.contains(el)))
+            continue;
+        roots.push(el);
+    }
+    return roots;
+}
+function materializeRawBlocks(root) {
+    const rawBlocks = collectRawBlocks(root);
+    if (rawBlocks.length > 0) {
+        ensureRawBlockDefaultStyles();
+    }
+    for (const block of rawBlocks) {
+        if (block.hasAttribute('data-dalila-raw'))
+            continue;
+        const source = block.innerHTML;
+        block.setAttribute('data-dalila-raw', '');
+        block.textContent = source;
+    }
+}
+function isInsideRawBlock(el, boundary) {
+    const rawRoot = el.closest(RAW_BLOCK_SELECTORS);
+    if (!rawRoot)
+        return false;
+    return rawRoot.closest('[data-dalila-internal-bound]') === boundary;
+}
 function createBindScanPlan(root) {
     const boundary = root.closest('[data-dalila-internal-bound]');
     const elements = [];
@@ -208,16 +275,19 @@ 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));
+            return cached.filter((el) => (el === plan.root || plan.root.contains(el))
+                && !isInsideRawBlock(el, 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));
+    const matches = source.filter((el) => (el === plan.root || plan.root.contains(el))
+        && !isInsideRawBlock(el, boundary));
     if (cacheable)
         plan.selectorCache.set(selector, matches);
     return matches;
@@ -239,7 +309,9 @@ function qsaIncludingRoot(root, selector) {
     const boundary = root.closest('[data-dalila-internal-bound]');
     return out.filter(el => {
         const bound = el.closest('[data-dalila-internal-bound]');
-        return bound === boundary;
+        if (bound !== boundary)
+            return false;
+        return !isInsideRawBlock(el, boundary);
     });
 }
 /**
@@ -1486,6 +1558,8 @@ function createInterpolationTemplatePlan(root, rawTextSelectors) {
         const parent = node.parentElement;
         if (parent && parent.closest(rawTextSelectors))
             continue;
+        if (parent && parent.closest(RAW_BLOCK_SELECTORS))
+            continue;
         if (parent) {
             const bound = parent.closest('[data-dalila-internal-bound]');
             if (bound !== textBoundary)
@@ -3381,6 +3455,9 @@ export function bind(root, ctx, options = {}) {
         warnAsErrorScopes.add(templateScope);
     }
     linkScopeToDom(templateScope, root, describeBindRoot(root));
+    // Harden raw code-example blocks early so nested markup is rendered as
+    // inert text before any directive/event pass runs.
+    materializeRawBlocks(root);
     const bindScanPlan = createBindScanPlan(root);
     let bindCompleted = false;
     let disposed = false;

package/dist/runtime/boundary.js

@@ -12,6 +12,10 @@ import { bind, warnSecurityRuntime } from './bind.js';
 import { defineComponent } from './component.js';
 import { hasExecutableHtmlSinkPattern, setElementInnerHTML } from './html-sinks.js';
 // ============================================================================
+// Types
+// ============================================================================
+const RAW_BLOCK_SELECTORS = '[d-pre], [d-raw], d-pre, d-raw, [data-dalila-raw]';
+// ============================================================================
 // Error Boundary Component
 // ============================================================================
 /**
@@ -97,6 +101,10 @@ export function bindBoundary(root, ctx, cleanups, options = {}) {
             continue;
         if (el.closest('[data-dalila-internal-bound]') !== boundary)
             continue;
+        // Raw blocks are inert by contract: d-* directives must not run inside.
+        const rawRoot = el.closest(RAW_BLOCK_SELECTORS);
+        if (rawRoot && rawRoot.closest('[data-dalila-internal-bound]') === boundary)
+            continue;
         for (const nested of Array.from(el.querySelectorAll('[d-boundary]'))) {
             consumedNested.add(nested);
         }

package/package.json

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

package/scripts/dev-server.cjs

@@ -335,6 +335,52 @@ function createImportMapScript(dalilaPath, sourceDirPath = '/src/') {
   return `  <script type="importmap">\n${payload}\n  </script>`;
 }
 
+function mergeImportMapIntoHtml(html, dalilaPath, sourceDirPath = '/src/') {
+  const importMapPattern = /<script\b[^>]*type=["']importmap["'][^>]*>([\s\S]*?)<\/script>/i;
+  const match = html.match(importMapPattern);
+  if (!match) {
+    return {
+      html,
+      merged: false,
+      script: '',
+    };
+  }
+
+  const existingPayload = match[1]?.trim() || '{}';
+  let importMap;
+  try {
+    importMap = JSON.parse(existingPayload);
+  } catch {
+    return {
+      html,
+      merged: false,
+      script: '',
+    };
+  }
+
+  const existingImports = importMap && typeof importMap.imports === 'object' && importMap.imports !== null
+    ? importMap.imports
+    : {};
+  const mergedImportMap = {
+    ...importMap,
+    imports: {
+      ...createImportMapEntries(dalilaPath, sourceDirPath),
+      ...existingImports,
+    },
+  };
+  const payload = JSON.stringify(mergedImportMap, null, 2)
+    .split('\n')
+    .map(line => `    ${line}`)
+    .join('\n');
+  const script = `  <script type="importmap">\n${payload}\n  </script>`;
+
+  return {
+    html: html.replace(importMapPattern, ''),
+    merged: true,
+    script,
+  };
+}
+
 // ============================================================================
 // Preload Script Detection (auto-inject for persist() with preload: true)
 // ============================================================================
@@ -536,11 +582,15 @@ function injectBindings(html, requestPath) {
   const normalizedPath = normalizeHtmlRequestPath(requestPath);
   // Different paths for dalila repo vs user projects
   const dalilaPath = isDalilaRepo ? '/dist' : '/node_modules/dalila/dist';
-  const importMap = createImportMapScript(dalilaPath, buildProjectSourceDirPath(projectDir));
+  const sourceDirPath = buildProjectSourceDirPath(projectDir);
+  const mergedImportMap = mergeImportMapIntoHtml(html, dalilaPath, sourceDirPath);
+  const importMap = mergedImportMap.merged
+    ? mergedImportMap.script
+    : createImportMapScript(dalilaPath, sourceDirPath);
 
   // For user projects, inject import map + HMR script
   if (!isDalilaRepo) {
-    let output = addLoadingAttributes(html);
+    let output = addLoadingAttributes(mergedImportMap.html);
 
     // Smart HMR script for user projects
     const hmrScript = `
@@ -692,7 +742,12 @@ function injectBindings(html, requestPath) {
     };
   </script>`;
 
-    output = injectHeadFragments(output, buildUserProjectHeadAdditions(projectDir, dalilaPath), {
+    const headAdditions = buildUserProjectHeadAdditions(projectDir, dalilaPath)
+      .filter((fragment) => !mergedImportMap.merged || !/type=["']importmap["']/i.test(fragment));
+    if (importMap) {
+      headAdditions.push(importMap);
+    }
+    output = injectHeadFragments(output, headAdditions, {
       beforeModule: true,
       beforeStyles: true,
     });
@@ -1353,6 +1408,7 @@ module.exports = {
   safeDecodeUrlPath,
   createImportMapEntries,
   createImportMapScript,
+  mergeImportMapIntoHtml,
   detectPreloadScripts,
   buildUserProjectHeadAdditions,
   injectHeadFragments,