safe-mdx 1.3.9 → 1.4.0

package/src/safe-mdx.test.tsx

@@ -2529,17 +2529,17 @@ test('component props schema validation with zod', () => {
         "errors": [
           {
             "line": 5,
-            "message": "Invalid props for component "Heading" at "level": Number must be less than or equal to 6",
+            "message": "Invalid props for component "Heading" at "level": Too big: expected number to be <=6",
             "schemaPath": "level",
           },
           {
             "line": 7,
-            "message": "Invalid props for component "Cards" at "count": Number must be greater than 0",
+            "message": "Invalid props for component "Cards" at "count": Too small: expected number to be >0",
             "schemaPath": "count",
           },
           {
             "line": 9,
-            "message": "Invalid props for component "Cards" at "count": Expected number, received string",
+            "message": "Invalid props for component "Cards" at "count": Invalid input: expected number, received string",
             "schemaPath": "count",
           },
         ],
@@ -2748,12 +2748,12 @@ test('validation error includes schema path', () => {
         "errors": [
           {
             "line": 1,
-            "message": "Invalid props for component "Heading" at "user.age": Number must be greater than or equal to 0",
+            "message": "Invalid props for component "Heading" at "user.age": Too small: expected number to be >=0",
             "schemaPath": "user.age",
           },
           {
             "line": 1,
-            "message": "Invalid props for component "Heading" at "settings.theme": Invalid enum value. Expected 'light' | 'dark', received 'invalid'",
+            "message": "Invalid props for component "Heading" at "settings.theme": Invalid option: expected one of "light"|"dark"",
             "schemaPath": "settings.theme",
           },
         ],
@@ -3498,5 +3498,118 @@ test("skip unknown elements in complex nested HTML structures", () => {
 </div>
 `);
   
-  expect(html).toMatchInlineSnapshot(`"<h1>Main Title</h1><article><header><h1>Article Title</h1></header><section><blockquote><p>A famous quote</p></blockquote></section><footer></footer></article><h2>Another Section</h2><div></div>"`);
+   expect(html).toMatchInlineSnapshot(`"<h1>Main Title</h1><article><header><h1>Article Title</h1></header><section><blockquote><p>A famous quote</p></blockquote></section><footer></footer></article><h2>Another Section</h2><div></div>"`);
 });
+
+/* ── modules prop tests ─────────────────────────────────────────────── */
+
+test('modules prop: resolves named import from absolute path', () => {
+    function CustomBadge({ label }: { label: string }) {
+        return <span className="badge">{label}</span>
+    }
+
+    const code = dedent`
+        import { CustomBadge } from '/snippets/badge'
+
+        # Hello
+
+        <CustomBadge label="Works" />
+    `
+    const mdast = mdxParse(code)
+    const visitor = new MdastToJsx({
+        markdown: code,
+        mdast,
+        components,
+        modules: {
+            './snippets/badge.tsx': { CustomBadge },
+        },
+        baseUrl: './pages/',
+    })
+    const result = visitor.run()
+    const html = renderToStaticMarkup(result)
+    expect(html).toMatchInlineSnapshot(`"<h1>Hello</h1><span class="badge">Works</span>"`)
+    expect(visitor.errors).toMatchInlineSnapshot(`[]`)
+})
+
+test('modules prop: resolves default import from relative path', () => {
+    function MyCard({ children }: { children?: React.ReactNode }) {
+        return <div className="card">{children}</div>
+    }
+
+    const code = dedent`
+        import MyCard from './card'
+
+        <MyCard>content</MyCard>
+    `
+    const mdast = mdxParse(code)
+    const visitor = new MdastToJsx({
+        markdown: code,
+        mdast,
+        components,
+        modules: {
+            './pages/card.tsx': { default: MyCard },
+        },
+        baseUrl: './pages/',
+    })
+    const result = visitor.run()
+    const html = renderToStaticMarkup(result)
+    expect(html).toMatchInlineSnapshot(`"<div class="card">content</div>"`)
+    expect(visitor.errors).toMatchInlineSnapshot(`[]`)
+})
+
+test('modules prop: resolves namespace import with dot notation', () => {
+    function Card({ title }: { title: string }) {
+        return <div>{title}</div>
+    }
+    function Badge({ label }: { label: string }) {
+        return <span>{label}</span>
+    }
+
+    const code = dedent`
+        import * as UI from './ui'
+
+        <UI.Card title="hello" />
+        <UI.Badge label="tag" />
+    `
+    const mdast = mdxParse(code)
+    const visitor = new MdastToJsx({
+        markdown: code,
+        mdast,
+        components,
+        modules: {
+            './components/ui.tsx': { Card, Badge },
+        },
+        baseUrl: './components/',
+    })
+    const result = visitor.run()
+    const html = renderToStaticMarkup(result)
+    expect(html).toMatchInlineSnapshot(`"<div>hello</div><span>tag</span>"`)
+    expect(visitor.errors).toMatchInlineSnapshot(`[]`)
+})
+
+test('modules prop: unresolved import produces error', () => {
+    const code = dedent`
+        import { Missing } from './nonexistent'
+
+        <Missing />
+    `
+    const mdast = mdxParse(code)
+    const visitor = new MdastToJsx({
+        markdown: code,
+        mdast,
+        components,
+        modules: {},
+        baseUrl: './pages/',
+    })
+    const result = visitor.run()
+    const html = renderToStaticMarkup(result)
+    expect(html).toMatchInlineSnapshot(`""`)
+    expect(visitor.errors).toMatchInlineSnapshot(`
+      [
+        {
+          "line": 3,
+          "message": "Unsupported jsx component Missing",
+        },
+      ]
+    `)
+})

package/src/safe-mdx.tsx

@@ -7,8 +7,9 @@ import type { Node, Parent, Root, RootContent } from 'mdast'
 import type { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx-jsx'
 
 import { Fragment, ReactNode } from 'react'
-import { DynamicEsmComponent } from './dynamic-esm-component.js'
+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'
 
@@ -51,15 +52,24 @@ export const SafeMdxRenderer = React.memo(function SafeMdxRenderer({
     createElement,
     allowClientEsmImports = false,
     addMarkdownLineNumbers = false,
+    modules,
+    baseUrl,
 }: {
     components?: ComponentsMap
     markdown?: string
-    mdast: MyRootContent
+    mdast?: MyRootContent
     renderNode?: RenderNode
     componentPropsSchema?: ComponentPropsSchema
     createElement?: CreateElementFunction
     allowClientEsmImports?: boolean
     addMarkdownLineNumbers?: boolean
+    /** Pre-resolved modules keyed by file path (e.g. from `import.meta.glob`).
+     *  When MDX contains `import { Card } from './card'`, the import source is
+     *  resolved against these keys using `baseUrl` for relative paths. */
+    modules?: EagerModules
+    /** Directory of the current MDX file, used to resolve relative import
+     *  sources against `modules` keys. E.g. `'./pages/getting-started/'` */
+    baseUrl?: string
 }) {
     const visitor = new MdastToJsx({
         markdown,
@@ -70,6 +80,8 @@ export const SafeMdxRenderer = React.memo(function SafeMdxRenderer({
         createElement,
         allowClientEsmImports,
         addMarkdownLineNumbers,
+        modules,
+        baseUrl,
     })
     const result = visitor.run()
     return result
@@ -87,6 +99,8 @@ export class MdastToJsx {
     esmImports: Map<string, string> = new Map()
     allowClientEsmImports: boolean
     addMarkdownLineNumbers: boolean
+    modules?: EagerModules
+    baseUrl?: string
 
     constructor({
         markdown: code = '',
@@ -97,6 +111,8 @@ export class MdastToJsx {
         createElement = React.createElement,
         allowClientEsmImports = false,
         addMarkdownLineNumbers = false,
+        modules,
+        baseUrl,
     }: {
         markdown?: string
         mdast: MyRootContent
@@ -109,6 +125,8 @@ export class MdastToJsx {
         createElement?: CreateElementFunction
         allowClientEsmImports?: boolean
         addMarkdownLineNumbers?: boolean
+        modules?: EagerModules
+        baseUrl?: string
     }) {
         this.str = code
 
@@ -124,6 +142,9 @@ export class MdastToJsx {
 
         this.addMarkdownLineNumbers = addMarkdownLineNumbers
 
+        this.modules = modules
+        this.baseUrl = baseUrl
+
         this.c = {
             ...Object.fromEntries(
                 nativeTags.map((tag) => {
@@ -132,6 +153,45 @@ export class MdastToJsx {
             ),
             ...components,
         }
+
+    }
+
+    /**
+     * Resolve import declarations from an mdxjsEsm node against `this.modules`.
+     * Resolved components are added directly to `this.c` (the component map)
+     * so the existing `accessWithDot` lookup finds them.
+     */
+    resolveImportsFromModules(node: MyRootContent): void {
+        const estree = (node as any).data?.estree
+        if (!estree) return
+
+        const moduleKeys = Object.keys(this.modules!)
+
+        for (const statement of estree.body) {
+            if (statement.type !== 'ImportDeclaration') continue
+            const source: string = statement.source?.value
+            if (typeof source !== 'string') continue
+
+            const resolved = resolveModulePath(source, this.baseUrl || './', moduleKeys)
+            if (!resolved) continue
+            const mod = this.modules![resolved]
+            if (!mod) continue
+
+            for (const spec of statement.specifiers ?? []) {
+                if (spec.type === 'ImportDefaultSpecifier') {
+                    this.c[spec.local.name] = mod.default ?? mod
+                } else if (spec.type === 'ImportSpecifier') {
+                    const importedName = spec.imported.type === 'Identifier'
+                        ? spec.imported.name
+                        : String(spec.imported.value)
+                    this.c[spec.local.name] = mod[importedName]
+                } else if (spec.type === 'ImportNamespaceSpecifier') {
+                    // Namespace import: import * as UI from '...'
+                    // Supports <UI.Card> via accessWithDot
+                    this.c[spec.local.name] = mod
+                }
+            }
+        }
     }
 
     addLineNumberToProps(
@@ -240,7 +300,6 @@ export class MdastToJsx {
                     // Handle ESM imported component
                     const { importUrl, componentName } =
                         extractComponentInfo(esmImportInfo)
-
                     Component = DynamicEsmComponent
                     let attrsList = this.getJsxAttrs(node, (err) => {
                         this.errors.push(err)
@@ -589,7 +648,11 @@ export class MdastToJsx {
 
         switch (node.type) {
             case 'mdxjsEsm': {
-                // Parse ESM imports and merge into our imports map (only if allowed)
+                // Resolve imports from pre-loaded modules (server-side)
+                if (this.modules) {
+                    this.resolveImportsFromModules(node)
+                }
+                // Parse ESM imports for client-side dynamic loading (only if allowed)
                 if (this.allowClientEsmImports) {
                     const parsedImports = parseEsmImports(node, (err) =>
                         this.errors.push(err),