safe-mdx 1.1.0 → 1.3.0

package/dist/safe-mdx.js

@@ -1,9 +1,12 @@
 import React, { Suspense, cloneElement } from 'react';
+import Evaluate from 'eval-estree-expression';
 import { Fragment } from 'react';
+import { DynamicEsmComponent } from './dynamic-esm-component.js';
+import { parseEsmImports, extractComponentInfo } from './esm-parser.js';
 const HtmlToJsxConverter = React.lazy(() => import('./HtmlToJsxConverter.js').then((module) => ({
     default: module.HtmlToJsxConverter,
 })));
-export const SafeMdxRenderer = React.memo(function SafeMdxRenderer({ components, markdown = '', mdast = null, renderNode, componentPropsSchema, createElement, }) {
+export const SafeMdxRenderer = React.memo(function SafeMdxRenderer({ components, markdown = '', mdast = null, renderNode, componentPropsSchema, createElement, allowClientEsmImports = false, addMarkdownLineNumbers = false, }) {
     const visitor = new MdastToJsx({
         markdown,
         mdast,
@@ -11,6 +14,8 @@ export const SafeMdxRenderer = React.memo(function SafeMdxRenderer({ components,
         renderNode,
         componentPropsSchema,
         createElement,
+        allowClientEsmImports,
+        addMarkdownLineNumbers,
     });
     const result = visitor.run();
     return result;
@@ -24,12 +29,17 @@ export class MdastToJsx {
     renderNode;
     componentPropsSchema;
     createElement;
-    constructor({ markdown: code = '', mdast, components = {}, renderNode, componentPropsSchema, createElement = React.createElement, }) {
+    esmImports = new Map();
+    allowClientEsmImports;
+    addMarkdownLineNumbers;
+    constructor({ markdown: code = '', mdast, components = {}, renderNode, componentPropsSchema, createElement = React.createElement, allowClientEsmImports = false, addMarkdownLineNumbers = false, }) {
         this.str = code;
         this.mdast = mdast;
         this.renderNode = renderNode;
         this.componentPropsSchema = componentPropsSchema;
         this.createElement = createElement;
+        this.allowClientEsmImports = allowClientEsmImports;
+        this.addMarkdownLineNumbers = addMarkdownLineNumbers;
         this.c = {
             ...Object.fromEntries(nativeTags.map((tag) => {
                 return [tag, tag];
@@ -37,8 +47,22 @@ export class MdastToJsx {
             ...components,
         };
     }
+    addLineNumberToProps(props, node) {
+        if (!this.addMarkdownLineNumbers) {
+            return props || {};
+        }
+        const lineNumber = node.position?.start?.line;
+        if (lineNumber) {
+            return {
+                ...props,
+                'data-markdown-line': lineNumber,
+            };
+        }
+        return props || {};
+    }
     validateComponentProps(componentName, props, line) {
-        if (!this.componentPropsSchema || !this.componentPropsSchema[componentName]) {
+        if (!this.componentPropsSchema ||
+            !this.componentPropsSchema[componentName]) {
             return;
         }
         const schema = this.componentPropsSchema[componentName];
@@ -104,15 +128,32 @@ export class MdastToJsx {
                 if (!node.name) {
                     return [];
                 }
-                const Component = accessWithDot(this.c, node.name);
-                if (!Component) {
-                    this.errors.push({
-                        message: `Unsupported jsx component ${node.name}`,
-                        line: node.position?.start?.line,
+                // Check if this is an ESM imported component (only if allowed)
+                const esmImportInfo = this.allowClientEsmImports
+                    ? this.esmImports.get(node.name)
+                    : null;
+                let Component;
+                if (esmImportInfo) {
+                    // Handle ESM imported component
+                    const { importUrl, componentName } = extractComponentInfo(esmImportInfo);
+                    Component = DynamicEsmComponent;
+                    let attrsList = this.getJsxAttrs(node, (err) => {
+                        this.errors.push(err);
                     });
-                    return null;
+                    let attrs = Object.fromEntries(attrsList);
+                    return this.createElement(Component, { ...attrs, importUrl, componentName }, this.mapJsxChildren(node));
                 }
-                let attrsList = getJsxAttrs(node, (err) => {
+                else {
+                    Component = accessWithDot(this.c, node.name);
+                    if (!Component) {
+                        this.errors.push({
+                            message: `Unsupported jsx component ${node.name}`,
+                            line: node.position?.start?.line,
+                        });
+                        return null;
+                    }
+                }
+                let attrsList = this.getJsxAttrs(node, (err) => {
                     this.errors.push(err);
                 });
                 let attrs = Object.fromEntries(attrsList);
@@ -125,6 +166,225 @@ export class MdastToJsx {
             }
         }
     }
+    transformJsxElement(jsxElement, onError, line) {
+        try {
+            // Handle JSX opening element
+            if (jsxElement.openingElement) {
+                const tagName = jsxElement.openingElement.name?.type === 'JSXIdentifier'
+                    ? jsxElement.openingElement.name.name
+                    : null;
+                if (!tagName) {
+                    onError?.({
+                        message: 'JSX element missing component name',
+                        line: line,
+                    });
+                    return null;
+                }
+                // Check if this is an ESM imported component (only if allowed)
+                const esmImportInfo = this.allowClientEsmImports
+                    ? this.esmImports.get(tagName)
+                    : null;
+                let Component;
+                if (esmImportInfo) {
+                    // Handle ESM imported component
+                    const { importUrl, componentName } = extractComponentInfo(esmImportInfo);
+                    Component = DynamicEsmComponent;
+                }
+                else {
+                    // Get the component from the regular component map
+                    Component = accessWithDot(this.c, tagName);
+                    if (!Component) {
+                        onError?.({
+                            message: `Unsupported jsx component ${tagName} in attribute`,
+                            line: line,
+                        });
+                        return null;
+                    }
+                }
+                // Extract attributes
+                const props = {};
+                if (jsxElement.openingElement.attributes) {
+                    for (const attr of jsxElement.openingElement.attributes) {
+                        if (attr.type === 'JSXAttribute' &&
+                            attr.name?.type === 'JSXIdentifier' &&
+                            attr.name.name) {
+                            if (attr.value) {
+                                if (attr.value.type === 'Literal') {
+                                    props[attr.name.name] = attr.value.value;
+                                }
+                                else if (attr.value.type === 'JSXExpressionContainer') {
+                                    if (attr.value.expression.type === 'Literal') {
+                                        props[attr.name.name] =
+                                            attr.value.expression.value;
+                                    }
+                                }
+                            }
+                            else {
+                                props[attr.name.name] = true;
+                            }
+                        }
+                    }
+                }
+                // Extract children
+                const children = [];
+                if (jsxElement.children) {
+                    for (const child of jsxElement.children) {
+                        if (child.type === 'JSXText') {
+                            children.push(child.value);
+                        }
+                        else if (child.type === 'JSXElement') {
+                            const childElement = this.transformJsxElement(child);
+                            if (childElement) {
+                                children.push(childElement);
+                            }
+                        }
+                    }
+                }
+                // Handle ESM imported components by adding required props
+                if (esmImportInfo) {
+                    const { importUrl, componentName } = extractComponentInfo(esmImportInfo);
+                    return this.createElement(Component, { ...props, importUrl, componentName }, ...children);
+                }
+                else {
+                    return this.createElement(Component, props, ...children);
+                }
+            }
+        }
+        catch (error) {
+            // Return null if transformation fails
+            onError?.({
+                message: `Failed to transform JSX element: ${error instanceof Error ? error.message : 'Unknown error'}`,
+                line: line,
+            });
+            return null;
+        }
+        return null;
+    }
+    getJsxAttrs(node, onError = console.error) {
+        let attrsList = [];
+        for (const attr of node.attributes) {
+            if (attr.type === 'mdxJsxExpressionAttribute') {
+                // Handle spread expressions like {...{key: '1'}}
+                if (attr.data?.estree) {
+                    try {
+                        const program = attr.data.estree;
+                        if (program.body?.length > 0 &&
+                            program.body[0].type === 'ExpressionStatement') {
+                            const expression = program.body[0].expression;
+                            try {
+                                const result = Evaluate.evaluate.sync(expression);
+                                // Handle spread syntax - merge the evaluated object
+                                if (typeof result === 'object' &&
+                                    result != null) {
+                                    const entries = Object.entries(result);
+                                    attrsList.push(...entries);
+                                }
+                            }
+                            catch (error) {
+                                onError({
+                                    message: `Failed to evaluate expression attribute: ${attr.value
+                                        .replace(/\n+/g, ' ')
+                                        .replace(/ +/g, ' ')}`,
+                                    line: attr.position?.start?.line,
+                                });
+                            }
+                        }
+                    }
+                    catch (error) {
+                        onError({
+                            message: `Failed to evaluate expression attribute: ${attr.value
+                                .replace(/\n+/g, ' ')
+                                .replace(/ +/g, ' ')}`,
+                            line: attr.position?.start?.line,
+                        });
+                    }
+                }
+                else {
+                    onError({
+                        message: `Expressions in jsx props are not supported (${attr.value
+                            .replace(/\n+/g, ' ')
+                            .replace(/ +/g, ' ')})`,
+                        line: attr.position?.start?.line,
+                    });
+                }
+                continue;
+            }
+            if (attr.type !== 'mdxJsxAttribute') {
+                onError({
+                    message: `non mdxJsxAttribute attribute is not supported: ${attr}`,
+                    line: node.position?.start?.line,
+                });
+                continue;
+            }
+            const v = attr.value;
+            if (typeof v === 'string' || typeof v === 'number') {
+                attrsList.push([attr.name, v]);
+                continue;
+            }
+            if (v === null) {
+                attrsList.push([attr.name, true]);
+                continue;
+            }
+            if (v?.type === 'mdxJsxAttributeValueExpression') {
+                // Manual parsing fallback for simple values
+                if (v.value === 'true') {
+                    attrsList.push([attr.name, true]);
+                    continue;
+                }
+                if (v.value === 'false') {
+                    attrsList.push([attr.name, false]);
+                    continue;
+                }
+                if (v.value === 'null') {
+                    attrsList.push([attr.name, null]);
+                    continue;
+                }
+                if (v.value === 'undefined') {
+                    attrsList.push([attr.name, undefined]);
+                    continue;
+                }
+                if (v.data?.estree) {
+                    try {
+                        // Extract the expression from the Program body
+                        const program = v.data.estree;
+                        if (program.body?.length > 0 &&
+                            program.body[0].type === 'ExpressionStatement') {
+                            const expression = program.body[0].expression;
+                            // Check if this is a JSX element
+                            if (expression.type === 'JSXElement') {
+                                // Transform JSX element to React element
+                                const jsxElement = this.transformJsxElement(expression, onError, attr.position?.start?.line);
+                                if (jsxElement) {
+                                    attrsList.push([attr.name, jsxElement]);
+                                    continue;
+                                }
+                            }
+                            try {
+                                // Evaluate the expression synchronously
+                                const result = Evaluate.evaluate.sync(expression);
+                                attrsList.push([attr.name, result]);
+                                continue;
+                            }
+                            catch (error) {
+                                onError({
+                                    message: `Failed to evaluate expression attribute: ${attr.name}={${v.value}}`,
+                                    line: attr.position?.start?.line,
+                                });
+                            }
+                        }
+                    }
+                    catch (error) {
+                        // Fall back to the original manual parsing for backwards compatibility
+                    }
+                }
+                onError({
+                    message: `Expressions in jsx prop not evaluated: (${attr.name}={${v.value}})`,
+                    line: attr.position?.start?.line,
+                });
+            }
+        }
+        return attrsList;
+    }
     run() {
         const res = this.mdastTransformer(this.mdast);
         if (Array.isArray(res) && res.length === 1) {
@@ -145,9 +405,13 @@ export class MdastToJsx {
         }
         switch (node.type) {
             case 'mdxjsEsm': {
-                const start = node.position?.start?.offset;
-                const end = node.position?.end?.offset;
-                let text = this.str.slice(start, end);
+                // Parse ESM imports and merge into our imports map (only if allowed)
+                if (this.allowClientEsmImports) {
+                    const parsedImports = parseEsmImports(node, (err) => this.errors.push(err));
+                    parsedImports.forEach((value, key) => {
+                        this.esmImports.set(key, value);
+                    });
+                }
                 return [];
             }
             case 'mdxJsxTextElement':
@@ -175,6 +439,34 @@ export class MdastToJsx {
                 if (!node.value) {
                     return [];
                 }
+                // Check if we have an estree AST
+                if (node.data?.estree) {
+                    try {
+                        // Extract the expression from the Program body
+                        const program = node.data.estree;
+                        if (program.body?.length > 0 &&
+                            program.body[0].type === 'ExpressionStatement') {
+                            const expression = program.body[0].expression;
+                            try {
+                                // Evaluate the expression synchronously
+                                const result = Evaluate.evaluate.sync(expression);
+                                return result;
+                            }
+                            catch (error) {
+                                this.errors.push({
+                                    message: `Failed to evaluate expression: ${node.value}`,
+                                    line: node.position?.start?.line,
+                                });
+                            }
+                        }
+                    }
+                    catch (error) {
+                        this.errors.push({
+                            message: `Failed to evaluate expression: ${node.value}`,
+                            line: node.position?.start?.line,
+                        });
+                    }
+                }
                 return [];
             }
             case 'yaml': {
@@ -186,16 +478,16 @@ export class MdastToJsx {
             case 'heading': {
                 const level = node.depth;
                 const Tag = this.c[`h${level}`] ?? `h${level}`;
-                return this.createElement(Tag, node.data?.hProperties, this.mapMdastChildren(node));
+                return this.createElement(Tag, this.addLineNumberToProps(node.data?.hProperties, node), this.mapMdastChildren(node));
             }
             case 'paragraph': {
-                return this.createElement(this.c.p, node.data?.hProperties, this.mapMdastChildren(node));
+                return this.createElement(this.c.p, this.addLineNumberToProps(node.data?.hProperties, node), this.mapMdastChildren(node));
             }
             case 'blockquote': {
-                return this.createElement(this.c.blockquote, node.data?.hProperties, this.mapMdastChildren(node));
+                return this.createElement(this.c.blockquote, this.addLineNumberToProps(node.data?.hProperties, node), this.mapMdastChildren(node));
             }
             case 'thematicBreak': {
-                return this.createElement(this.c.hr, node.data?.hProperties);
+                return this.createElement(this.c.hr, this.addLineNumberToProps(node.data?.hProperties, node));
             }
             case 'code': {
                 if (!node.value) {
@@ -203,7 +495,7 @@ export class MdastToJsx {
                 }
                 const language = node.lang || '';
                 const code = node.value;
-                const codeBlock = (className) => this.createElement(this.c.pre, node.data?.hProperties, this.createElement(this.c.code, { className }, code));
+                const codeBlock = (className) => this.createElement(this.c.pre, this.addLineNumberToProps(node.data?.hProperties, node), this.createElement(this.c.code, { className }, code));
                 if (language) {
                     return codeBlock(`language-${language}`);
                 }
@@ -211,23 +503,26 @@ export class MdastToJsx {
             }
             case 'list': {
                 if (node.ordered) {
-                    return this.createElement(this.c.ol, { start: node.start, ...node.data?.hProperties }, this.mapMdastChildren(node));
+                    return this.createElement(this.c.ol, this.addLineNumberToProps({ start: node.start, ...node.data?.hProperties }, node), this.mapMdastChildren(node));
                 }
-                return this.createElement(this.c.ul, node.data?.hProperties, this.mapMdastChildren(node));
+                return this.createElement(this.c.ul, this.addLineNumberToProps(node.data?.hProperties, node), this.mapMdastChildren(node));
             }
             case 'listItem': {
                 // https://github.com/syntax-tree/mdast-util-gfm-task-list-item#syntax-tree
                 if (node?.checked != null) {
-                    return this.createElement(this.c.li, { 'data-checked': node.checked, ...node.data?.hProperties }, this.mapMdastChildren(node));
+                    return this.createElement(this.c.li, this.addLineNumberToProps({
+                        'data-checked': node.checked,
+                        ...node.data?.hProperties,
+                    }, node), this.mapMdastChildren(node));
                 }
-                return this.createElement(this.c.li, node.data?.hProperties, this.mapMdastChildren(node));
+                return this.createElement(this.c.li, this.addLineNumberToProps(node.data?.hProperties, node), this.mapMdastChildren(node));
             }
             case 'text': {
                 if (!node.value) {
                     return [];
                 }
                 if (node.data?.hProperties) {
-                    return this.createElement(this.c.span, node.data.hProperties, node.value);
+                    return this.createElement(this.c.span, this.addLineNumberToProps(node.data.hProperties, node), node.value);
                 }
                 return node.value;
             }
@@ -235,65 +530,68 @@ export class MdastToJsx {
                 const src = node.url || '';
                 const alt = node.alt || '';
                 const title = node.title || '';
-                return this.createElement(this.c.img, {
+                return this.createElement(this.c.img, this.addLineNumberToProps({
                     src,
                     alt,
                     title,
-                    ...node.data?.hProperties
-                });
+                    ...node.data?.hProperties,
+                }, node));
             }
             case 'link': {
                 const href = node.url || '';
                 const title = node.title || '';
-                return this.createElement(this.c.a, { href, title, ...node.data?.hProperties }, this.mapMdastChildren(node));
+                return this.createElement(this.c.a, this.addLineNumberToProps({ href, title, ...node.data?.hProperties }, node), this.mapMdastChildren(node));
             }
             case 'strong': {
-                return this.createElement(this.c.strong, node.data?.hProperties, this.mapMdastChildren(node));
+                return this.createElement(this.c.strong, this.addLineNumberToProps(node.data?.hProperties, node), this.mapMdastChildren(node));
             }
             case 'emphasis': {
-                return this.createElement(this.c.em, node.data?.hProperties, this.mapMdastChildren(node));
+                return this.createElement(this.c.em, this.addLineNumberToProps(node.data?.hProperties, node), this.mapMdastChildren(node));
             }
             case 'delete': {
-                return this.createElement(this.c.del, node.data?.hProperties, this.mapMdastChildren(node));
+                return this.createElement(this.c.del, this.addLineNumberToProps(node.data?.hProperties, node), this.mapMdastChildren(node));
             }
             case 'inlineCode': {
                 if (!node.value) {
                     return [];
                 }
-                return this.createElement(this.c.code, node.data?.hProperties, node.value);
+                return this.createElement(this.c.code, this.addLineNumberToProps(node.data?.hProperties, node), node.value);
             }
             case 'break': {
-                return this.createElement(this.c.br, node.data?.hProperties);
+                return this.createElement(this.c.br, this.addLineNumberToProps(node.data?.hProperties, node));
             }
             case 'root': {
                 if (node.data?.hProperties) {
-                    return this.createElement(this.c.div, node.data.hProperties, this.mapMdastChildren(node));
+                    return this.createElement(this.c.div, this.addLineNumberToProps(node.data.hProperties, node), this.mapMdastChildren(node));
                 }
                 return this.createElement(Fragment, null, this.mapMdastChildren(node));
             }
             case 'table': {
                 const [head, ...body] = React.Children.toArray(this.mapMdastChildren(node));
-                return this.createElement(this.c.table, node.data?.hProperties, head && this.createElement(this.c.thead, null, head), !!body?.length && this.createElement(this.c.tbody, null, body));
+                return this.createElement(this.c.table, this.addLineNumberToProps(node.data?.hProperties, node), head && this.createElement(this.c.thead, null, head), !!body?.length &&
+                    this.createElement(this.c.tbody, null, body));
             }
             case 'tableRow': {
-                return this.createElement(this.c.tr, { className: '', ...node.data?.hProperties }, this.mapMdastChildren(node));
+                return this.createElement(this.c.tr, this.addLineNumberToProps({ className: '', ...node.data?.hProperties }, node), this.mapMdastChildren(node));
             }
             case 'tableCell': {
                 let content = this.mapMdastChildren(node);
-                return this.createElement(this.c.td, { className: '', ...node.data?.hProperties }, content);
+                return this.createElement(this.c.td, this.addLineNumberToProps({ className: '', ...node.data?.hProperties }, node), content);
             }
             case 'definition': {
                 return [];
             }
             case 'linkReference': {
                 let href = '';
+                let title = '';
                 mdastBfs(this.mdast, (child) => {
                     if (child.type === 'definition' &&
                         child.identifier === node.identifier) {
-                        href = child.url;
+                        href = child.url || '';
+                        title = child.title || '';
                     }
                 });
-                return this.createElement(this.c.a, { href, ...node.data?.hProperties }, this.mapMdastChildren(node));
+                return this.createElement(this.c.a, this.addLineNumberToProps({ href, title, ...node.data?.hProperties }, node), this.mapMdastChildren(node));
             }
             case 'footnoteReference': {
                 return [];
@@ -311,7 +609,7 @@ export class MdastToJsx {
                 return this.createElement(Suspense, { fallback: null }, this.createElement(HtmlToJsxConverter, {
                     htmlText: text,
                     instance: this,
-                    node
+                    node,
                 }));
             }
             case 'imageReference': {
@@ -327,70 +625,6 @@ export class MdastToJsx {
         }
     }
 }
-export function getJsxAttrs(node, onError = 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, ' ')
-                    .replace(/ +/g, ' ')})`,
-                line: attr.position?.start?.line,
-            });
-            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 (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];
-            }
-            const parsedJson = safeJsonParse(v.value);
-            if (parsedJson) {
-                return [attr.name, parsedJson];
-            }
-            onError({
-                message: `Expressions in jsx props are not supported (${attr.name}={${v.value}})`,
-                line: attr.position?.start?.line,
-            });
-        }
-        else {
-            console.log('unhandled attr', { attr }, attr.type);
-        }
-        return;
-    })
-        .filter(isTruthy);
-    return attrsList;
-}
 function isTruthy(val) {
     return Boolean(val);
 }