safe-mdx 1.2.0 → 1.3.1

package/src/safe-mdx.test.tsx

@@ -9,17 +9,20 @@ import { MdastToJsx, mdastBfs, type ComponentPropsSchema } from './safe-mdx.js'
 import { completeJsxTags } from './streaming.js'
 
 const components = {
-    Heading({ level, children }) {
-        return <h1>{children}</h1>
+    Heading({ level, children, ...props }) {
+        return <h1 {...props}>{children}</h1>
     },
-    Cards({ level, children }) {
-        return <div>{children}</div>
+    Cards({ level, children, ...props }) {
+        return <div {...props}>{children}</div>
+    },
+    Tabs({ items, children, ...props }) {
+        return <div {...props}>{children}</div>
     },
 }
 
-function render(code, componentPropsSchema?: ComponentPropsSchema, allowClientEsmImports?: boolean) {
+function render(code, componentPropsSchema?: ComponentPropsSchema, allowClientEsmImports?: boolean, addMarkdownLineNumbers?: boolean) {
     const mdast = mdxParse(code)
-    const visitor = new MdastToJsx({ markdown: code, mdast, components, componentPropsSchema, allowClientEsmImports })
+    const visitor = new MdastToJsx({ markdown: code, mdast, components, componentPropsSchema, allowClientEsmImports, addMarkdownLineNumbers })
     const result = visitor.run()
     const html = renderToStaticMarkup(result)
     // console.log(JSON.stringify(result, null, 2))
@@ -68,7 +71,7 @@ test('markdown inside jsx', () => {
     expect(render(code)).toMatchInlineSnapshot(`
       {
         "errors": [],
-        "html": "<h1>Hello</h1><h1><p>Component <em>children</em></p></h1><figure><p>some <em>bold</em> content</p></figure>",
+        "html": "<h1>Hello</h1><h1 prop="value"><p>Component <em>children</em></p></h1><figure><p>some <em>bold</em> content</p></figure>",
         "result": <React.Fragment>
           <h1>
             Hello
@@ -114,7 +117,7 @@ test('can complete jsx code with completeJsxTags', () => {
     expect(render(completeJsxTags(code))).toMatchInlineSnapshot(`
       {
         "errors": [],
-        "html": "<h1>Hello</h1><div><h1></h1></div>",
+        "html": "<h1>Hello</h1><div><h1 prop="value"></h1></div>",
         "result": <React.Fragment>
           <h1>
             Hello
@@ -527,7 +530,7 @@ test('props parsing', () => {
         "errors": [
           {
             "line": 8,
-            "message": "Failed to evaluate expression attribute: expression2={Boolean(1)}",
+            "message": "Failed to evaluate expression attribute: expression2={Boolean(1)}. Functions are not supported",
           },
           {
             "line": 8,
@@ -539,14 +542,14 @@ test('props parsing', () => {
           },
           {
             "line": 9,
-            "message": "Failed to evaluate expression attribute: jsx={<SomeComponent />}",
+            "message": "Failed to evaluate expression attribute: jsx={<SomeComponent />}. visitor "JSXElement" is not supported",
           },
           {
             "line": 9,
             "message": "Expressions in jsx prop not evaluated: (jsx={<SomeComponent />})",
           },
         ],
-        "html": "<h1><p>hi</p></h1>",
+        "html": "<h1 num="2" doublequote="a &quot; string" quote="a &#x27; string" backTick="some undefined value" expression1="4" someJson="[object Object]"><p>hi</p></h1>",
         "result": <React.Fragment>
           <Heading
             backTick="some undefined value"
@@ -586,7 +589,7 @@ test('jsx attributes with arithmetic expressions', () => {
     ).toMatchInlineSnapshot(`
       {
         "errors": [],
-        "html": "<h1></h1>",
+        "html": "<h1 width="200" concat="hello world"></h1>",
         "result": <React.Fragment>
           <Heading
             active={true}
@@ -630,7 +633,7 @@ test('jsx attributes with complex objects and arrays', () => {
     ).toMatchInlineSnapshot(`
       {
         "errors": [],
-        "html": "<h1></h1>",
+        "html": "<h1 simpleArray="1,2,3" stringArray="one,two,three" mixedArray="1,two,true," simpleObject="[object Object]" nestedObject="[object Object]" arrayOfObjects="[object Object],[object Object]"></h1>",
         "result": <React.Fragment>
           <Heading
             arrayOfObjects={
@@ -2491,7 +2494,7 @@ test('component props schema validation with zod', () => {
             "schemaPath": "count",
           },
         ],
-        "html": "<h1>Valid heading</h1><div>Valid cards</div><h1>Invalid heading - level too high</h1><div>Invalid cards - negative count</div><div>Invalid cards - wrong type</div>",
+        "html": "<h1 title="test">Valid heading</h1><div count="3" variant="outline">Valid cards</div><h1 title="test">Invalid heading - level too high</h1><div count="-1">Invalid cards - negative count</div><div count="not a number">Invalid cards - wrong type</div>",
         "result": <React.Fragment>
           <Heading
             level={2}
@@ -2582,11 +2585,11 @@ test('mdx expressions with unsupported functions', () => {
         "errors": [
           {
             "line": 1,
-            "message": "Failed to evaluate expression: Math.max(5, 10)",
+            "message": "Failed to evaluate expression: Math.max(5, 10). Functions are not supported",
           },
           {
             "line": 2,
-            "message": "Failed to evaluate expression: console.log("test")",
+            "message": "Failed to evaluate expression: console.log("test"). Functions are not supported",
           },
         ],
         "html": "<p>Math function: 
@@ -2620,7 +2623,7 @@ test('schema validation without errors', () => {
     expect(render(code, componentPropsSchema)).toMatchInlineSnapshot(`
       {
         "errors": [],
-        "html": "<h1>Valid heading</h1><h1>Another valid heading</h1>",
+        "html": "<h1 title="test">Valid heading</h1><h1>Another valid heading</h1>",
         "result": <React.Fragment>
           <Heading
             level={2}
@@ -2655,7 +2658,7 @@ test('component without schema should not be validated', () => {
     expect(render(code, componentPropsSchema)).toMatchInlineSnapshot(`
       {
         "errors": [],
-        "html": "<h1>Valid heading with schema</h1><div>Cards without schema - should not be validated</div>",
+        "html": "<h1>Valid heading with schema</h1><div invalidProp="anything">Cards without schema - should not be validated</div>",
         "result": <React.Fragment>
           <Heading
             level={2}
@@ -2705,7 +2708,7 @@ test('validation error includes schema path', () => {
             "schemaPath": "settings.theme",
           },
         ],
-        "html": "<h1>Complex validation</h1>",
+        "html": "<h1 user="[object Object]" settings="[object Object]">Complex validation</h1>",
         "result": <React.Fragment>
           <Heading
             settings={
@@ -2740,7 +2743,7 @@ test('mdxJsxExpressionAttribute spread syntax', () => {
     ).toMatchInlineSnapshot(`
       {
         "errors": [],
-        "html": "<h1><p>Content with spread</p></h1>",
+        "html": "<h1 title="test"><p>Content with spread</p></h1>",
         "result": <React.Fragment>
           <Heading
             level={2}
@@ -2783,7 +2786,7 @@ test('mdxJsxExpressionAttribute complex spread cases', () => {
     ).toMatchInlineSnapshot(`
       {
         "errors": [],
-        "html": "<h1><p>Complex spread test</p></h1><div><p>Multiple spreads</p></div>",
+        "html": "<h1 count="42" title="spread title" nested="[object Object]"><p>Complex spread test</p></h1><div style="color:red;font-size:16px" class="test-class" id="test-id"><p>Multiple spreads</p></div>",
         "result": <React.Fragment>
           <Heading
             active={true}
@@ -2834,10 +2837,10 @@ test('mdxJsxExpressionAttribute edge cases', () => {
         "errors": [
           {
             "line": 3,
-            "message": "Failed to evaluate expression attribute: ...{null: null, undefined: undefined}",
+            "message": "Failed to evaluate expression attribute: ...{null: null, undefined: undefined}. undefined is undefined",
           },
         ],
-        "html": "<h1>Empty spread</h1><h1>Null/undefined</h1><h1>Complex types</h1>",
+        "html": "<h1 title="empty spread">Empty spread</h1><h1 title="null/undefined values">Null/undefined</h1><h1 array="1,2,3" object="[object Object]" title="complex values">Complex types</h1>",
         "result": <React.Fragment>
           <Heading
             title="empty spread"
@@ -2955,7 +2958,7 @@ test('jsx components in attributes', () => {
     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(html).toMatchInlineSnapshot(`"<h1>JSX Components in Attributes</h1><h1 icon="[object Object]"><p>Hello World</p></h1><div items="[object Object]"><p>Some content</p></div>"`)
     
     expect(result).toMatchInlineSnapshot(`
       <React.Fragment>
@@ -3011,7 +3014,7 @@ test('jsx components in attributes with ESM imports', () => {
     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(html).toMatchInlineSnapshot(`"<h1>ESM Components in Attributes</h1><h1 icon="[object Object]"><p>Hello World</p></h1><div actionButton="[object Object]"><p>Some content</p></div>"`)
     
     expect(result).toMatchInlineSnapshot(`
       <React.Fragment>
@@ -3094,7 +3097,7 @@ test("jsx components in attributes error handling", () => {
         },
         {
           "line": 3,
-          "message": "Failed to evaluate expression attribute: icon={<UnsupportedComponent />}",
+          "message": "Failed to evaluate expression attribute: icon={<UnsupportedComponent />}. visitor "JSXElement" is not supported",
         },
         {
           "line": 3,
@@ -3121,3 +3124,213 @@ test("jsx components in attributes error handling", () => {
       </React.Fragment>
     `)
 })
+
+test('addMarkdownLineNumbers adds data-markdown-line attributes', () => {
+    const code = dedent`
+    # Hello World
+
+    This is a **paragraph** with *emphasis*.
+
+    <Heading level={2}>
+    Custom component
+    </Heading>
+
+    - List item 1
+    - List item 2
+
+    | Column 1 | Column 2 |
+    |----------|----------|
+    | Cell 1   | Cell 2   |
+    `
+    
+    const { result, errors, html } = render(code, undefined, false, true)
+    
+    // Should not have any errors
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    
+    // Check that data-markdown-line attributes are present in HTML
+    expect(html).toContain('data-markdown-line="1"')
+    expect(html).toContain('data-markdown-line="3"')
+    expect(html).toContain('data-markdown-line="9"')
+    
+    expect(result).toMatchInlineSnapshot(`
+      <React.Fragment>
+        <h1
+          data-markdown-line={1}
+        >
+          Hello World
+        </h1>
+        <p
+          data-markdown-line={3}
+        >
+          This is a 
+          <strong
+            data-markdown-line={3}
+          >
+            paragraph
+          </strong>
+           with 
+          <em
+            data-markdown-line={3}
+          >
+            emphasis
+          </em>
+          .
+        </p>
+        <Heading
+          data-markdown-line={5}
+          level={2}
+        >
+          <p
+            data-markdown-line={6}
+          >
+            Custom component
+          </p>
+        </Heading>
+        <ul
+          data-markdown-line={9}
+        >
+          <li
+            data-markdown-line={9}
+          >
+            <p
+              data-markdown-line={9}
+            >
+              List item 1
+            </p>
+          </li>
+          <li
+            data-markdown-line={10}
+          >
+            <p
+              data-markdown-line={10}
+            >
+              List item 2
+            </p>
+          </li>
+        </ul>
+        <table
+          data-markdown-line={12}
+        >
+          <thead>
+            <tr
+              className=""
+              data-markdown-line={12}
+            >
+              <td
+                className=""
+                data-markdown-line={12}
+              >
+                Column 1
+              </td>
+              <td
+                className=""
+                data-markdown-line={12}
+              >
+                Column 2
+              </td>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              className=""
+              data-markdown-line={14}
+            >
+              <td
+                className=""
+                data-markdown-line={14}
+              >
+                Cell 1
+              </td>
+              <td
+                className=""
+                data-markdown-line={14}
+              >
+                Cell 2
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </React.Fragment>
+    `)
+})
+
+test('addMarkdownLineNumbers works with custom MDX components', () => {
+    const code = dedent`
+    # Regular Heading
+
+    <Heading level={1}>
+    Custom component on line 3
+    </Heading>
+
+    Regular paragraph.
+
+    <Cards count={2}>
+    Another custom component on line 9
+    </Cards>
+    `
+    
+    const { result, errors, html } = render(code, undefined, false, true)
+    
+    // Should not have any errors
+    expect(errors).toMatchInlineSnapshot(`[]`)
+    
+    // Check that custom components have line numbers
+    expect(html).toContain('data-markdown-line="3"')
+    expect(html).toContain('data-markdown-line="9"')
+    
+    expect(result).toMatchInlineSnapshot(`
+      <React.Fragment>
+        <h1
+          data-markdown-line={1}
+        >
+          Regular Heading
+        </h1>
+        <Heading
+          data-markdown-line={3}
+          level={1}
+        >
+          <p
+            data-markdown-line={4}
+          >
+            Custom component on line 3
+          </p>
+        </Heading>
+        <p
+          data-markdown-line={7}
+        >
+          Regular paragraph.
+        </p>
+        <Cards
+          count={2}
+          data-markdown-line={9}
+        >
+          <p
+            data-markdown-line={10}
+          >
+            Another custom component on line 9
+          </p>
+        </Cards>
+      </React.Fragment>
+    `)
+})
+
+test('jsx component with complex array props should show clear error message', () => {
+    const code = dedent`
+    <Tabs items={invalidFunction()} />
+    `
+    
+    const { errors } = render(code)
+    
+    // Should have error with original error message included
+    expect(errors.length).toBeGreaterThan(0)
+    
+    // Find the error that contains the expression evaluation message
+    const expressionError = errors.find(err => 
+        err.message.includes('Failed to evaluate expression attribute: items={invalidFunction()}')
+    )
+    
+    expect(expressionError).toBeDefined()
+    expect(expressionError!.message).toContain('Functions are not supported')
+    expect(expressionError!.line).toBe(1)
+})