mirror of
https://github.com/vercel-labs/json-render.git
synced 2026-10-03 04:18:15 +08:00
Compare commits
6
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Chris Tate
|
9f5a0cc589 | ||
|
Chris Tate
|
39302be1e2 | ||
|
Chris Tate
|
2a1f3f79d5 | ||
|
Chris Tate
|
faebbcafa7 | ||
|
Chris Tate
|
983c342ce9 | ||
|
Chris Tate
|
8108db4494 |
@@ -23,9 +23,7 @@
|
||||
"@json-render/solid",
|
||||
"@json-render/react-three-fiber",
|
||||
"@json-render/yaml",
|
||||
"@json-render/shadcn-svelte",
|
||||
"@json-render/ink",
|
||||
"@json-render/next"
|
||||
"@json-render/ink"
|
||||
]
|
||||
],
|
||||
"linked": [],
|
||||
|
||||
@@ -25,8 +25,6 @@ npm install @json-render/core @json-render/svelte
|
||||
npm install @json-render/core @json-render/solid
|
||||
# or for terminal UIs
|
||||
npm install @json-render/core @json-render/ink ink react
|
||||
# or for full Next.js apps (routes, layouts, SSR, metadata)
|
||||
npm install @json-render/core @json-render/react @json-render/next
|
||||
# or for 3D scenes
|
||||
npm install @json-render/core @json-render/react-three-fiber @react-three/fiber @react-three/drei three
|
||||
```
|
||||
@@ -127,10 +125,8 @@ function Dashboard({ spec }) {
|
||||
| `@json-render/svelte` | Svelte 5 renderer with runes-based reactivity |
|
||||
| `@json-render/solid` | SolidJS renderer with fine-grained reactive contexts |
|
||||
| `@json-render/shadcn` | 36 pre-built shadcn/ui components (Radix UI + Tailwind CSS) |
|
||||
| `@json-render/shadcn-svelte`| 36 pre-built shadcn-svelte components (Svelte 5 + Tailwind CSS) |
|
||||
| `@json-render/react-three-fiber` | React Three Fiber renderer for 3D scenes (19 built-in components) |
|
||||
| `@json-render/react-native` | React Native renderer with standard mobile components |
|
||||
| `@json-render/next` | Next.js renderer — JSON becomes full apps with routes, layouts, SSR |
|
||||
| `@json-render/remotion` | Remotion video renderer, timeline schema |
|
||||
| `@json-render/react-pdf` | React PDF renderer for generating PDF documents from specs |
|
||||
| `@json-render/react-email` | React Email renderer for HTML/plain-text emails from specs |
|
||||
@@ -486,80 +482,6 @@ const { registry } = defineRegistry(catalog, {
|
||||
/>;
|
||||
```
|
||||
|
||||
### Next.js (Full Apps)
|
||||
|
||||
```typescript
|
||||
import type { NextAppSpec } from "@json-render/next";
|
||||
import { createNextApp } from "@json-render/next/server";
|
||||
import { NextAppProvider } from "@json-render/next";
|
||||
|
||||
const spec: NextAppSpec = {
|
||||
metadata: { title: { default: "My App", template: "%s | My App" } },
|
||||
layouts: {
|
||||
main: {
|
||||
root: "shell",
|
||||
elements: {
|
||||
shell: { type: "Container", props: {}, children: ["nav", "slot"] },
|
||||
nav: { type: "NavBar", props: {}, children: [] },
|
||||
slot: { type: "Slot", props: {}, children: [] },
|
||||
},
|
||||
},
|
||||
},
|
||||
routes: {
|
||||
"/": {
|
||||
layout: "main",
|
||||
metadata: { title: "Home" },
|
||||
page: {
|
||||
root: "hero",
|
||||
elements: {
|
||||
hero: { type: "Card", props: { title: "Welcome" }, children: [] },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Server: creates Page, generateMetadata, generateStaticParams
|
||||
const app = createNextApp({ spec });
|
||||
|
||||
// Client: wrap your layout with NextAppProvider
|
||||
// <NextAppProvider registry={registry} handlers={handlers}>
|
||||
// {children}
|
||||
// </NextAppProvider>
|
||||
```
|
||||
|
||||
### shadcn-svelte (Svelte)
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from "@json-render/core";
|
||||
import { schema } from "@json-render/svelte/schema";
|
||||
import { defineRegistry, Renderer } from "@json-render/svelte";
|
||||
import { shadcnComponentDefinitions } from "@json-render/shadcn-svelte/catalog";
|
||||
import { shadcnComponents } from "@json-render/shadcn-svelte";
|
||||
|
||||
const catalog = defineCatalog(schema, {
|
||||
components: {
|
||||
Card: shadcnComponentDefinitions.Card,
|
||||
Stack: shadcnComponentDefinitions.Stack,
|
||||
Heading: shadcnComponentDefinitions.Heading,
|
||||
Button: shadcnComponentDefinitions.Button,
|
||||
},
|
||||
actions: {},
|
||||
});
|
||||
|
||||
const { registry } = defineRegistry(catalog, {
|
||||
components: {
|
||||
Card: shadcnComponents.Card,
|
||||
Stack: shadcnComponents.Stack,
|
||||
Heading: shadcnComponents.Heading,
|
||||
Button: shadcnComponents.Button,
|
||||
},
|
||||
});
|
||||
|
||||
// In your Svelte component:
|
||||
// <Renderer spec={spec} registry={registry} />
|
||||
```
|
||||
|
||||
### Ink (Terminal)
|
||||
|
||||
```tsx
|
||||
|
||||
@@ -1,25 +1,5 @@
|
||||
# web
|
||||
|
||||
## 0.1.11
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
- @json-render/codegen@0.16.0
|
||||
- @json-render/react@0.16.0
|
||||
- @json-render/yaml@0.16.0
|
||||
|
||||
## 0.1.10
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bf3a7ec]
|
||||
- @json-render/core@0.15.0
|
||||
- @json-render/codegen@0.15.0
|
||||
- @json-render/react@0.15.0
|
||||
- @json-render/yaml@0.15.0
|
||||
|
||||
## 0.1.9
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,280 +0,0 @@
|
||||
import { pageMetadata } from "@/lib/page-metadata"
|
||||
export const metadata = pageMetadata("docs/api/next")
|
||||
|
||||
# @json-render/next
|
||||
|
||||
Next.js renderer. JSON becomes full Next.js applications with routes, layouts, metadata, and SSR.
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
npm install @json-render/core @json-render/react @json-render/next
|
||||
```
|
||||
|
||||
## schema
|
||||
|
||||
The Next.js app schema for multi-page specs. Use with `defineCatalog` from core.
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from '@json-render/core';
|
||||
import { schema } from '@json-render/next/server';
|
||||
import { z } from 'zod';
|
||||
|
||||
const catalog = defineCatalog(schema, {
|
||||
components: {
|
||||
Card: {
|
||||
props: z.object({ title: z.string() }),
|
||||
description: 'Card container',
|
||||
},
|
||||
NavBar: {
|
||||
props: z.object({ links: z.array(z.object({ href: z.string(), label: z.string() })) }),
|
||||
description: 'Navigation bar',
|
||||
},
|
||||
},
|
||||
actions: {},
|
||||
});
|
||||
```
|
||||
|
||||
## createNextApp
|
||||
|
||||
Create all exports needed for a Next.js `[[...slug]]` catch-all route.
|
||||
|
||||
```typescript
|
||||
import { createNextApp } from '@json-render/next/server';
|
||||
|
||||
const { Page, generateMetadata, generateStaticParams } = createNextApp({
|
||||
spec: myAppSpec,
|
||||
loaders: {
|
||||
loadPost: async ({ slug }) => {
|
||||
const post = await db.post.findUnique({ where: { slug } });
|
||||
return { post };
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Option</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>spec</code></td>
|
||||
<td><code>{'NextAppSpec | (() => NextAppSpec | Promise<NextAppSpec>)'}</code></td>
|
||||
<td>The application spec (static or dynamic)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>loaders</code></td>
|
||||
<td><code>{'Record<string, LoaderFn>'}</code></td>
|
||||
<td>Server-side data loaders keyed by name</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### Returns
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Export</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>Page</code></td>
|
||||
<td>Async Server Component for <code>page.tsx</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>generateMetadata</code></td>
|
||||
<td>Metadata generator for Next.js SEO</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>generateStaticParams</code></td>
|
||||
<td>Static params for pre-rendering at build time</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
## NextAppSpec
|
||||
|
||||
The top-level spec defining an entire Next.js application.
|
||||
|
||||
```typescript
|
||||
interface NextAppSpec {
|
||||
metadata?: NextMetadata;
|
||||
routes: Record<string, NextRouteSpec>;
|
||||
layouts?: Record<string, Spec>;
|
||||
state?: Record<string, unknown>;
|
||||
}
|
||||
```
|
||||
|
||||
### Route Patterns
|
||||
|
||||
Routes use Next.js URL conventions:
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Pattern</th>
|
||||
<th>Example Match</th>
|
||||
<th>Params</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>/</code></td>
|
||||
<td><code>/</code></td>
|
||||
<td><code>{'{}'}</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>/about</code></td>
|
||||
<td><code>/about</code></td>
|
||||
<td><code>{'{}'}</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>/blog/[slug]</code></td>
|
||||
<td><code>/blog/hello</code></td>
|
||||
<td><code>{'{ slug: "hello" }'}</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>/docs/[...path]</code></td>
|
||||
<td><code>/docs/a/b/c</code></td>
|
||||
<td><code>{'{ path: ["a","b","c"] }'}</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>/app/[[...path]]</code></td>
|
||||
<td><code>/app</code> or <code>/app/x/y</code></td>
|
||||
<td><code>{'{ path: [] }'}</code> or <code>{'{ path: ["x","y"] }'}</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
## NextAppProvider
|
||||
|
||||
Client component that provides the component registry and action handlers to all pages.
|
||||
|
||||
```tsx
|
||||
import { NextAppProvider } from '@json-render/next';
|
||||
|
||||
export default function Layout({ children }) {
|
||||
return (
|
||||
<NextAppProvider registry={registry} handlers={handlers}>
|
||||
{children}
|
||||
</NextAppProvider>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Built-in Components
|
||||
|
||||
### Slot
|
||||
|
||||
Placeholder in layouts where page content is rendered. Every layout MUST include a Slot.
|
||||
|
||||
```json
|
||||
{ "type": "Slot", "props": {}, "children": [] }
|
||||
```
|
||||
|
||||
### Link
|
||||
|
||||
Client-side navigation wrapping `next/link`.
|
||||
|
||||
```json
|
||||
{ "type": "Link", "props": { "href": "/about" }, "children": ["link-text"] }
|
||||
```
|
||||
|
||||
## Built-in Actions
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Action</th>
|
||||
<th>Params</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>setState</code></td>
|
||||
<td><code>{'{ statePath, value }'}</code></td>
|
||||
<td>Update a value in state</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>pushState</code></td>
|
||||
<td><code>{'{ statePath, value, clearStatePath? }'}</code></td>
|
||||
<td>Append to array in state</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>removeState</code></td>
|
||||
<td><code>{'{ statePath, index }'}</code></td>
|
||||
<td>Remove from array by index</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>navigate</code></td>
|
||||
<td><code>{'{ href }'}</code></td>
|
||||
<td>Client-side navigation</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
## Server Utilities
|
||||
|
||||
### matchRoute
|
||||
|
||||
Match a pathname against a spec's routes.
|
||||
|
||||
```typescript
|
||||
import { matchRoute } from '@json-render/next/server';
|
||||
|
||||
const matched = matchRoute(spec, '/blog/hello-world');
|
||||
// { route: NextRouteSpec, pattern: '/blog/[slug]', params: { slug: 'hello-world' } }
|
||||
```
|
||||
|
||||
### resolveMetadata
|
||||
|
||||
Resolve merged metadata for a route.
|
||||
|
||||
```typescript
|
||||
import { resolveMetadata } from '@json-render/next/server';
|
||||
|
||||
const metadata = resolveMetadata(spec, matchedRoute?.route);
|
||||
```
|
||||
|
||||
### slugToPath
|
||||
|
||||
Convert catch-all slug array to pathname.
|
||||
|
||||
```typescript
|
||||
import { slugToPath } from '@json-render/next/server';
|
||||
|
||||
slugToPath(undefined); // "/"
|
||||
slugToPath(['blog', 'hello']); // "/blog/hello"
|
||||
```
|
||||
|
||||
## Entry Points
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Import</th>
|
||||
<th>Contents</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@json-render/next</code></td>
|
||||
<td>Client components (NextAppProvider, PageRenderer, Link)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@json-render/next/server</code></td>
|
||||
<td>Server utilities (createNextApp, matchRoute, schema)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -1,320 +0,0 @@
|
||||
import { pageMetadata } from "@/lib/page-metadata"
|
||||
export const metadata = pageMetadata("docs/api/shadcn-svelte")
|
||||
|
||||
# @json-render/shadcn-svelte
|
||||
|
||||
Pre-built [shadcn-svelte](https://www.shadcn-svelte.com/) components for json-render. 36 components built on Svelte 5 + Tailwind CSS, ready to use with `defineCatalog` and `defineRegistry`.
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
npm install @json-render/shadcn-svelte @json-render/core @json-render/svelte zod
|
||||
```
|
||||
|
||||
Your app must have Tailwind CSS configured.
|
||||
|
||||
## Entry Points
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Entry Point</th>
|
||||
<th>Exports</th>
|
||||
<th>Use For</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>@json-render/shadcn-svelte</code></td>
|
||||
<td><code>shadcnComponents</code>, <code>shadcnComponentDefinitions</code></td>
|
||||
<td>Svelte implementations + catalog schemas</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>@json-render/shadcn-svelte/catalog</code></td>
|
||||
<td><code>shadcnComponentDefinitions</code></td>
|
||||
<td>Catalog schemas only (no Svelte dependency, safe for server)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
## Usage
|
||||
|
||||
Pick the components you need from the standard definitions:
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from "@json-render/core";
|
||||
import { schema } from "@json-render/svelte/schema";
|
||||
import { shadcnComponentDefinitions } from "@json-render/shadcn-svelte/catalog";
|
||||
import { defineRegistry } from "@json-render/svelte";
|
||||
import { shadcnComponents } from "@json-render/shadcn-svelte";
|
||||
|
||||
// Catalog: pick definitions
|
||||
const catalog = defineCatalog(schema, {
|
||||
components: {
|
||||
Card: shadcnComponentDefinitions.Card,
|
||||
Stack: shadcnComponentDefinitions.Stack,
|
||||
Heading: shadcnComponentDefinitions.Heading,
|
||||
Button: shadcnComponentDefinitions.Button,
|
||||
Input: shadcnComponentDefinitions.Input,
|
||||
},
|
||||
actions: {},
|
||||
});
|
||||
|
||||
// Registry: pick matching implementations
|
||||
const { registry } = defineRegistry(catalog, {
|
||||
components: {
|
||||
Card: shadcnComponents.Card,
|
||||
Stack: shadcnComponents.Stack,
|
||||
Heading: shadcnComponents.Heading,
|
||||
Button: shadcnComponents.Button,
|
||||
Input: shadcnComponents.Input,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
Then render in your Svelte component:
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import { Renderer, JsonUIProvider } from "@json-render/svelte";
|
||||
|
||||
export let spec;
|
||||
export let registry;
|
||||
</script>
|
||||
|
||||
<JsonUIProvider initialState={spec?.state ?? {}}>
|
||||
<Renderer {spec} {registry} />
|
||||
</JsonUIProvider>
|
||||
```
|
||||
|
||||
## Available Components
|
||||
|
||||
### Layout
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Component</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>Card</code></td>
|
||||
<td>Container card with optional title, description, maxWidth, centered</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Stack</code></td>
|
||||
<td>Flex container with direction, gap, align, justify</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Grid</code></td>
|
||||
<td>Grid layout with columns (1-6) and gap</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Separator</code></td>
|
||||
<td>Visual separator line with orientation</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### Navigation
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Component</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>Tabs</code></td>
|
||||
<td>Tabbed navigation with tabs array, defaultValue, value</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Accordion</code></td>
|
||||
<td>Collapsible sections with items array and type (single/multiple)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Collapsible</code></td>
|
||||
<td>Single collapsible section with title and defaultOpen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Pagination</code></td>
|
||||
<td>Page navigation with totalPages and page</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### Overlay
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Component</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>Dialog</code></td>
|
||||
<td>Modal dialog with title, description, openPath</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Drawer</code></td>
|
||||
<td>Bottom drawer with title, description, openPath</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Tooltip</code></td>
|
||||
<td>Hover tooltip with content and text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Popover</code></td>
|
||||
<td>Click-triggered popover with trigger and content</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>DropdownMenu</code></td>
|
||||
<td>Dropdown menu with label and items array</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### Content
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Component</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>Heading</code></td>
|
||||
<td>Heading text with level (h1-h4)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Text</code></td>
|
||||
<td>Paragraph with variant (body, caption, muted, lead, code)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Image</code></td>
|
||||
<td>Image with alt, width, height</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Avatar</code></td>
|
||||
<td>User avatar with src, name, size</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Badge</code></td>
|
||||
<td>Status badge with text and variant</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Alert</code></td>
|
||||
<td>Alert banner with title, message, type</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Carousel</code></td>
|
||||
<td>Horizontally scrollable carousel with items</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Table</code></td>
|
||||
<td>Data table with columns and rows</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### Feedback
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Component</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>Progress</code></td>
|
||||
<td>Progress bar with value, max, label</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Skeleton</code></td>
|
||||
<td>Loading placeholder with width, height, rounded</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Spinner</code></td>
|
||||
<td>Loading spinner with size and label</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### Input
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Component</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>Button</code></td>
|
||||
<td>Clickable button with label, variant, disabled</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Link</code></td>
|
||||
<td>Anchor link with label and href</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Input</code></td>
|
||||
<td>Text input with label, name, type, placeholder, value, checks</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Textarea</code></td>
|
||||
<td>Multi-line text input with label, name, placeholder, rows, value, checks</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Select</code></td>
|
||||
<td>Dropdown select with label, name, options, value, checks</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Checkbox</code></td>
|
||||
<td>Checkbox with label, name, checked</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Radio</code></td>
|
||||
<td>Radio button group with label, name, options, value</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Switch</code></td>
|
||||
<td>Toggle switch with label, name, checked</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Slider</code></td>
|
||||
<td>Range slider with label, min, max, step, value</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>Toggle</code></td>
|
||||
<td>Toggle button with label, pressed, variant</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>ToggleGroup</code></td>
|
||||
<td>Group of toggle buttons with items, type, value</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>ButtonGroup</code></td>
|
||||
<td>Group of buttons with buttons array and selected</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
## Notes
|
||||
|
||||
- The `/catalog` entry point has no Svelte dependency -- use it for server-side prompt generation
|
||||
- Components use Tailwind CSS classes -- your app must have Tailwind configured
|
||||
- Component implementations use bundled shadcn-svelte primitives (not your app's `$lib/components/ui/`)
|
||||
- Form inputs support `checks` for validation (type + message pairs) and `validateOn` for timing
|
||||
- Events: inputs emit `change`/`submit`/`focus`/`blur`; buttons emit `press`; selects emit `change`/`select`
|
||||
@@ -16,8 +16,8 @@ const SYSTEM_PROMPT = `You are a helpful documentation assistant for json-render
|
||||
|
||||
GitHub repository: https://github.com/vercel-labs/json-render
|
||||
Documentation: https://json-render.dev/docs
|
||||
npm packages: @json-render/core, @json-render/react, @json-render/next, @json-render/ink, @json-render/vue, @json-render/svelte, @json-render/solid, @json-render/shadcn, @json-render/shadcn-svelte, @json-render/react-three-fiber, @json-render/react-native, @json-render/react-email, @json-render/react-pdf, @json-render/image, @json-render/remotion, @json-render/codegen, @json-render/mcp, @json-render/redux, @json-render/zustand, @json-render/jotai, @json-render/xstate, @json-render/yaml
|
||||
Skills: json-render ships AI agent skills that teach coding agents how to use each package. Install with "npx skills add vercel-labs/json-render --skill <name>". Available skills: core, react, next, ink, react-pdf, react-email, react-native, shadcn, shadcn-svelte, react-three-fiber, image, remotion, vue, svelte, solid, codegen, mcp, redux, zustand, jotai, xstate, yaml. See /docs/skills for details.
|
||||
npm packages: @json-render/core, @json-render/react, @json-render/ink, @json-render/vue, @json-render/svelte, @json-render/solid, @json-render/shadcn, @json-render/react-three-fiber, @json-render/react-native, @json-render/react-email, @json-render/react-pdf, @json-render/image, @json-render/remotion, @json-render/codegen, @json-render/mcp, @json-render/redux, @json-render/zustand, @json-render/jotai, @json-render/xstate, @json-render/yaml
|
||||
Skills: json-render ships AI agent skills that teach coding agents how to use each package. Install with "npx skills add vercel-labs/json-render --skill <name>". Available skills: core, react, ink, react-pdf, react-email, react-native, shadcn, react-three-fiber, image, remotion, vue, svelte, solid, codegen, mcp, redux, zustand, jotai, xstate, yaml. See /docs/skills for details.
|
||||
|
||||
You have access to the full json-render documentation via the bash and readFile tools. The docs are available as markdown files in the /workspace/docs/ directory.
|
||||
|
||||
|
||||
@@ -69,11 +69,9 @@ export const docsNavigation: NavSection[] = [
|
||||
items: [
|
||||
{ title: "@json-render/core", href: "/docs/api/core" },
|
||||
{ title: "@json-render/react", href: "/docs/api/react" },
|
||||
{ title: "@json-render/next", href: "/docs/api/next" },
|
||||
{ title: "@json-render/react-pdf", href: "/docs/api/react-pdf" },
|
||||
{ title: "@json-render/react-email", href: "/docs/api/react-email" },
|
||||
{ title: "@json-render/shadcn", href: "/docs/api/shadcn" },
|
||||
{ title: "@json-render/shadcn-svelte", href: "/docs/api/shadcn-svelte" },
|
||||
{ title: "@json-render/react-native", href: "/docs/api/react-native" },
|
||||
{ title: "@json-render/image", href: "/docs/api/image" },
|
||||
{ title: "@json-render/remotion", href: "/docs/api/remotion" },
|
||||
|
||||
@@ -43,7 +43,6 @@ export const PAGE_TITLES: Record<string, string> = {
|
||||
// API references
|
||||
"docs/api/core": "@json-render/core API",
|
||||
"docs/api/react": "@json-render/react API",
|
||||
"docs/api/next": "@json-render/next API",
|
||||
"docs/api/vue": "@json-render/vue API",
|
||||
"docs/api/solid": "@json-render/solid API",
|
||||
"docs/api/react-pdf": "@json-render/react-pdf API",
|
||||
@@ -54,7 +53,6 @@ export const PAGE_TITLES: Record<string, string> = {
|
||||
"docs/api/image": "@json-render/image API",
|
||||
"docs/api/remotion": "@json-render/remotion API",
|
||||
"docs/api/shadcn": "@json-render/shadcn API",
|
||||
"docs/api/shadcn-svelte": "@json-render/shadcn-svelte API",
|
||||
"docs/api/mcp": "@json-render/mcp API",
|
||||
"docs/api/redux": "@json-render/redux API",
|
||||
"docs/api/zustand": "@json-render/zustand API",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "web",
|
||||
"version": "0.1.11",
|
||||
"version": "0.1.9",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"license": "Apache-2.0",
|
||||
|
||||
@@ -1,23 +1,5 @@
|
||||
# example-chat
|
||||
|
||||
## 0.1.11
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
- @json-render/react@0.16.0
|
||||
- @json-render/shadcn@0.16.0
|
||||
|
||||
## 0.1.10
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bf3a7ec]
|
||||
- @json-render/core@0.15.0
|
||||
- @json-render/react@0.15.0
|
||||
- @json-render/shadcn@0.15.0
|
||||
|
||||
## 0.1.9
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "example-chat",
|
||||
"version": "0.1.11",
|
||||
"version": "0.1.9",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
||||
@@ -1,23 +1,5 @@
|
||||
# example-dashboard
|
||||
|
||||
## 0.1.11
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
- @json-render/codegen@0.16.0
|
||||
- @json-render/react@0.16.0
|
||||
|
||||
## 0.1.10
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bf3a7ec]
|
||||
- @json-render/core@0.15.0
|
||||
- @json-render/codegen@0.15.0
|
||||
- @json-render/react@0.15.0
|
||||
|
||||
## 0.1.9
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "example-dashboard",
|
||||
"version": "0.1.11",
|
||||
"version": "0.1.9",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
# example-game-engine
|
||||
|
||||
## 0.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
- @json-render/react@0.16.0
|
||||
- @json-render/react-three-fiber@0.16.0
|
||||
- @json-render/yaml@0.16.0
|
||||
|
||||
## 0.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bf3a7ec]
|
||||
- @json-render/core@0.15.0
|
||||
- @json-render/react@0.15.0
|
||||
- @json-render/react-three-fiber@0.15.0
|
||||
- @json-render/yaml@0.15.0
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "example-game-engine",
|
||||
"version": "0.1.2",
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
||||
@@ -1,21 +1,5 @@
|
||||
# example-image
|
||||
|
||||
## 0.1.8
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
- @json-render/image@0.16.0
|
||||
|
||||
## 0.1.7
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bf3a7ec]
|
||||
- @json-render/core@0.15.0
|
||||
- @json-render/image@0.15.0
|
||||
|
||||
## 0.1.6
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "example-image",
|
||||
"version": "0.1.8",
|
||||
"version": "0.1.6",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
# example-ink-chat
|
||||
|
||||
## 0.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
- @json-render/ink@0.16.0
|
||||
|
||||
## 0.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bf3a7ec]
|
||||
- @json-render/core@0.15.0
|
||||
- @json-render/ink@0.15.0
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "example-ink-chat",
|
||||
"version": "0.1.2",
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
||||
@@ -1,25 +1,5 @@
|
||||
# example-mcp
|
||||
|
||||
## 0.1.7
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
- @json-render/mcp@0.16.0
|
||||
- @json-render/react@0.16.0
|
||||
- @json-render/shadcn@0.16.0
|
||||
|
||||
## 0.1.6
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bf3a7ec]
|
||||
- @json-render/core@0.15.0
|
||||
- @json-render/mcp@0.15.0
|
||||
- @json-render/react@0.15.0
|
||||
- @json-render/shadcn@0.15.0
|
||||
|
||||
## 0.1.5
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "example-mcp",
|
||||
"version": "0.1.7",
|
||||
"version": "0.1.5",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
# example-next-website-builder
|
||||
|
||||
## 0.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
- @json-render/next@0.16.0
|
||||
- @json-render/react@0.16.0
|
||||
- @json-render/shadcn@0.16.0
|
||||
@@ -1,12 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { NextAppProvider } from "@json-render/next";
|
||||
import { registry } from "@/lib/registry";
|
||||
|
||||
export default function WebsiteLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return <NextAppProvider registry={registry}>{children}</NextAppProvider>;
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import { notFound } from "next/navigation";
|
||||
import { getPageData, generateMetadata, generateStaticParams } from "@/lib/app";
|
||||
import { WebsiteRenderer } from "./renderer";
|
||||
|
||||
export { generateMetadata, generateStaticParams };
|
||||
|
||||
export default async function Page({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug?: string[] }>;
|
||||
}) {
|
||||
const data = await getPageData({ params });
|
||||
if (!data) notFound();
|
||||
return <WebsiteRenderer {...data} />;
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { PageRenderer, type PageRendererProps } from "@json-render/next";
|
||||
|
||||
export function WebsiteRenderer(props: PageRendererProps) {
|
||||
return <PageRenderer {...props} />;
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
import type { NextAppSpec } from "@json-render/next";
|
||||
import { getSpec, setSpec } from "@/lib/spec-store";
|
||||
|
||||
export async function GET() {
|
||||
return Response.json(getSpec());
|
||||
}
|
||||
|
||||
export async function PUT(req: Request) {
|
||||
setSpec((await req.json()) as NextAppSpec);
|
||||
return Response.json({ ok: true });
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import { Editor } from "@/components/editor";
|
||||
|
||||
export default function BuilderPage() {
|
||||
return <Editor />;
|
||||
}
|
||||
@@ -1,101 +0,0 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
@source "../../../packages/shadcn/src/**/*.tsx";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--radius-2xl: calc(var(--radius) + 8px);
|
||||
--radius-3xl: calc(var(--radius) + 12px);
|
||||
--radius-4xl: calc(var(--radius) + 16px);
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
}
|
||||
|
||||
:root {
|
||||
--radius: 0.625rem;
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import type { Metadata } from "next";
|
||||
import { GeistSans } from "geist/font/sans";
|
||||
import { GeistMono } from "geist/font/mono";
|
||||
import "./globals.css";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Next Website Builder | json-render",
|
||||
description:
|
||||
"Build entire Next.js websites from JSON specs with @json-render/next",
|
||||
icons: { icon: "/icon.svg" },
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" className={`${GeistSans.variable} ${GeistMono.variable}`}>
|
||||
<body className="font-sans antialiased">{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -1,180 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
type MouseEvent,
|
||||
} from "react";
|
||||
import { JsonEditor, type JsonValue } from "@visual-json/react";
|
||||
import type { NextAppSpec } from "@json-render/next";
|
||||
import { NextAppProvider, PageRenderer } from "@json-render/next";
|
||||
import {
|
||||
ResizablePanelGroup,
|
||||
ResizablePanel,
|
||||
ResizableHandle,
|
||||
} from "@/components/ui/resizable";
|
||||
import { AddressBar } from "@/components/route-tabs";
|
||||
import { registry } from "@/lib/registry";
|
||||
|
||||
export function Editor() {
|
||||
const [spec, setSpec] = useState<NextAppSpec | null>(null);
|
||||
const [activeRoute, setActiveRoute] = useState("/");
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true);
|
||||
const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/api/spec")
|
||||
.then((r) => r.json())
|
||||
.then((data: NextAppSpec) => setSpec(data));
|
||||
}, []);
|
||||
|
||||
const handleChange = useCallback((value: JsonValue) => {
|
||||
const updated = value as unknown as NextAppSpec;
|
||||
setSpec(updated);
|
||||
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current);
|
||||
debounceRef.current = setTimeout(() => {
|
||||
fetch("/api/spec", {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(updated),
|
||||
});
|
||||
}, 500);
|
||||
}, []);
|
||||
|
||||
const handlePreviewClick = useCallback((e: MouseEvent<HTMLDivElement>) => {
|
||||
const anchor = (e.target as HTMLElement).closest("a");
|
||||
if (!anchor) return;
|
||||
const href = anchor.getAttribute("href");
|
||||
if (!href || href.startsWith("http") || href.startsWith("mailto:")) return;
|
||||
e.preventDefault();
|
||||
setActiveRoute(href);
|
||||
}, []);
|
||||
|
||||
const currentRoute = useMemo(() => {
|
||||
if (!spec) return null;
|
||||
return spec.routes[activeRoute] ?? null;
|
||||
}, [spec, activeRoute]);
|
||||
|
||||
const layoutSpec = useMemo(() => {
|
||||
if (!spec || !currentRoute?.layout || !spec.layouts) return null;
|
||||
return spec.layouts[currentRoute.layout] ?? null;
|
||||
}, [spec, currentRoute]);
|
||||
|
||||
const initialState = useMemo(() => {
|
||||
if (!spec || !currentRoute) return undefined;
|
||||
const merged: Record<string, unknown> = {};
|
||||
if (spec.state) Object.assign(merged, spec.state);
|
||||
if (currentRoute.page.state) Object.assign(merged, currentRoute.page.state);
|
||||
return Object.keys(merged).length > 0 ? merged : undefined;
|
||||
}, [spec, currentRoute]);
|
||||
|
||||
if (!spec) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-screen text-muted-foreground">
|
||||
Loading...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-screen flex flex-col">
|
||||
<div className="flex items-center justify-between px-4 h-12 border-b border-border bg-background shrink-0">
|
||||
<span className="text-sm font-semibold">Next Website Builder</span>
|
||||
<a
|
||||
href="/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
View Website
|
||||
</a>
|
||||
</div>
|
||||
<ResizablePanelGroup orientation="horizontal" className="flex-1">
|
||||
<ResizablePanel defaultSize={45} minSize={25}>
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="flex items-center justify-between px-3 h-10 border-b border-border bg-muted/30">
|
||||
<span className="text-xs font-mono text-muted-foreground">
|
||||
spec.json
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setSidebarOpen((v) => !v)}
|
||||
className="flex items-center justify-center w-6 h-6 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
|
||||
title={sidebarOpen ? "Hide sidebar" : "Show sidebar"}
|
||||
>
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" />
|
||||
<path d="M9 3v18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-auto">
|
||||
<JsonEditor
|
||||
value={spec as unknown as JsonValue}
|
||||
onChange={handleChange}
|
||||
sidebarOpen={sidebarOpen}
|
||||
height="100%"
|
||||
className="h-full"
|
||||
style={
|
||||
{
|
||||
"--vj-bg": "var(--background)",
|
||||
"--vj-bg-panel": "var(--background)",
|
||||
"--vj-bg-hover": "var(--muted)",
|
||||
"--vj-bg-selected": "var(--primary)",
|
||||
"--vj-bg-selected-muted": "var(--muted)",
|
||||
"--vj-text": "var(--foreground)",
|
||||
"--vj-text-selected": "var(--primary-foreground)",
|
||||
"--vj-text-muted": "var(--muted-foreground)",
|
||||
"--vj-text-dim": "var(--muted-foreground)",
|
||||
"--vj-border": "var(--border)",
|
||||
"--vj-border-subtle": "var(--border)",
|
||||
"--vj-accent": "var(--primary)",
|
||||
"--vj-accent-muted": "var(--muted)",
|
||||
"--vj-input-bg": "var(--secondary)",
|
||||
"--vj-input-border": "var(--border)",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle withHandle />
|
||||
<ResizablePanel defaultSize={55} minSize={30}>
|
||||
<div className="h-full flex flex-col">
|
||||
<AddressBar route={activeRoute} onNavigate={setActiveRoute} />
|
||||
<div
|
||||
className="flex-1 overflow-auto bg-background"
|
||||
onClick={handlePreviewClick}
|
||||
>
|
||||
{currentRoute ? (
|
||||
<NextAppProvider registry={registry}>
|
||||
<PageRenderer
|
||||
spec={currentRoute.page}
|
||||
initialState={initialState}
|
||||
layoutSpec={layoutSpec}
|
||||
/>
|
||||
</NextAppProvider>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-full text-muted-foreground text-sm">
|
||||
Route not found
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useState, type KeyboardEvent } from "react";
|
||||
|
||||
interface AddressBarProps {
|
||||
route: string;
|
||||
onNavigate: (route: string) => void;
|
||||
}
|
||||
|
||||
export function AddressBar({ route, onNavigate }: AddressBarProps) {
|
||||
const [value, setValue] = useState(route);
|
||||
const [focused, setFocused] = useState(false);
|
||||
|
||||
const commit = useCallback(() => {
|
||||
let normalized = value.trim();
|
||||
if (!normalized.startsWith("/")) normalized = "/" + normalized;
|
||||
onNavigate(normalized);
|
||||
setValue(normalized);
|
||||
}, [value, onNavigate]);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "Enter") {
|
||||
commit();
|
||||
(e.target as HTMLInputElement).blur();
|
||||
}
|
||||
},
|
||||
[commit],
|
||||
);
|
||||
|
||||
const displayValue = focused ? value : route;
|
||||
|
||||
return (
|
||||
<div className="flex items-center h-10 px-2 border-b border-border bg-muted/30">
|
||||
<div className="flex items-center flex-1 h-7 rounded-md border border-border bg-background px-2 gap-1.5">
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="text-muted-foreground shrink-0"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M2 12h20" />
|
||||
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
|
||||
</svg>
|
||||
<input
|
||||
type="text"
|
||||
value={displayValue}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
onFocus={() => {
|
||||
setFocused(true);
|
||||
setValue(route);
|
||||
}}
|
||||
onBlur={() => {
|
||||
setFocused(false);
|
||||
commit();
|
||||
}}
|
||||
onKeyDown={handleKeyDown}
|
||||
spellCheck={false}
|
||||
className="flex-1 bg-transparent text-xs font-mono text-foreground outline-none placeholder:text-muted-foreground"
|
||||
placeholder="/"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { GripVerticalIcon } from "lucide-react";
|
||||
import * as ResizablePrimitive from "react-resizable-panels";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function ResizablePanelGroup({
|
||||
className,
|
||||
...props
|
||||
}: ResizablePrimitive.GroupProps) {
|
||||
return (
|
||||
<ResizablePrimitive.Group
|
||||
data-slot="resizable-panel-group"
|
||||
className={cn(
|
||||
"flex h-full w-full aria-[orientation=vertical]:flex-col",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
|
||||
return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
|
||||
}
|
||||
|
||||
function ResizableHandle({
|
||||
withHandle,
|
||||
className,
|
||||
...props
|
||||
}: ResizablePrimitive.SeparatorProps & {
|
||||
withHandle?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<ResizablePrimitive.Separator
|
||||
data-slot="resizable-handle"
|
||||
className={cn(
|
||||
"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{withHandle && (
|
||||
<div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
|
||||
<GripVerticalIcon className="size-2.5" />
|
||||
</div>
|
||||
)}
|
||||
</ResizablePrimitive.Separator>
|
||||
);
|
||||
}
|
||||
|
||||
export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
|
||||
@@ -1,7 +0,0 @@
|
||||
import { createNextApp } from "@json-render/next/server";
|
||||
import { getSpec } from "./spec-store";
|
||||
|
||||
export const { getPageData, generateMetadata, generateStaticParams } =
|
||||
createNextApp({
|
||||
spec: () => getSpec(),
|
||||
});
|
||||
@@ -1,12 +0,0 @@
|
||||
import { defineCatalog } from "@json-render/core";
|
||||
import { schema } from "@json-render/next/server";
|
||||
import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";
|
||||
import { websiteComponentDefinitions } from "./website-catalog";
|
||||
|
||||
export const catalog = defineCatalog(schema, {
|
||||
components: {
|
||||
...shadcnComponentDefinitions,
|
||||
...websiteComponentDefinitions,
|
||||
},
|
||||
actions: {},
|
||||
});
|
||||
@@ -1,307 +0,0 @@
|
||||
import type { NextAppSpec } from "@json-render/next";
|
||||
|
||||
export const defaultSpec: NextAppSpec = {
|
||||
metadata: {
|
||||
title: {
|
||||
default: "Acme Inc",
|
||||
template: "%s | Acme Inc",
|
||||
},
|
||||
description: "We build the future of software.",
|
||||
icons: "/icon.svg",
|
||||
},
|
||||
|
||||
state: {},
|
||||
|
||||
layouts: {
|
||||
main: {
|
||||
root: "wrapper",
|
||||
elements: {
|
||||
wrapper: {
|
||||
type: "Stack",
|
||||
props: {
|
||||
direction: "vertical",
|
||||
gap: "none",
|
||||
align: "stretch",
|
||||
className: "min-h-screen",
|
||||
},
|
||||
children: ["header", "content", "footer"],
|
||||
},
|
||||
header: {
|
||||
type: "Header",
|
||||
props: {
|
||||
brand: "Acme Inc",
|
||||
links: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "About", href: "/about" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
variant: "simple",
|
||||
},
|
||||
},
|
||||
content: {
|
||||
type: "Slot",
|
||||
props: {},
|
||||
},
|
||||
footer: {
|
||||
type: "Footer",
|
||||
props: {
|
||||
brand: "Acme Inc",
|
||||
links: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "About", href: "/about" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
copyright: "2026 Acme Inc. All rights reserved.",
|
||||
variant: "simple",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
routes: {
|
||||
"/": {
|
||||
layout: "main",
|
||||
metadata: {
|
||||
title: "Home",
|
||||
description: "Welcome to Acme Inc - we build the future of software.",
|
||||
},
|
||||
page: {
|
||||
root: "page",
|
||||
elements: {
|
||||
page: {
|
||||
type: "Stack",
|
||||
props: {
|
||||
direction: "vertical",
|
||||
gap: "none",
|
||||
align: "stretch",
|
||||
},
|
||||
children: ["hero", "features", "testimonials", "cta"],
|
||||
},
|
||||
hero: {
|
||||
type: "Hero",
|
||||
props: {
|
||||
headline: "Build the future with Acme",
|
||||
description:
|
||||
"We help companies ship better software, faster. Our platform provides the tools, infrastructure, and insights you need to build world-class products.",
|
||||
primaryCta: { label: "Get Started", href: "/contact" },
|
||||
secondaryCta: { label: "Learn More", href: "/about" },
|
||||
badge: "Now in Beta",
|
||||
variant: "centered",
|
||||
},
|
||||
},
|
||||
features: {
|
||||
type: "Features",
|
||||
props: {
|
||||
headline: "Why Acme?",
|
||||
description:
|
||||
"Everything you need to build, deploy, and scale your applications.",
|
||||
items: [
|
||||
{
|
||||
title: "Lightning Fast",
|
||||
description:
|
||||
"Optimized for speed with edge-first architecture and smart caching.",
|
||||
},
|
||||
{
|
||||
title: "Secure by Default",
|
||||
description:
|
||||
"Enterprise-grade security with end-to-end encryption and SOC 2 compliance.",
|
||||
},
|
||||
{
|
||||
title: "Developer First",
|
||||
description:
|
||||
"APIs, SDKs, and CLI tools designed to fit your workflow perfectly.",
|
||||
},
|
||||
],
|
||||
columns: 3,
|
||||
variant: "cards",
|
||||
},
|
||||
},
|
||||
testimonials: {
|
||||
type: "Testimonials",
|
||||
props: {
|
||||
headline: "Trusted by industry leaders",
|
||||
items: [
|
||||
{
|
||||
quote:
|
||||
"Acme has completely transformed how we ship products. Our deployment time went from hours to minutes.",
|
||||
author: "Jordan Lee",
|
||||
role: "VP Engineering at Globex",
|
||||
},
|
||||
{
|
||||
quote:
|
||||
"The developer experience is unmatched. Our team onboarded in a single afternoon.",
|
||||
author: "Priya Patel",
|
||||
role: "CTO at Initech",
|
||||
},
|
||||
{
|
||||
quote:
|
||||
"We cut our infrastructure costs by 40% within the first quarter of switching to Acme.",
|
||||
author: "Sam Ortiz",
|
||||
role: "Head of Platform at Hooli",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
cta: {
|
||||
type: "CTA",
|
||||
props: {
|
||||
headline: "Ready to get started?",
|
||||
description:
|
||||
"Join thousands of teams building better software with Acme.",
|
||||
buttonLabel: "Contact Us",
|
||||
buttonHref: "/contact",
|
||||
variant: "banner",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
"/about": {
|
||||
layout: "main",
|
||||
metadata: {
|
||||
title: "About",
|
||||
description:
|
||||
"Learn about our mission, values, and the team behind Acme.",
|
||||
},
|
||||
page: {
|
||||
root: "page",
|
||||
elements: {
|
||||
page: {
|
||||
type: "Stack",
|
||||
props: {
|
||||
direction: "vertical",
|
||||
gap: "none",
|
||||
align: "stretch",
|
||||
},
|
||||
children: ["hero", "features", "team", "cta"],
|
||||
},
|
||||
hero: {
|
||||
type: "Hero",
|
||||
props: {
|
||||
headline: "About Acme Inc",
|
||||
description:
|
||||
"Founded in 2024, we are on a mission to make software development accessible to everyone. We believe the best tools should be simple, powerful, and delightful to use.",
|
||||
variant: "centered",
|
||||
primaryCta: null,
|
||||
secondaryCta: null,
|
||||
badge: null,
|
||||
},
|
||||
},
|
||||
features: {
|
||||
type: "Features",
|
||||
props: {
|
||||
headline: "Our Values",
|
||||
items: [
|
||||
{
|
||||
title: "Simplicity",
|
||||
description:
|
||||
"We remove complexity so you can focus on building great products.",
|
||||
},
|
||||
{
|
||||
title: "Transparency",
|
||||
description:
|
||||
"Open communication, honest pricing, and clear documentation.",
|
||||
},
|
||||
{
|
||||
title: "Craftsmanship",
|
||||
description:
|
||||
"Every detail matters. We sweat the small stuff so you don't have to.",
|
||||
},
|
||||
],
|
||||
columns: 3,
|
||||
variant: "simple",
|
||||
description: null,
|
||||
},
|
||||
},
|
||||
team: {
|
||||
type: "Team",
|
||||
props: {
|
||||
headline: "Meet the Team",
|
||||
description:
|
||||
"The people behind Acme who are passionate about building great developer tools.",
|
||||
members: [
|
||||
{
|
||||
name: "Alex Chen",
|
||||
role: "CEO & Co-founder",
|
||||
bio: "Previously at Vercel and Google. Passionate about developer experience.",
|
||||
},
|
||||
{
|
||||
name: "Sarah Kim",
|
||||
role: "CTO & Co-founder",
|
||||
bio: "Built distributed systems at AWS. Loves solving hard infrastructure problems.",
|
||||
},
|
||||
{
|
||||
name: "Marcus Rivera",
|
||||
role: "Head of Design",
|
||||
bio: "Former design lead at Figma and Stripe. Obsessed with clarity and craft.",
|
||||
},
|
||||
],
|
||||
variant: "grid",
|
||||
},
|
||||
},
|
||||
cta: {
|
||||
type: "CTA",
|
||||
props: {
|
||||
headline: "Want to join us?",
|
||||
description:
|
||||
"We are always looking for talented people to join our team.",
|
||||
buttonLabel: "Get in Touch",
|
||||
buttonHref: "/contact",
|
||||
variant: "centered",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
"/contact": {
|
||||
layout: "main",
|
||||
metadata: {
|
||||
title: "Contact",
|
||||
description: "Get in touch with the Acme team.",
|
||||
},
|
||||
page: {
|
||||
root: "page",
|
||||
elements: {
|
||||
page: {
|
||||
type: "Stack",
|
||||
props: {
|
||||
direction: "vertical",
|
||||
gap: "none",
|
||||
align: "stretch",
|
||||
},
|
||||
children: ["form"],
|
||||
},
|
||||
form: {
|
||||
type: "ContactForm",
|
||||
props: {
|
||||
headline: "Get in Touch",
|
||||
description:
|
||||
"Have a question or want to work with us? Fill out the form below and we'll get back to you within 24 hours.",
|
||||
fields: [
|
||||
{
|
||||
label: "Name",
|
||||
type: "text" as const,
|
||||
placeholder: "Your name",
|
||||
},
|
||||
{
|
||||
label: "Email",
|
||||
type: "email" as const,
|
||||
placeholder: "you@example.com",
|
||||
},
|
||||
{
|
||||
label: "Message",
|
||||
type: "textarea" as const,
|
||||
placeholder: "Tell us about your project...",
|
||||
},
|
||||
],
|
||||
submitLabel: "Send Message",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,14 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { defineRegistry } from "@json-render/react";
|
||||
import { shadcnComponents } from "@json-render/shadcn";
|
||||
import { catalog } from "./catalog";
|
||||
import { websiteComponents } from "./website-components";
|
||||
|
||||
export const { registry } = defineRegistry(catalog, {
|
||||
components: {
|
||||
...shadcnComponents,
|
||||
...websiteComponents,
|
||||
},
|
||||
actions: {},
|
||||
});
|
||||
@@ -1,12 +0,0 @@
|
||||
import type { NextAppSpec } from "@json-render/next";
|
||||
import { defaultSpec } from "./default-spec";
|
||||
|
||||
let currentSpec: NextAppSpec = defaultSpec;
|
||||
|
||||
export function getSpec(): NextAppSpec {
|
||||
return currentSpec;
|
||||
}
|
||||
|
||||
export function setSpec(spec: NextAppSpec): void {
|
||||
currentSpec = spec;
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
import { clsx, type ClassValue } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
@@ -1,188 +0,0 @@
|
||||
import { z } from "zod";
|
||||
|
||||
const linkSchema = z.object({
|
||||
label: z.string(),
|
||||
href: z.string(),
|
||||
});
|
||||
|
||||
const ctaSchema = z.object({
|
||||
label: z.string(),
|
||||
href: z.string(),
|
||||
});
|
||||
|
||||
export const websiteComponentDefinitions = {
|
||||
Header: {
|
||||
props: z.object({
|
||||
brand: z.string(),
|
||||
links: z.array(linkSchema),
|
||||
variant: z.enum(["simple", "centered"]).nullable(),
|
||||
}),
|
||||
description:
|
||||
"Site header / navigation bar. Simple: brand left, links right. Centered: brand centered above links.",
|
||||
example: {
|
||||
brand: "Acme Inc",
|
||||
links: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "About", href: "/about" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
variant: "simple",
|
||||
},
|
||||
},
|
||||
|
||||
Hero: {
|
||||
props: z.object({
|
||||
headline: z.string(),
|
||||
description: z.string(),
|
||||
primaryCta: ctaSchema.nullable(),
|
||||
secondaryCta: ctaSchema.nullable(),
|
||||
badge: z.string().nullable(),
|
||||
variant: z.enum(["centered", "left-aligned"]).nullable(),
|
||||
}),
|
||||
description:
|
||||
"Landing hero section with headline, description, and call-to-action buttons.",
|
||||
example: {
|
||||
headline: "Build something great",
|
||||
description: "A modern platform for modern teams.",
|
||||
primaryCta: { label: "Get Started", href: "/contact" },
|
||||
variant: "centered",
|
||||
},
|
||||
},
|
||||
|
||||
Features: {
|
||||
props: z.object({
|
||||
headline: z.string().nullable(),
|
||||
description: z.string().nullable(),
|
||||
items: z.array(
|
||||
z.object({
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
}),
|
||||
),
|
||||
columns: z.number().nullable(),
|
||||
variant: z.enum(["cards", "simple"]).nullable(),
|
||||
}),
|
||||
description:
|
||||
"Feature highlights section. Cards: bordered cards per item. Simple: clean text layout.",
|
||||
example: {
|
||||
headline: "Why choose us",
|
||||
items: [
|
||||
{ title: "Fast", description: "Blazing performance." },
|
||||
{ title: "Secure", description: "Enterprise-grade security." },
|
||||
{ title: "Simple", description: "Easy to use." },
|
||||
],
|
||||
columns: 3,
|
||||
variant: "cards",
|
||||
},
|
||||
},
|
||||
|
||||
Team: {
|
||||
props: z.object({
|
||||
headline: z.string().nullable(),
|
||||
description: z.string().nullable(),
|
||||
members: z.array(
|
||||
z.object({
|
||||
name: z.string(),
|
||||
role: z.string(),
|
||||
bio: z.string().nullable(),
|
||||
}),
|
||||
),
|
||||
variant: z.enum(["grid", "list"]).nullable(),
|
||||
}),
|
||||
description: "Team members section. Grid: card grid. List: vertical list.",
|
||||
example: {
|
||||
headline: "Our Team",
|
||||
members: [
|
||||
{ name: "Alice", role: "CEO", bio: null },
|
||||
{ name: "Bob", role: "CTO", bio: null },
|
||||
],
|
||||
variant: "grid",
|
||||
},
|
||||
},
|
||||
|
||||
Testimonials: {
|
||||
props: z.object({
|
||||
headline: z.string().nullable(),
|
||||
items: z.array(
|
||||
z.object({
|
||||
quote: z.string(),
|
||||
author: z.string(),
|
||||
role: z.string().nullable(),
|
||||
}),
|
||||
),
|
||||
}),
|
||||
description: "Customer testimonials / quotes section.",
|
||||
example: {
|
||||
headline: "What people say",
|
||||
items: [
|
||||
{
|
||||
quote: "Amazing product!",
|
||||
author: "Jane",
|
||||
role: "CEO at Startup",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
ContactForm: {
|
||||
props: z.object({
|
||||
headline: z.string().nullable(),
|
||||
description: z.string().nullable(),
|
||||
fields: z.array(
|
||||
z.object({
|
||||
label: z.string(),
|
||||
type: z.enum(["text", "email", "textarea"]),
|
||||
placeholder: z.string().nullable(),
|
||||
}),
|
||||
),
|
||||
submitLabel: z.string(),
|
||||
}),
|
||||
description: "Contact form section with configurable fields.",
|
||||
example: {
|
||||
headline: "Get in Touch",
|
||||
fields: [
|
||||
{ label: "Name", type: "text", placeholder: "Your name" },
|
||||
{ label: "Email", type: "email", placeholder: "you@example.com" },
|
||||
{ label: "Message", type: "textarea", placeholder: "Your message" },
|
||||
],
|
||||
submitLabel: "Send",
|
||||
},
|
||||
},
|
||||
|
||||
Footer: {
|
||||
props: z.object({
|
||||
brand: z.string().nullable(),
|
||||
links: z.array(linkSchema).nullable(),
|
||||
copyright: z.string().nullable(),
|
||||
variant: z.enum(["simple", "columns"]).nullable(),
|
||||
}),
|
||||
description:
|
||||
"Site footer. Simple: centered single row. Columns: multi-column layout.",
|
||||
example: {
|
||||
brand: "Acme Inc",
|
||||
copyright: "2026 Acme Inc.",
|
||||
variant: "simple",
|
||||
},
|
||||
},
|
||||
|
||||
CTA: {
|
||||
props: z.object({
|
||||
headline: z.string(),
|
||||
description: z.string().nullable(),
|
||||
buttonLabel: z.string(),
|
||||
buttonHref: z.string(),
|
||||
variant: z.enum(["banner", "centered"]).nullable(),
|
||||
}),
|
||||
description:
|
||||
"Call-to-action section. Banner: full-width colored background. Centered: clean centered layout.",
|
||||
example: {
|
||||
headline: "Ready to get started?",
|
||||
buttonLabel: "Contact Us",
|
||||
buttonHref: "/contact",
|
||||
variant: "centered",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export type WebsiteProps<K extends keyof typeof websiteComponentDefinitions> =
|
||||
z.output<(typeof websiteComponentDefinitions)[K]["props"]>;
|
||||
@@ -1,501 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import type { BaseComponentProps } from "@json-render/react";
|
||||
import type { WebsiteProps } from "./website-catalog";
|
||||
|
||||
// =============================================================================
|
||||
// Header
|
||||
// =============================================================================
|
||||
|
||||
function HeaderComponent({
|
||||
props,
|
||||
}: BaseComponentProps<WebsiteProps<"Header">>) {
|
||||
const variant = props.variant ?? "simple";
|
||||
const links = props.links ?? [];
|
||||
|
||||
if (variant === "centered") {
|
||||
return (
|
||||
<header className="border-b border-border bg-background">
|
||||
<div className="mx-auto max-w-6xl px-6 py-6 flex flex-col items-center gap-4">
|
||||
<span className="text-xl font-bold tracking-tight">
|
||||
{props.brand}
|
||||
</span>
|
||||
<nav className="flex items-center gap-6">
|
||||
{links.map((link) => (
|
||||
<a
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<header className="border-b border-border bg-background sticky top-0 z-50">
|
||||
<div className="mx-auto max-w-6xl px-6 h-16 flex items-center justify-between">
|
||||
<span className="text-lg font-bold tracking-tight">{props.brand}</span>
|
||||
<nav className="flex items-center gap-6">
|
||||
{links.map((link) => (
|
||||
<a
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Hero
|
||||
// =============================================================================
|
||||
|
||||
function HeroComponent({ props }: BaseComponentProps<WebsiteProps<"Hero">>) {
|
||||
const variant = props.variant ?? "centered";
|
||||
const isLeft = variant === "left-aligned";
|
||||
|
||||
return (
|
||||
<section className="bg-background">
|
||||
<div
|
||||
className={`mx-auto max-w-4xl px-6 py-24 md:py-32 ${isLeft ? "text-left" : "text-center"}`}
|
||||
>
|
||||
<div
|
||||
className={`flex flex-col gap-6 ${isLeft ? "items-start" : "items-center"}`}
|
||||
>
|
||||
{props.badge && (
|
||||
<span className="inline-flex items-center rounded-full border border-border bg-muted px-3 py-1 text-xs font-medium text-muted-foreground">
|
||||
{props.badge}
|
||||
</span>
|
||||
)}
|
||||
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl text-foreground">
|
||||
{props.headline}
|
||||
</h1>
|
||||
<p
|
||||
className={`text-lg text-muted-foreground ${isLeft ? "max-w-xl" : "max-w-2xl"}`}
|
||||
>
|
||||
{props.description}
|
||||
</p>
|
||||
{(props.primaryCta || props.secondaryCta) && (
|
||||
<div className="flex flex-wrap gap-3 pt-2">
|
||||
{props.primaryCta && (
|
||||
<a
|
||||
href={props.primaryCta.href}
|
||||
className="inline-flex h-11 items-center justify-center rounded-md bg-primary px-6 text-sm font-medium text-primary-foreground shadow-sm hover:bg-primary/90 transition-colors"
|
||||
>
|
||||
{props.primaryCta.label}
|
||||
</a>
|
||||
)}
|
||||
{props.secondaryCta && (
|
||||
<a
|
||||
href={props.secondaryCta.href}
|
||||
className="inline-flex h-11 items-center justify-center rounded-md border border-border bg-background px-6 text-sm font-medium text-foreground hover:bg-muted transition-colors"
|
||||
>
|
||||
{props.secondaryCta.label}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Features
|
||||
// =============================================================================
|
||||
|
||||
function FeaturesComponent({
|
||||
props,
|
||||
}: BaseComponentProps<WebsiteProps<"Features">>) {
|
||||
const variant = props.variant ?? "cards";
|
||||
const columns = props.columns ?? 3;
|
||||
const items = props.items ?? [];
|
||||
|
||||
const colClass =
|
||||
columns === 2
|
||||
? "sm:grid-cols-2"
|
||||
: columns === 4
|
||||
? "sm:grid-cols-2 lg:grid-cols-4"
|
||||
: "sm:grid-cols-2 lg:grid-cols-3";
|
||||
|
||||
return (
|
||||
<section className="bg-background">
|
||||
<div className="mx-auto max-w-6xl px-6 py-20">
|
||||
{(props.headline || props.description) && (
|
||||
<div className="mb-12 text-center">
|
||||
{props.headline && (
|
||||
<h2 className="text-3xl font-bold tracking-tight text-foreground">
|
||||
{props.headline}
|
||||
</h2>
|
||||
)}
|
||||
{props.description && (
|
||||
<p className="mt-3 text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
{props.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className={`grid grid-cols-1 gap-6 ${colClass}`}>
|
||||
{items.map((item, i) =>
|
||||
variant === "cards" ? (
|
||||
<div
|
||||
key={i}
|
||||
className="rounded-lg border border-border bg-card p-6 shadow-sm"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-card-foreground">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div key={i} className="py-2">
|
||||
<h3 className="text-lg font-semibold text-foreground">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Team
|
||||
// =============================================================================
|
||||
|
||||
function TeamComponent({ props }: BaseComponentProps<WebsiteProps<"Team">>) {
|
||||
const variant = props.variant ?? "grid";
|
||||
const members = props.members ?? [];
|
||||
|
||||
return (
|
||||
<section className="bg-background">
|
||||
<div className="mx-auto max-w-6xl px-6 py-20">
|
||||
{(props.headline || props.description) && (
|
||||
<div className="mb-12 text-center">
|
||||
{props.headline && (
|
||||
<h2 className="text-3xl font-bold tracking-tight text-foreground">
|
||||
{props.headline}
|
||||
</h2>
|
||||
)}
|
||||
{props.description && (
|
||||
<p className="mt-3 text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
{props.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{variant === "list" ? (
|
||||
<div className="space-y-6 max-w-2xl mx-auto">
|
||||
{members.map((m, i) => (
|
||||
<div key={i} className="flex flex-col gap-1">
|
||||
<h3 className="text-lg font-semibold text-foreground">
|
||||
{m.name}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">{m.role}</p>
|
||||
{m.bio && (
|
||||
<p className="mt-1 text-sm text-muted-foreground">{m.bio}</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{members.map((m, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="rounded-lg border border-border bg-card p-6 text-center"
|
||||
>
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted text-lg font-bold text-muted-foreground">
|
||||
{m.name
|
||||
.split(" ")
|
||||
.map((n) => n[0])
|
||||
.join("")
|
||||
.slice(0, 2)
|
||||
.toUpperCase()}
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-card-foreground">
|
||||
{m.name}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground">{m.role}</p>
|
||||
{m.bio && (
|
||||
<p className="mt-2 text-sm text-muted-foreground">{m.bio}</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Testimonials
|
||||
// =============================================================================
|
||||
|
||||
function TestimonialsComponent({
|
||||
props,
|
||||
}: BaseComponentProps<WebsiteProps<"Testimonials">>) {
|
||||
const items = props.items ?? [];
|
||||
|
||||
return (
|
||||
<section className="bg-muted/30">
|
||||
<div className="mx-auto max-w-6xl px-6 py-20">
|
||||
{props.headline && (
|
||||
<h2 className="mb-12 text-center text-3xl font-bold tracking-tight text-foreground">
|
||||
{props.headline}
|
||||
</h2>
|
||||
)}
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{items.map((item, i) => (
|
||||
<blockquote
|
||||
key={i}
|
||||
className="rounded-lg border border-border bg-background p-6"
|
||||
>
|
||||
<p className="text-sm text-foreground leading-relaxed">
|
||||
“{item.quote}”
|
||||
</p>
|
||||
<footer className="mt-4 flex flex-col">
|
||||
<span className="text-sm font-semibold text-foreground">
|
||||
{item.author}
|
||||
</span>
|
||||
{item.role && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{item.role}
|
||||
</span>
|
||||
)}
|
||||
</footer>
|
||||
</blockquote>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// ContactForm
|
||||
// =============================================================================
|
||||
|
||||
function ContactFormComponent({
|
||||
props,
|
||||
}: BaseComponentProps<WebsiteProps<"ContactForm">>) {
|
||||
const fields = props.fields ?? [];
|
||||
|
||||
return (
|
||||
<section className="bg-background">
|
||||
<div className="mx-auto max-w-xl px-6 py-20">
|
||||
{(props.headline || props.description) && (
|
||||
<div className="mb-8 text-center">
|
||||
{props.headline && (
|
||||
<h2 className="text-3xl font-bold tracking-tight text-foreground">
|
||||
{props.headline}
|
||||
</h2>
|
||||
)}
|
||||
{props.description && (
|
||||
<p className="mt-3 text-muted-foreground">{props.description}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<form
|
||||
className="rounded-lg border border-border bg-card p-6 shadow-sm"
|
||||
onSubmit={(e) => e.preventDefault()}
|
||||
>
|
||||
<div className="flex flex-col gap-4">
|
||||
{fields.map((field, i) =>
|
||||
field.type === "textarea" ? (
|
||||
<div key={i} className="flex flex-col gap-1.5">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{field.label}
|
||||
</label>
|
||||
<textarea
|
||||
placeholder={field.placeholder ?? ""}
|
||||
rows={4}
|
||||
className="rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div key={i} className="flex flex-col gap-1.5">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{field.label}
|
||||
</label>
|
||||
<input
|
||||
type={field.type}
|
||||
placeholder={field.placeholder ?? ""}
|
||||
className="h-10 rounded-md border border-input bg-background px-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
<button
|
||||
type="submit"
|
||||
className="mt-2 h-11 rounded-md bg-primary px-6 text-sm font-medium text-primary-foreground shadow-sm hover:bg-primary/90 transition-colors"
|
||||
>
|
||||
{props.submitLabel}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Footer
|
||||
// =============================================================================
|
||||
|
||||
function FooterComponent({
|
||||
props,
|
||||
}: BaseComponentProps<WebsiteProps<"Footer">>) {
|
||||
const variant = props.variant ?? "simple";
|
||||
const links = props.links ?? [];
|
||||
|
||||
if (variant === "columns") {
|
||||
return (
|
||||
<footer className="border-t border-border bg-muted/30">
|
||||
<div className="mx-auto max-w-6xl px-6 py-12">
|
||||
<div className="flex flex-col gap-8 sm:flex-row sm:justify-between">
|
||||
<div>
|
||||
{props.brand && (
|
||||
<span className="text-lg font-bold text-foreground">
|
||||
{props.brand}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{links.length > 0 && (
|
||||
<nav className="flex flex-col gap-2 sm:flex-row sm:gap-6">
|
||||
{links.map((link) => (
|
||||
<a
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
{props.copyright && (
|
||||
<p className="mt-8 text-xs text-muted-foreground">
|
||||
{props.copyright}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<footer className="border-t border-border bg-muted/30">
|
||||
<div className="mx-auto max-w-6xl px-6 py-10 flex flex-col items-center gap-4">
|
||||
{props.brand && (
|
||||
<span className="text-sm font-semibold text-foreground">
|
||||
{props.brand}
|
||||
</span>
|
||||
)}
|
||||
{links.length > 0 && (
|
||||
<nav className="flex items-center gap-4">
|
||||
{links.map((link) => (
|
||||
<a
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className="text-xs text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
)}
|
||||
{props.copyright && (
|
||||
<p className="text-xs text-muted-foreground">{props.copyright}</p>
|
||||
)}
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// CTA
|
||||
// =============================================================================
|
||||
|
||||
function CTAComponent({ props }: BaseComponentProps<WebsiteProps<"CTA">>) {
|
||||
const variant = props.variant ?? "centered";
|
||||
|
||||
if (variant === "banner") {
|
||||
return (
|
||||
<section className="bg-primary text-primary-foreground">
|
||||
<div className="mx-auto max-w-6xl px-6 py-16 flex flex-col items-center gap-4 sm:flex-row sm:justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">{props.headline}</h2>
|
||||
{props.description && (
|
||||
<p className="mt-1 text-sm opacity-90">{props.description}</p>
|
||||
)}
|
||||
</div>
|
||||
<a
|
||||
href={props.buttonHref}
|
||||
className="inline-flex h-11 items-center justify-center rounded-md bg-background px-6 text-sm font-medium text-foreground shadow-sm hover:bg-background/90 transition-colors shrink-0"
|
||||
>
|
||||
{props.buttonLabel}
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="bg-muted/30">
|
||||
<div className="mx-auto max-w-3xl px-6 py-20 text-center">
|
||||
<h2 className="text-3xl font-bold tracking-tight text-foreground">
|
||||
{props.headline}
|
||||
</h2>
|
||||
{props.description && (
|
||||
<p className="mt-3 text-lg text-muted-foreground">
|
||||
{props.description}
|
||||
</p>
|
||||
)}
|
||||
<div className="mt-8">
|
||||
<a
|
||||
href={props.buttonHref}
|
||||
className="inline-flex h-11 items-center justify-center rounded-md bg-primary px-8 text-sm font-medium text-primary-foreground shadow-sm hover:bg-primary/90 transition-colors"
|
||||
>
|
||||
{props.buttonLabel}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Export map
|
||||
// =============================================================================
|
||||
|
||||
export const websiteComponents = {
|
||||
Header: HeaderComponent,
|
||||
Hero: HeroComponent,
|
||||
Features: FeaturesComponent,
|
||||
Team: TeamComponent,
|
||||
Testimonials: TestimonialsComponent,
|
||||
ContactForm: ContactFormComponent,
|
||||
Footer: FooterComponent,
|
||||
CTA: CTAComponent,
|
||||
};
|
||||
-6
@@ -1,6 +0,0 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
import "./.next/dev/types/routes.d.ts";
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
||||
@@ -1,12 +0,0 @@
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
allowedDevOrigins: ["next-website-builder-demo.json-render.localhost"],
|
||||
transpilePackages: [
|
||||
"@json-render/core",
|
||||
"@json-render/react",
|
||||
"@json-render/shadcn",
|
||||
],
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
@@ -1,41 +0,0 @@
|
||||
{
|
||||
"name": "example-next-website-builder",
|
||||
"version": "0.1.1",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"predev": "command -v portless >/dev/null 2>&1 || (echo '\\nportless is required but not installed. Run: npm i -g portless\\nSee: https://github.com/vercel-labs/portless\\n' && exit 1)",
|
||||
"dev": "portless next-website-builder-demo.json-render next dev --turbopack",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"check-types": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@json-render/core": "workspace:*",
|
||||
"@json-render/react": "workspace:*",
|
||||
"@json-render/next": "workspace:*",
|
||||
"@json-render/shadcn": "workspace:*",
|
||||
"@visual-json/react": "0.3.1",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"geist": "^1.7.0",
|
||||
"lucide-react": "^1.6.0",
|
||||
"next": "16.2.1",
|
||||
"radix-ui": "^1.4.3",
|
||||
"react": "19.2.4",
|
||||
"react-dom": "19.2.4",
|
||||
"react-resizable-panels": "^4.7.6",
|
||||
"tailwind-merge": "^3.5.0",
|
||||
"zod": "4.3.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@internal/typescript-config": "workspace:*",
|
||||
"@tailwindcss/postcss": "^4.2.2",
|
||||
"@types/node": "^22.10.0",
|
||||
"@types/react": "19.2.3",
|
||||
"@types/react-dom": "19.2.3",
|
||||
"tailwindcss": "^4.2.2",
|
||||
"tw-animate-css": "^1.4.0",
|
||||
"typescript": "^5.7.2"
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
export default {
|
||||
plugins: {
|
||||
"@tailwindcss/postcss": {},
|
||||
},
|
||||
};
|
||||
@@ -1,13 +0,0 @@
|
||||
{
|
||||
"extends": "../../packages/typescript-config/nextjs.json",
|
||||
"compilerOptions": {
|
||||
"plugins": [{ "name": "next" }],
|
||||
"declaration": false,
|
||||
"declarationMap": false,
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
@@ -1,23 +1,5 @@
|
||||
# example-no-ai
|
||||
|
||||
## 0.1.11
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
- @json-render/react@0.16.0
|
||||
- @json-render/shadcn@0.16.0
|
||||
|
||||
## 0.1.10
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bf3a7ec]
|
||||
- @json-render/core@0.15.0
|
||||
- @json-render/react@0.15.0
|
||||
- @json-render/shadcn@0.15.0
|
||||
|
||||
## 0.1.9
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "example-no-ai",
|
||||
"version": "0.1.11",
|
||||
"version": "0.1.9",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
||||
@@ -1,21 +1,5 @@
|
||||
# example-react-email
|
||||
|
||||
## 0.1.7
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
- @json-render/react-email@0.16.0
|
||||
|
||||
## 0.1.6
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bf3a7ec]
|
||||
- @json-render/core@0.15.0
|
||||
- @json-render/react-email@0.15.0
|
||||
|
||||
## 0.1.5
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "example-react-email",
|
||||
"version": "0.1.7",
|
||||
"version": "0.1.5",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
||||
@@ -1,21 +1,5 @@
|
||||
# example-react-native
|
||||
|
||||
## 0.1.11
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
- @json-render/react-native@0.16.0
|
||||
|
||||
## 0.1.10
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bf3a7ec]
|
||||
- @json-render/core@0.15.0
|
||||
- @json-render/react-native@0.15.0
|
||||
|
||||
## 0.1.9
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "example-react-native",
|
||||
"version": "0.1.11",
|
||||
"version": "0.1.9",
|
||||
"private": true,
|
||||
"main": "expo-router/entry",
|
||||
"scripts": {
|
||||
|
||||
@@ -1,21 +1,5 @@
|
||||
# example-react-pdf
|
||||
|
||||
## 0.1.11
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
- @json-render/react-pdf@0.16.0
|
||||
|
||||
## 0.1.10
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bf3a7ec]
|
||||
- @json-render/core@0.15.0
|
||||
- @json-render/react-pdf@0.15.0
|
||||
|
||||
## 0.1.9
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "example-react-pdf",
|
||||
"version": "0.1.11",
|
||||
"version": "0.1.9",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
||||
@@ -1,23 +1,5 @@
|
||||
# example-react-three-fiber
|
||||
|
||||
## 0.1.11
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
- @json-render/react@0.16.0
|
||||
- @json-render/react-three-fiber@0.16.0
|
||||
|
||||
## 0.1.10
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bf3a7ec]
|
||||
- @json-render/core@0.15.0
|
||||
- @json-render/react@0.15.0
|
||||
- @json-render/react-three-fiber@0.15.0
|
||||
|
||||
## 0.1.9
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "example-react-three-fiber",
|
||||
"version": "0.1.11",
|
||||
"version": "0.1.9",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
||||
@@ -1,21 +1,5 @@
|
||||
# example-remotion
|
||||
|
||||
## 0.1.11
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
- @json-render/remotion@0.16.0
|
||||
|
||||
## 0.1.10
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bf3a7ec]
|
||||
- @json-render/core@0.15.0
|
||||
- @json-render/remotion@0.15.0
|
||||
|
||||
## 0.1.9
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "example-remotion",
|
||||
"version": "0.1.11",
|
||||
"version": "0.1.9",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
||||
@@ -1,21 +1,5 @@
|
||||
# example-solid
|
||||
|
||||
## 0.1.5
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
- @json-render/solid@0.16.0
|
||||
|
||||
## 0.1.4
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bf3a7ec]
|
||||
- @json-render/core@0.15.0
|
||||
- @json-render/solid@0.15.0
|
||||
|
||||
## 0.1.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "example-solid",
|
||||
"version": "0.1.5",
|
||||
"version": "0.1.3",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
||||
@@ -1,21 +1,5 @@
|
||||
# com.example.json-render-demo
|
||||
|
||||
## 0.0.12
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
- @json-render/react@0.16.0
|
||||
|
||||
## 0.0.11
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bf3a7ec]
|
||||
- @json-render/core@0.15.0
|
||||
- @json-render/react@0.15.0
|
||||
|
||||
## 0.0.10
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "com.example.json-render-demo",
|
||||
"version": "0.0.12",
|
||||
"version": "0.0.10",
|
||||
"description": "Test",
|
||||
"private": true,
|
||||
"license": "~~proprietary~~",
|
||||
|
||||
@@ -1,21 +1,5 @@
|
||||
# com.example.json-render-fullpage-demo
|
||||
|
||||
## 0.0.12
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
- @json-render/react@0.16.0
|
||||
|
||||
## 0.0.11
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bf3a7ec]
|
||||
- @json-render/core@0.15.0
|
||||
- @json-render/react@0.15.0
|
||||
|
||||
## 0.0.10
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "com.example.json-render-fullpage-demo",
|
||||
"version": "0.0.12",
|
||||
"version": "0.0.10",
|
||||
"description": "Full-page Stripe App example (alpha)",
|
||||
"private": true,
|
||||
"license": "~~proprietary~~",
|
||||
|
||||
@@ -1,21 +1,5 @@
|
||||
# svelte-chat
|
||||
|
||||
## 0.0.8
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
- @json-render/svelte@0.16.0
|
||||
|
||||
## 0.0.7
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bf3a7ec]
|
||||
- @json-render/core@0.15.0
|
||||
- @json-render/svelte@0.15.0
|
||||
|
||||
## 0.0.6
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "svelte-chat",
|
||||
"private": true,
|
||||
"version": "0.0.8",
|
||||
"version": "0.0.6",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
|
||||
@@ -1,21 +1,5 @@
|
||||
# example-svelte
|
||||
|
||||
## 0.1.8
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
- @json-render/svelte@0.16.0
|
||||
|
||||
## 0.1.7
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bf3a7ec]
|
||||
- @json-render/core@0.15.0
|
||||
- @json-render/svelte@0.15.0
|
||||
|
||||
## 0.1.6
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "example-svelte",
|
||||
"version": "0.1.8",
|
||||
"version": "0.1.6",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
||||
@@ -1,27 +1,5 @@
|
||||
# vite-renderers
|
||||
|
||||
## 0.1.9
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
- @json-render/react@0.16.0
|
||||
- @json-render/solid@0.16.0
|
||||
- @json-render/svelte@0.16.0
|
||||
- @json-render/vue@0.16.0
|
||||
|
||||
## 0.1.8
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bf3a7ec]
|
||||
- @json-render/core@0.15.0
|
||||
- @json-render/react@0.15.0
|
||||
- @json-render/solid@0.15.0
|
||||
- @json-render/svelte@0.15.0
|
||||
- @json-render/vue@0.15.0
|
||||
|
||||
## 0.1.7
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vite-renderers",
|
||||
"version": "0.1.9",
|
||||
"version": "0.1.7",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
||||
@@ -1,21 +1,5 @@
|
||||
# example-vue
|
||||
|
||||
## 0.1.9
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
- @json-render/vue@0.16.0
|
||||
|
||||
## 0.1.8
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bf3a7ec]
|
||||
- @json-render/core@0.15.0
|
||||
- @json-render/vue@0.15.0
|
||||
|
||||
## 0.1.7
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "example-vue",
|
||||
"version": "0.1.9",
|
||||
"version": "0.1.7",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"predev": "command -v portless >/dev/null 2>&1 || (echo '\\nportless is required but not installed. Run: npm i -g portless\\nSee: https://github.com/vercel-labs/portless\\n' && exit 1)",
|
||||
|
||||
@@ -1,19 +1,5 @@
|
||||
# @json-render/codegen
|
||||
|
||||
## 0.16.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
|
||||
## 0.15.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bf3a7ec]
|
||||
- @json-render/core@0.15.0
|
||||
|
||||
## 0.14.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/codegen",
|
||||
"version": "0.16.0",
|
||||
"version": "0.14.1",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Utilities for generating code from json-render UI trees",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,27 +1,5 @@
|
||||
# @json-render/core
|
||||
|
||||
## 0.16.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- 519a538: Add Next.js renderer and shadcn-svelte component library.
|
||||
|
||||
### New:
|
||||
- **`@json-render/next`** -- Next.js renderer that turns JSON specs into full Next.js applications with routes, layouts, SSR, metadata, data loaders, and static generation. Client and server entry points at `@json-render/next` and `@json-render/next/server`. Includes built-in `Link`, `Slot`, error boundary, loading, and not-found components.
|
||||
- **`@json-render/shadcn-svelte`** -- Pre-built shadcn-svelte components for json-render Svelte apps. 36 components built on Svelte 5 + Tailwind CSS with state binding, validation, and action support. Server-safe catalog at `@json-render/shadcn-svelte/catalog`.
|
||||
|
||||
## 0.15.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- bf3a7ec: Add Ink terminal renderer for interactive terminal UIs.
|
||||
|
||||
### New:
|
||||
- **`@json-render/ink`** -- Terminal UI renderer for json-render, built on Ink. Includes 20+ standard components (Box, Text, Heading, Card, Table, TextInput, Select, MultiSelect, Tabs, etc.), action/validation/focus contexts, two-way state binding, and streaming via `useUIStream`. Server-safe entry points at `@json-render/ink/schema`, `@json-render/ink/catalog`, and `@json-render/ink/server`.
|
||||
|
||||
### Improved:
|
||||
- **Examples** -- new `ink-chat` terminal chat demo, `game-engine` 3D example using react-three-fiber, website examples page with live demos and search.
|
||||
|
||||
## 0.14.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/core",
|
||||
"version": "0.16.0",
|
||||
"version": "0.14.1",
|
||||
"license": "Apache-2.0",
|
||||
"description": "JSON becomes real things. Define your catalog, register your components, let AI generate.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,19 +1,5 @@
|
||||
# @json-render/image
|
||||
|
||||
## 0.16.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
|
||||
## 0.15.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bf3a7ec]
|
||||
- @json-render/core@0.15.0
|
||||
|
||||
## 0.14.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/image",
|
||||
"version": "0.16.0",
|
||||
"version": "0.14.1",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Image renderer for @json-render/core. JSON becomes SVG and PNG images via Satori.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
# @json-render/ink
|
||||
|
||||
## 0.16.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
|
||||
## 0.15.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- bf3a7ec: Add Ink terminal renderer for interactive terminal UIs.
|
||||
|
||||
### New:
|
||||
- **`@json-render/ink`** -- Terminal UI renderer for json-render, built on Ink. Includes 20+ standard components (Box, Text, Heading, Card, Table, TextInput, Select, MultiSelect, Tabs, etc.), action/validation/focus contexts, two-way state binding, and streaming via `useUIStream`. Server-safe entry points at `@json-render/ink/schema`, `@json-render/ink/catalog`, and `@json-render/ink/server`.
|
||||
|
||||
### Improved:
|
||||
- **Examples** -- new `ink-chat` terminal chat demo, `game-engine` 3D example using react-three-fiber, website examples page with live demos and search.
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bf3a7ec]
|
||||
- @json-render/core@0.15.0
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/ink",
|
||||
"version": "0.16.0",
|
||||
"version": "0.14.1",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Ink terminal renderer for @json-render/core. JSON becomes terminal UIs.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,19 +1,5 @@
|
||||
# @json-render/jotai
|
||||
|
||||
## 0.16.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
|
||||
## 0.15.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bf3a7ec]
|
||||
- @json-render/core@0.15.0
|
||||
|
||||
## 0.14.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/jotai",
|
||||
"version": "0.16.0",
|
||||
"version": "0.14.1",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Jotai adapter for json-render StateStore",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,19 +1,5 @@
|
||||
# @json-render/mcp
|
||||
|
||||
## 0.16.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
|
||||
## 0.15.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [bf3a7ec]
|
||||
- @json-render/core@0.15.0
|
||||
|
||||
## 0.14.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/mcp",
|
||||
"version": "0.16.0",
|
||||
"version": "0.14.1",
|
||||
"license": "Apache-2.0",
|
||||
"description": "MCP Apps integration for @json-render/core. Serve json-render UIs as interactive MCP Apps in Claude, ChatGPT, Cursor, and VS Code.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
# @json-render/next
|
||||
|
||||
## 0.16.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- 519a538: Add Next.js renderer and shadcn-svelte component library.
|
||||
|
||||
### New:
|
||||
- **`@json-render/next`** -- Next.js renderer that turns JSON specs into full Next.js applications with routes, layouts, SSR, metadata, data loaders, and static generation. Client and server entry points at `@json-render/next` and `@json-render/next/server`. Includes built-in `Link`, `Slot`, error boundary, loading, and not-found components.
|
||||
- **`@json-render/shadcn-svelte`** -- Pre-built shadcn-svelte components for json-render Svelte apps. 36 components built on Svelte 5 + Tailwind CSS with state binding, validation, and action support. Server-safe catalog at `@json-render/shadcn-svelte/catalog`.
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [519a538]
|
||||
- @json-render/core@0.16.0
|
||||
- @json-render/react@0.16.0
|
||||
@@ -1,103 +0,0 @@
|
||||
# @json-render/next
|
||||
|
||||
Next.js renderer for [@json-render/core](https://json-render.dev). JSON becomes full Next.js applications with routes, layouts, metadata, and SSR.
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
npm install @json-render/core @json-render/react @json-render/next
|
||||
```
|
||||
|
||||
## Quick Start
|
||||
|
||||
### 1. Define your application spec
|
||||
|
||||
```typescript
|
||||
import type { NextAppSpec } from "@json-render/next";
|
||||
|
||||
const spec: NextAppSpec = {
|
||||
metadata: {
|
||||
title: { default: "My App", template: "%s | My App" },
|
||||
},
|
||||
layouts: {
|
||||
main: {
|
||||
root: "shell",
|
||||
elements: {
|
||||
shell: { type: "Container", props: {}, children: ["nav", "slot"] },
|
||||
nav: { type: "NavBar", props: {}, children: [] },
|
||||
slot: { type: "Slot", props: {}, children: [] },
|
||||
},
|
||||
},
|
||||
},
|
||||
routes: {
|
||||
"/": {
|
||||
layout: "main",
|
||||
metadata: { title: "Home" },
|
||||
page: { root: "hero", elements: { hero: { type: "Card", props: { title: "Welcome" }, children: [] } } },
|
||||
},
|
||||
"/about": {
|
||||
layout: "main",
|
||||
metadata: { title: "About" },
|
||||
page: { root: "content", elements: { content: { type: "Card", props: { title: "About" }, children: [] } } },
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 2. Create the app
|
||||
|
||||
```typescript
|
||||
// lib/app.ts
|
||||
import { createNextApp } from "@json-render/next/server";
|
||||
|
||||
export const { Page, generateMetadata, generateStaticParams } = createNextApp({ spec });
|
||||
```
|
||||
|
||||
### 3. Wire up Next.js routes
|
||||
|
||||
```tsx
|
||||
// app/[[...slug]]/page.tsx
|
||||
export { Page as default, generateMetadata, generateStaticParams } from "@/lib/app";
|
||||
```
|
||||
|
||||
```tsx
|
||||
// app/[[...slug]]/layout.tsx
|
||||
import { NextAppProvider } from "@json-render/next";
|
||||
import { registry, handlers } from "@/lib/registry";
|
||||
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>
|
||||
<NextAppProvider registry={registry} handlers={handlers}>
|
||||
{children}
|
||||
</NextAppProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Features
|
||||
|
||||
- **Pages as spec** -- Define entire multi-page apps in JSON
|
||||
- **Route matching** -- Dynamic segments (`[slug]`), catch-all (`[...path]`), optional catch-all (`[[...path]]`)
|
||||
- **Nested layouts** -- Reusable layouts with `Slot` component for content injection
|
||||
- **SEO metadata** -- Per-route metadata with title templates, OpenGraph, Twitter cards
|
||||
- **SSR** -- Server-side rendering via Next.js App Router
|
||||
- **Data loaders** -- Server-side async data loading before page render
|
||||
- **Static generation** -- `generateStaticParams` for pre-rendering
|
||||
- **Client navigation** -- Built-in `Link` component wrapping `next/link`
|
||||
- **Error/Loading/NotFound** -- Per-route error boundaries, loading states, and 404 pages
|
||||
- **AI streaming** -- Generate entire apps with JSONL patches via `SpecStream`
|
||||
|
||||
## Entry Points
|
||||
|
||||
| Import | Description |
|
||||
| -------------------------- | ------------------------------------------------ |
|
||||
| `@json-render/next` | Client components (NextAppProvider, PageRenderer) |
|
||||
| `@json-render/next/server` | Server utilities (createNextApp, matchRoute) |
|
||||
|
||||
## Documentation
|
||||
|
||||
See the [json-render documentation](https://json-render.dev/docs/api/next) for full API reference.
|
||||
@@ -1,71 +0,0 @@
|
||||
{
|
||||
"name": "@json-render/next",
|
||||
"version": "0.16.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Next.js renderer for @json-render/core. JSON becomes full Next.js applications with routes, layouts, metadata, and SSR.",
|
||||
"keywords": [
|
||||
"json",
|
||||
"ui",
|
||||
"next",
|
||||
"nextjs",
|
||||
"ai",
|
||||
"generative-ui",
|
||||
"llm",
|
||||
"renderer",
|
||||
"streaming",
|
||||
"ssr",
|
||||
"pages",
|
||||
"routing"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/vercel-labs/json-render.git",
|
||||
"directory": "packages/next"
|
||||
},
|
||||
"homepage": "https://json-render.dev",
|
||||
"bugs": {
|
||||
"url": "https://github.com/vercel-labs/json-render/issues"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"main": "./dist/index.js",
|
||||
"module": "./dist/index.mjs",
|
||||
"types": "./dist/index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"import": "./dist/index.mjs",
|
||||
"require": "./dist/index.js"
|
||||
},
|
||||
"./server": {
|
||||
"types": "./dist/server.d.ts",
|
||||
"import": "./dist/server.mjs",
|
||||
"require": "./dist/server.js"
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "tsup",
|
||||
"dev": "tsup --watch",
|
||||
"check-types": "tsc --noEmit",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@json-render/core": "workspace:*",
|
||||
"@json-render/react": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@internal/typescript-config": "workspace:*",
|
||||
"@types/react": "19.2.14",
|
||||
"next": "16.2.1",
|
||||
"tsup": "^8.0.2",
|
||||
"typescript": "^5.4.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"next": "^16.2.0",
|
||||
"react": "^19.2.3"
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
/**
|
||||
* Catalog-aware types for @json-render/next.
|
||||
*
|
||||
* Re-exports the React catalog types since Next.js uses the same
|
||||
* component and action model as @json-render/react.
|
||||
*/
|
||||
export type {
|
||||
EventHandle,
|
||||
BaseComponentProps,
|
||||
SetState,
|
||||
StateModel,
|
||||
ComponentContext,
|
||||
ComponentFn,
|
||||
Components,
|
||||
ActionFn,
|
||||
Actions,
|
||||
} from "@json-render/react";
|
||||
@@ -1,69 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import type { Spec } from "@json-render/core";
|
||||
import { Renderer, type ComponentRegistry } from "@json-render/react";
|
||||
import { useNextApp } from "./provider";
|
||||
|
||||
/**
|
||||
* Props for NextErrorBoundary.
|
||||
*/
|
||||
export interface NextErrorBoundaryProps {
|
||||
/** The error that occurred */
|
||||
error: Error & { digest?: string };
|
||||
/** Function to attempt re-rendering the page */
|
||||
reset: () => void;
|
||||
/** Optional error UI spec from the matched route */
|
||||
errorSpec?: Spec | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Error boundary component for json-render Next.js apps.
|
||||
*
|
||||
* If the matched route defines an `error` spec, it renders that.
|
||||
* Otherwise renders a minimal default error UI.
|
||||
*
|
||||
* Must be used in a file with `"use client"` directive (Next.js requirement).
|
||||
*/
|
||||
export function NextErrorBoundary({
|
||||
error,
|
||||
reset,
|
||||
errorSpec,
|
||||
}: NextErrorBoundaryProps) {
|
||||
let registry: ComponentRegistry | undefined;
|
||||
try {
|
||||
const ctx = useNextApp();
|
||||
registry = ctx.registry;
|
||||
} catch {
|
||||
// Provider may not be available in error boundaries
|
||||
}
|
||||
|
||||
if (errorSpec && registry) {
|
||||
const augmentedRegistry: ComponentRegistry = {
|
||||
...registry,
|
||||
Slot: () => null,
|
||||
};
|
||||
return <Renderer spec={errorSpec} registry={augmentedRegistry} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ padding: "2rem", textAlign: "center" }}>
|
||||
<h2 style={{ marginBottom: "1rem" }}>Something went wrong</h2>
|
||||
<p style={{ color: "#666", marginBottom: "1.5rem" }}>
|
||||
{error.message || "An unexpected error occurred."}
|
||||
</p>
|
||||
<button
|
||||
onClick={reset}
|
||||
style={{
|
||||
padding: "0.5rem 1rem",
|
||||
borderRadius: "0.375rem",
|
||||
border: "1px solid #ccc",
|
||||
background: "#fff",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
Try again
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React, { type ReactNode } from "react";
|
||||
import NextLink from "next/link";
|
||||
import type { ComponentRenderProps } from "@json-render/react";
|
||||
|
||||
/**
|
||||
* Props expected by the Link component in json-render specs.
|
||||
*/
|
||||
export interface LinkProps {
|
||||
/** The target URL or route path */
|
||||
href: string;
|
||||
/** Whether to replace the current history entry */
|
||||
replace?: boolean;
|
||||
/** Whether to prefetch the linked route */
|
||||
prefetch?: boolean;
|
||||
/** CSS class name */
|
||||
className?: string;
|
||||
/** Inline styles */
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
/**
|
||||
* Built-in Link component for json-render Next.js specs.
|
||||
*
|
||||
* Wraps `next/link` for client-side navigation between routes.
|
||||
*
|
||||
* Usage in a spec:
|
||||
* ```json
|
||||
* {
|
||||
* "type": "Link",
|
||||
* "props": { "href": "/about" },
|
||||
* "children": ["link-text"]
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
export function Link({ element, children }: ComponentRenderProps<LinkProps>) {
|
||||
const { href, replace, prefetch, className, style } =
|
||||
element.props as LinkProps;
|
||||
|
||||
return (
|
||||
<NextLink
|
||||
href={href}
|
||||
replace={replace}
|
||||
prefetch={prefetch}
|
||||
className={className}
|
||||
style={style}
|
||||
>
|
||||
{children}
|
||||
</NextLink>
|
||||
);
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
import React from "react";
|
||||
import type { Spec } from "@json-render/core";
|
||||
|
||||
/**
|
||||
* Props for NextLoading.
|
||||
*/
|
||||
export interface NextLoadingProps {
|
||||
/** Optional loading UI spec */
|
||||
loadingSpec?: Spec | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Loading component for json-render Next.js apps.
|
||||
*
|
||||
* If a loading spec is provided, it will be rendered by the PageRenderer.
|
||||
* Otherwise renders a minimal default loading indicator.
|
||||
*
|
||||
* Note: Since Next.js loading.tsx is static (no params), this renders
|
||||
* a generic loading state. Route-specific loading can be achieved with
|
||||
* Suspense boundaries in page content.
|
||||
*/
|
||||
export function NextLoading({ loadingSpec: _loadingSpec }: NextLoadingProps) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
minHeight: "200px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: "2rem",
|
||||
height: "2rem",
|
||||
border: "2px solid #e5e7eb",
|
||||
borderTopColor: "#3b82f6",
|
||||
borderRadius: "50%",
|
||||
animation: "jr-spin 0.6s linear infinite",
|
||||
}}
|
||||
/>
|
||||
<style>{`@keyframes jr-spin { to { transform: rotate(360deg) } }`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
/**
|
||||
* Not-found component for json-render Next.js apps.
|
||||
*
|
||||
* Renders when the pathname does not match any route in the spec.
|
||||
*/
|
||||
export function NextNotFound() {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
minHeight: "400px",
|
||||
padding: "2rem",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<h1 style={{ fontSize: "4rem", fontWeight: 700, margin: 0 }}>404</h1>
|
||||
<p style={{ color: "#666", marginTop: "0.5rem", fontSize: "1.125rem" }}>
|
||||
This page could not be found.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,135 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React, { useMemo, type ReactNode } from "react";
|
||||
import type { Spec } from "@json-render/core";
|
||||
import {
|
||||
Renderer,
|
||||
StateProvider,
|
||||
VisibilityProvider,
|
||||
ValidationProvider,
|
||||
ActionProvider,
|
||||
type ComponentRegistry,
|
||||
type ComponentRenderProps,
|
||||
} from "@json-render/react";
|
||||
import { useNextApp } from "./provider";
|
||||
|
||||
/**
|
||||
* Props for PageRenderer.
|
||||
*/
|
||||
export interface PageRendererProps {
|
||||
/** Page element tree spec */
|
||||
spec: Spec;
|
||||
/** Initial state (merged from spec.state, global state, and loader data) */
|
||||
initialState?: Record<string, unknown>;
|
||||
/** Optional layout element tree spec */
|
||||
layoutSpec?: Spec | null;
|
||||
/** Whether the spec is currently loading/streaming */
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Built-in Slot component that renders children passed into layouts.
|
||||
*/
|
||||
function SlotComponent({ children }: ComponentRenderProps) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Client component that renders a json-render page within the Next.js app.
|
||||
*
|
||||
* Reads the component registry and action handlers from NextAppProvider context.
|
||||
* Handles layout rendering by injecting page content into a Slot component.
|
||||
*/
|
||||
export function PageRenderer({
|
||||
spec,
|
||||
initialState,
|
||||
layoutSpec,
|
||||
loading,
|
||||
}: PageRendererProps) {
|
||||
const { registry, handlers, navigate } = useNextApp();
|
||||
|
||||
const augmentedRegistry: ComponentRegistry = useMemo(() => {
|
||||
return {
|
||||
...registry,
|
||||
Slot: SlotComponent,
|
||||
};
|
||||
}, [registry]);
|
||||
|
||||
const actionHandlers = useMemo(() => {
|
||||
const base: Record<
|
||||
string,
|
||||
(params: Record<string, unknown>) => Promise<unknown> | unknown
|
||||
> = { ...handlers };
|
||||
|
||||
base.navigate = (params: Record<string, unknown>) => {
|
||||
const href = params.href as string | undefined;
|
||||
if (href) navigate(href);
|
||||
};
|
||||
|
||||
return base;
|
||||
}, [handlers, navigate]);
|
||||
|
||||
const pageContent = (
|
||||
<Renderer spec={spec} registry={augmentedRegistry} loading={loading} />
|
||||
);
|
||||
|
||||
if (layoutSpec) {
|
||||
return (
|
||||
<StateProvider initialState={initialState}>
|
||||
<VisibilityProvider>
|
||||
<ValidationProvider>
|
||||
<ActionProvider handlers={actionHandlers} navigate={navigate}>
|
||||
<LayoutWithSlot
|
||||
layoutSpec={layoutSpec}
|
||||
registry={augmentedRegistry}
|
||||
loading={loading}
|
||||
>
|
||||
{pageContent}
|
||||
</LayoutWithSlot>
|
||||
</ActionProvider>
|
||||
</ValidationProvider>
|
||||
</VisibilityProvider>
|
||||
</StateProvider>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<StateProvider initialState={initialState}>
|
||||
<VisibilityProvider>
|
||||
<ValidationProvider>
|
||||
<ActionProvider handlers={actionHandlers} navigate={navigate}>
|
||||
{pageContent}
|
||||
</ActionProvider>
|
||||
</ValidationProvider>
|
||||
</VisibilityProvider>
|
||||
</StateProvider>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders a layout spec and injects children into the Slot.
|
||||
*/
|
||||
function LayoutWithSlot({
|
||||
layoutSpec,
|
||||
registry,
|
||||
loading,
|
||||
children,
|
||||
}: {
|
||||
layoutSpec: Spec;
|
||||
registry: ComponentRegistry;
|
||||
loading?: boolean;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
const layoutRegistry: ComponentRegistry = useMemo(() => {
|
||||
return {
|
||||
...registry,
|
||||
Slot: function LayoutSlot() {
|
||||
return <>{children}</>;
|
||||
},
|
||||
};
|
||||
}, [registry, children]);
|
||||
|
||||
return (
|
||||
<Renderer spec={layoutSpec} registry={layoutRegistry} loading={loading} />
|
||||
);
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React, { createContext, useContext, type ReactNode } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import type { ComponentRegistry } from "@json-render/react";
|
||||
|
||||
/**
|
||||
* Context value holding the component registry, action handlers,
|
||||
* and the Next.js router navigate function.
|
||||
*/
|
||||
export interface NextAppContextValue {
|
||||
registry: ComponentRegistry;
|
||||
handlers?: Record<
|
||||
string,
|
||||
(params: Record<string, unknown>) => Promise<unknown> | unknown
|
||||
>;
|
||||
navigate: (href: string) => void;
|
||||
}
|
||||
|
||||
const NextAppContext = createContext<NextAppContextValue | null>(null);
|
||||
|
||||
/**
|
||||
* Props for NextAppProvider.
|
||||
*/
|
||||
export interface NextAppProviderProps {
|
||||
/** Component registry for rendering */
|
||||
registry: ComponentRegistry;
|
||||
/** Action handlers */
|
||||
handlers?: Record<
|
||||
string,
|
||||
(params: Record<string, unknown>) => Promise<unknown> | unknown
|
||||
>;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Provider that holds the component registry and action handlers
|
||||
* for the entire json-render Next.js application.
|
||||
*
|
||||
* Wrap your root layout with this provider:
|
||||
*
|
||||
* ```tsx
|
||||
* // app/[[...slug]]/layout.tsx
|
||||
* import { NextAppProvider } from "@json-render/next";
|
||||
* import { registry, handlers } from "@/lib/registry";
|
||||
*
|
||||
* export default function Layout({ children }) {
|
||||
* return (
|
||||
* <html><body>
|
||||
* <NextAppProvider registry={registry} handlers={handlers}>
|
||||
* {children}
|
||||
* </NextAppProvider>
|
||||
* </body></html>
|
||||
* );
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
export function NextAppProvider({
|
||||
registry,
|
||||
handlers,
|
||||
children,
|
||||
}: NextAppProviderProps) {
|
||||
const router = useRouter();
|
||||
const navigate = React.useCallback(
|
||||
(href: string) => router.push(href),
|
||||
[router],
|
||||
);
|
||||
|
||||
const value = React.useMemo(
|
||||
() => ({ registry, handlers, navigate }),
|
||||
[registry, handlers, navigate],
|
||||
);
|
||||
|
||||
return (
|
||||
<NextAppContext.Provider value={value}>{children}</NextAppContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook to access the NextApp context.
|
||||
* Must be used within a NextAppProvider.
|
||||
*/
|
||||
export function useNextApp(): NextAppContextValue {
|
||||
const ctx = useContext(NextAppContext);
|
||||
if (!ctx) {
|
||||
throw new Error(
|
||||
"[json-render/next] useNextApp must be used within a <NextAppProvider>. " +
|
||||
"Wrap your root layout with <NextAppProvider registry={...} handlers={...}>.",
|
||||
);
|
||||
}
|
||||
return ctx;
|
||||
}
|
||||
@@ -1,148 +0,0 @@
|
||||
import { notFound } from "next/navigation";
|
||||
import type {
|
||||
NextAppSpec,
|
||||
CreateNextAppOptions,
|
||||
NextAppExports,
|
||||
PageData,
|
||||
} from "./types";
|
||||
import { matchRoute, slugToPath, collectStaticParams } from "./router";
|
||||
import { resolveMetadata, type ResolvedMetadata } from "./metadata";
|
||||
|
||||
/**
|
||||
* Resolve the spec from the options — supports both static specs
|
||||
* and factory functions that return specs (sync or async).
|
||||
*/
|
||||
async function resolveSpec(
|
||||
specOrFn: NextAppSpec | (() => NextAppSpec | Promise<NextAppSpec>),
|
||||
): Promise<NextAppSpec> {
|
||||
if (typeof specOrFn === "function") {
|
||||
return await specOrFn();
|
||||
}
|
||||
return specOrFn;
|
||||
}
|
||||
|
||||
/**
|
||||
* Merge state from multiple sources: global state, page state, and loader data.
|
||||
* Later sources override earlier ones.
|
||||
*/
|
||||
function mergeState(
|
||||
...sources: (Record<string, unknown> | undefined | null)[]
|
||||
): Record<string, unknown> {
|
||||
const result: Record<string, unknown> = {};
|
||||
for (const source of sources) {
|
||||
if (source) {
|
||||
Object.assign(result, source);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a fully wired Next.js application from a json-render spec.
|
||||
*
|
||||
* Returns `getPageData`, `generateMetadata`, and `generateStaticParams`
|
||||
* ready to be used in Next.js `[[...slug]]` catch-all routes.
|
||||
*
|
||||
* @example
|
||||
* ```typescript
|
||||
* // lib/app.ts
|
||||
* import { createNextApp } from "@json-render/next/server";
|
||||
*
|
||||
* export const { getPageData, generateMetadata, generateStaticParams } =
|
||||
* createNextApp({ spec });
|
||||
*
|
||||
* // app/[[...slug]]/page.tsx (Server Component)
|
||||
* import { notFound } from "next/navigation";
|
||||
* import { getPageData, generateMetadata, generateStaticParams } from "@/lib/app";
|
||||
* import { SiteRenderer } from "./renderer";
|
||||
*
|
||||
* export { generateMetadata, generateStaticParams };
|
||||
*
|
||||
* export default async function Page({ params }) {
|
||||
* const data = await getPageData({ params });
|
||||
* if (!data) notFound();
|
||||
* return <SiteRenderer {...data} />;
|
||||
* }
|
||||
*
|
||||
* // app/[[...slug]]/renderer.tsx ("use client")
|
||||
* import { PageRenderer } from "@json-render/next";
|
||||
* export function SiteRenderer(props) {
|
||||
* return <PageRenderer {...props} />;
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
export function createNextApp(options: CreateNextAppOptions): NextAppExports {
|
||||
const { spec: specOrFn, loaders } = options;
|
||||
|
||||
/**
|
||||
* Resolve page data for a given set of route params.
|
||||
* Returns null when no route matches.
|
||||
*/
|
||||
async function getPageData({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug?: string[] }>;
|
||||
}): Promise<PageData | null> {
|
||||
const { slug } = await params;
|
||||
const pathname = slugToPath(slug);
|
||||
const spec = await resolveSpec(specOrFn);
|
||||
|
||||
const matched = matchRoute(spec, pathname);
|
||||
|
||||
if (!matched) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { route } = matched;
|
||||
|
||||
let loaderData: Record<string, unknown> | undefined;
|
||||
if (route.loader && loaders?.[route.loader]) {
|
||||
loaderData = await loaders[route.loader]!(matched.params);
|
||||
}
|
||||
|
||||
const initialState = mergeState(
|
||||
spec.state,
|
||||
route.page.state as Record<string, unknown> | undefined,
|
||||
loaderData,
|
||||
);
|
||||
|
||||
const layoutSpec =
|
||||
route.layout && spec.layouts
|
||||
? (spec.layouts[route.layout] ?? null)
|
||||
: null;
|
||||
|
||||
return {
|
||||
spec: route.page,
|
||||
initialState:
|
||||
Object.keys(initialState).length > 0 ? initialState : undefined,
|
||||
layoutSpec,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate metadata for the matched route.
|
||||
* Merges global spec metadata with route-specific metadata.
|
||||
*/
|
||||
async function generateMetadata({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug?: string[] }>;
|
||||
}): Promise<ResolvedMetadata> {
|
||||
const { slug } = await params;
|
||||
const pathname = slugToPath(slug);
|
||||
const spec = await resolveSpec(specOrFn);
|
||||
const matched = matchRoute(spec, pathname);
|
||||
return resolveMetadata(spec, matched?.route ?? null);
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate static params for all statically-known routes.
|
||||
* Used by Next.js to pre-render pages at build time.
|
||||
*/
|
||||
async function generateStaticParams(): Promise<{ slug: string[] }[]> {
|
||||
const spec = await resolveSpec(specOrFn);
|
||||
return collectStaticParams(spec);
|
||||
}
|
||||
|
||||
return { getPageData, generateMetadata, generateStaticParams };
|
||||
}
|
||||
@@ -1,73 +0,0 @@
|
||||
"use client";
|
||||
|
||||
// =============================================================================
|
||||
// @json-render/next — Client exports
|
||||
//
|
||||
// This entry point includes client components and is safe to import
|
||||
// in "use client" modules and Next.js pages/layouts.
|
||||
// =============================================================================
|
||||
|
||||
// Provider
|
||||
export {
|
||||
NextAppProvider,
|
||||
useNextApp,
|
||||
type NextAppProviderProps,
|
||||
type NextAppContextValue,
|
||||
} from "./components/provider";
|
||||
|
||||
// Page renderer
|
||||
export {
|
||||
PageRenderer,
|
||||
type PageRendererProps,
|
||||
} from "./components/page-renderer";
|
||||
|
||||
// Error boundary
|
||||
export {
|
||||
NextErrorBoundary,
|
||||
type NextErrorBoundaryProps,
|
||||
} from "./components/error-boundary";
|
||||
|
||||
// Loading
|
||||
export {
|
||||
NextLoading,
|
||||
type NextLoadingProps,
|
||||
} from "./components/loading-renderer";
|
||||
|
||||
// Not found
|
||||
export { NextNotFound } from "./components/not-found-renderer";
|
||||
|
||||
// Link component
|
||||
export { Link, type LinkProps } from "./components/link";
|
||||
|
||||
// Types (re-exported for convenience)
|
||||
export type {
|
||||
NextAppSpec,
|
||||
NextRouteSpec,
|
||||
NextMetadata,
|
||||
MatchedRoute,
|
||||
LoaderFn,
|
||||
CreateNextAppOptions,
|
||||
NextAppExports,
|
||||
PageData,
|
||||
} from "./types";
|
||||
|
||||
// Catalog types (re-exported from @json-render/react)
|
||||
export type {
|
||||
EventHandle,
|
||||
BaseComponentProps,
|
||||
SetState,
|
||||
StateModel,
|
||||
ComponentContext,
|
||||
ComponentFn,
|
||||
Components,
|
||||
ActionFn,
|
||||
Actions,
|
||||
} from "./catalog-types";
|
||||
|
||||
// Core types (re-exported for convenience)
|
||||
export type { Spec, StateStore } from "@json-render/core";
|
||||
export { createStateStore } from "@json-render/core";
|
||||
export type {
|
||||
ComponentRegistry,
|
||||
ComponentRenderProps,
|
||||
} from "@json-render/react";
|
||||
@@ -1,101 +0,0 @@
|
||||
import type { NextMetadata, NextAppSpec, NextRouteSpec } from "./types";
|
||||
|
||||
/**
|
||||
* Metadata result compatible with Next.js's Metadata type.
|
||||
* Uses plain objects to avoid importing Next.js types at runtime.
|
||||
*/
|
||||
export type ResolvedMetadata = Record<string, unknown>;
|
||||
|
||||
/**
|
||||
* Resolve metadata for a route by merging global spec metadata
|
||||
* with route-specific metadata.
|
||||
*
|
||||
* Follows Next.js metadata merging semantics:
|
||||
* - Route metadata overrides global metadata for scalar fields
|
||||
* - Title templates from global metadata apply to route titles
|
||||
* - OpenGraph and Twitter fields are shallow-merged
|
||||
*/
|
||||
export function resolveMetadata(
|
||||
spec: NextAppSpec,
|
||||
route?: NextRouteSpec | null,
|
||||
): ResolvedMetadata {
|
||||
const globalMeta = spec.metadata;
|
||||
const routeMeta = route?.metadata;
|
||||
|
||||
if (!globalMeta && !routeMeta) return {};
|
||||
|
||||
const result: ResolvedMetadata = {};
|
||||
|
||||
const mergedTitle = resolveTitle(globalMeta?.title, routeMeta?.title);
|
||||
if (mergedTitle !== undefined) result.title = mergedTitle;
|
||||
|
||||
const description = routeMeta?.description ?? globalMeta?.description;
|
||||
if (description) result.description = description;
|
||||
|
||||
const keywords = routeMeta?.keywords ?? globalMeta?.keywords;
|
||||
if (keywords) result.keywords = keywords;
|
||||
|
||||
const openGraph = mergeObject(globalMeta?.openGraph, routeMeta?.openGraph);
|
||||
if (openGraph) result.openGraph = openGraph;
|
||||
|
||||
const twitter = mergeObject(globalMeta?.twitter, routeMeta?.twitter);
|
||||
if (twitter) result.twitter = twitter;
|
||||
|
||||
const robots = routeMeta?.robots ?? globalMeta?.robots;
|
||||
if (robots) result.robots = robots;
|
||||
|
||||
const alternates = routeMeta?.alternates ?? globalMeta?.alternates;
|
||||
if (alternates) result.alternates = alternates;
|
||||
|
||||
const icons = routeMeta?.icons ?? globalMeta?.icons;
|
||||
if (icons) result.icons = icons;
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolve a title value considering templates.
|
||||
*
|
||||
* If global metadata defines a title template (e.g. "%s | My App"),
|
||||
* route titles are interpolated into it.
|
||||
*/
|
||||
function resolveTitle(
|
||||
globalTitle: NextMetadata["title"],
|
||||
routeTitle: NextMetadata["title"],
|
||||
): unknown {
|
||||
if (!routeTitle && !globalTitle) return undefined;
|
||||
|
||||
if (!routeTitle) {
|
||||
if (typeof globalTitle === "string") return globalTitle;
|
||||
if (typeof globalTitle === "object" && globalTitle !== null) {
|
||||
return globalTitle.default ?? undefined;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if (typeof routeTitle === "object" && routeTitle !== null) {
|
||||
if (routeTitle.absolute) return routeTitle.absolute;
|
||||
if (routeTitle.template || routeTitle.default) return routeTitle;
|
||||
return routeTitle;
|
||||
}
|
||||
|
||||
if (
|
||||
typeof globalTitle === "object" &&
|
||||
globalTitle !== null &&
|
||||
globalTitle.template
|
||||
) {
|
||||
return globalTitle.template.replace("%s", routeTitle as string);
|
||||
}
|
||||
|
||||
return routeTitle;
|
||||
}
|
||||
|
||||
function mergeObject(
|
||||
base: Record<string, unknown> | undefined,
|
||||
override: Record<string, unknown> | undefined,
|
||||
): Record<string, unknown> | undefined {
|
||||
if (!base && !override) return undefined;
|
||||
if (!base) return override;
|
||||
if (!override) return base;
|
||||
return { ...base, ...override };
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
"use client";
|
||||
|
||||
export { PageRenderer } from "./components/page-renderer";
|
||||
export type { PageRendererProps } from "./components/page-renderer";
|
||||
@@ -1,196 +0,0 @@
|
||||
import type { NextAppSpec, MatchedRoute } from "./types";
|
||||
|
||||
interface CompiledRoute {
|
||||
pattern: string;
|
||||
regex: RegExp;
|
||||
paramNames: string[];
|
||||
/** Whether the last segment is catch-all or optional catch-all */
|
||||
catchAll: boolean;
|
||||
optionalCatchAll: boolean;
|
||||
/** Number of static segments (higher = more specific) */
|
||||
specificity: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Compile a Next.js route pattern into a regex matcher.
|
||||
*
|
||||
* Supports:
|
||||
* - Static segments: `/about`, `/blog`
|
||||
* - Dynamic segments: `/blog/[slug]`
|
||||
* - Catch-all segments: `/docs/[...path]`
|
||||
* - Optional catch-all segments: `/settings/[[...path]]`
|
||||
*/
|
||||
function compileRoute(pattern: string): CompiledRoute {
|
||||
const paramNames: string[] = [];
|
||||
let catchAll = false;
|
||||
let optionalCatchAll = false;
|
||||
let specificity = 0;
|
||||
|
||||
const segments = pattern === "/" ? [""] : pattern.split("/").slice(1);
|
||||
const regexParts: string[] = [];
|
||||
|
||||
for (const segment of segments) {
|
||||
if (segment.startsWith("[[...") && segment.endsWith("]]")) {
|
||||
const paramName = segment.slice(5, -2);
|
||||
paramNames.push(paramName);
|
||||
optionalCatchAll = true;
|
||||
regexParts.push("(?:/(.+))?");
|
||||
} else if (segment.startsWith("[...") && segment.endsWith("]")) {
|
||||
const paramName = segment.slice(4, -1);
|
||||
paramNames.push(paramName);
|
||||
catchAll = true;
|
||||
regexParts.push("/(.+)");
|
||||
} else if (segment.startsWith("[") && segment.endsWith("]")) {
|
||||
const paramName = segment.slice(1, -1);
|
||||
paramNames.push(paramName);
|
||||
regexParts.push("/([^/]+)");
|
||||
} else {
|
||||
specificity++;
|
||||
regexParts.push(`/${escapeRegExp(segment)}`);
|
||||
}
|
||||
}
|
||||
|
||||
const regexStr = pattern === "/" ? "^/$" : `^${regexParts.join("")}$`;
|
||||
|
||||
return {
|
||||
pattern,
|
||||
regex: new RegExp(regexStr),
|
||||
paramNames,
|
||||
catchAll,
|
||||
optionalCatchAll,
|
||||
specificity,
|
||||
};
|
||||
}
|
||||
|
||||
function escapeRegExp(str: string): string {
|
||||
return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
||||
}
|
||||
|
||||
/**
|
||||
* Match a pathname against a spec's routes.
|
||||
*
|
||||
* Routes are matched in order of specificity:
|
||||
* 1. Exact/static matches first (most specific)
|
||||
* 2. Dynamic segment matches
|
||||
* 3. Catch-all matches (least specific)
|
||||
* 4. Optional catch-all matches (fallback)
|
||||
*
|
||||
* @returns The matched route with extracted params, or null if no match.
|
||||
*/
|
||||
export function matchRoute(
|
||||
spec: NextAppSpec,
|
||||
pathname: string,
|
||||
): MatchedRoute | null {
|
||||
const normalizedPath = pathname === "" ? "/" : pathname;
|
||||
|
||||
const compiled = Object.keys(spec.routes).map(compileRoute);
|
||||
|
||||
compiled.sort((a, b) => {
|
||||
if (a.optionalCatchAll !== b.optionalCatchAll) {
|
||||
return a.optionalCatchAll ? 1 : -1;
|
||||
}
|
||||
if (a.catchAll !== b.catchAll) {
|
||||
return a.catchAll ? 1 : -1;
|
||||
}
|
||||
if (a.specificity !== b.specificity) {
|
||||
return b.specificity - a.specificity;
|
||||
}
|
||||
return a.paramNames.length - b.paramNames.length;
|
||||
});
|
||||
|
||||
for (const route of compiled) {
|
||||
const match = route.regex.exec(normalizedPath);
|
||||
if (!match) continue;
|
||||
|
||||
const params: Record<string, string | string[]> = {};
|
||||
for (let i = 0; i < route.paramNames.length; i++) {
|
||||
const value = match[i + 1];
|
||||
const name = route.paramNames[i]!;
|
||||
|
||||
if (route.catchAll || route.optionalCatchAll) {
|
||||
params[name] = value ? value.split("/") : [];
|
||||
} else {
|
||||
params[name] = value ?? "";
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
route: spec.routes[route.pattern]!,
|
||||
pattern: route.pattern,
|
||||
params,
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert a Next.js catch-all slug array to a pathname.
|
||||
*
|
||||
* @example
|
||||
* slugToPath(undefined) // "/"
|
||||
* slugToPath([]) // "/"
|
||||
* slugToPath(["blog"]) // "/blog"
|
||||
* slugToPath(["blog","hi"]) // "/blog/hi"
|
||||
*/
|
||||
export function slugToPath(slug: string[] | undefined): string {
|
||||
if (!slug || slug.length === 0) return "/";
|
||||
return "/" + slug.join("/");
|
||||
}
|
||||
|
||||
/**
|
||||
* Collect all static params from the spec for generateStaticParams.
|
||||
* Returns params suitable for Next.js [[...slug]] catch-all routes.
|
||||
*/
|
||||
export function collectStaticParams(spec: NextAppSpec): { slug: string[] }[] {
|
||||
const results: { slug: string[] }[] = [];
|
||||
|
||||
for (const [pattern, route] of Object.entries(spec.routes)) {
|
||||
if (route.staticParams) {
|
||||
for (const paramSet of route.staticParams) {
|
||||
const slug = buildSlugFromPattern(pattern, paramSet);
|
||||
if (slug) results.push({ slug });
|
||||
}
|
||||
} else if (!pattern.includes("[")) {
|
||||
const slug = pattern === "/" ? [] : pattern.slice(1).split("/");
|
||||
results.push({ slug });
|
||||
}
|
||||
}
|
||||
|
||||
return results;
|
||||
}
|
||||
|
||||
/**
|
||||
* Build a slug array from a route pattern and a set of params.
|
||||
*/
|
||||
function buildSlugFromPattern(
|
||||
pattern: string,
|
||||
params: Record<string, string>,
|
||||
): string[] | null {
|
||||
if (pattern === "/") return [];
|
||||
|
||||
const segments = pattern.split("/").slice(1);
|
||||
const result: string[] = [];
|
||||
|
||||
for (const segment of segments) {
|
||||
if (segment.startsWith("[[...") && segment.endsWith("]]")) {
|
||||
const paramName = segment.slice(5, -2);
|
||||
const value = params[paramName];
|
||||
if (value) result.push(...value.split("/"));
|
||||
} else if (segment.startsWith("[...") && segment.endsWith("]")) {
|
||||
const paramName = segment.slice(4, -1);
|
||||
const value = params[paramName];
|
||||
if (!value) return null;
|
||||
result.push(...value.split("/"));
|
||||
} else if (segment.startsWith("[") && segment.endsWith("]")) {
|
||||
const paramName = segment.slice(1, -1);
|
||||
const value = params[paramName];
|
||||
if (!value) return null;
|
||||
result.push(value);
|
||||
} else {
|
||||
result.push(segment);
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
@@ -1,332 +0,0 @@
|
||||
import { defineSchema, type PromptContext } from "@json-render/core";
|
||||
|
||||
/**
|
||||
* Prompt template for Next.js app generation.
|
||||
*
|
||||
* Teaches the AI to generate multi-page applications with routes,
|
||||
* layouts, metadata, and page content using JSONL patches.
|
||||
*/
|
||||
function nextAppPromptTemplate(context: PromptContext): string {
|
||||
const { catalog, options, formatZodType } = context;
|
||||
const {
|
||||
system = "You are a Next.js application generator.",
|
||||
customRules = [],
|
||||
} = options;
|
||||
|
||||
const lines: string[] = [];
|
||||
lines.push(system);
|
||||
lines.push("");
|
||||
|
||||
lines.push("OUTPUT FORMAT:");
|
||||
lines.push(
|
||||
"Output JSONL (one JSON object per line) with RFC 6902 JSON Patch operations to build a Next.js application spec.",
|
||||
);
|
||||
lines.push(
|
||||
"The spec defines routes (pages), layouts, metadata, and state for a full Next.js app.",
|
||||
);
|
||||
lines.push("");
|
||||
lines.push("Example output (each line is a separate JSON object):");
|
||||
lines.push("");
|
||||
lines.push(
|
||||
`{"op":"add","path":"/metadata","value":{"title":{"default":"My App","template":"%s | My App"},"description":"A full Next.js application"}}`,
|
||||
);
|
||||
lines.push(`{"op":"add","path":"/layouts","value":{}}`);
|
||||
lines.push(
|
||||
`{"op":"add","path":"/layouts/main","value":{"root":"shell","elements":{"shell":{"type":"AppShell","props":{},"children":["nav","slot"]},"nav":{"type":"NavBar","props":{"links":[{"href":"/","label":"Home"},{"href":"/about","label":"About"}]},"children":[]},"slot":{"type":"Slot","props":{},"children":[]}}}}`,
|
||||
);
|
||||
lines.push(`{"op":"add","path":"/routes","value":{}}`);
|
||||
lines.push(
|
||||
`{"op":"add","path":"/routes/~1","value":{"layout":"main","metadata":{"title":"Home"},"page":{"root":"hero","elements":{"hero":{"type":"Card","props":{"title":"Welcome"},"children":[]}}}}}`,
|
||||
);
|
||||
lines.push(
|
||||
`{"op":"add","path":"/routes/~1about","value":{"layout":"main","metadata":{"title":"About"},"page":{"root":"content","elements":{"content":{"type":"Card","props":{"title":"About Us"},"children":[]}}}}}`,
|
||||
);
|
||||
lines.push("");
|
||||
|
||||
lines.push("SPEC STRUCTURE:");
|
||||
lines.push("The top-level spec has these fields:");
|
||||
lines.push(
|
||||
" - metadata: Root-level SEO metadata (title template, description, openGraph, twitter)",
|
||||
);
|
||||
lines.push(
|
||||
" - layouts: Reusable layout element trees. Each layout MUST include a { type: 'Slot' } element where page content will be injected.",
|
||||
);
|
||||
lines.push(" - routes: Route definitions keyed by URL pattern");
|
||||
lines.push(" - state: Global initial state shared across all routes");
|
||||
lines.push("");
|
||||
|
||||
lines.push("ROUTES:");
|
||||
lines.push("Route keys use Next.js URL patterns:");
|
||||
lines.push(" - '/' - home page");
|
||||
lines.push(" - '/about' - static route");
|
||||
lines.push(" - '/blog/[slug]' - dynamic segment");
|
||||
lines.push(" - '/docs/[...path]' - catch-all segment");
|
||||
lines.push(" - '/settings/[[...path]]' - optional catch-all segment");
|
||||
lines.push("");
|
||||
lines.push(
|
||||
"IMPORTANT: In JSON Patch paths, forward slashes in route keys must be escaped as ~1.",
|
||||
);
|
||||
lines.push(" - Route '/' becomes path '/routes/~1'");
|
||||
lines.push(" - Route '/about' becomes path '/routes/~1about'");
|
||||
lines.push(" - Route '/blog/[slug]' becomes path '/routes/~1blog~1[slug]'");
|
||||
lines.push("");
|
||||
|
||||
lines.push("Each route has:");
|
||||
lines.push(
|
||||
" - page: Element tree (root + elements + optional state) — the page content",
|
||||
);
|
||||
lines.push(
|
||||
" - metadata: Per-route SEO metadata (title, description, openGraph)",
|
||||
);
|
||||
lines.push(" - layout: Layout key referencing an entry in the layouts map");
|
||||
lines.push(" - loading: Optional loading state element tree");
|
||||
lines.push(" - error: Optional error state element tree");
|
||||
lines.push(" - loader: Optional server-side data loader name");
|
||||
lines.push("");
|
||||
|
||||
lines.push("LAYOUTS:");
|
||||
lines.push(
|
||||
"Layouts wrap page content. A layout element tree MUST include a component with type 'Slot' — this is where the page content will be rendered.",
|
||||
);
|
||||
lines.push(
|
||||
"Layouts are defined once and reused across routes via the layout field.",
|
||||
);
|
||||
lines.push("");
|
||||
|
||||
lines.push("METADATA:");
|
||||
lines.push("Root metadata sets defaults. Route metadata overrides per page.");
|
||||
lines.push(
|
||||
" - title: string or { default, template } (use %s for page title in template)",
|
||||
);
|
||||
lines.push(" - description: string");
|
||||
lines.push(" - openGraph: { title, description, images, type }");
|
||||
lines.push(" - twitter: { card, title, description }");
|
||||
lines.push("");
|
||||
|
||||
lines.push("PAGE CONTENT:");
|
||||
lines.push(
|
||||
"Each page uses the standard json-render element tree format: root, elements, optional state.",
|
||||
);
|
||||
lines.push(
|
||||
"Elements have type, props, children, and optionally visible, on, repeat, watch fields.",
|
||||
);
|
||||
lines.push("");
|
||||
|
||||
const catalogData = catalog as {
|
||||
components?: Record<
|
||||
string,
|
||||
{
|
||||
description?: string;
|
||||
props?: unknown;
|
||||
slots?: string[];
|
||||
events?: string[];
|
||||
}
|
||||
>;
|
||||
actions?: Record<string, { description?: string }>;
|
||||
};
|
||||
|
||||
if (catalogData.components) {
|
||||
lines.push(
|
||||
`AVAILABLE COMPONENTS (${Object.keys(catalogData.components).length}):`,
|
||||
);
|
||||
lines.push("");
|
||||
for (const [name, def] of Object.entries(catalogData.components)) {
|
||||
const propsStr = def.props ? formatZodType(def.props as any) : "{}";
|
||||
const hasChildren = def.slots && def.slots.length > 0;
|
||||
const childrenStr = hasChildren ? " [accepts children]" : "";
|
||||
const eventsStr =
|
||||
def.events && def.events.length > 0
|
||||
? ` [events: ${def.events.join(", ")}]`
|
||||
: "";
|
||||
const descStr = def.description ? ` - ${def.description}` : "";
|
||||
lines.push(`- ${name}: ${propsStr}${descStr}${childrenStr}${eventsStr}`);
|
||||
}
|
||||
lines.push("");
|
||||
lines.push("Built-in components (always available):");
|
||||
lines.push(
|
||||
"- Slot: {} - Placeholder in layouts where page content is rendered. Required in every layout.",
|
||||
);
|
||||
lines.push(
|
||||
"- Link: { href: string } [accepts children] - Client-side navigation link (renders as next/link).",
|
||||
);
|
||||
lines.push("");
|
||||
}
|
||||
|
||||
if (catalogData.actions && Object.keys(catalogData.actions).length > 0) {
|
||||
lines.push("AVAILABLE ACTIONS:");
|
||||
lines.push("");
|
||||
for (const [name, def] of Object.entries(catalogData.actions)) {
|
||||
lines.push(`- ${name}${def.description ? `: ${def.description}` : ""}`);
|
||||
}
|
||||
lines.push("");
|
||||
}
|
||||
|
||||
lines.push("BUILT-IN ACTIONS:");
|
||||
lines.push(
|
||||
"- setState: Update a value in the state model. Params: { statePath: string, value: any }",
|
||||
);
|
||||
lines.push(
|
||||
"- pushState: Append an item to an array in state. Params: { statePath: string, value: any, clearStatePath?: string }",
|
||||
);
|
||||
lines.push(
|
||||
"- removeState: Remove an item from an array by index. Params: { statePath: string, index: number }",
|
||||
);
|
||||
lines.push("- navigate: Navigate to a route. Params: { href: string }");
|
||||
lines.push("");
|
||||
|
||||
lines.push("RULES:");
|
||||
const baseRules = [
|
||||
"Output ONLY JSONL patches - one JSON object per line, no markdown, no code fences",
|
||||
"First add /metadata with the app-level metadata including title template",
|
||||
"Then add /layouts with reusable layout definitions (each must have a Slot component)",
|
||||
"Then add /routes with each route's page, metadata, and layout reference",
|
||||
"Every layout MUST include a { type: 'Slot' } element where page content is injected",
|
||||
"ONLY use components listed in AVAILABLE COMPONENTS (plus built-in Slot and Link)",
|
||||
"Each element needs: type, props, children (array of child keys)",
|
||||
"Use unique keys for element map entries",
|
||||
"Escape forward slashes in route keys as ~1 in JSON Patch paths",
|
||||
"Include realistic sample data in state for data-driven pages",
|
||||
"Use Link component for navigation between routes",
|
||||
"Create a cohesive multi-page app with consistent layouts and navigation",
|
||||
];
|
||||
const allRules = [...baseRules, ...customRules];
|
||||
allRules.forEach((rule, i) => {
|
||||
lines.push(`${i + 1}. ${rule}`);
|
||||
});
|
||||
|
||||
return lines.join("\n");
|
||||
}
|
||||
|
||||
/**
|
||||
* The schema for @json-render/next.
|
||||
*
|
||||
* Defines a multi-page Next.js application structure:
|
||||
* - Spec: Routes with pages, layouts, metadata, loading/error states
|
||||
* - Catalog: Components with props schemas, and optional actions
|
||||
*
|
||||
* This schema is fundamentally different from the React element tree schema.
|
||||
* It's page-based, designed for full Next.js applications with SSR,
|
||||
* routing, and metadata generation.
|
||||
*/
|
||||
export const schema = defineSchema(
|
||||
(s) => ({
|
||||
spec: s.object({
|
||||
/** Root-level metadata applied as defaults */
|
||||
metadata: s.object({
|
||||
title: s.any(),
|
||||
description: s.string(),
|
||||
keywords: s.array(s.string()),
|
||||
openGraph: s.any(),
|
||||
twitter: s.any(),
|
||||
robots: s.any(),
|
||||
icons: s.any(),
|
||||
}),
|
||||
|
||||
/** Route definitions keyed by URL pattern */
|
||||
routes: s.record(
|
||||
s.object({
|
||||
/** Page element tree */
|
||||
page: s.object({
|
||||
root: s.string(),
|
||||
elements: s.record(
|
||||
s.object({
|
||||
type: s.ref("catalog.components"),
|
||||
props: s.propsOf("catalog.components"),
|
||||
children: s.array(s.string()),
|
||||
visible: s.any(),
|
||||
}),
|
||||
),
|
||||
state: s.any(),
|
||||
}),
|
||||
/** Per-route metadata */
|
||||
metadata: s.any(),
|
||||
/** Layout key */
|
||||
layout: s.string(),
|
||||
/** Loading state element tree */
|
||||
loading: s.any(),
|
||||
/** Error state element tree */
|
||||
error: s.any(),
|
||||
/** Not-found element tree */
|
||||
notFound: s.any(),
|
||||
/** Server-side data loader name */
|
||||
loader: s.string(),
|
||||
/** Static params for SSG */
|
||||
staticParams: s.any(),
|
||||
}),
|
||||
),
|
||||
|
||||
/** Reusable layout element trees */
|
||||
layouts: s.record(
|
||||
s.object({
|
||||
root: s.string(),
|
||||
elements: s.record(
|
||||
s.object({
|
||||
type: s.ref("catalog.components"),
|
||||
props: s.propsOf("catalog.components"),
|
||||
children: s.array(s.string()),
|
||||
visible: s.any(),
|
||||
}),
|
||||
),
|
||||
state: s.any(),
|
||||
}),
|
||||
),
|
||||
|
||||
/** Global initial state */
|
||||
state: s.any(),
|
||||
}),
|
||||
|
||||
catalog: s.object({
|
||||
/** Component definitions */
|
||||
components: s.map({
|
||||
props: s.zod(),
|
||||
slots: s.array(s.string()),
|
||||
description: s.string(),
|
||||
example: s.any(),
|
||||
}),
|
||||
/** Action definitions (optional) */
|
||||
actions: s.map({
|
||||
params: s.zod(),
|
||||
description: s.string(),
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
{
|
||||
promptTemplate: nextAppPromptTemplate,
|
||||
builtInActions: [
|
||||
{
|
||||
name: "setState",
|
||||
description:
|
||||
"Update a value in the state model at the given statePath. Params: { statePath: string, value: any }",
|
||||
},
|
||||
{
|
||||
name: "pushState",
|
||||
description:
|
||||
'Append an item to an array in state. Params: { statePath: string, value: any, clearStatePath?: string }. Value can contain {"$state":"/path"} refs and "$id" for auto IDs.',
|
||||
},
|
||||
{
|
||||
name: "removeState",
|
||||
description:
|
||||
"Remove an item from an array in state by index. Params: { statePath: string, index: number }",
|
||||
},
|
||||
{
|
||||
name: "navigate",
|
||||
description:
|
||||
"Navigate to a route within the app. Params: { href: string }",
|
||||
},
|
||||
],
|
||||
},
|
||||
);
|
||||
|
||||
/**
|
||||
* Type for the Next.js schema
|
||||
*/
|
||||
export type NextSchema = typeof schema;
|
||||
|
||||
/**
|
||||
* Infer the spec type from a catalog
|
||||
*/
|
||||
export type NextSpec<TCatalog> = typeof schema extends {
|
||||
createCatalog: (catalog: TCatalog) => { _specType: infer S };
|
||||
}
|
||||
? S
|
||||
: never;
|
||||
@@ -1,55 +0,0 @@
|
||||
/**
|
||||
* @json-render/next/server — Server-safe exports
|
||||
*
|
||||
* This entry point does not import any client components or React hooks.
|
||||
* Safe to use in:
|
||||
* - Server Components
|
||||
* - API routes
|
||||
* - Build scripts
|
||||
* - Server Actions
|
||||
*
|
||||
* @example
|
||||
* ```ts
|
||||
* import { createNextApp, schema } from "@json-render/next/server";
|
||||
* ```
|
||||
*/
|
||||
|
||||
// createNextApp (main API)
|
||||
export { createNextApp } from "./create-app";
|
||||
|
||||
// Schema (Next.js app spec format)
|
||||
export { schema, type NextSchema, type NextSpec } from "./schema";
|
||||
|
||||
// Router utilities
|
||||
export { matchRoute, slugToPath, collectStaticParams } from "./router";
|
||||
|
||||
// Metadata resolution
|
||||
export { resolveMetadata, type ResolvedMetadata } from "./metadata";
|
||||
|
||||
// Types
|
||||
export type {
|
||||
NextAppSpec,
|
||||
NextRouteSpec,
|
||||
NextMetadata,
|
||||
MatchedRoute,
|
||||
LoaderFn,
|
||||
CreateNextAppOptions,
|
||||
NextAppExports,
|
||||
PageData,
|
||||
} from "./types";
|
||||
|
||||
// Catalog types (type-only, no runtime)
|
||||
export type {
|
||||
EventHandle,
|
||||
BaseComponentProps,
|
||||
SetState,
|
||||
StateModel,
|
||||
ComponentContext,
|
||||
ComponentFn,
|
||||
Components,
|
||||
ActionFn,
|
||||
Actions,
|
||||
} from "./catalog-types";
|
||||
|
||||
// Core types (re-exported for convenience)
|
||||
export type { Spec, StateStore } from "@json-render/core";
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user