dalila 1.4.1 → 1.4.2

package/package.json

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

package/scripts/dev-server.cjs

@@ -250,17 +250,168 @@ function injectBindings(html, requestPath) {
     }
   </script>`;
 
-  // For user projects, just inject the import map (user provides their own script)
+  // For user projects, inject import map + HMR script
   if (!isDalilaRepo) {
     let output = addLoadingAttributes(html);
 
     // FOUC prevention CSS
     const foucPreventionCSS = `  <style>[d-loading]{visibility:hidden}</style>`;
 
+    // Smart HMR script for user projects
+    const hmrScript = `
+  <script type="module">
+    // HMR: Use native bind() HMR support
+    let disposeBinding = null;
+
+    const rebind = async () => {
+      const hmrContext = window.__dalila_hmr_context;
+      if (!hmrContext) {
+        console.warn('[HMR] Cannot rebind: bind() not called yet');
+        return;
+      }
+
+      try {
+        const { bind } = await import('${dalilaPath}/runtime/index.js');
+        const { root, ctx, options } = hmrContext;
+
+        // Dispose old bindings
+        if (disposeBinding) {
+          try { disposeBinding(); } catch (e) {}
+        }
+
+        // Rebind with preserved context
+        disposeBinding = bind(root, ctx, options);
+        console.log('[HMR] Rebound successfully');
+      } catch (e) {
+        console.error('[HMR] Rebind failed:', e);
+      }
+    };
+
+    const patchNode = (current, next) => {
+      if (!current || !next) return;
+
+      if (current.nodeType !== next.nodeType) {
+        current.replaceWith(next.cloneNode(true));
+        return;
+      }
+
+      if (current.nodeType === Node.TEXT_NODE) {
+        if (current.data !== next.data) current.data = next.data;
+        return;
+      }
+
+      if (current.nodeType === Node.ELEMENT_NODE) {
+        if (current.tagName !== next.tagName) {
+          current.replaceWith(next.cloneNode(true));
+          return;
+        }
+
+        const currentAttrs = current.getAttributeNames();
+        const nextAttrs = next.getAttributeNames();
+
+        currentAttrs.forEach((name) => {
+          if (!nextAttrs.includes(name)) current.removeAttribute(name);
+        });
+        nextAttrs.forEach((name) => {
+          const value = next.getAttribute(name);
+          if (current.getAttribute(name) !== value) {
+            if (value === null) {
+              current.removeAttribute(name);
+            } else {
+              current.setAttribute(name, value);
+            }
+          }
+        });
+
+        const currentChildren = Array.from(current.childNodes);
+        const nextChildren = Array.from(next.childNodes);
+        const max = Math.max(currentChildren.length, nextChildren.length);
+
+        for (let i = 0; i < max; i += 1) {
+          const currentChild = currentChildren[i];
+          const nextChild = nextChildren[i];
+
+          if (!currentChild && nextChild) {
+            current.appendChild(nextChild.cloneNode(true));
+          } else if (currentChild && !nextChild) {
+            currentChild.remove();
+          } else if (currentChild && nextChild) {
+            patchNode(currentChild, nextChild);
+          }
+        }
+      }
+    };
+
+    const refreshStyles = () => {
+      const links = document.querySelectorAll('link[rel="stylesheet"]');
+      links.forEach((link) => {
+        const url = new URL(link.href);
+        url.searchParams.set('v', String(Date.now()));
+        link.href = url.toString();
+      });
+    };
+
+    const refreshMarkup = async () => {
+      const res = await fetch(window.location.pathname, { cache: 'no-store' });
+      const html = await res.text();
+      const doc = new DOMParser().parseFromString(html, 'text/html');
+
+      // Find root element (prefer #app, fallback to body)
+      const nextRoot = doc.querySelector('#app') || doc.body;
+      const currentRoot = document.querySelector('#app') || document.body;
+
+      if (nextRoot && currentRoot) {
+        patchNode(currentRoot, nextRoot);
+        console.log('[HMR] HTML patched');
+
+        // Rebind after patching
+        rebind();
+      }
+    };
+
+    if (window.__dalila_hmr) {
+      window.__dalila_hmr.close();
+    }
+    const hmr = new EventSource('/__hmr');
+    window.__dalila_hmr = hmr;
+
+    hmr.addEventListener('update', async (event) => {
+      let file = '';
+      try {
+        const payload = JSON.parse(event.data || '{}');
+        file = payload.file || '';
+      } catch {
+        file = '';
+      }
+
+      console.log('[HMR] File changed:', file);
+
+      if (file.endsWith('.css')) {
+        refreshStyles();
+        console.log('[HMR] CSS reloaded');
+        return;
+      }
+
+      if (file.endsWith('.html')) {
+        await refreshMarkup();
+        return;
+      }
+
+      // For TS/JS files, full reload is needed to re-import modules
+      console.log('[HMR] Reloading page...');
+      location.reload();
+    });
+
+    hmr.onerror = () => {
+      console.warn('[HMR] Connection lost, will retry...');
+    };
+  </script>`;
+
+    // Inject HMR + import map in HEAD (HMR must load before user scripts)
     if (output.includes('</head>')) {
-      output = output.replace('</head>', `${foucPreventionCSS}\n${importMap}\n</head>`);
+      output = output.replace('</head>', `${foucPreventionCSS}\n${importMap}\n${hmrScript}\n</head>`);
     } else {
-      output = `${foucPreventionCSS}\n${importMap}\n${output}`;
+      output = `${foucPreventionCSS}\n${importMap}\n${hmrScript}\n${output}`;
     }
 
     return output;

package/dist/context/auto-scope.d.ts

@@ -1,167 +0,0 @@
-/**
- * Auto-scoping Context API.
- *
- * Goal:
- * - Remove the need for explicit `withScope()` in common app code.
- *
- * Auto-scope rules:
- * - `provide()` outside a scope creates a global root scope (warns once in dev).
- * - `inject()` outside a scope never creates global state; it only reads an existing global root.
- *
- * Rationale:
- * - Apps often want "global-ish" DI without Provider pyramids.
- * - Still keep things lifecycle-safe: the global scope can be disposed on page unload.
- */
-import { type Scope } from '../core/scope.js';
-import { type Signal } from '../core/signal.js';
-import { createContext, type ContextToken, type TryInjectResult } from './context.js';
-export type AutoScopePolicy = "warn" | "throw" | "silent";
-export declare function setAutoScopePolicy(policy: AutoScopePolicy): void;
-/**
- * Provide with auto-scope.
- *
- * Semantics:
- * - Inside a scope: behaves like the raw `provide()`.
- * - Outside a scope: creates/uses the global root scope (warns once in dev).
- */
-export declare function provide<T>(token: ContextToken<T>, value: T): void;
-/**
- * Provide explicitly in the global root scope.
- *
- * Semantics:
- * - Always uses the detached global scope (creates if needed).
- * - Never warns.
- */
-export declare function provideGlobal<T>(token: ContextToken<T>, value: T): void;
-/**
- * Inject with auto-scope.
- *
- * Semantics:
- * - Inside a scope: behaves like raw `inject()`, but throws a more descriptive error.
- * - Outside a scope:
- *   - If a global scope exists: reads from it (safe-by-default).
- *   - If no global scope exists: throws with guidance (does NOT create global state).
- */
-export declare function inject<T>(token: ContextToken<T>): T;
-/**
- * Try to inject a context value with auto-scope.
- *
- * Semantics:
- * - Returns { found: true, value } when the token is found.
- * - Returns { found: false, value: undefined } when not found.
- * - Works both inside and outside scopes (reads global if exists).
- */
-export declare function tryInject<T>(token: ContextToken<T>): TryInjectResult<T>;
-/**
- * Inject explicitly from the global root scope.
- *
- * Semantics:
- * - Reads only the global root scope.
- * - Throws if no global scope exists yet.
- */
-export declare function injectGlobal<T>(token: ContextToken<T>): T;
-/**
- * Convenience helper: create a scope, run `fn` inside it, and return `{ result, dispose }`.
- *
- * Semantics:
- * - If `fn` throws, the scope is disposed and the error is rethrown.
- * - Caller owns disposal.
- */
-export declare function scope<T>(fn: () => T): {
-    result: T;
-    dispose: () => void;
-};
-/**
- * Provider helper that bundles:
- * - a dedicated provider scope
- * - a value created by `setup()`
- * - registration via `provide()`
- *
- * Useful for "feature modules" that want to expose a typed dependency with explicit lifetime.
- */
-export declare function createProvider<T>(token: ContextToken<T>, setup: () => T): {
-    create: () => {
-        value: T;
-        dispose: () => void;
-    };
-    use: () => T;
-};
-/**
- * Returns the global root scope (if it exists).
- * Intended for debugging/advanced usage only.
- */
-export declare function getGlobalScope(): Scope | null;
-/**
- * Returns true if a global root scope exists.
- */
-export declare function hasGlobalScope(): boolean;
-/**
- * Resets the global root scope.
- * Intended for tests to ensure isolation between runs.
- */
-export declare function resetGlobalScope(): void;
-/**
- * Creates a reactive context that wraps a signal.
- *
- * This is the recommended way to share reactive state across scopes.
- * It combines the hierarchical lookup of Context with the reactivity of Signals.
- *
- * Example:
- * ```ts
- * const Theme = createSignalContext("theme", "dark");
- *
- * scope(() => {
- *   // Parent scope: create and provide the signal
- *   const theme = Theme.provide();
- *
- *   effect(() => {
- *     console.log("Theme:", theme()); // Reactive!
- *   });
- *
- *   theme.set("light"); // Updates propagate to all consumers
- * });
- *
- * // Child scope somewhere in the tree
- * scope(() => {
- *   const theme = Theme.inject(); // Get the signal from parent
- *   console.log(theme()); // "light"
- * });
- * ```
- */
-export interface SignalContext<T> {
-    /**
-     * Create a signal with the initial value and provide it in the current scope.
-     * Returns the signal for immediate use.
-     *
-     * @param initialValue - Override the default initial value (optional)
-     */
-    provide: (initialValue?: T) => Signal<T>;
-    /**
-     * Inject the signal from an ancestor scope.
-     * Throws if no provider exists in the scope hierarchy.
-     */
-    inject: () => Signal<T>;
-    /**
-     * Try to inject the signal from an ancestor scope.
-     * Returns { found: true, signal } or { found: false, signal: undefined }.
-     */
-    tryInject: () => {
-        found: true;
-        signal: Signal<T>;
-    } | {
-        found: false;
-        signal: undefined;
-    };
-    /**
-     * The underlying context token (for advanced use cases).
-     */
-    token: ContextToken<Signal<T>>;
-}
-/**
- * Create a reactive context that wraps a signal.
- *
- * @param name - Debug name for the context
- * @param defaultValue - Default initial value for the signal
- */
-export declare function createSignalContext<T>(name: string, defaultValue: T): SignalContext<T>;
-export { createContext };