safe-mdx 1.1.0 → 1.2.0

package/src/safe-mdx.tsx

@@ -3,8 +3,12 @@ import React, { Suspense, cloneElement } from 'react'
 import type { StandardSchemaV1 } from '@standard-schema/spec'
 import type { Node, Parent, Root, RootContent } from 'mdast'
 import type { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx-jsx'
+import type { JSXElement, JSXAttribute, JSXText, JSXExpressionContainer } from 'estree-jsx'
+import Evaluate from 'eval-estree-expression'
 
 import { Fragment, ReactNode } from 'react'
+import { DynamicEsmComponent } from './dynamic-esm-component.js'
+import { parseEsmImports, extractComponentInfo } from './esm-parser.js'
 
 const HtmlToJsxConverter = React.lazy(() =>
     import('./HtmlToJsxConverter.js').then((module) => ({
@@ -49,6 +53,7 @@ export const SafeMdxRenderer = React.memo(function SafeMdxRenderer({
     renderNode,
     componentPropsSchema,
     createElement,
+    allowClientEsmImports = false,
 }: {
     components?: ComponentsMap
     markdown?: string
@@ -56,6 +61,7 @@ export const SafeMdxRenderer = React.memo(function SafeMdxRenderer({
     renderNode?: RenderNode
     componentPropsSchema?: ComponentPropsSchema
     createElement?: CreateElementFunction
+    allowClientEsmImports?: boolean
 }) {
     const visitor = new MdastToJsx({
         markdown,
@@ -64,6 +70,7 @@ export const SafeMdxRenderer = React.memo(function SafeMdxRenderer({
         renderNode,
         componentPropsSchema,
         createElement,
+        allowClientEsmImports,
     })
     const result = visitor.run()
     return result
@@ -78,6 +85,8 @@ export class MdastToJsx {
     renderNode?: RenderNode
     componentPropsSchema?: ComponentPropsSchema
     createElement: CreateElementFunction
+    esmImports: Map<string, string> = new Map()
+    allowClientEsmImports: boolean
 
     constructor({
         markdown: code = '',
@@ -86,6 +95,7 @@ export class MdastToJsx {
         renderNode,
         componentPropsSchema,
         createElement = React.createElement,
+        allowClientEsmImports = false,
     }: {
         markdown?: string
         mdast: MyRootContent
@@ -96,6 +106,7 @@ export class MdastToJsx {
         ) => ReactNode | undefined
         componentPropsSchema?: ComponentPropsSchema
         createElement?: CreateElementFunction
+        allowClientEsmImports?: boolean
     }) {
         this.str = code
 
@@ -107,6 +118,8 @@ export class MdastToJsx {
 
         this.createElement = createElement
 
+        this.allowClientEsmImports = allowClientEsmImports
+
         this.c = {
             ...Object.fromEntries(
                 nativeTags.map((tag) => {
@@ -120,9 +133,12 @@ export class MdastToJsx {
     validateComponentProps(
         componentName: string,
         props: Record<string, any>,
-        line?: number
+        line?: number,
     ): void {
-        if (!this.componentPropsSchema || !this.componentPropsSchema[componentName]) {
+        if (
+            !this.componentPropsSchema ||
+            !this.componentPropsSchema[componentName]
+        ) {
             return
         }
 
@@ -192,26 +208,55 @@ export class MdastToJsx {
                     return []
                 }
 
-                const Component = accessWithDot(this.c, node.name)
-
-                if (!Component) {
-                    this.errors.push({
-                        message: `Unsupported jsx component ${node.name}`,
-                        line: node.position?.start?.line,
+                // Check if this is an ESM imported component (only if allowed)
+                const esmImportInfo = this.allowClientEsmImports ? this.esmImports.get(node.name) : null
+                let Component
+                
+                if (esmImportInfo) {
+                    // Handle ESM imported component
+                    const { importUrl, componentName } = extractComponentInfo(esmImportInfo)
+                    
+                    Component = DynamicEsmComponent
+                    let attrsList = this.getJsxAttrs(node, (err) => {
+                        this.errors.push(err)
                     })
-                    return null
+                    let attrs = Object.fromEntries(attrsList)
+                    
+                    return this.createElement(
+                        Component,
+                        { ...attrs, importUrl, componentName },
+                        this.mapJsxChildren(node),
+                    )
+                } else {
+                    Component = accessWithDot(this.c, node.name)
+
+                    if (!Component) {
+                        this.errors.push({
+                            message: `Unsupported jsx component ${node.name}`,
+                            line: node.position?.start?.line,
+                        })
+                        return null
+                    }
                 }
 
-                let attrsList = getJsxAttrs(node, (err) => {
+                let attrsList = this.getJsxAttrs(node, (err) => {
                     this.errors.push(err)
                 })
 
                 let attrs = Object.fromEntries(attrsList)
 
                 // Validate component props with schema if available
-                this.validateComponentProps(node.name, attrs, node.position?.start?.line)
+                this.validateComponentProps(
+                    node.name,
+                    attrs,
+                    node.position?.start?.line,
+                )
 
-                return this.createElement(Component, attrs, this.mapJsxChildren(node))
+                return this.createElement(
+                    Component,
+                    attrs,
+                    this.mapJsxChildren(node),
+                )
             }
             default: {
                 return this.mdastTransformer(node)
@@ -219,6 +264,232 @@ export class MdastToJsx {
         }
     }
 
+    transformJsxElement(jsxElement: JSXElement, onError?: (err: SafeMdxError) => void, line?: number): ReactNode {
+        try {
+            // Handle JSX opening element
+            if (jsxElement.openingElement) {
+                const tagName = jsxElement.openingElement.name?.type === 'JSXIdentifier' ? jsxElement.openingElement.name.name : null
+                if (!tagName) {
+                    onError?.({
+                        message: 'JSX element missing component name',
+                        line: line,
+                    })
+                    return null
+                }
+
+                // Check if this is an ESM imported component (only if allowed)
+                const esmImportInfo = this.allowClientEsmImports ? this.esmImports.get(tagName) : null
+                let Component
+                
+                if (esmImportInfo) {
+                    // Handle ESM imported component
+                    const { importUrl, componentName } = extractComponentInfo(esmImportInfo)
+                    Component = DynamicEsmComponent
+                } else {
+                    // Get the component from the regular component map
+                    Component = accessWithDot(this.c, tagName)
+                    if (!Component) {
+                        onError?.({
+                            message: `Unsupported jsx component ${tagName} in attribute`,
+                            line: line,
+                        })
+                        return null
+                    }
+                }
+
+                // Extract attributes
+                const props: Record<string, any> = {}
+                if (jsxElement.openingElement.attributes) {
+                    for (const attr of jsxElement.openingElement.attributes) {
+                        if (attr.type === 'JSXAttribute' && attr.name?.type === 'JSXIdentifier' && attr.name.name) {
+                            if (attr.value) {
+                                if (attr.value.type === 'Literal') {
+                                    props[attr.name.name] = attr.value.value
+                                } else if (attr.value.type === 'JSXExpressionContainer') {
+                                    if (attr.value.expression.type === 'Literal') {
+                                        props[attr.name.name] = attr.value.expression.value
+                                    }
+                                }
+                            } else {
+                                props[attr.name.name] = true
+                            }
+                        }
+                    }
+                }
+
+                // Extract children
+                const children: ReactNode[] = []
+                if (jsxElement.children) {
+                    for (const child of jsxElement.children) {
+                        if (child.type === 'JSXText') {
+                            children.push(child.value)
+                        } else if (child.type === 'JSXElement') {
+                            const childElement = this.transformJsxElement(child)
+                            if (childElement) {
+                                children.push(childElement)
+                            }
+                        }
+                    }
+                }
+
+                // Handle ESM imported components by adding required props
+                if (esmImportInfo) {
+                    const { importUrl, componentName } = extractComponentInfo(esmImportInfo)
+                    return this.createElement(
+                        Component,
+                        { ...props, importUrl, componentName },
+                        ...children
+                    )
+                } else {
+                    return this.createElement(Component, props, ...children)
+                }
+            }
+        } catch (error) {
+            // Return null if transformation fails
+            onError?.({
+                message: `Failed to transform JSX element: ${error instanceof Error ? error.message : 'Unknown error'}`,
+                line: line,
+            })
+            return null
+        }
+        return null
+    }
+
+    getJsxAttrs(
+        node: MdxJsxFlowElement | MdxJsxTextElement,
+        onError: (err: SafeMdxError) => void = console.error,
+    ) {
+        let attrsList: [string, any][] = []
+
+        for (const attr of node.attributes) {
+            if (attr.type === 'mdxJsxExpressionAttribute') {
+                // Handle spread expressions like {...{key: '1'}}
+                if (attr.data?.estree) {
+                    try {
+                        const program = attr.data.estree
+                        if (
+                            program.body?.length > 0 &&
+                            program.body[0].type === 'ExpressionStatement'
+                        ) {
+                            const expression = program.body[0].expression
+                            try {
+                                const result = Evaluate.evaluate.sync(expression)
+
+                                // Handle spread syntax - merge the evaluated object
+                                if (typeof result === 'object' && result != null) {
+                                    const entries = Object.entries(result)
+                                    attrsList.push(...entries)
+                                }
+                            } catch (error) {
+                                onError({
+                                    message: `Failed to evaluate expression attribute: ${attr.value
+                                        .replace(/\n+/g, ' ')
+                                        .replace(/ +/g, ' ')}`,
+                                    line: attr.position?.start?.line,
+                                })
+                            }
+                        }
+                    } catch (error) {
+                        onError({
+                            message: `Failed to evaluate expression attribute: ${attr.value
+                                .replace(/\n+/g, ' ')
+                                .replace(/ +/g, ' ')}`,
+                            line: attr.position?.start?.line,
+                        })
+                    }
+                } else {
+                    onError({
+                        message: `Expressions in jsx props are not supported (${attr.value
+                            .replace(/\n+/g, ' ')
+                            .replace(/ +/g, ' ')})`,
+                        line: attr.position?.start?.line,
+                    })
+                }
+                continue
+            }
+
+            if (attr.type !== 'mdxJsxAttribute') {
+                onError({
+                    message: `non mdxJsxAttribute attribute is not supported: ${attr}`,
+                    line: node.position?.start?.line,
+                })
+                continue
+            }
+
+            const v = attr.value
+            if (typeof v === 'string' || typeof v === 'number') {
+                attrsList.push([attr.name, v])
+                continue
+            }
+            if (v === null) {
+                attrsList.push([attr.name, true])
+                continue
+            }
+            if (v?.type === 'mdxJsxAttributeValueExpression') {
+                // Manual parsing fallback for simple values
+                if (v.value === 'true') {
+                    attrsList.push([attr.name, true])
+                    continue
+                }
+                if (v.value === 'false') {
+                    attrsList.push([attr.name, false])
+                    continue
+                }
+                if (v.value === 'null') {
+                    attrsList.push([attr.name, null])
+                    continue
+                }
+                if (v.value === 'undefined') {
+                    attrsList.push([attr.name, undefined])
+                    continue
+                }
+
+                if (v.data?.estree) {
+                    try {
+                        // Extract the expression from the Program body
+                        const program = v.data.estree
+                        if (
+                            program.body?.length > 0 &&
+                            program.body[0].type === 'ExpressionStatement'
+                        ) {
+                            const expression = program.body[0].expression
+                            
+                            // Check if this is a JSX element
+                            if (expression.type === 'JSXElement') {
+                                // Transform JSX element to React element
+                                const jsxElement = this.transformJsxElement(expression, onError, attr.position?.start?.line)
+                                if (jsxElement) {
+                                    attrsList.push([attr.name, jsxElement])
+                                    continue
+                                }
+                            }
+                            
+                            try {
+                                // Evaluate the expression synchronously
+                                const result = Evaluate.evaluate.sync(expression)
+                                attrsList.push([attr.name, result])
+                                continue
+                            } catch (error) {
+                                onError({
+                                    message: `Failed to evaluate expression attribute: ${attr.name}={${v.value}}`,
+                                    line: attr.position?.start?.line,
+                                })
+                            }
+                        }
+                    } catch (error) {
+                        // Fall back to the original manual parsing for backwards compatibility
+                    }
+                }
+
+                onError({
+                    message: `Expressions in jsx prop not evaluated: (${attr.name}={${v.value}})`,
+                    line: attr.position?.start?.line,
+                })
+            }
+        }
+        return attrsList
+    }
+
     run() {
         const res = this.mdastTransformer(this.mdast) as ReactNode
         if (Array.isArray(res) && res.length === 1) {
@@ -245,10 +516,13 @@ export class MdastToJsx {
 
         switch (node.type) {
             case 'mdxjsEsm': {
-                const start = node.position?.start?.offset
-                const end = node.position?.end?.offset
-                let text = this.str.slice(start, end)
-
+                // Parse ESM imports and merge into our imports map (only if allowed)
+                if (this.allowClientEsmImports) {
+                    const parsedImports = parseEsmImports(node, (err) => this.errors.push(err))
+                    parsedImports.forEach((value, key) => {
+                        this.esmImports.set(key, value)
+                    })
+                }
                 return []
             }
             case 'mdxJsxTextElement':
@@ -275,6 +549,36 @@ export class MdastToJsx {
                 if (!node.value) {
                     return []
                 }
+
+                // Check if we have an estree AST
+                if (node.data?.estree) {
+                    try {
+                        // Extract the expression from the Program body
+                        const program = node.data.estree
+                        if (
+                            program.body?.length > 0 &&
+                            program.body[0].type === 'ExpressionStatement'
+                        ) {
+                            const expression = program.body[0].expression
+                            try {
+                                // Evaluate the expression synchronously
+                                const result = Evaluate.evaluate.sync(expression)
+                                return result
+                            } catch (error) {
+                                this.errors.push({
+                                    message: `Failed to evaluate expression: ${node.value}`,
+                                    line: node.position?.start?.line,
+                                })
+                            }
+                        }
+                    } catch (error) {
+                        this.errors.push({
+                            message: `Failed to evaluate expression: ${node.value}`,
+                            line: node.position?.start?.line,
+                        })
+                    }
+                }
+
                 return []
             }
             case 'yaml': {
@@ -287,13 +591,25 @@ export class MdastToJsx {
                 const level = node.depth
                 const Tag = this.c[`h${level}`] ?? `h${level}`
 
-                return this.createElement(Tag, node.data?.hProperties, this.mapMdastChildren(node))
+                return this.createElement(
+                    Tag,
+                    node.data?.hProperties,
+                    this.mapMdastChildren(node),
+                )
             }
             case 'paragraph': {
-                return this.createElement(this.c.p, node.data?.hProperties, this.mapMdastChildren(node))
+                return this.createElement(
+                    this.c.p,
+                    node.data?.hProperties,
+                    this.mapMdastChildren(node),
+                )
             }
             case 'blockquote': {
-                return this.createElement(this.c.blockquote, node.data?.hProperties, this.mapMdastChildren(node))
+                return this.createElement(
+                    this.c.blockquote,
+                    node.data?.hProperties,
+                    this.mapMdastChildren(node),
+                )
             }
             case 'thematicBreak': {
                 return this.createElement(this.c.hr, node.data?.hProperties)
@@ -304,11 +620,12 @@ export class MdastToJsx {
                 }
                 const language = node.lang || ''
                 const code = node.value
-                const codeBlock = (className?: string) => this.createElement(
-                    this.c.pre,
-                    node.data?.hProperties,
-                    this.createElement(this.c.code, { className }, code)
-                )
+                const codeBlock = (className?: string) =>
+                    this.createElement(
+                        this.c.pre,
+                        node.data?.hProperties,
+                        this.createElement(this.c.code, { className }, code),
+                    )
 
                 if (language) {
                     return codeBlock(`language-${language}`)
@@ -321,28 +638,43 @@ export class MdastToJsx {
                     return this.createElement(
                         this.c.ol,
                         { start: node.start!, ...node.data?.hProperties },
-                        this.mapMdastChildren(node)
+                        this.mapMdastChildren(node),
                     )
                 }
-                return this.createElement(this.c.ul, node.data?.hProperties, this.mapMdastChildren(node))
+                return this.createElement(
+                    this.c.ul,
+                    node.data?.hProperties,
+                    this.mapMdastChildren(node),
+                )
             }
             case 'listItem': {
                 // https://github.com/syntax-tree/mdast-util-gfm-task-list-item#syntax-tree
                 if (node?.checked != null) {
                     return this.createElement(
                         this.c.li,
-                        { 'data-checked': node.checked, ...node.data?.hProperties },
-                        this.mapMdastChildren(node)
+                        {
+                            'data-checked': node.checked,
+                            ...node.data?.hProperties,
+                        },
+                        this.mapMdastChildren(node),
                     )
                 }
-                return this.createElement(this.c.li, node.data?.hProperties, this.mapMdastChildren(node))
+                return this.createElement(
+                    this.c.li,
+                    node.data?.hProperties,
+                    this.mapMdastChildren(node),
+                )
             }
             case 'text': {
                 if (!node.value) {
                     return []
                 }
                 if (node.data?.hProperties) {
-                    return this.createElement(this.c.span, node.data.hProperties, node.value)
+                    return this.createElement(
+                        this.c.span,
+                        node.data.hProperties,
+                        node.value,
+                    )
                 }
                 return node.value
             }
@@ -354,7 +686,7 @@ export class MdastToJsx {
                     src,
                     alt,
                     title,
-                    ...node.data?.hProperties
+                    ...node.data?.hProperties,
                 })
             }
             case 'link': {
@@ -363,32 +695,56 @@ export class MdastToJsx {
                 return this.createElement(
                     this.c.a,
                     { href, title, ...node.data?.hProperties },
-                    this.mapMdastChildren(node)
+                    this.mapMdastChildren(node),
                 )
             }
             case 'strong': {
-                return this.createElement(this.c.strong, node.data?.hProperties, this.mapMdastChildren(node))
+                return this.createElement(
+                    this.c.strong,
+                    node.data?.hProperties,
+                    this.mapMdastChildren(node),
+                )
             }
             case 'emphasis': {
-                return this.createElement(this.c.em, node.data?.hProperties, this.mapMdastChildren(node))
+                return this.createElement(
+                    this.c.em,
+                    node.data?.hProperties,
+                    this.mapMdastChildren(node),
+                )
             }
             case 'delete': {
-                return this.createElement(this.c.del, node.data?.hProperties, this.mapMdastChildren(node))
+                return this.createElement(
+                    this.c.del,
+                    node.data?.hProperties,
+                    this.mapMdastChildren(node),
+                )
             }
             case 'inlineCode': {
                 if (!node.value) {
                     return []
                 }
-                return this.createElement(this.c.code, node.data?.hProperties, node.value)
+                return this.createElement(
+                    this.c.code,
+                    node.data?.hProperties,
+                    node.value,
+                )
             }
             case 'break': {
                 return this.createElement(this.c.br, node.data?.hProperties)
             }
             case 'root': {
                 if (node.data?.hProperties) {
-                    return this.createElement(this.c.div, node.data.hProperties, this.mapMdastChildren(node))
+                    return this.createElement(
+                        this.c.div,
+                        node.data.hProperties,
+                        this.mapMdastChildren(node),
+                    )
                 }
-                return this.createElement(Fragment, null, this.mapMdastChildren(node))
+                return this.createElement(
+                    Fragment,
+                    null,
+                    this.mapMdastChildren(node),
+                )
             }
             case 'table': {
                 const [head, ...body] = React.Children.toArray(
@@ -398,14 +754,15 @@ export class MdastToJsx {
                     this.c.table,
                     node.data?.hProperties,
                     head && this.createElement(this.c.thead, null, head),
-                    !!body?.length && this.createElement(this.c.tbody, null, body)
+                    !!body?.length &&
+                        this.createElement(this.c.tbody, null, body),
                 )
             }
             case 'tableRow': {
                 return this.createElement(
                     this.c.tr,
                     { className: '', ...node.data?.hProperties },
-                    this.mapMdastChildren(node)
+                    this.mapMdastChildren(node),
                 )
             }
             case 'tableCell': {
@@ -413,7 +770,7 @@ export class MdastToJsx {
                 return this.createElement(
                     this.c.td,
                     { className: '', ...node.data?.hProperties },
-                    content
+                    content,
                 )
             }
             case 'definition': {
@@ -421,19 +778,21 @@ export class MdastToJsx {
             }
             case 'linkReference': {
                 let href = ''
+                let title = ''
                 mdastBfs(this.mdast, (child: any) => {
                     if (
                         child.type === 'definition' &&
                         child.identifier === node.identifier
                     ) {
-                        href = child.url
+                        href = child.url || ''
+                        title = child.title || ''
                     }
                 })
 
                 return this.createElement(
                     this.c.a,
-                    { href, ...node.data?.hProperties },
-                    this.mapMdastChildren(node)
+                    { href, title, ...node.data?.hProperties },
+                    this.mapMdastChildren(node),
                 )
             }
             case 'footnoteReference': {
@@ -457,8 +816,8 @@ export class MdastToJsx {
                     this.createElement(HtmlToJsxConverter, {
                         htmlText: text,
                         instance: this,
-                        node
-                    })
+                        node,
+                    }),
                 )
             }
             case 'imageReference': {
@@ -480,80 +839,6 @@ export class MdastToJsx {
     }
 }
 
-export function getJsxAttrs(
-    node: MdxJsxFlowElement | MdxJsxTextElement,
-    onError: (err: SafeMdxError) => void = console.error,
-) {
-    let attrsList = node.attributes
-        .map((attr) => {
-            if (attr.type === 'mdxJsxExpressionAttribute') {
-
-                onError({
-                    message: `Expressions in jsx props are not supported (${attr.value
-                        .replace(/\n+/g, ' ')
-                        .replace(/ +/g, ' ')})`,
-                    line: attr.position?.start?.line,
-                })
-                return
-            }
-            if (attr.type !== 'mdxJsxAttribute') {
-                throw new Error(`non mdxJsxAttribute is not supported: ${attr}`)
-            }
-
-            const v = attr.value
-            if (typeof v === 'string' || typeof v === 'number') {
-                return [attr.name, v]
-            }
-            if (v === null) {
-                return [attr.name, true]
-            }
-            if (v?.type === 'mdxJsxAttributeValueExpression') {
-                if (v.value === 'true') {
-                    return [attr.name, true]
-                }
-                if (v.value === 'false') {
-                    return [attr.name, false]
-                }
-                if (v.value === 'null') {
-                    return [attr.name, null]
-                }
-                if (v.value === 'undefined') {
-                    return [attr.name, undefined]
-                }
-                let quote = ['"', "'", '`'].find(
-                    (q) => v.value.startsWith(q) && v.value.endsWith(q),
-                )
-                if (quote) {
-                    let value = v.value
-                    if (quote !== '"') {
-                        value = v.value.replace(new RegExp(quote, 'g'), '"')
-                    }
-                    return [attr.name, JSON.parse(value)]
-                }
-
-                const number = Number(v.value)
-                if (!isNaN(number)) {
-                    return [attr.name, number]
-                }
-                const parsedJson = safeJsonParse(v.value)
-                if (parsedJson) {
-                    return [attr.name, parsedJson]
-                }
-
-                onError({
-                    message: `Expressions in jsx props are not supported (${attr.name}={${v.value}})`,
-                    line: attr.position?.start?.line,
-                })
-            } else {
-                console.log('unhandled attr', { attr }, attr.type)
-            }
-
-            return
-        })
-        .filter(isTruthy) as [string, any][]
-    return attrsList
-}
-
 function isTruthy<T>(val: T | undefined | null | false): val is T {
     return Boolean(val)
 }