dalila 1.9.5 → 1.9.6

package/README.md

@@ -58,7 +58,7 @@ bind(document.getElementById('app')!, ctx);
 
 ### Runtime
 
-- [Template Binding](./docs/runtime/bind.md) — `bind()`, `mount()`, `configure()`, text interpolation, events
+- [Template Binding](./docs/runtime/bind.md) — `bind()`, `mount()`, `configure()`, transitions, portal, text interpolation, events
 - [Components](./docs/runtime/component.md) — `defineComponent`, typed props/emits/refs, slots
 - [FOUC Prevention](./docs/runtime/fouc-prevention.md) — Automatic token hiding
 
@@ -108,7 +108,7 @@ Firefox extension workflows:
 
 ```
 dalila           → signal, computed, effect, batch, ...
-dalila/runtime   → bind(), mount(), configure(), defineComponent()
+dalila/runtime   → bind(), mount(), configure(), createPortalTarget(), defineComponent()
 dalila/context   → createContext, provide, inject
 dalila/http      → createHttpClient with XSRF protection
 ```
@@ -143,6 +143,23 @@ const dispose = mount('.app', { count: signal(0) });
 dispose();
 ```
 
+### Transitions and Portal
+
+```html
+<div d-when="open" d-transition="fade">Panel</div>
+<div d-portal="showModal ? '#modal-root' : null">Modal content</div>
+```
+
+```ts
+import { configure, createPortalTarget } from 'dalila/runtime';
+
+const modalTarget = createPortalTarget('modal-root');
+
+configure({
+  transitions: [{ name: 'fade', duration: 250 }],
+});
+```
+
 ### Scopes
 
 ```ts

package/dist/cli/check.js

@@ -520,7 +520,7 @@ function extractTemplateIdentifiers(html) {
         i++;
     }
     // --- 2. Directive scanning (supports single and double quotes) ---
