fix(stx): also drop reserved keywords from createSafeFunction params

The previous fix dropped only non-identifier names from the function
parameter list. JavaScript also rejects identifiers that match reserved
words ("Cannot use the keyword 'class' as a parameter name"), and
strict-mode-reserved words like `let`, `static`, `arguments`, `eval`.

Real templates trip this constantly: Vue-/Tailwind-style components
spread `class`, `style`, `for`, `data-*`, `aria-*` etc. into the
evaluator as prop bag keys. A single offending key — `class`,
`for`, `let` — used to crash every `@if` / `{{ }}` / safe-evaluation
in the template. The Stacks dashboard hit this on every UI component
that takes a `class` prop (Select, Input, Button, …).

Add a RESERVED_PARAM_NAMES Set covering every word the spec or
strict mode forbids in parameter position, and skip those keys
alongside the existing identifier filter. Same projection wrapper
keeps callers' positional values aligned with the surviving columns.

Tests cover individual reserved words, a grab-bag of common HTML
attribute names, and an end-to-end `@if(disabled)` case where the
context also has a `class` key (the real AppButton scenario).

Author: chrisbbreuer

packages/stx/src/safe-evaluator.ts

@@ -450,6 +450,32 @@ export function safeEvaluateObject(expression: string, context: Record<string, u
   }
 }
 
+/**
+ * Names that JavaScript rejects as function parameters even when they look
+ * like valid identifiers. Built from the spec's reserved word set plus the
+ * strict-mode-only reserved words (we always emit `'use strict'` in the
+ * generated function body) plus the two names — `arguments` and `eval` —
+ * that strict mode forbids in parameter position. Used by createSafeFunction
+ * to filter incoming context keys so a single bad name (`class`, `for`,
+ * `let`, …) doesn't crash the entire @if / {{ }} / safe-evaluation pipeline.
+ */
+const RESERVED_PARAM_NAMES = new Set([
+  // Reserved words (ES2015+)
+  'break', 'case', 'catch', 'class', 'const', 'continue', 'debugger',
+  'default', 'delete', 'do', 'else', 'enum', 'export', 'extends', 'false',
+  'finally', 'for', 'function', 'if', 'import', 'in', 'instanceof', 'new',
+  'null', 'return', 'super', 'switch', 'this', 'throw', 'true', 'try',
+  'typeof', 'var', 'void', 'while', 'with', 'yield',
+  // Strict-mode-reserved
+  'let', 'static', 'implements', 'interface', 'package', 'private',
+  'protected', 'public',
+  // Always banned in strict-mode parameter position
+  'arguments', 'eval',
+  // `await` is reserved inside async functions; we wrap the body in async
+  // semantics via try/catch in callers, so be conservative.
+  'await',
+])
+
 /**
  * Create a sandboxed function that can only access the provided context
  * This is a safer alternative to `new Function()` that validates expressions first
@@ -469,24 +495,34 @@ export function createSafeFunction(expression: string, contextKeys: string[]): (
   // Validate the expression first
   const sanitizedExpr = sanitizeExpression(expression)
 
-  // Drop context keys that aren't valid JS identifiers BEFORE handing them
-  // to `new Function(...keys, body)` — JS rejects param names like
-  // `passed-class`, `data-id`, `1bad`, `foo.bar` with "Unexpected token
-  // '-'" / "Unexpected number". Real templates regularly spread HTML-style
-  // kebab-case attribute keys into the evaluator (component prop bags,
-  // dataset entries, model rows with hyphenated columns); a single
-  // hyphenated key used to silently break every `@if` / `{{ }}` directive
-  // in the template. They can't be referenced from the expression anyway
-  // — JS has no syntax to read `passed-class` directly — so dropping is
-  // both safe and what callers expect.
+  // Drop context keys that JS rejects as function-parameter names BEFORE
+  // handing them to `new Function(...keys, body)`. Three classes of
+  // rejected names:
+  //
+  //  1. Non-identifiers: `passed-class`, `data-id`, `1bad`, `foo.bar`
+  //     ("Unexpected token '-'" / "Unexpected number").
+  //  2. Reserved words: `class`, `const`, `function`, `if`, `for`, …
+  //     ("Cannot use the keyword 'class' as a parameter name").
+  //  3. Strict-mode-reserved words: `let`, `static`, `implements`, …
+  //     (we always emit `'use strict'` in the function body).
+  //
+  // Real templates spread HTML-style attribute names into the evaluator
+  // constantly — Vue-/Tailwind-style components use `class`, `style`,
+  // `for`, `data-*`, `aria-*`, etc. as prop bag keys. A single offender
+  // used to crash every `@if` / `{{ }}` evaluation in the template; this
+  // filter makes the evaluator survive whatever the caller spreads in.
+  // Dropped keys can't be referenced from the expression anyway — JS has
+  // no syntax to read `class` or `passed-class` as identifiers in user
+  // code — so dropping is both safe and what callers expect.
   const validIdent = /^[A-Za-z_$][\w$]*$/
   const validIndices: number[] = []
   const filteredKeys: string[] = []
   for (let i = 0; i < contextKeys.length; i++) {
-    if (validIdent.test(contextKeys[i])) {
-      validIndices.push(i)
-      filteredKeys.push(contextKeys[i])
-    }
+    const key = contextKeys[i]
+    if (!validIdent.test(key)) continue
+    if (RESERVED_PARAM_NAMES.has(key)) continue
+    validIndices.push(i)
+    filteredKeys.push(key)
   }
 
   // Create the function with strict mode

packages/stx/test/utils/safe-function-context-filtering.test.ts

@@ -38,6 +38,37 @@ describe('createSafeFunction — context key filtering', () => {
     const fn = createSafeFunction('$x + _y', ['$x', '_y'])
     expect(fn(2, 3)).toBe(5)
   })
+
+  it('drops `class` (reserved word) — common HTML attribute name', () => {
+    const fn = createSafeFunction('disabled', ['disabled', 'class', 'for'])
+    expect(fn(true, 'btn-primary', 'email-input')).toBe(true)
+    expect(fn(false, 'btn-primary', 'email-input')).toBe(false)
+  })
+
+  it('drops every other reserved word that shows up as a context key', () => {
+    // A grab-bag of names that real templates use as bag keys but that
+    // JS rejects in parameter position.
+    const reservedKeys = ['if', 'for', 'class', 'new', 'this', 'super', 'let', 'const', 'return']
+    const allKeys = ['name', ...reservedKeys, 'count']
+    const fn = createSafeFunction('name + ":" + count', allKeys)
+    const values = ['ok', 1, 2, 3, 4, 5, 6, 7, 8, 9, 42]
+    expect(fn(...values)).toBe('ok:42')
+  })
+
+  it('drops `arguments` and `eval` (strict-mode-only reserved param names)', () => {
+    const fn = createSafeFunction('x', ['x', 'arguments', 'eval'])
+    expect(fn(7, [], () => 0)).toBe(7)
+  })
+
+  it('@if condition still evaluates when context has a `class` key (the real-world AppButton case)', () => {
+    const result = processConditionals(
+      '<button @if(disabled) disabled @endif>x</button>',
+      { disabled: true, class: 'btn-primary', for: 'email' },
+      'test.stx',
+    )
+    expect(result).not.toContain('If Error')
+    expect(result).toContain('disabled')
+  })
 })
 
 describe('processConditionals — robust to hyphenated context keys', () => {