safe-mdx 1.0.3 → 1.1.0

package/src/safe-mdx.tsx

@@ -1,10 +1,10 @@
-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 { Fragment, ReactNode } from 'react'
-import { completeJsxTags } from './streaming.js'
 
 const HtmlToJsxConverter = React.lazy(() =>
     import('./HtmlToJsxConverter.js').then((module) => ({
@@ -23,27 +23,47 @@ declare module 'mdast' {
     }
 }
 
-export type CustomTransformer = (
+export type RenderNode = (
     node: MyRootContent,
     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,
 }: {
     components?: ComponentsMap
     markdown?: string
     mdast: MyRootContent
-    renderNode?: CustomTransformer
+    renderNode?: RenderNode
+    componentPropsSchema?: ComponentPropsSchema
+    createElement?: CreateElementFunction
 }) {
     const visitor = new MdastToJsx({
         markdown,
         mdast,
         components,
         renderNode,
+        componentPropsSchema,
+        createElement,
     })
     const result = visitor.run()
     return result
@@ -54,14 +74,18 @@ export class MdastToJsx {
     str: string
     jsxStr: string = ''
     c: ComponentsMap
-    errors: { message: string }[] = []
-    renderNode?: CustomTransformer
+    errors: SafeMdxError[] = []
+    renderNode?: RenderNode
+    componentPropsSchema?: ComponentPropsSchema
+    createElement: CreateElementFunction
 
     constructor({
         markdown: code = '',
         mdast,
         components = {} as ComponentsMap,
         renderNode,
+        componentPropsSchema,
+        createElement = React.createElement,
     }: {
         markdown?: string
         mdast: MyRootContent
@@ -70,6 +94,8 @@ export class MdastToJsx {
             node: MyRootContent,
             transform: (node: MyRootContent) => ReactNode,
         ) => ReactNode | undefined
+        componentPropsSchema?: ComponentPropsSchema
+        createElement?: CreateElementFunction
     }) {
         this.str = code
 
@@ -77,6 +103,10 @@ export class MdastToJsx {
 
         this.renderNode = renderNode
 
+        this.componentPropsSchema = componentPropsSchema
+
+        this.createElement = createElement
+
         this.c = {
             ...Object.fromEntries(
                 nativeTags.map((tag) => {
@@ -86,6 +116,36 @@ 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))
@@ -137,6 +197,7 @@ export class MdastToJsx {
                 if (!Component) {
                     this.errors.push({
                         message: `Unsupported jsx component ${node.name}`,
+                        line: node.position?.start?.line,
                     })
                     return null
                 }
@@ -146,11 +207,11 @@ export class MdastToJsx {
                 })
 
                 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: {
                 return this.mdastTransformer(node)
@@ -226,28 +287,16 @@ 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,10 +304,10 @@ 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) {
@@ -269,49 +318,31 @@ 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': {
                 if (!node.value) {
                     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 +350,70 @@ 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': {
@@ -421,10 +430,10 @@ export class MdastToJsx {
                     }
                 })
 
-                return (
-                    <this.c.a href={href} {...node.data?.hProperties}>
-                        {this.mapMdastChildren(node)}
-                    </this.c.a>
+                return this.createElement(
+                    this.c.a,
+                    { href, ...node.data?.hProperties },
+                    this.mapMdastChildren(node)
                 )
             }
             case 'footnoteReference': {
@@ -442,14 +451,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': {
@@ -473,15 +482,17 @@ export class MdastToJsx {
 
 export function getJsxAttrs(
     node: MdxJsxFlowElement | MdxJsxTextElement,
-    onError: (err: { message: string }) => void = console.error,
+    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
             }
@@ -531,6 +542,7 @@ export function getJsxAttrs(
 
                 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)