safe-mdx 0.0.0

package/README.md

@@ -0,0 +1,86 @@
+<div align='center'>
+    <br/>
+    <br/>
+    <br/>
+    <h3>safe-mdx</h3>
+    <p>Render MDX in React without eval</p>
+    <br/>
+    <br/>
+</div>
+
+## Why
+
+The default MDX renderer uses `eval` to render MDX components. This is a security risk and it's not allowed in some environments like Cloudflare Workers.
+
+Some use cases for this package are:
+
+-   Render MDX in Cloudflare Workers and Vercel Edge
+-   Safely render dynamically generated MDX code, like inside a ChatGPT like interface
+-   Render user generated MDX, like in a multi-tenant SaaS app
+
+<br>
+
+## Install
+
+```
+npm i safe-mdx
+```
+
+## Usage
+
+```tsx
+import { SafeMdxRenderer } from 'safe-mdx'
+
+const code = `
+# Hello world
+
+This is a paragraph
+
+<Heading>Custom component</Heading>
+`
+
+export function Page() {
+    return (
+        <MdxRenderer
+            code={code}
+            components={{
+                // You can pass your own components here
+                Heading({ children }) {
+                    return <h1>{children}</h1>
+                },
+            }}
+        />
+    )
+}
+```
+
+## Change default MDX parser
+
+If you want to use custom MDX plugins, you can pass your own MDX processed ast.
+
+By default `safe-mdx` already has support for
+
+-   frontmatter
+-   gfm
+
+```tsx
+import { SafeMdxRenderer } from 'safe-mdx'
+import { remark } from 'remark'
+import remarkMdx from 'remark-mdx'
+
+const code = `
+# Hello world
+
+This is a paragraph
+
+<Heading>Custom component</Heading>
+`
+
+const parser = remark().use(remarkMdx)
+
+const mdast = parser.parse(code)
+
+export function Page() {
+    return <MdxRenderer code={code} mdast={mdast} />
+}
+```

package/dist/safe-mdx.d.ts

@@ -0,0 +1,6 @@
+export declare function SafeMdxRenderer({ components, code, mdast, }: {
+    components: any;
+    code?: string | undefined;
+    mdast?: any;
+}): any;
+//# sourceMappingURL=safe-mdx.d.ts.map

package/dist/safe-mdx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"safe-mdx.d.ts","sourceRoot":"","sources":["../src/safe-mdx.tsx"],"names":[],"mappings":"AAmBA,wBAAgB,eAAe,CAAC,EAC5B,UAAU,EACV,IAAS,EACT,KAAmB,GACtB;;;;CAAA,OAIA"}

package/dist/safe-mdx.js

