safe-mdx 0.0.6 → 0.1.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,44 @@ import remarkGfm from 'remark-gfm'
 import remarkMdx from 'remark-mdx'
 
 import { Fragment, ReactNode } from 'react'
-import { remarkMarkAndUnravel } from './plugins.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 +61,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 +175,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 +228,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 +260,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 +285,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 +327,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 +387,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 +395,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 +423,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 +485,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 +634,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 +933,98 @@ 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
+        }
+    })

package/dist/plugins.d.ts

@@ -1,12 +0,0 @@
-import { Root } from 'mdast';
-/**
- * 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 declare function remarkMarkAndUnravel(): (tree: Root) => void;
-//# sourceMappingURL=plugins.d.ts.map

package/dist/plugins.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"plugins.d.ts","sourceRoot":"","sources":["../src/plugins.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAe,MAAM,OAAO,CAAA;AAKzC;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,WACT,IAAI,UAuE9B"}

package/dist/plugins.js

@@ -1,68 +0,0 @@
-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) {
-        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 = [];
-                    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;
-                }
-            }
-        });
-    };
-}
-//# sourceMappingURL=plugins.js.map

package/dist/plugins.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"plugins.js","sourceRoot":"","sources":["../src/plugins.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAA;AAGxC;;;;;;;;GAQG;AACH,MAAM,UAAU,oBAAoB;IAChC,OAAO,UAAU,IAAU;QAEvB,KAAK,CAAC,IAAI,EAAE,UAAU,IAAI,EAAE,KAAK,EAAE,MAAM;YACrC,IAAI,MAAM,GAAG,CAAC,CAAC,CAAA;YACf,IAAI,GAAG,GAAG,IAAI,CAAA;YACd,IAAI,SAAS,GAAG,KAAK,CAAA;YAGrB,IACI,MAAM;gBACN,OAAO,KAAK,KAAK,QAAQ;gBACzB,IAAI,CAAC,IAAI,KAAK,WAAW,EAC3B;gBACE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAA;gBAE9B,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAC,MAAM,EAAE;oBAC/B,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAA;oBAE9B,IACI,KAAK,CAAC,IAAI,KAAK,mBAAmB;wBAClC,KAAK,CAAC,IAAI,KAAK,mBAAmB,EACpC;wBACE,SAAS,GAAG,IAAI,CAAA;qBACnB;yBAAM,IACH,KAAK,CAAC,IAAI,KAAK,MAAM;wBACrB,kBAAkB,CAAC,KAAK,CAAC,KAAK,EAAE;4BAC5B,KAAK,EAAE,MAAM;4BACb,IAAI,EAAE,IAAI;yBACb,CAAC,KAAK,EAAE,EACX;wBACE,SAAS;qBACZ;yBAAM;wBACH,GAAG,GAAG,KAAK,CAAA;wBACX,MAAK;qBACR;iBACJ;gBAED,IAAI,GAAG,IAAI,SAAS,EAAE;oBAClB,MAAM,GAAG,CAAC,CAAC,CAAA;oBAEX,MAAM,WAAW,GAAkB,EAAE,CAAA;oBAErC,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAC,MAAM,EAAE;wBAC/B,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAA;wBAE9B,IAAI,KAAK,CAAC,IAAI,KAAK,mBAAmB,EAAE;4BACpC,wEAAwE;4BACxE,KAAK,CAAC,IAAI,GAAG,mBAAmB,CAAA;yBACnC;wBAED,IAAI,KAAK,CAAC,IAAI,KAAK,mBAAmB,EAAE;4BACpC,wEAAwE;4BACxE,KAAK,CAAC,IAAI,GAAG,mBAAmB,CAAA;yBACnC;wBAED,IACI,KAAK,CAAC,IAAI,KAAK,MAAM;4BACrB,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAC1C;4BACE,SAAS;yBACZ;6BAAM;4BACH,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;yBAC1B;qBACJ;oBAED,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,GAAG,WAAW,CAAC,CAAA;oBAChD,OAAO,KAAK,CAAA;iBACf;aACJ;QACL,CAAC,CAAC,CAAA;IACN,CAAC,CAAA;AACL,CAAC"}

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
-                }
-            }
-        })
-    }
-}