safe-mdx 1.1.0 → 1.2.0

package/src/safe-mdx.test.tsx

@@ -17,9 +17,9 @@ const components = {
     },
 }
 
-function render(code, componentPropsSchema?: ComponentPropsSchema) {
+function render(code, componentPropsSchema?: ComponentPropsSchema, allowClientEsmImports?: boolean) {
     const mdast = mdxParse(code)
-    const visitor = new MdastToJsx({ markdown: code, mdast, components, componentPropsSchema })
+    const visitor = new MdastToJsx({ markdown: code, mdast, components, componentPropsSchema, allowClientEsmImports })
     const result = visitor.run()
     const html = renderToStaticMarkup(result)
     // console.log(JSON.stringify(result, null, 2))
@@ -37,6 +37,20 @@ test('htmlToJsx', () => {
     )
 })
 
+test('reference links with titles', () => {
+    const code = dedent`
+    > **Heads-up:** Check the [API docs][1] for more info.
+
+    Visit [Slack developers][2] for details.
+
+    [1]: https://api.slack.com/methods/search.messages "search.messages method - Slack API"
+    [2]: https://slack.dev/secure-data-connectivity/ "Secure Data Connectivity - Slack Developers"
+    `
+    
+    const { html } = render(code)
+    expect(html).toMatchInlineSnapshot(`"<blockquote><p><strong>Heads-up:</strong> Check the <a href="https://api.slack.com/methods/search.messages" title="search.messages method - Slack API">API docs</a> for more info.</p></blockquote><p>Visit <a href="https://slack.dev/secure-data-connectivity/" title="Secure Data Connectivity - Slack Developers">Slack developers</a> for details.</p>"`)
+})
+
 test('markdown inside jsx', () => {
     const code = dedent`
     # Hello
@@ -512,36 +526,42 @@ test('props parsing', () => {
       {
         "errors": [
           {
-            "line": 7,
-            "message": "Expressions in jsx props are not supported (expression1={1 + 3})",
+            "line": 8,
+            "message": "Failed to evaluate expression attribute: expression2={Boolean(1)}",
           },
           {
             "line": 8,
-            "message": "Expressions in jsx props are not supported (expression2={Boolean(1)})",
+            "message": "Expressions in jsx prop not evaluated: (expression2={Boolean(1)})",
+          },
+          {
+            "line": 9,
+            "message": "Unsupported jsx component SomeComponent in attribute",
           },
           {
             "line": 9,
-            "message": "Expressions in jsx props are not supported (jsx={<SomeComponent />})",
+            "message": "Failed to evaluate expression attribute: jsx={<SomeComponent />}",
           },
           {
-            "line": 13,
-            "message": "Expressions in jsx props are not supported (...{ spread: true })",
+            "line": 9,
+            "message": "Expressions in jsx prop not evaluated: (jsx={<SomeComponent />})",
           },
         ],
         "html": "<h1><p>hi</p></h1>",
         "result": <React.Fragment>
           <Heading
-            backTick="some \${expr} value"
+            backTick="some undefined value"
             boolean={false}
             doublequote="a " string"
+            expression1={4}
             null={null}
             num={2}
-            quote="a " string"
+            quote="a ' string"
             someJson={
               {
                 "a": 1,
               }
             }
+            spread={true}
           >
             <p>
               hi
@@ -551,6 +571,132 @@ test('props parsing', () => {
       }
     `)
 })
