dalila 1.9.24 → 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
@@ -102,6 +104,8 @@ bind(document.getElementById('app')!, ctx);
 ```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/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/core/index.js

@@ -1,4 +1,3 @@
-import { installDefaultSecurityObservability } from "./observability.js";
 export * from "./scope.js";
 export * from "./signal.js";
 export * from "./observability.js";
@@ -14,4 +13,3 @@ export * from "./query.js";
 export * from "./mutation.js";
 export { batch, measure, mutate, timeSlice, configureScheduler, getSchedulerConfig } from "./scheduler.js";
 export { persist, createJSONStorage, clearPersisted, createPreloadScript, createThemeScript } from "./persist.js";
-installDefaultSecurityObservability();

package/dist/core/observability.d.ts

@@ -1,3 +1,4 @@
+import { type EffectErrorHandler } from "./signal.js";
 export interface SecurityRuntimeEvent {
     timestamp: string;
     source: string;
@@ -6,6 +7,8 @@ export interface SecurityRuntimeEvent {
     fatal: boolean;
 }
 export declare const SECURITY_RUNTIME_EVENT_NAME = "dalila:security-error";
+export declare const observabilityEffectErrorHandler: EffectErrorHandler;
+export declare function reportObservedEffectError(error: Error, source: string): void;
 export declare function installDefaultSecurityObservability(): void;
 export declare function getSecurityRuntimeEvents(): readonly SecurityRuntimeEvent[];
 export declare function clearSecurityRuntimeEvents(): void;

package/dist/core/observability.js

@@ -1,11 +1,11 @@
-import { FatalEffectError, setDefaultEffectErrorHandler, } from "./signal.js";
+import { setDefaultEffectErrorHandler } from "./signal.js";
 export const SECURITY_RUNTIME_EVENT_NAME = "dalila:security-error";
 const MAX_SECURITY_RUNTIME_EVENTS = 25;
 const SECURITY_MESSAGE_PATTERN = /\b(sanitizehtml|trusted types?|srcdoc|javascript:|data:text\/html|xss|csp)\b/i;
 const securityRuntimeEvents = [];
 let observabilityInstalled = false;
 function isSecurityRuntimeError(error) {
-    return error instanceof FatalEffectError || (error.message.startsWith("[Dalila]")
+    return error.name === "FatalEffectError" || (error.message.startsWith("[Dalila]")
         && SECURITY_MESSAGE_PATTERN.test(error.message));
 }
 function storeSecurityRuntimeEvent(event) {
@@ -23,14 +23,14 @@ function dispatchSecurityRuntimeEvent(event) {
         detail: event,
     }));
 }
-const observabilityEffectErrorHandler = (error, source) => {
+export const observabilityEffectErrorHandler = (error, source) => {
     if (isSecurityRuntimeError(error)) {
         const event = {
             timestamp: new Date().toISOString(),
             source,
             message: error.message,
             name: error.name,
-            fatal: error instanceof FatalEffectError,
+            fatal: error.name === "FatalEffectError",
         };
         storeSecurityRuntimeEvent(event);
         dispatchSecurityRuntimeEvent(event);
@@ -39,6 +39,9 @@ const observabilityEffectErrorHandler = (error, source) => {
     }
     console.error(`[Dalila] Error in ${source}:`, error);
 };
+export function reportObservedEffectError(error, source) {
+    observabilityEffectErrorHandler(error, source);
+}
 export function installDefaultSecurityObservability() {
     if (observabilityInstalled)
         return;

package/dist/core/signal.js

@@ -1,5 +1,6 @@
 import { getCurrentScope, withScope } from './scope.js';
 import { scheduleMicrotask, isBatching, queueInBatch } from './scheduler.js';
+import { reportObservedEffectError } from './observability.js';
 import { aliasEffectToNode, linkSubscriberSetToSignal, registerEffect, registerSignal, trackDependency, trackEffectDispose, trackComputedRunEnd, trackComputedRunStart, trackEffectRunEnd, trackEffectRunStart, trackSignalRead, trackSignalWrite, untrackDependencyBySet, } from './devtools.js';
 let effectErrorHandler = null;
 let defaultEffectErrorHandler = null;
@@ -41,7 +42,7 @@ function reportEffectErrorWithHandlers(error, source) {
         defaultEffectErrorHandler(error, source);
         return;
     }
-    console.error(`[Dalila] Error in ${source}:`, error);
+    reportObservedEffectError(error, source);
 }
 /**
  * Normalize unknown throws into Error and route to the global handler (or console).

package/dist/runtime/bind-if-directive.d.ts

@@ -0,0 +1,18 @@
+import type { BindContext, DisposeFunction, TransitionConfig } from './bind.js';
+type TransitionRegistry = Map<string, TransitionConfig>;
+interface TransitionController {
+    hasTransition: boolean;
+    enter: () => void;
+    leave: (onDone: () => void) => void;
+}
+interface BindIfDirectiveDeps {
+    qsaIncludingRoot: (root: Element, selector: string) => Element[];
+    normalizeBinding: (raw: string | null) => string | null;
+    warn: (message: string) => void;
+    resolve: (value: unknown) => unknown;
+    bindEffect: (target: Element | null | undefined, fn: () => void) => void;
+    createTransitionController: (el: HTMLElement, registry: TransitionRegistry, cleanups: DisposeFunction[]) => TransitionController;
+    syncPortalElement: (el: HTMLElement) => void;
+}
+export declare function bindIfDirective(root: Element, ctx: BindContext, cleanups: DisposeFunction[], transitionRegistry: TransitionRegistry, deps: BindIfDirectiveDeps): void;
+export {};

package/dist/runtime/bind-if-directive.js

@@ -0,0 +1,96 @@
+export function bindIfDirective(root, ctx, cleanups, transitionRegistry, deps) {
+    const elements = deps.qsaIncludingRoot(root, '[d-if]');
+    for (const el of elements) {
+        const bindingName = deps.normalizeBinding(el.getAttribute('d-if'));
+        if (!bindingName)
+            continue;
+        const binding = ctx[bindingName];
+        if (binding === undefined) {
+            deps.warn(`d-if: "${bindingName}" not found in context`);
+            continue;
+        }
+        const elseEl = el.nextElementSibling?.hasAttribute('d-else') ? el.nextElementSibling : null;
+        const comment = document.createComment('d-if');
+        el.parentNode?.replaceChild(comment, el);
+        el.removeAttribute('d-if');
+        const htmlEl = el;
+        const transitions = deps.createTransitionController(htmlEl, transitionRegistry, cleanups);
+        let elseHtmlEl = null;
+        let elseComment = null;
+        let elseTransitions = null;
+        if (elseEl) {
+            elseComment = document.createComment('d-else');
+            elseEl.parentNode?.replaceChild(elseComment, elseEl);
+            elseEl.removeAttribute('d-else');
+            elseHtmlEl = elseEl;
+            elseTransitions = deps.createTransitionController(elseHtmlEl, transitionRegistry, cleanups);
+        }
+        const initialValue = !!deps.resolve(binding);
+        if (initialValue) {
+            comment.parentNode?.insertBefore(htmlEl, comment);
+            deps.syncPortalElement(htmlEl);
+            if (transitions.hasTransition) {
+                htmlEl.removeAttribute('data-leave');
+                htmlEl.setAttribute('data-enter', '');
+            }
+        }
+        else if (elseHtmlEl && elseComment) {
+            elseComment.parentNode?.insertBefore(elseHtmlEl, elseComment);
+            deps.syncPortalElement(elseHtmlEl);
+            if (elseTransitions?.hasTransition) {
+                elseHtmlEl.removeAttribute('data-leave');
+                elseHtmlEl.setAttribute('data-enter', '');
+            }
+        }
+        if (elseHtmlEl && elseComment) {
+            const capturedElseEl = elseHtmlEl;
+            const capturedElseComment = elseComment;
+            deps.bindEffect(htmlEl, () => {
+                const value = !!deps.resolve(binding);
+                if (value) {
+                    if (!htmlEl.parentNode) {
+                        comment.parentNode?.insertBefore(htmlEl, comment);
+                        deps.syncPortalElement(htmlEl);
+                    }
+                    transitions.enter();
+                    elseTransitions?.leave(() => {
+                        if (capturedElseEl.parentNode) {
+                            capturedElseEl.parentNode.removeChild(capturedElseEl);
+                        }
+                    });
+                }
+                else {
+                    transitions.leave(() => {
+                        if (htmlEl.parentNode) {
+                            htmlEl.parentNode.removeChild(htmlEl);
+                        }
+                    });
+                    if (!capturedElseEl.parentNode) {
+                        capturedElseComment.parentNode?.insertBefore(capturedElseEl, capturedElseComment);
+                        deps.syncPortalElement(capturedElseEl);
+                    }
+                    elseTransitions?.enter();
+                }
+            });
+        }
+        else {
+            deps.bindEffect(htmlEl, () => {
+                const value = !!deps.resolve(binding);
+                if (value) {
+                    if (!htmlEl.parentNode) {
+                        comment.parentNode?.insertBefore(htmlEl, comment);
+                        deps.syncPortalElement(htmlEl);
+                    }
+                    transitions.enter();
+                }
+                else {
+                    transitions.leave(() => {
+                        if (htmlEl.parentNode) {
+                            htmlEl.parentNode.removeChild(htmlEl);
+                        }
+                    });
+                }
+            });
+        }
+    }
+}

package/dist/runtime/bind-lazy-directive.d.ts

@@ -0,0 +1,13 @@
+import type { BindContext, BindOptions, DisposeFunction } from './bind.js';
+interface BindLazyDirectiveDeps {
+    qsaIncludingRoot: (root: Element, selector: string) => Element[];
+    normalizeBinding: (raw: string | null) => string | null;
+    warn: (message: string) => void;
+    warnRawHtmlSinkHeuristic: (sink: string, source: string, html: string) => void;
+    resolveSecurityOptions: (options: BindOptions) => unknown;
+    bind: (root: Element, ctx: BindContext, options: BindOptions) => (() => void);
+    bindEffect: (target: Element | null | undefined, fn: () => void) => void;
+    inheritNestedBindOptions: (parent: BindOptions, overrides: BindOptions) => BindOptions;
+}
+export declare function bindLazyDirective(root: Element, ctx: BindContext, cleanups: DisposeFunction[], refs: Map<string, Element>, events: string[], options: BindOptions, deps: BindLazyDirectiveDeps): void;
+export {};

package/dist/runtime/bind-lazy-directive.js

@@ -0,0 +1,139 @@
+import { getLazyComponent, observeLazyElement } from './lazy.js';
+import { setElementInnerHTML } from './html-sinks.js';
+export function bindLazyDirective(root, ctx, cleanups, refs, events, options, deps) {
+    const elements = deps.qsaIncludingRoot(root, '[d-lazy]');
+    for (const el of elements) {
+        const lazyComponentName = deps.normalizeBinding(el.getAttribute('d-lazy'));
+        if (!lazyComponentName)
+            continue;
+        const lazyResult = getLazyComponent(lazyComponentName);
+        if (!lazyResult) {
+            deps.warn(`d-lazy: component "${lazyComponentName}" not found. Use createLazyComponent() to create it.`);
+            continue;
+        }
+        const { state } = lazyResult;
+        const htmlEl = el;
+        const loadingTemplate = el.getAttribute('d-lazy-loading') ?? state.loadingTemplate ?? '';
+        const errorTemplate = el.getAttribute('d-lazy-error') ?? state.errorTemplate ?? '';
+        el.removeAttribute('d-lazy');
+        el.removeAttribute('d-lazy-loading');
+        el.removeAttribute('d-lazy-error');
+        let currentNode = htmlEl;
+        let componentMounted = false;
+        let componentDispose = null;
+        let componentEl = null;
+        let hasIntersected = false;
+        const refName = deps.normalizeBinding(htmlEl.getAttribute('d-ref'));
+        const syncRef = (node) => {
+            if (!refName)
+                return;
+            if (node instanceof Element) {
+                refs.set(refName, node);
+            }
+        };
+        const replaceCurrentNode = (nextNode) => {
+            const parent = currentNode.parentNode;
+            if (!parent)
+                return;
+            parent.replaceChild(nextNode, currentNode);
+            currentNode = nextNode;
+            syncRef(nextNode);
+        };
+        const unmountComponent = () => {
+            if (componentDispose) {
+                componentDispose();
+                componentDispose = null;
+            }
+            componentMounted = false;
+            componentEl = null;
+        };
+        const renderComponent = () => {
+            const comp = state.component();
+            if (!comp)
+                return;
+            const compDef = comp.definition;
+            const compEl = document.createElement(compDef.tag);
+            for (const attr of Array.from(htmlEl.attributes)) {
+                if (!attr.name.startsWith('d-')) {
+                    compEl.setAttribute(attr.name, attr.value);
+                }
+            }
+            if (componentMounted && componentEl === compEl)
+                return;
+            replaceCurrentNode(compEl);
+            componentEl = compEl;
+            const parentCtx = Object.create(ctx);
+            const parent = compEl.parentNode;
+            const nextSibling = compEl.nextSibling;
+            componentDispose = deps.bind(compEl, parentCtx, {
+                components: { [compDef.tag]: comp },
+                events,
+                _skipLifecycle: true,
+                ...deps.inheritNestedBindOptions(options, {}),
+            });
+            if (!compEl.isConnected && parent) {
+                const renderedNode = nextSibling ? nextSibling.previousSibling : parent.lastChild;
+                if (renderedNode instanceof Node) {
+                    currentNode = renderedNode;
+                    syncRef(renderedNode);
+                }
+            }
+            componentMounted = true;
+        };
+        const showLoading = () => {
+            if (loadingTemplate) {
+                if (componentMounted) {
+                    unmountComponent();
+                }
+                const loadingEl = document.createElement('div');
+                deps.warnRawHtmlSinkHeuristic('d-lazy-loading', lazyComponentName, loadingTemplate);
+                setElementInnerHTML(loadingEl, loadingTemplate, deps.resolveSecurityOptions(options));
+                replaceCurrentNode(loadingEl);
+            }
+        };
+        const showError = (err) => {
+            if (componentMounted) {
+                unmountComponent();
+            }
+            if (errorTemplate) {
+                const errorEl = document.createElement('div');
+                deps.warnRawHtmlSinkHeuristic('d-lazy-error', lazyComponentName, errorTemplate);
+                setElementInnerHTML(errorEl, errorTemplate, deps.resolveSecurityOptions(options));
+                replaceCurrentNode(errorEl);
+            }
+            else {
+                deps.warn(`d-lazy: failed to load "${lazyComponentName}": ${err.message}`);
+            }
+        };
+        const syncFromState = () => {
+            const loading = state.loading();
+            const error = state.error();
+            const comp = state.component();
+            if (!hasIntersected)
+                return;
+            if (error) {
+                showError(error);
+                return;
+            }
+            if (loading && !comp) {
+                showLoading();
+                return;
+            }
+            if (comp && !componentMounted) {
+                renderComponent();
+            }
+        };
+        deps.bindEffect(htmlEl, () => {
+            syncFromState();
+        });
+        const cleanupObserver = observeLazyElement(htmlEl, () => {
+            hasIntersected = true;
+            syncFromState();
+            state.load();
+        }, 0);
+        cleanups.push(() => {
+            cleanupObserver();
+            unmountComponent();
+        });
+    }
+}

package/dist/runtime/bind-list-directives.d.ts

@@ -0,0 +1,21 @@
+import type { SchedulerPriority } from '../core/scheduler.js';
+import type { BindContext, BindOptions, DisposeFunction, VirtualListController, VirtualScrollToIndexOptions } from './bind.js';
+interface BindListDirectiveDeps {
+    qsaIncludingRoot: (root: Element, selector: string) => Element[];
+    normalizeBinding: (raw: string | null) => string | null;
+    warn: (message: string) => void;
+    resolve: (value: unknown) => unknown;
+    bind: (root: Element, ctx: BindContext, options: BindOptions) => (() => void);
+    bindEffect: (target: Element | null | undefined, fn: () => void) => void;
+    inheritNestedBindOptions: (parent: BindOptions, overrides: BindOptions) => BindOptions;
+    isSignal: (value: unknown) => value is (() => unknown) & {
+        set: unknown;
+        update: unknown;
+    };
+    resolveListRenderPriority: () => SchedulerPriority;
+}
+export declare function getVirtualListController(target: Element | null): VirtualListController | null;
+export declare function scrollToVirtualIndex(target: Element | null, index: number, options?: VirtualScrollToIndexOptions): boolean;
+export declare function bindVirtualEachDirective(root: Element, ctx: BindContext, cleanups: DisposeFunction[], options: BindOptions, deps: BindListDirectiveDeps): void;
+export declare function bindEachDirective(root: Element, ctx: BindContext, cleanups: DisposeFunction[], options: BindOptions, deps: BindListDirectiveDeps): void;
+export {};