dalila 1.3.2 → 1.4.0

package/dist/runtime/bind.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Dalila Template Runtime - bind()
+ *
+ * Binds a DOM tree to a reactive context using declarative attributes.
+ * No eval, no inline JS execution - only identifier resolution from ctx.
+ *
+ * @module dalila/runtime
+ */
+export interface BindOptions {
+    /**
+     * Event types to bind (default: click, input, change, submit, keydown, keyup)
+     */
+    events?: string[];
+    /**
+     * Selectors for elements where text interpolation should be skipped
+     */
+    rawTextSelectors?: string;
+}
+export interface BindContext {
+    [key: string]: unknown;
+}
+export type DisposeFunction = () => void;
+/**
+ * Bind a DOM tree to a reactive context.
+ *
+ * @param root - The root element to bind
+ * @param ctx - The context object containing handlers and reactive values
+ * @param options - Binding options
+ * @returns A dispose function that removes all bindings
+ *
+ * @example
+ * ```ts
+ * import { bind } from 'dalila/runtime';
+ *
+ * const ctx = {
+ *   count: signal(0),
+ *   increment: () => count.update(n => n + 1),
+ * };
+ *
+ * const dispose = bind(document.getElementById('app')!, ctx);
+ *
+ * // Later, to cleanup:
+ * dispose();
+ * ```
+ */
+export declare function bind(root: Element, ctx: BindContext, options?: BindOptions): DisposeFunction;
+/**
+ * Automatically bind when DOM is ready.
+ * Useful for simple pages without a build step.
+ *
+ * @example
+ * ```html
+ * <script type="module">
+ *   import { autoBind } from 'dalila/runtime';
+ *   autoBind('#app', { count: signal(0) });
+ * </script>
+ * ```
+ */
+export declare function autoBind(selector: string, ctx: BindContext, options?: BindOptions): Promise<DisposeFunction>;

package/dist/runtime/bind.js

