@json-render/solid 0.18.0 → 0.19.0

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as solid_js from 'solid-js';
 import { ParentProps, Accessor, JSX, Component } from 'solid-js';
-import { StateStore, StateModel, VisibilityCondition, VisibilityContext, ActionHandler, ResolvedAction, ActionBinding, ActionConfirm, ValidationFunction, ValidationResult, ValidationConfig, Catalog, InferCatalogComponents, InferComponentProps, InferCatalogActions, InferActionParams, UIElement, SchemaDefinition, Spec, ComputedFunction, FlatElement } from '@json-render/core';
+import { StateStore, StateModel, VisibilityCondition, VisibilityContext, ActionHandler, ResolvedAction, ActionBinding, ActionConfirm, ValidationFunction, ValidationResult, ValidationConfig, Catalog, InferCatalogComponents, InferComponentProps, InferCatalogActions, InferActionParams, UIElement, SchemaDefinition, Spec, ComputedFunction, DirectiveDefinition, FlatElement } from '@json-render/core';
 export { Spec, StateModel, StateStore, createStateStore } from '@json-render/core';
 export { ElementTreeSchema, ElementTreeSpec, SolidSchema, SolidSpec, elementTreeSchema, schema } from './schema.mjs';
 
@@ -278,6 +278,8 @@ interface JSONUIProviderProps {
     validationFunctions?: Record<string, (value: unknown, args?: Record<string, unknown>) => boolean>;
     /** Named functions for `$computed` expressions in props */
     functions?: Record<string, ComputedFunction>;
+    /** Custom directives for user-defined `$`-prefixed dynamic values */
+    directives?: DirectiveDefinition[];
     /** Callback when state changes (uncontrolled mode) */
     onStateChange?: (changes: Array<{
         path: string;
@@ -366,6 +368,8 @@ interface CreateRendererProps {
     }>) => void;
     /** Named functions for `$computed` expressions in props */
     functions?: Record<string, ComputedFunction>;
+    /** Custom directives for user-defined `$`-prefixed dynamic values */
+    directives?: DirectiveDefinition[];
     /** Whether the spec is currently loading/streaming */
     loading?: boolean;
     /** Fallback component for unknown types */

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as solid_js from 'solid-js';
 import { ParentProps, Accessor, JSX, Component } from 'solid-js';
-import { StateStore, StateModel, VisibilityCondition, VisibilityContext, ActionHandler, ResolvedAction, ActionBinding, ActionConfirm, ValidationFunction, ValidationResult, ValidationConfig, Catalog, InferCatalogComponents, InferComponentProps, InferCatalogActions, InferActionParams, UIElement, SchemaDefinition, Spec, ComputedFunction, FlatElement } from '@json-render/core';
+import { StateStore, StateModel, VisibilityCondition, VisibilityContext, ActionHandler, ResolvedAction, ActionBinding, ActionConfirm, ValidationFunction, ValidationResult, ValidationConfig, Catalog, InferCatalogComponents, InferComponentProps, InferCatalogActions, InferActionParams, UIElement, SchemaDefinition, Spec, ComputedFunction, DirectiveDefinition, FlatElement } from '@json-render/core';
 export { Spec, StateModel, StateStore, createStateStore } from '@json-render/core';
 export { ElementTreeSchema, ElementTreeSpec, SolidSchema, SolidSpec, elementTreeSchema, schema } from './schema.js';
 
@@ -278,6 +278,8 @@ interface JSONUIProviderProps {
     validationFunctions?: Record<string, (value: unknown, args?: Record<string, unknown>) => boolean>;
     /** Named functions for `$computed` expressions in props */
     functions?: Record<string, ComputedFunction>;
+    /** Custom directives for user-defined `$`-prefixed dynamic values */
+    directives?: DirectiveDefinition[];
     /** Callback when state changes (uncontrolled mode) */
     onStateChange?: (changes: Array<{
         path: string;
@@ -366,6 +368,8 @@ interface CreateRendererProps {
     }>) => void;
     /** Named functions for `$computed` expressions in props */
     functions?: Record<string, ComputedFunction>;
+    /** Custom directives for user-defined `$`-prefixed dynamic values */
+    directives?: DirectiveDefinition[];
     /** Whether the spec is currently loading/streaming */
     loading?: boolean;
     /** Fallback component for unknown types */

package/dist/index.js

@@ -835,6 +835,10 @@ var FunctionsContext = (0, import_solid_js6.createContext)(EMPTY_FUNCTIONS);
 function useFunctions() {
   return (0, import_solid_js6.useContext)(FunctionsContext) ?? EMPTY_FUNCTIONS;
 }
+var DirectivesContext = (0, import_solid_js6.createContext)(void 0);
+function useDirectives() {
+  return (0, import_solid_js6.useContext)(DirectivesContext);
+}
 function useDevtoolsActive() {
   const [active, setActive] = (0, import_solid_js6.createSignal)((0, import_core6.isDevtoolsActive)());
   const unsub = (0, import_core6.subscribeDevtoolsActive)(() => setActive((0, import_core6.isDevtoolsActive)()));
@@ -852,6 +856,7 @@ function ElementRenderer(props) {
   const stateStore = useStateStore();
   const getSnapshot = () => stateStore.getSnapshot();
   const functions = useFunctions();
+  const directives = useDirectives();
   const fullCtx = (0, import_solid_js6.createMemo)(() => {
     const repeatItem = repeatScope?.item;
     const repeatIndex = repeatScope?.index;
@@ -869,7 +874,8 @@ function ElementRenderer(props) {
       ...repeatBasePath !== void 0 ? {
         repeatBasePath
       } : {},
-      functions
+      functions,
+      directives
     };
   });
   const isVisible = (0, import_solid_js6.createMemo)(() => props.element.visible === void 0 ? true : (0, import_core6.evaluateVisibility)(props.element.visible, fullCtx()));
@@ -1205,6 +1211,7 @@ function Renderer(props) {
   });
 }
 function JSONUIProvider(props) {
+  const directiveRegistry = (0, import_solid_js6.createMemo)(() => props.directives ? (0, import_core6.createDirectiveRegistry)(props.directives) : void 0);
   return (0, import_web18.createComponent)(StateProvider, {
     get store() {
       return props.store;
@@ -1236,7 +1243,14 @@ function JSONUIProvider(props) {
                       return props.functions ?? EMPTY_FUNCTIONS;
                     },
                     get children() {
-                      return [(0, import_web17.memo)(() => props.children), (0, import_web18.createComponent)(ConfirmationDialogManager, {})];
+                      return (0, import_web18.createComponent)(DirectivesContext.Provider, {
+                        get value() {
+                          return directiveRegistry();
+                        },
+                        get children() {
+                          return [(0, import_web17.memo)(() => props.children), (0, import_web18.createComponent)(ConfirmationDialogManager, {})];
+                        }
+                      });
                     }
                   });
                 }
@@ -1322,6 +1336,7 @@ function defineRegistry(_catalog, options) {
 function createRenderer(catalog, components) {
   const registry = components;
   return function CatalogRenderer(props) {
+    const directiveRegistry = (0, import_solid_js6.createMemo)(() => props.directives ? (0, import_core6.createDirectiveRegistry)(props.directives) : void 0);
     const actionHandlers = () => props.onAction ? new Proxy({}, {
       get: (_target, prop) => {
         return (params) => props.onAction(prop, params);
@@ -1353,18 +1368,25 @@ function createRenderer(catalog, components) {
                         return props.functions ?? EMPTY_FUNCTIONS;
                       },
                       get children() {
-                        return [(0, import_web18.createComponent)(Renderer, {
-                          get spec() {
-                            return props.spec;
-                          },
-                          registry,
-                          get loading() {
-                            return props.loading;
+                        return (0, import_web18.createComponent)(DirectivesContext.Provider, {
+                          get value() {
+                            return directiveRegistry();
                           },
-                          get fallback() {
-                            return props.fallback;
+                          get children() {
+                            return [(0, import_web18.createComponent)(Renderer, {
+                              get spec() {
+                                return props.spec;
+                              },
+                              registry,
+                              get loading() {
+                                return props.loading;
+                              },
+                              get fallback() {
+                                return props.fallback;
+                              }
+                            }), (0, import_web18.createComponent)(ConfirmationDialogManager, {})];
                           }
-                        }), (0, import_web18.createComponent)(ConfirmationDialogManager, {})];
+                        });
                       }
                     });
                   }