@draftbase/renderer 0.5.2 → 0.5.4

package/dist/MDXContent.d.ts

@@ -1,6 +1,6 @@
 import type { MDXComponents } from "mdx/types";
 import type { ComponentType, ElementType, ReactNode } from "react";
-import { type FailedMDX } from "./core.js";
+import { type FailedMDX, type LinkedEntryData } from "./core.js";
 export interface CompiledMDX {
     ok: true;
     Content: ComponentType<{
@@ -33,9 +33,14 @@ export interface MDXContentProps {
      * throws while rendering. Either way the fallback plain-text output still renders instead of
      * crashing. */
     onError?: (error: unknown) => void;
+    /** The containing entry's own `entryLinks` (from `getEntry`/`getEntries` called with `include`
+     * set) — id-keyed resolved data for every `<EntryLink id="...">` found in `source`. When given,
+     * each `EntryLink` instance receives its target's data as extra props, so `components.EntryLink`
+     * doesn't need to re-fetch it. */
+    entryLinks?: Record<string, LinkedEntryData>;
 }
 /**
  * Next.js Server Component wrapper around {@link compileMDX}. For non-RSC React, call `compileMDX` directly instead —
  * `await` inside a component body only works as an RSC.
  */
-export declare function MDXContent({ source, components, unstyled, className, wrapperTag, errorTag, onError, }: MDXContentProps): Promise<ReactNode>;
+export declare function MDXContent({ source, components, unstyled, className, wrapperTag, errorTag, onError, entryLinks, }: MDXContentProps): Promise<ReactNode>;

package/dist/MDXContent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as runtime from "react/jsx-runtime";
-import { compileMDXCore, makeDefaultEntryLink, makeDefaultImage } from "./core.js";
+import { compileMDXCore, makeDefaultEntryLink, makeDefaultImage, withEntryLinkData, } from "./core.js";
 import { wrapperClassName } from "./wrapperClassName.js";
 import { MDXErrorBoundary } from "./MDXErrorBoundary.js";
 import { CSS_TEXT } from "./cssText.js";
@@ -19,10 +19,16 @@ export async function compileMDX(source) {
  * Next.js Server Component wrapper around {@link compileMDX}. For non-RSC React, call `compileMDX` directly instead —
  * `await` inside a component body only works as an RSC.
  */
-export async function MDXContent({ source, components, unstyled, className, wrapperTag = "div", errorTag = "p", onError, }) {
+export async function MDXContent({ source, components, unstyled, className, wrapperTag = "div", errorTag = "p", onError, entryLinks, }) {
     const Wrapper = wrapperTag;
     const ErrorTag = errorTag;
     const wrapperClass = wrapperClassName(unstyled, className);
+    const effectiveComponents = entryLinks
+        ? {
+            ...components,
+            EntryLink: withEntryLinkData(components?.EntryLink ?? defaultComponents.EntryLink, entryLinks, runtime),
+        }
+        : components;
     // `href` + `precedence` make React DOM treat this as a de-duplicated, hoisted stylesheet
     // resource (React 19+) instead of a plain inline tag repeated per render.
     const styles = unstyled ? null : (_jsx("style", { href: "db-content-styles", precedence: "default", children: CSS_TEXT }));
@@ -35,5 +41,5 @@ export async function MDXContent({ source, components, unstyled, className, wrap
         return (_jsxs(_Fragment, { children: [styles, _jsx(Wrapper, { className: wrapperClass, children: _jsx(ErrorTag, { children: source }) })] }));
     }
     const { Content } = compiled;
-    return (_jsxs(_Fragment, { children: [styles, _jsx(Wrapper, { className: wrapperClass, children: _jsx(MDXErrorBoundary, { fallback: _jsx(ErrorTag, { children: source }), onError: onError, children: _jsx(Content, { components: components }) }) })] }));
+    return (_jsxs(_Fragment, { children: [styles, _jsx(Wrapper, { className: wrapperClass, children: _jsx(MDXErrorBoundary, { fallback: _jsx(ErrorTag, { children: source }), onError: onError, children: _jsx(Content, { components: effectiveComponents }) }) })] }));
 }

package/dist/core.d.ts

@@ -13,12 +13,31 @@ export interface FailedMDX {
  * the remark/rehype pipeline. `defaultComponents`, when given, are merged underneath the caller's own `components` (caller always wins per-tag).
  */
 export declare function compileMDXCore<TComponent>(source: string, jsxRuntime: JsxRuntime, defaultComponents?: Record<string, unknown>): Promise<CompiledMDX<TComponent> | FailedMDX>;
-/** Default `EntryLink` for a given JSX runtime — renders `<a href="/entries/{id}">`; apps that
- * route entries differently override it by passing `components.EntryLink`. */
-export declare function makeDefaultEntryLink(jsxRuntime: JsxRuntime): ({ id, children }: {
+/** The linked entry's own resolved data — the same shape the delivery API's `getEntry`/`getEntries`
+ * attach at `entry.entryLinks[id]` when called with `include` set (optionally widened with
+ * `entryLinkFields`). Mirrors the SDK's `EntryLinkView` minus `id`, kept local so the
+ * framework-agnostic renderer doesn't depend on `@draftbase/sdk`. */
+export interface LinkedEntryData {
+    templateId: string;
+    title: string;
+    status: string;
+    fields?: Record<string, unknown>;
+}
+/** Props passed to `EntryLink` — the id of the linked entry, authored via the entry picker in
+ * the MDX editor, plus that entry's own resolved data when the caller passed `entryLinks` to
+ * `MDXContent`/`compileMDX` (avoids an extra per-link fetch at render time). Apps overriding
+ * `components.EntryLink` should type their component against this. */
+export interface EntryLinkProps extends Partial<LinkedEntryData> {
     id?: string;
     children?: unknown;
-}) => JSX.Element;
+}
+/** Default `EntryLink` for a given JSX runtime — renders `<a href="/entries/{id}">`; apps that
+ * route entries differently override it by passing `components.EntryLink`. */
+export declare function makeDefaultEntryLink(jsxRuntime: JsxRuntime): ({ id, children }: EntryLinkProps) => JSX.Element;
+/** Wraps `EntryLink` (custom or default) so every instance also receives its resolved
+ * `LinkedEntryData` from `entryLinks[id]` — the caller's already-fetched `getEntry`/`getEntries`
+ * result — instead of each link having to re-fetch its own target. */
+export declare function withEntryLinkData(EntryLink: unknown, entryLinks: Record<string, LinkedEntryData> | undefined, jsxRuntime: JsxRuntime): unknown;
 /** Default `img` for a given JSX runtime — defers offscreen image loads instead of the browser's
  * eager default. Apps that want `next/image` (or another optimizer) override it via `components.img`;
  * an explicit `loading`/`decoding` on the element itself (rare, but author-settable) still wins. */

package/dist/core.js

@@ -38,6 +38,17 @@ export function makeDefaultEntryLink(jsxRuntime) {
         return jsxRuntime.jsx("a", { href: id ? `/entries/${id}` : undefined, children });
     };
 }
+/** Wraps `EntryLink` (custom or default) so every instance also receives its resolved
+ * `LinkedEntryData` from `entryLinks[id]` — the caller's already-fetched `getEntry`/`getEntries`
+ * result — instead of each link having to re-fetch its own target. */
+export function withEntryLinkData(EntryLink, entryLinks, jsxRuntime) {
+    if (!entryLinks)
+        return EntryLink;
+    return function EntryLinkWithData(props) {
+        const linked = props.id ? entryLinks[props.id] : undefined;
+        return jsxRuntime.jsx(EntryLink, { ...props, ...linked });
+    };
+}
 /** Default `img` for a given JSX runtime — defers offscreen image loads instead of the browser's
  * eager default. Apps that want `next/image` (or another optimizer) override it via `components.img`;
  * an explicit `loading`/`decoding` on the element itself (rare, but author-settable) still wins. */

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { MDXContent, compileMDX } from "./MDXContent.js";
 export type { MDXContentProps, CompiledMDX, FailedMDX } from "./MDXContent.js";
+export type { EntryLinkProps, LinkedEntryData } from "./core.js";
 export { toHtml } from "./toHtml.js";
 export { MDXErrorBoundary } from "./MDXErrorBoundary.js";

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,29 @@ 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 };
+        }
+        // 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 +53,118 @@ 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) {
+        console.error("MDX content failed to render a section, showing its raw source instead", error);
+        const raw = node.position
+            ? ctx.source.slice(node.position.start.offset, node.position.end.offset)
+            : `<${node.name ?? node.type}>`;
+        return jsx(ctx.components.p, { children: raw }, key);
+    }
+}
+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.2",
+  "version": "0.5.4",
   "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",