@json-render/react-native 0.8.0 → 0.9.1

package/dist/index.mjs

@@ -7,76 +7,115 @@ import {
   schema
 } from "./chunk-T27PQA6P.mjs";
 
-// src/contexts/state.tsx
+// ../react-state/dist/index.mjs
 import {
   createContext,
   useContext,
-  useState,
   useCallback,
-  useMemo,
   useEffect,
-  useRef
+  useMemo,
+  useRef,
+  useSyncExternalStore
 } from "react";
-import { getByPath, setByPath } from "@json-render/core";
+import {
+  getByPath,
+  createStateStore
+} from "@json-render/core";
+import { flattenToPointers } from "@json-render/core/store-utils";
 import { jsx } from "react/jsx-runtime";
 var StateContext = createContext(null);
+function computeInitialFlat(isControlled, initialState) {
+  if (isControlled) return null;
+  if (Object.keys(initialState).length === 0) return {};
+  return flattenToPointers(initialState);
+}
 function StateProvider({
+  store: externalStore,
   initialState = {},
   onStateChange,
   children
 }) {
-  const [state, setStateInternal] = useState(initialState);
-  const stateRef = useRef(state);
-  stateRef.current = state;
-  const initialStateJsonRef = useRef(JSON.stringify(initialState));
+  const internalStoreRef = useRef(void 0);
+  if (!externalStore && !internalStoreRef.current) {
+    internalStoreRef.current = createStateStore(initialState);
+  }
+  const store = externalStore ?? internalStoreRef.current;
+  const storeRef = useRef(store);
+  storeRef.current = store;
+  const isControlledRef = useRef(!!externalStore);
+  isControlledRef.current = !!externalStore;
+  const initialModeRef = useRef(externalStore ? "controlled" : "uncontrolled");
+  const modeWarnedRef = useRef(false);
+  if (process.env.NODE_ENV !== "production") {
+    const currentMode = externalStore ? "controlled" : "uncontrolled";
+    if (currentMode !== initialModeRef.current && !modeWarnedRef.current) {
+      modeWarnedRef.current = true;
+      console.warn(
+        `StateProvider: switching from ${initialModeRef.current} to ${currentMode} mode is not supported.`
+      );
+    }
+  }
+  const prevInitialStateRef = useRef(initialState);
+  const prevFlatRef = useRef(
+    computeInitialFlat(!!externalStore, initialState)
+  );
   useEffect(() => {
-    const newJson = JSON.stringify(initialState);
-    if (newJson !== initialStateJsonRef.current) {
-      initialStateJsonRef.current = newJson;
-      if (initialState && Object.keys(initialState).length > 0) {
-        setStateInternal((prev) => ({ ...prev, ...initialState }));
+    if (externalStore) return;
+    if (initialState === prevInitialStateRef.current) return;
+    prevInitialStateRef.current = initialState;
+    const nextFlat = initialState && Object.keys(initialState).length > 0 ? flattenToPointers(initialState) : {};
+    const prevFlat = prevFlatRef.current ?? {};
+    const allKeys = /* @__PURE__ */ new Set([
+      ...Object.keys(prevFlat),
+      ...Object.keys(nextFlat)
+    ]);
+    const updates = {};
+    for (const key of allKeys) {
+      if (prevFlat[key] !== nextFlat[key]) {
+        updates[key] = key in nextFlat ? nextFlat[key] : void 0;
       }
     }
-  }, [initialState]);
-  const get = useCallback(
-    (path) => getByPath(stateRef.current, path),
-    []
-  );
-  const set = useCallback(
-    (path, value2) => {
-      setStateInternal((prev) => {
-        const next = { ...prev };
-        setByPath(next, path, value2);
-        return next;
-      });
-      onStateChange?.(path, value2);
-    },
-    [onStateChange]
+    prevFlatRef.current = nextFlat;
+    if (Object.keys(updates).length > 0) {
+      store.update(updates);
+    }
+  }, [externalStore, initialState, store]);
+  const state = useSyncExternalStore(
+    store.subscribe,
+    store.getSnapshot,
+    store.getServerSnapshot ?? store.getSnapshot
   );
-  const update = useCallback(
-    (updates) => {
-      const entries = Object.entries(updates);
-      setStateInternal((prev) => {
-        const next = { ...prev };
-        for (const [path, value2] of entries) {
-          setByPath(next, path, value2);
+  const onStateChangeRef = useRef(onStateChange);
+  onStateChangeRef.current = onStateChange;
+  const set = useCallback((path, value2) => {
+    const s = storeRef.current;
+    const prev = s.getSnapshot();
+    s.set(path, value2);
+    if (!isControlledRef.current && s.getSnapshot() !== prev) {
+      onStateChangeRef.current?.([{ path, value: value2 }]);
+    }
+  }, []);
+  const update = useCallback((updates) => {
+    const s = storeRef.current;
+    const prev = s.getSnapshot();
+    s.update(updates);
+    if (!isControlledRef.current && s.getSnapshot() !== prev) {
+      const changes = [];
+      for (const [path, value2] of Object.entries(updates)) {
+        if (getByPath(prev, path) !== value2) {
+          changes.push({ path, value: value2 });
         }
-        return next;
-      });
-      for (const [path, value2] of entries) {
-        onStateChange?.(path, value2);
       }
-    },
-    [onStateChange]
-  );
+      if (changes.length > 0) {
+        onStateChangeRef.current?.(changes);
+      }
+    }
+  }, []);
+  const get = useCallback((path) => storeRef.current.get(path), []);
+  const getSnapshot = useCallback(() => storeRef.current.getSnapshot(), []);
   const value = useMemo(
-    () => ({
-      state,
-      get,
-      set,
-      update
-    }),
-    [state, get, set, update]
+    () => ({ state, get, set, update, getSnapshot }),
+    [state, get, set, update, getSnapshot]
   );
   return /* @__PURE__ */ jsx(StateContext.Provider, { value, children });
 }
@@ -146,7 +185,7 @@ function useIsVisible(condition) {
 import {
   createContext as createContext3,
   useContext as useContext3,
-  useState as useState2,
+  useState,
   useCallback as useCallback2,
   useMemo as useMemo3
 } from "react";
@@ -194,10 +233,10 @@ function ActionProvider({
   navigate,
   children
 }) {
-  const { state, get, set } = useStateStore();
-  const [handlers, setHandlers] = useState2(initialHandlers);
-  const [loadingActions, setLoadingActions] = useState2(/* @__PURE__ */ new Set());
-  const [pendingConfirmation, setPendingConfirmation] = useState2(null);
+  const { get, set, getSnapshot } = useStateStore();
+  const [handlers, setHandlers] = useState(initialHandlers);
+  const [loadingActions, setLoadingActions] = useState(/* @__PURE__ */ new Set());
+  const [pendingConfirmation, setPendingConfirmation] = useState(null);
   const registerHandler = useCallback2(
     (name, handler) => {
       setHandlers((prev) => ({ ...prev, [name]: handler }));
@@ -206,7 +245,7 @@ function ActionProvider({
   );
   const execute = useCallback2(
     async (binding) => {
-      const resolved = resolveAction(binding, state);
+      const resolved = resolveAction(binding, getSnapshot());
       if (resolved.action === "setState" && resolved.params) {
         const statePath = resolved.params.statePath;
         const value2 = resolved.params.value;
@@ -329,7 +368,7 @@ function ActionProvider({
         });
       }
     },
-    [state, handlers, get, set, navigate]
+    [handlers, get, set, getSnapshot, navigate]
   );
   const confirm = useCallback2(() => {
     pendingConfirmation?.resolve();
@@ -460,10 +499,10 @@ var styles = StyleSheet.create({
 });
 
 // src/contexts/validation.tsx
-import React4, {
+import React3, {
   createContext as createContext4,
   useContext as useContext4,
-  useState as useState3,
+  useState as useState2,
   useCallback as useCallback3,
   useMemo as useMemo4
 } from "react";
@@ -511,8 +550,8 @@ function ValidationProvider({
   children
 }) {
   const { state } = useStateStore();
-  const [fieldStates, setFieldStates] = useState3({});
-  const [fieldConfigs, setFieldConfigs] = useState3({});
+  const [fieldStates, setFieldStates] = useState2({});
+  const [fieldConfigs, setFieldConfigs] = useState2({});
   const registerField = useCallback3(
     (path, config) => {
       setFieldConfigs((prev) => {
@@ -618,7 +657,7 @@ function useFieldValidation(path, config) {
     clear: clearField,
     registerField
   } = useValidation();
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     if (config) {
       registerField(path, config);
     }
@@ -660,8 +699,11 @@ function useRepeatScope() {
   return useContext5(RepeatScopeContext);
 }
 
+// src/index.ts
+import { createStateStore as createStateStore2 } from "@json-render/core";
+
 // src/renderer.tsx
-import React6, {
+import React5, {
   useCallback as useCallback5,
   useMemo as useMemo5
 } from "react";
@@ -692,9 +734,9 @@ import {
 } from "react-native";
 
 // src/hooks.ts
-import { useState as useState4, useCallback as useCallback4, useRef as useRef2, useEffect as useEffect2 } from "react";
+import { useState as useState3, useCallback as useCallback4, useRef as useRef2, useEffect as useEffect2 } from "react";
 import {
-  setByPath as setByPath2,
+  setByPath,
   getByPath as getByPath2,
   removeByPath,
   validateSpec,
@@ -757,7 +799,7 @@ function setSpecValue(newSpec, path, value) {
   if (path.startsWith("/state/")) {
     if (!newSpec.state) newSpec.state = {};
     const statePath = path.slice("/state".length);
-    setByPath2(newSpec.state, statePath, value);
+    setByPath(newSpec.state, statePath, value);
     return;
   }
   if (path.startsWith("/elements/")) {
@@ -771,7 +813,7 @@ function setSpecValue(newSpec, path, value) {
       if (element) {
         const propPath = "/" + pathParts.slice(1).join("/");
         const newElement = { ...element };
-        setByPath2(
+        setByPath(
           newElement,
           propPath,
           value
@@ -855,10 +897,10 @@ function useUIStream({
   validate: enableValidation = false,
   maxRetries = 5
 }) {
-  const [spec, setSpec] = useState4(null);
-  const [isStreaming, setIsStreaming] = useState4(false);
-  const [error, setError] = useState4(null);
-  const [rawLines, setRawLines] = useState4([]);
+  const [spec, setSpec] = useState3(null);
+  const [isStreaming, setIsStreaming] = useState3(false);
+  const [error, setError] = useState3(null);
+  const [rawLines, setRawLines] = useState3([]);
   const abortControllerRef = useRef2(null);
   const stop = useCallback4(() => {
     abortControllerRef.current?.abort();
@@ -1891,7 +1933,7 @@ var modalStyles = StyleSheet2.create({
 
 // src/renderer.tsx
 import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-var ElementErrorBoundary = class extends React6.Component {
+var ElementErrorBoundary = class extends React5.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false };
@@ -1913,7 +1955,7 @@ var ElementErrorBoundary = class extends React6.Component {
     return this.props.children;
   }
 };
-var ElementRenderer = React6.memo(function ElementRenderer2({
+var ElementRenderer = React5.memo(function ElementRenderer2({
   element,
   spec,
   registry,
@@ -1923,6 +1965,7 @@ var ElementRenderer = React6.memo(function ElementRenderer2({
   const repeatScope = useRepeatScope();
   const { ctx } = useVisibility();
   const { execute } = useActions();
+  const { getSnapshot } = useStateStore();
   const fullCtx = useMemo5(
     () => repeatScope ? {
       ...ctx,
@@ -1935,23 +1978,27 @@ var ElementRenderer = React6.memo(function ElementRenderer2({
   const isVisible = element.visible === void 0 ? true : evaluateVisibility2(element.visible, fullCtx);
   const onBindings = element.on;
   const emit = useCallback5(
-    (eventName) => {
+    async (eventName) => {
       const binding = onBindings?.[eventName];
       if (!binding) return;
       const actionBindings = Array.isArray(binding) ? binding : [binding];
       for (const b of actionBindings) {
         if (!b.params) {
-          execute(b);
+          await execute(b);
           continue;
         }
+        const liveCtx = {
+          ...fullCtx,
+          stateModel: getSnapshot()
+        };
         const resolved = {};
         for (const [key, val] of Object.entries(b.params)) {
-          resolved[key] = resolveActionParam(val, fullCtx);
+          resolved[key] = resolveActionParam(val, liveCtx);
         }
-        execute({ ...b, params: resolved });
+        await execute({ ...b, params: resolved });
       }
     },
-    [onBindings, execute, fullCtx]
+    [onBindings, execute, fullCtx, getSnapshot]
   );
   if (!isVisible) {
     return null;
@@ -2089,6 +2136,7 @@ function Renderer({
 }
 function JSONUIProvider({
   registry,
+  store,
   initialState,
   handlers,
   navigate,
@@ -2096,10 +2144,18 @@ function JSONUIProvider({
   onStateChange,
   children
 }) {
-  return /* @__PURE__ */ jsx7(StateProvider, { initialState, onStateChange, children: /* @__PURE__ */ jsx7(VisibilityProvider, { children: /* @__PURE__ */ jsx7(ActionProvider, { handlers, navigate, children: /* @__PURE__ */ jsxs3(ValidationProvider, { customFunctions: validationFunctions, children: [
-    children,
-    /* @__PURE__ */ jsx7(ConfirmationDialogManager, {})
-  ] }) }) }) });
+  return /* @__PURE__ */ jsx7(
+    StateProvider,
+    {
+      store,
+      initialState,
+      onStateChange,
+      children: /* @__PURE__ */ jsx7(VisibilityProvider, { children: /* @__PURE__ */ jsx7(ActionProvider, { handlers, navigate, children: /* @__PURE__ */ jsxs3(ValidationProvider, { customFunctions: validationFunctions, children: [
+        children,
+        /* @__PURE__ */ jsx7(ConfirmationDialogManager, {})
+      ] }) }) })
+    }
+  );
 }
 function ConfirmationDialogManager() {
   const { pendingConfirmation, confirm, cancel } = useActions();
@@ -2164,6 +2220,7 @@ function createRenderer(catalog, components) {
   const registry = components;
   return function CatalogRenderer({
     spec,
+    store,
     state,
     onAction,
     onStateChange,
@@ -2179,18 +2236,26 @@ function createRenderer(catalog, components) {
         has: () => true
       }
     ) : void 0;
-    return /* @__PURE__ */ jsx7(StateProvider, { initialState: state, onStateChange, children: /* @__PURE__ */ jsx7(VisibilityProvider, { children: /* @__PURE__ */ jsx7(ActionProvider, { handlers: actionHandlers, children: /* @__PURE__ */ jsxs3(ValidationProvider, { children: [
-      /* @__PURE__ */ jsx7(
-        Renderer,
-        {
-          spec,
-          registry,
-          loading,
-          fallback
-        }
-      ),
-      /* @__PURE__ */ jsx7(ConfirmationDialogManager, {})
-    ] }) }) }) });
+    return /* @__PURE__ */ jsx7(
+      StateProvider,
+      {
+        store,
+        initialState: state,
+        onStateChange,
+        children: /* @__PURE__ */ jsx7(VisibilityProvider, { children: /* @__PURE__ */ jsx7(ActionProvider, { handlers: actionHandlers, children: /* @__PURE__ */ jsxs3(ValidationProvider, { children: [
+          /* @__PURE__ */ jsx7(
+            Renderer,
+            {
+              spec,
+              registry,
+              loading,
+              fallback
+            }
+          ),
+          /* @__PURE__ */ jsx7(ConfirmationDialogManager, {})
+        ] }) }) })
+      }
+    );
   };
 }
 export {
@@ -2204,6 +2269,7 @@ export {
   VisibilityProvider,
   createRenderer,
   createStandardActionHandlers,
+  createStateStore2 as createStateStore,
   defineRegistry,
   elementTreeSchema,
   flatToTree,