@@ -0,0 +1,336 @@
+/**
+ * Dalila Template Runtime - bind()
+ *
+ * Binds a DOM tree to a reactive context using declarative attributes.
+ * No eval, no inline JS execution - only identifier resolution from ctx.
+ *
+ * @module dalila/runtime
+ */
+import { effect, createScope, withScope, isInDevMode } from '../core/index.js';
+// ============================================================================
+// Utilities
+// ============================================================================
+/**
+ * Check if a value is a Dalila signal
+ */
+function isSignal(value) {
+    return typeof value === 'function' && 'set' in value && 'update' in value;
+}
+/**
+ * Resolve a value from ctx - handles signals, functions, and plain values
+ */
+function resolve(value) {
+    if (isSignal(value))
+        return value();
+    if (typeof value === 'function')
+        return value();
+    return value;
+}
+/**
+ * Normalize binding attribute value
+ * Handles both "name" and "{name}" formats
+ */
+function normalizeBinding(raw) {
+    if (!raw)
+        return null;
+    const trimmed = raw.trim();
+    // Match {name} format and extract name
+    const match = trimmed.match(/^\{\s*([a-zA-Z_$][\w$]*)\s*\}$/);
+    return match ? match[1] : trimmed;
+}
+/**
+ * Dev mode warning helper
+ */
+function warn(message) {
+    if (isInDevMode()) {
+        console.warn(`[Dalila] ${message}`);
+    }
+}
+// ============================================================================
+// Default Options
+// ============================================================================
+const DEFAULT_EVENTS = ['click', 'input', 'change', 'submit', 'keydown', 'keyup'];
+const DEFAULT_RAW_TEXT_SELECTORS = 'pre, code';
+// ============================================================================
+// Text Interpolation
+// ============================================================================
+/**
+ * Process a text node and replace {tokens} with reactive bindings
+ */
+function bindTextNode(node, ctx, cleanups) {
+    const text = node.data;
+    const regex = /\{\s*([a-zA-Z_$][\w$]*)\s*\}/g;
+    // Check if there are any tokens
+    if (!regex.test(text))
+        return;
+    // Reset regex
+    regex.lastIndex = 0;
+    const frag = document.createDocumentFragment();
+    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));
+        }
+        const key = match[1];
+        const value = ctx[key];
+        if (value === undefined) {
+            warn(`Text interpolation: "${key}" not found in context`);
+            frag.appendChild(document.createTextNode(match[0]));
+        }
+        else if (isSignal(value)) {
+            // Reactive text node
+            const textNode = document.createTextNode('');
+            const stop = effect(() => {
+                textNode.data = String(value());
+            });
+            if (typeof stop === 'function') {
+                cleanups.push(stop);
+            }
+            frag.appendChild(textNode);
+        }
+        else {
+            // Static value - render once
+            frag.appendChild(document.createTextNode(String(value)));
+        }
+        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);
+    }
+}
+// ============================================================================
+// Event Binding
+// ============================================================================
+/**
+ * Bind all d-on-* events within root
+ */
+function bindEvents(root, ctx, events, cleanups) {
+    for (const eventName of events) {
+        const attr = `d-on-${eventName}`;
+        const elements = root.querySelectorAll(`[${attr}]`);
+        elements.forEach((el) => {
+            const handlerName = normalizeBinding(el.getAttribute(attr));
+            if (!handlerName)
+                return;
+            const handler = ctx[handlerName];
+            if (handler === undefined) {
+                warn(`Event handler "${handlerName}" not found in context`);
+                return;
+            }
+            if (typeof handler !== 'function') {
+                warn(`Event handler "${handlerName}" is not a function`);
+                return;
+            }
+            el.addEventListener(eventName, handler);
+            cleanups.push(() => el.removeEventListener(eventName, handler));
+        });
+    }
+}
+// ============================================================================
+// when Directive
+// ============================================================================
+/**
+ * Bind all [when] directives within root
+ */
+function bindWhen(root, ctx, cleanups) {
+    const elements = root.querySelectorAll('[when]');
+    elements.forEach((el) => {
+        const bindingName = normalizeBinding(el.getAttribute('when'));
+        if (!bindingName)
+            return;
+        const binding = ctx[bindingName];
+        if (binding === undefined) {
+            warn(`when: "${bindingName}" not found in context`);
+            return;
+        }
+        const htmlEl = el;
+        const stop = effect(() => {
+            const value = !!resolve(binding);
+            htmlEl.style.display = value ? '' : 'none';
+        });
+        if (typeof stop === 'function') {
+            cleanups.push(stop);
+        }
+    });
+}
+// ============================================================================
+// match Directive
+// ============================================================================
+/**
+ * Bind all [match] directives within root
+ */
+function bindMatch(root, ctx, cleanups) {
+    const elements = root.querySelectorAll('[match]');
+    elements.forEach((el) => {
+        const bindingName = normalizeBinding(el.getAttribute('match'));
+        if (!bindingName)
+            return;
+        const binding = ctx[bindingName];
+        if (binding === undefined) {
+            warn(`match: "${bindingName}" not found in context`);
+            return;
+        }
+        const cases = Array.from(el.querySelectorAll('[case]'));
+        const stop = effect(() => {
+            const value = String(resolve(binding));
+            let matchedEl = null;
+            let defaultEl = null;
+            // First pass: hide all and find match/default
+            for (const caseEl of cases) {
+                caseEl.style.display = 'none';
+                const caseValue = caseEl.getAttribute('case');
+                if (caseValue === 'default') {
+                    defaultEl = caseEl;
+                }
+                else if (caseValue === value && !matchedEl) {
+                    matchedEl = caseEl;
+                }
+            }
+            // Second pass: show match OR default (not both)
+            if (matchedEl) {
+                matchedEl.style.display = '';
+            }
+            else if (defaultEl) {
+                defaultEl.style.display = '';
+            }
+        });
+        if (typeof stop === 'function') {
+            cleanups.push(stop);
+        }
+    });
+}
+// ============================================================================
+// Main bind() Function
+// ============================================================================
+/**
+ * Bind a DOM tree to a reactive context.
+ *
+ * @param root - The root element to bind
+ * @param ctx - The context object containing handlers and reactive values
+ * @param options - Binding options
+ * @returns A dispose function that removes all bindings
+ *
+ * @example
+ * ```ts
+ * import { bind } from 'dalila/runtime';
+ *
+ * const ctx = {
+ *   count: signal(0),
+ *   increment: () => count.update(n => n + 1),
+ * };
+ *
+ * const dispose = bind(document.getElementById('app')!, ctx);
+ *
+ * // Later, to cleanup:
+ * dispose();
+ * ```
+ */
+export function bind(root, ctx, options = {}) {
+    const events = options.events ?? DEFAULT_EVENTS;
+    const rawTextSelectors = options.rawTextSelectors ?? DEFAULT_RAW_TEXT_SELECTORS;
+    const htmlRoot = root;
+    // Create a scope for this template binding
+    const templateScope = createScope();
+    const cleanups = [];
+    // Run all bindings within the template scope
+    withScope(templateScope, () => {
+        // 1. Text interpolation
+        const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+        const textNodes = [];
+        while (walker.nextNode()) {
+            const node = walker.currentNode;
+            // Skip nodes inside raw text containers
+            const parent = node.parentElement;
+            if (parent && parent.closest(rawTextSelectors)) {
+                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);
+        }
+        // 2. Event bindings
+        bindEvents(root, ctx, events, cleanups);
+        // 3. when directive
+        bindWhen(root, ctx, cleanups);
+        // 4. match directive
+        bindMatch(root, ctx, cleanups);
+    });
+    // Bindings complete: remove loading state and mark as ready
+    // Use microtask to ensure all effects have run at least once
+    queueMicrotask(() => {
+        htmlRoot.removeAttribute('d-loading');
+        htmlRoot.setAttribute('d-ready', '');
+    });
+    // Return dispose function
+    return () => {
+        // Run manual cleanups (event listeners)
+        for (const cleanup of cleanups) {
+            if (typeof cleanup === 'function') {
+                try {
+                    cleanup();
+                }
+                catch (e) {
+                    if (isInDevMode()) {
+                        console.warn('[Dalila] Cleanup error:', e);
+                    }
+                }
+            }
+        }
+        cleanups.length = 0;
+        // Dispose template scope (stops all effects)
+        try {
+            templateScope.dispose();
+        }
+        catch (e) {
+            if (isInDevMode()) {
+                console.warn('[Dalila] Scope dispose error:', e);
+            }
+        }
+    };
+}
+// ============================================================================
+// Convenience: Auto-bind on DOMContentLoaded
+// ============================================================================
+/**
+ * Automatically bind when DOM is ready.
+ * Useful for simple pages without a build step.
+ *
+ * @example
+ * ```html
+ * <script type="module">
+ *   import { autoBind } from 'dalila/runtime';
+ *   autoBind('#app', { count: signal(0) });
+ * </script>
+ * ```
+ */
+export function autoBind(selector, ctx, options) {
+    return new Promise((resolve, reject) => {
+        const doBind = () => {
+            const root = document.querySelector(selector);
+            if (!root) {
+                reject(new Error(`[Dalila] Element not found: ${selector}`));
+                return;
+            }
+            resolve(bind(root, ctx, options));
+        };
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', doBind, { once: true });
+        }
+        else {
+            doBind();
+        }
+    });
+}

