@ape-egg/vibe 2.1.6 → 2.1.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [2.1.7] - 2026-06-19
+
+### Fixed
+
+- **Compiled component-local state was lost when a conditional re-mounted** (`runtime/component.js`, `runtime/conditionals.js`) — on compiled pages each component's setup script is inlined as `type="vibe-module"`, but the boot-time pass only runs the scripts present at boot. A `<component>` carrying its own `component({...})` state inside a `<!-- if -->` rendered correctly the first time, then went blank after the conditional was toggled off and back on: the branch markup was restored but its `<!-- each _cN.x -->` read component-local state that had been released on unmount. `mountBranch` now runs the freshly mounted subtree's `vibe-module` scripts via a new `executeCompiledComponentScriptsIn(nodes)` — before nested iterations/conditionals render, so the re-registered state is in place when `<!-- each _cN.x -->` evaluates. The `_cN` id-counter advance and the script runner are factored out so the scoped and boot-time passes share one path. Repro: `e2e-runtime/conditional-component-remount.html`, `tests/e2e/components-in-conditionals.spec.js`.
+
 ## [2.1.6] - 2026-06-19
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ape-egg/vibe",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "type": "module",
   "description": "Runtime-first reactivity with optional compiler",
   "main": "index.js",

package/runtime/component.js

@@ -158,14 +158,41 @@ const transformScriptContent = (rawContent) => {
 export const executeCompiledComponentScripts = () => {
   const scripts = document.querySelectorAll('script[type="vibe-module"]');
   if (!scripts.length) return null;
+  advanceComponentCounterPastIds(document);
+  return runVibeModuleScripts(scripts);
+};
+
+// Same pipeline as the boot-time pass, but scoped to a freshly mounted subtree
+// (a conditional branch or iteration row) rather than the whole document. The
+// boot pass only sees component scripts that are in the page at boot; a branch
+// that mounts later — or RE-mounts after being unmounted — carries its own
+// inlined `vibe-module` scripts that must run each time so component-local state
+// (`component({...})` → `$._cN`) is re-registered. Without this, a re-opened
+// conditional restores its markup but its `<!-- each _cN.x -->` reads state that
+// was released on unmount (the AccountProgression overlay rendering blank on
+// second open).
+export const executeCompiledComponentScriptsIn = (nodes) => {
+  const scripts = [];
+  for (const node of nodes) {
+    if (node.nodeType !== 1) continue;
+    if (node.matches?.('script[type="vibe-module"]')) scripts.push(node);
+    node.querySelectorAll?.('script[type="vibe-module"]').forEach((s) => scripts.push(s));
+  }
+  if (!scripts.length) return null;
+  advanceComponentCounterPastIds(document);
+  return runVibeModuleScripts(scripts);
+};
 
-  // Build-time tagging already assigned _cN ids to wrappers; advance the
-  // runtime counter past them so freshly generated ids never collide.
-  document.querySelectorAll('[data-vibe-component-id]').forEach((el) => {
+// Build-time tagging already assigned _cN ids to wrappers; advance the runtime
+// counter past them so freshly generated ids never collide.
+const advanceComponentCounterPastIds = (root) => {
+  root.querySelectorAll('[data-vibe-component-id]').forEach((el) => {
     const m = el.getAttribute('data-vibe-component-id')?.match(/^_c(\d+)$/);
     if (m) componentCounter = Math.max(componentCounter, Number(m[1]) + 1);
   });
+};
 
+const runVibeModuleScripts = (scripts) => {
   const asyncTasks = [];
   const claimed = new Set();
 

package/runtime/conditionals.js

@@ -3,7 +3,7 @@ import affected from './affected.js';
 import hydrate from './hydrate.js';
 import { createScopedState, renderAllIterations, initializeBlock, resolveIterationComponentProps } from './iterate.js';
 import { evalInScope } from './utils.js';
-import { collectComponentIds, releaseOrphanedComponentState } from './component.js';
+import { collectComponentIds, releaseOrphanedComponentState, executeCompiledComponentScriptsIn } from './component.js';
 
 // Registry of DOM nodes owned by conditional branches.
 // Maps a DOM node to { nodes: array_ref, index: number } so that
@@ -231,6 +231,13 @@ const mountBranch = (node, branchData, state, manifest, parentScope) => {
     }
   }
 
+  // Compiled pages inline each component's setup script as type="vibe-module".
+  // The boot-time pass only runs scripts present at boot, so a branch that
+  // mounts (or re-mounts after unmount) must run its own scripts here to
+  // re-register component-local state. Must happen BEFORE rendering nested
+  // iterations/conditionals so `<!-- each _cN.x -->` sees the registered state.
+  executeCompiledComponentScriptsIn(clonedNodes);
+
   // Recursively render any nested iterations and conditionals
   if (branchTree) {
     renderAllIterations(branchTree, scopedState, manifest, parentScope);