ngx-json-render 0.7.5 → 0.7.7

package/README.md

@@ -161,7 +161,12 @@ export const catalog = schema.createCatalog({
 
 ```ts
 import { Component } from '@angular/core';
-import { JrChildren, injectRenderContext } from 'ngx-json-render';
+import {
+  type InferComponentProps,
+  JrChildren,
+  injectRenderContext,
+} from 'ngx-json-render';
+import type { catalog } from './catalog';
 
 @Component({
   selector: 'app-card',
@@ -174,7 +179,8 @@ import { JrChildren, injectRenderContext } from 'ngx-json-render';
   `,
 })
 export class CardComponent {
-  readonly ctx = injectRenderContext<{ title?: string }>();
+  readonly ctx =
+    injectRenderContext<InferComponentProps<typeof catalog, 'Card'>>();
 }
 
 @Component({
@@ -182,10 +188,13 @@ export class CardComponent {
   template: `<button (click)="ctx.emit('press')">{{ ctx.props().label }}</button>`,
 })
 export class ButtonComponent {
-  readonly ctx = injectRenderContext<{ label: string }>();
+  readonly ctx =
+    injectRenderContext<InferComponentProps<typeof catalog, 'Button'>>();
 }
 ```
 
+`InferComponentProps` reads a component's props type off its Zod schema in the catalog, so the component and the catalog cannot drift apart; a hand-written type such as `injectRenderContext<{ label: string }>()` works too. One mismatch to know: a `.default()` field comes out required, but the renderer passes props as the spec wrote them and applies no Zod defaults, so keep such a field optional or fall back in the template.
+
 `<jr-children />` renders the element's children where you place it — like a `router-outlet` for the spec tree. Use `<jr-children slot="header" />` for named slots.
 
 **3. Build the registry and render:**
@@ -859,7 +868,7 @@ is how you tell the two apart. One dialog is open at a time: an action with a
 `confirm` dispatched while another is waiting cancels the waiting one, so its
 `execute()` rejects the same way.
 
-Registry & schema: `defineRegistry`, `createStoreSetState`, `schema`.
+Registry & schema: `defineRegistry`, `createStoreSetState`, `schema`, and the catalog types `InferComponentProps`, `InferCatalogComponents`, `InferActionParams` (re-exported from core).
 
 Testing (`ngx-json-render/testing`): `renderSpec`, `renderComponent`, `recordedTransport`, `specStream`, `usageLine`.
 

package/fesm2022/ngx-json-render.mjs

@@ -1,9 +1,8 @@
 import { NgComponentOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, computed, untracked, effect, isDevMode, DestroyRef, InjectionToken, input, output, viewChild, afterNextRender, ChangeDetectionStrategy, Component, Injector, forwardRef } from '@angular/core';
+import { signal, Injectable, isDevMode, inject, computed, untracked, effect, DestroyRef, InjectionToken, input, output, viewChild, afterNextRender, ChangeDetectionStrategy, Component, Injector, forwardRef } from '@angular/core';
 import { createStateStore, getByPath, runValidation, resolveAction, nextActionDispatchId, notifyActionDispatch, notifyActionSettle, executeAction, isDevtoolsActive, subscribeDevtoolsActive, resolveRepeatStatePath, evaluateVisibility, resolveElementProps, resolveBindings, resolveActionParam, autoFixSpec, validateSpec, createDirectiveRegistry, resolveRepeatItemStatePath, removeByPath, addByPath, setByPath, SPEC_DATA_PART_TYPE, nestedToFlat, createMixedStreamParser, defineSchema } from '@json-render/core';
 export { autoFixSpec, createStateStore, formatSpecIssues, nestedToFlat, validateSpec } from '@json-render/core';
-import { flattenToPointers } from '@json-render/core/store-utils';
 
 const EMPTY = signal(undefined, ...(ngDevMode ? [{ debugName: "EMPTY" }] : /* istanbul ignore next */ []));
 /**
@@ -49,6 +48,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
             type: Injectable
         }] });
 
+/** Nesting below this is kept as one leaf, the same cut-off core uses. */
+const MAX_FLATTEN_DEPTH = 20;
+/** Escape one key for a JSON Pointer: `~` → `~0`, `/` → `~1`. */
+function escapePointerSegment(key) {
+    return key.replace(/~/g, '~0').replace(/\//g, '~1');
+}
+/**
+ * Flatten plain objects into a `{ pointer: leaf }` map; arrays and anything
+ * that is not a plain object are leaves.
+ *
+ * Core's `flattenToPointers` does the same but joins keys unescaped, so a key
+ * such as `a/b` comes back as `/a/b` and a store write puts it at `a` → `b`.
+ * Every path built here is escaped, so it reads back the key it came from.
+ */
+function flattenToPointers(obj) {
+    const result = {};
+    const seen = new Set();
+    let warned = false;
+    const walk = (value, prefix, depth) => {
+        for (const [key, child] of Object.entries(value)) {
+            const pointer = `${prefix}/${escapePointerSegment(key)}`;
+            if (isPlainObject(child) && !seen.has(child)) {
+                if (depth < MAX_FLATTEN_DEPTH) {
+                    seen.add(child);
+                    walk(child, pointer, depth + 1);
+                    continue;
+                }
+                if (isDevMode() && !warned) {
+                    warned = true;
+                    console.warn(`[ngx-json-render] state nested deeper than ${MAX_FLATTEN_DEPTH} levels is treated as one value.`);
+                }
+            }
+            result[pointer] = child;
+        }
+    };
+    walk(obj, '', 0);
+    return result;
+}
+function isPlainObject(value) {
+    return (value !== null &&
+        typeof value === 'object' &&
+        Object.getPrototypeOf(value) === Object.prototype);
+}
+
 /**
  * The state store of a `<json-render>` subtree.
  *
@@ -222,7 +265,7 @@ function diffState(prev, next) {
             changes.push({ path, value: b });
         const keys = new Set([...childKeys(a), ...childKeys(b)]);
         for (const key of keys) {
-            walk(child(a, key), child(b, key), `${path}/${escapePointer(key)}`);
+            walk(child(a, key), child(b, key), `${path}/${escapePointerSegment(key)}`);
         }
     };
     walk(prev, next, '');
@@ -236,9 +279,6 @@ function child(value, key) {
         ? value[key]
         : undefined;
 }
-function escapePointer(key) {
-    return key.replace(/~/g, '~0').replace(/\//g, '~1');
-}
 /**
  * Inject the state store of the nearest `<json-render>` renderer.
  * Must be called from within the renderer's subtree (e.g. a catalog
@@ -410,17 +450,9 @@ class JsonRenderValidationService {
     /** Validate a single field and record the result. */
     validate(path, config) {
         const currentState = this.state.getSnapshot();
-        const segments = path.split('/').filter(Boolean);
-        let value = currentState;
-        for (const seg of segments) {
-            if (value != null && typeof value === 'object') {
-                value = value[seg];
-            }
-            else {
-                value = undefined;
-                break;
-            }
-        }
+        // The store's own pointer walk, so `~1` and `~0` mean what they mean
+        // everywhere else a path is read.
+        const value = getByPath(currentState, path);
         const result = runValidation(config, {
             value,
             stateModel: currentState,