package/dist/runtime/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Dalila Runtime Module
+ *
+ * Provides declarative DOM binding with reactive updates.
+ * No eval, no inline JS - only identifier resolution.
+ *
+ * @module dalila/runtime
+ */
+export { bind, autoBind } from './bind.js';
+export type { BindOptions, BindContext, DisposeFunction } from './bind.js';

package/dist/runtime/index.js

@@ -0,0 +1,9 @@
+/**
+ * Dalila Runtime Module
+ *
+ * Provides declarative DOM binding with reactive updates.
+ * No eval, no inline JS - only identifier resolution.
+ *
+ * @module dalila/runtime
+ */
+export { bind, autoBind } from './bind.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dalila",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "DOM-first reactive framework based on signals",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,6 +9,22 @@
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
+    },
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "default": "./dist/core/index.js"
+    },
+    "./context": {
+      "types": "./dist/context/index.d.ts",
+      "default": "./dist/context/index.js"
+    },
+    "./context/raw": {
+      "types": "./dist/context/raw.d.ts",
+      "default": "./dist/context/raw.js"
+    },
+    "./runtime": {
+      "types": "./dist/runtime/index.d.ts",
+      "default": "./dist/runtime/index.js"
     }
   },
   "scripts": {
@@ -34,6 +50,7 @@
     "@playwright/test": "^1.57.0",
     "@types/jest": "^29.5.0",
     "@types/node": "^20.0.0",
+    "chokidar": "^3.6.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "typescript": "^5.9.3"

package/dist/compiler/dalila-lang.d.ts

@@ -1,85 +0,0 @@
-export interface DalilaTemplate {
-    path: string;
-    content: string;
-    componentName: string;
-}
-export interface CompilationResult {
-    source: string;
-    typeDefinition: string;
-    diagnostics: Diagnostic[];
-}
-export interface Diagnostic {
-    message: string;
-    line: number;
-    column: number;
-    severity: 'error' | 'warning' | 'info';
-}
-export interface ElementNode {
-    type: 'element';
-    tagName: string;
-    attributes: Attribute[];
-    children: Node[];
-    selfClosing: boolean;
-    location: Location;
-}
-export interface TextNode {
-    type: 'text';
-    content: string;
-    location: Location;
-}
-export interface InterpolationNode {
-    type: 'interpolation';
-    identifier: string;
-    location: Location;
-}
-export interface Attribute {
-    name: string;
-    value: string | InterpolationNode | null;
-    location: Location;
-}
-export interface Location {
-    line: number;
-    column: number;
-    offset: number;
-}
-export type Node = ElementNode | TextNode | InterpolationNode;
-export declare function isElementNode(node: Node): node is ElementNode;
-export declare function isTextNode(node: Node): node is TextNode;
-export declare function isInterpolationNode(node: Node): node is InterpolationNode;
-export declare class DalilaParser {
-    private input;
-    private position;
-    private line;
-    private column;
-    private rawTextTags;
-    constructor(input: string);
-    parse(): {
-        ast: Node[];
-        diagnostics: Diagnostic[];
-    };
-    private parseElement;
-    private parseTagName;
-    private parseAttributes;
-    private parseAttribute;
-    private parseInterpolation;
-    private parseText;
-    private skipWhitespace;
-    private match;
-    private lookingAt;
-    private peek;
-    private advance;
-    private backup;
-    private isAtEnd;
-    private currentLocation;
-}
-export declare class DalilaCodeGenerator {
-    private indentLevel;
-    private output;
-    generate(ast: Node[], componentName: string): CompilationResult;
-    private generateElement;
-    private generateAttribute;
-    private generateTextInterpolation;
-    private generateTypeDefinition;
-    private emit;
-}
-export declare function compileDalilaTemplate(template: DalilaTemplate): CompilationResult;