dalila 1.5.6 → 1.5.8

package/dist/runtime/bind.js

@@ -177,18 +177,22 @@ function bindEvents(root, ctx, events, cleanups) {
  * Bind all [d-when] directives within root
  */
 function bindWhen(root, ctx, cleanups) {
-    const elements = qsaIncludingRoot(root, '[d-when]');
+    const elements = qsaIncludingRoot(root, '[when], [d-when]');
     for (const el of elements) {
-        const bindingName = normalizeBinding(el.getAttribute('d-when'));
+        const attrName = el.hasAttribute('when') ? 'when' : 'd-when';
+        const bindingName = normalizeBinding(el.getAttribute(attrName));
         if (!bindingName)
             continue;
         const binding = ctx[bindingName];
         if (binding === undefined) {
-            warn(`d-when: "${bindingName}" not found in context`);
+            warn(`when: "${bindingName}" not found in context`);
             continue;
         }
         const htmlEl = el;
-        // Effect is owned by templateScope — no need to track stop manually
+        // Apply initial state synchronously to avoid FOUC (flash of unstyled content)
+        const initialValue = !!resolve(binding);
+        htmlEl.style.display = initialValue ? '' : 'none';
+        // Then create reactive effect to keep it updated
         effect(() => {
             const value = !!resolve(binding);
             htmlEl.style.display = value ? '' : 'none';
@@ -212,9 +216,8 @@ function bindMatch(root, ctx, cleanups) {
             warn(`d-match: "${bindingName}" not found in context`);
             continue;
         }
-        effect(() => {
-            // Re-query cases on every run so dynamically added/removed [case]
-            // children (e.g. via d-if) are always up to date.
+        // Apply initial state synchronously to avoid FOUC
+        const applyMatch = () => {
             const cases = Array.from(el.querySelectorAll('[case]'));
             const v = resolve(binding);
             const value = v == null ? '' : String(v);
@@ -238,6 +241,12 @@ function bindMatch(root, ctx, cleanups) {
             else if (defaultEl) {
                 defaultEl.style.display = '';
             }
+        };
+        // Apply initial state
+        applyMatch();
+        // Then create reactive effect to keep it updated
+        effect(() => {
+            applyMatch();
         });
     }
 }
@@ -350,6 +359,12 @@ function bindIf(root, ctx, cleanups) {
         el.parentNode?.replaceChild(comment, el);
         el.removeAttribute('d-if');
         const htmlEl = el;
+        // Apply initial state synchronously to avoid FOUC
+        const initialValue = !!resolve(binding);
+        if (initialValue) {
+            comment.parentNode?.insertBefore(htmlEl, comment);
+        }
+        // Then create reactive effect to keep it updated
         effect(() => {
             const value = !!resolve(binding);
             if (value) {

package/package.json

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