mirror of
https://github.com/vercel-labs/json-render.git
synced 2026-10-03 20:38:21 +08:00
Compare commits
10
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
57b2fa7add | ||
|
|
6bcaaad57d | ||
|
|
0b7d767cdd | ||
|
|
b1036763d2 | ||
|
|
c502d5517e | ||
|
|
8740deb018 | ||
|
|
1d755c104a | ||
|
|
d904d45150 | ||
|
|
a110c6e0ea | ||
|
|
7de08ccdf7 |
@@ -10,7 +10,10 @@
|
||||
"@json-render/shadcn",
|
||||
"@json-render/react-native",
|
||||
"@json-render/remotion",
|
||||
"@json-render/codegen"
|
||||
"@json-render/codegen",
|
||||
"@json-render/zustand",
|
||||
"@json-render/redux",
|
||||
"@json-render/jotai"
|
||||
]
|
||||
],
|
||||
"linked": [],
|
||||
@@ -18,7 +21,7 @@
|
||||
"baseBranch": "main",
|
||||
"updateInternalDependencies": "patch",
|
||||
"privatePackages": {
|
||||
"version": false,
|
||||
"version": true,
|
||||
"tag": false
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,7 +32,7 @@ json-render is a **Generative UI** framework: AI generates interfaces from natur
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from "@json-render/core";
|
||||
import { schema } from "@json-render/react";
|
||||
import { schema } from "@json-render/react/schema";
|
||||
import { z } from "zod";
|
||||
|
||||
const catalog = defineCatalog(schema, {
|
||||
@@ -117,6 +117,7 @@ function Dashboard({ spec }) {
|
||||
| `@json-render/redux` | Redux / Redux Toolkit adapter for `StateStore` |
|
||||
| `@json-render/zustand` | Zustand adapter for `StateStore` |
|
||||
| `@json-render/jotai` | Jotai adapter for `StateStore` |
|
||||
| `@json-render/xstate-store` | XState Store (atom) adapter for `StateStore` |
|
||||
|
||||
## Renderers
|
||||
|
||||
@@ -124,7 +125,7 @@ function Dashboard({ spec }) {
|
||||
|
||||
```tsx
|
||||
import { defineRegistry, Renderer } from "@json-render/react";
|
||||
import { schema } from "@json-render/react";
|
||||
import { schema } from "@json-render/react/schema";
|
||||
|
||||
// Flat spec format (root key + elements map)
|
||||
const spec = {
|
||||
@@ -152,7 +153,8 @@ const { registry } = defineRegistry(catalog, { components });
|
||||
|
||||
```tsx
|
||||
import { defineCatalog } from "@json-render/core";
|
||||
import { schema, defineRegistry, Renderer } from "@json-render/react";
|
||||
import { schema } from "@json-render/react/schema";
|
||||
import { defineRegistry, Renderer } from "@json-render/react";
|
||||
import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";
|
||||
import { shadcnComponents } from "@json-render/shadcn";
|
||||
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
# web
|
||||
|
||||
## 0.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [b103676]
|
||||
- @json-render/react@0.9.1
|
||||
- @json-render/core@0.9.1
|
||||
- @json-render/codegen@0.9.1
|
||||
|
||||
## 0.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1d755c1]
|
||||
- @json-render/core@0.9.0
|
||||
- @json-render/react@0.9.0
|
||||
- @json-render/codegen@0.9.0
|
||||
@@ -67,7 +67,7 @@ A2UI uses an adjacency list model - a flat list of components with ID references
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from '@json-render/core';
|
||||
import { schema } from '@json-render/react';
|
||||
import { schema } from '@json-render/react/schema';
|
||||
import { z } from 'zod';
|
||||
|
||||
// A2UI BoundValue schema
|
||||
|
||||
@@ -90,7 +90,7 @@ Define a catalog matching the Adaptive Cards element types:
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from '@json-render/core';
|
||||
import { schema } from '@json-render/react';
|
||||
import { schema } from '@json-render/react/schema';
|
||||
import { z } from 'zod';
|
||||
|
||||
// Common Adaptive Cards properties
|
||||
|
||||
@@ -151,7 +151,7 @@ Create a catalog for UI components that agents can render:
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from '@json-render/core';
|
||||
import { schema } from '@json-render/react';
|
||||
import { schema } from '@json-render/react/schema';
|
||||
import { z } from 'zod';
|
||||
|
||||
export const aguiCatalog = defineCatalog(schema, {
|
||||
|
||||
@@ -11,7 +11,7 @@ Creates a type-safe catalog definition with schema validation.
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from '@json-render/core';
|
||||
import { schema } from '@json-render/react';
|
||||
import { schema } from '@json-render/react/schema';
|
||||
|
||||
function defineCatalog<T extends ZodType>(
|
||||
s: T,
|
||||
@@ -119,7 +119,7 @@ The schema for flat UI element trees. This is exported from @json-render/react.
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from '@json-render/core';
|
||||
import { schema } from '@json-render/react';
|
||||
import { schema } from '@json-render/react/schema';
|
||||
|
||||
// schema defines:
|
||||
// - Spec shape: { root: string, elements: Record<string, UIElement> }
|
||||
|
||||
@@ -19,7 +19,7 @@ A catalog is the vocabulary for your UI. While the [schema](/docs/schemas) defin
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from '@json-render/core';
|
||||
import { schema } from '@json-render/react'; // or '@json-render/react-native'
|
||||
import { schema } from '@json-render/react/schema'; // or '@json-render/react-native/schema'
|
||||
import { z } from 'zod';
|
||||
|
||||
const catalog = defineCatalog(schema, {
|
||||
|
||||
@@ -5,7 +5,17 @@ export const metadata = pageMetadata("docs/changelog")
|
||||
|
||||
Notable changes and updates to json-render.
|
||||
|
||||
## v0.8.0
|
||||
## v0.9.1
|
||||
|
||||
February 2026
|
||||
|
||||
### Fixed: Install failure due to private dependency
|
||||
|
||||
`@json-render/react`, `@json-render/react-pdf`, and `@json-render/react-native` v0.9.0 failed to install because `@internal/react-state` (a private workspace package) was published as a dependency. The internal package is now bundled into each renderer at build time, so it no longer needs to be resolved from npm.
|
||||
|
||||
---
|
||||
|
||||
## v0.9.0
|
||||
|
||||
February 2026
|
||||
|
||||
@@ -13,8 +23,17 @@ February 2026
|
||||
|
||||
The `StateStore` interface lets you plug in your own state management (Redux, Zustand, Jotai, XState, etc.) instead of the built-in internal store. Pass a `store` prop to `StateProvider`, `JSONUIProvider`, or `createRenderer` for controlled mode.
|
||||
|
||||
- Added `StateStore` interface and `createStateStore()` factory to `@json-render/core`
|
||||
- `StateProvider`, `JSONUIProvider`, and `createRenderer` now accept an optional `store` prop
|
||||
- When `store` is provided, it becomes the single source of truth (`initialState`/`onStateChange` are ignored)
|
||||
- When `store` is omitted, everything works exactly as before (fully backward compatible)
|
||||
- Applied across all platform packages: react, react-native, react-pdf
|
||||
- Store utilities (`createStoreAdapter`, `immutableSetByPath`, `flattenToPointers`) available via `@json-render/core/store-utils` for building custom adapters
|
||||
|
||||
New adapter packages: `@json-render/redux`, `@json-render/zustand`, `@json-render/jotai`.
|
||||
|
||||
See the [Data Binding](/docs/data-binding#external-store-controlled-mode) guide for usage.
|
||||
|
||||
### Changed: `onStateChange` signature updated (breaking)
|
||||
|
||||
The `onStateChange` callback now receives a single array of changed entries instead of being called once per path. This makes batch updates via `update()` easier to handle:
|
||||
@@ -29,6 +48,31 @@ onStateChange?: (changes: Array<{ path: string; value: unknown }>) => void
|
||||
|
||||
The callback is only called when a `set()` or `update()` call actually changes the state. A `set()` call produces a single-element array; an `update()` call produces one array with all changed paths.
|
||||
|
||||
### Fixed: Server-safe schema import
|
||||
|
||||
`@json-render/react` barrel-imports React contexts that call `createContext`, which crashes in Next.js App Router API routes (RSC runtime strips `createContext`). All docs, examples, and skills now import `schema` from `@json-render/react/schema` instead of `@json-render/react`.
|
||||
|
||||
For combined imports, split into separate `schema` (subpath) and client API (main entry) lines:
|
||||
|
||||
```ts
|
||||
import { schema } from "@json-render/react/schema";
|
||||
import { defineRegistry, Renderer } from "@json-render/react";
|
||||
```
|
||||
|
||||
### Fixed: Chaining actions
|
||||
|
||||
Fixed an issue where chaining multiple actions on the same event (e.g. `setState` followed by a custom action) did not execute all actions. Affected `@json-render/react`, `@json-render/react-native`, and `@json-render/react-pdf`.
|
||||
|
||||
### Fixed: Zod array inner type resolution
|
||||
|
||||
Fixed safely resolving the inner type for Zod arrays in schema introspection, preventing errors when catalog component props use `z.array()`.
|
||||
|
||||
---
|
||||
|
||||
## v0.8.0
|
||||
|
||||
February 2026
|
||||
|
||||
### New: `@json-render/react-pdf`
|
||||
|
||||
PDF renderer for json-render, powered by [`@react-pdf/renderer`](https://react-pdf.org/). Define catalogs and registries the same way as `@json-render/react`, but output PDF documents instead of web UI.
|
||||
|
||||
@@ -25,6 +25,18 @@ Requires Tailwind CSS in your project. See the [@json-render/shadcn API referenc
|
||||
|
||||
<PackageInstall packages="@json-render/core @json-render/remotion remotion @remotion/player" />
|
||||
|
||||
## For External State Management (Optional)
|
||||
|
||||
If you want to wire json-render to an existing state management library instead of the built-in store, install the adapter for your library:
|
||||
|
||||
<PackageInstall packages="@json-render/zustand" />
|
||||
|
||||
<PackageInstall packages="@json-render/redux" />
|
||||
|
||||
<PackageInstall packages="@json-render/jotai" />
|
||||
|
||||
See the [Data Binding](/docs/data-binding#external-store-controlled-mode) guide for usage.
|
||||
|
||||
## Peer Dependencies
|
||||
|
||||
json-render requires the following peer dependencies:
|
||||
|
||||
@@ -100,7 +100,7 @@ Create components that map to OpenAPI data types:
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from '@json-render/core';
|
||||
import { schema } from '@json-render/react';
|
||||
import { schema } from '@json-render/react/schema';
|
||||
import { z } from 'zod';
|
||||
|
||||
export const openapiCatalog = defineCatalog(schema, {
|
||||
|
||||
@@ -23,7 +23,7 @@ A catalog declares what AI can use: components with typed props, actions with ty
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from '@json-render/core';
|
||||
import { schema } from '@json-render/react';
|
||||
import { schema } from '@json-render/react/schema';
|
||||
import { z } from 'zod';
|
||||
|
||||
export const catalog = defineCatalog(schema, {
|
||||
|
||||
@@ -12,7 +12,7 @@ Create a catalog that defines what components AI can use:
|
||||
```typescript
|
||||
// lib/catalog.ts
|
||||
import { defineCatalog } from '@json-render/core';
|
||||
import { schema } from '@json-render/react';
|
||||
import { schema } from '@json-render/react/schema';
|
||||
import { z } from 'zod';
|
||||
|
||||
export const catalog = defineCatalog(schema, {
|
||||
|
||||
@@ -133,7 +133,7 @@ Actions are declared in your [catalog](/docs/catalog). The `@json-render/react`
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from '@json-render/core';
|
||||
import { schema } from '@json-render/react';
|
||||
import { schema } from '@json-render/react/schema';
|
||||
import { z } from 'zod';
|
||||
|
||||
const catalog = defineCatalog(schema, {
|
||||
|
||||
@@ -67,7 +67,7 @@ Define custom validators in your catalog's `functions` field. The catalog itself
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from '@json-render/core';
|
||||
import { schema } from '@json-render/react'; // or '@json-render/react-native'
|
||||
import { schema } from '@json-render/react/schema'; // or '@json-render/react-native/schema'
|
||||
import { z } from 'zod';
|
||||
|
||||
const catalog = defineCatalog(schema, {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "web",
|
||||
"version": "0.1.0",
|
||||
"version": "0.1.2",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"license": "Apache-2.0",
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
# example-chat
|
||||
|
||||
## 0.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [b103676]
|
||||
- @json-render/react@0.9.1
|
||||
- @json-render/shadcn@0.9.1
|
||||
- @json-render/core@0.9.1
|
||||
|
||||
## 0.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1d755c1]
|
||||
- @json-render/core@0.9.0
|
||||
- @json-render/react@0.9.0
|
||||
- @json-render/shadcn@0.9.0
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "example-chat",
|
||||
"version": "0.1.0",
|
||||
"version": "0.1.2",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
# example-dashboard
|
||||
|
||||
## 0.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [b103676]
|
||||
- @json-render/react@0.9.1
|
||||
- @json-render/core@0.9.1
|
||||
- @json-render/codegen@0.9.1
|
||||
|
||||
## 0.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1d755c1]
|
||||
- @json-render/core@0.9.0
|
||||
- @json-render/react@0.9.0
|
||||
- @json-render/codegen@0.9.0
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "example-dashboard",
|
||||
"version": "0.1.0",
|
||||
"version": "0.1.2",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
# example-no-ai
|
||||
|
||||
## 0.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [b103676]
|
||||
- @json-render/react@0.9.1
|
||||
- @json-render/shadcn@0.9.1
|
||||
- @json-render/core@0.9.1
|
||||
|
||||
## 0.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1d755c1]
|
||||
- @json-render/core@0.9.0
|
||||
- @json-render/react@0.9.0
|
||||
- @json-render/shadcn@0.9.0
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "example-no-ai",
|
||||
"version": "0.1.0",
|
||||
"version": "0.1.2",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
# example-react-native
|
||||
|
||||
## 0.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [b103676]
|
||||
- @json-render/react-native@0.9.1
|
||||
- @json-render/core@0.9.1
|
||||
|
||||
## 0.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1d755c1]
|
||||
- @json-render/core@0.9.0
|
||||
- @json-render/react-native@0.9.0
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "example-react-native",
|
||||
"version": "0.1.0",
|
||||
"version": "0.1.2",
|
||||
"private": true,
|
||||
"main": "expo-router/entry",
|
||||
"scripts": {
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
# example-react-pdf
|
||||
|
||||
## 0.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [b103676]
|
||||
- @json-render/react-pdf@0.9.1
|
||||
- @json-render/core@0.9.1
|
||||
|
||||
## 0.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1d755c1]
|
||||
- @json-render/core@0.9.0
|
||||
- @json-render/react-pdf@0.9.0
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "example-react-pdf",
|
||||
"version": "0.1.0",
|
||||
"version": "0.1.2",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
# example-remotion
|
||||
|
||||
## 0.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- @json-render/core@0.9.1
|
||||
- @json-render/remotion@0.9.1
|
||||
|
||||
## 0.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1d755c1]
|
||||
- @json-render/core@0.9.0
|
||||
- @json-render/remotion@0.9.0
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "example-remotion",
|
||||
"version": "0.1.0",
|
||||
"version": "0.1.2",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
# com.example.json-render-demo
|
||||
|
||||
## 0.0.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [b103676]
|
||||
- @json-render/react@0.9.1
|
||||
- @json-render/core@0.9.1
|
||||
|
||||
## 0.0.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1d755c1]
|
||||
- @json-render/core@0.9.0
|
||||
- @json-render/react@0.9.0
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "com.example.json-render-demo",
|
||||
"version": "0.0.1",
|
||||
"version": "0.0.3",
|
||||
"description": "Test",
|
||||
"private": true,
|
||||
"license": "~~proprietary~~",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { defineCatalog } from "@json-render/core";
|
||||
import { schema } from "@json-render/react";
|
||||
import { schema } from "@json-render/react/schema";
|
||||
import { z } from "zod";
|
||||
|
||||
/**
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
# com.example.json-render-fullpage-demo
|
||||
|
||||
## 0.0.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [b103676]
|
||||
- @json-render/react@0.9.1
|
||||
- @json-render/core@0.9.1
|
||||
|
||||
## 0.0.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1d755c1]
|
||||
- @json-render/core@0.9.0
|
||||
- @json-render/react@0.9.0
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "com.example.json-render-fullpage-demo",
|
||||
"version": "0.0.1",
|
||||
"version": "0.0.3",
|
||||
"description": "Full-page Stripe App example (alpha)",
|
||||
"private": true,
|
||||
"license": "~~proprietary~~",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { defineCatalog } from "@json-render/core";
|
||||
import { schema } from "@json-render/react";
|
||||
import { schema } from "@json-render/react/schema";
|
||||
import { z } from "zod";
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,5 +1,54 @@
|
||||
# @json-render/codegen
|
||||
|
||||
## 0.9.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- @json-render/core@0.9.1
|
||||
|
||||
## 0.9.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- 1d755c1: External state store, store adapters, and bug fixes.
|
||||
|
||||
### New: External State Store
|
||||
|
||||
The `StateStore` interface lets you plug in your own state management (Redux, Zustand, Jotai, XState, etc.) instead of the built-in internal store. Pass a `store` prop to `StateProvider`, `JSONUIProvider`, or `createRenderer` for controlled mode.
|
||||
- Added `StateStore` interface and `createStateStore()` factory to `@json-render/core`
|
||||
- `StateProvider`, `JSONUIProvider`, and `createRenderer` now accept an optional `store` prop for controlled mode
|
||||
- When `store` is provided, it becomes the single source of truth (`initialState`/`onStateChange` are ignored)
|
||||
- When `store` is omitted, everything works exactly as before (fully backward compatible)
|
||||
- Applied across all platform packages: react, react-native, react-pdf
|
||||
- Store utilities (`createStoreAdapter`, `immutableSetByPath`, `flattenToPointers`) available via `@json-render/core/store-utils` for building custom adapters
|
||||
|
||||
### New: Store Adapter Packages
|
||||
- `@json-render/zustand` — Zustand adapter for `StateStore`
|
||||
- `@json-render/redux` — Redux / Redux Toolkit adapter for `StateStore`
|
||||
- `@json-render/jotai` — Jotai adapter for `StateStore`
|
||||
|
||||
### Changed: `onStateChange` signature updated (breaking)
|
||||
|
||||
The `onStateChange` callback now receives a single array of changed entries instead of being called once per path:
|
||||
|
||||
```ts
|
||||
// Before
|
||||
onStateChange?: (path: string, value: unknown) => void
|
||||
|
||||
// After
|
||||
onStateChange?: (changes: Array<{ path: string; value: unknown }>) => void
|
||||
```
|
||||
|
||||
### Fixed
|
||||
- Fix schema import to use server-safe `@json-render/react/schema` subpath, avoiding `createContext` crashes in Next.js App Router API routes
|
||||
- Fix chaining actions in `@json-render/react`, `@json-render/react-native`, and `@json-render/react-pdf`
|
||||
- Fix safely resolving inner type for Zod arrays in core schema
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1d755c1]
|
||||
- @json-render/core@0.9.0
|
||||
|
||||
## 0.8.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/codegen",
|
||||
"version": "0.8.0",
|
||||
"version": "0.9.1",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Utilities for generating code from json-render UI trees",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,5 +1,45 @@
|
||||
# @json-render/core
|
||||
|
||||
## 0.9.1
|
||||
|
||||
## 0.9.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- 1d755c1: External state store, store adapters, and bug fixes.
|
||||
|
||||
### New: External State Store
|
||||
|
||||
The `StateStore` interface lets you plug in your own state management (Redux, Zustand, Jotai, XState, etc.) instead of the built-in internal store. Pass a `store` prop to `StateProvider`, `JSONUIProvider`, or `createRenderer` for controlled mode.
|
||||
- Added `StateStore` interface and `createStateStore()` factory to `@json-render/core`
|
||||
- `StateProvider`, `JSONUIProvider`, and `createRenderer` now accept an optional `store` prop for controlled mode
|
||||
- When `store` is provided, it becomes the single source of truth (`initialState`/`onStateChange` are ignored)
|
||||
- When `store` is omitted, everything works exactly as before (fully backward compatible)
|
||||
- Applied across all platform packages: react, react-native, react-pdf
|
||||
- Store utilities (`createStoreAdapter`, `immutableSetByPath`, `flattenToPointers`) available via `@json-render/core/store-utils` for building custom adapters
|
||||
|
||||
### New: Store Adapter Packages
|
||||
- `@json-render/zustand` — Zustand adapter for `StateStore`
|
||||
- `@json-render/redux` — Redux / Redux Toolkit adapter for `StateStore`
|
||||
- `@json-render/jotai` — Jotai adapter for `StateStore`
|
||||
|
||||
### Changed: `onStateChange` signature updated (breaking)
|
||||
|
||||
The `onStateChange` callback now receives a single array of changed entries instead of being called once per path:
|
||||
|
||||
```ts
|
||||
// Before
|
||||
onStateChange?: (path: string, value: unknown) => void
|
||||
|
||||
// After
|
||||
onStateChange?: (changes: Array<{ path: string; value: unknown }>) => void
|
||||
```
|
||||
|
||||
### Fixed
|
||||
- Fix schema import to use server-safe `@json-render/react/schema` subpath, avoiding `createContext` crashes in Next.js App Router API routes
|
||||
- Fix chaining actions in `@json-render/react`, `@json-render/react-native`, and `@json-render/react-pdf`
|
||||
- Fix safely resolving inner type for Zod arrays in core schema
|
||||
|
||||
## 0.8.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/core",
|
||||
"version": "0.8.0",
|
||||
"version": "0.9.1",
|
||||
"license": "Apache-2.0",
|
||||
"description": "JSON becomes real things. Define your catalog, register your components, let AI generate.",
|
||||
"keywords": [
|
||||
|
||||
@@ -169,7 +169,11 @@ describe("catalog.prompt", () => {
|
||||
const catalog = defineCatalog(testSchema, {
|
||||
components: {
|
||||
Card: {
|
||||
props: z.object({ title: z.string() }),
|
||||
props: z.object({
|
||||
title: z.string(),
|
||||
names: z.array(z.string()),
|
||||
users: z.array(z.object({ name: z.string(), age: z.number() })),
|
||||
}),
|
||||
description: "A card container",
|
||||
slots: ["default"],
|
||||
},
|
||||
@@ -180,6 +184,9 @@ describe("catalog.prompt", () => {
|
||||
expect(prompt).toContain("AVAILABLE COMPONENTS");
|
||||
expect(prompt).toContain("Card");
|
||||
expect(prompt).toContain("A card container");
|
||||
expect(prompt).toContain("title: string");
|
||||
expect(prompt).toContain("names: Array<string>");
|
||||
expect(prompt).toContain("users: Array<{ name: string, age: number }>");
|
||||
});
|
||||
|
||||
it("includes AVAILABLE ACTIONS when present", () => {
|
||||
|
||||
@@ -1188,7 +1188,14 @@ function formatZodType(schema: z.ZodType): string {
|
||||
}
|
||||
case "ZodArray":
|
||||
case "array": {
|
||||
const inner = (def.type as z.ZodType) ?? (def.element as z.ZodType);
|
||||
// safely resolve inner type for Zod arrays
|
||||
const inner = (
|
||||
typeof def.element === "object"
|
||||
? def.element
|
||||
: typeof def.type === "object"
|
||||
? def.type
|
||||
: undefined
|
||||
) as z.ZodType | undefined;
|
||||
return inner ? `Array<${formatZodType(inner)}>` : "Array<unknown>";
|
||||
}
|
||||
case "ZodObject":
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
# @json-render/jotai
|
||||
|
||||
## 0.9.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- @json-render/core@0.9.1
|
||||
|
||||
## 0.9.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- 1d755c1: External state store, store adapters, and bug fixes.
|
||||
|
||||
### New: External State Store
|
||||
|
||||
The `StateStore` interface lets you plug in your own state management (Redux, Zustand, Jotai, XState, etc.) instead of the built-in internal store. Pass a `store` prop to `StateProvider`, `JSONUIProvider`, or `createRenderer` for controlled mode.
|
||||
- Added `StateStore` interface and `createStateStore()` factory to `@json-render/core`
|
||||
- `StateProvider`, `JSONUIProvider`, and `createRenderer` now accept an optional `store` prop for controlled mode
|
||||
- When `store` is provided, it becomes the single source of truth (`initialState`/`onStateChange` are ignored)
|
||||
- When `store` is omitted, everything works exactly as before (fully backward compatible)
|
||||
- Applied across all platform packages: react, react-native, react-pdf
|
||||
- Store utilities (`createStoreAdapter`, `immutableSetByPath`, `flattenToPointers`) available via `@json-render/core/store-utils` for building custom adapters
|
||||
|
||||
### New: Store Adapter Packages
|
||||
- `@json-render/zustand` — Zustand adapter for `StateStore`
|
||||
- `@json-render/redux` — Redux / Redux Toolkit adapter for `StateStore`
|
||||
- `@json-render/jotai` — Jotai adapter for `StateStore`
|
||||
|
||||
### Changed: `onStateChange` signature updated (breaking)
|
||||
|
||||
The `onStateChange` callback now receives a single array of changed entries instead of being called once per path:
|
||||
|
||||
```ts
|
||||
// Before
|
||||
onStateChange?: (path: string, value: unknown) => void
|
||||
|
||||
// After
|
||||
onStateChange?: (changes: Array<{ path: string; value: unknown }>) => void
|
||||
```
|
||||
|
||||
### Fixed
|
||||
- Fix schema import to use server-safe `@json-render/react/schema` subpath, avoiding `createContext` crashes in Next.js App Router API routes
|
||||
- Fix chaining actions in `@json-render/react`, `@json-render/react-native`, and `@json-render/react-pdf`
|
||||
- Fix safely resolving inner type for Zod arrays in core schema
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1d755c1]
|
||||
- @json-render/core@0.9.0
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/jotai",
|
||||
"version": "0.8.0",
|
||||
"version": "0.9.1",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Jotai adapter for json-render StateStore",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,5 +1,56 @@
|
||||
# @json-render/react-native
|
||||
|
||||
## 0.9.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- b103676: Fix install failure caused by `@internal/react-state` (a private workspace package) being listed as a published dependency. The internal package is now bundled into each renderer's output at build time, so consumers no longer need to resolve it from npm.
|
||||
- @json-render/core@0.9.1
|
||||
|
||||
## 0.9.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- 1d755c1: External state store, store adapters, and bug fixes.
|
||||
|
||||
### New: External State Store
|
||||
|
||||
The `StateStore` interface lets you plug in your own state management (Redux, Zustand, Jotai, XState, etc.) instead of the built-in internal store. Pass a `store` prop to `StateProvider`, `JSONUIProvider`, or `createRenderer` for controlled mode.
|
||||
- Added `StateStore` interface and `createStateStore()` factory to `@json-render/core`
|
||||
- `StateProvider`, `JSONUIProvider`, and `createRenderer` now accept an optional `store` prop for controlled mode
|
||||
- When `store` is provided, it becomes the single source of truth (`initialState`/`onStateChange` are ignored)
|
||||
- When `store` is omitted, everything works exactly as before (fully backward compatible)
|
||||
- Applied across all platform packages: react, react-native, react-pdf
|
||||
- Store utilities (`createStoreAdapter`, `immutableSetByPath`, `flattenToPointers`) available via `@json-render/core/store-utils` for building custom adapters
|
||||
|
||||
### New: Store Adapter Packages
|
||||
- `@json-render/zustand` — Zustand adapter for `StateStore`
|
||||
- `@json-render/redux` — Redux / Redux Toolkit adapter for `StateStore`
|
||||
- `@json-render/jotai` — Jotai adapter for `StateStore`
|
||||
|
||||
### Changed: `onStateChange` signature updated (breaking)
|
||||
|
||||
The `onStateChange` callback now receives a single array of changed entries instead of being called once per path:
|
||||
|
||||
```ts
|
||||
// Before
|
||||
onStateChange?: (path: string, value: unknown) => void
|
||||
|
||||
// After
|
||||
onStateChange?: (changes: Array<{ path: string; value: unknown }>) => void
|
||||
```
|
||||
|
||||
### Fixed
|
||||
- Fix schema import to use server-safe `@json-render/react/schema` subpath, avoiding `createContext` crashes in Next.js App Router API routes
|
||||
- Fix chaining actions in `@json-render/react`, `@json-render/react-native`, and `@json-render/react-pdf`
|
||||
- Fix safely resolving inner type for Zod arrays in core schema
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1d755c1]
|
||||
- @json-render/core@0.9.0
|
||||
- @internal/react-state@0.8.1
|
||||
|
||||
## 0.8.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/react-native",
|
||||
"version": "0.8.0",
|
||||
"version": "0.9.1",
|
||||
"license": "Apache-2.0",
|
||||
"description": "React Native renderer for @json-render/core. JSON becomes React Native components.",
|
||||
"keywords": [
|
||||
@@ -56,10 +56,10 @@
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@json-render/core": "workspace:*",
|
||||
"@internal/react-state": "workspace:*"
|
||||
"@json-render/core": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@internal/react-state": "workspace:*",
|
||||
"@internal/typescript-config": "workspace:*",
|
||||
"@types/react": "19.2.3",
|
||||
"react-native": "0.83.1",
|
||||
|
||||
@@ -135,7 +135,7 @@ export function ActionProvider({
|
||||
navigate,
|
||||
children,
|
||||
}: ActionProviderProps) {
|
||||
const { state, get, set } = useStateStore();
|
||||
const { get, set, getSnapshot } = useStateStore();
|
||||
const [handlers, setHandlers] =
|
||||
useState<Record<string, ActionHandler>>(initialHandlers);
|
||||
const [loadingActions, setLoadingActions] = useState<Set<string>>(new Set());
|
||||
@@ -151,7 +151,7 @@ export function ActionProvider({
|
||||
|
||||
const execute = useCallback(
|
||||
async (binding: ActionBinding) => {
|
||||
const resolved = resolveAction(binding, state);
|
||||
const resolved = resolveAction(binding, getSnapshot());
|
||||
|
||||
// Built-in: setState updates the StateProvider state directly
|
||||
if (resolved.action === "setState" && resolved.params) {
|
||||
@@ -298,7 +298,7 @@ export function ActionProvider({
|
||||
});
|
||||
}
|
||||
},
|
||||
[state, handlers, get, set, navigate],
|
||||
[handlers, get, set, getSnapshot, navigate],
|
||||
);
|
||||
|
||||
const confirm = useCallback(() => {
|
||||
|
||||
@@ -158,6 +158,7 @@ const ElementRenderer = React.memo(function ElementRenderer({
|
||||
const repeatScope = useRepeatScope();
|
||||
const { ctx } = useVisibility();
|
||||
const { execute } = useActions();
|
||||
const { getSnapshot } = useStateStore();
|
||||
|
||||
// Build context with repeat scope (used for both visibility and props)
|
||||
const fullCtx: PropResolutionContext = useMemo(
|
||||
@@ -183,25 +184,29 @@ const ElementRenderer = React.memo(function ElementRenderer({
|
||||
// Must be called before any early return to satisfy Rules of Hooks.
|
||||
const onBindings = element.on;
|
||||
const emit = useCallback(
|
||||
(eventName: string) => {
|
||||
async (eventName: string) => {
|
||||
const binding = onBindings?.[eventName];
|
||||
if (!binding) return;
|
||||
const actionBindings = Array.isArray(binding) ? binding : [binding];
|
||||
for (const b of actionBindings) {
|
||||
if (!b.params) {
|
||||
execute(b);
|
||||
await execute(b);
|
||||
continue;
|
||||
}
|
||||
// Resolve all action params via resolveActionParam which handles
|
||||
// $item (→ absolute state path), $index (→ number), $state, $cond, and literals.
|
||||
// Build a fresh context with live store state so that $state
|
||||
// references in later actions see mutations from earlier ones.
|
||||
const liveCtx: PropResolutionContext = {
|
||||
...fullCtx,
|
||||
stateModel: getSnapshot(),
|
||||
};
|
||||
const resolved: Record<string, unknown> = {};
|
||||
for (const [key, val] of Object.entries(b.params)) {
|
||||
resolved[key] = resolveActionParam(val, fullCtx);
|
||||
resolved[key] = resolveActionParam(val, liveCtx);
|
||||
}
|
||||
execute({ ...b, params: resolved });
|
||||
await execute({ ...b, params: resolved });
|
||||
}
|
||||
},
|
||||
[onBindings, execute, fullCtx],
|
||||
[onBindings, execute, fullCtx, getSnapshot],
|
||||
);
|
||||
|
||||
// Don't render if not visible
|
||||
|
||||
@@ -3,8 +3,9 @@ import { defineConfig } from "tsup";
|
||||
export default defineConfig({
|
||||
entry: ["src/index.ts", "src/schema.ts", "src/catalog.ts"],
|
||||
format: ["cjs", "esm"],
|
||||
dts: true,
|
||||
dts: { resolve: ["@internal/react-state"] },
|
||||
sourcemap: true,
|
||||
clean: true,
|
||||
noExternal: ["@internal/react-state"],
|
||||
external: ["react", "react-native", "@json-render/core", "zod"],
|
||||
});
|
||||
|
||||
@@ -1,5 +1,56 @@
|
||||
# @json-render/react-pdf
|
||||
|
||||
## 0.9.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- b103676: Fix install failure caused by `@internal/react-state` (a private workspace package) being listed as a published dependency. The internal package is now bundled into each renderer's output at build time, so consumers no longer need to resolve it from npm.
|
||||
- @json-render/core@0.9.1
|
||||
|
||||
## 0.9.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- 1d755c1: External state store, store adapters, and bug fixes.
|
||||
|
||||
### New: External State Store
|
||||
|
||||
The `StateStore` interface lets you plug in your own state management (Redux, Zustand, Jotai, XState, etc.) instead of the built-in internal store. Pass a `store` prop to `StateProvider`, `JSONUIProvider`, or `createRenderer` for controlled mode.
|
||||
- Added `StateStore` interface and `createStateStore()` factory to `@json-render/core`
|
||||
- `StateProvider`, `JSONUIProvider`, and `createRenderer` now accept an optional `store` prop for controlled mode
|
||||
- When `store` is provided, it becomes the single source of truth (`initialState`/`onStateChange` are ignored)
|
||||
- When `store` is omitted, everything works exactly as before (fully backward compatible)
|
||||
- Applied across all platform packages: react, react-native, react-pdf
|
||||
- Store utilities (`createStoreAdapter`, `immutableSetByPath`, `flattenToPointers`) available via `@json-render/core/store-utils` for building custom adapters
|
||||
|
||||
### New: Store Adapter Packages
|
||||
- `@json-render/zustand` — Zustand adapter for `StateStore`
|
||||
- `@json-render/redux` — Redux / Redux Toolkit adapter for `StateStore`
|
||||
- `@json-render/jotai` — Jotai adapter for `StateStore`
|
||||
|
||||
### Changed: `onStateChange` signature updated (breaking)
|
||||
|
||||
The `onStateChange` callback now receives a single array of changed entries instead of being called once per path:
|
||||
|
||||
```ts
|
||||
// Before
|
||||
onStateChange?: (path: string, value: unknown) => void
|
||||
|
||||
// After
|
||||
onStateChange?: (changes: Array<{ path: string; value: unknown }>) => void
|
||||
```
|
||||
|
||||
### Fixed
|
||||
- Fix schema import to use server-safe `@json-render/react/schema` subpath, avoiding `createContext` crashes in Next.js App Router API routes
|
||||
- Fix chaining actions in `@json-render/react`, `@json-render/react-native`, and `@json-render/react-pdf`
|
||||
- Fix safely resolving inner type for Zod arrays in core schema
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1d755c1]
|
||||
- @json-render/core@0.9.0
|
||||
- @internal/react-state@0.8.1
|
||||
|
||||
## 0.8.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/react-pdf",
|
||||
"version": "0.8.0",
|
||||
"version": "0.9.1",
|
||||
"license": "Apache-2.0",
|
||||
"description": "React PDF renderer for @json-render/core. JSON becomes PDF documents.",
|
||||
"keywords": [
|
||||
@@ -61,10 +61,10 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@json-render/core": "workspace:*",
|
||||
"@internal/react-state": "workspace:*",
|
||||
"@react-pdf/renderer": "^4.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@internal/react-state": "workspace:*",
|
||||
"@internal/typescript-config": "workspace:*",
|
||||
"@types/react": "19.2.3",
|
||||
"tsup": "^8.0.2",
|
||||
|
||||
@@ -90,7 +90,7 @@ export function ActionProvider({
|
||||
navigate,
|
||||
children,
|
||||
}: ActionProviderProps) {
|
||||
const { state, get, set } = useStateStore();
|
||||
const { get, set, getSnapshot } = useStateStore();
|
||||
const [handlers, setHandlers] =
|
||||
useState<Record<string, ActionHandler>>(initialHandlers);
|
||||
const [loadingActions, setLoadingActions] = useState<Set<string>>(new Set());
|
||||
@@ -106,7 +106,7 @@ export function ActionProvider({
|
||||
|
||||
const execute = useCallback(
|
||||
async (binding: ActionBinding) => {
|
||||
const resolved = resolveAction(binding, state);
|
||||
const resolved = resolveAction(binding, getSnapshot());
|
||||
|
||||
if (resolved.action === "setState" && resolved.params) {
|
||||
const statePath = resolved.params.statePath as string;
|
||||
@@ -211,7 +211,7 @@ export function ActionProvider({
|
||||
});
|
||||
}
|
||||
},
|
||||
[state, handlers, get, set, navigate],
|
||||
[handlers, get, set, getSnapshot, navigate],
|
||||
);
|
||||
|
||||
const confirm = useCallback(() => {
|
||||
|
||||
@@ -123,6 +123,7 @@ const ElementRenderer = React.memo(function ElementRenderer({
|
||||
const repeatScope = useRepeatScope();
|
||||
const { ctx } = useVisibility();
|
||||
const { execute } = useActions();
|
||||
const { getSnapshot } = useStateStore();
|
||||
|
||||
const fullCtx: PropResolutionContext = useMemo(
|
||||
() =>
|
||||
@@ -144,23 +145,29 @@ const ElementRenderer = React.memo(function ElementRenderer({
|
||||
|
||||
const onBindings = element.on;
|
||||
const emit = useCallback(
|
||||
(eventName: string) => {
|
||||
async (eventName: string) => {
|
||||
const binding = onBindings?.[eventName];
|
||||
if (!binding) return;
|
||||
const actionBindings = Array.isArray(binding) ? binding : [binding];
|
||||
for (const b of actionBindings) {
|
||||
if (!b.params) {
|
||||
execute(b);
|
||||
await execute(b);
|
||||
continue;
|
||||
}
|
||||
// Build a fresh context with live store state so that $state
|
||||
// references in later actions see mutations from earlier ones.
|
||||
const liveCtx: PropResolutionContext = {
|
||||
...fullCtx,
|
||||
stateModel: getSnapshot(),
|
||||
};
|
||||
const resolved: Record<string, unknown> = {};
|
||||
for (const [key, val] of Object.entries(b.params)) {
|
||||
resolved[key] = resolveActionParam(val, fullCtx);
|
||||
resolved[key] = resolveActionParam(val, liveCtx);
|
||||
}
|
||||
execute({ ...b, params: resolved });
|
||||
await execute({ ...b, params: resolved });
|
||||
}
|
||||
},
|
||||
[onBindings, execute, fullCtx],
|
||||
[onBindings, execute, fullCtx, getSnapshot],
|
||||
);
|
||||
|
||||
if (!isVisible) {
|
||||
|
||||
@@ -3,8 +3,9 @@ import { defineConfig } from "tsup";
|
||||
export default defineConfig({
|
||||
entry: ["src/index.ts", "src/server.ts", "src/catalog.ts", "src/render.tsx"],
|
||||
format: ["cjs", "esm"],
|
||||
dts: true,
|
||||
dts: { resolve: ["@internal/react-state"] },
|
||||
sourcemap: true,
|
||||
clean: true,
|
||||
noExternal: ["@internal/react-state"],
|
||||
external: ["react", "@json-render/core", "@react-pdf/renderer", "zod"],
|
||||
});
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
# @internal/react-state
|
||||
|
||||
## 0.8.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- @json-render/core@0.9.1
|
||||
|
||||
## 0.8.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1d755c1]
|
||||
- @json-render/core@0.9.0
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@internal/react-state",
|
||||
"version": "0.8.0",
|
||||
"version": "0.8.2",
|
||||
"private": true,
|
||||
"license": "Apache-2.0",
|
||||
"description": "Shared React state context for json-render renderer packages",
|
||||
|
||||
@@ -30,6 +30,8 @@ export interface StateContextValue {
|
||||
set: (path: string, value: unknown) => void;
|
||||
/** Update multiple values at once */
|
||||
update: (updates: Record<string, unknown>) => void;
|
||||
/** Return the live state snapshot from the underlying store (not the React render snapshot). */
|
||||
getSnapshot: () => StateModel;
|
||||
}
|
||||
|
||||
const StateContext = createContext<StateContextValue | null>(null);
|
||||
@@ -170,9 +172,11 @@ export function StateProvider({
|
||||
|
||||
const get = useCallback((path: string) => storeRef.current.get(path), []);
|
||||
|
||||
const getSnapshot = useCallback(() => storeRef.current.getSnapshot(), []);
|
||||
|
||||
const value = useMemo<StateContextValue>(
|
||||
() => ({ state, get, set, update }),
|
||||
[state, get, set, update],
|
||||
() => ({ state, get, set, update, getSnapshot }),
|
||||
[state, get, set, update, getSnapshot],
|
||||
);
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,5 +1,56 @@
|
||||
# @json-render/react
|
||||
|
||||
## 0.9.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- b103676: Fix install failure caused by `@internal/react-state` (a private workspace package) being listed as a published dependency. The internal package is now bundled into each renderer's output at build time, so consumers no longer need to resolve it from npm.
|
||||
- @json-render/core@0.9.1
|
||||
|
||||
## 0.9.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- 1d755c1: External state store, store adapters, and bug fixes.
|
||||
|
||||
### New: External State Store
|
||||
|
||||
The `StateStore` interface lets you plug in your own state management (Redux, Zustand, Jotai, XState, etc.) instead of the built-in internal store. Pass a `store` prop to `StateProvider`, `JSONUIProvider`, or `createRenderer` for controlled mode.
|
||||
- Added `StateStore` interface and `createStateStore()` factory to `@json-render/core`
|
||||
- `StateProvider`, `JSONUIProvider`, and `createRenderer` now accept an optional `store` prop for controlled mode
|
||||
- When `store` is provided, it becomes the single source of truth (`initialState`/`onStateChange` are ignored)
|
||||
- When `store` is omitted, everything works exactly as before (fully backward compatible)
|
||||
- Applied across all platform packages: react, react-native, react-pdf
|
||||
- Store utilities (`createStoreAdapter`, `immutableSetByPath`, `flattenToPointers`) available via `@json-render/core/store-utils` for building custom adapters
|
||||
|
||||
### New: Store Adapter Packages
|
||||
- `@json-render/zustand` — Zustand adapter for `StateStore`
|
||||
- `@json-render/redux` — Redux / Redux Toolkit adapter for `StateStore`
|
||||
- `@json-render/jotai` — Jotai adapter for `StateStore`
|
||||
|
||||
### Changed: `onStateChange` signature updated (breaking)
|
||||
|
||||
The `onStateChange` callback now receives a single array of changed entries instead of being called once per path:
|
||||
|
||||
```ts
|
||||
// Before
|
||||
onStateChange?: (path: string, value: unknown) => void
|
||||
|
||||
// After
|
||||
onStateChange?: (changes: Array<{ path: string; value: unknown }>) => void
|
||||
```
|
||||
|
||||
### Fixed
|
||||
- Fix schema import to use server-safe `@json-render/react/schema` subpath, avoiding `createContext` crashes in Next.js App Router API routes
|
||||
- Fix chaining actions in `@json-render/react`, `@json-render/react-native`, and `@json-render/react-pdf`
|
||||
- Fix safely resolving inner type for Zod arrays in core schema
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1d755c1]
|
||||
- @json-render/core@0.9.0
|
||||
- @internal/react-state@0.8.1
|
||||
|
||||
## 0.8.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -14,7 +14,7 @@ npm install @json-render/react @json-render/core zod
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from "@json-render/core";
|
||||
import { schema } from "@json-render/react";
|
||||
import { schema } from "@json-render/react/schema";
|
||||
import { z } from "zod";
|
||||
|
||||
export const catalog = defineCatalog(schema, {
|
||||
@@ -409,7 +409,8 @@ const systemPrompt = catalog.prompt();
|
||||
|
||||
```tsx
|
||||
import { defineCatalog } from "@json-render/core";
|
||||
import { schema, defineRegistry, Renderer } from "@json-render/react";
|
||||
import { schema } from "@json-render/react/schema";
|
||||
import { defineRegistry, Renderer } from "@json-render/react";
|
||||
import { z } from "zod";
|
||||
|
||||
const catalog = defineCatalog(schema, {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/react",
|
||||
"version": "0.8.0",
|
||||
"version": "0.9.1",
|
||||
"license": "Apache-2.0",
|
||||
"description": "React renderer for @json-render/core. JSON becomes React components.",
|
||||
"keywords": [
|
||||
@@ -50,10 +50,10 @@
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@json-render/core": "workspace:*",
|
||||
"@internal/react-state": "workspace:*"
|
||||
"@json-render/core": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@internal/react-state": "workspace:*",
|
||||
"@internal/typescript-config": "workspace:*",
|
||||
"@types/react": "19.2.3",
|
||||
"tsup": "^8.0.2",
|
||||
|
||||
@@ -0,0 +1,198 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import React from "react";
|
||||
import { render, act, fireEvent, screen } from "@testing-library/react";
|
||||
import type { Spec } from "@json-render/core";
|
||||
import {
|
||||
JSONUIProvider,
|
||||
Renderer,
|
||||
type ComponentRenderProps,
|
||||
} from "./renderer";
|
||||
import { useStateStore } from "./contexts/state";
|
||||
|
||||
/**
|
||||
* Minimal Button component that calls emit("press") on click.
|
||||
*/
|
||||
function Button({ element, emit }: ComponentRenderProps<{ label: string }>) {
|
||||
return (
|
||||
<button data-testid="btn" onClick={() => emit("press")}>
|
||||
{element.props.label}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Text component that renders its `text` prop.
|
||||
*/
|
||||
function Text({ element }: ComponentRenderProps<{ text: unknown }>) {
|
||||
const value = element.props.text;
|
||||
return (
|
||||
<span data-testid={`text-${element.type}`}>
|
||||
{typeof value === "string" ? value : JSON.stringify(value)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper component that reads live state and exposes it via a data attribute
|
||||
* so we can assert against the store after actions fire.
|
||||
*/
|
||||
function StateProbe() {
|
||||
const { state } = useStateStore();
|
||||
return <pre data-testid="state-probe">{JSON.stringify(state)}</pre>;
|
||||
}
|
||||
|
||||
const registry = {
|
||||
Button,
|
||||
Text,
|
||||
};
|
||||
|
||||
describe("chained actions: live $state resolution (#141)", () => {
|
||||
it("setState after pushState sees the post-push value via $state", async () => {
|
||||
const spec: Spec = {
|
||||
state: { items: ["initial"], observed: "not yet set" },
|
||||
root: "main",
|
||||
elements: {
|
||||
main: {
|
||||
type: "Button",
|
||||
props: { label: "Add Item" },
|
||||
on: {
|
||||
press: [
|
||||
{
|
||||
action: "pushState",
|
||||
params: { statePath: "/items", value: "new-item" },
|
||||
},
|
||||
{
|
||||
action: "setState",
|
||||
params: {
|
||||
statePath: "/observed",
|
||||
value: { $state: "/items" },
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<JSONUIProvider registry={registry} initialState={spec.state}>
|
||||
<Renderer spec={spec} registry={registry} />
|
||||
<StateProbe />
|
||||
</JSONUIProvider>
|
||||
);
|
||||
}
|
||||
|
||||
render(<App />);
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(screen.getByTestId("btn"));
|
||||
});
|
||||
|
||||
const probe = screen.getByTestId("state-probe");
|
||||
const state = JSON.parse(probe.textContent!);
|
||||
|
||||
expect(state.items).toEqual(["initial", "new-item"]);
|
||||
expect(state.observed).toEqual(["initial", "new-item"]);
|
||||
});
|
||||
|
||||
it("multiple pushState + setState chain resolves correctly", async () => {
|
||||
const spec: Spec = {
|
||||
state: { items: [], snapshot: null },
|
||||
root: "main",
|
||||
elements: {
|
||||
main: {
|
||||
type: "Button",
|
||||
props: { label: "Go" },
|
||||
on: {
|
||||
press: [
|
||||
{
|
||||
action: "pushState",
|
||||
params: { statePath: "/items", value: "a" },
|
||||
},
|
||||
{
|
||||
action: "pushState",
|
||||
params: { statePath: "/items", value: "b" },
|
||||
},
|
||||
{
|
||||
action: "setState",
|
||||
params: {
|
||||
statePath: "/snapshot",
|
||||
value: { $state: "/items" },
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<JSONUIProvider registry={registry} initialState={spec.state}>
|
||||
<Renderer spec={spec} registry={registry} />
|
||||
<StateProbe />
|
||||
</JSONUIProvider>
|
||||
);
|
||||
}
|
||||
|
||||
render(<App />);
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(screen.getByTestId("btn"));
|
||||
});
|
||||
|
||||
const state = JSON.parse(screen.getByTestId("state-probe").textContent!);
|
||||
|
||||
expect(state.items).toEqual(["a", "b"]);
|
||||
expect(state.snapshot).toEqual(["a", "b"]);
|
||||
});
|
||||
|
||||
it("setState reading a path mutated by an earlier setState sees fresh value", async () => {
|
||||
const spec: Spec = {
|
||||
state: { counter: 0, counterCopy: -1 },
|
||||
root: "main",
|
||||
elements: {
|
||||
main: {
|
||||
type: "Button",
|
||||
props: { label: "Go" },
|
||||
on: {
|
||||
press: [
|
||||
{
|
||||
action: "setState",
|
||||
params: { statePath: "/counter", value: 42 },
|
||||
},
|
||||
{
|
||||
action: "setState",
|
||||
params: {
|
||||
statePath: "/counterCopy",
|
||||
value: { $state: "/counter" },
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<JSONUIProvider registry={registry} initialState={spec.state}>
|
||||
<Renderer spec={spec} registry={registry} />
|
||||
<StateProbe />
|
||||
</JSONUIProvider>
|
||||
);
|
||||
}
|
||||
|
||||
render(<App />);
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(screen.getByTestId("btn"));
|
||||
});
|
||||
|
||||
const state = JSON.parse(screen.getByTestId("state-probe").textContent!);
|
||||
|
||||
expect(state.counter).toBe(42);
|
||||
expect(state.counterCopy).toBe(42);
|
||||
});
|
||||
});
|
||||
@@ -6,7 +6,6 @@ import React, {
|
||||
useState,
|
||||
useCallback,
|
||||
useMemo,
|
||||
useRef,
|
||||
type ReactNode,
|
||||
} from "react";
|
||||
import {
|
||||
@@ -137,11 +136,7 @@ export function ActionProvider({
|
||||
navigate,
|
||||
children,
|
||||
}: ActionProviderProps) {
|
||||
const { state, get, set } = useStateStore();
|
||||
// Keep a ref to the latest state so `execute` doesn't change on every
|
||||
// state update — preventing the entire action context from churning.
|
||||
const stateRef = useRef(state);
|
||||
stateRef.current = state;
|
||||
const { get, set, getSnapshot } = useStateStore();
|
||||
|
||||
const [handlers, setHandlers] =
|
||||
useState<Record<string, ActionHandler>>(initialHandlers);
|
||||
@@ -158,7 +153,7 @@ export function ActionProvider({
|
||||
|
||||
const execute = useCallback(
|
||||
async (binding: ActionBinding) => {
|
||||
const resolved = resolveAction(binding, stateRef.current);
|
||||
const resolved = resolveAction(binding, getSnapshot());
|
||||
|
||||
// Built-in: setState updates the StateProvider state directly
|
||||
if (resolved.action === "setState" && resolved.params) {
|
||||
@@ -305,7 +300,7 @@ export function ActionProvider({
|
||||
});
|
||||
}
|
||||
},
|
||||
[handlers, get, set, navigate],
|
||||
[handlers, get, set, getSnapshot, navigate],
|
||||
);
|
||||
|
||||
const confirm = useCallback(() => {
|
||||
|
||||
@@ -158,6 +158,7 @@ const ElementRenderer = React.memo(function ElementRenderer({
|
||||
const repeatScope = useRepeatScope();
|
||||
const { ctx } = useVisibility();
|
||||
const { execute } = useActions();
|
||||
const { getSnapshot } = useStateStore();
|
||||
|
||||
// Build context with repeat scope (used for both visibility and props)
|
||||
const fullCtx: PropResolutionContext = useMemo(
|
||||
@@ -183,25 +184,29 @@ const ElementRenderer = React.memo(function ElementRenderer({
|
||||
// Must be called before any early return to satisfy Rules of Hooks.
|
||||
const onBindings = element.on;
|
||||
const emit = useCallback(
|
||||
(eventName: string) => {
|
||||
async (eventName: string) => {
|
||||
const binding = onBindings?.[eventName];
|
||||
if (!binding) return;
|
||||
const actionBindings = Array.isArray(binding) ? binding : [binding];
|
||||
for (const b of actionBindings) {
|
||||
if (!b.params) {
|
||||
execute(b);
|
||||
await execute(b);
|
||||
continue;
|
||||
}
|
||||
// Resolve all action params via resolveActionParam which handles
|
||||
// $item (→ absolute state path), $index (→ number), $state, $cond, and literals.
|
||||
// Build a fresh context with live store state so that $state
|
||||
// references in later actions see mutations from earlier ones.
|
||||
const liveCtx: PropResolutionContext = {
|
||||
...fullCtx,
|
||||
stateModel: getSnapshot(),
|
||||
};
|
||||
const resolved: Record<string, unknown> = {};
|
||||
for (const [key, val] of Object.entries(b.params)) {
|
||||
resolved[key] = resolveActionParam(val, fullCtx);
|
||||
resolved[key] = resolveActionParam(val, liveCtx);
|
||||
}
|
||||
execute({ ...b, params: resolved });
|
||||
await execute({ ...b, params: resolved });
|
||||
}
|
||||
},
|
||||
[onBindings, execute, fullCtx],
|
||||
[onBindings, execute, fullCtx, getSnapshot],
|
||||
);
|
||||
|
||||
// Create on() function that returns an EventHandle with metadata for a specific event.
|
||||
|
||||
@@ -3,8 +3,9 @@ import { defineConfig } from "tsup";
|
||||
export default defineConfig({
|
||||
entry: ["src/index.ts", "src/schema.ts"],
|
||||
format: ["cjs", "esm"],
|
||||
dts: true,
|
||||
dts: { resolve: ["@internal/react-state"] },
|
||||
sourcemap: true,
|
||||
clean: true,
|
||||
noExternal: ["@internal/react-state"],
|
||||
external: ["react", "react-dom", "@json-render/core"],
|
||||
});
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
# @json-render/redux
|
||||
|
||||
## 0.9.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- @json-render/core@0.9.1
|
||||
|
||||
## 0.9.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- 1d755c1: External state store, store adapters, and bug fixes.
|
||||
|
||||
### New: External State Store
|
||||
|
||||
The `StateStore` interface lets you plug in your own state management (Redux, Zustand, Jotai, XState, etc.) instead of the built-in internal store. Pass a `store` prop to `StateProvider`, `JSONUIProvider`, or `createRenderer` for controlled mode.
|
||||
- Added `StateStore` interface and `createStateStore()` factory to `@json-render/core`
|
||||
- `StateProvider`, `JSONUIProvider`, and `createRenderer` now accept an optional `store` prop for controlled mode
|
||||
- When `store` is provided, it becomes the single source of truth (`initialState`/`onStateChange` are ignored)
|
||||
- When `store` is omitted, everything works exactly as before (fully backward compatible)
|
||||
- Applied across all platform packages: react, react-native, react-pdf
|
||||
- Store utilities (`createStoreAdapter`, `immutableSetByPath`, `flattenToPointers`) available via `@json-render/core/store-utils` for building custom adapters
|
||||
|
||||
### New: Store Adapter Packages
|
||||
- `@json-render/zustand` — Zustand adapter for `StateStore`
|
||||
- `@json-render/redux` — Redux / Redux Toolkit adapter for `StateStore`
|
||||
- `@json-render/jotai` — Jotai adapter for `StateStore`
|
||||
|
||||
### Changed: `onStateChange` signature updated (breaking)
|
||||
|
||||
The `onStateChange` callback now receives a single array of changed entries instead of being called once per path:
|
||||
|
||||
```ts
|
||||
// Before
|
||||
onStateChange?: (path: string, value: unknown) => void
|
||||
|
||||
// After
|
||||
onStateChange?: (changes: Array<{ path: string; value: unknown }>) => void
|
||||
```
|
||||
|
||||
### Fixed
|
||||
- Fix schema import to use server-safe `@json-render/react/schema` subpath, avoiding `createContext` crashes in Next.js App Router API routes
|
||||
- Fix chaining actions in `@json-render/react`, `@json-render/react-native`, and `@json-render/react-pdf`
|
||||
- Fix safely resolving inner type for Zod arrays in core schema
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1d755c1]
|
||||
- @json-render/core@0.9.0
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/redux",
|
||||
"version": "0.8.0",
|
||||
"version": "0.9.1",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Redux adapter for json-render StateStore",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,5 +1,54 @@
|
||||
# @json-render/remotion
|
||||
|
||||
## 0.9.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- @json-render/core@0.9.1
|
||||
|
||||
## 0.9.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- 1d755c1: External state store, store adapters, and bug fixes.
|
||||
|
||||
### New: External State Store
|
||||
|
||||
The `StateStore` interface lets you plug in your own state management (Redux, Zustand, Jotai, XState, etc.) instead of the built-in internal store. Pass a `store` prop to `StateProvider`, `JSONUIProvider`, or `createRenderer` for controlled mode.
|
||||
- Added `StateStore` interface and `createStateStore()` factory to `@json-render/core`
|
||||
- `StateProvider`, `JSONUIProvider`, and `createRenderer` now accept an optional `store` prop for controlled mode
|
||||
- When `store` is provided, it becomes the single source of truth (`initialState`/`onStateChange` are ignored)
|
||||
- When `store` is omitted, everything works exactly as before (fully backward compatible)
|
||||
- Applied across all platform packages: react, react-native, react-pdf
|
||||
- Store utilities (`createStoreAdapter`, `immutableSetByPath`, `flattenToPointers`) available via `@json-render/core/store-utils` for building custom adapters
|
||||
|
||||
### New: Store Adapter Packages
|
||||
- `@json-render/zustand` — Zustand adapter for `StateStore`
|
||||
- `@json-render/redux` — Redux / Redux Toolkit adapter for `StateStore`
|
||||
- `@json-render/jotai` — Jotai adapter for `StateStore`
|
||||
|
||||
### Changed: `onStateChange` signature updated (breaking)
|
||||
|
||||
The `onStateChange` callback now receives a single array of changed entries instead of being called once per path:
|
||||
|
||||
```ts
|
||||
// Before
|
||||
onStateChange?: (path: string, value: unknown) => void
|
||||
|
||||
// After
|
||||
onStateChange?: (changes: Array<{ path: string; value: unknown }>) => void
|
||||
```
|
||||
|
||||
### Fixed
|
||||
- Fix schema import to use server-safe `@json-render/react/schema` subpath, avoiding `createContext` crashes in Next.js App Router API routes
|
||||
- Fix chaining actions in `@json-render/react`, `@json-render/react-native`, and `@json-render/react-pdf`
|
||||
- Fix safely resolving inner type for Zod arrays in core schema
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1d755c1]
|
||||
- @json-render/core@0.9.0
|
||||
|
||||
## 0.8.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/remotion",
|
||||
"version": "0.8.0",
|
||||
"version": "0.9.1",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Remotion renderer for @json-render/core. JSON becomes video compositions.",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,5 +1,57 @@
|
||||
# @json-render/shadcn
|
||||
|
||||
## 0.9.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [b103676]
|
||||
- @json-render/react@0.9.1
|
||||
- @json-render/core@0.9.1
|
||||
|
||||
## 0.9.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- 1d755c1: External state store, store adapters, and bug fixes.
|
||||
|
||||
### New: External State Store
|
||||
|
||||
The `StateStore` interface lets you plug in your own state management (Redux, Zustand, Jotai, XState, etc.) instead of the built-in internal store. Pass a `store` prop to `StateProvider`, `JSONUIProvider`, or `createRenderer` for controlled mode.
|
||||
- Added `StateStore` interface and `createStateStore()` factory to `@json-render/core`
|
||||
- `StateProvider`, `JSONUIProvider`, and `createRenderer` now accept an optional `store` prop for controlled mode
|
||||
- When `store` is provided, it becomes the single source of truth (`initialState`/`onStateChange` are ignored)
|
||||
- When `store` is omitted, everything works exactly as before (fully backward compatible)
|
||||
- Applied across all platform packages: react, react-native, react-pdf
|
||||
- Store utilities (`createStoreAdapter`, `immutableSetByPath`, `flattenToPointers`) available via `@json-render/core/store-utils` for building custom adapters
|
||||
|
||||
### New: Store Adapter Packages
|
||||
- `@json-render/zustand` — Zustand adapter for `StateStore`
|
||||
- `@json-render/redux` — Redux / Redux Toolkit adapter for `StateStore`
|
||||
- `@json-render/jotai` — Jotai adapter for `StateStore`
|
||||
|
||||
### Changed: `onStateChange` signature updated (breaking)
|
||||
|
||||
The `onStateChange` callback now receives a single array of changed entries instead of being called once per path:
|
||||
|
||||
```ts
|
||||
// Before
|
||||
onStateChange?: (path: string, value: unknown) => void
|
||||
|
||||
// After
|
||||
onStateChange?: (changes: Array<{ path: string; value: unknown }>) => void
|
||||
```
|
||||
|
||||
### Fixed
|
||||
- Fix schema import to use server-safe `@json-render/react/schema` subpath, avoiding `createContext` crashes in Next.js App Router API routes
|
||||
- Fix chaining actions in `@json-render/react`, `@json-render/react-native`, and `@json-render/react-pdf`
|
||||
- Fix safely resolving inner type for Zod arrays in core schema
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1d755c1]
|
||||
- @json-render/core@0.9.0
|
||||
- @json-render/react@0.9.0
|
||||
|
||||
## 0.8.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/shadcn",
|
||||
"version": "0.8.0",
|
||||
"version": "0.9.1",
|
||||
"license": "Apache-2.0",
|
||||
"description": "shadcn/ui component library for @json-render/core. JSON becomes beautiful Tailwind-styled React components.",
|
||||
"keywords": [
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
# @json-render/xstate-store
|
||||
|
||||
[XState Store](https://stately.ai/docs/xstate-store) adapter for json-render's `StateStore` interface. Wire an `@xstate/store` atom as the state backend for json-render.
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
npm install @json-render/xstate-store @json-render/core @json-render/react @xstate/store
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> This adapter requires `@xstate/store` v3+.
|
||||
|
||||
## Usage
|
||||
|
||||
```ts
|
||||
import { createAtom } from "@xstate/store";
|
||||
import { xstateStoreStateStore } from "@json-render/xstate-store";
|
||||
import { StateProvider } from "@json-render/react";
|
||||
|
||||
// 1. Create an atom
|
||||
const uiAtom = createAtom({ count: 0 });
|
||||
|
||||
// 2. Create the json-render StateStore adapter
|
||||
const store = xstateStoreStateStore({ atom: uiAtom });
|
||||
|
||||
// 3. Use it
|
||||
<StateProvider store={store}>
|
||||
{/* json-render reads/writes go through @xstate/store */}
|
||||
</StateProvider>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### `xstateStoreStateStore(options)`
|
||||
|
||||
Creates a `StateStore` backed by an `@xstate/store` atom.
|
||||
|
||||
#### Options
|
||||
|
||||
| Option | Type | Required | Description |
|
||||
|--------|------|----------|-------------|
|
||||
| `atom` | `Atom<StateModel>` | Yes | An `@xstate/store` atom (from `createAtom`) holding the json-render state model |
|
||||
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "@json-render/xstate-store",
|
||||
"version": "0.0.0",
|
||||
"license": "Apache-2.0",
|
||||
"description": "XState Store adapter for json-render StateStore",
|
||||
"keywords": [
|
||||
"json-render",
|
||||
"xstate",
|
||||
"xstate-store",
|
||||
"state-management",
|
||||
"adapter"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/vercel-labs/json-render.git",
|
||||
"directory": "packages/xstate-store"
|
||||
},
|
||||
"homepage": "https://github.com/vercel-labs/json-render#readme",
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "tsup",
|
||||
"dev": "tsup --watch",
|
||||
"check-types": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@json-render/core": "workspace:*"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@xstate/store": ">=3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@internal/typescript-config": "workspace:*",
|
||||
"tsup": "^8.0.2",
|
||||
"typescript": "^5.4.5",
|
||||
"@xstate/store": "^3.0.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { createAtom } from "@xstate/store";
|
||||
import { xstateStoreStateStore } from "./index";
|
||||
|
||||
function createTestStore(initial: Record<string, unknown> = {}) {
|
||||
const atom = createAtom<Record<string, unknown>>(initial);
|
||||
const store = xstateStoreStateStore({ atom });
|
||||
return { atom, store };
|
||||
}
|
||||
|
||||
describe("xstateStoreStateStore", () => {
|
||||
it("get/set round-trip", () => {
|
||||
const { store } = createTestStore({ count: 0 });
|
||||
|
||||
expect(store.get("/count")).toBe(0);
|
||||
|
||||
store.set("/count", 42);
|
||||
|
||||
expect(store.get("/count")).toBe(42);
|
||||
expect(store.getSnapshot().count).toBe(42);
|
||||
});
|
||||
|
||||
it("update round-trip with multiple values", () => {
|
||||
const { store } = createTestStore({});
|
||||
|
||||
store.update({ "/a": 1, "/b": "hello" });
|
||||
|
||||
expect(store.get("/a")).toBe(1);
|
||||
expect(store.get("/b")).toBe("hello");
|
||||
expect(store.getSnapshot()).toEqual({ a: 1, b: "hello" });
|
||||
});
|
||||
|
||||
it("subscribe fires on set", () => {
|
||||
const { store } = createTestStore({});
|
||||
const listener = vi.fn();
|
||||
store.subscribe(listener);
|
||||
|
||||
store.set("/x", 1);
|
||||
|
||||
expect(listener).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("subscribe fires on update", () => {
|
||||
const { store } = createTestStore({});
|
||||
const listener = vi.fn();
|
||||
store.subscribe(listener);
|
||||
|
||||
store.update({ "/a": 1, "/b": 2 });
|
||||
|
||||
expect(listener).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("unsubscribe stops notifications", () => {
|
||||
const { store } = createTestStore({});
|
||||
const listener = vi.fn();
|
||||
const unsub = store.subscribe(listener);
|
||||
|
||||
store.set("/x", 1);
|
||||
expect(listener).toHaveBeenCalledTimes(1);
|
||||
|
||||
unsub();
|
||||
store.set("/x", 2);
|
||||
expect(listener).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("getSnapshot immutability -- previous snapshot is not mutated", () => {
|
||||
const { store } = createTestStore({
|
||||
user: { name: "Alice", age: 30 },
|
||||
});
|
||||
const snap1 = store.getSnapshot();
|
||||
|
||||
store.set("/user/name", "Bob");
|
||||
const snap2 = store.getSnapshot();
|
||||
|
||||
expect(snap1.user).toEqual({ name: "Alice", age: 30 });
|
||||
expect((snap2.user as Record<string, unknown>).name).toBe("Bob");
|
||||
expect(snap1.user).not.toBe(snap2.user);
|
||||
});
|
||||
|
||||
it("structural sharing -- untouched branches keep references", () => {
|
||||
const { store } = createTestStore({
|
||||
a: { x: 1 },
|
||||
b: { y: 2 },
|
||||
});
|
||||
const snap1 = store.getSnapshot();
|
||||
|
||||
store.set("/a/x", 99);
|
||||
const snap2 = store.getSnapshot();
|
||||
|
||||
expect(snap2.b).toBe(snap1.b);
|
||||
expect(snap2.a).not.toBe(snap1.a);
|
||||
});
|
||||
|
||||
it("getServerSnapshot returns same as getSnapshot", () => {
|
||||
const { store } = createTestStore({ x: 1 });
|
||||
|
||||
expect(store.getServerSnapshot!()).toBe(store.getSnapshot());
|
||||
|
||||
store.set("/x", 2);
|
||||
expect(store.getServerSnapshot!()).toBe(store.getSnapshot());
|
||||
});
|
||||
|
||||
it("set skips update when value is unchanged", () => {
|
||||
const { store } = createTestStore({ x: 1 });
|
||||
const snap1 = store.getSnapshot();
|
||||
const listener = vi.fn();
|
||||
store.subscribe(listener);
|
||||
|
||||
store.set("/x", 1);
|
||||
|
||||
expect(listener).not.toHaveBeenCalled();
|
||||
expect(store.getSnapshot()).toBe(snap1);
|
||||
});
|
||||
|
||||
it("update skips update when no values changed", () => {
|
||||
const { store } = createTestStore({ a: 1, b: 2 });
|
||||
const snap1 = store.getSnapshot();
|
||||
const listener = vi.fn();
|
||||
store.subscribe(listener);
|
||||
|
||||
store.update({ "/a": 1, "/b": 2 });
|
||||
|
||||
expect(listener).not.toHaveBeenCalled();
|
||||
expect(store.getSnapshot()).toBe(snap1);
|
||||
});
|
||||
|
||||
it("reads from the shared atom", () => {
|
||||
const atom = createAtom<Record<string, unknown>>({ count: 0 });
|
||||
const store = xstateStoreStateStore({ atom });
|
||||
|
||||
atom.set({ count: 99 });
|
||||
|
||||
expect(store.get("/count")).toBe(99);
|
||||
expect(store.getSnapshot().count).toBe(99);
|
||||
});
|
||||
|
||||
it("subscribe fires on external atom.set", () => {
|
||||
const atom = createAtom<Record<string, unknown>>({ count: 0 });
|
||||
const store = xstateStoreStateStore({ atom });
|
||||
const listener = vi.fn();
|
||||
store.subscribe(listener);
|
||||
|
||||
atom.set({ count: 99 });
|
||||
|
||||
expect(listener).toHaveBeenCalledTimes(1);
|
||||
expect(store.get("/count")).toBe(99);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,45 @@
|
||||
import type { StateModel, StateStore } from "@json-render/core";
|
||||
import { createStoreAdapter } from "@json-render/core/store-utils";
|
||||
import type { Atom } from "@xstate/store";
|
||||
|
||||
export type { StateStore } from "@json-render/core";
|
||||
|
||||
/**
|
||||
* Options for {@link xstateStoreStateStore}.
|
||||
*/
|
||||
export interface XstateStoreStateStoreOptions {
|
||||
/** An `@xstate/store` atom (created with `createAtom`). */
|
||||
atom: Atom<StateModel>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a {@link StateStore} backed by an `@xstate/store` atom.
|
||||
*
|
||||
* @example
|
||||
* ```ts
|
||||
* import { createAtom } from "@xstate/store";
|
||||
* import { xstateStoreStateStore } from "@json-render/xstate-store";
|
||||
*
|
||||
* const uiAtom = createAtom<Record<string, unknown>>({ count: 0 });
|
||||
*
|
||||
* const store = xstateStoreStateStore({ atom: uiAtom });
|
||||
*
|
||||
* <StateProvider store={store}>...</StateProvider>
|
||||
* ```
|
||||
*/
|
||||
export function xstateStoreStateStore(
|
||||
options: XstateStoreStateStoreOptions,
|
||||
): StateStore {
|
||||
const { atom } = options;
|
||||
|
||||
return createStoreAdapter({
|
||||
getSnapshot: () => atom.get(),
|
||||
setSnapshot: (next) => atom.set(next),
|
||||
subscribe(listener) {
|
||||
const sub = atom.subscribe(() => {
|
||||
listener();
|
||||
});
|
||||
return () => sub.unsubscribe();
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"extends": "@internal/typescript-config/base.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "dist",
|
||||
"rootDir": "src"
|
||||
},
|
||||
"include": ["src"],
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { defineConfig } from "tsup";
|
||||
|
||||
export default defineConfig({
|
||||
entry: ["src/index.ts"],
|
||||
format: ["cjs", "esm"],
|
||||
dts: true,
|
||||
sourcemap: true,
|
||||
clean: true,
|
||||
external: [
|
||||
"@json-render/core",
|
||||
"@json-render/core/store-utils",
|
||||
"@xstate/store",
|
||||
],
|
||||
});
|
||||
@@ -0,0 +1,50 @@
|
||||
# @json-render/zustand
|
||||
|
||||
## 0.9.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- @json-render/core@0.9.1
|
||||
|
||||
## 0.9.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- 1d755c1: External state store, store adapters, and bug fixes.
|
||||
|
||||
### New: External State Store
|
||||
|
||||
The `StateStore` interface lets you plug in your own state management (Redux, Zustand, Jotai, XState, etc.) instead of the built-in internal store. Pass a `store` prop to `StateProvider`, `JSONUIProvider`, or `createRenderer` for controlled mode.
|
||||
- Added `StateStore` interface and `createStateStore()` factory to `@json-render/core`
|
||||
- `StateProvider`, `JSONUIProvider`, and `createRenderer` now accept an optional `store` prop for controlled mode
|
||||
- When `store` is provided, it becomes the single source of truth (`initialState`/`onStateChange` are ignored)
|
||||
- When `store` is omitted, everything works exactly as before (fully backward compatible)
|
||||
- Applied across all platform packages: react, react-native, react-pdf
|
||||
- Store utilities (`createStoreAdapter`, `immutableSetByPath`, `flattenToPointers`) available via `@json-render/core/store-utils` for building custom adapters
|
||||
|
||||
### New: Store Adapter Packages
|
||||
- `@json-render/zustand` — Zustand adapter for `StateStore`
|
||||
- `@json-render/redux` — Redux / Redux Toolkit adapter for `StateStore`
|
||||
- `@json-render/jotai` — Jotai adapter for `StateStore`
|
||||
|
||||
### Changed: `onStateChange` signature updated (breaking)
|
||||
|
||||
The `onStateChange` callback now receives a single array of changed entries instead of being called once per path:
|
||||
|
||||
```ts
|
||||
// Before
|
||||
onStateChange?: (path: string, value: unknown) => void
|
||||
|
||||
// After
|
||||
onStateChange?: (changes: Array<{ path: string; value: unknown }>) => void
|
||||
```
|
||||
|
||||
### Fixed
|
||||
- Fix schema import to use server-safe `@json-render/react/schema` subpath, avoiding `createContext` crashes in Next.js App Router API routes
|
||||
- Fix chaining actions in `@json-render/react`, `@json-render/react-native`, and `@json-render/react-pdf`
|
||||
- Fix safely resolving inner type for Zod arrays in core schema
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [1d755c1]
|
||||
- @json-render/core@0.9.0
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@json-render/zustand",
|
||||
"version": "0.8.0",
|
||||
"version": "0.9.1",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Zustand adapter for json-render StateStore",
|
||||
"keywords": [
|
||||
|
||||
Generated
+50
-57
@@ -448,7 +448,7 @@ importers:
|
||||
version: 0.563.0(react@19.2.4)
|
||||
next:
|
||||
specifier: 16.1.6
|
||||
version: 16.1.6(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
|
||||
version: 16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
|
||||
radix-ui:
|
||||
specifier: ^1.4.3
|
||||
version: 1.4.3(@types/react-dom@19.2.3(@types/react@19.2.3))(@types/react@19.2.3)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
|
||||
@@ -722,7 +722,7 @@ importers:
|
||||
version: 6.0.91(zod@4.3.5)
|
||||
next:
|
||||
specifier: ^16.1.6
|
||||
version: 16.1.6(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
|
||||
version: 16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
|
||||
react:
|
||||
specifier: ^19.1.0
|
||||
version: 19.2.4
|
||||
@@ -885,9 +885,6 @@ importers:
|
||||
|
||||
packages/react:
|
||||
dependencies:
|
||||
'@internal/react-state':
|
||||
specifier: workspace:*
|
||||
version: link:../react-state
|
||||
'@json-render/core':
|
||||
specifier: workspace:*
|
||||
version: link:../core
|
||||
@@ -895,6 +892,9 @@ importers:
|
||||
specifier: ^19.2.3
|
||||
version: 19.2.3
|
||||
devDependencies:
|
||||
'@internal/react-state':
|
||||
specifier: workspace:*
|
||||
version: link:../react-state
|
||||
'@internal/typescript-config':
|
||||
specifier: workspace:*
|
||||
version: link:../typescript-config
|
||||
@@ -910,9 +910,6 @@ importers:
|
||||
|
||||
packages/react-native:
|
||||
dependencies:
|
||||
'@internal/react-state':
|
||||
specifier: workspace:*
|
||||
version: link:../react-state
|
||||
'@json-render/core':
|
||||
specifier: workspace:*
|
||||
version: link:../core
|
||||
@@ -920,6 +917,9 @@ importers:
|
||||
specifier: ^18.0.0 || ^19.0.0
|
||||
version: 19.2.4
|
||||
devDependencies:
|
||||
'@internal/react-state':
|
||||
specifier: workspace:*
|
||||
version: link:../react-state
|
||||
'@internal/typescript-config':
|
||||
specifier: workspace:*
|
||||
version: link:../typescript-config
|
||||
@@ -941,9 +941,6 @@ importers:
|
||||
|
||||
packages/react-pdf:
|
||||
dependencies:
|
||||
'@internal/react-state':
|
||||
specifier: workspace:*
|
||||
version: link:../react-state
|
||||
'@json-render/core':
|
||||
specifier: workspace:*
|
||||
version: link:../core
|
||||
@@ -954,6 +951,9 @@ importers:
|
||||
specifier: ^18.0.0 || ^19.0.0
|
||||
version: 19.2.4
|
||||
devDependencies:
|
||||
'@internal/react-state':
|
||||
specifier: workspace:*
|
||||
version: link:../react-state
|
||||
'@internal/typescript-config':
|
||||
specifier: workspace:*
|
||||
version: link:../typescript-config
|
||||
@@ -1136,6 +1136,25 @@ importers:
|
||||
specifier: 5.9.2
|
||||
version: 5.9.2
|
||||
|
||||
packages/xstate-store:
|
||||
dependencies:
|
||||
'@json-render/core':
|
||||
specifier: workspace:*
|
||||
version: link:../core
|
||||
devDependencies:
|
||||
'@internal/typescript-config':
|
||||
specifier: workspace:*
|
||||
version: link:../typescript-config
|
||||
'@xstate/store':
|
||||
specifier: ^3.0.0
|
||||
version: 3.15.0(react@19.2.4)
|
||||
tsup:
|
||||
specifier: ^8.0.2
|
||||
version: 8.5.1(jiti@2.6.1)(postcss@8.5.6)(tsx@4.21.0)(typescript@5.9.2)(yaml@2.8.2)
|
||||
typescript:
|
||||
specifier: ^5.4.5
|
||||
version: 5.9.2
|
||||
|
||||
packages/zustand:
|
||||
dependencies:
|
||||
'@json-render/core':
|
||||
@@ -5278,6 +5297,17 @@ packages:
|
||||
resolution: {integrity: sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw==}
|
||||
engines: {node: '>=10.0.0'}
|
||||
|
||||
'@xstate/store@3.15.0':
|
||||
resolution: {integrity: sha512-1V4/5D55zvJz3inEbAH+pqrAy2xhb2d8OKC1fZcBwWmr51VpxTOCNgf9ma4fa/seUfpQPjRf9wxBSyfcTKtUbQ==}
|
||||
peerDependencies:
|
||||
react: ^18.2.0 || ^19.0.0
|
||||
solid-js: ^1.7.6
|
||||
peerDependenciesMeta:
|
||||
react:
|
||||
optional: true
|
||||
solid-js:
|
||||
optional: true
|
||||
|
||||
'@xtuc/ieee754@1.2.0':
|
||||
resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
|
||||
|
||||
@@ -12775,7 +12805,6 @@ snapshots:
|
||||
- graphql
|
||||
- supports-color
|
||||
- utf-8-validate
|
||||
optional: true
|
||||
|
||||
'@expo/code-signing-certificates@0.0.6':
|
||||
dependencies:
|
||||
@@ -12840,7 +12869,6 @@ snapshots:
|
||||
optionalDependencies:
|
||||
react: 19.2.4
|
||||
react-native: 0.83.1(@babel/core@7.29.0)(@types/react@19.2.3)(react@19.2.4)
|
||||
optional: true
|
||||
|
||||
'@expo/env@2.0.8':
|
||||
dependencies:
|
||||
@@ -12910,7 +12938,7 @@ snapshots:
|
||||
postcss: 8.4.49
|
||||
resolve-from: 5.0.0
|
||||
optionalDependencies:
|
||||
expo: 54.0.33(@babel/core@7.29.0)(@expo/metro-runtime@6.1.2)(expo-router@6.0.23)(graphql@16.12.0)(react-native@0.81.4(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
|
||||
expo: 54.0.33(@babel/core@7.29.0)(@expo/metro-runtime@6.1.2)(expo-router@6.0.23)(graphql@16.12.0)(react-native@0.83.1(@babel/core@7.29.0)(@types/react@19.2.3)(react@19.2.4))(react@19.2.4)
|
||||
transitivePeerDependencies:
|
||||
- bufferutil
|
||||
- supports-color
|
||||
@@ -12991,7 +13019,7 @@ snapshots:
|
||||
'@expo/json-file': 10.0.8
|
||||
'@react-native/normalize-colors': 0.81.5
|
||||
debug: 4.4.3
|
||||
expo: 54.0.33(@babel/core@7.29.0)(@expo/metro-runtime@6.1.2)(expo-router@6.0.23)(graphql@16.12.0)(react-native@0.81.4(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
|
||||
expo: 54.0.33(@babel/core@7.29.0)(@expo/metro-runtime@6.1.2)(expo-router@6.0.23)(graphql@16.12.0)(react-native@0.83.1(@babel/core@7.29.0)(@types/react@19.2.3)(react@19.2.4))(react@19.2.4)
|
||||
resolve-from: 5.0.0
|
||||
semver: 7.7.3
|
||||
xml2js: 0.6.0
|
||||
@@ -13019,7 +13047,6 @@ snapshots:
|
||||
expo-font: 14.0.11(expo@54.0.33)(react-native@0.83.1(@babel/core@7.29.0)(@types/react@19.2.3)(react@19.2.4))(react@19.2.4)
|
||||
react: 19.2.4
|
||||
react-native: 0.83.1(@babel/core@7.29.0)(@types/react@19.2.3)(react@19.2.4)
|
||||
optional: true
|
||||
|
||||
'@expo/ws-tunnel@1.0.6': {}
|
||||
|
||||
@@ -16234,7 +16261,7 @@ snapshots:
|
||||
'@stripe/ui-extension-tools@0.0.1(@babel/core@7.29.0)(babel-jest@27.5.1(@babel/core@7.29.0))':
|
||||
dependencies:
|
||||
'@types/jest': 28.1.8
|
||||
'@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@2.6.1))(typescript@4.9.5))(eslint@8.57.1)(typescript@4.9.5)
|
||||
'@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@4.9.5))(eslint@8.57.1)(typescript@4.9.5)
|
||||
'@typescript-eslint/parser': 5.62.0(eslint@8.57.1)(typescript@4.9.5)
|
||||
eslint: 8.57.1
|
||||
eslint-plugin-react: 7.37.5(eslint@8.57.1)
|
||||
@@ -16581,7 +16608,7 @@ snapshots:
|
||||
'@types/node': 22.19.6
|
||||
optional: true
|
||||
|
||||
'@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@9.39.2(jiti@2.6.1))(typescript@4.9.5))(eslint@8.57.1)(typescript@4.9.5)':
|
||||
'@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@4.9.5))(eslint@8.57.1)(typescript@4.9.5)':
|
||||
dependencies:
|
||||
'@eslint-community/regexpp': 4.12.2
|
||||
'@typescript-eslint/parser': 5.62.0(eslint@8.57.1)(typescript@4.9.5)
|
||||
@@ -16929,6 +16956,10 @@ snapshots:
|
||||
|
||||
'@xmldom/xmldom@0.8.11': {}
|
||||
|
||||
'@xstate/store@3.15.0(react@19.2.4)':
|
||||
optionalDependencies:
|
||||
react: 19.2.4
|
||||
|
||||
'@xtuc/ieee754@1.2.0': {}
|
||||
|
||||
'@xtuc/long@4.2.2': {}
|
||||
@@ -17338,7 +17369,7 @@ snapshots:
|
||||
resolve-from: 5.0.0
|
||||
optionalDependencies:
|
||||
'@babel/runtime': 7.28.6
|
||||
expo: 54.0.33(@babel/core@7.29.0)(@expo/metro-runtime@6.1.2)(expo-router@6.0.23)(graphql@16.12.0)(react-native@0.81.4(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
|
||||
expo: 54.0.33(@babel/core@7.29.0)(@expo/metro-runtime@6.1.2)(expo-router@6.0.23)(graphql@16.12.0)(react-native@0.83.1(@babel/core@7.29.0)(@types/react@19.2.3)(react@19.2.4))(react@19.2.4)
|
||||
transitivePeerDependencies:
|
||||
- '@babel/core'
|
||||
- supports-color
|
||||
@@ -18665,7 +18696,6 @@ snapshots:
|
||||
react-native: 0.83.1(@babel/core@7.29.0)(@types/react@19.2.3)(react@19.2.4)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
optional: true
|
||||
|
||||
expo-clipboard@8.0.8(expo@54.0.33)(react-native@0.81.4(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
|
||||
dependencies:
|
||||
@@ -18690,7 +18720,6 @@ snapshots:
|
||||
react-native: 0.83.1(@babel/core@7.29.0)(@types/react@19.2.3)(react@19.2.4)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
optional: true
|
||||
|
||||
expo-file-system@19.0.21(expo@54.0.33)(react-native@0.81.4(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0)):
|
||||
dependencies:
|
||||
@@ -18701,7 +18730,6 @@ snapshots:
|
||||
dependencies:
|
||||
expo: 54.0.33(@babel/core@7.29.0)(@expo/metro-runtime@6.1.2)(expo-router@6.0.23)(graphql@16.12.0)(react-native@0.83.1(@babel/core@7.29.0)(@types/react@19.2.3)(react@19.2.4))(react@19.2.4)
|
||||
react-native: 0.83.1(@babel/core@7.29.0)(@types/react@19.2.3)(react@19.2.4)
|
||||
optional: true
|
||||
|
||||
expo-font@14.0.11(expo@54.0.33)(react-native@0.81.4(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
|
||||
dependencies:
|
||||
@@ -18716,7 +18744,6 @@ snapshots:
|
||||
fontfaceobserver: 2.3.0
|
||||
react: 19.2.4
|
||||
react-native: 0.83.1(@babel/core@7.29.0)(@types/react@19.2.3)(react@19.2.4)
|
||||
optional: true
|
||||
|
||||
expo-keep-awake@15.0.8(expo@54.0.33)(react@19.1.0):
|
||||
dependencies:
|
||||
@@ -18727,7 +18754,6 @@ snapshots:
|
||||
dependencies:
|
||||
expo: 54.0.33(@babel/core@7.29.0)(@expo/metro-runtime@6.1.2)(expo-router@6.0.23)(graphql@16.12.0)(react-native@0.83.1(@babel/core@7.29.0)(@types/react@19.2.3)(react@19.2.4))(react@19.2.4)
|
||||
react: 19.2.4
|
||||
optional: true
|
||||
|
||||
expo-linking@8.0.11(expo@54.0.33)(react-native@0.81.4(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
|
||||
dependencies:
|
||||
@@ -18769,7 +18795,6 @@ snapshots:
|
||||
invariant: 2.2.4
|
||||
react: 19.2.4
|
||||
react-native: 0.83.1(@babel/core@7.29.0)(@types/react@19.2.3)(react@19.2.4)
|
||||
optional: true
|
||||
|
||||
expo-router@6.0.23(@expo/metro-runtime@6.1.2)(@types/react-dom@19.2.3(@types/react@19.1.17))(@types/react@19.1.17)(expo-constants@18.0.13)(expo-linking@8.0.11)(expo@54.0.33)(react-dom@19.2.4(react@19.1.0))(react-native-reanimated@4.2.1(react-native-worklets@0.7.2(@babel/core@7.29.0)(react-native@0.81.4(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.4(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-safe-area-context@5.4.0(react-native@0.81.4(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-screens@4.11.1(react-native@0.81.4(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.4(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
|
||||
dependencies:
|
||||
@@ -18932,7 +18957,6 @@ snapshots:
|
||||
- graphql
|
||||
- supports-color
|
||||
- utf-8-validate
|
||||
optional: true
|
||||
|
||||
exponential-backoff@3.1.3: {}
|
||||
|
||||
@@ -21557,32 +21581,6 @@ snapshots:
|
||||
- '@babel/core'
|
||||
- babel-plugin-macros
|
||||
|
||||
next@16.1.6(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
|
||||
dependencies:
|
||||
'@next/env': 16.1.6
|
||||
'@swc/helpers': 0.5.15
|
||||
baseline-browser-mapping: 2.9.14
|
||||
caniuse-lite: 1.0.30001764
|
||||
postcss: 8.4.31
|
||||
react: 19.2.4
|
||||
react-dom: 19.2.4(react@19.2.4)
|
||||
styled-jsx: 5.1.6(react@19.2.4)
|
||||
optionalDependencies:
|
||||
'@next/swc-darwin-arm64': 16.1.6
|
||||
'@next/swc-darwin-x64': 16.1.6
|
||||
'@next/swc-linux-arm64-gnu': 16.1.6
|
||||
'@next/swc-linux-arm64-musl': 16.1.6
|
||||
'@next/swc-linux-x64-gnu': 16.1.6
|
||||
'@next/swc-linux-x64-musl': 16.1.6
|
||||
'@next/swc-win32-arm64-msvc': 16.1.6
|
||||
'@next/swc-win32-x64-msvc': 16.1.6
|
||||
'@opentelemetry/api': 1.9.0
|
||||
babel-plugin-react-compiler: 1.0.0
|
||||
sharp: 0.34.5
|
||||
transitivePeerDependencies:
|
||||
- '@babel/core'
|
||||
- babel-plugin-macros
|
||||
|
||||
node-abi@3.87.0:
|
||||
dependencies:
|
||||
semver: 7.7.3
|
||||
@@ -23582,11 +23580,6 @@ snapshots:
|
||||
client-only: 0.0.1
|
||||
react: 19.2.3
|
||||
|
||||
styled-jsx@5.1.6(react@19.2.4):
|
||||
dependencies:
|
||||
client-only: 0.0.1
|
||||
react: 19.2.4
|
||||
|
||||
sucrase@3.35.1:
|
||||
dependencies:
|
||||
'@jridgewell/gen-mapping': 0.3.13
|
||||
|
||||
@@ -28,7 +28,8 @@ function App({ spec }) {
|
||||
|
||||
```typescript
|
||||
import { defineCatalog } from "@json-render/core";
|
||||
import { schema, defineRegistry } from "@json-render/react";
|
||||
import { schema } from "@json-render/react/schema";
|
||||
import { defineRegistry } from "@json-render/react";
|
||||
import { z } from "zod";
|
||||
|
||||
// Create catalog with props schemas
|
||||
|
||||
Reference in New Issue
Block a user