@draftbase/renderer 0.1.0 → 0.1.2

package/README.md

@@ -1,6 +1,23 @@
+<div align="center">
+
 # @draftbase/renderer
 
-Framework-agnostic MDX renderer for [Draftbase](https://draftbase.co), the MDX-based headless CMS for React developers. Takes an entry's MDX/markdown field and renders it into a real component tree (React or Vue) or a plain HTML string — no vendor lock-in to one frontend framework. `compileMDX` is a plain async function with no dependency on Next.js, a bundler, or a router.
+**Framework-agnostic MDX renderer for [Draftbase](https://draftbase.co)** — the MDX-based headless CMS for React developers.
+
+[![npm](https://img.shields.io/npm/v/@draftbase/renderer)](https://www.npmjs.com/package/@draftbase/renderer)
+[![GitHub](https://img.shields.io/badge/GitHub-renderer-181717?logo=github)](https://github.com/draftbase-co/renderer)
+
+</div>
+
+Takes an entry's MDX/markdown field and renders it into a real component tree (React or Vue) or a plain HTML string — no vendor lock-in to one frontend framework. `compileMDX` is a plain async function with no dependency on Next.js, a bundler, or a router.
+
+## 📦 Install
+
+```bash
+pnpm add @draftbase/renderer
+```
+
+## 🧭 Pick your entry point
 
 Every framework entry point exposes the **same API shape** — `compileMDX(source)` resolving to `{ ok: true, Content }` or `{ ok: false, error }` — so switching frameworks (or supporting several in one monorepo) means changing the import path, not the calling code:
 
@@ -12,13 +29,7 @@ Every framework entry point exposes the **same API shape** — `compileMDX(sourc
 
 Only import the entry point for the framework you use — each pulls in just that framework's peer dependency (React or Vue), never both, so an app using one never bundles code for the other.
 
-## Install
-
-```bash
-pnpm add @draftbase/renderer
-```
-
-## Next.js App Router
+## ⚛️ Next.js App Router
 
 ```tsx
 import { MDXContent } from "@draftbase/renderer";
@@ -61,6 +72,16 @@ function Entry({ source }: { source: string }) {
 }
 ```
 
+`compiled.ok` only catches MDX _syntax_ errors. If the source references a JSX component you didn't pass in `components` (e.g. `<Callout>` without a `Callout` implementation), React throws while rendering `<Content>` — wrap it in the exported `MDXErrorBoundary` (React only, not React Native's non-DOM tree unless you supply an `errorTag`-equivalent fallback) to log it to the console and fail soft instead of crashing the page. `MDXContent` (the Next.js RSC helper above) already does this for you automatically.
+
+```tsx
+import { MDXErrorBoundary } from "@draftbase/renderer";
+
+<MDXErrorBoundary fallback={<Text>{source}</Text>}>
+  <Content components={{ p: Text, h1: Text /* ... */ }} />
+</MDXErrorBoundary>;
+```
+
 Extended markdown (tables, strikethrough, task lists, autolinks) is supported out of the box via `remark-gfm`.
 
 ## Astro
@@ -181,6 +202,27 @@ import { Callout, ImageBlock } from "@/components/content";
 
 Any standard markdown element (`h1`, `table`, `a`, ...) can also be overridden the same way, by key — **required** on non-DOM renderers like React Native, which have no intrinsic `div`/`p`/`a`/`img` tags.
 
+### Entry links
+
+The Draftbase editor can insert `<EntryLink id="...">Link text</EntryLink>` into rich text to link to another entry. It's a plain JSX component like any other — no special renderer support for the tag itself — so you must supply an `EntryLink` implementation the same way as `Callout`/`ImageBlock`. If `EntryLink` isn't supplied and the source contains one, rendering throws (same as any missing custom component).
+
+To route `id` correctly per content type, fetch the entry with `include=1` (via `@draftbase/sdk`) — the response includes an `entryLinks` map keyed by every `EntryLink` id found in that entry's richText fields, each with its `templateId`:
+
+```tsx
+const entry = await client.entries.get(entryId, undefined, 1);
+// entry.entryLinks = { "64f1a2b3c4d5e6f7a8b9c0d1": { id, templateId, title, status } }
+
+const ROUTE_BY_TEMPLATE: Record<string, string> = { blogPost: "/blog", product: "/products" };
+
+function EntryLink({ id, children }: { id: string; children: React.ReactNode }) {
+  const link = entry.entryLinks?.[id];
+  const base = ROUTE_BY_TEMPLATE[link?.templateId ?? ""] ?? "/entries";
+  return <a href={`${base}/${id}`}>{children}</a>;
+}
+
+<MDXContent source={entry.fields.body} components={{ EntryLink }} />;
+```
+
 ## Styling
 
 `@draftbase/renderer/styles.css` wraps output in a `.db-content` class with slim, sensible defaults (typography, tables, code blocks). Web-only, opt-in:
@@ -219,3 +261,15 @@ Yes — `compileMDX`/`toHtml` produce standard semantic HTML (headings, lists, t
 
 **Which frontend frameworks are supported?**
 React (Next.js App Router/RSC, plain client React, React Native, Remix, Astro islands, Vite) and Vue (including Nuxt) get first-class component output. Any other framework (Svelte, Angular, Solid, plain HTML/email/RSS) can use `toHtml` to get a plain HTML string instead.
+
+## Links
+
+- [npm](https://www.npmjs.com/package/@draftbase/renderer)
+- [Source](https://github.com/draftbase-co/renderer)
+- [Issues](https://github.com/draftbase-co/renderer/issues)
+- [`@draftbase/sdk`](https://www.npmjs.com/package/@draftbase/sdk) — fetches the content this package renders
+- [draftbase.co](https://draftbase.co) — product site
+- [Framework support](https://draftbase.co/frameworks) — per-framework rendering guide this README is based on
+- [API reference](https://draftbase.co/docs/api-reference)
+- [Docs](https://draftbase.co/docs)
+- [Pricing](https://draftbase.co/pricing)

package/dist/MDXContent.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as runtime from "react/jsx-runtime";
 import { compileMDXCore } from "./core.js";
 import { wrapperClassName } from "./wrapperClassName.js";
+import { MDXErrorBoundary } from "./MDXErrorBoundary.js";
 /**
  * Compiles raw MDX/markdown into a renderable React component — no DOM assumptions,
  * safe to call from a React Native loader, a client-side effect, or a Next.js Server
@@ -27,5 +28,5 @@ export async function MDXContent({ source, components, unstyled, className, wrap
         return (_jsx(Wrapper, { className: wrapperClass, children: _jsx(ErrorTag, { children: source }) }));
     }
     const { Content } = compiled;
-    return (_jsx(Wrapper, { className: wrapperClass, children: _jsx(Content, { components: components }) }));
+    return (_jsx(Wrapper, { className: wrapperClass, children: _jsx(MDXErrorBoundary, { fallback: _jsx(ErrorTag, { children: source }), children: _jsx(Content, { components: components }) }) }));
 }

package/dist/MDXErrorBoundary.d.ts

@@ -0,0 +1,17 @@
+import { Component, type ReactNode } from "react";
+interface MDXErrorBoundaryProps {
+    children: ReactNode;
+    fallback: ReactNode;
+}
+interface MDXErrorBoundaryState {
+    hasError: boolean;
+}
+export declare class MDXErrorBoundary extends Component<MDXErrorBoundaryProps, MDXErrorBoundaryState> {
+    state: MDXErrorBoundaryState;
+    static getDerivedStateFromError(): {
+        hasError: boolean;
+    };
+    componentDidCatch(error: unknown): void;
+    render(): ReactNode;
+}
+export {};

package/dist/MDXErrorBoundary.js

@@ -0,0 +1,18 @@
+"use client";
+import { Component } from "react";
+// Catches render-time errors from compiled MDX content — most commonly a JSX component
+// referenced in the source (e.g. `<Callout>`, `<EntryLink>`) that wasn't supplied in
+// `components`. Without this, that throws "Element type is invalid" and crashes the whole
+// page instead of just the content block.
+export class MDXErrorBoundary extends Component {
+    state = { hasError: false };
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+    componentDidCatch(error) {
+        console.error("MDX content failed to render", error);
+    }
+    render() {
+        return this.state.hasError ? this.props.fallback : this.props.children;
+    }
+}

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,2 +1,3 @@
 export { MDXContent, compileMDX } from "./MDXContent.js";
 export { toHtml } from "./toHtml.js";
+export { MDXErrorBoundary } from "./MDXErrorBoundary.js";

package/dist/styles.css

@@ -25,6 +25,12 @@
   line-height: 1.25;
   margin: 1.5em 0 0.5em;
   color: inherit;
+  scroll-margin-top: 96px;
+}
+
+/* Highlights a footnote/citation anchor when the URL hash lands on it, e.g. #fn-1. */
+.db-content :target {
+  background: var(--accent-subtle, rgba(127, 127, 127, 0.15));
 }
 
 .db-content h1 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbase/renderer",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Framework-agnostic MDX renderer for Draftbase content (React, Next.js RSC, React Native, Astro, Vite, Vue)",
   "keywords": [
     "draftbase",
@@ -17,8 +17,7 @@
   "homepage": "https://draftbase.co",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/draftbase-co/draftbase-monorepo.git",
-    "directory": "packages/renderer"
+    "url": "git+https://github.com/draftbase-co/renderer.git"
   },
   "publishConfig": {
     "access": "public"
@@ -39,6 +38,11 @@
     "LICENSE",
     "README.md"
   ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json && cp src/styles.css dist/styles.css",
+    "lint": "tsc --noEmit",
+    "test": "node --test dist/wrapperClassName.test.js dist/toHtml.test.js dist/compileMDX.test.js"
+  },
   "peerDependencies": {
     "react": ">=18",
     "vue": ">=3"
@@ -67,10 +71,5 @@
     "react": "^19.0.0",
     "vue": "^3.5.0",
     "typescript": "^5.6.0"
-  },
-  "scripts": {
-    "build": "tsc -p tsconfig.json && cp src/styles.css dist/styles.css",
-    "lint": "tsc --noEmit",
-    "test": "node --test dist/wrapperClassName.test.js dist/toHtml.test.js dist/compileMDX.test.js"
   }
-}
+}