safe-mdx 0.0.1 → 0.0.3

package/src/safe-mdx.tsx

@@ -151,7 +151,9 @@ export class MdastToJsx {
                     return null
                 }
 
-                let attrsList = this.getJsxAttrs(node)
+                let attrsList = getJsxAttrs(node, (err) => {
+                    this.errors.push(err)
+                })
 
                 let attrs = Object.fromEntries(attrsList)
                 return (
@@ -246,9 +248,7 @@ export 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>
                 )
             }
@@ -319,9 +319,14 @@ export class MdastToJsx {
                 return <Fragment>{this.mapMdastChildren(node)}</Fragment>
             }
             case 'table': {
-                const align = node.align
+                const [head, ...body] = React.Children.toArray(
+                    this.mapMdastChildren(node),
+                )
                 return (
-                    <this.c.table>{this.mapMdastChildren(node)}</this.c.table>
+                    <this.c.table>
+                        {head && <this.c.thead>{head}</this.c.thead>}
+                        {!!body?.length && <this.c.tbody>{body}</this.c.tbody>}
+                    </this.c.table>
                 )
             }
             case 'tableRow': {
@@ -403,72 +408,78 @@ export class MdastToJsx {
             }
         }
     }
-    getJsxAttrs(node: MdxJsxFlowElement | MdxJsxTextElement) {
-        let attrsList = node.attributes
-            .map((attr) => {
-                if (attr.type === 'mdxJsxExpressionAttribute') {
-                    this.errors.push({
-                        message: `Expressions in jsx props are not supported (${attr.value.replace(
-                            /\n+/g,
-                            ' ',
-                        )})`,
-                    })
-                    return
+}
+
+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') {
-                    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]
+                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({
-                        message: `Expressions in jsx props are not supported (${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 {
@@ -503,3 +514,11 @@ export function mdastBfs(
     }
     return result
 }
+
+function safeJsonParse(str: string) {
+    try {
+        return JSON.parse(str)
+    } catch (err) {
+        return null
+    }
+}