safe-mdx 0.0.0 → 0.0.1

package/src/safe-mdx.tsx

@@ -1,3 +1,4 @@
+import React, { cloneElement } from 'react'
 import { htmlToJsx } from 'html-to-jsx-transform'
 import { Node, Parent } from 'mdast'
 import remarkFrontmatter from 'remark-frontmatter'
@@ -17,6 +18,8 @@ const mdxParser = remark()
     .use(remarkGfm)
     .use(remarkMdx) as any
 
+void React
+
 export function SafeMdxRenderer({
     components,
     code = '',
@@ -32,7 +35,6 @@ const nativeTags = [
     'strong',
     'em',
     'del',
-    'br',
     'hr',
     'a',
     'b',
@@ -74,18 +76,21 @@ const nativeTags = [
     'pre',
 ] as const
 
-type ComponentsMap = { [k in (typeof nativeTags)[number]]: any }
+type ComponentsMap = { [k in (typeof nativeTags)[number]]?: any }
 
-class MdastToJsx {
+export class MdastToJsx {
     mdast: MyRootContent
     str: string
     jsxStr: string = ''
     c: ComponentsMap
-    errors: string[] = []
-    constructor({ code = '', mdast, components = {} as ComponentsMap }) {
+    errors: { message: string }[] = []
+    constructor({
+        code = '',
+        mdast = undefined as any,
+        components = {} as ComponentsMap,
+    }) {
         this.str = code
         this.mdast = mdast || mdxParser.parse(code)
-        // TODO add tags and their allowed import sources
         this.c = {
             ...Object.fromEntries(
                 nativeTags.map((tag) => {
@@ -96,27 +101,31 @@ class MdastToJsx {
         }
     }
     mapMdastChildren(node: any) {
-        const res = node.children?.flatMap((child) =>
-            this.mdastTransformer(child),
-        )
+        const res = node.children
+            ?.flatMap((child) => this.mdastTransformer(child))
+            .filter(Boolean)
         if (Array.isArray(res)) {
             if (res.length === 1) {
                 return res[0]
             } else {
-                return res.map((x, i) => <Fragment key={i}>{x}</Fragment>)
+                return res.map((x, i) =>
+                    React.isValidElement(x) ? cloneElement(x, { key: i }) : x,
+                )
             }
         }
         return res || null
     }
     mapJsxChildren(node: any) {
-        const res = node.children?.flatMap((child, i) =>
-            this.jsxTransformer(child),
-        )
+        const res = node.children
+            ?.flatMap((child, i) => this.jsxTransformer(child))
+            .filter(Boolean)
         if (Array.isArray(res)) {
             if (res.length === 1) {
                 return res[0]
             } else {
-                return res.map((x, i) => <Fragment key={i}>{x}</Fragment>)
+                return res.map((x, i) =>
+                    React.isValidElement(x) ? cloneElement(x, { key: i }) : x,
+                )
             }
         }
         return res || null
@@ -136,7 +145,9 @@ class MdastToJsx {
                 const Component = accessWithDot(this.c, node.name)
 
                 if (!Component) {
-                    this.errors.push(`Unsupported jsx tag ${node.name}`)
+                    this.errors.push({
+                        message: `Unsupported jsx component ${node.name}`,
+                    })
                     return null
                 }
 
@@ -173,8 +184,6 @@ class MdastToJsx {
                 const start = node.position?.start?.offset
                 const end = node.position?.end?.offset
                 let text = this.str.slice(start, end)
-                // console.log('esm', node)
-                const tree = node.data?.estree
 
                 return []
             }
@@ -307,11 +316,7 @@ class MdastToJsx {
                 return <this.c.br />
             }
             case 'root': {
-                return (
-                    <this.c.div className=''>
-                        {this.mapMdastChildren(node)}
-                    </this.c.div>
-                )
+                return <Fragment>{this.mapMdastChildren(node)}</Fragment>
             }
             case 'table': {
                 const align = node.align
@@ -334,6 +339,23 @@ class MdastToJsx {
             case 'definition': {
                 return []
             }
+            case 'linkReference': {
+                let href = ''
+                mdastBfs(this.mdast, (child: any) => {
+                    if (
+                        child.type === 'definition' &&
+                        child.identifier === node.identifier
+                    ) {
+                        href = child.url
+                    }
+                })
+
+                return (
+                    <this.c.a href={href}>
+                        {this.mapMdastChildren(node)}
+                    </this.c.a>
+                )
+            }
             case 'footnoteReference': {
                 return []
             }
@@ -342,8 +364,6 @@ class MdastToJsx {
                 return []
             }
             case 'html': {
-                // console.log('html', node)
-
                 const start = node.position?.start?.offset
                 const end = node.position?.end?.offset
                 const text = this.str.slice(start, end)
@@ -386,11 +406,14 @@ class MdastToJsx {
     getJsxAttrs(node: MdxJsxFlowElement | MdxJsxTextElement) {
         let attrsList = node.attributes
             .map((attr) => {
-                // TODO what is mdxJsxExpressionAttribute
                 if (attr.type === 'mdxJsxExpressionAttribute') {
-                    throw new Error(
-                        `mdxJsxExpressionAttribute is not supported: ${attr.value}`,
-                    )
+                    this.errors.push({
+                        message: `Expressions in jsx props are not supported (${attr.value.replace(
+                            /\n+/g,
+                            ' ',
+                        )})`,
+                    })
+                    return
                 }
                 if (attr.type !== 'mdxJsxAttribute') {
                     throw new Error(
@@ -406,8 +429,6 @@ class MdastToJsx {
                     return [attr.name, true]
                 }
                 if (v?.type === 'mdxJsxAttributeValueExpression') {
-                    // logger.json({value})
-                    // if it's a number, just return it
                     if (v.value === 'true') {
                         return [attr.name, true]
                     }
@@ -420,13 +441,15 @@ class MdastToJsx {
                     if (v.value === 'undefined') {
                         return [attr.name, undefined]
                     }
-                    if (
-                        // TODO add a way to parse ' and `
-                        ['"'].some(
-                            (q) => v.value.startsWith(q) && v.value.endsWith(q),
-                        )
-                    ) {
-                        return [attr.name, JSON.parse(v.value)]
+                    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)
@@ -434,11 +457,9 @@ class MdastToJsx {
                         return [attr.name, number]
                     }
 
-                    this.errors.push(
-                        `Expressions in jsx props are not supported (${attr.name}={${v.value}})`,
-                    )
-
-                    // return [attr.name, `{${v.value}}`]
+                    this.errors.push({
+                        message: `Expressions in jsx props are not supported (${attr.name}={${v.value}})`,
+                    })
                 } else {
                     console.log('unhandled attr', { attr }, attr.type)
                 }
@@ -462,7 +483,10 @@ function accessWithDot(obj, path: string) {
         .reduce((o, i) => o[i], obj)
 }
 
-function mdastBfs(node: Parent | Node, cb?: (node: Node | Parent) => any) {
+export function mdastBfs(
+    node: Parent | Node,
+    cb?: (node: Node | Parent) => any,
+) {
     const queue = [node]
     const result: any[] = []
     while (queue.length) {