@@ -0,0 +1,395 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SafeMdxRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const html_to_jsx_transform_1 = require("html-to-jsx-transform");
+const remark_frontmatter_1 = __importDefault(require("remark-frontmatter"));
+const remark_1 = require("remark");
+const remark_gfm_1 = __importDefault(require("remark-gfm"));
+const remark_mdx_1 = __importDefault(require("remark-mdx"));
+const react_1 = require("react");
+const mdxParser = (0, remark_1.remark)()
+    .use(remark_frontmatter_1.default, ['yaml', 'toml'])
+    .use(remark_gfm_1.default)
+    .use(remark_mdx_1.default);
+function SafeMdxRenderer({ components, code = '', mdast = null, }) {
+    const visitor = new MdastToJsx({ code, mdast, components });
+    const result = visitor.run();
+    return result;
+}
+exports.SafeMdxRenderer = SafeMdxRenderer;
+const nativeTags = [
+    'blockquote',
+    'strong',
+    'em',
+    'del',
+    'br',
+    'hr',
+    'a',
+    'b',
+    'br',
+    'button',
+    'div',
+    'form',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'head',
+    'iframe',
+    'img',
+    'input',
+    'label',
+    'li',
+    'link',
+    'ol',
+    'p',
+    'path',
+    'picture',
+    'script',
+    'section',
+    'source',
+    'span',
+    'sub',
+    'sup',
+    'svg',
+    'table',
+    'tbody',
+    'td',
+    'th',
+    'thead',
+    'tr',
+    'ul',
+    'video',
+    'code',
+    'pre',
+];
+class MdastToJsx {
+    constructor({ code = '', mdast, components = {} }) {
+        this.jsxStr = '';
+        this.errors = [];
+        this.str = code;
+        this.mdast = mdast || mdxParser.parse(code);
+        // TODO add tags and their allowed import sources
+        this.c = Object.assign(Object.assign({}, Object.fromEntries(nativeTags.map((tag) => {
+            return [tag, tag];
+        }))), components);
+    }
+    mapMdastChildren(node) {
+        var _a;
+        const res = (_a = node.children) === null || _a === void 0 ? void 0 : _a.flatMap((child) => this.mdastTransformer(child));
+        if (Array.isArray(res)) {
+            if (res.length === 1) {
+                return res[0];
+            }
+            else {
+                return res.map((x, i) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: x }, i));
+            }
+        }
+        return res || null;
+    }
+    mapJsxChildren(node) {
+        var _a;
+        const res = (_a = node.children) === null || _a === void 0 ? void 0 : _a.flatMap((child, i) => this.jsxTransformer(child));
+        if (Array.isArray(res)) {
+            if (res.length === 1) {
+                return res[0];
+            }
+            else {
+                return res.map((x, i) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: x }, i));
+            }
+        }
+        return res || null;
+    }
+    jsxTransformer(node) {
+        if (!node) {
+            return [];
+        }
+        switch (node.type) {
+            case 'mdxJsxTextElement':
+            case 'mdxJsxFlowElement': {
+                if (!node.name) {
+                    return [];
+                }
+                const Component = accessWithDot(this.c, node.name);
+                if (!Component) {
+                    this.errors.push(`Unsupported jsx tag ${node.name}`);
+                    return null;
+                }
+                let attrsList = this.getJsxAttrs(node);
+                let attrs = Object.fromEntries(attrsList);
+                return ((0, jsx_runtime_1.jsx)(Component, Object.assign({}, attrs, { children: this.mapJsxChildren(node) })));
+            }
+            default: {
+                return this.mdastTransformer(node);
+            }
+        }
+    }
+    run() {
+        const res = this.mdastTransformer(this.mdast);
+        if (Array.isArray(res) && res.length === 1) {
+            return res[0];
+        }
+        return res;
+    }
+    mdastTransformer(node) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        if (!node) {
+            return [];
+        }
+        switch (node.type) {
+            case 'mdxjsEsm': {
+                const start = (_b = (_a = node.position) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.offset;
+                const end = (_d = (_c = node.position) === null || _c === void 0 ? void 0 : _c.end) === null || _d === void 0 ? void 0 : _d.offset;
+                let text = this.str.slice(start, end);
+                // console.log('esm', node)
+                const tree = (_e = node.data) === null || _e === void 0 ? void 0 : _e.estree;
+                return [];
+            }
+            case 'mdxJsxTextElement':
+            case 'mdxJsxFlowElement': {
+                const start = (_g = (_f = node.position) === null || _f === void 0 ? void 0 : _f.start) === null || _g === void 0 ? void 0 : _g.offset;
+                const end = (_j = (_h = node.position) === null || _h === void 0 ? void 0 : _h.end) === null || _j === void 0 ? void 0 : _j.offset;
+                const text = this.str.slice(start, end);
+                try {
+                    this.jsxStr = text;
+                    const result = this.jsxTransformer(node);
+                    if (Array.isArray(result)) {
+                        console.log(`Unexpected array result`);
+                    }
+                    else if (result) {
+                        return result;
+                    }
+                }
+                finally {
+                    this.jsxStr = '';
+                }
+                return [];
+            }
+            case 'mdxFlowExpression':
+            case 'mdxTextExpression': {
+                if (!node.value) {
+                    return [];
+                }
+                return [];
+            }
+            case 'yaml': {
+                if (!node.value) {
+                    return [];
+                }
+                return [];
+            }
+            case 'heading': {
+                const level = node.depth;
+                const Tag = `h${level}`;
+                return (0, jsx_runtime_1.jsx)(Tag, { children: this.mapMdastChildren(node) });
+            }
+            case 'paragraph': {
+                return (0, jsx_runtime_1.jsx)(this.c.p, { children: this.mapMdastChildren(node) });
+            }
+            case 'blockquote': {
+                return ((0, jsx_runtime_1.jsx)(this.c.blockquote, { children: this.mapMdastChildren(node) }));
+            }
+            case 'thematicBreak': {
+                return (0, jsx_runtime_1.jsx)(this.c.hr, {});
+            }
+            case 'code': {
+                if (!node.value) {
+                    return [];
+                }
+                const language = node.lang || '';
+                const code = node.value;
+                return ((0, jsx_runtime_1.jsx)(this.c.pre, { children: (0, jsx_runtime_1.jsx)(this.c.code, { className: `language-${language}`, children: code }) }));
+            }
+            case 'list': {
+                if (node.ordered) {
+                    return ((0, jsx_runtime_1.jsx)(this.c.ol, { start: node.start, children: this.mapMdastChildren(node) }));
+                }
+                return (0, jsx_runtime_1.jsx)(this.c.ul, { children: this.mapMdastChildren(node) });
+            }
+            case 'listItem': {
+                // https://github.com/syntax-tree/mdast-util-gfm-task-list-item#syntax-tree
+                if ((node === null || node === void 0 ? void 0 : node.checked) != null) {
+                    return ((0, jsx_runtime_1.jsx)(this.c.li, { "data-checked": node.checked, children: this.mapMdastChildren(node) }));
+                }
+                return (0, jsx_runtime_1.jsx)(this.c.li, { children: this.mapMdastChildren(node) });
+            }
+            case 'text': {
+                if (!node.value) {
+                    return [];
+                }
+                return node.value;
+            }
+            case 'image': {
+                const src = node.url || '';
+                const alt = node.alt || '';
+                const title = node.title || '';
+                return (0, jsx_runtime_1.jsx)(this.c.img, { src: src, alt: alt, title: title });
+            }
+            case 'link': {
+                const href = node.url || '';
+                const title = node.title || '';
+                return ((0, jsx_runtime_1.jsx)(this.c.a, { href, title, children: this.mapMdastChildren(node) }));
+            }
+            case 'strong': {
+                return ((0, jsx_runtime_1.jsx)(this.c.strong, { children: this.mapMdastChildren(node) }));
+            }
+            case 'emphasis': {
+                return (0, jsx_runtime_1.jsx)(this.c.em, { children: this.mapMdastChildren(node) });
+            }
+            case 'delete': {
+                return (0, jsx_runtime_1.jsx)(this.c.del, { children: this.mapMdastChildren(node) });
+            }
+            case 'inlineCode': {
+                if (!node.value) {
+                    return [];
+                }
+                return (0, jsx_runtime_1.jsx)(this.c.code, { children: node.value });
+            }
+            case 'break': {
+                return (0, jsx_runtime_1.jsx)(this.c.br, {});
+            }
+            case 'root': {
+                return ((0, jsx_runtime_1.jsx)(this.c.div, { className: '', children: this.mapMdastChildren(node) }));
+            }
+            case 'table': {
+                const align = node.align;
+                return ((0, jsx_runtime_1.jsx)(this.c.table, { children: this.mapMdastChildren(node) }));
+            }
+            case 'tableRow': {
+                return ((0, jsx_runtime_1.jsx)(this.c.tr, { className: '', children: this.mapMdastChildren(node) }));
+            }
+            case 'tableCell': {
+                let content = this.mapMdastChildren(node);
+                return (0, jsx_runtime_1.jsx)(this.c.td, { className: '', children: content });
+            }
+            case 'definition': {
+                return [];
+            }
+            case 'footnoteReference': {
+                return [];
+            }
+            case 'footnoteDefinition': {
+                return [];
+            }
+            case 'html': {
+                // console.log('html', node)
+                const start = (_l = (_k = node.position) === null || _k === void 0 ? void 0 : _k.start) === null || _l === void 0 ? void 0 : _l.offset;
+                const end = (_o = (_m = node.position) === null || _m === void 0 ? void 0 : _m.end) === null || _o === void 0 ? void 0 : _o.offset;
+                const text = this.str.slice(start, end);
+                if (!text) {
+                    return [];
+                }
+                const jsx = (0, html_to_jsx_transform_1.htmlToJsx)(text);
+                try {
+                    this.jsxStr = jsx;
+                    const result = this.jsxTransformer(node);
+                    if (Array.isArray(result)) {
+                        console.log(`Unexpected array result`);
+                    }
+                    else if (result) {
+                        return result;
+                    }
+                }
+                finally {
+                    this.jsxStr = '';
+                }
+                return [];
+            }
+            case 'imageReference': {
+                return [];
+            }
+            default: {
+                mdastBfs(node, (node) => {
+                    delete node.position;
+                });
+                throw new Error(`cannot convert node` + JSON.stringify(node, null, 2));
+                return [];
+            }
+        }
+    }
+    getJsxAttrs(node) {
+        let attrsList = node.attributes
+            .map((attr) => {
+            // TODO what is mdxJsxExpressionAttribute
+            if (attr.type === 'mdxJsxExpressionAttribute') {
+                throw new Error(`mdxJsxExpressionAttribute is not supported: ${attr.value}`);
+            }
+            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 === null || v === void 0 ? void 0 : 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];
+                }
+                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);
+            }
+            return;
+        })
+            .filter(isTruthy);
+        return attrsList;
+    }
+}
+function isTruthy(val) {
+    return Boolean(val);
+}
+function accessWithDot(obj, path) {
+    return path
+        .split('.')
+        .map((x) => x.trim())
+        .filter(Boolean)
+        .reduce((o, i) => o[i], obj);
+}
+function mdastBfs(node, cb) {
+    const queue = [node];
+    const result = [];
+    while (queue.length) {
+        const node = queue.shift();
+        let r = cb && node ? cb(node) : node;
+        if (Array.isArray(r)) {
+            queue.push(...r);
+        }
+        else if (r) {
+            result.push(r);
+        }
+        if (node && 'children' in node && node.children) {
+            queue.push(...node.children);
+        }
+    }
+    return result;
+}
+//# sourceMappingURL=safe-mdx.js.map

