safe-mdx 1.0.4 → 1.2.0

package/dist/safe-mdx.js

@@ -1,15 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { cloneElement, Suspense } from 'react';
+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, }) {
+export const SafeMdxRenderer = React.memo(function SafeMdxRenderer({ components, markdown = '', mdast = null, renderNode, componentPropsSchema, createElement, allowClientEsmImports = false, }) {
     const visitor = new MdastToJsx({
         markdown,
         mdast,
         components,
         renderNode,
+        componentPropsSchema,
+        createElement,
+        allowClientEsmImports,
     });
     const result = visitor.run();
     return result;
@@ -21,10 +26,17 @@ export class MdastToJsx {
     c;
     errors = [];
     renderNode;
-    constructor({ markdown: code = '', mdast, components = {}, renderNode, }) {
+    componentPropsSchema;
+    createElement;
+    esmImports = new Map();
+    allowClientEsmImports;
+    constructor({ markdown: code = '', mdast, components = {}, renderNode, componentPropsSchema, createElement = React.createElement, allowClientEsmImports = false, }) {
         this.str = code;
         this.mdast = mdast;
         this.renderNode = renderNode;
+        this.componentPropsSchema = componentPropsSchema;
+        this.createElement = createElement;
+        this.allowClientEsmImports = allowClientEsmImports;
         this.c = {
             ...Object.fromEntries(nativeTags.map((tag) => {
                 return [tag, tag];
@@ -32,6 +44,30 @@ export class MdastToJsx {
             ...components,
         };
     }
+    validateComponentProps(componentName, props, line) {
+        if (!this.componentPropsSchema ||
+            !this.componentPropsSchema[componentName]) {
+            return;
+        }
+        const schema = this.componentPropsSchema[componentName];
+        let result = schema['~standard'].validate(props);
+        if (result instanceof Promise) {
+            // Ignore async validation errors as requested
+            return;
+        }
+        else {
+            if (result.issues) {
+                result.issues.forEach((issue) => {
+                    const propPath = issue.path?.join('.') || 'unknown';
+                    this.errors.push({
+                        message: `Invalid props for component "${componentName}" at "${propPath}": ${issue.message}`,
+                        line,
+                        schemaPath: issue.path?.join('.'),
+                    });
+                });
+            }
+        }
+    }
     mapMdastChildren(node) {
         const res = node.children
             ?.flatMap((child) => this.mdastTransformer(child))
@@ -76,24 +112,253 @@ 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}`,
+                // 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));
+                }
+                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 = getJsxAttrs(node, (err) => {
+                let attrsList = this.getJsxAttrs(node, (err) => {
                     this.errors.push(err);
                 });
                 let attrs = Object.fromEntries(attrsList);
-                return (_jsx(Component, { ...attrs, children: this.mapJsxChildren(node) }));
+                // Validate component props with schema if available
+                this.validateComponentProps(node.name, attrs, node.position?.start?.line);
+                return this.createElement(Component, attrs, this.mapJsxChildren(node));
             }
             default: {
                 return this.mdastTransformer(node);
             }
         }
     }
+    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) {
@@ -114,9 +379,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':
@@ -144,6 +413,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': {
@@ -155,16 +452,16 @@ export class MdastToJsx {
             case 'heading': {
                 const level = node.depth;
                 const Tag = this.c[`h${level}`] ?? `h${level}`;
-                return (_jsx(Tag, { ...node.data?.hProperties, children: this.mapMdastChildren(node) }));
+                return this.createElement(Tag, node.data?.hProperties, this.mapMdastChildren(node));
             }
             case 'paragraph': {
-                return (_jsx(this.c.p, { ...node.data?.hProperties, children: this.mapMdastChildren(node) }));
+                return this.createElement(this.c.p, node.data?.hProperties, this.mapMdastChildren(node));
             }
             case 'blockquote': {
-                return (_jsx(this.c.blockquote, { ...node.data?.hProperties, children: this.mapMdastChildren(node) }));
+                return this.createElement(this.c.blockquote, node.data?.hProperties, this.mapMdastChildren(node));
             }
             case 'thematicBreak': {
-                return _jsx(this.c.hr, { ...node.data?.hProperties });
+                return this.createElement(this.c.hr, node.data?.hProperties);
             }
             case 'code': {
                 if (!node.value) {
@@ -172,7 +469,7 @@ export class MdastToJsx {
                 }
                 const language = node.lang || '';
                 const code = node.value;
-                const codeBlock = (className) => (_jsx(this.c.pre, { ...node.data?.hProperties, children: _jsx(this.c.code, { className: className, children: code }) }));
+                const codeBlock = (className) => this.createElement(this.c.pre, node.data?.hProperties, this.createElement(this.c.code, { className }, code));
                 if (language) {
                     return codeBlock(`language-${language}`);
                 }
@@ -180,23 +477,26 @@ export class MdastToJsx {
             }
             case 'list': {
                 if (node.ordered) {
-                    return (_jsx(this.c.ol, { start: node.start, ...node.data?.hProperties, children: this.mapMdastChildren(node) }));
+                    return this.createElement(this.c.ol, { start: node.start, ...node.data?.hProperties }, this.mapMdastChildren(node));
                 }
-                return (_jsx(this.c.ul, { ...node.data?.hProperties, children: this.mapMdastChildren(node) }));
+                return this.createElement(this.c.ul, node.data?.hProperties, this.mapMdastChildren(node));
             }
             case 'listItem': {
                 // https://github.com/syntax-tree/mdast-util-gfm-task-list-item#syntax-tree
                 if (node?.checked != null) {
-                    return (_jsx(this.c.li, { "data-checked": node.checked, ...node.data?.hProperties, children: this.mapMdastChildren(node) }));
+                    return this.createElement(this.c.li, {
+                        'data-checked': node.checked,
+                        ...node.data?.hProperties,
+                    }, this.mapMdastChildren(node));
                 }
-                return (_jsx(this.c.li, { ...node.data?.hProperties, children: this.mapMdastChildren(node) }));
+                return this.createElement(this.c.li, node.data?.hProperties, this.mapMdastChildren(node));
             }
             case 'text': {
                 if (!node.value) {
                     return [];
                 }
                 if (node.data?.hProperties) {
-                    return (_jsx(this.c.span, { ...node.data.hProperties, children: node.value }));
+                    return this.createElement(this.c.span, node.data.hProperties, node.value);
                 }
                 return node.value;
             }
@@ -204,60 +504,68 @@ export class MdastToJsx {
                 const src = node.url || '';
                 const alt = node.alt || '';
                 const title = node.title || '';
-                return (_jsx(this.c.img, { src: src, alt: alt, title: title, ...node.data?.hProperties }));
+                return this.createElement(this.c.img, {
+                    src,
+                    alt,
+                    title,
+                    ...node.data?.hProperties,
+                });
             }
             case 'link': {
                 const href = node.url || '';
                 const title = node.title || '';
-                return (_jsx(this.c.a, { href, title, ...node.data?.hProperties, children: this.mapMdastChildren(node) }));
+                return this.createElement(this.c.a, { href, title, ...node.data?.hProperties }, this.mapMdastChildren(node));
             }
             case 'strong': {
-                return (_jsx(this.c.strong, { ...node.data?.hProperties, children: this.mapMdastChildren(node) }));
+                return this.createElement(this.c.strong, node.data?.hProperties, this.mapMdastChildren(node));
             }
             case 'emphasis': {
-                return (_jsx(this.c.em, { ...node.data?.hProperties, children: this.mapMdastChildren(node) }));
+                return this.createElement(this.c.em, node.data?.hProperties, this.mapMdastChildren(node));
             }
             case 'delete': {
-                return (_jsx(this.c.del, { ...node.data?.hProperties, children: this.mapMdastChildren(node) }));
+                return this.createElement(this.c.del, node.data?.hProperties, this.mapMdastChildren(node));
             }
             case 'inlineCode': {
                 if (!node.value) {
                     return [];
                 }
-                return (_jsx(this.c.code, { ...node.data?.hProperties, children: node.value }));
+                return this.createElement(this.c.code, node.data?.hProperties, node.value);
             }
             case 'break': {
-                return _jsx(this.c.br, { ...node.data?.hProperties });
+                return this.createElement(this.c.br, node.data?.hProperties);
             }
             case 'root': {
                 if (node.data?.hProperties) {
-                    return (_jsx(this.c.div, { ...node.data.hProperties, children: this.mapMdastChildren(node) }));
+                    return this.createElement(this.c.div, node.data.hProperties, this.mapMdastChildren(node));
                 }
-                return _jsx(Fragment, { children: this.mapMdastChildren(node) });
+                return this.createElement(Fragment, null, this.mapMdastChildren(node));
             }
             case 'table': {
                 const [head, ...body] = React.Children.toArray(this.mapMdastChildren(node));
-                return (_jsxs(this.c.table, { ...node.data?.hProperties, children: [head && _jsx(this.c.thead, { children: head }), !!body?.length && _jsx(this.c.tbody, { children: body })] }));
+                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));
             }
             case 'tableRow': {
-                return (_jsx(this.c.tr, { className: '', ...node.data?.hProperties, children: this.mapMdastChildren(node) }));
+                return this.createElement(this.c.tr, { className: '', ...node.data?.hProperties }, this.mapMdastChildren(node));
             }
             case 'tableCell': {
                 let content = this.mapMdastChildren(node);
-                return (_jsx(this.c.td, { className: '', ...node.data?.hProperties, children: content }));
+                return this.createElement(this.c.td, { className: '', ...node.data?.hProperties }, 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 (_jsx(this.c.a, { href: href, ...node.data?.hProperties, children: this.mapMdastChildren(node) }));
+                return this.createElement(this.c.a, { href, title, ...node.data?.hProperties }, this.mapMdastChildren(node));
             }
             case 'footnoteReference': {
                 return [];
@@ -272,7 +580,11 @@ export class MdastToJsx {
                 if (!text) {
                     return [];
                 }
-                return (_jsx(Suspense, { fallback: null, children: _jsx(HtmlToJsxConverter, { htmlText: text, instance: this, node: node }) }));
+                return this.createElement(Suspense, { fallback: null }, this.createElement(HtmlToJsxConverter, {
+                    htmlText: text,
+                    instance: this,
+                    node,
+                }));
             }
             case 'imageReference': {
                 return [];
@@ -287,68 +599,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, ' ')})`,
-            });
-            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}})`,
-            });
-        }
-        else {
-            console.log('unhandled attr', { attr }, attr.type);
-        }
-        return;
-    })
-        .filter(isTruthy);
-    return attrsList;
-}
 function isTruthy(val) {
     return Boolean(val);
 }