dalila 1.9.22 → 1.9.25

package/README.md

@@ -44,6 +44,8 @@ const ctx = {
 bind(document.getElementById('app')!, ctx);
 ```
 
+For bundle-sensitive or no-bundler builds, prefer leaf subpaths like `dalila/core/signal` and `dalila/runtime/bind`.
+
 ## Docs
 
 ### Start here
@@ -89,12 +91,21 @@ bind(document.getElementById('app')!, ctx);
 
 - [Template Check CLI](./docs/cli/check.md)
 - [Devtools Extension](./devtools-extension/README.md)
+- [Production Guide](./docs/production.md)
+- [Security Hardening](./docs/security-hardening.md)
+- [Threat Model](./docs/threat-model.md)
+- [Recipes](./docs/recipes.md)
+- [Upgrade Guide](./docs/upgrade.md)
+- [Release Checklist](./docs/release-checklist.md)
+- [Security Release Notes](./docs/security-release-notes.md)
 
 ## Packages
 
 ```txt
 dalila           → signals, scope, persist, forms, resources, query, mutations
 dalila/runtime   → bind(), mount(), configure(), components, lazy, transitions
+dalila/core/*    → leaf core modules for tighter bundles
+dalila/runtime/* → leaf runtime modules for tighter bundles
 dalila/context   → createContext(), provide(), inject()
 dalila/router    → createRouter(), file-based routes, preloading
 dalila/http      → createHttpClient()

package/dist/cli/index.js

@@ -16,7 +16,7 @@ Usage:
   dalila routes init                  Initialize app and generate routes outputs
   dalila routes watch [options]       Watch routes and regenerate outputs on changes
   dalila routes --help                Show routes command help
-  dalila check [path] [--strict]     Static analysis of HTML templates against loaders
+  dalila check [path] [--strict]     Static analysis plus project security smoke
   dalila help                         Show this help message
 
 Options:
@@ -55,10 +55,11 @@ function showCheckHelp() {
 🐰✂️  Dalila CLI - Check
 
 Usage:
-  dalila check [path] [options]     Static analysis of HTML templates
+  dalila check [path] [options]     Static analysis of HTML templates + project security smoke
 
 Validates that identifiers used in HTML templates ({expr}, d-* directives)
 match the return type of the corresponding loader() in TypeScript.
+Also runs project-wide security smoke checks for obvious raw HTML / XSS patterns.
 
 Arguments:
   [path]          App directory to check (default: src/app)
@@ -160,6 +161,18 @@ function resolveDefaultAppDir(cwd) {
     }
     return path.join(appRoot, relToRoot);
 }
+function resolveDefaultSecuritySmokePath(cwd) {
+    const resolvedCwd = path.resolve(cwd);
+    const projectRoot = findProjectRoot(resolvedCwd);
+    if (!projectRoot) {
+        return resolveDefaultAppDir(cwd);
+    }
+    const srcRoot = path.join(projectRoot, 'src');
+    if (fs.existsSync(srcRoot) && fs.statSync(srcRoot).isDirectory()) {
+        return srcRoot;
+    }
+    return resolveDefaultAppDir(cwd);
+}
 function resolveGenerateConfig(cliArgs, cwd = process.cwd()) {
     const dirIndex = cliArgs.indexOf('--dir');
     const outputIndex = cliArgs.indexOf('--output');
@@ -368,9 +381,18 @@ async function main() {
             const appDir = positional[0]
                 ? path.resolve(positional[0])
                 : resolveDefaultAppDir(process.cwd());
-            const { runCheck } = await import('./check.js');
-            const exitCode = await runCheck(appDir, { strict });
-            process.exit(exitCode);
+            const smokePath = positional[0]
+                ? appDir
+                : resolveDefaultSecuritySmokePath(process.cwd());
+            const [{ runCheck }, { runSecuritySmokeChecks }] = await Promise.all([
+                import('./check.js'),
+                import('./security-smoke.js'),
+            ]);
+            const [checkExitCode, smokeExitCode] = await Promise.all([
+                runCheck(appDir, { strict }),
+                runSecuritySmokeChecks(smokePath),
+            ]);
+            process.exit(checkExitCode !== 0 || smokeExitCode !== 0 ? 1 : 0);
         }
     }
     else if (command === '--help' || command === '-h') {

package/dist/cli/routes-generator.js

@@ -1023,7 +1023,7 @@ export async function generateRoutesFile(routesDir, outputPath) {
     const importLines = [];
     importLines.push(`import type { RouteTable } from 'dalila/router';`);
     if (hasHtml) {
-        importLines.push(`import { fromHtml } from 'dalila';`);
+        importLines.push(`import { fromHtml } from 'dalila/runtime/from-html';`);
     }
     if (imports.length > 0) {
         importLines.push(...imports);

package/dist/cli/security-smoke.d.ts

@@ -0,0 +1,8 @@
+export interface SecuritySmokeFinding {
+    filePath: string;
+    line: number;
+    col: number;
+    severity: 'error' | 'warning';
+    message: string;
+}
+export declare function runSecuritySmokeChecks(scanPath: string): Promise<number>;

package/dist/cli/security-smoke.js

@@ -0,0 +1,502 @@
+import * as fs from 'fs';
+import * as path from 'path';
+const INLINE_EVENT_HANDLER_MESSAGE = 'Inline event handler found in template. Use d-on-* instead.';
+const JAVASCRIPT_URL_MESSAGE = 'Executable javascript: URL found in template sink.';
+const EXECUTABLE_DATA_URL_MESSAGE = 'Executable data: URL found in template sink.';
+const DANGEROUS_URL_PROTOCOL_MESSAGE = 'Dangerous URL protocol found in template sink.';
+const SRCDOC_WARNING_MESSAGE = 'srcdoc embeds raw HTML. Review this iframe content as trusted-only.';
+const D_HTML_WARNING_MESSAGE = 'd-html renders raw HTML. Keep the source trusted or sanitized.';
+const D_ATTR_SRCDOC_WARNING_MESSAGE = 'd-attr-srcdoc writes raw iframe markup. Review the source as trusted-only.';
+const HTML_INLINE_HANDLER_ATTR_NAMES = new Set([
+    'onabort',
+    'onafterprint',
+    'onanimationcancel',
+    'onanimationend',
+    'onanimationiteration',
+    'onanimationstart',
+    'onauxclick',
+    'onbeforeinput',
+    'onbeforematch',
+    'onbeforeprint',
+    'onbeforetoggle',
+    'onbeforeunload',
+    'onbegin',
+    'onblur',
+    'oncancel',
+    'oncanplay',
+    'oncanplaythrough',
+    'onchange',
+    'onclick',
+    'onclose',
+    'oncontextlost',
+    'oncontextmenu',
+    'oncontextrestored',
+    'oncopy',
+    'oncuechange',
+    'oncut',
+    'ondblclick',
+    'ondrag',
+    'ondragend',
+    'ondragenter',
+    'ondragleave',
+    'ondragover',
+    'ondragstart',
+    'ondrop',
+    'ondurationchange',
+    'onemptied',
+    'onend',
+    'onended',
+    'onerror',
+    'onfocus',
+    'onformdata',
+    'onfullscreenchange',
+    'onfullscreenerror',
+    'ongotpointercapture',
+    'onhashchange',
+    'oninput',
+    'oninvalid',
+    'onkeydown',
+    'onkeypress',
+    'onkeyup',
+    'onlanguagechange',
+    'onload',
+    'onloadeddata',
+    'onloadedmetadata',
+    'onloadstart',
+    'onlostpointercapture',
+    'onmessage',
+    'onmessageerror',
+    'onmousedown',
+    'onmouseenter',
+    'onmouseleave',
+    'onmousemove',
+    'onmouseout',
+    'onmouseover',
+    'onmouseup',
+    'onoffline',
+    'ononline',
+    'onpagehide',
+    'onpageshow',
+    'onpaste',
+    'onpause',
+    'onplay',
+    'onplaying',
+    'onpointercancel',
+    'onpointerdown',
+    'onpointerenter',
+    'onpointerleave',
+    'onpointermove',
+    'onpointerout',
+    'onpointerover',
+    'onpointerrawupdate',
+    'onpointerup',
+    'onpopstate',
+    'onprogress',
+    'onratechange',
+    'onrepeat',
+    'onreset',
+    'onresize',
+    'onscroll',
+    'onscrollend',
+    'onsecuritypolicyviolation',
+    'onseeked',
+    'onseeking',
+    'onselect',
+    'onselectionchange',
+    'onselectstart',
+    'onslotchange',
+    'onstalled',
+    'onstorage',
+    'onsubmit',
+    'onsuspend',
+    'ontimeupdate',
+    'ontoggle',
+    'ontransitioncancel',
+    'ontransitionend',
+    'ontransitionrun',
+    'ontransitionstart',
+    'onunhandledrejection',
+    'onunload',
+    'onvolumechange',
+    'onwaiting',
+    'onwebkitanimationend',
+    'onwebkitanimationiteration',
+    'onwebkitanimationstart',
+    'onwebkittransitionend',
+    'onwheel',
+]);
+const HTML_URL_ATTR_NAMES = new Set([
+    'href',
+    'src',
+    'xlink:href',
+    'formaction',
+    'action',
+    'poster',
+    'data',
+]);
+const SAFE_URL_PROTOCOLS = new Set([
+    'http:',
+    'https:',
+    'mailto:',
+    'tel:',
+    'sms:',
+    'blob:',
+]);
+const EXECUTABLE_DATA_URL_PATTERN = /^data:(?:text\/html|application\/xhtml\+xml|image\/svg\+xml)\b/i;
+const SOURCE_SECURITY_PATTERNS = [
+    {
+        severity: 'warning',
+        regex: /\b(?:innerHTML|outerHTML)\s*=/g,
+        message: 'Raw HTML sink assignment found in source. Review the input as trusted-only.',
+    },
+    {
+        severity: 'warning',
+        regex: /\binsertAdjacentHTML\s*\(/g,
+        message: 'insertAdjacentHTML() found in source. Review the inserted markup as trusted-only.',
+    },
+    {
+        severity: 'warning',
+        regex: /\bdocument\.write\s*\(/g,
+        message: 'document.write() found in source. Review the written markup as trusted-only.',
+    },
+    {
+        severity: 'warning',
+        regex: /\bfromHtml\s*\(/g,
+        message: 'fromHtml() found in source. Pass only trusted template markup.',
+    },
+];
+function findProjectRoot(startDir) {
+    let current = path.resolve(startDir);
+    while (true) {
+        if (fs.existsSync(path.join(current, 'package.json'))
+            || fs.existsSync(path.join(current, 'tsconfig.json'))) {
+            return current;
+        }
+        const parent = path.dirname(current);
+        if (parent === current) {
+            return null;
+        }
+        current = parent;
+    }
+}
+function findExistingAncestor(startPath) {
+    let current = path.resolve(startPath);
+    while (!fs.existsSync(current)) {
+        const parent = path.dirname(current);
+        if (parent === current) {
+            return current;
+        }
+        current = parent;
+    }
+    return current;
+}
+function resolveSecuritySmokeScope(scanPath) {
+    const resolvedPath = path.resolve(scanPath);
+    const existingPath = findExistingAncestor(resolvedPath);
+    const startDir = fs.statSync(existingPath).isDirectory()
+        ? existingPath
+        : path.dirname(existingPath);
+    const projectRoot = findProjectRoot(startDir) ?? startDir;
+    return {
+        projectRoot,
+        scanRoot: resolvedPath,
+    };
+}
+function collectCandidateFiles(dir, files = []) {
+    if (!fs.existsSync(dir))
+        return files;
+    const stat = fs.statSync(dir);
+    if (stat.isFile()) {
+        const ext = path.extname(dir).toLowerCase();
+        if (ext === '.html' || ext === '.ts' || ext === '.js') {
+            files.push(dir);
+        }
+        return files;
+    }
+    for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+        if (entry.name.startsWith('.'))
+            continue;
+        if (entry.name === 'dist' || entry.name === 'node_modules')
+            continue;
+        const fullPath = path.join(dir, entry.name);
+        if (entry.isDirectory()) {
+            collectCandidateFiles(fullPath, files);
+            continue;
+        }
+        if (!entry.isFile())
+            continue;
+        const ext = path.extname(entry.name).toLowerCase();
+        if (ext === '.html' || ext === '.ts' || ext === '.js') {
+            files.push(fullPath);
+        }
+    }
+    return files;
+}
+function getLineCol(source, offset) {
+    const before = source.slice(0, offset);
+    const lines = before.split('\n');
+    return {
+        line: lines.length,
+        col: lines[lines.length - 1].length + 1,
+    };
+}
+function isHtmlTagStartChar(char) {
+    return !!char && /[a-zA-Z]/.test(char);
+}
+function collectHtmlStartTags(source) {
+    const tags = [];
+    let i = 0;
+    while (i < source.length) {
+        if (source[i] !== '<') {
+            i += 1;
+            continue;
+        }
+        const next = source[i + 1];
+        if (next === '/' || next === '!' || next === '?' || !isHtmlTagStartChar(next)) {
+            i += 1;
+            continue;
+        }
+        i += 1;
+        const tagNameStart = i;
+        while (i < source.length && /[\w:-]/.test(source[i])) {
+            i += 1;
+        }
+        const tagName = source.slice(tagNameStart, i);
+        if (!tagName) {
+            i += 1;
+            continue;
+        }
+        const attrs = [];
+        let closed = false;
+        while (i < source.length) {
+            while (i < source.length && /\s/.test(source[i])) {
+                i += 1;
+            }
+            if (i >= source.length)
+                break;
+            if (source[i] === '>') {
+                i += 1;
+                closed = true;
+                break;
+            }
+            if (source[i] === '/' && source[i + 1] === '>') {
+                i += 2;
+                closed = true;
+                break;
+            }
+            if (source[i] === '/') {
+                i += 1;
+                continue;
+            }
+            const attrStart = i;
+            while (i < source.length && !/[\s=/>]/.test(source[i])) {
+                i += 1;
+            }
+            if (i === attrStart) {
+                i += 1;
+                continue;
+            }
+            const name = source.slice(attrStart, i);
+            while (i < source.length && /\s/.test(source[i])) {
+                i += 1;
+            }
+            let value = null;
+            if (source[i] === '=') {
+                i += 1;
+                while (i < source.length && /\s/.test(source[i])) {
+                    i += 1;
+                }
+                if (i >= source.length)
+                    break;
+                const quote = source[i];
+                if (quote === '"' || quote === "'") {
+                    i += 1;
+                    const valueStart = i;
+                    while (i < source.length && source[i] !== quote) {
+                        i += 1;
+                    }
+                    value = source.slice(valueStart, i);
+                    if (i < source.length) {
+                        i += 1;
+                    }
+                }
+                else {
+                    const valueStart = i;
+                    while (i < source.length && !/[\s>]/.test(source[i])) {
+                        i += 1;
+                    }
+                    value = source.slice(valueStart, i);
+                }
+            }
+            attrs.push({ name, value, index: attrStart });
+        }
+        if (closed) {
+            tags.push({ tagName, attrs });
+        }
+    }
+    return tags;
+}
+function normalizeProtocolCheckValue(value) {
+    return value.replace(/[\u0000-\u0020\u007f]+/g, '').toLowerCase();
+}
+function extractUrlProtocol(value) {
+    const match = value.match(/^([a-z][a-z0-9+\-.]*):/i);
+    return match ? `${match[1].toLowerCase()}:` : null;
+}
+function classifyDangerousHtmlUrl(tagName, attrName, value) {
+    const normalizedAttrName = attrName.toLowerCase();
+    if (!HTML_URL_ATTR_NAMES.has(normalizedAttrName))
+        return null;
+    if (normalizedAttrName === 'data' && tagName.toLowerCase() !== 'object') {
+        return null;
+    }
+    if (value == null)
+        return null;
+    const normalized = normalizeProtocolCheckValue(value);
+    if (!normalized
+        || normalized.startsWith('/')
+        || normalized.startsWith('./')
+        || normalized.startsWith('../')
+        || normalized.startsWith('?')
+        || normalized.startsWith('#')) {
+        return null;
+    }
+    const protocol = extractUrlProtocol(normalized);
+    if (!protocol)
+        return null;
+    if (protocol === 'javascript:')
+        return JAVASCRIPT_URL_MESSAGE;
+    if (EXECUTABLE_DATA_URL_PATTERN.test(normalized))
+        return EXECUTABLE_DATA_URL_MESSAGE;
+    if (!SAFE_URL_PROTOCOLS.has(protocol))
+        return DANGEROUS_URL_PROTOCOL_MESSAGE;
+    return null;
+}
+function collectHtmlTemplateFindings(source, filePath, findings) {
+    for (const tag of collectHtmlStartTags(source)) {
+        for (const attr of tag.attrs) {
+            const attrName = attr.name.toLowerCase();
+            const { line, col } = getLineCol(source, attr.index);
+            if (HTML_INLINE_HANDLER_ATTR_NAMES.has(attrName)) {
+                findings.push({
+                    filePath,
+                    line,
+                    col,
+                    severity: 'error',
+                    message: INLINE_EVENT_HANDLER_MESSAGE,
+                });
+            }
+            const dangerousUrlMessage = classifyDangerousHtmlUrl(tag.tagName, attrName, attr.value);
+            if (dangerousUrlMessage) {
+                findings.push({
+                    filePath,
+                    line,
+                    col,
+                    severity: 'error',
+                    message: dangerousUrlMessage,
+                });
+            }
+            if (attrName === 'srcdoc') {
+                findings.push({
+                    filePath,
+                    line,
+                    col,
+                    severity: 'warning',
+                    message: SRCDOC_WARNING_MESSAGE,
+                });
+            }
+            if (attrName === 'd-html') {
+                findings.push({
+                    filePath,
+                    line,
+                    col,
+                    severity: 'warning',
+                    message: D_HTML_WARNING_MESSAGE,
+                });
+            }
+            if (attrName === 'd-attr-srcdoc') {
+                findings.push({
+                    filePath,
+                    line,
+                    col,
+                    severity: 'warning',
+                    message: D_ATTR_SRCDOC_WARNING_MESSAGE,
+                });
+            }
+        }
+    }
+}
+function collectPatternFindings(source, filePath, patterns, findings) {
+    for (const pattern of patterns) {
+        pattern.regex.lastIndex = 0;
+        let match = null;
+        while ((match = pattern.regex.exec(source)) !== null) {
+            const { line, col } = getLineCol(source, match.index);
+            findings.push({
+                filePath,
+                line,
+                col,
+                severity: pattern.severity,
+                message: pattern.message,
+            });
+            if (match[0].length === 0) {
+                pattern.regex.lastIndex += 1;
+            }
+        }
+    }
+}
+export async function runSecuritySmokeChecks(scanPath) {
+    const { projectRoot, scanRoot } = resolveSecuritySmokeScope(scanPath);
+    if (!fs.existsSync(scanRoot)) {
+        return 1;
+    }
+    const findings = [];
+    const files = collectCandidateFiles(scanRoot);
+    for (const filePath of files) {
+        const source = fs.readFileSync(filePath, 'utf8');
+        const ext = path.extname(filePath).toLowerCase();
+        if (ext === '.html') {
+            collectHtmlTemplateFindings(source, filePath, findings);
+            continue;
+        }
+        collectPatternFindings(source, filePath, SOURCE_SECURITY_PATTERNS, findings);
+    }
+    const errors = findings.filter((finding) => finding.severity === 'error');
+    const warnings = findings.filter((finding) => finding.severity === 'warning');
+    console.log('🛡 Dalila Security Smoke');
+    if (findings.length === 0) {
+        console.log('✅ No dangerous template patterns found');
+        console.log('');
+        return 0;
+    }
+    const grouped = new Map();
+    for (const finding of findings) {
+        const bucket = grouped.get(finding.filePath) ?? [];
+        bucket.push(finding);
+        grouped.set(finding.filePath, bucket);
+    }
+    for (const [filePath, bucket] of grouped) {
+        console.log(`  ${path.relative(projectRoot, filePath)}`);
+        for (const finding of bucket) {
+            const prefix = finding.severity === 'error' ? '❌' : '⚠️';
+            console.log(`    ${`${finding.line}:${finding.col}`.padEnd(8)} ${prefix} ${finding.message}`);
+        }
+        console.log('');
+    }
+    const summaryParts = [];
+    if (errors.length > 0) {
+        summaryParts.push(`${errors.length} error${errors.length === 1 ? '' : 's'}`);
+    }
+    if (warnings.length > 0) {
+        summaryParts.push(`${warnings.length} warning${warnings.length === 1 ? '' : 's'}`);
+    }
+    const summary = summaryParts.join(' and ');
+    if (errors.length > 0) {
+        console.log(`❌ Security smoke found ${summary}`);
+        console.log('');
+        return 1;
+    }
+    console.log(`⚠️ Security smoke found ${summary}`);
+    console.log('');
+    return 0;
+}

package/dist/components/ui/runtime.d.ts

@@ -1,11 +1,13 @@
 import { type Signal } from "../../core/signal.js";
-import { type BindContext } from "../../runtime/bind.js";
+import { type BindContext, type BindOptions } from "../../runtime/bind.js";
 import type { Calendar, Combobox, Dialog, Drawer, Dropdown, Dropzone, PopoverMount, TabsMount, Toast } from "./ui-types.js";
 export interface MountUIOptions {
     context?: BindContext;
     events?: string[];
     theme?: boolean;
     sliderValue?: Signal<string>;
+    sanitizeHtml?: BindOptions["sanitizeHtml"];
+    security?: BindOptions["security"];
     dialogs?: Record<string, Dialog>;
     drawers?: Record<string, Drawer>;
     dropdowns?: Record<string, Dropdown>;

package/dist/components/ui/runtime.js

@@ -354,6 +354,8 @@ export function mountUI(root, options) {
     withScope(scope, () => {
         cleanups.push(bind(mountedRoot, ctx, {
             events: options.events ?? DEFAULT_EVENTS,
+            sanitizeHtml: options.sanitizeHtml,
+            security: options.security,
         }));
         // Attach dialogs
         for (const [key, dialog] of Object.entries(options.dialogs ?? {})) {

package/dist/core/html.d.ts

@@ -7,10 +7,17 @@
  */
 type HTMLValue = string | number | boolean | null | undefined | Node | DocumentFragment | HTMLValue[];
 /**
- * Tagged template for safe HTML construction.
+ * Tagged template for safer HTML construction.
  *
- * Interpolated values are injected as DOM nodes (not raw HTML),
- * preventing XSS. Returns a DocumentFragment ready for insertion.
+ * Interpolated values are injected as DOM nodes (not raw HTML) for text/structure
+ * contexts, which prevents markup breakout in those positions.
+ *
+ * Security note:
+ * - This does NOT sanitize attribute values or URL protocols.
+ * - Interpolating untrusted values into attributes like `href`, `src`, `srcdoc`,
+ *   `on*`, etc. can still be unsafe.
+ *
+ * Returns a DocumentFragment ready for insertion.
  *
  * ```ts
  * const fragment = html`<p>Hello, ${name}!</p>`;

package/dist/core/html.js

@@ -90,10 +90,17 @@ function replaceAttributeTokens(element, values) {
     }
 }
 /**
- * Tagged template for safe HTML construction.
+ * Tagged template for safer HTML construction.
  *
- * Interpolated values are injected as DOM nodes (not raw HTML),
- * preventing XSS. Returns a DocumentFragment ready for insertion.
+ * Interpolated values are injected as DOM nodes (not raw HTML) for text/structure
+ * contexts, which prevents markup breakout in those positions.
+ *
+ * Security note:
+ * - This does NOT sanitize attribute values or URL protocols.
+ * - Interpolating untrusted values into attributes like `href`, `src`, `srcdoc`,
+ *   `on*`, etc. can still be unsafe.
+ *
+ * Returns a DocumentFragment ready for insertion.
  *
  * ```ts
  * const fragment = html`<p>Hello, ${name}!</p>`;

package/dist/core/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./scope.js";
 export * from "./signal.js";
+export * from "./observability.js";
 export { watch, onCleanup, useEvent, useInterval, useTimeout, useFetch } from "./watch.js";
 export * from "./when.js";
 export * from "./match.js";