safe-mdx 0.0.6 → 0.2.0

package/src/safe-mdx.tsx

@@ -3,6 +3,9 @@ import { htmlToJsx } from 'html-to-jsx-transform'
 import { Node, Parent, RootContent } from 'mdast'
 import remarkFrontmatter from 'remark-frontmatter'
 
+import { collapseWhiteSpace } from 'collapse-white-space'
+import { visit } from 'unist-util-visit'
+
 import { Root, Yaml } from 'mdast'
 import { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx-jsx'
 import { remark } from 'remark'
@@ -10,34 +13,45 @@ import remarkGfm from 'remark-gfm'
 import remarkMdx from 'remark-mdx'
 
 import { Fragment, ReactNode } from 'react'
-import { remarkMarkAndUnravel } from './plugins.js'
+import { completeJsxTags } from './streaming.js'
 
 type MyRootContent = RootContent | Root
 
-const processor = remark()
-    .use(remarkMdx)
-    .use(remarkMarkAndUnravel)
-    .use(remarkFrontmatter, ['yaml', 'toml'])
-    .use(remarkGfm)
-    .use(() => {
-        return (tree, file) => {
-            file.data.ast = tree
-        }
-    })
-
 export function mdxParse(code: string) {
-    const file = processor.processSync(code)
+    const file = mdxProcessor.processSync(code)
     return file.data.ast as Root
 }
 
-void React
+declare module 'mdast' {
+    export interface Data {
+        hProperties?: {
+            id?: string
+        }
+    }
+}
+
+export type CustomTransformer = (
+    node: MyRootContent,
+    transform: (node: MyRootContent) => ReactNode,
+) => ReactNode | undefined
 
 export function SafeMdxRenderer({
     components,
     code = '',
     mdast = null as any,
+    customTransformer,
+}: {
+    components?: ComponentsMap
+    code?: string
+    mdast?: MyRootContent
+    customTransformer?: CustomTransformer
 }) {
-    const visitor = new MdastToJsx({ code, mdast, components })
+    const visitor = new MdastToJsx({
+        code,
+        mdast,
+        components,
+        customTransformer,
+    })
     const result = visitor.run()
     return result
 }
@@ -48,13 +62,25 @@ export class MdastToJsx {
     jsxStr: string = ''
     c: ComponentsMap
     errors: { message: string }[] = []
+    customTransformer?: CustomTransformer
+
     constructor({
         code = '',
         mdast = undefined as any,
         components = {} as ComponentsMap,
+        customTransformer,
+    }: {
+        code?: string
+        mdast?: MyRootContent
+        components?: ComponentsMap
+        customTransformer?: (
+            node: MyRootContent,
+            transform: (node: MyRootContent) => ReactNode,
+        ) => ReactNode | undefined
     }) {
         this.str = code
         this.mdast = mdast || mdxParse(code)
+        this.customTransformer = customTransformer
 
         this.c = {
             ...Object.fromEntries(
@@ -150,6 +176,17 @@ export class MdastToJsx {
             return []
         }
 
+        // Check for custom transformer first, giving it higher priority
+        if (this.customTransformer) {
+            const customResult = this.customTransformer(
+                node,
+                this.mdastTransformer.bind(this),
+            )
+            if (customResult !== undefined) {
+                return customResult
+            }
+        }
+
         switch (node.type) {
             case 'mdxjsEsm': {
                 const start = node.position?.start?.offset
@@ -192,16 +229,24 @@ export class MdastToJsx {
             }
             case 'heading': {
                 const level = node.depth
-
                 const Tag = this.c[`h${level}`] ?? `h${level}`
-                return <Tag>{this.mapMdastChildren(node)}</Tag>
+
+                return (
+                    <Tag {...node.data?.hProperties}>
+                        {this.mapMdastChildren(node)}
+                    </Tag>
+                )
             }
             case 'paragraph': {
-                return <this.c.p>{this.mapMdastChildren(node)}</this.c.p>
+                return (
+                    <this.c.p {...node.data?.hProperties}>
+                        {this.mapMdastChildren(node)}
+                    </this.c.p>
+                )
             }
             case 'blockquote': {
                 return (
-                    <this.c.blockquote>
+                    <this.c.blockquote {...node.data?.hProperties}>
                         {this.mapMdastChildren(node)}
                     </this.c.blockquote>
                 )
@@ -216,7 +261,7 @@ export class MdastToJsx {
                 const language = node.lang || ''
                 const code = node.value
                 const codeBlock = (className?: string) => (
-                    <this.c.pre>
+                    <this.c.pre {...node.data?.hProperties}>
                         <this.c.code className={className}>{code}</this.c.code>
                     </this.c.pre>
                 )
@@ -241,23 +286,37 @@ export class MdastToJsx {
             case 'list': {
                 if (node.ordered) {
                     return (
-                        <this.c.ol start={node.start!}>
+                        <this.c.ol
+                            start={node.start!}
+                            {...node.data?.hProperties}
+                        >
                             {this.mapMdastChildren(node)}
                         </this.c.ol>
                     )
                 }
-                return <this.c.ul>{this.mapMdastChildren(node)}</this.c.ul>
+                return (
+                    <this.c.ul {...node.data?.hProperties}>
+                        {this.mapMdastChildren(node)}
+                    </this.c.ul>
+                )
             }
             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}>
+                        <this.c.li
+                            data-checked={node.checked}
+                            {...node.data?.hProperties}
+                        >
                             {this.mapMdastChildren(node)}
                         </this.c.li>
                     )
                 }
-                return <this.c.li>{this.mapMdastChildren(node)}</this.c.li>
+                return (
+                    <this.c.li {...node.data?.hProperties}>
+                        {this.mapMdastChildren(node)}
+                    </this.c.li>
+                )
             }
             case 'text': {
                 if (!node.value) {
@@ -269,33 +328,54 @@ 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} />
+                return (
+                    <this.c.img
+                        src={src}
+                        alt={alt}
+                        title={title}
+                        {...node.data?.hProperties}
+                    />
+                )
             }
             case 'link': {
                 const href = node.url || ''
                 const title = node.title || ''
                 return (
-                    <this.c.a {...{ href, title }}>
+                    <this.c.a {...{ href, title }} {...node.data?.hProperties}>
                         {this.mapMdastChildren(node)}
                     </this.c.a>
                 )
             }
             case 'strong': {
                 return (
-                    <this.c.strong>{this.mapMdastChildren(node)}</this.c.strong>
+                    <this.c.strong {...node.data?.hProperties}>
+                        {this.mapMdastChildren(node)}
+                    </this.c.strong>
                 )
             }
             case 'emphasis': {
-                return <this.c.em>{this.mapMdastChildren(node)}</this.c.em>
+                return (
+                    <this.c.em {...node.data?.hProperties}>
+                        {this.mapMdastChildren(node)}
+                    </this.c.em>
+                )
             }
             case 'delete': {
-                return <this.c.del>{this.mapMdastChildren(node)}</this.c.del>
+                return (
+                    <this.c.del {...node.data?.hProperties}>
+                        {this.mapMdastChildren(node)}
+                    </this.c.del>
+                )
             }
             case 'inlineCode': {
                 if (!node.value) {
                     return []
                 }
-                return <this.c.code>{node.value}</this.c.code>
+                return (
+                    <this.c.code {...node.data?.hProperties}>
+                        {node.value}
+                    </this.c.code>
+                )
             }
             case 'break': {
                 return <this.c.br />
@@ -308,7 +388,7 @@ export class MdastToJsx {
                     this.mapMdastChildren(node),
                 )
                 return (
-                    <this.c.table>
+                    <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>
@@ -316,15 +396,18 @@ export class MdastToJsx {
             }
             case 'tableRow': {
                 return (
-                    <this.c.tr className=''>
+                    <this.c.tr className='' {...node.data?.hProperties}>
                         {this.mapMdastChildren(node)}
                     </this.c.tr>
                 )
             }
             case 'tableCell': {
                 let content = this.mapMdastChildren(node)
-
-                return <this.c.td className=''>{content}</this.c.td>
+                return (
+                    <this.c.td className='' {...node.data?.hProperties}>
+                        {content}
+                    </this.c.td>
+                )
             }
             case 'definition': {
                 return []
@@ -341,7 +424,7 @@ export class MdastToJsx {
                 })
 
                 return (
-                    <this.c.a href={href}>
+                    <this.c.a href={href} {...node.data?.hProperties}>
                         {this.mapMdastChildren(node)}
                     </this.c.a>
                 )
@@ -403,10 +486,9 @@ export function getJsxAttrs(
         .map((attr) => {
             if (attr.type === 'mdxJsxExpressionAttribute') {
                 onError({
-                    message: `Expressions in jsx props are not supported (${attr.value.replace(
-                        /\n+/g,
-                        ' ',
-                    )})`,
+                    message: `Expressions in jsx props are not supported (${attr.value
+                        .replace(/\n+/g, ' ')
+                        .replace(/ +/g, ' ')})`,
                 })
                 return
             }
@@ -553,6 +635,22 @@ const nativeTags = [
     'video',
     'code',
     'pre',
+    'figure',
+    'canvas',
+    'details',
+    'dl',
+    'dt',
+    'dd',
+    'fieldset',
+    'footer',
+    'header',
+    'legend',
+    'main',
+    'mark',
+    'nav',
+    'progress',
+    'summary',
+    'time',
 ] as const
 
 const supportedLanguages = [
@@ -836,4 +934,100 @@ const supportedLanguages = [
 ] as const
 const supportedLanguagesSet = new Set(supportedLanguages)
 
-type ComponentsMap = { [k in (typeof nativeTags)[number]]?: any }
+type ComponentsMap = { [k in (typeof nativeTags)[number]]?: any } & {
+    [key: string]: any
+}
+
+/**
+ * https://github.com/mdx-js/mdx/blob/b3351fadcb6f78833a72757b7135dcfb8ab646fe/packages/mdx/lib/plugin/remark-mark-and-unravel.js
+ * A tiny plugin that unravels `<p><h1>x</h1></p>` but also
+ * `<p><Component /></p>` (so it has no knowledge of "HTML").
+ *
+ * It also marks JSX as being explicitly JSX, so when a user passes a `h1`
+ * component, it is used for `# heading` but not for `<h1>heading</h1>`.
+ *
+ */
+export function remarkMarkAndUnravel() {
+    return function (tree: Root) {
+        visit(tree, function (node, index, parent) {
+            let offset = -1
+            let all = true
+            let oneOrMore = false
+
+            if (
+                parent &&
+                typeof index === 'number' &&
+                node.type === 'paragraph'
+            ) {
+                const children = node.children
+
+                while (++offset < children.length) {
+                    const child = children[offset]
+
+                    if (
+                        child.type === 'mdxJsxTextElement' ||
+                        child.type === 'mdxTextExpression'
+                    ) {
+                        oneOrMore = true
+                    } else if (
+                        child.type === 'text' &&
+                        collapseWhiteSpace(child.value, {
+                            style: 'html',
+                            trim: true,
+                        }) === ''
+                    ) {
+                        // Empty.
+                    } else {
+                        all = false
+                        break
+                    }
+                }
+
+                if (all && oneOrMore) {
+                    offset = -1
+
+                    const newChildren: RootContent[] = []
+
+                    while (++offset < children.length) {
+                        const child = children[offset]
+
+                        if (child.type === 'mdxJsxTextElement') {
+                            // @ts-expect-error: mutate because it is faster; content model is fine.
+                            child.type = 'mdxJsxFlowElement'
+                        }
+
+                        if (child.type === 'mdxTextExpression') {
+                            // @ts-expect-error: mutate because it is faster; content model is fine.
+                            child.type = 'mdxFlowExpression'
+                        }
+
+                        if (
+                            child.type === 'text' &&
+                            /^[\t\r\n ]+$/.test(String(child.value))
+                        ) {
+                            // Empty.
+                        } else {
+                            newChildren.push(child)
+                        }
+                    }
+
+                    parent.children.splice(index, 1, ...newChildren)
+                    return index
+                }
+            }
+        })
+    }
+}
+
+const mdxProcessor = remark()
+    .use(remarkMdx)
+    .use(remarkFrontmatter, ['yaml', 'toml'])
+    .use(remarkGfm)
+    .use(remarkMarkAndUnravel)
+    .use(() => {
+        return (tree, file) => {
+            file.data.ast = tree
+        }
+    })
+
+export { completeJsxTags }

package/src/streaming.tsx

@@ -0,0 +1,60 @@
+// taken from https://www.prompt-kit.com/docs/jsx-preview
+
+function matchJsxTag(code: string) {
+    if (code.trim() === '') {
+        return null
+    }
+
+    const tagRegex = /<\/?([a-zA-Z][a-zA-Z0-9]*)\s*([^>]*?)(\/)?>/
+    const match = code.match(tagRegex)
+
+    if (!match || typeof match.index === 'undefined') {
+        return null
+    }
+
+    const [fullMatch, tagName, attributes, selfClosing] = match
+
+    const type = selfClosing
+        ? 'self-closing'
+        : fullMatch.startsWith('</')
+        ? 'closing'
+        : 'opening'
+
+    return {
+        tag: fullMatch,
+        tagName,
+        type,
+        attributes: attributes.trim(),
+        startIndex: match.index,
+        endIndex: match.index + fullMatch.length,
+    }
+}
+
+export function completeJsxTags(code: string) {
+    const stack: string[] = []
+    let result = ''
+    let currentPosition = 0
+
+    while (currentPosition < code.length) {
+        const match = matchJsxTag(code.slice(currentPosition))
+        if (!match) break
+        const { tagName, type, endIndex } = match
+
+        if (type === 'opening') {
+            stack.push(tagName)
+        } else if (type === 'closing') {
+            stack.pop()
+        }
+
+        result += code.slice(currentPosition, currentPosition + endIndex)
+        currentPosition += endIndex
+    }
+
+    return (
+        result +
+        stack
+            .reverse()
+            .map((tag) => `</${tag}>`)
+            .join('')
+    )
+}

package/src/plugins.ts

@@ -1,87 +0,0 @@
-import { Root, RootContent } from 'mdast'
-import { collapseWhiteSpace } from 'collapse-white-space'
-import { visit } from 'unist-util-visit'
-
-
-/**
- * https://github.com/mdx-js/mdx/blob/b3351fadcb6f78833a72757b7135dcfb8ab646fe/packages/mdx/lib/plugin/remark-mark-and-unravel.js
- * A tiny plugin that unravels `<p><h1>x</h1></p>` but also
- * `<p><Component /></p>` (so it has no knowledge of "HTML").
- *
- * It also marks JSX as being explicitly JSX, so when a user passes a `h1`
- * component, it is used for `# heading` but not for `<h1>heading</h1>`.
- *
- */
-export function remarkMarkAndUnravel() {
-    return function (tree: Root) {
-        
-        visit(tree, function (node, index, parent) {
-            let offset = -1
-            let all = true
-            let oneOrMore = false
-            
-
-            if (
-                parent &&
-                typeof index === 'number' &&
-                node.type === 'paragraph'
-            ) {
-                const children = node.children
-
-                while (++offset < children.length) {
-                    const child = children[offset]
-
-                    if (
-                        child.type === 'mdxJsxTextElement' ||
-                        child.type === 'mdxTextExpression'
-                    ) {
-                        oneOrMore = true
-                    } else if (
-                        child.type === 'text' &&
-                        collapseWhiteSpace(child.value, {
-                            style: 'html',
-                            trim: true,
-                        }) === ''
-                    ) {
-                        // Empty.
-                    } else {
-                        all = false
-                        break
-                    }
-                }
-
-                if (all && oneOrMore) {
-                    offset = -1
-
-                    const newChildren: RootContent[] = []
-
-                    while (++offset < children.length) {
-                        const child = children[offset]
-
-                        if (child.type === 'mdxJsxTextElement') {
-                            // @ts-expect-error: mutate because it is faster; content model is fine.
-                            child.type = 'mdxJsxFlowElement'
-                        }
-
-                        if (child.type === 'mdxTextExpression') {
-                            // @ts-expect-error: mutate because it is faster; content model is fine.
-                            child.type = 'mdxFlowExpression'
-                        }
-
-                        if (
-                            child.type === 'text' &&
-                            /^[\t\r\n ]+$/.test(String(child.value))
-                        ) {
-                            // Empty.
-                        } else {
-                            newChildren.push(child)
-                        }
-                    }
-
-                    parent.children.splice(index, 1, ...newChildren)
-                    return index
-                }
-            }
-        })
-    }
-}