@draftbase/renderer 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +31 -8
- package/package.json +8 -9
package/README.md
CHANGED
|
@@ -1,6 +1,23 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
|
|
1
3
|
# @draftbase/renderer
|
|
2
4
|
|
|
3
|
-
Framework-agnostic MDX renderer for [Draftbase](https://draftbase.co)
|
|
5
|
+
**Framework-agnostic MDX renderer for [Draftbase](https://draftbase.co)** — the MDX-based headless CMS for React developers.
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/@draftbase/renderer)
|
|
8
|
+
[](https://github.com/draftbase-co/draftbase-monorepo/tree/main/packages/renderer)
|
|
9
|
+
|
|
10
|
+
</div>
|
|
11
|
+
|
|
12
|
+
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.
|
|
13
|
+
|
|
14
|
+
## 📦 Install
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
pnpm add @draftbase/renderer
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## 🧭 Pick your entry point
|
|
4
21
|
|
|
5
22
|
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:
|
|
6
23
|
|
|
@@ -12,13 +29,7 @@ Every framework entry point exposes the **same API shape** — `compileMDX(sourc
|
|
|
12
29
|
|
|
13
30
|
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.
|
|
14
31
|
|
|
15
|
-
##
|
|
16
|
-
|
|
17
|
-
```bash
|
|
18
|
-
pnpm add @draftbase/renderer
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
## Next.js App Router
|
|
32
|
+
## ⚛️ Next.js App Router
|
|
22
33
|
|
|
23
34
|
```tsx
|
|
24
35
|
import { MDXContent } from "@draftbase/renderer";
|
|
@@ -219,3 +230,15 @@ Yes — `compileMDX`/`toHtml` produce standard semantic HTML (headings, lists, t
|
|
|
219
230
|
|
|
220
231
|
**Which frontend frameworks are supported?**
|
|
221
232
|
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.
|
|
233
|
+
|
|
234
|
+
## Links
|
|
235
|
+
|
|
236
|
+
- [npm](https://www.npmjs.com/package/@draftbase/renderer)
|
|
237
|
+
- [Source (`packages/renderer`)](https://github.com/draftbase-co/draftbase-monorepo/tree/main/packages/renderer)
|
|
238
|
+
- [Issues](https://github.com/draftbase-co/draftbase-monorepo/issues)
|
|
239
|
+
- [`@draftbase/sdk`](https://www.npmjs.com/package/@draftbase/sdk) — fetches the content this package renders
|
|
240
|
+
- [draftbase.co](https://draftbase.co) — product site
|
|
241
|
+
- [Framework support](https://draftbase.co/frameworks) — per-framework rendering guide this README is based on
|
|
242
|
+
- [API reference](https://draftbase.co/docs/api-reference)
|
|
243
|
+
- [Docs](https://draftbase.co/docs)
|
|
244
|
+
- [Pricing](https://draftbase.co/pricing)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbase/renderer",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Framework-agnostic MDX renderer for Draftbase content (React, Next.js RSC, React Native, Astro, Vite, Vue)",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"draftbase",
|
|
@@ -17,8 +17,7 @@
|
|
|
17
17
|
"homepage": "https://draftbase.co",
|
|
18
18
|
"repository": {
|
|
19
19
|
"type": "git",
|
|
20
|
-
"url": "git+https://github.com/draftbase-co/
|
|
21
|
-
"directory": "packages/renderer"
|
|
20
|
+
"url": "git+https://github.com/draftbase-co/renderer.git"
|
|
22
21
|
},
|
|
23
22
|
"publishConfig": {
|
|
24
23
|
"access": "public"
|
|
@@ -39,6 +38,11 @@
|
|
|
39
38
|
"LICENSE",
|
|
40
39
|
"README.md"
|
|
41
40
|
],
|
|
41
|
+
"scripts": {
|
|
42
|
+
"build": "tsc -p tsconfig.json && cp src/styles.css dist/styles.css",
|
|
43
|
+
"lint": "tsc --noEmit",
|
|
44
|
+
"test": "node --test dist/wrapperClassName.test.js dist/toHtml.test.js dist/compileMDX.test.js"
|
|
45
|
+
},
|
|
42
46
|
"peerDependencies": {
|
|
43
47
|
"react": ">=18",
|
|
44
48
|
"vue": ">=3"
|
|
@@ -67,10 +71,5 @@
|
|
|
67
71
|
"react": "^19.0.0",
|
|
68
72
|
"vue": "^3.5.0",
|
|
69
73
|
"typescript": "^5.6.0"
|
|
70
|
-
},
|
|
71
|
-
"scripts": {
|
|
72
|
-
"build": "tsc -p tsconfig.json && cp src/styles.css dist/styles.css",
|
|
73
|
-
"lint": "tsc --noEmit",
|
|
74
|
-
"test": "node --test dist/wrapperClassName.test.js dist/toHtml.test.js dist/compileMDX.test.js"
|
|
75
74
|
}
|
|
76
|
-
}
|
|
75
|
+
}
|