@draftbase/renderer 0.5.3 → 0.5.5

package/dist/MDXErrorBoundary.d.ts

@@ -1,8 +1,8 @@
-import { Component, type ReactNode } from "react";
+import { Component, type ErrorInfo, type ReactNode } from "react";
 interface MDXErrorBoundaryProps {
     children: ReactNode;
     fallback: ReactNode;
-    onError?: (error: unknown) => void;
+    onError?: (error: unknown, errorInfo: ErrorInfo) => void;
 }
 interface MDXErrorBoundaryState {
     hasError: boolean;
@@ -12,7 +12,7 @@ export declare class MDXErrorBoundary extends Component<MDXErrorBoundaryProps, M
     static getDerivedStateFromError(): {
         hasError: boolean;
     };
-    componentDidCatch(error: unknown): void;
+    componentDidCatch(error: unknown, errorInfo: ErrorInfo): void;
     render(): ReactNode;
 }
 export {};

package/dist/MDXErrorBoundary.js

@@ -7,9 +7,9 @@ export class MDXErrorBoundary extends Component {
     static getDerivedStateFromError() {
         return { hasError: true };
     }
-    componentDidCatch(error) {
-        console.error("MDX content failed to render", error);
-        this.props.onError?.(error);
+    componentDidCatch(error, errorInfo) {
+        console.error("MDX content failed to render", error, errorInfo.componentStack);
+        this.props.onError?.(error, errorInfo);
     }
     render() {
         return this.state.hasError ? this.props.fallback : this.props.children;

package/dist/reactNative.d.ts

@@ -1,6 +1,6 @@
 import type { MDXComponents } from "mdx/types";
 import type { ComponentType } from "react";
-import { type FailedMDX } from "./core.js";
+import type { FailedMDX } from "./core.js";
 import { type ReactNativePrimitives, type ReactNativeStyleOptions } from "./reactNativeComponents.js";
 export interface CompiledMDX {
     ok: true;
@@ -12,6 +12,12 @@ export type { FailedMDX };
 /**
  * Wires up a React Native `compileMDX` with default Text/View/Image mappings for every standard markdown element
  * (and `EntryLink`), so a project sets up its RN primitives once instead of mapping every tag on every call.
+ *
+ * Parses MDX to an AST and walks it directly instead of compiling to JS and `evaluate()`-ing it — Hermes (React
+ * Native's JS engine) has no `Function`/`eval` support, which `@mdx-js/mdx`'s `evaluate()` requires. This also
+ * means only literal string JSX attributes are supported (e.g. `<EntryLink id="x">`) — `{expression}` attributes
+ * and `{expression}` content would need the same eval this exists to avoid, and aren't used by lesson content.
+ *
  * A tag/component the source references but nothing maps (a typo'd custom component, a raw HTML tag RN has no
  * native view for) is caught at render — logged via `console.error` and replaced with the raw source as
  * plain text, instead of crashing the screen.

package/dist/reactNative.js

@@ -1,10 +1,20 @@
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkGfm from "remark-gfm";
+import remarkMdx from "remark-mdx";
 import * as runtime from "react/jsx-runtime";
-import { compileMDXCore } from "./core.js";
 import { MDXErrorBoundary } from "./MDXErrorBoundary.js";
 import { buildReactNativeComponents, } from "./reactNativeComponents.js";
+const processor = unified().use(remarkParse).use(remarkGfm).use(remarkMdx);
 /**
  * Wires up a React Native `compileMDX` with default Text/View/Image mappings for every standard markdown element
  * (and `EntryLink`), so a project sets up its RN primitives once instead of mapping every tag on every call.
+ *
+ * Parses MDX to an AST and walks it directly instead of compiling to JS and `evaluate()`-ing it — Hermes (React
+ * Native's JS engine) has no `Function`/`eval` support, which `@mdx-js/mdx`'s `evaluate()` requires. This also
+ * means only literal string JSX attributes are supported (e.g. `<EntryLink id="x">`) — `{expression}` attributes
+ * and `{expression}` content would need the same eval this exists to avoid, and aren't used by lesson content.
+ *
  * A tag/component the source references but nothing maps (a typo'd custom component, a raw HTML tag RN has no
  * native view for) is caught at render — logged via `console.error` and replaced with the raw source as
  * plain text, instead of crashing the screen.
@@ -12,32 +22,34 @@ import { buildReactNativeComponents, } from "./reactNativeComponents.js";
 export function createReactNativeRenderer(primitives, styleOptions) {
     const defaultComponents = buildReactNativeComponents(primitives, styleOptions);
     async function compileMDX(source) {
-        const result = await compileMDXCore(source, runtime, defaultComponents);
-        if (!result.ok)
-            return result;
-        // MDX bakes the source's literal inter-block whitespace into the compiled output as bare
-        // "\n" string children of the root Fragment (e.g. between a heading and the paragraph after
-        // it). React Native throws on a bare string child that isn't inside a <Text>, so those need
-        // stripping here — element-mapped tags already handle it themselves (see reactNativeComponents.ts).
-        const Content = result.Content;
-        // withDefaultComponents (core.ts) wraps the compiled MDX component in one props-forwarding
-        // layer, so unwrap exactly that to reach the actual root element (a Fragment for a multi-block
-        // document, or a single mapped element like Text/View otherwise) before stripping whitespace.
-        // Calling any further would start invoking the RN primitives (Text/View/Image) themselves.
-        const RootWithoutWhitespace = (props) => {
-            const wrapped = Content(props);
-            const rootElement = typeof wrapped.type === "function"
-                ? wrapped.type(wrapped.props)
-                : wrapped;
-            return stripWhitespaceRootChildren(rootElement);
-        };
-        // A JSX component referenced in `source` but missing from `components`, or a raw HTML tag RN has
-        // no native view for, throws mid-render — RN has no DOM to silently fall back on the way web
-        // does, so catch it here instead of taking down the whole screen, and log it loudly so the
-        // content author (or whoever wired up `components`) notices and fixes it.
+        let tree;
+        try {
+            tree = processor.parse(source);
+        }
+        catch (error) {
+            return {
+                ok: false,
+                error: new Error(`MDX parse failed (${source.length} chars): ${describeError(error)}`, {
+                    cause: error,
+                }),
+            };
+        }
+        // Reference-style links/images (`[text][ref]` + a `[ref]: url` definition anywhere in the
+        // doc) resolve against whichever `definition` node shares their identifier — collect them
+        // once per parse instead of re-scanning the tree for every reference.
+        const definitions = {};
+        for (const node of tree.children ?? []) {
+            if (node.type === "definition" && node.identifier && node.url) {
+                definitions[node.identifier] = node.url;
+            }
+        }
+        function Root(props) {
+            const components = { ...defaultComponents, ...props.components };
+            return renderChildren(tree.children ?? [], { components, definitions, source });
+        }
         const SafeContent = (props) => runtime.jsx(MDXErrorBoundary, {
             fallback: runtime.jsx(primitives.Text, { children: source }),
-            children: runtime.jsx(RootWithoutWhitespace, props),
+            children: runtime.jsx(Root, props),
         });
         return {
             ok: true,
@@ -46,12 +58,132 @@ export function createReactNativeRenderer(primitives, styleOptions) {
     }
     return { compileMDX };
 }
-function stripWhitespaceRootChildren(element) {
-    const children = element.props?.children;
-    if (!Array.isArray(children))
-        return element;
-    const filtered = children.filter((child) => typeof child !== "string" || child.trim() !== "");
-    if (filtered.length === children.length)
-        return element;
-    return runtime.jsxs(element.type, { ...element.props, children: filtered }, element.key ?? undefined);
+function renderChildren(nodes, ctx) {
+    const rendered = nodes.map((node, index) => renderNode(node, ctx, index)).filter(isRenderable);
+    // Mirrors @mdx-js's compiled output: a single top-level node renders directly, only 2+
+    // siblings need a Fragment wrapper.
+    if (rendered.length === 1)
+        return rendered[0];
+    return runtime.jsx(runtime.Fragment, { children: rendered });
+}
+function textChild(nodes, ctx) {
+    const rendered = nodes.map((node, index) => renderNode(node, ctx, index)).filter(isRenderable);
+    return rendered.length === 1 ? rendered[0] : rendered;
+}
+function isRenderable(node) {
+    return node !== null && node !== undefined;
+}
+// A single bad node (a typo'd/missing custom component, an mdast node type this walker doesn't
+// know) shouldn't blank out an otherwise-good document — catch here, at the smallest node that
+// failed, and swap in its literal source text instead of losing every sibling around it.
+function renderNode(node, ctx, key) {
+    try {
+        return renderNodeUnsafe(node, ctx, key);
+    }
+    catch (error) {
+        const label = node.name ? `<${node.name}>` : node.type;
+        const wrapped = new Error(`MDX node "${label}" failed to render: ${describeError(error)}`, {
+            cause: error,
+        });
+        console.error(wrapped.message, error);
+        const raw = node.position
+            ? ctx.source.slice(node.position.start.offset, node.position.end.offset)
+            : `<${label}>`;
+        try {
+            return jsx(ctx.components.p, { children: raw }, key);
+        }
+        catch (fallbackError) {
+            throw new Error(`MDX node "${label}" failed to render and had no fallback component`, {
+                cause: fallbackError,
+            });
+        }
+    }
+}
+function describeError(error) {
+    return error instanceof Error ? error.message : String(error);
+}
+function renderNodeUnsafe(node, ctx, key) {
+    const { components } = ctx;
+    switch (node.type) {
+        case "paragraph":
+            return jsx(components.p, { children: textChild(node.children ?? [], ctx) }, key);
+        case "heading":
+            return jsx(components[`h${node.depth}`], { children: textChild(node.children ?? [], ctx) }, key);
+        case "strong":
+            return jsx(components.strong, { children: textChild(node.children ?? [], ctx) }, key);
+        case "emphasis":
+            return jsx(components.em, { children: textChild(node.children ?? [], ctx) }, key);
+        case "delete":
+            return jsx(components.del, { children: textChild(node.children ?? [], ctx) }, key);
+        case "inlineCode":
+            return jsx(components.code, { children: node.value }, key);
+        case "code":
+            return jsx(components.pre, { children: jsx(components.code, { children: node.value }, 0) }, key);
+        case "list":
+            return jsx(node.ordered ? components.ol : components.ul, { children: (node.children ?? []).map((item, i) => renderNode(item, ctx, i)) }, key);
+        case "listItem":
+            return jsx(components.li, { children: textChild(node.children ?? [], ctx) }, key);
+        case "blockquote":
+            return jsx(components.blockquote, { children: (node.children ?? []).map((child, i) => renderNode(child, ctx, i)) }, key);
+        case "thematicBreak":
+            return jsx(components.hr, {}, key);
+        case "table":
+            return renderTable(node, ctx, key);
+        case "link":
+            return jsx(components.a, { href: node.url, children: textChild(node.children ?? [], ctx) }, key);
+        case "image":
+            return jsx(components.img, { src: node.url, alt: node.alt ?? undefined }, key);
+        case "linkReference":
+            return jsx(components.a, {
+                href: node.identifier ? ctx.definitions[node.identifier] : undefined,
+                children: textChild(node.children ?? [], ctx),
+            }, key);
+        case "imageReference":
+            return jsx(components.img, {
+                src: node.identifier ? ctx.definitions[node.identifier] : undefined,
+                alt: node.alt ?? undefined,
+            }, key);
+        case "definition":
+            // Consumed up front into `ctx.definitions`; renders nothing on its own.
+            return null;
+        case "text":
+            return node.value;
+        case "break":
+            return "\n";
+        case "mdxJsxFlowElement":
+        case "mdxJsxTextElement":
+            return renderJsx(node, ctx, key);
+        default:
+            throw new Error(`Unsupported MDX content: "${node.type}" node`);
+    }
+}
+function renderJsx(node, ctx, key) {
+    const Component = node.name ? ctx.components[node.name] : undefined;
+    if (!Component)
+        throw new Error(`Unknown MDX component: <${node.name ?? "?"}>`);
+    const props = {};
+    for (const attr of node.attributes ?? []) {
+        if (attr.type === "mdxJsxAttribute" &&
+            attr.name &&
+            (attr.value === null || typeof attr.value === "string")) {
+            props[attr.name] = attr.value ?? true;
+        }
+    }
+    return jsx(Component, { ...props, children: textChild(node.children ?? [], ctx) }, key);
+}
+function renderTable(node, ctx, key) {
+    const { components } = ctx;
+    const [headerRow, ...bodyRows] = node.children ?? [];
+    const cells = (row, CellTag) => (row?.children ?? []).map((cell, i) => jsx(CellTag, { children: textChild(cell.children ?? [], ctx) }, i));
+    return jsx(components.table, {
+        children: [
+            jsx(components.thead, { children: jsx(components.tr, { children: cells(headerRow, components.th) }, 0) }, 0),
+            jsx(components.tbody, {
+                children: bodyRows.map((row, i) => jsx(components.tr, { children: cells(row, components.td) }, i)),
+            }, 1),
+        ],
+    }, key);
+}
+function jsx(Component, props, key) {
+    return runtime.jsx(Component, props, key);
 }

package/dist/reactNative.test.js

@@ -1,7 +1,6 @@
 import assert from "node:assert/strict";
 import test from "node:test";
 import { createReactNativeRenderer } from "./reactNative.js";
-import { MDXErrorBoundary } from "./MDXErrorBoundary.js";
 // Fakes standing in for react-native's Text/View/Image — see reactNativeComponents.test.ts.
 const Text = () => null;
 const View = () => null;
@@ -30,9 +29,9 @@ test("React Native smoke test: renders standard markdown through Text/View with
     assert.equal(heading.type, Text);
     assert.equal(heading.props.style.fontSize, 28);
 });
-test("React Native falls back to the raw source and logs to console instead of crashing on an unknown tag", async () => {
+test("React Native swaps only the unknown tag for its raw source, logs to console, and keeps rendering its siblings", async () => {
     const { compileMDX } = createReactNativeRenderer({ Text, View, Image });
-    const result = await compileMDX("<Callout>hi</Callout>");
+    const result = await compileMDX("# Heading\n\n<Callout>hi</Callout>\n\nMore text");
     assert.equal(result.ok, true);
     if (!result.ok)
         return;
@@ -40,22 +39,20 @@ test("React Native falls back to the raw source and logs to console instead of c
     const logged = [];
     console.error = (...args) => logged.push(args);
     try {
-        // No react-dom/test-renderer in this package — drive the real MDXErrorBoundary class by
-        // hand the way React would: render children, and on throw, catch + re-render the fallback.
-        const boundaryElement = result.Content({});
-        assert.equal(boundaryElement.type, MDXErrorBoundary);
-        const boundary = new MDXErrorBoundary(boundaryElement.props);
-        try {
-            resolve(boundaryElement.props.children);
-            assert.fail("expected the missing <Callout> component to throw");
-        }
-        catch (error) {
-            boundary.componentDidCatch(error);
-            Object.assign(boundary.state, MDXErrorBoundary.getDerivedStateFromError());
-        }
-        const fallback = resolve(boundary.render());
+        // MDXErrorBoundary never triggers here — the failure is caught per-node inside compileMDX,
+        // not left to bubble up and blank the whole document.
+        const element = resolve(result.Content({}));
+        const children = element.props.children;
+        assert.equal(children.length, 3);
+        assert.equal(resolve(children[0]).type, Text); // heading
+        // <Callout>hi</Callout> parses as an inline JSX child of its own paragraph, so the fallback
+        // (also Text-wrapped) sits one level inside that paragraph rather than replacing it outright.
+        const paragraph = resolve(children[1]);
+        assert.equal(paragraph.type, Text);
+        const fallback = resolve(paragraph.props.children);
         assert.equal(fallback.type, Text);
         assert.equal(fallback.props.children, "<Callout>hi</Callout>");
+        assert.equal(resolve(children[2]).type, Text); // "More text" paragraph
     }
     finally {
         console.error = originalConsoleError;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbase/renderer",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "description": "Framework-agnostic MDX renderer for Draftbase content (React, Next.js RSC, React Native, Astro, Vite, Vue)",
   "keywords": [
     "draftbase",
@@ -59,6 +59,7 @@
   "dependencies": {
     "@mdx-js/mdx": "^3.1.1",
     "remark-gfm": "^4.0.0",
+    "remark-mdx": "^3.1.1",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
     "rehype-raw": "^7.0.0",