@constela/runtime 0.15.1 → 0.15.2

package/dist/index.js

@@ -240,18 +240,18 @@ function createStateStore(definitions) {
       initialValue = cookieValue !== void 0 ? cookieValue : def.initial.default;
     } else {
       initialValue = def.initial;
-    }
-    if (name === "theme" && typeof window !== "undefined") {
-      try {
-        const stored = localStorage.getItem("theme");
-        if (stored !== null) {
-          try {
-            initialValue = JSON.parse(stored);
-          } catch {
-            initialValue = stored;
+      if (name === "theme" && typeof window !== "undefined") {
+        try {
+          const stored = localStorage.getItem("theme");
+          if (stored !== null) {
+            try {
+              initialValue = JSON.parse(stored);
+            } catch {
+              initialValue = stored;
+            }
           }
+        } catch {
         }
-      } catch {
       }
     }
     signals.set(name, createSignal(initialValue));
@@ -14393,6 +14393,21 @@ function hydrateElement(node, el, ctx) {
     hydrateChildren(node.children, el, ctx);
   }
 }
+function findSsrIfBranchMarker(parent, beforeNode) {
+  let current = beforeNode ? beforeNode.previousSibling : parent.lastChild;
+  while (current) {
+    if (current.nodeType === Node.COMMENT_NODE) {
+      const comment2 = current;
+      const text3 = comment2.textContent;
+      if (text3 === "if:then") return { branch: "then", marker: comment2 };
+      if (text3 === "if:else") return { branch: "else", marker: comment2 };
+      if (text3 === "if:none") return { branch: "none", marker: comment2 };
+    }
+    if (current.nodeType === Node.ELEMENT_NODE) break;
+    current = current.previousSibling;
+  }
+  return null;
+}
 function hydrateChildren(children, parent, ctx) {
   const domChildren = [];
   for (let i = 0; i < parent.childNodes.length; i++) {
@@ -14423,19 +14438,35 @@ function hydrateChildren(children, parent, ctx) {
       }
     } else if (childNode.kind === "if") {
       const ifNode = childNode;
-      const initialCondition = evaluate(ifNode.condition, {
+      const clientCondition = evaluate(ifNode.condition, {
         state: ctx.state,
         locals: ctx.locals,
         ...ctx.imports && { imports: ctx.imports },
         ...ctx.route && { route: ctx.route }
       });
-      const hasDomForIf = Boolean(initialCondition) || Boolean(ifNode.else);
+      const clientBranch = Boolean(clientCondition) ? "then" : ifNode.else ? "else" : "none";
       const domChild = domChildren[domIndex];
-      if (hasDomForIf && domChild) {
-        hydrate(childNode, domChild, ctx);
+      const ssrInfo = findSsrIfBranchMarker(parent, domChild || null);
+      const ssrBranch = ssrInfo?.branch ?? null;
+      const ssrHasDom = ssrBranch === "then" || ssrBranch === "else";
+      if (ssrInfo?.marker) {
+        ssrInfo.marker.remove();
+      }
+      if (ssrHasDom && domChild) {
+        hydrateIf(ifNode, domChild, ctx, { ssrBranch, clientBranch });
         domIndex++;
+      } else if (ssrBranch === "none") {
+        hydrateIfWithoutDom(ifNode, parent, domChildren[domIndex] || null, ctx, {
+          clientBranch
+        });
       } else {
-        hydrateIfWithoutDom(ifNode, parent, domChildren[domIndex] || null, ctx);
+        const hasDomForIf = Boolean(clientCondition) || Boolean(ifNode.else);
+        if (hasDomForIf && domChild) {
+          hydrate(childNode, domChild, ctx);
+          domIndex++;
+        } else {
+          hydrateIfWithoutDom(ifNode, parent, domChildren[domIndex] || null, ctx);
+        }
       }
     } else if (childNode.kind === "each") {
       const items = evaluate(childNode.items, {
@@ -14525,32 +14556,37 @@ function formatValue2(value) {
   }
   return String(value);
 }
-function hydrateIf(node, initialDomNode, ctx) {
+function hydrateIf(node, initialDomNode, ctx, branchInfo) {
   const anchor = document.createComment("if");
   const parent = initialDomNode.parentNode;
   if (!parent) return;
   parent.insertBefore(anchor, initialDomNode);
   let currentNode = initialDomNode;
-  let currentBranch = "none";
   let branchCleanups = [];
   let isFirstRun = true;
-  const initialCondition = evaluate(node.condition, {
-    state: ctx.state,
-    locals: ctx.locals,
-    ...ctx.imports && { imports: ctx.imports },
-    ...ctx.route && { route: ctx.route }
-  });
-  currentBranch = Boolean(initialCondition) ? "then" : node.else ? "else" : "none";
-  if (currentBranch === "then") {
-    const localCleanups = [];
-    const branchCtx = { ...ctx, cleanups: localCleanups };
-    hydrate(node.then, currentNode, branchCtx);
-    branchCleanups = localCleanups;
-  } else if (currentBranch === "else" && node.else) {
-    const localCleanups = [];
-    const branchCtx = { ...ctx, cleanups: localCleanups };
-    hydrate(node.else, currentNode, branchCtx);
-    branchCleanups = localCleanups;
+  const hasMismatch = branchInfo && branchInfo.ssrBranch !== branchInfo.clientBranch;
+  let currentBranch = branchInfo?.ssrBranch ?? "none";
+  if (!branchInfo) {
+    const initialCondition = evaluate(node.condition, {
+      state: ctx.state,
+      locals: ctx.locals,
+      ...ctx.imports && { imports: ctx.imports },
+      ...ctx.route && { route: ctx.route }
+    });
+    currentBranch = Boolean(initialCondition) ? "then" : node.else ? "else" : "none";
+  }
+  if (!hasMismatch) {
+    if (currentBranch === "then") {
+      const localCleanups = [];
+      const branchCtx = { ...ctx, cleanups: localCleanups };
+      hydrate(node.then, currentNode, branchCtx);
+      branchCleanups = localCleanups;
+    } else if (currentBranch === "else" && node.else) {
+      const localCleanups = [];
+      const branchCtx = { ...ctx, cleanups: localCleanups };
+      hydrate(node.else, currentNode, branchCtx);
+      branchCleanups = localCleanups;
+    }
   }
   const effectCleanup = createEffect(() => {
     const condition = evaluate(node.condition, {
@@ -14563,7 +14599,10 @@ function hydrateIf(node, initialDomNode, ctx) {
     const newBranch = shouldShowThen ? "then" : node.else ? "else" : "none";
     if (isFirstRun) {
       isFirstRun = false;
-      return;
+      if (hasMismatch) {
+      } else {
+        return;
+      }
     }
     if (newBranch !== currentBranch) {
       for (const cleanup of branchCleanups) {
@@ -14603,7 +14642,7 @@ function hydrateIf(node, initialDomNode, ctx) {
     }
   });
 }
-function hydrateIfWithoutDom(node, parent, nextSibling, ctx) {
+function hydrateIfWithoutDom(node, parent, nextSibling, ctx, branchInfo) {
   const anchor = document.createComment("if");
   if (nextSibling) {
     parent.insertBefore(anchor, nextSibling);
@@ -14613,6 +14652,8 @@ function hydrateIfWithoutDom(node, parent, nextSibling, ctx) {
   let currentNode = null;
   let currentBranch = "none";
   let branchCleanups = [];
+  const needsImmediateRender = branchInfo && branchInfo.clientBranch !== "none";
+  let isFirstRun = true;
   const effectCleanup = createEffect(() => {
     const condition = evaluate(node.condition, {
       state: ctx.state,
@@ -14622,6 +14663,13 @@ function hydrateIfWithoutDom(node, parent, nextSibling, ctx) {
     });
     const shouldShowThen = Boolean(condition);
     const newBranch = shouldShowThen ? "then" : node.else ? "else" : "none";
+    if (isFirstRun) {
+      isFirstRun = false;
+      if (needsImmediateRender) {
+      } else if (newBranch === "none") {
+        return;
+      }
+    }
     if (newBranch !== currentBranch) {
       for (const cleanup of branchCleanups) {
         cleanup();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constela/runtime",
-  "version": "0.15.1",
+  "version": "0.15.2",
   "description": "Runtime DOM renderer for Constela UI framework",
   "type": "module",
   "main": "./dist/index.js",
@@ -29,7 +29,7 @@
     "tsup": "^8.0.0",
     "typescript": "^5.3.0",
     "vitest": "^2.0.0",
-    "@constela/server": "8.0.0"
+    "@constela/server": "8.0.1"
   },
   "engines": {
     "node": ">=20.0.0"