@ape-egg/vibe 1.0.2 → 1.0.5

package/iteration-utils.js

@@ -4,7 +4,7 @@ import { ITERATION_START_REGEX, CONDITIONAL_START_REGEX } from './constants.js';
 // Resolve nested paths in state (e.g., "user.items" -> state.user.items)
 export const resolvePath = (obj, path) => {
   if (!path || !obj) return undefined;
-  return path.split(".").reduce((acc, part) => acc?.[part], obj);
+  return path.split('.').reduce((acc, part) => acc?.[part], obj);
 };
 
 // Clone template element preserving structure
@@ -16,11 +16,11 @@ export const cloneTemplate = (templateElement) => {
 export const findEndComment = (nodes, startIndex) => {
   let depth = 1;
   for (let i = startIndex; i < nodes.length; i++) {
-    if (nodes[i].nodeName === "#comment") {
+    if (nodes[i].nodeName === '#comment') {
       const text = nodes[i].textContent.trim();
       if (ITERATION_START_REGEX.test(text)) {
         depth++;
-      } else if (text === "/each") {
+      } else if (text === '/each') {
         depth--;
         if (depth === 0) {
           return i;
@@ -28,7 +28,7 @@ export const findEndComment = (nodes, startIndex) => {
       }
     }
   }
-  throw new Error("Unmatched <!-- each --> comment: missing <!-- /each -->");
+  throw new Error('Unmatched <!-- each --> comment: missing <!-- /each -->');
 };
 
 // Find matching <!-- /if --> and optional <!-- else --> with depth tracking
@@ -38,7 +38,7 @@ export const findConditionalEnd = (nodes, startIndex) => {
   let elseIndex = null;
 
   for (let i = startIndex; i < nodes.length; i++) {
-    if (nodes[i].nodeName === "#comment") {
+    if (nodes[i].nodeName === '#comment') {
       const text = nodes[i].textContent.trim();
 
       // Check for nested if
@@ -46,11 +46,11 @@ export const findConditionalEnd = (nodes, startIndex) => {
         depth++;
       }
       // Check for else at current depth
-      else if (text === "else" && depth === 1 && elseIndex === null) {
+      else if (text === 'else' && depth === 1 && elseIndex === null) {
         elseIndex = i;
       }
       // Check for /if
-      else if (text === "/if") {
+      else if (text === '/if') {
         depth--;
         if (depth === 0) {
           return { elseIndex, endIndex: i };
@@ -59,13 +59,13 @@ export const findConditionalEnd = (nodes, startIndex) => {
     }
   }
 
-  throw new Error("Unmatched <!-- if --> comment: missing <!-- /if -->");
+  throw new Error('Unmatched <!-- if --> comment: missing <!-- /if -->');
 };
 
 // Generate stable hash for objects
 export const stableHash = (obj) => {
-  if (obj === null || obj === undefined) return "null";
-  if (typeof obj !== "object") return String(obj);
+  if (obj === null || obj === undefined) return 'null';
+  if (typeof obj !== 'object') return String(obj);
 
   try {
     // Sort keys for stable hashing
@@ -96,7 +96,7 @@ export const deepEqual = (a, b) => {
     return a === b;
   }
 
-  if (typeof a !== "object" || typeof b !== "object") {
+  if (typeof a !== 'object' || typeof b !== 'object') {
     return a === b;
   }
 
@@ -166,12 +166,12 @@ export const longestCommonSubsequence = (arr1, arr2) => {
 // Generate unique key for array items
 export const getItemKey = (item, index) => {
   // 1. If item has 'id' property, use it
-  if (item && typeof item === "object" && "id" in item) {
+  if (item && typeof item === 'object' && 'id' in item) {
     return `id_${item.id}`;
   }
 
   // 2. If item is primitive, use value + index
-  if (typeof item !== "object" || item === null) {
+  if (typeof item !== 'object' || item === null) {
     return `val_${item}_${index}`;
   }
 
@@ -204,7 +204,7 @@ export const computeDiff = (oldKeys, newKeys, oldArray, newArray) => {
     // Check if item content changed
     if (!deepEqual(oldArray[oldIdx], newArray[newIdx])) {
       operations.push({
-        type: "UPDATE",
+        type: 'UPDATE',
         index: newIdx,
         oldIndex: oldIdx,
         item: newArray[newIdx],
@@ -220,7 +220,7 @@ export const computeDiff = (oldKeys, newKeys, oldArray, newArray) => {
   oldKeys.forEach((key, idx) => {
     if (!processedOld.has(idx)) {
       operations.push({
-        type: "REMOVE",
+        type: 'REMOVE',
         index: idx,
         key,
       });
@@ -231,7 +231,7 @@ export const computeDiff = (oldKeys, newKeys, oldArray, newArray) => {
   newKeys.forEach((key, idx) => {
     if (!processedNew.has(idx)) {
       operations.push({
-        type: "ADD",
+        type: 'ADD',
         index: idx,
         item: newArray[idx],
         key,
@@ -246,7 +246,7 @@ export const computeDiff = (oldKeys, newKeys, oldArray, newArray) => {
       return priority[a.type] - priority[b.type];
     }
     // For REMOVE, process from end to beginning
-    if (a.type === "REMOVE") {
+    if (a.type === 'REMOVE') {
       return b.index - a.index;
     }
     // For others, process in order

package/link.js

@@ -1,5 +1,5 @@
 const recursive = (tree, results, tagChain) => {
-  results[tagChain.join(".")] = tree.element;
+  results[tagChain.join('.')] = tree.element;
 
   if (tree.children && Object.keys(tree.children).length > 0) {
     Object.keys(tree.children).forEach((tag) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ape-egg/vibe",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "type": "module",
   "description": "Runtime-first reactivity",
   "main": "index.js",

package/parse.js

@@ -1,18 +1,23 @@
-import { hash } from './utils.js'
-import { findEndComment, findConditionalEnd } from './iteration-utils.js'
-import { NON_REACTIVE_ELEMENTS, BINDING_REGEX, ITERATION_REGEX, CONDITIONAL_REGEX } from './constants.js'
+import { hash } from './utils.js';
+import { findEndComment, findConditionalEnd } from './iteration-utils.js';
+import {
+  NON_REACTIVE_ELEMENTS,
+  BINDING_REGEX,
+  ITERATION_REGEX,
+  CONDITIONAL_REGEX,
+} from './constants.js';
 
 const parseHTML = (children, rootKey = undefined) =>
   children.reduce((s, element, i) => {
-    const { nodeName, textContent } = element
+    const { nodeName, textContent } = element;
     if (['#comment'].includes(nodeName)) {
-      return `${s}${nodeName === '#comment' ? `asd` : textContent}`
+      return `${s}${nodeName === '#comment' ? `asd` : textContent}`;
     }
-    const name = nodeName.startsWith('#') ? nodeName.slice(1) : nodeName
-    const innerNodeIdentifier = `${name}_${i}`.toLowerCase()
+    const name = nodeName.startsWith('#') ? nodeName.slice(1) : nodeName;
+    const innerNodeIdentifier = `${name}_${i}`.toLowerCase();
 
-    return rootKey || `${s}${`\$[${innerNodeIdentifier}]`}`
-  }, '')
+    return rootKey || `${s}${`\$[${innerNodeIdentifier}]`}`;
+  }, '');
 
 const recursive = (children, rootKey = undefined, skipIndices = new Set()) => {
   let result = {};
@@ -44,7 +49,7 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set()) => {
 
           // Create a temporary container for the template
           const templateContainer = document.createElement('div');
-          templateNodes.forEach(node => {
+          templateNodes.forEach((node) => {
             templateContainer.appendChild(node.cloneNode(true));
           });
 
@@ -64,14 +69,14 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set()) => {
               template: {
                 parsed: parseHTML([...templateContainer.childNodes]),
                 element: templateContainer,
-                children: templateParsed
-              }
+                children: templateParsed,
+              },
             },
             runtime: {
               instances: [],
-              templateRemoved: false
+              templateRemoved: false,
             },
-            children: {}
+            children: {},
           };
 
           // Mark template indices as processed
@@ -105,7 +110,7 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set()) => {
 
           // Create temporary container for true branch
           const trueBranchContainer = document.createElement('div');
-          trueBranchNodes.forEach(node => {
+          trueBranchNodes.forEach((node) => {
             trueBranchContainer.appendChild(node.cloneNode(true));
           });
 
@@ -118,7 +123,7 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set()) => {
           if (elseIndex !== null) {
             const falseBranchNodes = Array.from(children).slice(elseIndex + 1, endIndex);
             falseBranchContainer = document.createElement('div');
-            falseBranchNodes.forEach(node => {
+            falseBranchNodes.forEach((node) => {
               falseBranchContainer.appendChild(node.cloneNode(true));
             });
             falseBranchParsed = recursive([...falseBranchContainer.childNodes]);
@@ -137,21 +142,23 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set()) => {
                 if: {
                   parsed: parseHTML([...trueBranchContainer.childNodes]),
                   element: trueBranchContainer,
-                  children: trueBranchParsed
+                  children: trueBranchParsed,
                 },
-                else: falseBranchContainer ? {
-                  parsed: parseHTML([...falseBranchContainer.childNodes]),
-                  element: falseBranchContainer,
-                  children: falseBranchParsed
-                } : null
-              }
+                else: falseBranchContainer
+                  ? {
+                      parsed: parseHTML([...falseBranchContainer.childNodes]),
+                      element: falseBranchContainer,
+                      children: falseBranchParsed,
+                    }
+                  : null,
+              },
             },
             runtime: {
               activeBranch: undefined,
               activeInstance: null,
-              templateRemoved: false
+              templateRemoved: false,
             },
-            children: {}
+            children: {},
           };
 
           // Mark template indices as processed
@@ -199,23 +206,23 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set()) => {
         parsed,
         element,
         children: recursive(iteratableChildren),
-        ...(hasAttributeBindings && { attributes })
+        ...(hasAttributeBindings && { attributes }),
       };
     } else {
       result[nodeIdentifier] = {
         parsed: innerHTML || textContent,
         element,
         children: {},
-        ...(hasAttributeBindings && { attributes })
+        ...(hasAttributeBindings && { attributes }),
       };
     }
   }
 
   return result;
-}
+};
 
 export default (root, rootKey = undefined) => {
-  const { childNodes } = root
+  const { childNodes } = root;
 
   // Check for attribute bindings on the root element itself (only if element has attributes)
   let attributes = null;
@@ -235,6 +242,6 @@ export default (root, rootKey = undefined) => {
     parsed: parseHTML([...childNodes], rootKey),
     element: root,
     children: recursive(Array.from(childNodes), rootKey),
-    ...(attributes && { attributes })
-  }
-}
+    ...(attributes && { attributes }),
+  };
+};

package/state.js

@@ -1,12 +1,12 @@
 export default (state, rerender) =>
   new Proxy(state, {
     set(obj, prop, value) {
-      const ref = Reflect.set(...arguments)
+      const ref = Reflect.set(...arguments);
       rerender({
         [prop]: value,
-      })
+      });
       // console.info("state change", { obj, prop, value });
-      return ref
+      return ref;
     },
     get(target, prop) {
       // if (typeof target[prop] === 'function') {
@@ -21,6 +21,6 @@ export default (state, rerender) =>
 
       // }
 
-      return Reflect.get(...arguments)
+      return Reflect.get(...arguments);
     },
-  })
+  });

package/utils.js

@@ -2,6 +2,19 @@
 let hashCounter = 0;
 export const hash = () => `_${hashCounter++}`;
 
+// Evaluate expression in the context of state
+export const evalInScope = (expr, state) => {
+  try {
+    // Normalize whitespace - collapse newlines/spaces to single space (resilient to IDE formatting)
+    const normalized = expr.replace(/\s+/g, ' ').trim();
+    const keys = Object.keys(state);
+    const values = Object.values(state);
+    return new Function(...keys, `'use strict'; return (${normalized})`)(...values);
+  } catch (e) {
+    return undefined;
+  }
+};
+
 // Instead of using lodash-es as a dependency, we run our own deepMerge (mergeWith in lodash)
 export const deepMerge = (target, source) => {
   // Handle null/undefined
@@ -9,7 +22,7 @@ export const deepMerge = (target, source) => {
   if (target == null) return source;
 
   // If source is not an object, return it
-  if (typeof source !== "object") return source;
+  if (typeof source !== 'object') return source;
 
   // If source is an array, replace target array (don't merge arrays)
   if (Array.isArray(source)) return source;
@@ -27,8 +40,8 @@ export const deepMerge = (target, source) => {
       if (
         targetValue != null &&
         sourceValue != null &&
-        typeof targetValue === "object" &&
-        typeof sourceValue === "object" &&
+        typeof targetValue === 'object' &&
+        typeof sourceValue === 'object' &&
         !Array.isArray(targetValue) &&
         !Array.isArray(sourceValue)
       ) {
@@ -42,4 +55,3 @@ export const deepMerge = (target, source) => {
 
   return result;
 };
-