dalila 1.4.2 → 1.4.3

package/dist/router/router.js

@@ -0,0 +1,169 @@
+import { signal } from '../core/signal.js';
+import { createScope, withScope } from '../core/scope.js';
+import { findRoute } from './route.js';
+let currentRouter = null;
+export function getCurrentRouter() {
+    return currentRouter;
+}
+export function createRouter(config) {
+    const routes = config.routes;
+    const routeSignal = signal({
+        path: '/',
+        params: {},
+        query: new URLSearchParams(),
+        hash: ''
+    });
+    let outletElement = null;
+    let currentScope = null;
+    let currentRouteState = null;
+    let scrollPositions = {};
+    let currentLoaderController = null;
+    async function updateRoute(path, replace = false) {
+        const match = findRoute(path, routes);
+        if (!match) {
+            console.warn(`No route found for path: ${path}`);
+            return;
+        }
+        const fromState = currentRouteState;
+        const toState = {
+            path: match.route.path,
+            params: match.params,
+            query: match.query,
+            hash: match.hash
+        };
+        // Save scroll position before leaving current route
+        if (fromState && outletElement) {
+            scrollPositions[fromState.path] = window.scrollY;
+        }
+        // Call beforeEnter guard
+        if (match.route.beforeEnter) {
+            const canEnter = await match.route.beforeEnter(toState, fromState || toState);
+            if (!canEnter) {
+                console.log('Navigation cancelled by beforeEnter guard');
+                return;
+            }
+        }
+        // Abort any ongoing loader
+        if (currentLoaderController) {
+            currentLoaderController.abort();
+        }
+        // Dispose of previous scope
+        if (currentScope) {
+            // Call afterLeave hook
+            if (match.route.afterLeave) {
+                await match.route.afterLeave(fromState || toState, toState);
+            }
+            currentScope.dispose();
+        }
+        // Create new scope for this route
+        currentScope = createScope();
+        // Load data if route has a loader
+        let routeData = undefined;
+        if (match.route.loader) {
+            currentLoaderController = new AbortController();
+            try {
+                routeData = await match.route.loader({
+                    ...toState,
+                    signal: currentLoaderController.signal
+                });
+            }
+            catch (error) {
+                if (error.name !== 'AbortError') {
+                    console.error('Loader failed:', error);
+                }
+                return;
+            }
+        }
+        // Update route signal
+        routeSignal.set(toState);
+        currentRouteState = toState;
+        // Update browser history
+        const url = path + (match.query.toString() ? `?${match.query}` : '') + (match.hash ? `#${match.hash}` : '');
+        if (replace) {
+            history.replaceState(null, '', url);
+        }
+        else {
+            history.pushState(null, '', url);
+        }
+        // Mount the view if outlet exists
+        if (outletElement) {
+            await mountView(match, routeData);
+        }
+        // Restore scroll position
+        if (toState.hash) {
+            const element = document.getElementById(toState.hash.slice(1));
+            if (element) {
+                element.scrollIntoView();
+            }
+        }
+        else if (scrollPositions[toState.path] !== undefined) {
+            window.scrollTo(0, scrollPositions[toState.path]);
+        }
+        else {
+            window.scrollTo(0, 0);
+        }
+    }
+    async function mountView(match, routeData) {
+        if (!outletElement || !currentScope)
+            return;
+        // Clear outlet
+        outletElement.innerHTML = '';
+        // Mount view within scope
+        withScope(currentScope, () => {
+            const viewResult = match.route.view();
+            const nodes = Array.isArray(viewResult) ? viewResult : [viewResult];
+            outletElement.append(...nodes);
+        });
+    }
+    function handlePopState() {
+        updateRoute(window.location.pathname + window.location.search + window.location.hash, true);
+    }
+    function handleLink(event) {
+        const target = event.target;
+        const anchor = target.closest('a');
+        if (!anchor)
+            return;
+        const href = anchor.getAttribute('href');
+        if (!href || href.startsWith('http') || href.startsWith('//') || anchor.target === '_blank') {
+            return;
+        }
+        event.preventDefault();
+        push(href);
+    }
+    function push(path) {
+        updateRoute(path, false);
+    }
+    function replace(path) {
+        updateRoute(path, true);
+    }
+    function back() {
+        window.history.back();
+    }
+    function mount(outlet) {
+        outletElement = outlet;
+        // Set up history API listener
+        window.addEventListener('popstate', handlePopState);
+        // Initialize with current location
+        const initialPath = window.location.pathname + window.location.search + window.location.hash;
+        updateRoute(initialPath, true);
+    }
+    function outlet() {
+        if (!outletElement) {
+            outletElement = document.createElement('div');
+        }
+        return outletElement;
+    }
+    // Create router instance
+    const router = {
+        mount,
+        push,
+        replace,
+        back,
+        link: handleLink,
+        outlet,
+        route: routeSignal
+    };
+    // Set as current router
+    currentRouter = router;
+    return router;
+}

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,340 @@
+/**
+ * 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;
+    // HMR support: Register binding context globally in dev mode
+    if (isInDevMode()) {
+        globalThis.__dalila_hmr_context = { root, ctx, options };
+    }
+    // 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/dist/simple.d.ts

@@ -0,0 +1,11 @@
+/**
+ * dalila/simple - Simplified API
+ *
+ * Just the essentials:
+ * - Global store (no Zustand needed)
+ * - Auto-scope context (menos verboso)
+ * - Core reactivity primitives
+ *
+ * Philosophy: Use HTML templates (via dev-server), not hyperscript.
+ */
+export * from './core/index.js';

package/dist/simple.js

@@ -0,0 +1,11 @@
+/**
+ * dalila/simple - Simplified API
+ *
+ * Just the essentials:
+ * - Global store (no Zustand needed)
+ * - Auto-scope context (menos verboso)
+ * - Core reactivity primitives
+ *
+ * Philosophy: Use HTML templates (via dev-server), not hyperscript.
+ */
+export * from './core/index.js';

package/package.json

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