safe-mdx 1.5.0 → 1.7.0

package/src/safe-mdx.test.tsx

@@ -1,11 +1,12 @@
 import dedent from 'dedent'
+import { generate } from 'escodegen'
 import React from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { expect, test } from 'vitest'
 import { z } from 'zod'
-import { mdxParse } from './parse.js'
-import { MdastToJsx, mdastBfs, type ComponentPropsSchema } from './safe-mdx.js'
-import { completeJsxTags } from './streaming.js'
+import { mdxParse } from './parse.ts'
+import { MdastToJsx, mdastBfs, type ComponentPropsSchema, type EvaluateOptions } from './safe-mdx.tsx'
+import { completeJsxTags } from './streaming.tsx'
 
 const components = {
     Heading({ level, children, ...props }) {
@@ -19,9 +20,9 @@ const components = {
     },
 }
 
-function render(code, componentPropsSchema?: ComponentPropsSchema, allowClientEsmImports?: boolean, addMarkdownLineNumbers?: boolean) {
+function render(code, componentPropsSchema?: ComponentPropsSchema, allowClientEsmImports?: boolean, addMarkdownLineNumbers?: boolean, scope?: Record<string, any>, evaluateOptions?: EvaluateOptions) {
     const mdast = mdxParse(code)
-    const visitor = new MdastToJsx({ markdown: code, mdast, components, componentPropsSchema, allowClientEsmImports, addMarkdownLineNumbers })
+    const visitor = new MdastToJsx({ markdown: code, mdast, components, componentPropsSchema, allowClientEsmImports, addMarkdownLineNumbers, scope, evaluateOptions })
     const result = visitor.run()
     const html = renderToStaticMarkup(result)
     // console.log(JSON.stringify(result, null, 2))
@@ -531,6 +532,7 @@ test('props parsing', () => {
           {
             "line": 9,
             "message": "Unsupported jsx component SomeComponent in attribute",
+            "type": "missing-component",
           },
           {
             "line": 9,
@@ -2297,8 +2299,8 @@ test('mdx jsx with unknown components are ignored', () => {
     
     // Check that errors were generated for unknown components
     expect(errors).toHaveLength(2)
-    expect(errors[0].message).toContain('Unsupported jsx component CustomElement')
-    expect(errors[1].message).toContain('Unsupported jsx component AnotherUnknown')
+    expect(errors[0]!.message).toContain('Unsupported jsx component CustomElement')
+    expect(errors[1]!.message).toContain('Unsupported jsx component AnotherUnknown')
     
     expect(result).toMatchInlineSnapshot(`
       <React.Fragment>
@@ -3053,12 +3055,12 @@ test('ESM imports error handling', () => {
     expect(visitor.errors.length).toBe(4)
     
     // First two errors are for invalid imports
-    expect(visitor.errors[0].message).toContain('Invalid import URL')
-    expect(visitor.errors[1].message).toContain('Invalid import URL')
+    expect(visitor.errors[0]!.message).toContain('Invalid import URL')
+    expect(visitor.errors[1]!.message).toContain('Invalid import URL')
     
     // Last two errors are for unsupported components
-    expect(visitor.errors[2].message).toContain('Unsupported jsx component Button')
-    expect(visitor.errors[3].message).toContain('Unsupported jsx component Component')
+    expect(visitor.errors[2]!.message).toContain('Unsupported jsx component Button')
+    expect(visitor.errors[3]!.message).toContain('Unsupported jsx component Component')
 })
 
 test('jsx components in attributes', () => {
@@ -3216,6 +3218,7 @@ test("jsx components in attributes error handling", () => {
         {
           "line": 3,
           "message": "Unsupported jsx component UnsupportedComponent in attribute",
+          "type": "missing-component",
         },
         {
           "line": 3,
@@ -3689,3 +3692,508 @@ test('modules prop: unresolved import produces error', () => {
       ]
     `)
 })
+
+test('modules prop: rendering a subset of mdast with import nodes prepended resolves components', () => {
+    // Simulates the pattern used by holocron: the full mdast is split into
+    // sections, and import nodes (mdxjsEsm) are prepended to each section's
+    // nodes so SafeMdxRenderer can resolve imported components.
+    function CustomHero({ title }: { title: string }) {
+        return <div data-testid="hero">{title}</div>
+    }
+
+    const code = dedent`
+        import { CustomHero } from './components/hero'
+
+        # Main content
+
+        <CustomHero title="Hello" />
+    `
+    const mdast = mdxParse(code)
+
+    // Split: extract import nodes and content nodes separately
+    const importNodes = mdast.children.filter((node) => node.type === 'mdxjsEsm')
+    const contentNodes = mdast.children.filter((node) => node.type !== 'mdxjsEsm')
+
+    // Render only content nodes WITH import nodes prepended
+    const syntheticRoot = { type: 'root' as const, children: [...importNodes, ...contentNodes] }
+    const visitor = new MdastToJsx({
+        markdown: code,
+        mdast: syntheticRoot,
+        components,
+        modules: {
+            './components/hero.tsx': { CustomHero },
+        },
+        baseUrl: './',
+    })
+    const result = visitor.run()
+    const html = renderToStaticMarkup(result)
+    expect(html).toContain('data-testid="hero"')
+    expect(html).toContain('Hello')
+    expect(visitor.errors).toMatchInlineSnapshot(`[]`)
+})
+
+test('modules prop: rendering subset WITHOUT import nodes fails to resolve components', () => {
+    // Demonstrates the bug: if import nodes are NOT prepended, the component
+    // is not found and a missing-component error is produced.
+    function CustomHero({ title }: { title: string }) {
+        return <div data-testid="hero">{title}</div>
+    }
+
+    const code = dedent`
+        import { CustomHero } from './components/hero'
+
+        <CustomHero title="Hello" />
+    `
+    const mdast = mdxParse(code)
+
+    // Only render the JSX node WITHOUT the import node
+    const contentNodes = mdast.children.filter((node) => node.type !== 'mdxjsEsm')
+    const syntheticRoot = { type: 'root' as const, children: contentNodes }
+    const visitor = new MdastToJsx({
+        markdown: code,
+        mdast: syntheticRoot,
+        components,
+        modules: {
+            './components/hero.tsx': { CustomHero },
+        },
+        baseUrl: './',
+    })
+    const result = visitor.run()
+    const html = renderToStaticMarkup(result)
+    // Without import nodes, the component is not resolved
+    expect(html).not.toContain('data-testid="hero"')
+    expect(visitor.errors).toMatchInlineSnapshot(`
+      [
+        {
+          "line": 3,
+          "message": "Unsupported jsx component CustomHero",
+          "type": "missing-component",
+        },
+      ]
+    `)
+})
+
+test('scope with function in jsx prop receiving object arg', () => {
+    const scope = {
+        formatTitle: (opts: { text: string; uppercase?: boolean }) => {
+            return opts.uppercase ? opts.text.toUpperCase() : opts.text
+        },
+    }
+
+    const code = dedent`
+        <Heading level={1} title={formatTitle({ text: "hello world", uppercase: true })}>Content</Heading>
+    `
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"<h1 title="HELLO WORLD">Content</h1>"`)
+})
+
+test('scope with variables and functions in inline expressions', () => {
+    const scope = {
+        greeting: 'Hello',
+        getName: (user: { first: string; last: string }) => `${user.first} ${user.last}`,
+    }
+
+    const code = dedent`
+        {greeting} {getName({ first: "John", last: "Doe" })}
+    `
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"HelloJohn Doe"`)
+})
+
+test('scope with function in spread attribute', () => {
+    const scope = {
+        getProps: (config: { level: number }) => ({ level: config.level }),
+    }
+
+    const code = dedent`
+        <Heading {...getProps({ level: 2 })}>Spread test</Heading>
+    `
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"<h1>Spread test</h1>"`)
+})
+
+test('scope with .map and arrow function callback works without generate (safe interpreter)', () => {
+    const scope = {
+        items: [{ name: 'Alice' }, { name: 'Bob' }, { name: 'Charlie' }],
+    }
+
+    const code = dedent`
+        {items.map(item => item.name).join(", ")}
+    `
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope)
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    expect(html).toMatchInlineSnapshot(`"Alice, Bob, Charlie"`)
+})
+
+test('scope with .map and arrow function callback works with generate', () => {
+    const scope = {
+        items: [{ name: 'Alice' }, { name: 'Bob' }, { name: 'Charlie' }],
+    }
+
+    const code = dedent`
+        {items.map(item => item.name).join(", ")}
+    `
+
+    const { html, errors } = render(code, undefined, undefined, undefined, scope, { 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"`)
+})