@ape-egg/vibe 1.1.2 → 1.3.0

package/runtime/hydrate.js

@@ -3,27 +3,20 @@ import { updateConditional } from './conditionals.js';
 import { VALUE_ATTRS, DOM_PROPERTIES, BINDING_REGEX, PURE_BINDING_REGEX } from './constants.js';
 import { evalInScope } from './utils.js';
 
-// Keep track of old state for diffing
-let previousState = {};
-
-export const setPreviousState = (state) => {
-  previousState = { ...state };
-};
-
-export default (affected, state, manifest = {}) => {
+export default (affected, state, manifest = {}, oldState = {}) => {
   affected.forEach((aff) => {
     // Use scoped state if provided (from iteration instances)
     const effectiveState = aff.scopedState || state;
 
     // Handle iteration updates
     if (aff.type === 'iteration') {
-      updateIteration(aff.node, state, previousState, manifest);
+      updateIteration(aff.node, state, oldState, manifest);
       return;
     }
 
     // Handle conditional updates
     if (aff.type === 'conditional') {
-      updateConditional(aff.node, state, previousState, manifest);
+      updateConditional(aff.node, state, oldState, manifest);
       return;
     }
 
@@ -33,7 +26,7 @@ export default (affected, state, manifest = {}) => {
       try {
         // HTML lowercases attribute names, so we need case-insensitive lookup
         // Try exact match first, then try finding a case-insensitive match
-        let attrName = evalInScope(matchInner, effectiveState);
+        let attrName = evalInScope(matchInner, effectiveState, element);
 
         // If exact match failed and expression is a simple property (no dots/brackets)
         if (!attrName && !matchInner.includes('.') && !matchInner.includes('[')) {
@@ -89,14 +82,19 @@ export default (affected, state, manifest = {}) => {
           attrName.startsWith('on');
 
         if (isDomProperty && isPureBinding) {
-          // For DOM properties like value, set the property directly
+          // For DOM properties (value, checked, selected), set BOTH property AND attribute
+          // Property: Fast runtime updates, what the user sees
+          // Attribute: Truthful DOM representation, enables compiler snapshots via outerHTML
           const expr = isPureBinding[1];
-          const value = evalInScope(expr, effectiveState);
+          const value = evalInScope(expr, effectiveState, element);
           element[attrName] = value;
+          if (value !== undefined && value !== null) {
+            element.setAttribute(attrName, String(value));
+          }
         } else if (!isValueAttr && isPureBinding) {
           // Boolean-like attributes: add or remove based on truthiness
           const expr = isPureBinding[1];
-          const value = evalInScope(expr, effectiveState);
+          const value = evalInScope(expr, effectiveState, element);
           if (value) {
             element.setAttribute(attrName, '');
           } else {
@@ -105,7 +103,7 @@ export default (affected, state, manifest = {}) => {
         } else {
           // Value attribute - replace bindings with values
           const newValue = attrValue.replace(BINDING_REGEX, (_, expr) => {
-            return evalInScope(expr, effectiveState);
+            return evalInScope(expr, effectiveState, element);
           });
           element.setAttribute(attrName, newValue);
         }
@@ -114,12 +112,12 @@ export default (affected, state, manifest = {}) => {
     }
 
     // Handle regular element updates
-    const { matches, matchOuter, matchInner, input, element } = aff;
+    const { matches, matchOuter, matchInner, input, element, textNode } = aff;
 
     // This prevents undefined store properties to throw an error
     try {
       // Evaluate the expression with state as context
-      const evaluated = evalInScope(matchInner, effectiveState);
+      const evaluated = evalInScope(matchInner, effectiveState, element);
 
       const toReplace = input.replaceAll(matchOuter, evaluated).trim();
 
@@ -129,10 +127,14 @@ export default (affected, state, manifest = {}) => {
         }
       });
 
-      element.textContent = toReplace;
+      // If we have a direct reference to the text node, update it specifically
+      // This prevents wiping child elements when parent has both text and element children
+      if (textNode && textNode.nodeType === 3) {
+        textNode.textContent = toReplace;
+      } else {
+        // Fallback: element has no children or is just a text container
+        element.textContent = toReplace;
+      }
     } catch (e) {}
   });
-
-  // Update previous state for next diff
-  setPreviousState(state);
 };

package/runtime/hyperspeed.js

@@ -0,0 +1,425 @@
+/**
+ * Hyperspeed - Pre-compiled manifest support for Vibe
+ *
+ * Handles detection and restoration of pre-compiled pages.
+ */
+
+// Build hyperspeed manifest with restoration data (captures markers before hydration)
+export const buildHyperspeedManifest = (parsedTree) => {
+  // Helper to split text content by @[...] markers into array
+  const splitByMarkers = (text) => {
+    const regex = /@\[[^\]]+\]/g;
+    const parts = [];
+    let lastIndex = 0;
+
+    text.replace(regex, (match, index) => {
+      // Add text before marker
+      if (index > lastIndex) {
+        parts.push(text.slice(lastIndex, index));
+      }
+      // Add marker
+      parts.push(match);
+      lastIndex = index + match.length;
+    });
+
+    // Add remaining text
+    if (lastIndex < text.length) {
+      parts.push(text.slice(lastIndex));
+    }
+
+    return parts.length > 0 ? parts : null;
+  };
+
+  const walkNode = (node) => {
+    const result = {
+      element: null,
+      parsed: [],
+      children: {},
+    };
+
+    // Copy type for iterations/conditionals
+    if (node.type) {
+      result.type = node.type;
+    }
+
+    // Check if parsed string contains bindings - split into array
+    if (typeof node.parsed === 'string' && node.parsed.includes('@[')) {
+      const parsedArray = splitByMarkers(node.parsed);
+      if (parsedArray) {
+        result.hyperspeedRestoration = {
+          parsed: parsedArray,
+        };
+      }
+    }
+
+    // Check for attribute bindings
+    if (node.attributes && typeof node.attributes === 'object') {
+      const attrBindings = {};
+      for (const [key, value] of Object.entries(node.attributes)) {
+        if (typeof value === 'string' && value.includes('@[')) {
+          attrBindings[key] = value;
+        }
+      }
+      if (Object.keys(attrBindings).length > 0) {
+        if (!result.hyperspeedRestoration) {
+          result.hyperspeedRestoration = {};
+        }
+        result.hyperspeedRestoration.attributes = attrBindings;
+      }
+    }
+
+    // For iterations, extract template as HTML string
+    if (node.type === 'iteration' && node.meta?.template?.element) {
+      const templateElement = node.meta.template.element;
+      if (templateElement && templateElement.innerHTML) {
+        if (!result.hyperspeedRestoration) {
+          result.hyperspeedRestoration = {};
+        }
+        result.hyperspeedRestoration.template = templateElement.innerHTML;
+      }
+    }
+
+    // For conditionals, extract branch templates as HTML strings
+    if (node.type === 'conditional' && node.meta?.branches) {
+      const trueBranch = node.meta.branches.true?.element;
+      const falseBranch = node.meta.branches.false?.element;
+
+      if (trueBranch?.innerHTML || falseBranch?.innerHTML) {
+        if (!result.hyperspeedRestoration) {
+          result.hyperspeedRestoration = {};
+        }
+        if (trueBranch?.innerHTML) {
+          result.hyperspeedRestoration.trueTemplate = trueBranch.innerHTML;
+        }
+        if (falseBranch?.innerHTML) {
+          result.hyperspeedRestoration.falseTemplate = falseBranch.innerHTML;
+        }
+      }
+    }
+
+    // Recursively process children (skip runtime-only nodes)
+    if (node.children && typeof node.children === 'object') {
+      for (const [key, childNode] of Object.entries(node.children)) {
+        result.children[key] = walkNode(childNode);
+      }
+    }
+
+    return result;
+  };
+
+  // Wrap in body structure (parsedTree is already the body's children)
+  return {
+    element: null,
+    parsed: [],
+    children: {
+      body: {
+        element: null,
+        parsed: [],
+        children: walkNode(parsedTree).children, // Use children directly
+      }
+    }
+  };
+};
+
+// Hyperspeed detection - per-page manifest
+// Each compiled page has its own manifest: /vibe-hyperspeed/{page-path}.manifest.js
+let hyperspeedManifest = null;
+let hyperspeedDetectionAttempted = false;
+
+/**
+ * Detect page-specific manifest (async, cached after first call)
+ */
+const detectHyperspeed = async () => {
+  if (hyperspeedDetectionAttempted) return hyperspeedManifest;
+  hyperspeedDetectionAttempted = true;
+
+  try {
+    const pagePath = window.location.pathname;
+    const pathSegments = pagePath.split('/').filter(s => s);
+
+    if (pathSegments.length === 0) return null;
+
+    // Extract file name and directory parts
+    // For /compiled/playground/test.html -> ['compiled', 'playground', 'test.html']
+    const fileName = pathSegments[pathSegments.length - 1];
+    const dirSegments = pathSegments.slice(0, -1); // All parts except filename
+
+    // Build possible manifest paths
+    const possiblePaths = [];
+
+    // Strategy 1: vibe-hyperspeed at the same level as parent directory
+    // /compiled/playground/test.html -> /compiled/vibe-hyperspeed/playground/test.html.manifest.js
+    if (dirSegments.length >= 1) {
+      const subPath = dirSegments.slice(1).join('/'); // Everything after first dir
+      const baseDir = '/' + dirSegments[0]; // First directory segment
+      possiblePaths.push(`${baseDir}/vibe-hyperspeed/${subPath ? subPath + '/' : ''}${fileName}.manifest.js`);
+    }
+
+    // Strategy 2: vibe-hyperspeed at web root (original behavior)
+    // /compiled/playground/test.html -> /vibe-hyperspeed/compiled/playground/test.html.manifest.js
+    possiblePaths.push(`/vibe-hyperspeed${pagePath}.manifest.js`);
+
+    // Strategy 3: vibe-hyperspeed relative to immediate parent
+    // /playground/test.html -> /vibe-hyperspeed/playground/test.html.manifest.js
+    if (dirSegments.length > 0) {
+      const relativePath = dirSegments.join('/');
+      possiblePaths.push(`/vibe-hyperspeed/${relativePath}/${fileName}.manifest.js`);
+    }
+
+    // Try each possible path
+    for (const manifestPath of possiblePaths) {
+      try {
+        const module = await import(manifestPath);
+        hyperspeedManifest = module.default;
+        return hyperspeedManifest;
+      } catch {
+        // Try next path
+        continue;
+      }
+    }
+
+    // No manifest found
+    return null;
+  } catch {
+    // No manifest for this page - runtime-only mode
+    return null;
+  }
+};
+
+/**
+ * Restore DOM from pre-rendered values to @[...] markers using hyperspeed manifest
+ * This enables FOUC-free loading while maintaining runtime reactivity
+ *
+ * Flow:
+ * 1. Page loads with pre-rendered values: <strong>John Doe</strong> (visible, no FOUC)
+ * 2. Restoration: Replace with markers: <strong>@[firstName] @[lastName]</strong>
+ * 3. Runtime processes normally: Finds markers, makes reactive
+ *
+ * @param {Element} rootElement - The DOM element to restore (e.g., <body>)
+ * @param {Object} subtree - The matching subtree from manifest (e.g., manifest.children.body)
+ * @param {Object} fullManifest - The full manifest (unused now, kept for compatibility)
+ */
+export const restoreMarkersFromManifest = (rootElement, subtree, fullManifest = null) => {
+  const walkTree = (tree, element) => {
+    if (!tree || !element) return;
+
+    // Check for hyperspeed restoration data
+    const restoration = tree.hyperspeedRestoration;
+
+    if (restoration) {
+      // Restore text content with markers if parsed contains bindings
+      if (restoration.parsed && Array.isArray(restoration.parsed)) {
+        const hasBindings = restoration.parsed.some(item =>
+          typeof item === 'string' && item.includes('@[')
+        );
+
+        if (hasBindings) {
+          // Reconstruct original content with markers
+          const originalContent = restoration.parsed.join('');
+
+          // For text nodes, update parent's innerHTML
+          // For elements with children, update only text nodes
+          if (element.childNodes.length === 1 && element.childNodes[0].nodeType === 3) {
+            // Single text node - replace it
+            element.childNodes[0].textContent = originalContent;
+          } else if (element.childNodes.length === 0) {
+            // No children - set textContent
+            element.textContent = originalContent;
+          }
+          // If element has multiple children, they'll be handled recursively
+        }
+      }
+
+      // Skip attribute restoration - manifest merge provides all binding metadata
+      // Attributes are already pre-rendered correctly by compiler
+      // restoration.attributes exists only for manifest merge, not for DOM restoration
+
+      // Restore conditionals
+      if ((restoration.trueTemplate || restoration.falseTemplate) && tree.type === 'conditional') {
+        // Find comment markers
+        const walker = document.createTreeWalker(element, NodeFilter.SHOW_COMMENT);
+        let startComment = null;
+        let elseComment = null;
+        let endComment = null;
+
+        while (walker.nextNode()) {
+          const comment = walker.currentNode;
+          const text = comment.textContent.trim();
+          if (text.startsWith('if')) {
+            startComment = comment;
+          } else if (text === 'else') {
+            elseComment = comment;
+          } else if (text === '/if') {
+            endComment = comment;
+            break;
+          }
+        }
+
+        if (startComment && endComment) {
+          // Remove pre-rendered content in true branch
+          let current = startComment.nextSibling;
+          while (current && current !== (elseComment || endComment)) {
+            const next = current.nextSibling;
+            if (current.nodeType === Node.ELEMENT_NODE) {
+              current.remove();
+            }
+            current = next;
+          }
+
+          // Remove pre-rendered content in false branch if exists
+          if (elseComment) {
+            current = elseComment.nextSibling;
+            while (current && current !== endComment) {
+              const next = current.nextSibling;
+              if (current.nodeType === Node.ELEMENT_NODE) {
+                current.remove();
+              }
+              current = next;
+            }
+          }
+
+          // Insert templates (runtime will process them)
+          if (restoration.trueTemplate) {
+            const template = document.createElement('div');
+            template.innerHTML = restoration.trueTemplate;
+            const templateNode = template.firstElementChild; // Use firstElementChild, not firstChild
+            if (templateNode) {
+              (elseComment || endComment).parentNode.insertBefore(
+                templateNode,
+                elseComment || endComment
+              );
+            }
+          }
+
+          if (restoration.falseTemplate && elseComment) {
+            const template = document.createElement('div');
+            template.innerHTML = restoration.falseTemplate;
+            const templateNode = template.firstElementChild; // Use firstElementChild, not firstChild
+            if (templateNode) {
+              endComment.parentNode.insertBefore(templateNode, endComment);
+            }
+          }
+        }
+      }
+
+      // After restoration, delete hyperspeedRestoration (runtime will parse DOM fresh)
+      delete tree.hyperspeedRestoration;
+    }
+
+    // Recursively restore children
+    if (tree.children) {
+      for (const key in tree.children) {
+        const childTree = tree.children[key];
+
+        // Handle iteration nodes with restoration data
+        if (childTree.type === 'iteration' && childTree.hyperspeedRestoration) {
+          const restoration = childTree.hyperspeedRestoration;
+
+          // Find iteration comment by searching (not using index)
+          // This avoids index shifting issues after restoration changes DOM
+          let startComment = null;
+          let endComment = null;
+
+          const walker = document.createTreeWalker(element, NodeFilter.SHOW_COMMENT);
+          while (walker.nextNode()) {
+            const comment = walker.currentNode;
+            const trimmed = comment.textContent.trim();
+
+            // Skip already processed iterations
+            if (comment._vibeProcessed) continue;
+
+            if (trimmed.startsWith('each ') && !startComment) {
+              startComment = comment;
+            } else if (trimmed === '/each' && startComment && !endComment) {
+              endComment = comment;
+              break;
+            }
+          }
+
+          if (startComment && endComment) {
+            // Mark as processed
+            startComment._vibeProcessed = true;
+            endComment._vibeProcessed = true;
+
+            // Remove all pre-rendered items between comments
+            let current = startComment.nextSibling;
+            while (current && current !== endComment) {
+              const next = current.nextSibling;
+              if (current.nodeType === Node.ELEMENT_NODE) {
+                current.remove();
+              }
+              current = next;
+            }
+
+            // Insert template from restoration data
+            const temp = document.createElement('div');
+            temp.innerHTML = restoration.template;
+            const templateNode = temp.firstElementChild;
+            if (templateNode) {
+              endComment.parentNode.insertBefore(templateNode, endComment);
+            }
+          }
+
+          delete childTree.hyperspeedRestoration;
+          continue;
+        }
+
+        // Handle conditional nodes (similar approach)
+        if (childTree.type === 'conditional') {
+          // TODO: Implement conditional restoration when needed
+          continue;
+        }
+
+        // Handle text nodes with restoration data
+        if (key.startsWith('text_') && childTree.hyperspeedRestoration) {
+          const restoration = childTree.hyperspeedRestoration;
+          if (restoration.parsed && Array.isArray(restoration.parsed)) {
+            const hasBindings = restoration.parsed.some(item =>
+              typeof item === 'string' && item.includes('@[')
+            );
+
+            if (hasBindings) {
+              const originalContent = restoration.parsed.join('');
+              if (element.childNodes.length === 1 && element.childNodes[0].nodeType === 3) {
+                element.childNodes[0].textContent = originalContent;
+              } else if (element.childNodes.length === 0) {
+                element.textContent = originalContent;
+              }
+            }
+          }
+          delete childTree.hyperspeedRestoration;
+          continue;
+        }
+
+        // Find corresponding child element
+        // Keys like "strong_0" use childNodes indices (includes text nodes/comments)
+        const match = key.match(/_(\d+)$/);
+        if (match) {
+          const index = parseInt(match[1], 10);
+          const childNode = element.childNodes[index]; // Use childNodes (all nodes)
+
+          // Only walk if it's an element node
+          if (childNode && childNode.nodeType === Node.ELEMENT_NODE) {
+            walkTree(childTree, childNode);
+          }
+        } else {
+          // Try to find by tag name for non-indexed keys
+          const tagName = key.split('_')[0].toUpperCase();
+          const childElement = Array.from(element.children).find(
+            child => child.nodeName === tagName
+          );
+          if (childElement) {
+            walkTree(childTree, childElement);
+          }
+        }
+      }
+    }
+  };
+
+  walkTree(subtree, rootElement);
+};
+
+// Top-level await to detect before module exports
+hyperspeedManifest = await detectHyperspeed();
+
+export { hyperspeedManifest };