@json-render/svelte 0.6.1 → 0.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
ADDED
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
# @json-render/svelte
|
|
2
|
+
|
|
3
|
+
Svelte 5 renderer for `@json-render/core`. Turn JSON specs into Svelte components with runes-based reactivity.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @json-render/core @json-render/svelte
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Peer dependencies: `svelte ^5.0.0` and `zod ^4.0.0`.
|
|
12
|
+
|
|
13
|
+
## Quick Start
|
|
14
|
+
|
|
15
|
+
### 1. Create a Catalog
|
|
16
|
+
|
|
17
|
+
```typescript
|
|
18
|
+
import { defineCatalog } from "@json-render/core";
|
|
19
|
+
import { schema } from "@json-render/svelte/schema";
|
|
20
|
+
import { z } from "zod";
|
|
21
|
+
|
|
22
|
+
export const catalog = defineCatalog(schema, {
|
|
23
|
+
components: {
|
|
24
|
+
Card: {
|
|
25
|
+
props: z.object({
|
|
26
|
+
title: z.string(),
|
|
27
|
+
description: z.string().nullable(),
|
|
28
|
+
}),
|
|
29
|
+
description: "A card container",
|
|
30
|
+
},
|
|
31
|
+
Button: {
|
|
32
|
+
props: z.object({
|
|
33
|
+
label: z.string(),
|
|
34
|
+
action: z.string(),
|
|
35
|
+
}),
|
|
36
|
+
description: "A clickable button",
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
actions: {
|
|
40
|
+
submit: { description: "Submit the form" },
|
|
41
|
+
},
|
|
42
|
+
});
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### 2. Define Component Implementations
|
|
46
|
+
|
|
47
|
+
```typescript
|
|
48
|
+
import { defineRegistry } from "@json-render/svelte";
|
|
49
|
+
import { catalog } from "./catalog";
|
|
50
|
+
|
|
51
|
+
export const { registry } = defineRegistry(catalog, {
|
|
52
|
+
components: {
|
|
53
|
+
Card: ({ props, children }) => /* Svelte 5 snippet */,
|
|
54
|
+
Button: ({ props, emit }) => /* Svelte 5 snippet */,
|
|
55
|
+
},
|
|
56
|
+
actions: {
|
|
57
|
+
submit: async (params) => { /* handle submit */ },
|
|
58
|
+
},
|
|
59
|
+
});
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### 3. Render Specs
|
|
63
|
+
|
|
64
|
+
```svelte
|
|
65
|
+
<script>
|
|
66
|
+
import { Renderer, StateProvider, ActionProvider } from "@json-render/svelte";
|
|
67
|
+
import { registry } from "./registry";
|
|
68
|
+
|
|
69
|
+
const spec = { /* ... */ };
|
|
70
|
+
</script>
|
|
71
|
+
|
|
72
|
+
<StateProvider initialState={{ form: { name: "" } }}>
|
|
73
|
+
<ActionProvider handlers={{ submit: handleSubmit }}>
|
|
74
|
+
<Renderer {spec} {registry} />
|
|
75
|
+
</ActionProvider>
|
|
76
|
+
</StateProvider>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## Providers
|
|
80
|
+
|
|
81
|
+
| Provider | Purpose |
|
|
82
|
+
|----------|---------|
|
|
83
|
+
| `StateProvider` | Share state across components (JSON Pointer paths). Accepts optional `store` prop for controlled mode. |
|
|
84
|
+
| `ActionProvider` | Handle actions dispatched via the event system |
|
|
85
|
+
| `VisibilityProvider` | Enable conditional rendering based on state |
|
|
86
|
+
| `ValidationProvider` | Form field validation |
|
|
87
|
+
| `RepeatScopeProvider` | Repeat scope for list rendering |
|
|
88
|
+
| `FunctionsContextProvider` | Register `$computed` functions |
|
|
89
|
+
| `JsonUIProvider` | All-in-one provider combining state, actions, visibility, validation, and functions |
|
|
90
|
+
|
|
91
|
+
## Context Accessors
|
|
92
|
+
|
|
93
|
+
Svelte 5 uses `getContext`-based accessors instead of hooks:
|
|
94
|
+
|
|
95
|
+
| Accessor | Purpose |
|
|
96
|
+
|----------|---------|
|
|
97
|
+
| `getStateContext()` | Access state context (`state`, `get`, `set`) |
|
|
98
|
+
| `getStateValue(path)` | Get single value from state |
|
|
99
|
+
| `getBoundProp(value, binding)` | Two-way binding for `$bindState`/`$bindItem` |
|
|
100
|
+
| `getVisibilityContext()` | Access visibility context |
|
|
101
|
+
| `isVisible(condition)` | Check if a visibility condition is met |
|
|
102
|
+
| `getActionContext()` | Access action context |
|
|
103
|
+
| `getAction(binding)` | Get a single action dispatch function |
|
|
104
|
+
| `getValidationContext()` | Access validation context |
|
|
105
|
+
| `getFieldValidation(path, config)` | Field validation state |
|
|
106
|
+
| `getRepeatScope()` | Access current repeat scope |
|
|
107
|
+
| `getFunctions()` | Access registered computed functions |
|
|
108
|
+
|
|
109
|
+
## Streaming
|
|
110
|
+
|
|
111
|
+
```typescript
|
|
112
|
+
import { createUIStream, createChatUI } from "@json-render/svelte";
|
|
113
|
+
|
|
114
|
+
const stream = createUIStream({ endpoint: "/api/generate" });
|
|
115
|
+
|
|
116
|
+
// Or for chat-style UI:
|
|
117
|
+
const chat = createChatUI({ endpoint: "/api/chat" });
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
## Key Exports
|
|
121
|
+
|
|
122
|
+
| Export | Purpose |
|
|
123
|
+
|--------|---------|
|
|
124
|
+
| `defineRegistry` | Create a type-safe component registry from a catalog |
|
|
125
|
+
| `createRenderer` | Create a renderer function from a registry |
|
|
126
|
+
| `Renderer` | Render a spec using a registry |
|
|
127
|
+
| `CatalogRenderer` | Render with automatic provider wiring |
|
|
128
|
+
| `JsonUIProvider` | All-in-one provider |
|
|
129
|
+
| `schema` | Element tree schema (includes built-in state actions) |
|
|
130
|
+
| `createUIStream` | Stream specs from an API endpoint |
|
|
131
|
+
| `createChatUI` | Chat-style streaming interface |
|
|
132
|
+
| `flatToTree` | Convert flat spec to tree format |
|
|
133
|
+
| `ConfirmDialog` | Confirmation dialog component |
|
|
134
|
+
| `ConfirmDialogManager` | Manage multiple confirmation dialogs |
|
|
135
|
+
|
|
136
|
+
### Types
|
|
137
|
+
|
|
138
|
+
| Export | Purpose |
|
|
139
|
+
|--------|---------|
|
|
140
|
+
| `ComponentContext` | Typed component render function context (catalog-aware) |
|
|
141
|
+
| `BaseComponentProps` | Catalog-agnostic base type for reusable component libraries |
|
|
142
|
+
| `EventHandle` | Event handle with `emit()`, `shouldPreventDefault`, `bound` |
|
|
143
|
+
| `ComponentFn` | Component render function type |
|
|
144
|
+
| `SetState` | State setter type |
|
|
145
|
+
| `StateModel` | State model type |
|
|
146
|
+
| `SvelteSchema` | Schema type for the Svelte renderer |
|
|
147
|
+
| `SvelteSpec` | Spec type for the Svelte renderer |
|
|
148
|
+
|
|
149
|
+
## Documentation
|
|
150
|
+
|
|
151
|
+
Full API reference: [json-render.dev/docs/api/svelte](https://json-render.dev/docs/api/svelte).
|
|
152
|
+
|
|
153
|
+
## License
|
|
154
|
+
|
|
155
|
+
Apache-2.0
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
* Props for JSONUIProvider
|
|
5
5
|
*/
|
|
6
6
|
export interface JSONUIProviderProps {
|
|
7
|
-
/** Component registry */
|
|
8
|
-
registry
|
|
7
|
+
/** Component registry (passed through for convenience; not used internally) */
|
|
8
|
+
registry?: ComponentRegistry;
|
|
9
9
|
/**
|
|
10
10
|
* External store (controlled mode). When provided, `initialState` and
|
|
11
11
|
* `onStateChange` are ignored.
|
|
@@ -3,8 +3,8 @@ import type { ComputedFunction } from "@json-render/core";
|
|
|
3
3
|
* Props for JSONUIProvider
|
|
4
4
|
*/
|
|
5
5
|
export interface JSONUIProviderProps {
|
|
6
|
-
/** Component registry */
|
|
7
|
-
registry
|
|
6
|
+
/** Component registry (passed through for convenience; not used internally) */
|
|
7
|
+
registry?: ComponentRegistry;
|
|
8
8
|
/**
|
|
9
9
|
* External store (controlled mode). When provided, `initialState` and
|
|
10
10
|
* `onStateChange` are ignored.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JsonUIProvider.svelte.d.ts","sourceRoot":"","sources":["../src/JsonUIProvider.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC
|
|
1
|
+
{"version":3,"file":"JsonUIProvider.svelte.d.ts","sourceRoot":"","sources":["../src/JsonUIProvider.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvC,sBAAsB;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IACzC,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,kCAAkC;IAClC,mBAAmB,CAAC,EAAE,MAAM,CAC1B,MAAM,EACN,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAC5D,CAAC;IACF,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAC7C,sDAAsD;IACtD,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC3E,uBAAuB;IACvB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAGH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAOnE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AA0CvD,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
|
package/dist/renderer.d.ts
CHANGED
|
@@ -98,7 +98,7 @@ export interface CreateRendererProps {
|
|
|
98
98
|
fallback?: Component;
|
|
99
99
|
}
|
|
100
100
|
/**
|
|
101
|
-
* Component map type — maps component names to
|
|
101
|
+
* Component map type — maps component names to Svelte components
|
|
102
102
|
*/
|
|
103
103
|
export type ComponentMap<TComponents extends Record<string, {
|
|
104
104
|
props: unknown;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@json-render/svelte",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.12.1",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"description": "Svelte 5 renderer for @json-render/core. JSON becomes Svelte components.",
|
|
6
6
|
"keywords": [
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"url": "git+https://github.com/vercel-labs/json-render.git",
|
|
22
22
|
"directory": "packages/svelte"
|
|
23
23
|
},
|
|
24
|
-
"homepage": "https://
|
|
24
|
+
"homepage": "https://json-render.dev",
|
|
25
25
|
"bugs": {
|
|
26
26
|
"url": "https://github.com/vercel-labs/json-render/issues"
|
|
27
27
|
},
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"dist"
|
|
50
50
|
],
|
|
51
51
|
"dependencies": {
|
|
52
|
-
"@json-render/core": "0.
|
|
52
|
+
"@json-render/core": "0.12.1"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@sveltejs/package": "^2.3.0",
|
|
@@ -60,7 +60,8 @@
|
|
|
60
60
|
"@internal/typescript-config": "0.0.0"
|
|
61
61
|
},
|
|
62
62
|
"peerDependencies": {
|
|
63
|
-
"svelte": "^5.0.0"
|
|
63
|
+
"svelte": "^5.0.0",
|
|
64
|
+
"zod": "^4.0.0"
|
|
64
65
|
},
|
|
65
66
|
"scripts": {
|
|
66
67
|
"build": "svelte-package -i src -o dist",
|