dalila 1.5.7 → 1.5.8

package/dist/runtime/bind.js

@@ -189,7 +189,10 @@ function bindWhen(root, ctx, cleanups) {
             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';
@@ -213,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);
@@ -239,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();
         });
     }
 }
@@ -351,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.7",
+  "version": "1.5.8",
   "description": "DOM-first reactive framework based on signals",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",