@ape-egg/vibe 1.0.0

package/constants.js

@@ -0,0 +1,76 @@
+// Elements that should not have reactive bindings
+export const NON_REACTIVE_ELEMENTS = ["SCRIPT", "HEAD", "PRE"];
+
+// Attributes where the string value is meaningful (should NOT be removed when falsy)
+// All other attributes are treated as boolean-like (removed when falsy, present when truthy)
+export const VALUE_ATTRS = [
+  // Global attributes
+  'class', 'style', 'id', 'title', 'lang', 'dir', 'tabindex', 'accesskey',
+  'slot', 'part', 'is', 'nonce', 'popover', 'anchor',
+
+  // Enumerated (take specific string values, not truly boolean)
+  'contenteditable', 'draggable', 'spellcheck', 'translate', 'autocapitalize',
+  'inputmode', 'enterkeyhint', 'virtualkeyboardpolicy',
+
+  // URLs and sources
+  'href', 'src', 'action', 'cite', 'data', 'poster', 'srcset', 'imagesrcset',
+  'formaction', 'ping', 'usemap', 'manifest', 'codebase',
+
+  // Form attributes
+  'name', 'type', 'value', 'placeholder', 'pattern', 'min', 'max', 'step',
+  'minlength', 'maxlength', 'size', 'accept', 'autocomplete', 'list', 'form',
+  'formmethod', 'formtarget', 'formenctype', 'wrap', 'method', 'enctype',
+  'for', 'dirname',
+
+  // Text/accessibility
+  'alt', 'label', 'summary', 'abbr',
+
+  // Dimensions and layout
+  'width', 'height', 'cols', 'rows', 'span', 'rowspan', 'colspan',
+  'low', 'high', 'optimum',
+
+  // Link/resource hints
+  'target', 'rel', 'hreflang', 'download', 'as', 'media', 'type', 'charset',
+  'crossorigin', 'integrity', 'loading', 'decoding', 'fetchpriority',
+  'referrerpolicy', 'blocking', 'imagesizes', 'sizes',
+
+  // Media
+  'preload', 'kind', 'srclang',
+
+  // Meta
+  'content', 'http-equiv',
+
+  // iframe/embed
+  'sandbox', 'allow', 'srcdoc', 'credentialless',
+
+  // Table
+  'headers', 'scope',
+
+  // Datetime
+  'datetime',
+
+  // Object/embed legacy
+  'coords', 'shape',
+];
+
+// Properties that should be set directly on the DOM element (not as attributes)
+export const DOM_PROPERTIES = ['value', 'checked', 'selected'];
+
+// Regex for matching reactive bindings (@[expression])
+export const BINDING_REGEX = /\@\[([^\]]+)\]/g;
+
+// Regex for detecting a pure binding (entire value is just @[expression])
+export const PURE_BINDING_REGEX = /^\@\[([^\]]+)\]$/;
+
+// Regex for parsing iteration comment syntax (<!-- each items as item, index -->)
+// Supports nested paths like category.items
+export const ITERATION_REGEX = /^each\s+([\w.]+)\s+as\s+(\w+)(?:\s*,\s*(\w+))?\s*$/;
+
+// Regex for detecting start of iteration comment
+export const ITERATION_START_REGEX = /^each\s+/;
+
+// Regex for parsing conditional comment syntax (<!-- if expression -->)
+export const CONDITIONAL_REGEX = /^if\s+(.+)$/;
+
+// Regex for detecting start of conditional comment
+export const CONDITIONAL_START_REGEX = /^if\s+/;

package/hydrate.js

@@ -0,0 +1,100 @@
+import { updateIteration } from './iterate.js'
+import { updateConditional } from './conditionals.js'
+import { VALUE_ATTRS, DOM_PROPERTIES, BINDING_REGEX, PURE_BINDING_REGEX } from './constants.js'
+
+// Keep track of old state for diffing
+let previousState = {};
+
+export const setPreviousState = (state) => {
+  previousState = { ...state };
+};
+
+// Evaluate expression in the context of state
+const evalInScope = (expr, state) => {
+  try {
+    const keys = Object.keys(state);
+    const values = Object.values(state);
+    // Create a function with state keys as parameters and evaluate the expression
+    return new Function(...keys, `'use strict'; return (${expr})`)(...values);
+  } catch (e) {
+    // Fallback to undefined if evaluation fails
+    return undefined;
+  }
+};
+
+export default (affected, state, linkList = {}) => {
+  affected.forEach((aff) => {
+    // Handle iteration updates
+    if (aff.type === 'iteration') {
+      updateIteration(aff.node, state, previousState, linkList);
+      return;
+    }
+
+    // Handle conditional updates
+    if (aff.type === 'conditional') {
+      updateConditional(aff.node, state, previousState, linkList);
+      return;
+    }
+
+    // Handle attribute updates
+    if (aff.type === 'attribute') {
+      const { attrName, attrValue, element } = aff;
+      try {
+
+        // Check if this is a pure binding (e.g., value="@[inputValue]")
+        const isPureBinding = attrValue.match(PURE_BINDING_REGEX);
+        const isDomProperty = DOM_PROPERTIES.includes(attrName);
+        // Value attrs keep their string value; everything else is boolean-like (removed when falsy)
+        const isValueAttr = VALUE_ATTRS.includes(attrName) ||
+          attrName.startsWith('data-') ||
+          attrName.startsWith('aria-') ||
+          attrName.startsWith('on');
+
+        if (isDomProperty && isPureBinding) {
+          // For DOM properties like value, set the property directly
+          const expr = isPureBinding[1];
+          const value = evalInScope(expr, state);
+          element[attrName] = value;
+        } else if (!isValueAttr && isPureBinding) {
+          // Boolean-like attributes: add or remove based on truthiness
+          const expr = isPureBinding[1];
+          const value = evalInScope(expr, state);
+          if (value) {
+            element.setAttribute(attrName, '');
+          } else {
+            element.removeAttribute(attrName);
+          }
+        } else {
+          // Value attribute - replace bindings with values
+          const newValue = attrValue.replace(BINDING_REGEX, (_, expr) => {
+            return evalInScope(expr, state);
+          });
+          element.setAttribute(attrName, newValue);
+        }
+      } catch (e) {}
+      return;
+    }
+
+    // Handle regular element updates
+    const { matches, matchOuter, matchInner, input, element } = aff;
+
+    // This prevents undefined store properties to throw an error
+    try {
+      // Evaluate the expression with state as context
+      const evaluated = evalInScope(matchInner, state);
+
+      const toReplace = input.replaceAll(matchOuter, evaluated).trim();
+
+      affected.forEach((innerAff) => {
+        if (innerAff.element === element) {
+          innerAff.input = toReplace;
+        }
+      });
+
+      element.textContent = toReplace;
+    } catch (e) {}
+  });
+
+  // Update previous state for next diff
+  setPreviousState(state);
+}

