@ape-egg/vibe 1.8.0 → 1.9.1

package/runtime/utils.js

@@ -1,3 +1,5 @@
+import { THIS_PROP_REGEX } from './constants.js';
+
 // Fast incrementing counter instead of expensive random hash
 let hashCounter = 0;
 export const hash = () => `_${hashCounter++}`;
@@ -6,6 +8,31 @@ export const hash = () => `_${hashCounter++}`;
 // 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,7 +45,7 @@ export const evalInScope = (expr, state, element = null) => {
       const componentId = findComponentIdForElement(element);
       if (componentId) {
         // Replace this.property with $['componentId'].property
-        normalized = normalized.replace(/\bthis\.(\w+)/g, `$['${componentId}'].$1`);
+        normalized = normalized.replace(THIS_PROP_REGEX, `$['${componentId}'].$1`);
       }
     }
 
@@ -34,7 +61,55 @@ export const evalInScope = (expr, state, element = null) => {
       const allKeys = new Array(keyCount + 1);
       for (let i = 0; i < keyCount; i++) allKeys[i] = stateKeys[i];
       allKeys[keyCount] = '$';
-      fn = new Function(...allKeys, `'use strict'; return (${normalized})`);
+
+      // 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);
     }
 

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;
 }