ngx-json-render 0.9.1 → 0.9.2
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
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/ngx-json-render) [](https://github.com/shteynu/ngx-json-render/actions/workflows/ci.yml) [](https://github.com/shteynu/ngx-json-render/blob/main/LICENSE)
|
|
4
4
|
|
|
5
|
-
Angular renderer for [json-render](https://github.com/vercel-labs/json-render)
|
|
5
|
+
Generative UI for Angular: a renderer for [json-render](https://github.com/vercel-labs/json-render). Give an LLM a catalog of your components, stream back a JSON spec, and render it as real Angular components. No `innerHTML`, no `eval`, no framework lock-in on the wire format.
|
|
6
6
|
|
|
7
7
|
Built on `@json-render/core` (the same spec format, expressions, state store, actions, and streaming compiler used by the React, Vue, Solid, and Svelte renderers) and idiomatic modern Angular: standalone components, signals, `OnPush` everywhere, and zoneless — no `NgZone`, no Zone.js.
|
|
8
8
|
|
|
@@ -57,12 +57,14 @@ npx skills add shteynu/ngx-json-render --skill ngx-json-render
|
|
|
57
57
|
|
|
58
58
|
The source is [`skills/ngx-json-render/SKILL.md`](https://github.com/shteynu/ngx-json-render/blob/main/skills/ngx-json-render/SKILL.md);
|
|
59
59
|
the Material catalog has one too (`--skill ngx-json-render-material`).
|
|
60
|
+
An agent that reads [llms.txt](https://llmstxt.org) instead can start from
|
|
61
|
+
<https://shteynu.github.io/ngx-json-render/llms.txt>.
|
|
60
62
|
|
|
61
63
|
## The shortest path: a ready-made catalog
|
|
62
64
|
|
|
63
65
|
Writing a catalog is the honest first step, but you do not have to take it to
|
|
64
66
|
see a spec render. [`ngx-json-render-material`](https://www.npmjs.com/package/ngx-json-render-material)
|
|
65
|
-
ships
|
|
67
|
+
ships 33 Angular Material components already registered, so a generated spec
|
|
66
68
|
renders with nothing else wired up:
|
|
67
69
|
|
|
68
70
|
```bash
|
|
@@ -119,7 +121,7 @@ against `@hashbrownai/angular` 0.6.1, as published on 2026-09-30:
|
|
|
119
121
|
| What the model emits | A json-render spec, streamed as RFC 6902 patches — the format the React, Vue, Svelte and Solid renderers read, so a catalog and a spec move between frameworks unchanged | Hashbrown's own JSON, generated against a schema built from the components you expose; read by Hashbrown's Angular and React clients |
|
|
120
122
|
| Server | Anything that streams text: the [AI SDK](https://ai-sdk.dev) in a few lines, or your own endpoint; `catalog.prompt()` writes the system prompt | An [AG-UI](https://docs.ag-ui.com) endpoint, built with Hashbrown's adapters (OpenAI, Anthropic, Google, Azure, Bedrock, Ollama) or your own mapping |
|
|
121
123
|
| Angular | 20, 21 and 22, each tested in CI | 22 only since 0.6 (0.5 supported 20 and 21) |
|
|
122
|
-
| Components | Your own, or
|
|
124
|
+
| Components | Your own, or 33 ready-made Angular Material ones ([`ngx-json-render-material`](https://www.npmjs.com/package/ngx-json-render-material)) | Your own (`exposeComponent`, UI kits) |
|
|
123
125
|
| Beyond rendering | Rendering-focused: state and two-way bindings in the spec, actions, visibility, repeat, watch, confirmation dialogs | An agent toolkit: client-side tools, a QuickJS sandbox for model-written code, shared agent state, interrupts, streaming Markdown |
|
|
124
126
|
| License | Apache-2.0 | MIT |
|
|
125
127
|
|
|
@@ -238,10 +238,10 @@ class JsonRenderDevtools {
|
|
|
238
238
|
this.events = null;
|
|
239
239
|
});
|
|
240
240
|
}
|
|
241
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
242
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
241
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JsonRenderDevtools, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
242
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: JsonRenderDevtools, isStandalone: true, selector: "json-render-devtools", inputs: { renderer: { classPropertyName: "renderer", publicName: "renderer", isSignal: true, isRequired: false, transformFunction: null }, spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: false, transformFunction: null }, catalog: { classPropertyName: "catalog", publicName: "catalog", isSignal: true, isRequired: false, transformFunction: null }, chat: { classPropertyName: "chat", publicName: "chat", isSignal: true, isRequired: false, transformFunction: null }, initialOpen: { classPropertyName: "initialOpen", publicName: "initialOpen", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, hotkey: { classPropertyName: "hotkey", publicName: "hotkey", isSignal: true, isRequired: false, transformFunction: null }, bufferSize: { classPropertyName: "bufferSize", publicName: "bufferSize", isSignal: true, isRequired: false, transformFunction: null }, reserveSpace: { classPropertyName: "reserveSpace", publicName: "reserveSpace", isSignal: true, isRequired: false, transformFunction: null }, allowDockToggle: { classPropertyName: "allowDockToggle", publicName: "allowDockToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { event: "event" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
243
243
|
}
|
|
244
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
244
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JsonRenderDevtools, decorators: [{
|
|
245
245
|
type: Component,
|
|
246
246
|
args: [{
|
|
247
247
|
selector: 'json-render-devtools',
|
|
@@ -256,14 +256,14 @@ class JrComponentTestHost {
|
|
|
256
256
|
parent = inject(Injector);
|
|
257
257
|
component = signal(null, ...(ngDevMode ? [{ debugName: "component" }] : /* istanbul ignore next */ []));
|
|
258
258
|
injector = signal(this.parent, ...(ngDevMode ? [{ debugName: "injector" }] : /* istanbul ignore next */ []));
|
|
259
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
260
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
259
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JrComponentTestHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
260
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: JrComponentTestHost, isStandalone: true, selector: "jr-component-test-host", ngImport: i0, template: `
|
|
261
261
|
@if (component(); as type) {
|
|
262
262
|
<ng-container *ngComponentOutlet="type; injector: injector()" />
|
|
263
263
|
}
|
|
264
264
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
265
265
|
}
|
|
266
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
266
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JrComponentTestHost, decorators: [{
|
|
267
267
|
type: Component,
|
|
268
268
|
args: [{
|
|
269
269
|
selector: 'jr-component-test-host',
|
|
@@ -420,8 +420,8 @@ class JrTestHost {
|
|
|
420
420
|
validationFunctions = signal(undefined, ...(ngDevMode ? [{ debugName: "validationFunctions" }] : /* istanbul ignore next */ []));
|
|
421
421
|
directives = signal(undefined, ...(ngDevMode ? [{ debugName: "directives" }] : /* istanbul ignore next */ []));
|
|
422
422
|
record = () => { };
|
|
423
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
424
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
423
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JrTestHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
424
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: JrTestHost, isStandalone: true, selector: "jr-test-host", ngImport: i0, template: `
|
|
425
425
|
<json-render
|
|
426
426
|
[spec]="spec()"
|
|
427
427
|
[registry]="registry()"
|
|
@@ -439,7 +439,7 @@ class JrTestHost {
|
|
|
439
439
|
/>
|
|
440
440
|
`, isInline: true, dependencies: [{ kind: "component", type: JsonRenderer, selector: "json-render", inputs: ["spec", "registry", "loading", "fallback", "validate", "renderLimits", "catalog", "state", "store", "handlers", "onAction", "navigate", "validationFunctions", "functions", "directives"], outputs: ["stateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
441
441
|
}
|
|
442
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
442
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JrTestHost, decorators: [{
|
|
443
443
|
type: Component,
|
|
444
444
|
args: [{
|
|
445
445
|
selector: 'jr-test-host',
|
|
@@ -47,10 +47,10 @@ class JsonRenderRootContext {
|
|
|
47
47
|
return undefined;
|
|
48
48
|
return typeof raw === 'function' ? { component: raw } : raw;
|
|
49
49
|
}
|
|
50
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
51
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
50
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JsonRenderRootContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
51
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JsonRenderRootContext });
|
|
52
52
|
}
|
|
53
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
53
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JsonRenderRootContext, decorators: [{
|
|
54
54
|
type: Injectable
|
|
55
55
|
}] });
|
|
56
56
|
|
|
@@ -284,10 +284,10 @@ class JsonRenderStateService {
|
|
|
284
284
|
listener(changes);
|
|
285
285
|
}
|
|
286
286
|
}
|
|
287
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
288
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
287
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JsonRenderStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
288
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JsonRenderStateService });
|
|
289
289
|
}
|
|
290
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
290
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JsonRenderStateService, decorators: [{
|
|
291
291
|
type: Injectable
|
|
292
292
|
}], ctorParameters: () => [] });
|
|
293
293
|
/**
|
|
@@ -538,10 +538,10 @@ class JsonRenderValidationService {
|
|
|
538
538
|
}
|
|
539
539
|
return allValid;
|
|
540
540
|
}
|
|
541
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
542
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
541
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JsonRenderValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
542
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JsonRenderValidationService });
|
|
543
543
|
}
|
|
544
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
544
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JsonRenderValidationService, decorators: [{
|
|
545
545
|
type: Injectable
|
|
546
546
|
}] });
|
|
547
547
|
/** Inject the validation service of the nearest `<json-render>` renderer. */
|
|
@@ -904,10 +904,10 @@ class JsonRenderActionsService {
|
|
|
904
904
|
this._loadingActions.set(next);
|
|
905
905
|
}
|
|
906
906
|
}
|
|
907
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
908
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
907
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JsonRenderActionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
908
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JsonRenderActionsService });
|
|
909
909
|
}
|
|
910
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
910
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JsonRenderActionsService, decorators: [{
|
|
911
911
|
type: Injectable
|
|
912
912
|
}] });
|
|
913
913
|
/** Inject the actions service of the nearest `<json-render>` renderer. */
|
|
@@ -1031,8 +1031,8 @@ class JrConfirmDialog {
|
|
|
1031
1031
|
cancel.focus();
|
|
1032
1032
|
}
|
|
1033
1033
|
}
|
|
1034
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
1035
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.
|
|
1034
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JrConfirmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1035
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.25", type: JrConfirmDialog, isStandalone: true, selector: "jr-confirm-dialog", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { confirmed: "confirmed", cancelled: "cancelled" }, host: { listeners: { "keydown.escape": "cancelled.emit()" } }, viewQueries: [{ propertyName: "cancelButton", first: true, predicate: ["cancel"], descendants: true, isSignal: true }, { propertyName: "confirmButton", first: true, predicate: ["confirm"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
1036
1036
|
<div class="jr-confirm-scrim" (click)="cancelled.emit()">
|
|
1037
1037
|
<div
|
|
1038
1038
|
class="jr-confirm-panel"
|
|
@@ -1063,7 +1063,7 @@ class JrConfirmDialog {
|
|
|
1063
1063
|
</div>
|
|
1064
1064
|
`, isInline: true, styles: [":host{--jr-confirm-scrim-default: rgba(0, 0, 0, .5);--jr-confirm-surface-default: #ffffff;--jr-confirm-ink-default: #111827;--jr-confirm-muted-default: #6b7280;--jr-confirm-border-default: #d1d5db;--jr-confirm-accent-default: #3b82f6;--jr-confirm-danger-default: #dc2626;--jr-confirm-on-accent-default: #ffffff}@media(prefers-color-scheme:dark){:host{--jr-confirm-scrim-default: rgba(0, 0, 0, .65);--jr-confirm-surface-default: #1f2937;--jr-confirm-ink-default: #f3f4f6;--jr-confirm-muted-default: #9ca3af;--jr-confirm-border-default: #4b5563;--jr-confirm-accent-default: #60a5fa;--jr-confirm-danger-default: #f87171;--jr-confirm-on-accent-default: #111827}}.jr-confirm-scrim{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background-color:var(--jr-confirm-scrim, var(--jr-confirm-scrim-default))}.jr-confirm-panel{width:100%;max-width:400px;padding:24px;border-radius:var(--jr-confirm-radius, 8px);background-color:var(--jr-confirm-surface, var(--jr-confirm-surface-default));color:var(--jr-confirm-ink, var(--jr-confirm-ink-default));box-shadow:0 20px 25px -5px #00000040}.jr-confirm-title{margin:0 0 8px;font-size:18px;font-weight:600}.jr-confirm-message{margin:0 0 24px;color:var(--jr-confirm-muted, var(--jr-confirm-muted-default))}.jr-confirm-actions{display:flex;gap:12px;justify-content:flex-end}.jr-confirm-actions button{padding:8px 16px;border-radius:6px;font:inherit;cursor:pointer}.jr-confirm-cancel{border:1px solid var(--jr-confirm-border, var(--jr-confirm-border-default));background-color:transparent;color:inherit}.jr-confirm-confirm{border:none;background-color:var(--jr-confirm-accent, var(--jr-confirm-accent-default));color:var(--jr-confirm-on-accent, var(--jr-confirm-on-accent-default))}.jr-confirm-confirm.jr-confirm-danger{background-color:var(--jr-confirm-danger, var(--jr-confirm-danger-default))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1065
1065
|
}
|
|
1066
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
1066
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JrConfirmDialog, decorators: [{
|
|
1067
1067
|
type: Component,
|
|
1068
1068
|
args: [{ selector: 'jr-confirm-dialog', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1069
1069
|
'(keydown.escape)': 'cancelled.emit()',
|
|
@@ -2349,8 +2349,8 @@ class JrElement {
|
|
|
2349
2349
|
bound: true,
|
|
2350
2350
|
};
|
|
2351
2351
|
}
|
|
2352
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2353
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2352
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JrElement, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2353
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: JrElement, isStandalone: true, selector: "jr-element", inputs: { elementKey: { classPropertyName: "elementKey", publicName: "elementKey", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
2354
2354
|
@if (!refusal() && rawElement() && visible() && component()) {
|
|
2355
2355
|
@if (devtoolsKey(); as dk) {
|
|
2356
2356
|
<span [attr.data-jr-key]="dk" style="display: contents">
|
|
@@ -2362,7 +2362,7 @@ class JrElement {
|
|
|
2362
2362
|
}
|
|
2363
2363
|
`, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2364
2364
|
}
|
|
2365
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2365
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JrElement, decorators: [{
|
|
2366
2366
|
type: Component,
|
|
2367
2367
|
args: [{ selector: 'jr-element', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgComponentOutlet], template: `
|
|
2368
2368
|
@if (!refusal() && rawElement() && visible() && component()) {
|
|
@@ -2820,8 +2820,8 @@ class JsonRenderer {
|
|
|
2820
2820
|
parent: this.injector,
|
|
2821
2821
|
});
|
|
2822
2822
|
}, ...(ngDevMode ? [{ debugName: "confirmInjector" }] : /* istanbul ignore next */ []));
|
|
2823
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2824
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
2823
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JsonRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2824
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: JsonRenderer, isStandalone: true, selector: "json-render", inputs: { spec: { classPropertyName: "spec", publicName: "spec", isSignal: true, isRequired: true, transformFunction: null }, registry: { classPropertyName: "registry", publicName: "registry", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: true, isRequired: false, transformFunction: null }, renderLimits: { classPropertyName: "renderLimits", publicName: "renderLimits", isSignal: true, isRequired: false, transformFunction: null }, catalog: { classPropertyName: "catalog", publicName: "catalog", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: false, transformFunction: null }, handlers: { classPropertyName: "handlers", publicName: "handlers", isSignal: true, isRequired: false, transformFunction: null }, onAction: { classPropertyName: "onAction", publicName: "onAction", isSignal: true, isRequired: false, transformFunction: null }, navigate: { classPropertyName: "navigate", publicName: "navigate", isSignal: true, isRequired: false, transformFunction: null }, validationFunctions: { classPropertyName: "validationFunctions", publicName: "validationFunctions", isSignal: true, isRequired: false, transformFunction: null }, functions: { classPropertyName: "functions", publicName: "functions", isSignal: true, isRequired: false, transformFunction: null }, directives: { classPropertyName: "directives", publicName: "directives", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange" }, providers: [
|
|
2825
2825
|
JsonRenderRootContext,
|
|
2826
2826
|
JsonRenderStateService,
|
|
2827
2827
|
JsonRenderValidationService,
|
|
@@ -2845,7 +2845,7 @@ class JsonRenderer {
|
|
|
2845
2845
|
}
|
|
2846
2846
|
`, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: JrElement, selector: "jr-element", inputs: ["elementKey"] }, { kind: "component", type: JrConfirmDialog, selector: "jr-confirm-dialog", inputs: ["config"], outputs: ["confirmed", "cancelled"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2847
2847
|
}
|
|
2848
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2848
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JsonRenderer, decorators: [{
|
|
2849
2849
|
type: Component,
|
|
2850
2850
|
args: [{ selector: 'json-render', changeDetection: ChangeDetectionStrategy.OnPush, imports: [JrElement, JrConfirmDialog, NgComponentOutlet], providers: [
|
|
2851
2851
|
JsonRenderRootContext,
|
|
@@ -2882,12 +2882,12 @@ class JrRepeatScope {
|
|
|
2882
2882
|
item = input.required(...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
|
|
2883
2883
|
index = input.required(...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
|
|
2884
2884
|
basePath = input.required(...(ngDevMode ? [{ debugName: "basePath" }] : /* istanbul ignore next */ []));
|
|
2885
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
2886
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.
|
|
2885
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JrRepeatScope, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2886
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.25", type: JrRepeatScope, isStandalone: true, selector: "jr-repeat-scope", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
|
|
2887
2887
|
{ provide: REPEAT_SCOPE, useExisting: forwardRef(() => JrRepeatScope) },
|
|
2888
2888
|
], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2889
2889
|
}
|
|
2890
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
2890
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JrRepeatScope, decorators: [{
|
|
2891
2891
|
type: Component,
|
|
2892
2892
|
args: [{ selector: 'jr-repeat-scope', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
2893
2893
|
{ provide: REPEAT_SCOPE, useExisting: forwardRef(() => JrRepeatScope) },
|
|
@@ -3008,8 +3008,8 @@ class JrChildren {
|
|
|
3008
3008
|
}
|
|
3009
3009
|
return index;
|
|
3010
3010
|
}
|
|
3011
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
3012
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
3011
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JrChildren, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3012
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: JrChildren, isStandalone: true, selector: "jr-children", inputs: { slot: { classPropertyName: "slot", publicName: "slot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
3013
3013
|
@if (repeat()) {
|
|
3014
3014
|
@for (item of repeatItems(); track trackItem($index, item)) {
|
|
3015
3015
|
<jr-repeat-scope
|
|
@@ -3029,7 +3029,7 @@ class JrChildren {
|
|
|
3029
3029
|
}
|
|
3030
3030
|
`, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: JrElement, selector: "jr-element", inputs: ["elementKey"] }, { kind: "component", type: JrRepeatScope, selector: "jr-repeat-scope", inputs: ["item", "index", "basePath"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3031
3031
|
}
|
|
3032
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
3032
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: JrChildren, decorators: [{
|
|
3033
3033
|
type: Component,
|
|
3034
3034
|
args: [{ selector: 'jr-children', changeDetection: ChangeDetectionStrategy.OnPush, imports: [JrElement, JrRepeatScope], template: `
|
|
3035
3035
|
@if (repeat()) {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ngx-json-render",
|
|
3
|
-
"version": "0.9.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.9.2",
|
|
4
|
+
"description": "Generative UI for Angular: a json-render renderer that streams AI-generated JSON specs into real Angular components with signals.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
7
7
|
"json-render",
|
|
@@ -10,7 +10,9 @@
|
|
|
10
10
|
"ai",
|
|
11
11
|
"renderer",
|
|
12
12
|
"signals",
|
|
13
|
-
"server-driven-ui"
|
|
13
|
+
"server-driven-ui",
|
|
14
|
+
"sdui",
|
|
15
|
+
"dynamic-components"
|
|
14
16
|
],
|
|
15
17
|
"license": "Apache-2.0",
|
|
16
18
|
"repository": {
|
|
@@ -32,7 +32,7 @@ function ngAdd() {
|
|
|
32
32
|
'ngx-json-render is ready. Next: describe your components in a catalog,',
|
|
33
33
|
`register them, and render a spec with <json-render> — see ${README}`,
|
|
34
34
|
'No components of your own yet? `ng add ngx-json-render-material` adds',
|
|
35
|
-
'
|
|
35
|
+
'33 ready-made Angular Material ones.',
|
|
36
36
|
].join('\n'));
|
|
37
37
|
return (0, schematics_1.chain)(rules);
|
|
38
38
|
};
|