package/index.js

@@ -0,0 +1,250 @@
+import state from "./state.js";
+import parse from "./parse.js";
+import link from "./link.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 } from "./constants.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);
+};
+
+const main = (s, attrName = "vibe") => {
+  // 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;
+  let parsedTree = parse(rootElement);
+  let linkList = link(parsedTree);
+
+  // Store previous state for comparison
+  let previousState = {};
+
+  // Lifecycle hooks that users can subscribe to
+  const hooks = {
+    afterUpdate: [],
+    afterDomMutation: [],
+  };
+
+  // Observer reference - set after observer is created
+  let observer = null;
+
+  const $ = state(s, (newState) => {
+    const mergedState = deepMerge($, newState);
+    const affectedElements = affected(parsedTree, previousState, mergedState);
+
+    if (observer) observer.disconnect();
+    hydrate(affectedElements, mergedState, linkList);
+    if (observer) {
+      observer.observe(rootElement, {
+        attributes: false,
+        characterData: false,
+        childList: true,
+        subtree: true,
+      });
+    }
+
+    const prev = structuredClone(previousState);
+    previousState = { ...$, ...newState };
+    hooks.afterUpdate.forEach((callback) =>
+      callback(structuredClone({ ...$ }), 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,
+  });
+
+  // Batch DOM changes: disconnects observer, runs fn, re-parses everything
+  Object.defineProperty($, 'batch', {
+    value: (fn) => {
+      if (observer) observer.disconnect();
+      try {
+        fn();
+      } finally {
+        parsedTree = parse(rootElement);
+        linkList = link(parsedTree);
+        const affectedElements = affected(parsedTree, $, $);
+        hydrate(affectedElements, $, linkList);
+        setPreviousState($);
+        renderAllIterations(parsedTree, $, linkList);
+        renderAllConditionals(parsedTree, $, linkList);
+        if (observer) {
+          observer.observe(rootElement, {
+            attributes: false,
+            characterData: false,
+            childList: true,
+            subtree: true,
+          });
+        }
+      }
+    },
+    enumerable: false,
+  });
+
+  // Initial hydration
+  const affectedElements = affected(parsedTree, $, $);
+  hydrate(affectedElements, $, linkList);
+
+  // Render all iterations and conditionals after initial hydration
+  setPreviousState($);
+  previousState = { ...$ };
+  renderAllIterations(parsedTree, $, linkList);
+  renderAllConditionals(parsedTree, $, linkList);
+
+  observer = new MutationObserver((mutations) => {
+    mutations.forEach(({ addedNodes, removedNodes, target }) => {
+      addedNodes.forEach((node) => {
+        // Skip if node itself or any ancestor is non-reactive
+        if (isNonReactiveOrInside(node)) {
+          return;
+        }
+
+        const index = [...target.childNodes].findIndex(
+          (childNode) => childNode === node,
+        );
+        const entry = Object.entries(linkList).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);
+
+        // Update parent's parsed HTML
+        const { parsed } = parse(picked.element);
+        picked.parsed = parsed;
+
+        // Add the parsed node to parent's children
+        picked.children[name] = parsedNode;
+
+        linkList[`${dotAnnotation}.${name}`] = node;
+
+        const affectedElements = affected(parsedTree, $, $);
+
+        hydrate(affectedElements, $, linkList);
+
+        // Trigger afterDomMutation hook for added nodes
+        hooks.afterDomMutation.forEach((callback) => callback());
+      });
+
+      removedNodes.forEach((node) => {
+        const entry = Object.entries(linkList).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 linkList[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
+        const { parsed } = parse(picked.element);
+        picked.parsed = parsed;
+
+        // Remove the node from parent's children
+        delete picked.children[name];
+
+        const affectedElements = affected(parsedTree, $, $);
+        hydrate(affectedElements, $, linkList);
+
+        // Trigger afterDomMutation hook for removed nodes
+        hooks.afterDomMutation.forEach((callback) => callback());
+      });
+    });
+  });
+
+  observer.observe(rootElement, {
+    attributes: false,
+    characterData: false,
+    childList: true,
+    subtree: true,
+    attributeOldValue: false,
+    characterDataOldValue: false,
+  });
+
+  // Force reflow - ensures layout is applied before transitions re-enable
+  rootElement.offsetHeight;
+
+  // Remove the vibe attribute to reveal content and enable transitions
+  rootElement.removeAttribute(attrName);
+
+  return $;
+};
+
+export default main;