safe-mdx 1.6.0 → 1.7.0

package/src/safe-mdx.test.tsx

@@ -3818,7 +3818,7 @@ test('scope with function in spread attribute', () => {
     expect(html).toMatchInlineSnapshot(`"<h1>Spread test</h1>"`)
 })
 
-test('scope with .map and arrow function callback fails without generate', () => {
+test('scope with .map and arrow function callback works without generate (safe interpreter)', () => {
     const scope = {
         items: [{ name: 'Alice' }, { name: 'Bob' }, { name: 'Charlie' }],
     }
@@ -3828,16 +3828,8 @@ test('scope with .map and arrow function callback fails without generate', () =>
     `
 
     const { html, errors } = render(code, undefined, undefined, undefined, scope)
-    expect(errors).toMatchInlineSnapshot(`
-      [
-        {
-          "line": 1,
-          "message": "Failed to evaluate expression: items.map(item => item.name).join(", "). Expected options.generate to be the "generate" function from "escodegen"",
-          "type": "expression",
-        },
-      ]
-    `)
-    expect(html).toMatchInlineSnapshot(`""`)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"Alice, Bob, Charlie"`)
 })
 
 test('scope with .map and arrow function callback works with generate', () => {
@@ -3853,3 +3845,355 @@ test('scope with .map and arrow function callback works with generate', () => {
     expect(errors).toMatchInlineSnapshot(`[]`)
     expect(html).toMatchInlineSnapshot(`"Alice, Bob, Charlie"`)
 })
+
+test('safe interpreter: arrow with block body and return', () => {
+    const scope = {
+        items: [1, 2, 3],
+    }
+
+    const code = dedent`
+        {items.map(x => { return x * 2 }).join(", ")}
+    `
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"2, 4, 6"`)
+})
+
+test('safe interpreter: arrow with multiple params', () => {
+    const scope = {
+        items: ['a', 'b', 'c'],
+    }
+
+    const code = dedent`
+        {items.map((item, i) => i + ":" + item).join(", ")}
+    `
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"0:a, 1:b, 2:c"`)
+})
+
+test('safe interpreter: arrow with object destructuring', () => {
+    const scope = {
+        items: [
+            { name: 'Alice', age: 30 },
+            { name: 'Bob', age: 25 },
+        ],
+    }
+
+    const code = dedent`
+        {items.map(({ name, age }) => name + "(" + age + ")").join(", ")}
+    `
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"Alice(30), Bob(25)"`)
+})
+
+test('safe interpreter: arrow with ternary expression', () => {
+    const scope = {
+        items: [
+            { name: 'Alice', active: true },
+            { name: 'Bob', active: false },
+        ],
+    }
+
+    const code = dedent`
+        {items.map(item => item.active ? item.name : "inactive").join(", ")}
+    `
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"Alice, inactive"`)
+})
+
+test('safe interpreter: .filter with arrow function', () => {
+    const scope = {
+        items: [1, 2, 3, 4, 5, 6],
+    }
+
+    const code = dedent`
+        {items.filter(x => x > 3).join(", ")}
+    `
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"4, 5, 6"`)
+})
+
+test('safe interpreter: .reduce with arrow function', () => {
+    const scope = {
+        items: [1, 2, 3, 4],
+    }
+
+    const code = dedent`
+        {items.reduce((acc, x) => acc + x, 0)}
+    `
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"10"`)
+})
+
+test('safe interpreter: chained .filter.map', () => {
+    const scope = {
+        users: [
+            { name: 'Alice', role: 'admin' },
+            { name: 'Bob', role: 'user' },
+            { name: 'Charlie', role: 'admin' },
+        ],
+    }
+
+    const code = dedent`
+        {users.filter(u => u.role === "admin").map(u => u.name).join(", ")}
+    `
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"Alice, Charlie"`)
+})
+
+test('safe interpreter: .find with arrow function', () => {
+    const scope = {
+        items: [
+            { id: 1, name: 'Alice' },
+            { id: 2, name: 'Bob' },
+        ],
+    }
+
+    const code = dedent`
+        {items.find(item => item.id === 2).name}
+    `
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"Bob"`)
+})
+
+test('safe interpreter: .some and .every with arrow functions', () => {
+    const scope = {
+        nums: [2, 4, 6],
+    }
+
+    const code = dedent`
+        {nums.every(n => n > 0) ? "all positive" : "nope"}
+    `
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"all positive"`)
+})
+
+test('safe interpreter: nested arrow functions', () => {
+    const scope = {
+        matrix: [[1, 2], [3, 4], [5, 6]],
+    }
+
+    const code = dedent`
+        {matrix.map(row => row.map(x => x * 10).join("-")).join(", ")}
+    `
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"10-20, 30-40, 50-60"`)
+})
+
+test('safe interpreter: arrow accessing outer scope variables', () => {
+    const scope = {
+        items: [1, 2, 3],
+        multiplier: 5,
+    }
+
+    const code = dedent`
+        {items.map(x => x * multiplier).join(", ")}
+    `
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"5, 10, 15"`)
+})
+
+test('safe interpreter: arrow with block body and variable declaration', () => {
+    const scope = {
+        items: [{ first: 'John', last: 'Doe' }, { first: 'Jane', last: 'Smith' }],
+    }
+
+    const code = dedent`
+        {items.map(item => { const full = item.first + " " + item.last; return full }).join(", ")}
+    `
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"John Doe, Jane Smith"`)
+})
+
+test('safe interpreter: arrow with if/else in block body', () => {
+    const scope = {
+        items: [1, 2, 3, 4, 5],
+    }
+
+    const code = dedent`
+        {items.map(x => { if (x > 3) { return "big" } else { return "small" } }).join(", ")}
+    `
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"small, small, small, big, big"`)
+})
+
+test('safe interpreter: .sort with comparator arrow', () => {
+    const scope = {
+        items: [3, 1, 4, 1, 5],
+    }
+
+    const code = dedent`
+        {items.sort((a, b) => a - b).join(", ")}
+    `
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"1, 1, 3, 4, 5"`)
+})
+
+test('safe interpreter: arrow in JSX attribute', () => {
+    const scope = {
+        items: [{ name: 'Alice' }, { name: 'Bob' }],
+    }
+
+    const code = dedent`
+        <Heading level={items.map(i => i.name).join(", ")}>Title</Heading>
+    `
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"<h1>Title</h1>"`)
+})
+
+test('safe interpreter: arrow with array destructuring', () => {
+    const scope = {
+        pairs: [['a', 1], ['b', 2], ['c', 3]],
+    }
+
+    const code = dedent`
+        {pairs.map(([letter, num]) => letter + num).join(", ")}
+    `
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"a1, b2, c3"`)
+})
+
+test('safe interpreter: calling scope functions inside arrow callback', () => {
+    const scope = {
+        items: [{ name: 'alice' }, { name: 'bob' }],
+        formatName: (s: string) => s.toUpperCase(),
+    }
+
+    const code = dedent`
+        {items.map(item => formatName(item.name)).join(", ")}
+    `
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"ALICE, BOB"`)
+})
+
+test('safe interpreter: calling scope function with multiple args inside arrow', () => {
+    const scope = {
+        items: [1, 2, 3],
+        add: (a: number, b: number) => a + b,
+        base: 10,
+    }
+
+    const code = dedent`
+        {items.map(x => add(x, base)).join(", ")}
+    `
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"11, 12, 13"`)
+})
+
+test('safe interpreter: scope function returning object used in arrow', () => {
+    const scope = {
+        ids: [1, 2, 3],
+        getUser: (id: number) => ({ id, name: 'User' + id }),
+    }
+
+    const code = dedent`
+        {ids.map(id => getUser(id).name).join(", ")}
+    `
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"User1, User2, User3"`)
+})
+
+test('safe interpreter: arrow with default parameter', () => {
+    const scope = {
+        items: [undefined, 'hello', undefined],
+        fallback: 'default',
+    }
+
+    const code = dedent`
+        {items.map((x = fallback) => x).join(", ")}
+    `
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"default, hello, default"`)
+})
+
+test('scope with template literal in expression', () => {
+    const scope = {
+        name: 'World',
+        count: 3,
+    }
+
+    const code = dedent`
+        {${'`'}Hello ${'${'}name${'}'}, you have ${'${'}count${'}'} items${'`'}}
+    `
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"Hello World, you have 3 items"`)
+})
+
+test('scope with tagged template literal function', () => {
+    const myTag = (strings: TemplateStringsArray, ...values: any[]) => {
+        return strings.reduce((result, str, i) => {
+            return result + str + (values[i] !== undefined ? String(values[i]).toUpperCase() : '')
+        }, '')
+    }
+
+    const scope = {
+        myTag,
+        name: 'world',
+    }
+
+    const code = `{myTag${'`'}hello ${'${'}name${'}'}${'`'}}`
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope, { generate })
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"hello WORLD"`)
+})
+
+test('scope with tagged template literal without generate', () => {
+    const myTag = (strings: TemplateStringsArray, ...values: any[]) => {
+        return strings.reduce((result, str, i) => {
+            return result + str + (values[i] !== undefined ? String(values[i]).toUpperCase() : '')
+        }, '')
+    }
+
+    const scope = {
+        myTag,
+        name: 'world',
+    }
+
+    const code = `{myTag${'`'}hello ${'${'}name${'}'}${'`'}}`
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"hello WORLD"`)
+})

package/src/safe-mdx.tsx

@@ -534,6 +534,19 @@ export class MdastToJsx {
         const options = hasScope || this.evaluateOptions
             ? { ...(hasScope ? { functions: true } : {}), ...this.evaluateOptions }
             : undefined
+
+        // When functions are enabled and the user hasn't provided their own
+        // `generate` (escodegen), inject our safe AST-interpreting visitors
+        // that handle ArrowFunctionExpression and FunctionExpression without
+        // using `new Function()` or `eval()`. This makes arrow function
+        // callbacks like `.map(x => x.name)` work in Cloudflare Workers.
+        if (options && options.functions && !options.generate) {
+            ;(options as any).visitors = {
+                ...(options as any).visitors,
+                ...createSafeFunctionVisitors(),
+            }
+        }
+
         return Evaluate.evaluate.sync(expression, context, options)
     }
 
@@ -1145,3 +1158,236 @@ export function mdastBfs(
 type ComponentsMap = { [k in (typeof nativeTags)[number]]?: any } & {
     [key: string]: any
 }
+
+/**
+ * Bind function parameters to argument values, handling Identifier,
+ * ObjectPattern, ArrayPattern, RestElement, and AssignmentPattern nodes.
+ * Writes bindings into `ctx` in place.
+ */
+function bindParams(
+    params: any[],
+    args: any[],
+    ctx: Record<string, any>,
+    visit: (node: any, context: any, parent?: any) => any,
+) {
+    for (let i = 0; i < params.length; i++) {
+        const param = params[i]
+        switch (param.type) {
+            case 'Identifier':
+                ctx[param.name] = args[i]
+                break
+            case 'RestElement':
+                if (param.argument.type === 'Identifier') {
+                    ctx[param.argument.name] = args.slice(i)
+                }
+                break
+            case 'AssignmentPattern': {
+                const val =
+                    args[i] !== undefined
+                        ? args[i]
+                        : visit(param.right, ctx, param)
+                if (param.left.type === 'Identifier') {
+                    ctx[param.left.name] = val
+                }
+                break
+            }
+            case 'ObjectPattern': {
+                const obj = args[i] || {}
+                for (const prop of param.properties) {
+                    if (prop.type === 'RestElement') {
+                        const used = new Set(
+                            param.properties
+                                .filter((p: any) => p !== prop)
+                                .map(
+                                    (p: any) =>
+                                        p.key?.name ?? p.key?.value,
+                                ),
+                        )
+                        const rest: Record<string, any> = {}
+                        for (const key of Object.keys(obj)) {
+                            if (!used.has(key)) rest[key] = obj[key]
+                        }
+                        if (prop.argument.type === 'Identifier') {
+                            ctx[prop.argument.name] = rest
+                        }
+                    } else {
+                        const key =
+                            prop.key.type === 'Identifier'
+                                ? prop.key.name
+                                : prop.key.value
+                        if (prop.value.type === 'Identifier') {
+                            ctx[prop.value.name] = obj[key]
+                        } else if (
+                            prop.value.type === 'AssignmentPattern'
+                        ) {
+                            const val =
+                                obj[key] !== undefined
+                                    ? obj[key]
+                                    : visit(
+                                          prop.value.right,
+                                          ctx,
+                                          prop.value,
+                                      )
+                            if (
+                                prop.value.left.type === 'Identifier'
+                            ) {
+                                ctx[prop.value.left.name] = val
+                            }
+                        }
+                    }
+                }
+                break
+            }
+            case 'ArrayPattern': {
+                const arr = args[i] || []
+                for (let j = 0; j < param.elements.length; j++) {
+                    const elem = param.elements[j]
+                    if (!elem) continue
+                    if (elem.type === 'Identifier') {
+                        ctx[elem.name] = arr[j]
+                    } else if (
+                        elem.type === 'RestElement' &&
+                        elem.argument.type === 'Identifier'
+                    ) {
+                        ctx[elem.argument.name] = arr.slice(j)
+                    }
+                }
+                break
+            }
+        }
+    }
+}
+
+// Sentinel value to signal a return from inside a block body
+const RETURN_SENTINEL = Symbol('return')
+
+/**
+ * Execute a block statement body (array of statements) using the
+ * eval-estree-expression visitor's `this.visit`. Returns the value
+ * from the first ReturnStatement encountered, or undefined.
+ */
+function executeBlockBody(
+    body: any[],
+    ctx: Record<string, any>,
+    visit: (node: any, context: any, parent?: any) => any,
+    parentNode: any,
+): any {
+    for (const stmt of body) {
+        switch (stmt.type) {
+            case 'ReturnStatement':
+                return stmt.argument
+                    ? visit(stmt.argument, ctx, stmt)
+                    : undefined
+            case 'ExpressionStatement':
+                visit(stmt.expression, ctx, stmt)
+                break
+            case 'VariableDeclaration':
+                for (const decl of stmt.declarations) {
+                    const value = decl.init
+                        ? visit(decl.init, ctx, decl)
+                        : undefined
+                    if (decl.id.type === 'Identifier') {
+                        ctx[decl.id.name] = value
+                    }
+                }
+                break
+            case 'IfStatement': {
+                const test = visit(stmt.test, ctx, stmt)
+                if (test) {
+                    if (stmt.consequent.type === 'BlockStatement') {
+                        const result = executeBlockBody(
+                            stmt.consequent.body,
+                            ctx,
+                            visit,
+                            stmt,
+                        )
+                        if (result !== undefined) return result
+                    } else if (
+                        stmt.consequent.type === 'ReturnStatement'
+                    ) {
+                        return stmt.consequent.argument
+                            ? visit(
+                                  stmt.consequent.argument,
+                                  ctx,
+                                  stmt.consequent,
+                              )
+                            : undefined
+                    } else {
+                        visit(stmt.consequent, ctx, stmt)
+                    }
+                } else if (stmt.alternate) {
+                    if (stmt.alternate.type === 'BlockStatement') {
+                        const result = executeBlockBody(
+                            stmt.alternate.body,
+                            ctx,
+                            visit,
+                            stmt,
+                        )
+                        if (result !== undefined) return result
+                    } else if (
+                        stmt.alternate.type === 'ReturnStatement'
+                    ) {
+                        return stmt.alternate.argument
+                            ? visit(
+                                  stmt.alternate.argument,
+                                  ctx,
+                                  stmt.alternate,
+                              )
+                            : undefined
+                    } else {
+                        visit(stmt.alternate, ctx, stmt)
+                    }
+                }
+                break
+            }
+        }
+    }
+    return undefined
+}
+
+/**
+ * Custom visitors for eval-estree-expression that interpret arrow functions
+ * and function expressions by walking the AST recursively, without using
+ * `new Function()` or `eval()`. This makes them safe for Cloudflare Workers
+ * and other edge runtimes that block dynamic code evaluation.
+ *
+ * The visitors are called with `this` bound to the Expression evaluator
+ * instance, giving access to `this.visit()` for recursive evaluation.
+ */
+export function createSafeFunctionVisitors() {
+    // Using a regular function (not arrow) so `this` is the Expression instance
+    function functionExpressionVisitor(
+        this: any,
+        node: any,
+        context: any,
+    ) {
+        const self = this
+        return function (this: any, ...args: any[]) {
+            const newContext = { ...context }
+            bindParams(node.params, args, newContext, (n, ctx, p) =>
+                self.visit(n, ctx, p),
+            )
+
+            if (
+                node.expression ||
+                node.body.type !== 'BlockStatement'
+            ) {
+                // Expression body: x => x.name
+                return self.visit(node.body, newContext, node)
+            }
+
+            // Block body: x => { ... return ... }
+            return executeBlockBody(
+                node.body.body,
+                newContext,
+                (n, ctx, p) => self.visit(n, ctx, p),
+                node,
+            )
+        }
+    }
+
+    return {
+        ArrowFunctionExpression: functionExpressionVisitor,
+        FunctionExpression: functionExpressionVisitor,
+    }
+}