safe-mdx 0.0.0 → 0.0.2

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,11 +145,15 @@ 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
                 }
 
-                let attrsList = this.getJsxAttrs(node)
+                let attrsList = getJsxAttrs(node, (err) => {
+                    this.errors.push(err)
+                })
 
                 let attrs = Object.fromEntries(attrsList)
                 return (
@@ -173,8 +186,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 []
             }
@@ -237,9 +248,7 @@ class MdastToJsx {
                 const code = node.value
                 return (
                     <this.c.pre>
-                        <this.c.code className={`language-${language}`}>
-                            {code}
-                        </this.c.code>
+                        <this.c.code>{code}</this.c.code>
                     </this.c.pre>
                 )
             }
@@ -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)
@@ -383,71 +403,78 @@ 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}`,
-                    )
+}
+
+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,
+                        ' ',
+                    )})`,
+                })
+                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 (attr.type !== 'mdxJsxAttribute') {
-                    throw new Error(
-                        `non mdxJsxAttribute is not supported: ${attr}`,
-                    )
+                if (v.value === 'false') {
+                    return [attr.name, false]
                 }
-
-                const v = attr.value
-                if (typeof v === 'string' || typeof v === 'number') {
-                    return [attr.name, v]
+                if (v.value === 'null') {
+                    return [attr.name, null]
                 }
-                if (v === null) {
-                    return [attr.name, true]
+                if (v.value === 'undefined') {
+                    return [attr.name, undefined]
                 }
-                if (v?.type === 'mdxJsxAttributeValueExpression') {
-                    // logger.json({value})
-                    // if it's a number, just return it
-                    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]
-                    }
-                    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)]
-                    }
-
-                    const number = Number(v.value)
-                    if (!isNaN(number)) {
-                        return [attr.name, number]
+                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)]
+                }
 
-                    this.errors.push(
-                        `Expressions in jsx props are not supported (${attr.name}={${v.value}})`,
-                    )
-
-                    // return [attr.name, `{${v.value}}`]
-                } else {
-                    console.log('unhandled attr', { attr }, attr.type)
+                const number = Number(v.value)
+                if (!isNaN(number)) {
+                    return [attr.name, number]
+                }
+                const parsedJson = safeJsonParse(v.value)
+                if (parsedJson) {
+                    return [attr.name, parsedJson]
                 }
 
-                return
-            })
-            .filter(isTruthy) as [string, any][]
-        return attrsList
-    }
+                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 {
@@ -462,7 +489,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) {
@@ -479,3 +509,11 @@ function mdastBfs(node: Parent | Node, cb?: (node: Node | Parent) => any) {
     }
     return result
 }
+
+function safeJsonParse(str: string) {
+    try {
+        return JSON.parse(str)
+    } catch (err) {
+        return null
+    }
+}