Compare commits

..
Author SHA1 Message Date
David KhourshidandClaude Opus 4.6 6bcaaad57d feat: Add @xstate/store (atom) support (#157)
* feat: add @xstate/store integration using atoms

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* docs: add README for @json-render/xstate-store

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor: rename xstateStoreStateStore to xstateStore

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* README updates

* Keep naming convention

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-24 22:01:33 -06:00
github-actions[bot] 0b7d767cdd chore: version packages (#154)
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
2026-02-24 06:29:45 -06:00
Chris Tate b1036763d2 fixed: Install failure due to private dependency (#153)
* fix @internal/react-state import

* add changeset for @internal/react-state install fix

* docs: add v0.9.1 changelog entry
2026-02-24 06:25:34 -06:00
51 changed files with 752 additions and 343 deletions
+9
View File
@@ -1,5 +1,14 @@
# 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
@@ -5,6 +5,16 @@ export const metadata = pageMetadata("docs/changelog")
Notable changes and updates to json-render.
## 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
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "web",
"version": "0.1.1",
"version": "0.1.2",
"type": "module",
"private": true,
"license": "Apache-2.0",
+9
View File
@@ -1,5 +1,14 @@
# 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
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "example-chat",
"version": "0.1.1",
"version": "0.1.2",
"type": "module",
"private": true,
"scripts": {
+9
View File
@@ -1,5 +1,14 @@
# 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
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "example-dashboard",
"version": "0.1.1",
"version": "0.1.2",
"type": "module",
"private": true,
"scripts": {
+9
View File
@@ -1,5 +1,14 @@
# 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
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "example-no-ai",
"version": "0.1.1",
"version": "0.1.2",
"type": "module",
"private": true,
"scripts": {
+8
View File
@@ -1,5 +1,13 @@
# 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
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "example-react-native",
"version": "0.1.1",
"version": "0.1.2",
"private": true,
"main": "expo-router/entry",
"scripts": {
+8
View File
@@ -1,5 +1,13 @@
# 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
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "example-react-pdf",
"version": "0.1.1",
"version": "0.1.2",
"type": "module",
"private": true,
"scripts": {
+7
View File
@@ -1,5 +1,12 @@
# example-remotion
## 0.1.2
### Patch Changes
- @json-render/core@0.9.1
- @json-render/remotion@0.9.1
## 0.1.1
### Patch Changes
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "example-remotion",
"version": "0.1.1",
"version": "0.1.2",
"type": "module",
"private": true,
"scripts": {
@@ -1,5 +1,13 @@
# 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
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "com.example.json-render-demo",
"version": "0.0.2",
"version": "0.0.3",
"description": "Test",
"private": true,
"license": "~~proprietary~~",
@@ -1,5 +1,13 @@
# 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
@@ -1,6 +1,6 @@
{
"name": "com.example.json-render-fullpage-demo",
"version": "0.0.2",
"version": "0.0.3",
"description": "Full-page Stripe App example (alpha)",
"private": true,
"license": "~~proprietary~~",
+6
View File
@@ -1,5 +1,11 @@
# @json-render/codegen
## 0.9.1
### Patch Changes
- @json-render/core@0.9.1
## 0.9.0
### Minor Changes
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@json-render/codegen",
"version": "0.9.0",
"version": "0.9.1",
"license": "Apache-2.0",
"description": "Utilities for generating code from json-render UI trees",
"keywords": [
+2
View File
@@ -1,5 +1,7 @@
# @json-render/core
## 0.9.1
## 0.9.0
### Minor Changes
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@json-render/core",
"version": "0.9.0",
"version": "0.9.1",
"license": "Apache-2.0",
"description": "JSON becomes real things. Define your catalog, register your components, let AI generate.",
"keywords": [
+6
View File
@@ -1,5 +1,11 @@
# @json-render/jotai
## 0.9.1
### Patch Changes
- @json-render/core@0.9.1
## 0.9.0
### Minor Changes
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@json-render/jotai",
"version": "0.9.0",
"version": "0.9.1",
"license": "Apache-2.0",
"description": "Jotai adapter for json-render StateStore",
"keywords": [
+7
View File
@@ -1,5 +1,12 @@
# @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
+3 -3
View File
@@ -1,6 +1,6 @@
{
"name": "@json-render/react-native",
"version": "0.9.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",
+2 -1
View File
@@ -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"],
});
+7
View File
@@ -1,5 +1,12 @@
# @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
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@json-render/react-pdf",
"version": "0.9.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",
+2 -1
View File
@@ -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"],
});
+6
View File
@@ -1,5 +1,11 @@
# @internal/react-state
## 0.8.2
### Patch Changes
- @json-render/core@0.9.1
## 0.8.1
### Patch Changes
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@internal/react-state",
"version": "0.8.1",
"version": "0.8.2",
"private": true,
"license": "Apache-2.0",
"description": "Shared React state context for json-render renderer packages",
+7
View File
@@ -1,5 +1,12 @@
# @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
+3 -3
View File
@@ -1,6 +1,6 @@
{
"name": "@json-render/react",
"version": "0.9.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",
+2 -1
View File
@@ -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"],
});
+6
View File
@@ -1,5 +1,11 @@
# @json-render/redux
## 0.9.1
### Patch Changes
- @json-render/core@0.9.1
## 0.9.0
### Minor Changes
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@json-render/redux",
"version": "0.9.0",
"version": "0.9.1",
"license": "Apache-2.0",
"description": "Redux adapter for json-render StateStore",
"keywords": [
+6
View File
@@ -1,5 +1,11 @@
# @json-render/remotion
## 0.9.1
### Patch Changes
- @json-render/core@0.9.1
## 0.9.0
### Minor Changes
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@json-render/remotion",
"version": "0.9.0",
"version": "0.9.1",
"license": "Apache-2.0",
"description": "Remotion renderer for @json-render/core. JSON becomes video compositions.",
"keywords": [
+8
View File
@@ -1,5 +1,13 @@
# @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
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@json-render/shadcn",
"version": "0.9.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": [
+43
View File
@@ -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 |
+55
View File
@@ -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"
}
}
+136
View File
@@ -0,0 +1,136 @@
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);
});
});
+45
View File
@@ -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();
},
});
}
+9
View File
@@ -0,0 +1,9 @@
{
"extends": "@internal/typescript-config/base.json",
"compilerOptions": {
"outDir": "dist",
"rootDir": "src"
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}
+14
View File
@@ -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",
],
});
+6
View File
@@ -1,5 +1,11 @@
# @json-render/zustand
## 0.9.1
### Patch Changes
- @json-render/core@0.9.1
## 0.9.0
### Minor Changes
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@json-render/zustand",
"version": "0.9.0",
"version": "0.9.1",
"license": "Apache-2.0",
"description": "Zustand adapter for json-render StateStore",
"keywords": [
+267 -315
View File
File diff suppressed because it is too large Load Diff