safe-mdx 1.0.4 → 1.2.0

package/src/safe-mdx.tsx

@@ -1,10 +1,14 @@
-import React, { use, cloneElement, Suspense } from 'react'
+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 { completeJsxTags } from './streaming.js'
+import { DynamicEsmComponent } from './dynamic-esm-component.js'
+import { parseEsmImports, extractComponentInfo } from './esm-parser.js'
 
 const HtmlToJsxConverter = React.lazy(() =>
     import('./HtmlToJsxConverter.js').then((module) => ({
@@ -28,22 +32,45 @@ export type RenderNode = (
     transform: (node: MyRootContent) => ReactNode,
 ) => ReactNode | undefined
 
+export interface SafeMdxError {
+    message: string
+    line?: number
+    schemaPath?: string
+}
+
+export type ComponentPropsSchema = Record<string, StandardSchemaV1>
+
+export type CreateElementFunction = (
+    type: any,
+    props?: any,
+    ...children: ReactNode[]
+) => ReactNode
+
 export const SafeMdxRenderer = React.memo(function SafeMdxRenderer({
     components,
     markdown = '',
     mdast = null as any,
     renderNode,
+    componentPropsSchema,
+    createElement,
+    allowClientEsmImports = false,
 }: {
     components?: ComponentsMap
     markdown?: string
     mdast: MyRootContent
     renderNode?: RenderNode
+    componentPropsSchema?: ComponentPropsSchema
+    createElement?: CreateElementFunction
+    allowClientEsmImports?: boolean
 }) {
     const visitor = new MdastToJsx({
         markdown,
         mdast,
         components,
         renderNode,
+        componentPropsSchema,
+        createElement,
+        allowClientEsmImports,
     })
     const result = visitor.run()
     return result
@@ -54,14 +81,21 @@ export class MdastToJsx {
     str: string
     jsxStr: string = ''
     c: ComponentsMap
-    errors: { message: string }[] = []
+    errors: SafeMdxError[] = []
     renderNode?: RenderNode
+    componentPropsSchema?: ComponentPropsSchema
+    createElement: CreateElementFunction
+    esmImports: Map<string, string> = new Map()
+    allowClientEsmImports: boolean
 
     constructor({
         markdown: code = '',
         mdast,
         components = {} as ComponentsMap,
         renderNode,
+        componentPropsSchema,
+        createElement = React.createElement,
+        allowClientEsmImports = false,
     }: {
         markdown?: string
         mdast: MyRootContent
@@ -70,6 +104,9 @@ export class MdastToJsx {
             node: MyRootContent,
             transform: (node: MyRootContent) => ReactNode,
         ) => ReactNode | undefined
+        componentPropsSchema?: ComponentPropsSchema
+        createElement?: CreateElementFunction
+        allowClientEsmImports?: boolean
     }) {
         this.str = code
 
@@ -77,6 +114,12 @@ export class MdastToJsx {
 
         this.renderNode = renderNode
 
+        this.componentPropsSchema = componentPropsSchema
+
+        this.createElement = createElement
+
+        this.allowClientEsmImports = allowClientEsmImports
+
         this.c = {
             ...Object.fromEntries(
                 nativeTags.map((tag) => {
@@ -86,6 +129,39 @@ export class MdastToJsx {
             ...components,
         }
     }
+
+    validateComponentProps(
+        componentName: string,
+        props: Record<string, any>,
+        line?: number,
+    ): void {
+        if (
+            !this.componentPropsSchema ||
+            !this.componentPropsSchema[componentName]
+        ) {
+            return
+        }
+
+        const schema = this.componentPropsSchema[componentName]
+        let result = schema['~standard'].validate(props)
+
+        if (result instanceof Promise) {
+            // Ignore async validation errors as requested
+            return
+        } else {
+            if (result.issues) {
+                result.issues.forEach((issue) => {
+                    const propPath = issue.path?.join('.') || 'unknown'
+                    this.errors.push({
+                        message: `Invalid props for component "${componentName}" at "${propPath}": ${issue.message}`,
+                        line,
+                        schemaPath: issue.path?.join('.'),
+                    })
+                })
+            }
+        }
+    }
+
     mapMdastChildren(node: any) {
         const res = node.children
             ?.flatMap((child) => this.mdastTransformer(child))
@@ -132,24 +208,54 @@ export class MdastToJsx {
                     return []
                 }
 
-                const Component = accessWithDot(this.c, node.name)
-
-                if (!Component) {
-                    this.errors.push({
-                        message: `Unsupported jsx component ${node.name}`,
+                // 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)
-                return (
-                    <Component {...attrs}>
-                        {this.mapJsxChildren(node)}
-                    </Component>
+
+                // Validate component props with schema if available
+                this.validateComponentProps(
+                    node.name,
+                    attrs,
+                    node.position?.start?.line,
+                )
+
+                return this.createElement(
+                    Component,
+                    attrs,
+                    this.mapJsxChildren(node),
                 )
             }
             default: {
@@ -158,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) {
@@ -184,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':
@@ -214,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': {
@@ -226,28 +591,28 @@ export class MdastToJsx {
                 const level = node.depth
                 const Tag = this.c[`h${level}`] ?? `h${level}`
 
-                return (
-                    <Tag {...node.data?.hProperties}>
-                        {this.mapMdastChildren(node)}
-                    </Tag>
+                return this.createElement(
+                    Tag,
+                    node.data?.hProperties,
+                    this.mapMdastChildren(node),
                 )
             }
             case 'paragraph': {
-                return (
-                    <this.c.p {...node.data?.hProperties}>
-                        {this.mapMdastChildren(node)}
-                    </this.c.p>
+                return this.createElement(
+                    this.c.p,
+                    node.data?.hProperties,
+                    this.mapMdastChildren(node),
                 )
             }
             case 'blockquote': {
-                return (
-                    <this.c.blockquote {...node.data?.hProperties}>
-                        {this.mapMdastChildren(node)}
-                    </this.c.blockquote>
+                return this.createElement(
+                    this.c.blockquote,
+                    node.data?.hProperties,
+                    this.mapMdastChildren(node),
                 )
             }
             case 'thematicBreak': {
-                return <this.c.hr {...node.data?.hProperties} />
+                return this.createElement(this.c.hr, node.data?.hProperties)
             }
             case 'code': {
                 if (!node.value) {
@@ -255,11 +620,12 @@ export class MdastToJsx {
                 }
                 const language = node.lang || ''
                 const code = node.value
-                const codeBlock = (className?: string) => (
-                    <this.c.pre {...node.data?.hProperties}>
-                        <this.c.code className={className}>{code}</this.c.code>
-                    </this.c.pre>
-                )
+                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}`)
@@ -269,37 +635,34 @@ export class MdastToJsx {
 
             case 'list': {
                 if (node.ordered) {
-                    return (
-                        <this.c.ol
-                            start={node.start!}
-                            {...node.data?.hProperties}
-                        >
-                            {this.mapMdastChildren(node)}
-                        </this.c.ol>
+                    return this.createElement(
+                        this.c.ol,
+                        { start: node.start!, ...node.data?.hProperties },
+                        this.mapMdastChildren(node),
                     )
                 }
-                return (
-                    <this.c.ul {...node.data?.hProperties}>
-                        {this.mapMdastChildren(node)}
-                    </this.c.ul>
+                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.c.li
-                            data-checked={node.checked}
-                            {...node.data?.hProperties}
-                        >
-                            {this.mapMdastChildren(node)}
-                        </this.c.li>
+                    return this.createElement(
+                        this.c.li,
+                        {
+                            'data-checked': node.checked,
+                            ...node.data?.hProperties,
+                        },
+                        this.mapMdastChildren(node),
                     )
                 }
-                return (
-                    <this.c.li {...node.data?.hProperties}>
-                        {this.mapMdastChildren(node)}
-                    </this.c.li>
+                return this.createElement(
+                    this.c.li,
+                    node.data?.hProperties,
+                    this.mapMdastChildren(node),
                 )
             }
             case 'text': {
@@ -307,10 +670,10 @@ export class MdastToJsx {
                     return []
                 }
                 if (node.data?.hProperties) {
-                    return (
-                        <this.c.span {...node.data.hProperties}>
-                            {node.value}
-                        </this.c.span>
+                    return this.createElement(
+                        this.c.span,
+                        node.data.hProperties,
+                        node.value,
                     )
                 }
                 return node.value
@@ -319,92 +682,95 @@ export class MdastToJsx {
                 const src = node.url || ''
                 const alt = node.alt || ''
                 const title = node.title || ''
-                return (
-                    <this.c.img
-                        src={src}
-                        alt={alt}
-                        title={title}
-                        {...node.data?.hProperties}
-                    />
-                )
+                return this.createElement(this.c.img, {
+                    src,
+                    alt,
+                    title,
+                    ...node.data?.hProperties,
+                })
             }
             case 'link': {
                 const href = node.url || ''
                 const title = node.title || ''
-                return (
-                    <this.c.a {...{ href, title }} {...node.data?.hProperties}>
-                        {this.mapMdastChildren(node)}
-                    </this.c.a>
+                return this.createElement(
+                    this.c.a,
+                    { href, title, ...node.data?.hProperties },
+                    this.mapMdastChildren(node),
                 )
             }
             case 'strong': {
-                return (
-                    <this.c.strong {...node.data?.hProperties}>
-                        {this.mapMdastChildren(node)}
-                    </this.c.strong>
+                return this.createElement(
+                    this.c.strong,
+                    node.data?.hProperties,
+                    this.mapMdastChildren(node),
                 )
             }
             case 'emphasis': {
-                return (
-                    <this.c.em {...node.data?.hProperties}>
-                        {this.mapMdastChildren(node)}
-                    </this.c.em>
+                return this.createElement(
+                    this.c.em,
+                    node.data?.hProperties,
+                    this.mapMdastChildren(node),
                 )
             }
             case 'delete': {
-                return (
-                    <this.c.del {...node.data?.hProperties}>
-                        {this.mapMdastChildren(node)}
-                    </this.c.del>
+                return this.createElement(
+                    this.c.del,
+                    node.data?.hProperties,
+                    this.mapMdastChildren(node),
                 )
             }
             case 'inlineCode': {
                 if (!node.value) {
                     return []
                 }
-                return (
-                    <this.c.code {...node.data?.hProperties}>
-                        {node.value}
-                    </this.c.code>
+                return this.createElement(
+                    this.c.code,
+                    node.data?.hProperties,
+                    node.value,
                 )
             }
             case 'break': {
-                return <this.c.br {...node.data?.hProperties} />
+                return this.createElement(this.c.br, node.data?.hProperties)
             }
             case 'root': {
                 if (node.data?.hProperties) {
-                    return (
-                        <this.c.div {...node.data.hProperties}>
-                            {this.mapMdastChildren(node)}
-                        </this.c.div>
+                    return this.createElement(
+                        this.c.div,
+                        node.data.hProperties,
+                        this.mapMdastChildren(node),
                     )
                 }
-                return <Fragment>{this.mapMdastChildren(node)}</Fragment>
+                return this.createElement(
+                    Fragment,
+                    null,
+                    this.mapMdastChildren(node),
+                )
             }
             case 'table': {
                 const [head, ...body] = React.Children.toArray(
                     this.mapMdastChildren(node),
                 )
-                return (
-                    <this.c.table {...node.data?.hProperties}>
-                        {head && <this.c.thead>{head}</this.c.thead>}
-                        {!!body?.length && <this.c.tbody>{body}</this.c.tbody>}
-                    </this.c.table>
+                return this.createElement(
+                    this.c.table,
+                    node.data?.hProperties,
+                    head && this.createElement(this.c.thead, null, head),
+                    !!body?.length &&
+                        this.createElement(this.c.tbody, null, body),
                 )
             }
             case 'tableRow': {
-                return (
-                    <this.c.tr className='' {...node.data?.hProperties}>
-                        {this.mapMdastChildren(node)}
-                    </this.c.tr>
+                return this.createElement(
+                    this.c.tr,
+                    { className: '', ...node.data?.hProperties },
+                    this.mapMdastChildren(node),
                 )
             }
             case 'tableCell': {
                 let content = this.mapMdastChildren(node)
-                return (
-                    <this.c.td className='' {...node.data?.hProperties}>
-                        {content}
-                    </this.c.td>
+                return this.createElement(
+                    this.c.td,
+                    { className: '', ...node.data?.hProperties },
+                    content,
                 )
             }
             case 'definition': {
@@ -412,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.c.a href={href} {...node.data?.hProperties}>
-                        {this.mapMdastChildren(node)}
-                    </this.c.a>
+                return this.createElement(
+                    this.c.a,
+                    { href, title, ...node.data?.hProperties },
+                    this.mapMdastChildren(node),
                 )
             }
             case 'footnoteReference': {
@@ -442,14 +810,14 @@ export class MdastToJsx {
                     return []
                 }
 
-                return (
-                    <Suspense fallback={null}>
-                        <HtmlToJsxConverter
-                            htmlText={text}
-                            instance={this}
-                            node={node}
-                        />
-                    </Suspense>
+                return this.createElement(
+                    Suspense,
+                    { fallback: null },
+                    this.createElement(HtmlToJsxConverter, {
+                        htmlText: text,
+                        instance: this,
+                        node,
+                    }),
                 )
             }
             case 'imageReference': {
@@ -471,77 +839,6 @@ export class MdastToJsx {
     }
 }
 
-export function getJsxAttrs(
-    node: MdxJsxFlowElement | MdxJsxTextElement,
-    onError: (err: { message: string }) => 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, ' ')})`,
-                })
-                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}})`,
-                })
-            } 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)
 }