@ape-egg/vibe 1.7.2 → 1.9.0

package/runtime/utils.js

@@ -2,6 +2,35 @@
 let hashCounter = 0;
 export const hash = () => `_${hashCounter++}`;
 
+// Function compilation cache: avoids creating new Function() for repeated expressions
+// Key: normalized expression + '\0' + state keys joined by '\0'
+const fnCache = new Map();
+
+// Built-ins and reserved words that must NEVER be pre-declared as `var`
+// inside a compiled expression — they're either real globals we want to
+// reach, or JS keywords that would be a SyntaxError to shadow.
+const EVAL_IDENT_EXCLUDE = new Set([
+  // Primitive literals / special identifiers
+  'true', 'false', 'null', 'undefined', 'NaN', 'Infinity', 'this',
+  // JS reserved words (shadowing any of these is a SyntaxError)
+  'break', 'case', 'catch', 'class', 'const', 'continue', 'debugger',
+  'default', 'delete', 'do', 'else', 'export', 'extends', 'finally',
+  'for', 'function', 'if', 'import', 'in', 'instanceof', 'let', 'new',
+  'of', 'return', 'super', 'switch', 'throw', 'try', 'typeof', 'var',
+  'void', 'while', 'with', 'yield', 'async', 'await',
+  // Common runtime globals authors reach for
+  'Math', 'Array', 'Object', 'String', 'Number', 'Boolean', 'Date',
+  'JSON', 'RegExp', 'Error', 'Map', 'Set', 'WeakMap', 'WeakSet',
+  'Promise', 'Symbol', 'parseInt', 'parseFloat', 'isNaN', 'isFinite',
+  'window', 'document', 'console', 'globalThis',
+]);
+
+// Match free identifiers (not property accesses like `obj.foo` or keys
+// inside strings). The `(?<![.\w$'"])` lookbehind skips tokens preceded
+// by a dot (property access), an identifier char (mid-identifier), or
+// a quote (inside a string literal).
+const FREE_IDENT_REGEX = /(?<![.\w$'"])[a-zA-Z_$][\w$]*/g;
+
 // Evaluate expression in the context of state
 // Handles @[this.property] for component state and @[property] for global state
 export const evalInScope = (expr, state, element = null) => {
@@ -18,13 +47,76 @@ export const evalInScope = (expr, state, element = null) => {
       }
     }
 
-    // Add $ to scope for this.property references
-    const effectiveState = { ...state, $: state };
+    // Get state keys once (triggers ownKeys trap only once for Proxies)
+    const stateKeys = Object.keys(state);
+    const keyCount = stateKeys.length;
+
+    // Cache lookup: expression + key signature → compiled function
+    // All iteration instances share the same state shape, so this hits cache 999/1000 times
+    const cacheKey = normalized + '\0' + stateKeys.join('\0');
+    let fn = fnCache.get(cacheKey);
+    if (!fn) {
+      const allKeys = new Array(keyCount + 1);
+      for (let i = 0; i < keyCount; i++) allKeys[i] = stateKeys[i];
+      allKeys[keyCount] = '$';
+
+      // Rewrite free identifiers that are neither state keys nor known
+      // globals/reserved words so they resolve to `undefined` instead of
+      // throwing ReferenceError. `typeof x` is the only operator that can
+      // probe a name without reading it, so we guard each such reference:
+      //
+      //   missingProp  →  (typeof missingProp==='undefined'?void 0:missingProp)
+      //
+      // This keeps author intuition working for absent state (`!undef` is
+      // `true`, `undef?.x` is `undefined`) while leaving real globals —
+      // functions the app exposes on `window` — reachable via normal
+      // identifier lookup. The previous approach (`var undef;` hoist) also
+      // shadowed those globals to `undefined`, so a template call like
+      // `getLevelByExperience(exp)` threw TypeError and silently rendered
+      // "undefined".
+      const known = new Set(allKeys);
+      for (const ex of EVAL_IDENT_EXCLUDE) known.add(ex);
+
+      // Arrow function parameters are bound locally — rewriting them breaks
+      // the arrow's parameter list syntax (e.g. `f =>` must stay a bare ident).
+      // Collect both `(a, b) =>` and `x =>` forms, strip defaults, and treat
+      // them as known so the main pass leaves them untouched.
+      normalized.replace(/\(([^()]*)\)\s*=>/g, (_, paramList) => {
+        for (const p of paramList.split(',')) {
+          const name = p.trim().split('=')[0].trim();
+          if (/^[a-zA-Z_$][\w$]*$/.test(name)) known.add(name);
+        }
+        return '';
+      });
+      const singleParamRe = /(?:^|[^\w$.])([a-zA-Z_$][\w$]*)\s*=>/g;
+      let paramMatch;
+      while ((paramMatch = singleParamRe.exec(normalized)) !== null) {
+        known.add(paramMatch[1]);
+      }
+
+      // Match string literals first so hyphens inside them (e.g. 'the-arena')
+      // don't cause the trailing word to be rewritten as a free identifier.
+      // Also capture object-literal keys (`{foo: ...}` / `, foo: ...`) as a
+      // second alternative — they're property names, not references, so
+      // rewriting them produces invalid JS (computed key without brackets).
+      const source = normalized.replace(
+        /('(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*")|((?<=[{,]\s*)[a-zA-Z_$][\w$]*(?=\s*:))|(?<![.\w$'"])[a-zA-Z_$][\w$]*/g,
+        (match, strLit, objKey) => {
+          if (strLit !== undefined) return match;
+          if (objKey !== undefined) return match;
+          return known.has(match) ? match : `(typeof ${match}==='undefined'?void 0:${match})`;
+        },
+      );
+      fn = new Function(...allKeys, `'use strict'; return (${source})`);
+      fnCache.set(cacheKey, fn);
+    }
 
-    const keys = Object.keys(effectiveState);
-    const values = Object.values(effectiveState);
+    // Build values array matching the cached function's parameter order
+    const values = new Array(keyCount + 1);
+    for (let i = 0; i < keyCount; i++) values[i] = state[stateKeys[i]];
+    values[keyCount] = state;
 
-    const result = new Function(...keys, `'use strict'; return (${normalized})`)(...values);
+    const result = fn(...values);
 
     // If result is undefined and we're accessing a component property, try case-insensitive match
     // This handles HTML lowercasing attribute names like @[this.iconName] -> @[this.iconname]

package/vibe.css

@@ -27,6 +27,8 @@
  * to make the wrapper invisible in the layout. Children render as if the wrapper doesn't exist.
  */
 component,
-div.component {
+div.component,
+slot,
+div.slot {
   display: contents;
 }