-    const DIRECTIVE_RE = /\b(d-each|d-virtual-each|d-virtual-height|d-virtual-item-height|d-virtual-overscan|d-if|d-when|d-match|d-html|d-attr-[a-zA-Z][\w-]*|d-bind-[a-zA-Z][\w-]*|d-on-[a-zA-Z][\w-]*|d-form-error|d-form|d-array)\s*=\s*(['"])([\s\S]*?)\2/g;
+    const DIRECTIVE_RE = /\b(d-each|d-virtual-each|d-virtual-height|d-virtual-item-height|d-virtual-overscan|d-if|d-when|d-match|d-portal|d-html|d-attr-[a-zA-Z][\w-]*|d-bind-[a-zA-Z][\w-]*|d-on-[a-zA-Z][\w-]*|d-form-error|d-form|d-array)\s*=\s*(['"])([\s\S]*?)\2/g;
     DIRECTIVE_RE.lastIndex = 0;
     let match;
     while ((match = DIRECTIVE_RE.exec(html))) {

package/dist/runtime/bind.d.ts

@@ -6,6 +6,7 @@
  *
  * @module dalila/runtime
  */
+import { Signal } from '../core/index.js';
 import type { Component } from './component.js';
 export interface BindOptions {
     /**
@@ -30,6 +31,10 @@ export interface BindOptions {
     components?: Record<string, Component> | Component[];
     /** Error policy for component `ctx.onMount()` callbacks. Default: 'log'. */
     onMountError?: 'log' | 'throw';
+    /**
+     * Optional runtime transition registry used by `d-transition`.
+     */
+    transitions?: TransitionConfig[];
     /**
      * Internal flag — set by fromHtml for router/template rendering.
      * Skips HMR context registration but KEEPS d-ready/d-loading lifecycle.
@@ -59,6 +64,13 @@ export interface BindHandle {
     getRef(name: string): Element | null;
     getRefs(): Readonly<Record<string, Element>>;
 }
+export interface TransitionConfig {
+    name: string;
+    enter?: (el: HTMLElement) => void;
+    leave?: (el: HTMLElement) => void;
+    duration?: number;
+}
+export declare function createPortalTarget(id: string): Signal<Element | null>;
 /**
  * Set global defaults for all `bind()` / `mount()` calls.
  *

package/dist/runtime/bind.js

@@ -97,6 +97,7 @@ function warn(message) {
         console.warn(`[Dalila] ${message}`);
     }
 }
+const portalSyncByElement = new WeakMap();
 function describeBindRoot(root) {
     const explicit = root.getAttribute('data-component') ||
         root.getAttribute('data-devtools-label') ||
@@ -1135,13 +1136,231 @@ function bindEmit(root, ctx, cleanups) {
         }
     }
 }
+function createTransitionRegistry(transitions) {
+    const registry = new Map();
+    if (!transitions)
+        return registry;
+    for (const cfg of transitions) {
+        if (!cfg || typeof cfg !== 'object')
+            continue;
+        const name = typeof cfg.name === 'string' ? cfg.name.trim() : '';
+        if (!name) {
+            warn('configure({ transitions }): each transition must have a non-empty "name"');
+            continue;
+        }
+        registry.set(name, cfg);
+    }
+    return registry;
+}
+function readTransitionNames(el) {
+    const raw = el.getAttribute('d-transition');
+    if (!raw)
+        return [];
+    return raw
+        .split(/\s+/)
+        .map(v => v.trim())
+        .filter(Boolean);
+}
+function parseCssTimeToMs(value) {
+    const token = value.trim();
+    if (!token)
+        return 0;
+    if (token.endsWith('ms')) {
+        const ms = Number(token.slice(0, -2));
+        return Number.isFinite(ms) ? Math.max(0, ms) : 0;
+    }
+    if (token.endsWith('s')) {
+        const seconds = Number(token.slice(0, -1));
+        return Number.isFinite(seconds) ? Math.max(0, seconds * 1000) : 0;
+    }
+    const fallback = Number(token);
+    return Number.isFinite(fallback) ? Math.max(0, fallback) : 0;
+}
+function getTransitionDurationMs(el, names, registry) {
+    let durationFromRegistry = 0;
+    for (const name of names) {
+        const cfg = registry.get(name);
+        if (!cfg)
+            continue;
+        if (typeof cfg.duration === 'number' && Number.isFinite(cfg.duration)) {
+            durationFromRegistry = Math.max(durationFromRegistry, Math.max(0, cfg.duration));
+        }
+    }
+    let durationFromCss = 0;
+    if (typeof window !== 'undefined' && typeof window.getComputedStyle === 'function') {
+        const style = window.getComputedStyle(el);
+        const durations = style.transitionDuration.split(',');
+        const delays = style.transitionDelay.split(',');
+        const total = Math.max(durations.length, delays.length);
+        for (let i = 0; i < total; i++) {
+            const duration = parseCssTimeToMs(durations[Math.min(i, durations.length - 1)] ?? '0ms');
+            const delay = parseCssTimeToMs(delays[Math.min(i, delays.length - 1)] ?? '0ms');
+            durationFromCss = Math.max(durationFromCss, duration + delay);
+        }
+    }
+    return Math.max(durationFromRegistry, durationFromCss);
+}
+function runTransitionHook(phase, el, names, registry) {
+    for (const name of names) {
+        const cfg = registry.get(name);
+        const hook = phase === 'enter' ? cfg?.enter : cfg?.leave;
+        if (typeof hook !== 'function')
+            continue;
+        try {
+            hook(el);
+        }
+        catch (err) {
+            warn(`d-transition (${name}): ${phase} hook failed (${err.message || String(err)})`);
+        }
+    }
+}
+function syncPortalElement(el) {
+    const sync = portalSyncByElement.get(el);
+    sync?.();
+}
+function createTransitionController(el, registry, cleanups) {
+    const names = readTransitionNames(el);
+    const hasTransition = names.length > 0;
+    let token = 0;
+    let timeoutId = null;
+    const cancelPending = () => {
+        token++;
+        if (timeoutId != null) {
+            clearTimeout(timeoutId);
+            timeoutId = null;
+        }
+    };
+    cleanups.push(cancelPending);
+    const enter = () => {
+        cancelPending();
+        if (!hasTransition)
+            return;
+        el.removeAttribute('data-leave');
+        el.setAttribute('data-enter', '');
+        runTransitionHook('enter', el, names, registry);
+    };
+    const leave = (onDone) => {
+        cancelPending();
+        if (!hasTransition) {
+            onDone();
+            return;
+        }
+        const current = ++token;
+        el.removeAttribute('data-enter');
+        el.setAttribute('data-leave', '');
+        runTransitionHook('leave', el, names, registry);
+        const durationMs = getTransitionDurationMs(el, names, registry);
+        if (durationMs <= 0) {
+            if (current === token)
+                onDone();
+            return;
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = null;
+            if (current !== token)
+                return;
+            onDone();
+        }, durationMs);
+    };
+    return { hasTransition, enter, leave };
+}
+function bindPortal(root, ctx, cleanups) {
+    const elements = qsaIncludingRoot(root, '[d-portal]');
+    for (const el of elements) {
+        const rawExpression = el.getAttribute('d-portal')?.trim();
+        if (!rawExpression)
+            continue;
+        let expressionAst = null;
+        let fallbackSelector = null;
+        try {
+            expressionAst = parseExpression(rawExpression);
+        }
+        catch {
+            // Allow selector shorthand: d-portal="#modal-root"
+            fallbackSelector = rawExpression;
+        }
+        const htmlEl = el;
+        const anchor = document.createComment('d-portal');
+        htmlEl.parentNode?.insertBefore(anchor, htmlEl);
+        const coerceTarget = (value) => {
+            const resolved = resolve(value);
+            if (resolved == null || resolved === false)
+                return null;
+            if (typeof resolved === 'string') {
+                const selector = resolved.trim();
+                if (!selector)
+                    return null;
+                if (typeof document === 'undefined')
+                    return null;
+                const target = document.querySelector(selector);
+                if (!target) {
+                    warn(`d-portal: target "${selector}" not found`);
+                    return null;
+                }
+                return target;
+            }
+            if (typeof Element !== 'undefined' && resolved instanceof Element) {
+                return resolved;
+            }
+            warn('d-portal: expression must resolve to selector string, Element, or null');
+            return null;
+        };
+        const restoreToAnchor = () => {
+            const hostParent = anchor.parentNode;
+            if (!hostParent)
+                return;
+            if (htmlEl.parentNode === hostParent)
+                return;
+            const next = anchor.nextSibling;
+            if (next)
+                hostParent.insertBefore(htmlEl, next);
+            else
+                hostParent.appendChild(htmlEl);
+        };
+        const syncPortal = () => {
+            let target = null;
+            if (expressionAst) {
+                const result = evalExpressionAst(expressionAst, ctx);
+                if (!result.ok) {
+                    if (result.reason === 'missing_identifier') {
+                        warn(`d-portal: ${result.message}`);
+                    }
+                    else {
+                        warn(`d-portal: invalid expression "${rawExpression}"`);
+                    }
+                    target = null;
+                }
+                else {
+                    target = coerceTarget(result.value);
+                }
+            }
+            else {
+                target = coerceTarget(fallbackSelector);
+            }
+            if (!target) {
+                restoreToAnchor();
+                return;
+            }
+            if (htmlEl.parentNode !== target) {
+                target.appendChild(htmlEl);
+            }
+        };
+        portalSyncByElement.set(htmlEl, syncPortal);
+        bindEffect(htmlEl, syncPortal);
+        cleanups.push(() => {
+            portalSyncByElement.delete(htmlEl);
+            restoreToAnchor();
+            anchor.remove();
+        });
+    }
+}
 // ============================================================================
 // d-when Directive
 // ============================================================================
 /**
  * Bind all [d-when] directives within root
  */
-function bindWhen(root, ctx, cleanups) {
+function bindWhen(root, ctx, cleanups, transitionRegistry) {
     const elements = qsaIncludingRoot(root, '[when], [d-when]');
     for (const el of elements) {
         const attrName = el.hasAttribute('when') ? 'when' : 'd-when';
@@ -1154,13 +1373,32 @@ function bindWhen(root, ctx, cleanups) {
             continue;
         }
         const htmlEl = el;
+        const transitions = createTransitionController(htmlEl, transitionRegistry, cleanups);
         // Apply initial state synchronously to avoid FOUC (flash of unstyled content)
         const initialValue = !!resolve(binding);
-        htmlEl.style.display = initialValue ? '' : 'none';
+        if (initialValue) {
+            htmlEl.style.display = '';
+            if (transitions.hasTransition) {
+                htmlEl.removeAttribute('data-leave');
+                htmlEl.setAttribute('data-enter', '');
+            }
+        }
+        else {
+            htmlEl.style.display = 'none';
+            htmlEl.removeAttribute('data-enter');
+            htmlEl.removeAttribute('data-leave');
+        }
         // Then create reactive effect to keep it updated
         bindEffect(htmlEl, () => {
             const value = !!resolve(binding);
-            htmlEl.style.display = value ? '' : 'none';
+            if (value) {
+                htmlEl.style.display = '';
+                transitions.enter();
+                return;
+            }
+            transitions.leave(() => {
+                htmlEl.style.display = 'none';
+            });
         });
     }
 }
@@ -1851,7 +2089,7 @@ function bindEach(root, ctx, cleanups) {
  * Unlike [d-when] which toggles display, d-if adds/removes the element from
  * the DOM entirely. A comment node is left as placeholder for insertion position.
  */
-function bindIf(root, ctx, cleanups) {
+function bindIf(root, ctx, cleanups, transitionRegistry) {
     const elements = qsaIncludingRoot(root, '[d-if]');
     const processedElse = new Set();
     for (const el of elements) {
@@ -1869,23 +2107,36 @@ function bindIf(root, ctx, cleanups) {
         el.parentNode?.replaceChild(comment, el);
         el.removeAttribute('d-if');
         const htmlEl = el;
+        const transitions = createTransitionController(htmlEl, transitionRegistry, cleanups);
         // Handle d-else branch
         let elseHtmlEl = null;
         let elseComment = null;
+        let elseTransitions = null;
         if (elseEl) {
             processedElse.add(elseEl);
             elseComment = document.createComment('d-else');
             elseEl.parentNode?.replaceChild(elseComment, elseEl);
             elseEl.removeAttribute('d-else');
             elseHtmlEl = elseEl;
+            elseTransitions = createTransitionController(elseHtmlEl, transitionRegistry, cleanups);
         }
         // Apply initial state synchronously to avoid FOUC
         const initialValue = !!resolve(binding);
         if (initialValue) {
             comment.parentNode?.insertBefore(htmlEl, comment);
+            syncPortalElement(htmlEl);
+            if (transitions.hasTransition) {
+                htmlEl.removeAttribute('data-leave');
+                htmlEl.setAttribute('data-enter', '');
+            }
         }
         else if (elseHtmlEl && elseComment) {
             elseComment.parentNode?.insertBefore(elseHtmlEl, elseComment);
+            syncPortalElement(elseHtmlEl);
+            if (elseTransitions?.hasTransition) {
+                elseHtmlEl.removeAttribute('data-leave');
+                elseHtmlEl.setAttribute('data-enter', '');
+            }
         }
         // Then create reactive effect to keep it updated
         if (elseHtmlEl && elseComment) {
@@ -1896,18 +2147,26 @@ function bindIf(root, ctx, cleanups) {
                 if (value) {
                     if (!htmlEl.parentNode) {
                         comment.parentNode?.insertBefore(htmlEl, comment);
+                        syncPortalElement(htmlEl);
                     }
-                    if (capturedElseEl.parentNode) {
-                        capturedElseEl.parentNode.removeChild(capturedElseEl);
-                    }
+                    transitions.enter();
+                    elseTransitions?.leave(() => {
+                        if (capturedElseEl.parentNode) {
+                            capturedElseEl.parentNode.removeChild(capturedElseEl);
+                        }
+                    });
                 }
                 else {
-                    if (htmlEl.parentNode) {
-                        htmlEl.parentNode.removeChild(htmlEl);
-                    }
+                    transitions.leave(() => {
+                        if (htmlEl.parentNode) {
+                            htmlEl.parentNode.removeChild(htmlEl);
+                        }
+                    });
                     if (!capturedElseEl.parentNode) {
                         capturedElseComment.parentNode?.insertBefore(capturedElseEl, capturedElseComment);
+                        syncPortalElement(capturedElseEl);
                     }
+                    elseTransitions?.enter();
                 }
             });
         }
@@ -1917,12 +2176,16 @@ function bindIf(root, ctx, cleanups) {
                 if (value) {
                     if (!htmlEl.parentNode) {
                         comment.parentNode?.insertBefore(htmlEl, comment);
+                        syncPortalElement(htmlEl);
                     }
+                    transitions.enter();
                 }
                 else {
-                    if (htmlEl.parentNode) {
-                        htmlEl.parentNode.removeChild(htmlEl);
-                    }
+                    transitions.leave(() => {
+                        if (htmlEl.parentNode) {
+                            htmlEl.parentNode.removeChild(htmlEl);
+                        }
+                    });
                 }
             });
         }
@@ -3064,6 +3327,20 @@ function bindComponents(root, ctx, events, cleanups, onMountError) {
 // Global Configuration
 // ============================================================================
 let globalConfig = {};
+export function createPortalTarget(id) {
+    const targetSignal = signal(null);
+    if (typeof document === 'undefined') {
+        return targetSignal;
+    }
+    let target = document.getElementById(id);
+    if (!target) {
+        target = document.createElement('div');
+        target.id = id;
+        document.body.appendChild(target);
+    }
+    targetSignal.set(target);
+    return targetSignal;
+}
 /**
  * Set global defaults for all `bind()` / `mount()` calls.
  *
@@ -3116,8 +3393,8 @@ export function configure(config) {
 export function bind(root, ctx, options = {}) {
     // ── Merge global config with per-call options ──
     if (Object.keys(globalConfig).length > 0) {
-        const { components: globalComponents, ...globalRest } = globalConfig;
-        const { components: localComponents, ...localRest } = options;
+        const { components: globalComponents, transitions: globalTransitions, ...globalRest } = globalConfig;
+        const { components: localComponents, transitions: localTransitions, ...localRest } = options;
         const mergedOpts = { ...globalRest, ...localRest };
         // Combine component registries: local takes precedence over global
         if (globalComponents || localComponents) {
@@ -3142,6 +3419,20 @@ export function bind(root, ctx, options = {}) {
             mergeComponents(localComponents); // local wins
             mergedOpts.components = combined;
         }
+        if (globalTransitions || localTransitions) {
+            const byName = new Map();
+            for (const item of globalTransitions ?? []) {
+                if (!item || typeof item.name !== 'string')
+                    continue;
+                byName.set(item.name, item);
+            }
+            for (const item of localTransitions ?? []) {
+                if (!item || typeof item.name !== 'string')
+                    continue;
+                byName.set(item.name, item);
+            }
+            mergedOpts.transitions = Array.from(byName.values());
+        }
         options = mergedOpts;
     }
     // ── Resolve string selector ──
@@ -3186,6 +3477,7 @@ export function bind(root, ctx, options = {}) {
     const onMountError = options.onMountError ?? 'log';
     const rawTextSelectors = options.rawTextSelectors ?? DEFAULT_RAW_TEXT_SELECTORS;
     const templatePlanCacheConfig = resolveTemplatePlanCacheConfig(options);
+    const transitionRegistry = createTransitionRegistry(options.transitions);
     const benchSession = createBindBenchSession();
     const htmlRoot = root;
     // HMR support: Register binding context globally in dev mode.
@@ -3229,14 +3521,16 @@ export function bind(root, ctx, options = {}) {
         // 13. d-emit-* bindings (component template → parent)
         bindEmit(root, ctx, cleanups);
         // 14. d-when directive
-        bindWhen(root, ctx, cleanups);
+        bindWhen(root, ctx, cleanups, transitionRegistry);
         // 15. d-match directive
         bindMatch(root, ctx, cleanups);
         // 16. Form error displays — BEFORE d-if to bind errors in conditionally rendered sections
         bindError(root, ctx, cleanups);
         bindFormError(root, ctx, cleanups);
-        // 17. d-if — must run last: elements are fully bound before conditional removal
-        bindIf(root, ctx, cleanups);
+        // 17. d-portal — move already-bound elements to external targets
+        bindPortal(root, ctx, cleanups);
+        // 18. d-if — must run last: elements are fully bound before conditional removal
+        bindIf(root, ctx, cleanups, transitionRegistry);
     });
     // Bindings complete: remove loading state and mark as ready.
     // Only the top-level bind owns this lifecycle — d-each clones skip it.

package/dist/runtime/index.d.ts

@@ -6,8 +6,8 @@
  *
  * @module dalila/runtime
  */
-export { bind, autoBind, mount, configure } from './bind.js';
-export type { BindOptions, BindContext, BindData, DisposeFunction, BindHandle } from './bind.js';
+export { bind, autoBind, mount, configure, createPortalTarget } from './bind.js';
+export type { BindOptions, BindContext, BindData, DisposeFunction, BindHandle, TransitionConfig } from './bind.js';
 export { fromHtml } from './fromHtml.js';
 export type { FromHtmlOptions } from './fromHtml.js';
 export { defineComponent } from './component.js';

package/dist/runtime/index.js

@@ -6,6 +6,6 @@
  *
  * @module dalila/runtime
  */
-export { bind, autoBind, mount, configure } from './bind.js';
+export { bind, autoBind, mount, configure, createPortalTarget } from './bind.js';
 export { fromHtml } from './fromHtml.js';
 export { defineComponent } from './component.js';

package/package.json

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