+
+test('jsx attributes with arithmetic expressions', () => {
+    expect(
+        render(dedent`
+        <Heading 
+            level={1 + 2}
+            width={100 * 2}
+            active={!false}
+            comparison={5 > 3}
+            concat={"hello " + "world"}
+        />
+        `),
+    ).toMatchInlineSnapshot(`
+      {
+        "errors": [],
+        "html": "<h1></h1>",
+        "result": <React.Fragment>
+          <Heading
+            active={true}
+            comparison={true}
+            concat="hello world"
+            level={3}
+            width={200}
+          />
+        </React.Fragment>,
+      }
+    `)
+})
+
+test('jsx attributes with complex objects and arrays', () => {
+    expect(
+        render(dedent`
+        <Heading 
+            simpleArray={[1, 2, 3]}
+            stringArray={["one", "two", "three"]}
+            mixedArray={[1, "two", true, null]}
+            simpleObject={{name: "John", age: 30}}
+            nestedObject={{
+                user: {
+                    name: "Alice",
+                    preferences: {
+                        theme: "dark",
+                        lang: "en"
+                    }
+                },
+                settings: {
+                    notifications: true,
+                    emails: ["alice@example.com", "alice.work@example.com"]
+                }
+            }}
+            arrayOfObjects={[
+                {id: 1, name: "Item 1"},
+                {id: 2, name: "Item 2"}
+            ]}
+        />
+        `),
+    ).toMatchInlineSnapshot(`
+      {
+        "errors": [],
+        "html": "<h1></h1>",
+        "result": <React.Fragment>
+          <Heading
+            arrayOfObjects={
+              [
+                {
+                  "id": 1,
+                  "name": "Item 1",
+                },
+                {
+                  "id": 2,
+                  "name": "Item 2",
+                },
+              ]
+            }
+            mixedArray={
+              [
+                1,
+                "two",
+                true,
+                null,
+              ]
+            }
+            nestedObject={
+              {
+                "settings": {
+                  "emails": [
+                    "alice@example.com",
+                    "alice.work@example.com",
+                  ],
+                  "notifications": true,
+                },
+                "user": {
+                  "name": "Alice",
+                  "preferences": {
+                    "lang": "en",
+                    "theme": "dark",
+                  },
+                },
+              }
+            }
+            simpleArray={
+              [
+                1,
+                2,
+                3,
+              ]
+            }
+            simpleObject={
+              {
+                "age": 30,
+                "name": "John",
+              }
+            }
+            stringArray={
+              [
+                "one",
+                "two",
+                "three",
+              ]
+            }
+          />
+        </React.Fragment>,
+      }
+    `)
+})
+
 test('breaks', () => {
     expect(
         render(dedent`
@@ -1047,7 +1193,7 @@ test('kitchen sink', () => {
 
       [arbitrary case-insensitive reference text]: https://www.mozilla.org
       [1]: http://slashdot.org
-      [link text itself]: http://www.reddit.com</code></pre><p><a href="https://www.google.com" title="">I&#x27;m an inline-style link</a></p><p><a href="https://www.google.com" title="Google&#x27;s Homepage">I&#x27;m an inline-style link with title</a></p><p><a href="https://www.mozilla.org">I&#x27;m a reference-style link</a></p><p><a href="../blob/master/LICENSE" title="">I&#x27;m a relative reference to a repository file</a></p><p><a href="http://slashdot.org">You can use numbers for reference-style link definitions</a></p><p>Or leave it empty and use the <a href="http://www.reddit.com">link text itself</a>.</p><p>URLs and URLs in angle brackets will automatically get turned into links.
+      [link text itself]: http://www.reddit.com</code></pre><p><a href="https://www.google.com" title="">I&#x27;m an inline-style link</a></p><p><a href="https://www.google.com" title="Google&#x27;s Homepage">I&#x27;m an inline-style link with title</a></p><p><a href="https://www.mozilla.org" title="">I&#x27;m a reference-style link</a></p><p><a href="../blob/master/LICENSE" title="">I&#x27;m a relative reference to a repository file</a></p><p><a href="http://slashdot.org" title="">You can use numbers for reference-style link definitions</a></p><p>Or leave it empty and use the <a href="http://www.reddit.com" title="">link text itself</a>.</p><p>URLs and URLs in angle brackets will automatically get turned into links.
       <a href="http://www.example.com" title="">http://www.example.com</a> and sometimes
       example.com (but not on Github, for example).</p><p>Some text to show that the reference links can follow later.</p><a name="images"></a><h2>Images</h2><pre><code class="language-no-highlight">Here&#x27;s our logo (hover to see the title text):
 
@@ -1546,6 +1692,7 @@ test('kitchen sink', () => {
           <p>
             <a
               href="https://www.mozilla.org"
+              title=""
             >
               I'm a reference-style link
             </a>
@@ -1561,6 +1708,7 @@ test('kitchen sink', () => {
           <p>
             <a
               href="http://slashdot.org"
+              title=""
             >
               You can use numbers for reference-style link definitions
             </a>
@@ -1569,6 +1717,7 @@ test('kitchen sink', () => {
             Or leave it empty and use the 
             <a
               href="http://www.reddit.com"
+              title=""
             >
               link text itself
             </a>
@@ -2377,6 +2526,82 @@ test('component props schema validation with zod', () => {
     `)
 })
 
+test('mdx expressions evaluation', () => {
+    expect(
+        render(dedent`
+        # Expression Test
+
+        Simple math: {1 + 2}
+
+        <Heading>
+        Inside JSX: {3 * 4}
+        </Heading>
+
+        Boolean: {true}
+        String concat: {"hello" + " world"}
+        `),
+    ).toMatchInlineSnapshot(`
+      {
+        "errors": [],
+        "html": "<h1>Expression Test</h1><p>Simple math: 3</p><h1><p>Inside JSX: 12</p></h1><p>Boolean: 
+      String concat: hello world</p>",
+        "result": <React.Fragment>
+          <h1>
+            Expression Test
+          </h1>
+          <p>
+            Simple math: 
+            3
+          </p>
+          <Heading>
+            <p>
+              Inside JSX: 
+              12
+            </p>
+          </Heading>
+          <p>
+            Boolean: 
+            true
+            
+      String concat: 
+            hello world
+          </p>
+        </React.Fragment>,
+      }
+    `)
+})
+
+test('mdx expressions with unsupported functions', () => {
+    expect(
+        render(dedent`
+        Math function: {Math.max(5, 10)}
+        Console: {console.log("test")}
+        `),
+    ).toMatchInlineSnapshot(`
+      {
+        "errors": [
+          {
+            "line": 1,
+            "message": "Failed to evaluate expression: Math.max(5, 10)",
+          },
+          {
+            "line": 2,
+            "message": "Failed to evaluate expression: console.log("test")",
+          },
+        ],
+        "html": "<p>Math function: 
+      Console: </p>",
+        "result": <React.Fragment>
+          <p>
+            Math function: 
+            
+      Console: 
+          </p>
+        </React.Fragment>,
+      }
+    `)
+})
+
 test('schema validation without errors', () => {
     const HeadingSchema = z.object({
         level: z.number().min(1).max(6),
@@ -2471,29 +2696,428 @@ test('validation error includes schema path', () => {
         "errors": [
           {
             "line": 1,
-            "message": "Expressions in jsx props are not supported (user={{ name: "test", age: -1 }})",
+            "message": "Invalid props for component "Heading" at "user.age": Number must be greater than or equal to 0",
+            "schemaPath": "user.age",
           },
           {
             "line": 1,
-            "message": "Expressions in jsx props are not supported (settings={{ theme: "invalid" }})",
-          },
-          {
-            "line": 1,
-            "message": "Invalid props for component "Heading" at "user": Required",
-            "schemaPath": "user",
-          },
-          {
-            "line": 1,
-            "message": "Invalid props for component "Heading" at "settings": Required",
-            "schemaPath": "settings",
+            "message": "Invalid props for component "Heading" at "settings.theme": Invalid enum value. Expected 'light' | 'dark', received 'invalid'",
+            "schemaPath": "settings.theme",
           },
         ],
         "html": "<h1>Complex validation</h1>",
         "result": <React.Fragment>
-          <Heading>
+          <Heading
+            settings={
+              {
+                "theme": "invalid",
+              }
+            }
+            user={
+              {
+                "age": -1,
+                "name": "test",
+              }
+            }
+          >
             Complex validation
           </Heading>
         </React.Fragment>,
       }
     `)
 })
+
+test('mdxJsxExpressionAttribute spread syntax', () => {
+    expect(
+        render(dedent`
+        <Heading 
+            {...{key: '1', level: 2}}
+            title="test"
+        >
+        Content with spread
+        </Heading>
+        `),
+    ).toMatchInlineSnapshot(`
+      {
+        "errors": [],
+        "html": "<h1><p>Content with spread</p></h1>",
+        "result": <React.Fragment>
+          <Heading
+            level={2}
+            title="test"
+          >
+            <p>
+              Content with spread
+            </p>
+          </Heading>
+        </React.Fragment>,
+      }
+    `)
+})
+
+test('mdxJsxExpressionAttribute complex spread cases', () => {
+    expect(
+        render(dedent`
+        <Heading 
+            {...{
+                level: 3,
+                active: true,
+                disabled: false,
+                count: 42,
+                title: "spread title",
+                nested: {
+                    prop: "value"
+                }
+            }}
+        >
+        Complex spread test
+        </Heading>
+
+        <Cards 
+            {...{style: {color: "red", fontSize: "16px"}}}
+            {...{className: "test-class", id: "test-id"}}
+        >
+        Multiple spreads
+        </Cards>
+        `),
+    ).toMatchInlineSnapshot(`
+      {
+        "errors": [],
+        "html": "<h1><p>Complex spread test</p></h1><div><p>Multiple spreads</p></div>",
+        "result": <React.Fragment>
+          <Heading
+            active={true}
+            count={42}
+            disabled={false}
+            level={3}
+            nested={
+              {
+                "prop": "value",
+              }
+            }
+            title="spread title"
+          >
+            <p>
+              Complex spread test
+            </p>
+          </Heading>
+          <Cards
+            className="test-class"
+            id="test-id"
+            style={
+              {
+                "color": "red",
+                "fontSize": "16px",
+              }
+            }
+          >
+            <p>
+              Multiple spreads
+            </p>
+          </Cards>
+        </React.Fragment>,
+      }
+    `)
+})
+
+test('mdxJsxExpressionAttribute edge cases', () => {
+    expect(
+        render(dedent`
+        <Heading {...{}} title="empty spread">Empty spread</Heading>
+        
+        <Heading {...{null: null, undefined: undefined}} title="null/undefined values">Null/undefined</Heading>
+        
+        <Heading {...{array: [1, 2, 3], object: {nested: true}}} title="complex values">Complex types</Heading>
+        `),
+    ).toMatchInlineSnapshot(`
+      {
+        "errors": [
+          {
+            "line": 3,
+            "message": "Failed to evaluate expression attribute: ...{null: null, undefined: undefined}",
+          },
+        ],
+        "html": "<h1>Empty spread</h1><h1>Null/undefined</h1><h1>Complex types</h1>",
+        "result": <React.Fragment>
+          <Heading
+            title="empty spread"
+          >
+            Empty spread
+          </Heading>
+          <Heading
+            title="null/undefined values"
+          >
+            Null/undefined
+          </Heading>
+          <Heading
+            array={
+              [
+                1,
+                2,
+                3,
+              ]
+            }
+            object={
+              {
+                "nested": true,
+              }
+            }
+            title="complex values"
+          >
+            Complex types
+          </Heading>
+        </React.Fragment>,
+      }
+    `)
+})
+
+test('ESM imports from https URLs', () => {
+    const code = dedent`
+    import Button from 'https://esm.sh/some-button-component'
+    import { Card, Modal } from 'https://esm.sh/some-ui-library'
+    
+    # Hello
+    
+    <Button>Click me</Button>
+    
+    <Card title="Test Card">
+        Content inside card
+    </Card>
+    
+    <Modal open={true}>
+        Modal content
+    </Modal>
+    `
+    
+    const mdast = mdxParse(code)
+    const visitor = new MdastToJsx({ markdown: code, mdast, components, allowClientEsmImports: true })
+    const result = visitor.run()
+    
+    // Check that imports were parsed correctly
+    expect(visitor.esmImports.size).toBe(3)
+    expect(visitor.esmImports.get('Button')).toBe('https://esm.sh/some-button-component')
+    expect(visitor.esmImports.get('Card')).toBe('https://esm.sh/some-ui-library#Card')
+    expect(visitor.esmImports.get('Modal')).toBe('https://esm.sh/some-ui-library#Modal')
+    
+    // Since these are dynamic imports that only work on client, the server render should return null
+    const html = renderToStaticMarkup(result)
+    expect(html).toMatchInlineSnapshot(`"<h1>Hello</h1>"`)
+    
+    expect(visitor.errors).toEqual([])
+})
+
+test('ESM imports error handling', () => {
+    const code = dedent`
+    import Button from 'file:///local/path'
+    import Component from './relative/path'
+    
+    # Test
+    
+    <Button>Local import should not work</Button>
+    <Component>Relative import should not work</Component>
+    `
+    
+    const mdast = mdxParse(code)
+    const visitor = new MdastToJsx({ markdown: code, mdast, components, allowClientEsmImports: true })
+    const result = visitor.run()
+    
+    // Only https imports should be processed
+    expect(visitor.esmImports.size).toBe(0)
+    
+    // Should have 4 errors: 2 for invalid imports, 2 for unsupported components
+    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')
+    
+    // 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')
+})
+
+test('jsx components in attributes', () => {
+    const code = dedent`
+    # JSX Components in Attributes
+
+    <Heading icon={<span>👋</span>} level={1}>
+    Hello World
+    </Heading>
+
+    <Cards items={<div>Item 1</div>}>
+    Some content
+    </Cards>
+    `
+    
+    const { result, errors, html } = render(code)
+    
+    // Should not have any errors
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    
+    // Should render correctly
+    expect(html).toMatchInlineSnapshot(`"<h1>JSX Components in Attributes</h1><h1><p>Hello World</p></h1><div><p>Some content</p></div>"`)
+    
+    expect(result).toMatchInlineSnapshot(`
+      <React.Fragment>
+        <h1>
+          JSX Components in Attributes
+        </h1>
+        <Heading
+          icon={
+            <span>
+              👋
+            </span>
+          }
+          level={1}
+        >
+          <p>
+            Hello World
+          </p>
+        </Heading>
+        <Cards
+          items={
+            <div>
+              Item 1
+            </div>
+          }
+        >
+          <p>
+            Some content
+          </p>
+        </Cards>
+      </React.Fragment>
+    `)
+})
+
+test('jsx components in attributes with ESM imports', () => {
+    const code = dedent`
+    import Button from 'https://esm.sh/some-button-component'
+    import { Icon } from 'https://esm.sh/some-icon-library'
+    
+    # ESM Components in Attributes
+
+    <Heading icon={<Icon name="star" />} level={1}>
+    Hello World
+    </Heading>
+
+    <Cards actionButton={<Button>Click me</Button>}>
+    Some content
+    </Cards>
+    `
+    
+    const { result, errors, html } = render(code, undefined, true)
+    
+    // Should not have any errors
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    
+    // Should render correctly - ESM components should be wrapped in DynamicEsmComponent
+    expect(html).toMatchInlineSnapshot(`"<h1>ESM Components in Attributes</h1><h1><p>Hello World</p></h1><div><p>Some content</p></div>"`)
+    
+    expect(result).toMatchInlineSnapshot(`
+      <React.Fragment>
+        <h1>
+          ESM Components in Attributes
+        </h1>
+        <Heading
+          icon={
+            <DynamicEsmComponent
+              componentName="Icon"
+              importUrl="https://esm.sh/some-icon-library"
+              name="star"
+            />
+          }
+          level={1}
+        >
+          <p>
+            Hello World
+          </p>
+        </Heading>
+        <Cards
+          actionButton={
+            <DynamicEsmComponent
+              componentName="default"
+              importUrl="https://esm.sh/some-button-component"
+            >
+              Click me
+            </DynamicEsmComponent>
+          }
+        >
+          <p>
+            Some content
+          </p>
+        </Cards>
+      </React.Fragment>
+    `)
+})
+
+test('ESM imports disabled by default', () => {
+    const code = dedent`
+    import Button from 'https://esm.sh/some-button-component'
+    
+    # Test Default Behavior
+
+    <Button>This should not work</Button>
+    `
+    
+    const { result, errors, html } = render(code) // No allowClientEsmImports flag
+    
+    // ESM imports should not be processed when disabled
+    const mdast = mdxParse(code)
+    const visitor = new MdastToJsx({ markdown: code, mdast, components }) // Default allowClientEsmImports: false
+    expect(visitor.esmImports.size).toBe(0)
+    
+    // Should have error for unsupported component
+    expect(errors.length).toBeGreaterThan(0)
+    expect(errors.some(e => e.message.includes('Unsupported jsx component Button'))).toBe(true)
+    
+    // Should render heading but not the button
+    expect(html).toMatchInlineSnapshot(`"<h1>Test Default Behavior</h1>"`)
+})
+
+test("jsx components in attributes error handling", () => {
+    const code = dedent`
+    # Error Handling Test
+
+    <Heading icon={<UnsupportedComponent />} level={1}>
+    Hello World
+    </Heading>
+    `
+    
+    const { result, errors, html } = render(code)
+    
+    // Should have an error for the unsupported component
+    expect(errors).toMatchInlineSnapshot(`
+      [
+        {
+          "line": 3,
+          "message": "Unsupported jsx component UnsupportedComponent in attribute",
+        },
+        {
+          "line": 3,
+          "message": "Failed to evaluate expression attribute: icon={<UnsupportedComponent />}",
+        },
+        {
+          "line": 3,
+          "message": "Expressions in jsx prop not evaluated: (icon={<UnsupportedComponent />})",
+        },
+      ]
+    `)
+    
+    // Should still render the rest of the content
+    expect(html).toMatchInlineSnapshot(`"<h1>Error Handling Test</h1><h1><p>Hello World</p></h1>"`)
+    
+    expect(result).toMatchInlineSnapshot(`
+      <React.Fragment>
+        <h1>
+          Error Handling Test
+        </h1>
+        <Heading
+          level={1}
+        >
+          <p>
+            Hello World
+          </p>
+        </Heading>
+      </React.Fragment>
+    `)
+})