@ape-egg/vibe 1.0.3 → 1.1.1

package/runtime/index.js

@@ -0,0 +1,614 @@
+import state from './state.js';
+import parse from './parse.js';
+import createManifest from './manifest.js';
+import hydrate, { setPreviousState } from './hydrate.js';
+import affected from './affected.js';
+import { deepMerge, hash } from './utils.js';
+import { renderAllIterations, setRenderAllConditionals } from './iterate.js';
+import { renderAllConditionals } from './conditionals.js';
+import {
+  NON_REACTIVE_ELEMENTS,
+  PHASE_ATTACH,
+  PHASE_PARSE,
+  PHASE_MANIFEST,
+  PHASE_HYDRATE,
+  PHASE_ITERATE,
+  PHASE_CONDITION,
+  PHASE_OBSERVE,
+  PHASE_UPDATE,
+  PHASE_MUTATE,
+  PHASE_COMPLETE,
+} from './constants.js';
+import { processComponent, abortComponentFetch } from './component.js';
+import { debugLog } from './debug.js';
+import { shouldCleanup, cleanup } from './cleanup.js';
+
+// Wire up cross-module dependency after all modules are loaded
+setRenderAllConditionals(renderAllConditionals);
+
+// Check if node itself or any ancestor is non-reactive or dehydrated
+const isNonReactiveOrInside = (node) => {
+  let current = node;
+  while (current && current !== document.body) {
+    if (NON_REACTIVE_ELEMENTS.includes(current.nodeName)) {
+      return true;
+    }
+    if (current.hasAttribute?.('dehydrate')) {
+      return true;
+    }
+    current = current.parentElement;
+  }
+  return false;
+};
+
+// Navigate tree using dot notation (handles .children at each level)
+const navigateTree = (tree, path) => {
+  if (!path) return tree;
+  return path.split('.').reduce((node, key) => node?.children?.[key], tree);
+};
+
+// Get or create a node in the tree at the given path
+const ensureNode = (tree, path) => {
+  const keys = path.split('.');
+  return keys.reduce((node, key) => {
+    if (!node.children[key]) {
+      node.children[key] = { children: {} };
+    }
+    return node.children[key];
+  }, tree);
+};
+
+// Recursively add parsed tree nodes to manifest (like createManifest does)
+const addToManifest = (tree, manifest, dotPath) => {
+  manifest[dotPath] = tree.element;
+
+  if (tree.children && Object.keys(tree.children).length > 0) {
+    Object.keys(tree.children).forEach((childKey) => {
+      addToManifest(tree.children[childKey], manifest, `${dotPath}.${childKey}`);
+    });
+  }
+};
+
+/**
+ * Core loop: processes a node through parse → hydrate → conditionals → iterate
+ * @param {Node} node - DOM node to process (unused in current implementation, parsedNode is primary)
+ * @param {Object} parsedNode - Parsed tree node
+ * @param {Object} state - Current global state
+ * @param {Object} manifest - DOM manifest
+ * @param {Boolean} isNewNode - Whether this is a newly added node (affects hydration)
+ * @param {Boolean} debug - Debug mode
+ * @returns {Object} - Counts of hydrated/iterated/evaluated elements
+ */
+const processCoreLoop = (node, parsedNode, state, manifest, isNewNode, debug) => {
+  let hydratedCount = 0;
+  let iteratedCount = 0;
+  let evaluatedCount = 0;
+
+  if (!parsedNode) return { hydratedCount, iteratedCount, evaluatedCount };
+
+  // 1. Parse - already done before calling core loop (in processMutations)
+
+  // 2. Hydrate (replace @[...] bindings)
+  // Use empty object as "previous state" for new nodes so all bindings are affected
+  const affectedElements = affected(parsedNode, isNewNode ? {} : previousState, state);
+  if (affectedElements.length > 0) {
+    hydratedCount = affectedElements.length;
+    hydrate(affectedElements, state, manifest);
+  }
+
+  // 3. Conditionals (evaluate <!-- if -->)
+  const conditionalCount = renderAllConditionals(parsedNode, state, manifest);
+  if (conditionalCount > 0) {
+    evaluatedCount = conditionalCount;
+  }
+
+  // 4. Iterate (render <!-- each -->)
+  const iterationCount = renderAllIterations(parsedNode, state, manifest);
+  if (iterationCount > 0) {
+    iteratedCount = iterationCount;
+  }
+
+  // Note: Any DOM changes from steps 3-4 will trigger MutationObserver
+  // which will recursively call processMutations for nested content
+
+  return { hydratedCount, iteratedCount, evaluatedCount };
+};
+
+// Store previous state for comparison (needs to be accessible by core loop)
+let previousState = {};
+
+const main = (s, attrName = 'vibe', config = {}) => {
+  const debug = !!config?.debug;
+  const verbose = !!config?.verbose;
+
+  // Reset previous state for each new instance
+  previousState = {};
+
+  // Find element(s) with the specified attribute
+  const elements = document.querySelectorAll(`[${attrName}]`);
+
+  if (elements.length === 0) {
+    console.info(`[vibe] No element found with attribute "${attrName}". Falling back to body.`);
+  } else if (elements.length > 1) {
+    console.info(
+      `[vibe] Multiple elements (${elements.length}) found with attribute "${attrName}". Hydrating the first one.`,
+    );
+  }
+
+  const rootElement = elements[0] || document.body;
+
+  debugLog(PHASE_ATTACH, `Vibe attached to`, debug, 0, rootElement);
+
+  let parsedTree = parse(rootElement);
+  let manifest = createManifest(parsedTree);
+
+  const manifestEntries = Object.entries(manifest);
+  const totalCount = manifestEntries.length;
+  const elementsOnly = manifestEntries.filter(
+    ([_, el]) => el && !el.nodeName.startsWith('#'),
+  ).length;
+  const nodesOnly = totalCount - elementsOnly;
+
+  const segments = [
+    { text: `${elementsOnly}`, colored: true },
+    { text: ' elements (', colored: false },
+    { text: `${totalCount}`, color: 'slate' },
+    { text: ' total nodes)', colored: false },
+  ];
+  if (parsedTree.stats?.skipped > 0) {
+    segments.push(
+      { text: ' (', colored: false },
+      { text: `${parsedTree.stats.skipped}`, color: 'yellow' },
+      { text: ' skipped)', colored: false },
+    );
+  }
+  debugLog(PHASE_PARSE, segments, debug);
+  debugLog(PHASE_MANIFEST, `DOM manifest created`, debug);
+
+  // Lifecycle hooks that users can subscribe to
+  const hooks = {
+    afterUpdate: [],
+    afterDomMutation: [],
+  };
+
+  // Observer reference and callback - defined here so state handler can access processMutations
+  let observer = null;
+  let processMutations = null;
+
+  const $ = state(s, (newState) => {
+    const mergedState = deepMerge($, newState);
+
+    // Find what changed
+    const affectedElements = affected(parsedTree, previousState, mergedState);
+
+    if (affectedElements.length > 0) {
+      const changedKeys = Object.keys(newState).join(', ');
+      debugLog(PHASE_UPDATE, `state changed (${changedKeys})`, debug);
+
+      // Capture pending mutations before disconnecting (takeRecords clears the queue)
+      let pendingMutations = [];
+      if (observer) {
+        pendingMutations = observer.takeRecords();
+        observer.disconnect();
+      }
+
+      // Run core loop on the full tree (hydrate will use affected list)
+      // isNewNode = false because this is a state update, not a DOM mutation
+      hydrate(affectedElements, mergedState, manifest);
+
+      // After hydrate, check for conditional/iteration changes
+      const conditionalCount = renderAllConditionals(parsedTree, mergedState, manifest);
+      const iterationCount = renderAllIterations(parsedTree, mergedState, manifest);
+
+      if (observer) {
+        observer.observe(rootElement, {
+          attributes: false,
+          characterData: false,
+          childList: true,
+          subtree: true,
+        });
+
+        // Process mutations that were pending before we disconnected
+        if (pendingMutations.length > 0 && processMutations) {
+          processMutations(pendingMutations);
+        }
+      }
+    }
+
+    // Deep clone that handles proxies (structuredClone fails on proxy objects)
+    const deepClone = (obj) => {
+      if (obj === null || typeof obj !== 'object') return obj;
+      if (Array.isArray(obj)) return obj.map(deepClone);
+      const cloned = {};
+      for (const key in obj) {
+        if (obj.hasOwnProperty(key)) {
+          cloned[key] = deepClone(obj[key]);
+        }
+      }
+      return cloned;
+    };
+
+    const prev = deepClone(previousState);
+    previousState = { ...$, ...newState };
+    hooks.afterUpdate.forEach((callback) => callback(deepClone({ ...$ }), prev));
+  });
+
+  // Add hook subscription method (non-enumerable so it won't be spread/cloned with state)
+  Object.defineProperty($, 'on', {
+    value: (event, callback) => {
+      if (hooks[event]) {
+        hooks[event].push(callback);
+      }
+      return () => (hooks[event] = hooks[event].filter((cb) => cb !== callback));
+    },
+    enumerable: false,
+  });
+
+  // Initial hydration
+  const affectedElements = affected(parsedTree, $, $);
+
+  debugLog(
+    PHASE_HYDRATE,
+    [
+      { text: `${affectedElements.length} bindings (`, colored: false },
+      { text: '@[...]', color: 'pink' },
+      { text: ')', colored: false },
+    ],
+    debug,
+  );
+
+  hydrate(affectedElements, $, manifest);
+
+
+  // Render all iterations and conditionals after initial hydration
+  setPreviousState($);
+  previousState = { ...$ };
+
+  const iterationCount = renderAllIterations(parsedTree, $, manifest);
+  if (iterationCount > 0)
+    debugLog(
+      PHASE_ITERATE,
+      [
+        { text: `${iterationCount} iterations (`, colored: false },
+        { text: '<!-- each -->', color: 'commentGreen' },
+        { text: ')', colored: false },
+      ],
+      debug,
+    );
+
+  const conditionalCount = renderAllConditionals(parsedTree, $, manifest);
+  if (conditionalCount > 0)
+    debugLog(
+      PHASE_CONDITION,
+      [
+        { text: `${conditionalCount} conditionals (`, colored: false },
+        { text: '<!-- if -->', color: 'commentGreen' },
+        { text: ')', colored: false },
+      ],
+      debug,
+    );
+
+  // Define observer callback as named function so we can call it manually for pending mutations
+  processMutations = (mutations) => {
+    // Early exit if no mutations to process (common case)
+    if (mutations.length === 0) return;
+
+    const manifestSizeBefore = Object.keys(manifest).length;
+    let hadChanges = false;
+    let parsedParents = null; // Lazy init - only create Set when needed
+    let addedElements = 0;
+    let addedNodes = 0;
+    let removedElements = 0;
+    let removedNodes = 0;
+    let singleElement = null; // Track the single element when count is 1
+    let totalSkipped = 0; // Track skipped elements from parse
+    let hydratedCount = 0;
+    let iteratedCount = 0;
+    let evaluatedCount = 0;
+    let addedElementsList = []; // Track all added elements for verbose output
+
+    mutations.forEach(({ addedNodes: addedNodesList, removedNodes: removedNodesList, target }) => {
+      removedNodesList.forEach((node) => {
+        // If this is a component element with pending fetch, abort it
+        if (node.nodeName === 'COMPONENT') {
+          abortComponentFetch(node);
+        }
+
+        const entry = Object.entries(manifest).find(([_, element]) => element === node);
+
+        // Skip nodes that aren't tracked (e.g., iteration-generated nodes or nodes outside reactive scope)
+        if (!entry) return;
+
+        const [dotAnnotation] = entry;
+        delete manifest[dotAnnotation];
+
+        const dotPath = dotAnnotation.split('.');
+        const name = dotPath.pop();
+        const parentDotAnnotation = dotPath.join('.');
+
+        const picked = navigateTree(parsedTree, parentDotAnnotation);
+
+        // If we can't navigate to the parent, skip
+        if (!picked || !picked.element) return;
+
+        // Update parent's parsed HTML (only once per parent)
+        if (!parsedParents) parsedParents = new Set();
+        if (!parsedParents.has(picked)) {
+          const { parsed } = parse(picked.element);
+          picked.parsed = parsed;
+          parsedParents.add(picked);
+        }
+
+        // Remove the node from parent's children
+        delete picked.children[name];
+
+        // Count elements vs nodes separately
+        if (node.nodeName.startsWith('#')) {
+          removedNodes++;
+        } else {
+          removedElements++;
+          singleElement = node;
+        }
+        hadChanges = true;
+      });
+
+      addedNodesList.forEach((node) => {
+        // Skip if node itself or any ancestor is non-reactive
+        if (isNonReactiveOrInside(node)) {
+          return;
+        }
+
+        const entry = Object.entries(manifest).find(([_, element]) => element === target);
+
+        // If parent isn't tracked, this node is outside the reactive scope
+        if (!entry) return;
+
+        const [dotAnnotation] = entry;
+        const picked = navigateTree(parsedTree, dotAnnotation);
+
+        // If we can't navigate to the parent in the tree, skip
+        if (!picked) return;
+
+        // If parent has no element reference, re-parse from the actual DOM element
+        if (!picked.element) {
+          picked.element = target;
+        }
+
+        // Parse the newly added node
+        const name = `${node.nodeName.toLowerCase()}_${hash()}`;
+        const parsedNode = parse(node);
+
+        // Accumulate skipped stats
+        if (parsedNode.stats?.skipped) {
+          totalSkipped += parsedNode.stats.skipped;
+        }
+
+        // Update parent's parsed HTML (only once per parent)
+        if (!parsedParents) parsedParents = new Set();
+        if (!parsedParents.has(picked)) {
+          const { parsed } = parse(picked.element);
+          picked.parsed = parsed;
+          parsedParents.add(picked);
+        }
+
+        // Add the parsed node to parent's children
+        picked.children[name] = parsedNode;
+
+        // Recursively add node and all descendants to manifest
+        addToManifest(parsedNode, manifest, `${dotAnnotation}.${name}`);
+
+        // Run core loop for the new node (parse already done, hydrate → conditionals → iterate)
+        const counts = processCoreLoop(node, parsedNode, $, manifest, true, debug);
+        hydratedCount += counts.hydratedCount;
+        iteratedCount += counts.iteratedCount;
+        evaluatedCount += counts.evaluatedCount;
+
+        // Count elements vs nodes separately
+        if (node.nodeName.startsWith('#')) {
+          addedNodes++;
+        } else {
+          addedElements++;
+          singleElement = node;
+          addedElementsList.push(node);
+        }
+        hadChanges = true;
+      });
+    });
+
+    // Fire hooks once after all mutations are processed (not per-node)
+    if (hadChanges) {
+      if (addedElements > 0 || addedNodes > 0 || removedElements > 0 || removedNodes > 0) {
+        const segments = [];
+
+        // Added
+        if (addedElements > 0) {
+          segments.push({ text: `+${addedElements}`, color: 'green' });
+          segments.push({ text: ' elements', colored: false });
+        }
+        if (addedNodes > 0) {
+          if (addedElements > 0) segments.push({ text: ', ', colored: false });
+          segments.push({ text: `+${addedNodes}`, color: 'slate' });
+          segments.push({ text: ' nodes', colored: false });
+        }
+
+        // Removed
+        if (removedElements > 0) {
+          if (addedElements > 0 || addedNodes > 0) segments.push({ text: ', ', colored: false });
+          segments.push({ text: `-${removedElements}`, color: 'red' });
+          segments.push({ text: ' elements', colored: false });
+        }
+        if (removedNodes > 0) {
+          if (addedElements > 0 || addedNodes > 0 || removedElements > 0)
+            segments.push({ text: ', ', colored: false });
+          segments.push({ text: `-${removedNodes}`, color: 'slate' });
+          segments.push({ text: ' nodes', colored: false });
+        }
+
+        // Pass element reference if exactly one element was mutated (not counting nodes)
+        // const totalElementCount = addedElements + removedElements;
+        // const elementToLog = totalElementCount === 1 ? singleElement : null;
+        // debugLog(PHASE_MUTATE, segments, debug, 0, elementToLog);
+        debugLog(PHASE_MUTATE, segments, debug);
+
+        // Verbose: log the added element (or topmost parent if multiple)
+        if (verbose && addedElementsList.length > 0) {
+          // Find the topmost parent among added elements
+          const topmostParent = addedElementsList.find((el) => {
+            // Check if this element is NOT a descendant of any other element in the list
+            return !addedElementsList.some((other) => other !== el && other.contains(el));
+          });
+          debugLog(PHASE_MUTATE, '', debug, 0, topmostParent || addedElementsList[0]);
+        }
+
+        // Log parsed elements after mutation
+        const manifestSizeAfter = Object.keys(manifest).length;
+        const totalNodes = manifestSizeAfter - manifestSizeBefore;
+
+        if (totalNodes > 0) {
+          const newManifestEntries = Object.entries(manifest).slice(-totalNodes);
+          const elementsOnly = newManifestEntries.filter(
+            ([_, el]) => el && !el.nodeName.startsWith('#'),
+          ).length;
+
+          const parseSegments = [
+            { text: `${elementsOnly}`, colored: true },
+            { text: ' elements (', colored: false },
+            { text: `${totalNodes}`, color: 'slate' },
+            { text: ' total nodes)', colored: false },
+          ];
+
+          if (totalSkipped > 0) {
+            parseSegments.push(
+              { text: ' (', colored: false },
+              { text: `${totalSkipped}`, color: 'yellow' },
+              { text: ' skipped)', colored: false },
+            );
+          }
+
+          debugLog(PHASE_PARSE, parseSegments, debug);
+
+          // Log hydration after parse
+          if (hydratedCount > 0) {
+            debugLog(
+              PHASE_HYDRATE,
+              [
+                { text: `${hydratedCount} bindings (`, colored: false },
+                { text: '@[...]', color: 'pink' },
+                { text: ')', colored: false },
+              ],
+              debug,
+            );
+          }
+
+          // Log iterations after hydration
+          if (iteratedCount > 0) {
+            debugLog(
+              PHASE_ITERATE,
+              [
+                { text: `${iteratedCount} iterations (`, colored: false },
+                { text: '<!-- each -->', color: 'commentGreen' },
+                { text: ')', colored: false },
+              ],
+              debug,
+            );
+          }
+
+          // Log conditionals after iterations
+          if (evaluatedCount > 0) {
+            debugLog(
+              PHASE_CONDITION,
+              [
+                { text: `${evaluatedCount} conditionals (`, colored: false },
+                { text: '<!-- if -->', color: 'commentGreen' },
+                { text: ')', colored: false },
+              ],
+              debug,
+            );
+          }
+        }
+      }
+    }
+
+    // Always call hooks, even if no changes detected (cleanup needs to check)
+    hooks.afterDomMutation.forEach((callback) => callback());
+
+    // Check for new <component> elements after DOM mutations
+    // Process component elements if we've started (initial call happened)
+    if (componentProcessingStarted && !cleanupExecuted) {
+      const componentConfig = {
+        ...config,
+        _forceSync: true,
+        _observer: observer,
+        _processMutations: processMutations
+      };
+      processComponent(rootElement, () => {
+        // When all components are done, run cleanup check
+        checkCleanup();
+      }, componentConfig);
+    }
+  };
+
+  observer = new MutationObserver(processMutations);
+
+  observer.observe(rootElement, {
+    attributes: false,
+    characterData: false,
+    childList: true,
+    subtree: true,
+    attributeOldValue: false,
+    characterDataOldValue: false,
+  });
+
+  debugLog(PHASE_OBSERVE, `MutationObserver listening to DOM changes`, debug);
+
+  // Track cleanup state
+  let componentProcessingStarted = false;
+  let cleanupExecuted = false;
+
+  // Check if cleanup should run
+  const checkCleanup = () => {
+    if (cleanupExecuted) return;
+
+    // Check for pending mutations first
+    const pendingMutations = observer ? observer.takeRecords() : [];
+
+    if (pendingMutations.length > 0) {
+      // More mutations to process
+      processMutations(pendingMutations);
+      return;
+    }
+
+    // Check if all processing is complete
+    if (shouldCleanup(rootElement)) {
+      cleanup(rootElement, attrName, debug);
+      cleanupExecuted = true;
+    }
+  };
+
+  // Register hook to check for cleanup readiness after each mutation batch
+  hooks.afterDomMutation.push(checkCleanup);
+
+  // Process component elements after initialization - MutationObserver will handle hydration
+  componentProcessingStarted = true;
+
+  // Pass observer and processMutations to component for sync processing
+  const componentConfig = {
+    ...config,
+    _forceSync: true,
+    _observer: observer,
+    _processMutations: processMutations
+  };
+
+  processComponent(
+    rootElement,
+    () => {
+      // When all components are done, run cleanup check
+      checkCleanup();
+    },
+    componentConfig,
+  );
+
+  return $;
+};
+
+export default main;