safe-mdx 1.5.0 → 1.7.0

package/src/safe-mdx.tsx

@@ -8,10 +8,10 @@ import type { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx-jsx'
 
 import { Fragment, ReactNode } from 'react'
 import { DynamicEsmComponent } from 'safe-mdx/client'
-import { extractComponentInfo, parseEsmImports } from './esm-parser.js'
-import { resolveModulePath, type EagerModules } from './parse.js'
-import { htmlToMdxAst } from './html/html-to-mdx-ast.js'
-import { validHtmlElements, nativeTags } from './html/valid-html-elements.js'
+import { extractComponentInfo, parseEsmImports } from './esm-parser.ts'
+import { resolveModulePath, type EagerModules } from './parse.ts'
+import { htmlToMdxAst } from './html/html-to-mdx-ast.ts'
+import { validHtmlElements, nativeTags } from './html/valid-html-elements.ts'
 
 export type MyRootContent = RootContent | Root
 
@@ -46,6 +46,18 @@ export type CreateElementFunction = (
     ...children: ReactNode[]
 ) => ReactNode
 
+export interface EvaluateOptions {
+    /** Enable function calls in expressions. Automatically enabled when `scope` is provided. */
+    functions?: boolean
+    /** Pass `escodegen.generate` to support inline function expressions
+     *  like arrow functions in `.map(x => x.name)`. Requires `functions: true`. */
+    generate?: (ast: any) => string
+    /** Force logical operators (`&&`, `||`) to return booleans. */
+    booleanLogicalOperators?: boolean
+    /** Throw when variables referenced in expressions are undefined. */
+    strict?: boolean
+}
+
 export const SafeMdxRenderer = React.memo(function SafeMdxRenderer({
     components,
     markdown = '',
@@ -58,6 +70,8 @@ export const SafeMdxRenderer = React.memo(function SafeMdxRenderer({
     modules,
     baseUrl,
     onError,
+    scope,
+    evaluateOptions,
 }: {
     components?: ComponentsMap
     markdown?: string
@@ -77,6 +91,15 @@ export const SafeMdxRenderer = React.memo(function SafeMdxRenderer({
     /** Called for each error during rendering (missing components, invalid props, failed expressions).
      *  Throw inside this callback to stop rendering on first error. */
     onError?: (error: SafeMdxError) => void
+    /** Variables and functions available in MDX expressions.
+     *  When scope contains functions, function calls in expressions are
+     *  automatically enabled. */
+    scope?: Record<string, any>
+    /** Options passed to `eval-estree-expression` for expression evaluation.
+     *  Pass `{ functions: true }` to enable function calls, or
+     *  `{ functions: true, generate: escodegen.generate }` to also support
+     *  inline arrow functions and callbacks like `.map(x => x.name)`. */
+    evaluateOptions?: EvaluateOptions
 }) {
     const visitor = new MdastToJsx({
         markdown,
@@ -90,6 +113,8 @@ export const SafeMdxRenderer = React.memo(function SafeMdxRenderer({
         modules,
         baseUrl,
         onError,
+        scope,
+        evaluateOptions,
     })
     const result = visitor.run()
     return result
@@ -110,6 +135,8 @@ export class MdastToJsx {
     modules?: EagerModules
     baseUrl?: string
     onError?: (error: SafeMdxError) => void
+    scope?: Record<string, any>
+    evaluateOptions?: EvaluateOptions
 
     constructor({
         markdown: code = '',
@@ -123,6 +150,8 @@ export class MdastToJsx {
         modules,
         baseUrl,
         onError,
+        scope,
+        evaluateOptions,
     }: {
         markdown?: string
         mdast: MyRootContent
@@ -140,6 +169,15 @@ export class MdastToJsx {
         /** Called for each error during rendering (missing components, invalid props, failed expressions).
          *  Throw inside this callback to stop rendering on first error. */
         onError?: (error: SafeMdxError) => void
+        /** Variables and functions available in MDX expressions.
+         *  When scope contains functions, function calls in expressions are
+         *  automatically enabled. */
+        scope?: Record<string, any>
+        /** Options passed to `eval-estree-expression` for expression evaluation.
+         *  Pass `{ functions: true }` to enable function calls, or
+         *  `{ functions: true, generate: escodegen.generate }` to also support
+         *  inline arrow functions and callbacks like `.map(x => x.name)`. */
+        evaluateOptions?: EvaluateOptions
     }) {
         this.str = code
 
@@ -158,6 +196,8 @@ export class MdastToJsx {
         this.modules = modules
         this.baseUrl = baseUrl
         this.onError = onError
+        this.scope = scope
+        this.evaluateOptions = evaluateOptions
 
         this.c = {
             ...Object.fromEntries(
@@ -488,6 +528,28 @@ export class MdastToJsx {
         return null
     }
 
+    evaluateExpression(expression: any) {
+        const hasScope = this.scope && Object.keys(this.scope).length > 0
+        const context = hasScope ? this.scope : undefined
+        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)
+    }
+
     getJsxAttrs(
         node: MdxJsxFlowElement | MdxJsxTextElement,
         onError: (err: SafeMdxError) => void = console.error,
@@ -500,14 +562,15 @@ export class MdastToJsx {
                 if (attr.data?.estree) {
                     try {
                         const program = attr.data.estree
+                        const firstBody = program.body?.[0]
                         if (
-                            program.body?.length > 0 &&
-                            program.body[0].type === 'ExpressionStatement'
+                            firstBody &&
+                            firstBody.type === 'ExpressionStatement'
                         ) {
-                            const expression = program.body[0].expression
+                            const expression = firstBody.expression
                             try {
                                 const result =
-                                    Evaluate.evaluate.sync(expression)
+                                    this.evaluateExpression(expression)
 
                                 // Handle spread syntax - merge the evaluated object
                                 if (
@@ -597,11 +660,12 @@ export class MdastToJsx {
                     try {
                         // Extract the expression from the Program body
                         const program = v.data.estree
+                        const firstBody = program.body?.[0]
                         if (
-                            program.body?.length > 0 &&
-                            program.body[0].type === 'ExpressionStatement'
+                            firstBody &&
+                            firstBody.type === 'ExpressionStatement'
                         ) {
-                            const expression = program.body[0].expression
+                            const expression = firstBody.expression
 
                             // Check if this is a JSX element
                             if (expression.type === 'JSXElement') {
@@ -620,7 +684,7 @@ export class MdastToJsx {
                             try {
                                 // Evaluate the expression synchronously
                                 const result =
-                                    Evaluate.evaluate.sync(expression)
+                                    this.evaluateExpression(expression)
                                 attrsList.push([attr.name, result])
                                 continue
                             } catch (error) {
@@ -653,7 +717,7 @@ export class MdastToJsx {
     }
 
     run() {
-        const res = this.mdastTransformer(this.mdast, 'root') as ReactNode
+        const res = this.mdastTransformer(this.mdast, 'root')
         if (Array.isArray(res) && res.length === 1) {
             return res[0]
         }
@@ -669,7 +733,7 @@ export class MdastToJsx {
         if (this.renderNode) {
             const customResult = this.renderNode(
                 node,
-                (n: MyRootContent) => this.mdastTransformer(n, node.type),
+                (n) => this.mdastTransformer(n, node.type),
             )
             if (customResult !== undefined) {
                 return customResult
@@ -723,15 +787,16 @@ export class MdastToJsx {
                     try {
                         // Extract the expression from the Program body
                         const program = node.data.estree
+                        const firstBody = program.body?.[0]
                         if (
-                            program.body?.length > 0 &&
-                            program.body[0].type === 'ExpressionStatement'
+                            firstBody &&
+                            firstBody.type === 'ExpressionStatement'
                         ) {
-                            const expression = program.body[0].expression
+                            const expression = firstBody.expression
                             try {
                                 // Evaluate the expression synchronously
                                 const result =
-                                    Evaluate.evaluate.sync(expression)
+                                    this.evaluateExpression(expression)
                                 return result
                             } catch (error) {
                                 this.pushError({
@@ -1060,9 +1125,6 @@ export class MdastToJsx {
     }
 }
 
-function isTruthy<T>(val: T | undefined | null | false): val is T {
-    return Boolean(val)
-}
 
 function accessWithDot(obj, path: string) {
     return path
@@ -1093,14 +1155,239 @@ export function mdastBfs(
     return result
 }
 
-function safeJsonParse(str: string) {
-    try {
-        return JSON.parse(str)
-    } catch (err) {
-        return null
+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
+            }
+        }
     }
 }
 
-type ComponentsMap = { [k in (typeof nativeTags)[number]]?: any } & {
-    [key: string]: any
+// 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,
+    }
 }

package/src/streaming.tsx

@@ -13,6 +13,7 @@ function matchJsxTag(code: string) {
     }
 
     const [fullMatch, tagName, attributes, selfClosing] = match
+    if (!tagName) return null
 
     const type = selfClosing
         ? 'self-closing'
@@ -24,7 +25,7 @@ function matchJsxTag(code: string) {
         tag: fullMatch,
         tagName,
         type,
-        attributes: attributes.trim(),
+        attributes: (attributes ?? '').trim(),
         startIndex: match.index,
         endIndex: match.index + fullMatch.length,
     }