package/dist/safe-mdx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"safe-mdx.js","sourceRoot":"","sources":["../src/safe-mdx.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,39 @@
+{
+    "name": "safe-mdx",
+    "version": "0.0.0",
+    "private": false,
+    "description": "Render MDX in React without eval",
+    "main": "dist/safe-mdx.js",
+    "types": "dist/safe-mdx.d.ts",
+    "scripts": {
+        "build": "tsc",
+        "prepublishOnly": "pnpm build"
+    },
+    "files": [
+        "dist",
+        "src"
+    ],
+    "keywords": [
+        "mdx"
+    ],
+    "author": "remorses <beats.by.morse@gmail.com>",
+    "license": "MIT",
+    "peerDependencies": {
+        "react": "*"
+    },
+    "dependencies": {
+        "html-to-jsx-transform": "^1.1.0",
+        "mdast": "^3.0.0",
+        "remark": "^15.0.1",
+        "remark-frontmatter": "^5.0.0",
+        "remark-gfm": "^4.0.0",
+        "remark-mdx": "^3.0.0"
+    },
+    "devDependencies": {
+        "@types/mdast": "^4.0.3",
+        "@types/node": "^20.10.0",
+        "@types/react": "18.2.15",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "react": "^18.2.0"
+    }
+}

package/src/safe-mdx.tsx

@@ -0,0 +1,481 @@
+import { htmlToJsx } from 'html-to-jsx-transform'
+import { Node, Parent } from 'mdast'
+import remarkFrontmatter from 'remark-frontmatter'
+
+import { Root, RootContent } from 'mdast'
+import { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx-jsx'
+import { remark } from 'remark'
+import remarkGfm from 'remark-gfm'
+import remarkMdx from 'remark-mdx'
+
+import { Fragment, ReactNode } from 'react'
+
+type MyRootContent = RootContent | Root
+
+const mdxParser = remark()
+    .use(remarkFrontmatter, ['yaml', 'toml'])
+    .use(remarkGfm)
+    .use(remarkMdx) as any
+
+export function SafeMdxRenderer({
+    components,
+    code = '',
+    mdast = null as any,
+}) {
+    const visitor = new MdastToJsx({ code, mdast, components })
+    const result = visitor.run()
+    return result
+}
+
+const nativeTags = [
+    'blockquote',
+    'strong',
+    'em',
+    'del',
+    'br',
+    'hr',
+    'a',
+    'b',
+    'br',
+    'button',
+    'div',
+    'form',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'head',
+    'iframe',
+    'img',
+    'input',
+    'label',
+    'li',
+    'link',
+    'ol',
+    'p',
+    'path',
+    'picture',
+    'script',
+    'section',
+    'source',
+    'span',
+    'sub',
+    'sup',
+    'svg',
+    'table',
+    'tbody',
+    'td',
+    'th',
+    'thead',
+    'tr',
+    'ul',
+    'video',
+    'code',
+    'pre',
+] as const
+
+type ComponentsMap = { [k in (typeof nativeTags)[number]]: any }
+
+class MdastToJsx {
+    mdast: MyRootContent
+    str: string
+    jsxStr: string = ''
+    c: ComponentsMap
+    errors: string[] = []
+    constructor({ code = '', mdast, 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) => {
+                    return [tag, tag]
+                }),
+            ),
+            ...components,
+        }
+    }
+    mapMdastChildren(node: any) {
+        const res = node.children?.flatMap((child) =>
+            this.mdastTransformer(child),
+        )
+        if (Array.isArray(res)) {
+            if (res.length === 1) {
+                return res[0]
+            } else {
+                return res.map((x, i) => <Fragment key={i}>{x}</Fragment>)
+            }
+        }
+        return res || null
+    }
+    mapJsxChildren(node: any) {
+        const res = node.children?.flatMap((child, i) =>
+            this.jsxTransformer(child),
+        )
+        if (Array.isArray(res)) {
+            if (res.length === 1) {
+                return res[0]
+            } else {
+                return res.map((x, i) => <Fragment key={i}>{x}</Fragment>)
+            }
+        }
+        return res || null
+    }
+    jsxTransformer(node: MyRootContent): ReactNode {
+        if (!node) {
+            return []
+        }
+
+        switch (node.type) {
+            case 'mdxJsxTextElement':
+            case 'mdxJsxFlowElement': {
+                if (!node.name) {
+                    return []
+                }
+
+                const Component = accessWithDot(this.c, node.name)
+
+                if (!Component) {
+                    this.errors.push(`Unsupported jsx tag ${node.name}`)
+                    return null
+                }
+
+                let attrsList = this.getJsxAttrs(node)
+
+                let attrs = Object.fromEntries(attrsList)
+                return (
+                    <Component {...attrs}>
+                        {this.mapJsxChildren(node)}
+                    </Component>
+                )
+            }
+            default: {
+                return this.mdastTransformer(node)
+            }
+        }
+    }
+
+    run() {
+        const res = this.mdastTransformer(this.mdast) as ReactNode
+        if (Array.isArray(res) && res.length === 1) {
+            return res[0]
+        }
+        return res
+    }
+
+    mdastTransformer(node: MyRootContent): ReactNode {
+        if (!node) {
+            return []
+        }
+
+        switch (node.type) {
+            case 'mdxjsEsm': {
+                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 []
+            }
+            case 'mdxJsxTextElement':
+            case 'mdxJsxFlowElement': {
+                const start = node.position?.start?.offset
+                const end = node.position?.end?.offset
+                const text = this.str.slice(start, end)
+                try {
+                    this.jsxStr = text
+                    const result = this.jsxTransformer(node)
+                    if (Array.isArray(result)) {
+                        console.log(`Unexpected array result`)
+                    } else if (result) {
+                        return result
+                    }
+                } finally {
+                    this.jsxStr = ''
+                }
+                return []
+            }
+
+            case 'mdxFlowExpression':
+            case 'mdxTextExpression': {
+                if (!node.value) {
+                    return []
+                }
+                return []
+            }
+            case 'yaml': {
+                if (!node.value) {
+                    return []
+                }
+                return []
+            }
+            case 'heading': {
+                const level = node.depth
+
+                const Tag: any = `h${level}`
+                return <Tag>{this.mapMdastChildren(node)}</Tag>
+            }
+            case 'paragraph': {
+                return <this.c.p>{this.mapMdastChildren(node)}</this.c.p>
+            }
+            case 'blockquote': {
+                return (
+                    <this.c.blockquote>
+                        {this.mapMdastChildren(node)}
+                    </this.c.blockquote>
+                )
+            }
+            case 'thematicBreak': {
+                return <this.c.hr />
+            }
+            case 'code': {
+                if (!node.value) {
+                    return []
+                }
+                const language = node.lang || ''
+                const code = node.value
+                return (
+                    <this.c.pre>
+                        <this.c.code className={`language-${language}`}>
+                            {code}
+                        </this.c.code>
+                    </this.c.pre>
+                )
+            }
+
+            case 'list': {
+                if (node.ordered) {
+                    return (
+                        <this.c.ol start={node.start!}>
+                            {this.mapMdastChildren(node)}
+                        </this.c.ol>
+                    )
+                }
+                return <this.c.ul>{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.mapMdastChildren(node)}
+                        </this.c.li>
+                    )
+                }
+                return <this.c.li>{this.mapMdastChildren(node)}</this.c.li>
+            }
+            case 'text': {
+                if (!node.value) {
+                    return []
+                }
+                return node.value
+            }
+            case 'image': {
+                const src = node.url || ''
+                const alt = node.alt || ''
+                const title = node.title || ''
+                return <this.c.img src={src} alt={alt} title={title} />
+            }
+            case 'link': {
+                const href = node.url || ''
+                const title = node.title || ''
+                return (
+                    <this.c.a {...{ href, title }}>
+                        {this.mapMdastChildren(node)}
+                    </this.c.a>
+                )
+            }
+            case 'strong': {
+                return (
+                    <this.c.strong>{this.mapMdastChildren(node)}</this.c.strong>
+                )
+            }
+            case 'emphasis': {
+                return <this.c.em>{this.mapMdastChildren(node)}</this.c.em>
+            }
+            case 'delete': {
+                return <this.c.del>{this.mapMdastChildren(node)}</this.c.del>
+            }
+            case 'inlineCode': {
+                if (!node.value) {
+                    return []
+                }
+                return <this.c.code>{node.value}</this.c.code>
+            }
+            case 'break': {
+                return <this.c.br />
+            }
+            case 'root': {
+                return (
+                    <this.c.div className=''>
+                        {this.mapMdastChildren(node)}
+                    </this.c.div>
+                )
+            }
+            case 'table': {
+                const align = node.align
+                return (
+                    <this.c.table>{this.mapMdastChildren(node)}</this.c.table>
+                )
+            }
+            case 'tableRow': {
+                return (
+                    <this.c.tr className=''>
+                        {this.mapMdastChildren(node)}
+                    </this.c.tr>
+                )
+            }
+            case 'tableCell': {
+                let content = this.mapMdastChildren(node)
+
+                return <this.c.td className=''>{content}</this.c.td>
+            }
+            case 'definition': {
+                return []
+            }
+            case 'footnoteReference': {
+                return []
+            }
+
+            case 'footnoteDefinition': {
+                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)
+                if (!text) {
+                    return []
+                }
+
+                const jsx = htmlToJsx(text)
+                try {
+                    this.jsxStr = jsx
+                    const result = this.jsxTransformer(node)
+                    if (Array.isArray(result)) {
+                        console.log(`Unexpected array result`)
+                    } else if (result) {
+                        return result
+                    }
+                } finally {
+                    this.jsxStr = ''
+                }
+
+                return []
+            }
+            case 'imageReference': {
+                return []
+            }
+
+            default: {
+                mdastBfs(node, (node) => {
+                    delete node.position
+                })
+
+                throw new Error(
+                    `cannot convert node` + JSON.stringify(node, null, 2),
+                )
+
+                return []
+            }
+        }
+    }
+    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}`,
+                    )
+                }
+                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') {
+                    // 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]
+                    }
+
+                    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)
+                }
+
+                return
+            })
+            .filter(isTruthy) as [string, any][]
+        return attrsList
+    }
+}
+
+function isTruthy<T>(val: T | undefined | null | false): val is T {
+    return Boolean(val)
+}
+
+function accessWithDot(obj, path: string) {
+    return path
+        .split('.')
+        .map((x) => x.trim())
+        .filter(Boolean)
+        .reduce((o, i) => o[i], obj)
+}
+
+function mdastBfs(node: Parent | Node, cb?: (node: Node | Parent) => any) {
+    const queue = [node]
+    const result: any[] = []
+    while (queue.length) {
+        const node = queue.shift()
+        let r = cb && node ? cb(node) : node
+        if (Array.isArray(r)) {
+            queue.push(...r)
+        } else if (r) {
+            result.push(r)
+        }
+        if (node && 'children' in node && node.children) {
+            queue.push(...(node.children as any))
+        }
+    }
+    return result
+}