@legendapp/state 3.0.0-beta.30 → 3.0.0-beta.32

package/README.md

@@ -72,7 +72,7 @@ Legend-State includes a powerful [sync and persistence system](../../usage/persi
 Local persistence plugins for the browser and React Native are included, with sync plugins for [Keel](https://www.keel.so), [Supabase](https://www.supabase.com), [TanStack Query](https://tanstack.com/query), and `fetch`.
 
 ```js
-const state$ = observable(
+const state$ = observable({
     users: syncedKeel({
         list: queries.getUsers,
         create: mutations.createUsers,
@@ -87,7 +87,7 @@ const state$ = observable(
     }),
     // direct link to my user within the users observable
     me: () => state$.users['myuid']
-)
+})
 
 observe(() => {
     // get() activates through to state$.users and starts syncing.

package/index.d.mts

@@ -111,6 +111,7 @@ declare function setNodeValue(node: NodeInfo, newValue: any): {
     parentValue: any;
 };
 declare function getNodeValue(node: NodeInfo): any;
+declare function getChildNode(node: NodeInfo, key: string, asFunction?: Function): NodeInfo;
 declare function ensureNodeValue(node: NodeInfo): any;
 declare function findIDKey(obj: unknown | undefined, node: NodeInfo): string | ((value: any) => string) | undefined;
 declare function getKeys(obj: Record<any, any> | Array<any> | undefined, isArr: boolean, isMap: boolean, isSet: boolean): string[];
@@ -148,7 +149,7 @@ interface Change {
 type RecordValue<T> = T extends Record<string, infer t> ? t : never;
 type ArrayValue<T> = T extends Array<infer t> ? t : never;
 type ObservableValue<T> = T extends Observable<infer t> ? t : never;
-type Selector<T> = ObservableParam<T> | ObservableEvent | (() => T) | T;
+type Selector<T> = ObservableParam<T> | ObservableEvent | (() => ObservableParam<T>) | (() => T) | T;
 type ClassConstructor<I, Args extends any[] = any[]> = new (...args: Args) => I;
 type ObservableListenerDispose = () => void;
 interface ObservableRoot {
@@ -304,6 +305,8 @@ declare function getProxy(node: NodeInfo, p?: string, asFunction?: Function): Ob
 declare function set(node: NodeInfo, newValue?: any): void;
 declare function get(node: NodeInfo, options?: TrackingType | GetOptions): any;
 declare function peek(node: NodeInfo): any;
+declare function deactivateNode(node: NodeInfo): void;
+declare function reactivateNode(node: NodeInfo, lazyFn: Function): void;
 declare function isObserved(node: NodeInfo): boolean;
 declare function shouldIgnoreUnobserved(node: NodeInfo, refreshFn: () => void): true | undefined;
 
@@ -411,10 +414,12 @@ declare function registerMiddleware(node: NodeInfo, type: MiddlewareEventType, h
 declare const internal: {
     createPreviousHandler: typeof createPreviousHandler;
     clone: typeof clone;
+    deactivateNode: typeof deactivateNode;
     deepMerge: typeof deepMerge;
     ensureNodeValue: typeof ensureNodeValue;
     findIDKey: typeof findIDKey;
     get: typeof get;
+    getChildNode: typeof getChildNode;
     getKeys: typeof getKeys;
     getNode: typeof getNode;
     getNodeValue: typeof getNodeValue;
@@ -442,6 +447,7 @@ declare const internal: {
     observableFns: Map<string, (node: NodeInfo, ...args: any[]) => any>;
     optimized: symbol;
     peek: typeof peek;
+    reactivateNode: typeof reactivateNode;
     registerMiddleware: typeof registerMiddleware;
     safeParse: typeof safeParse;
     safeStringify: typeof safeStringify;

package/index.d.ts

@@ -111,6 +111,7 @@ declare function setNodeValue(node: NodeInfo, newValue: any): {
     parentValue: any;
 };
 declare function getNodeValue(node: NodeInfo): any;
+declare function getChildNode(node: NodeInfo, key: string, asFunction?: Function): NodeInfo;
 declare function ensureNodeValue(node: NodeInfo): any;
 declare function findIDKey(obj: unknown | undefined, node: NodeInfo): string | ((value: any) => string) | undefined;
 declare function getKeys(obj: Record<any, any> | Array<any> | undefined, isArr: boolean, isMap: boolean, isSet: boolean): string[];
@@ -148,7 +149,7 @@ interface Change {
 type RecordValue<T> = T extends Record<string, infer t> ? t : never;
 type ArrayValue<T> = T extends Array<infer t> ? t : never;
 type ObservableValue<T> = T extends Observable<infer t> ? t : never;
-type Selector<T> = ObservableParam<T> | ObservableEvent | (() => T) | T;
+type Selector<T> = ObservableParam<T> | ObservableEvent | (() => ObservableParam<T>) | (() => T) | T;
 type ClassConstructor<I, Args extends any[] = any[]> = new (...args: Args) => I;
 type ObservableListenerDispose = () => void;
 interface ObservableRoot {
@@ -304,6 +305,8 @@ declare function getProxy(node: NodeInfo, p?: string, asFunction?: Function): Ob
 declare function set(node: NodeInfo, newValue?: any): void;
 declare function get(node: NodeInfo, options?: TrackingType | GetOptions): any;
 declare function peek(node: NodeInfo): any;
+declare function deactivateNode(node: NodeInfo): void;
+declare function reactivateNode(node: NodeInfo, lazyFn: Function): void;
 declare function isObserved(node: NodeInfo): boolean;
 declare function shouldIgnoreUnobserved(node: NodeInfo, refreshFn: () => void): true | undefined;
 
@@ -411,10 +414,12 @@ declare function registerMiddleware(node: NodeInfo, type: MiddlewareEventType, h
 declare const internal: {
     createPreviousHandler: typeof createPreviousHandler;
     clone: typeof clone;
+    deactivateNode: typeof deactivateNode;
     deepMerge: typeof deepMerge;
     ensureNodeValue: typeof ensureNodeValue;
     findIDKey: typeof findIDKey;
     get: typeof get;
+    getChildNode: typeof getChildNode;
     getKeys: typeof getKeys;
     getNode: typeof getNode;
     getNodeValue: typeof getNodeValue;
@@ -442,6 +447,7 @@ declare const internal: {
     observableFns: Map<string, (node: NodeInfo, ...args: any[]) => any>;
     optimized: symbol;
     peek: typeof peek;
+    reactivateNode: typeof reactivateNode;
     registerMiddleware: typeof registerMiddleware;
     safeParse: typeof safeParse;
     safeStringify: typeof safeStringify;

package/index.js

@@ -2007,11 +2007,14 @@ function checkProperty(value, key) {
     return value[key];
   }
 }
-function reactivateNode(node, lazyFn) {
+function deactivateNode(node) {
   var _a, _b;
   (_a = node.activatedObserveDispose) == null ? void 0 : _a.call(node);
   (_b = node.linkedToNodeDispose) == null ? void 0 : _b.call(node);
   node.activatedObserveDispose = node.linkedToNodeDispose = node.linkedToNode = void 0;
+}
+function reactivateNode(node, lazyFn) {
+  deactivateNode(node);
   node.lazyFn = lazyFn;
   node.lazy = true;
 }
@@ -2059,7 +2062,7 @@ function activateNodeFunction(node, lazyFn) {
     node.dirtyFn = refreshFn;
     globalState.dirtyNodes.add(node);
   }
-  node.activatedObserveDispose = observe(
+  const observeDispose = observe(
     () => {
       var _a, _b, _c, _d;
       if (isFirst) {
@@ -2162,6 +2165,10 @@ function activateNodeFunction(node, lazyFn) {
     },
     { fromComputed: true }
   );
+  node.activatedObserveDispose = () => {
+    observeDispose == null ? void 0 : observeDispose();
+    disposes.forEach((fn) => fn());
+  };
   return activatedValue;
 }
 function activateNodeBase(node, value) {
@@ -2448,10 +2455,12 @@ function syncState(obs) {
 var internal = {
   createPreviousHandler,
   clone,
+  deactivateNode,
   deepMerge,
   ensureNodeValue,
   findIDKey,
   get,
+  getChildNode,
   getKeys,
   getNode,
   getNodeValue,
@@ -2465,6 +2474,7 @@ var internal = {
   observableFns,
   optimized,
   peek,
+  reactivateNode,
   registerMiddleware,
   safeParse,
   safeStringify,

package/index.mjs

@@ -2005,11 +2005,14 @@ function checkProperty(value, key) {
     return value[key];
   }
 }
-function reactivateNode(node, lazyFn) {
+function deactivateNode(node) {
   var _a, _b;
   (_a = node.activatedObserveDispose) == null ? void 0 : _a.call(node);
   (_b = node.linkedToNodeDispose) == null ? void 0 : _b.call(node);
   node.activatedObserveDispose = node.linkedToNodeDispose = node.linkedToNode = void 0;
+}
+function reactivateNode(node, lazyFn) {
+  deactivateNode(node);
   node.lazyFn = lazyFn;
   node.lazy = true;
 }
@@ -2057,7 +2060,7 @@ function activateNodeFunction(node, lazyFn) {
     node.dirtyFn = refreshFn;
     globalState.dirtyNodes.add(node);
   }
-  node.activatedObserveDispose = observe(
+  const observeDispose = observe(
     () => {
       var _a, _b, _c, _d;
       if (isFirst) {
@@ -2160,6 +2163,10 @@ function activateNodeFunction(node, lazyFn) {
     },
     { fromComputed: true }
   );
+  node.activatedObserveDispose = () => {
+    observeDispose == null ? void 0 : observeDispose();
+    disposes.forEach((fn) => fn());
+  };
   return activatedValue;
 }
 function activateNodeBase(node, value) {
@@ -2446,10 +2453,12 @@ function syncState(obs) {
 var internal = {
   createPreviousHandler,
   clone,
+  deactivateNode,
   deepMerge,
   ensureNodeValue,
   findIDKey,
   get,
+  getChildNode,
   getKeys,
   getNode,
   getNodeValue,
@@ -2463,6 +2472,7 @@ var internal = {
   observableFns,
   optimized,
   peek,
+  reactivateNode,
   registerMiddleware,
   safeParse,
   safeStringify,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/state",
-  "version": "3.0.0-beta.30",
+  "version": "3.0.0-beta.32",
   "description": "legend-state",
   "sideEffects": false,
   "private": false,

package/react.js

@@ -411,38 +411,6 @@ function Switch({
   const child = children[useSelector(value)];
   return (_b = child ? child() : (_a = children["default"]) == null ? void 0 : _a.call(children)) != null ? _b : null;
 }
-function useObservable(initialValue, deps) {
-  var _a;
-  const ref = React.useRef({});
-  ref.current.value = initialValue;
-  const depsObs$ = deps ? useObservable(deps) : void 0;
-  if (!((_a = ref.current) == null ? void 0 : _a.obs$)) {
-    const value = depsObs$ ? state.isFunction(initialValue) && initialValue.length === 1 ? (p) => {
-      depsObs$.get();
-      return ref.current.value(p);
-    } : () => {
-      depsObs$.get();
-      return state.computeSelector(ref.current.value);
-    } : initialValue;
-    ref.current.obs$ = state.observable(value);
-  }
-  if (depsObs$) {
-    depsObs$.set(deps);
-  }
-  return ref.current.obs$;
-}
-
-// src/react/useComputed.ts
-function useComputed(get, set, deps) {
-  if (!deps && state.isArray(set)) {
-    deps = set;
-    set = void 0;
-  }
-  return useObservable(
-    set ? state.linked({ get, set: ({ value }) => set(value) }) : get,
-    deps
-  );
-}
 var useEffectOnce = (effect, deps) => {
   if (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") {
     const refDispose = React.useRef({ num: 0 });
@@ -471,6 +439,8 @@ var useEffectOnce = (effect, deps) => {
     React.useEffect(effect, deps);
   }
 };
+
+// src/react/useMount.ts
 function useMount(fn) {
   return useEffectOnce(() => {
     const ret = fn();
@@ -481,6 +451,54 @@ function useMount(fn) {
 }
 var useMountOnce = useMount;
 
+// src/react/useUnmount.ts
+function useUnmount(fn) {
+  return useMount(() => fn);
+}
+var useUnmountOnce = useUnmount;
+
+// src/react/useObservable.ts
+var { deactivateNode } = state.internal;
+function useObservable(initialValue, deps) {
+  var _a;
+  const ref = React.useRef({});
+  ref.current.value = initialValue;
+  const depsObs$ = deps ? useObservable(deps) : void 0;
+  if (!((_a = ref.current) == null ? void 0 : _a.obs$)) {
+    const value = depsObs$ ? state.isFunction(initialValue) && initialValue.length === 1 ? (p) => {
+      depsObs$.get();
+      return ref.current.value(p);
+    } : () => {
+      depsObs$.get();
+      return state.computeSelector(ref.current.value);
+    } : initialValue;
+    ref.current.obs$ = state.observable(value);
+  }
+  if (depsObs$) {
+    depsObs$.set(deps);
+  }
+  useUnmount(() => {
+    const obs = ref.current.obs$;
+    if (obs) {
+      const node = state.getNode(obs);
+      deactivateNode(node);
+    }
+  });
+  return ref.current.obs$;
+}
+
+// src/react/useComputed.ts
+function useComputed(get, set, deps) {
+  if (!deps && state.isArray(set)) {
+    deps = set;
+    set = void 0;
+  }
+  return useObservable(
+    set ? state.linked({ get, set: ({ value }) => set(value) }) : get,
+    deps
+  );
+}
+
 // src/react/useIsMounted.ts
 function useIsMounted() {
   const obs = useObservable(false);
@@ -500,14 +518,6 @@ function useObservableReducer(reducer, initializerArg, initializer) {
   };
   return [obs, dispatch];
 }
-
-// src/react/useUnmount.ts
-function useUnmount(fn) {
-  return useMount(() => fn);
-}
-var useUnmountOnce = useUnmount;
-
-// src/react/useObserve.ts
 function useObserve(selector, reactionOrOptions, options) {
   let reaction;
   if (state.isFunction(reactionOrOptions)) {
@@ -517,15 +527,15 @@ function useObserve(selector, reactionOrOptions, options) {
   }
   const deps = options == null ? void 0 : options.deps;
   const depsObs$ = deps ? useObservable(deps) : void 0;
-  if (depsObs$) {
-    depsObs$.set(deps);
-  }
   const ref = React.useRef({});
   ref.current.selector = deps ? () => {
     depsObs$ == null ? void 0 : depsObs$.get();
     return state.computeSelector(selector);
   } : selector;
   ref.current.reaction = reaction;
+  if (depsObs$) {
+    depsObs$.set(deps);
+  }
   if (!ref.current.dispose) {
     ref.current.dispose = state.observe(
       (e) => state.computeSelector(ref.current.selector, void 0, e),
@@ -549,13 +559,13 @@ function useObserveEffect(selector, reactionOrOptions, options) {
   } else {
     options = reactionOrOptions;
   }
+  const ref = React.useRef({ selector });
+  ref.current = { selector, reaction };
   const deps = options == null ? void 0 : options.deps;
   const depsObs$ = deps ? useObservable(deps) : void 0;
   if (depsObs$) {
     depsObs$.set(deps);
   }
-  const ref = React.useRef({ selector });
-  ref.current = { selector, reaction };
   useMountOnce(
     () => state.observe(
       (e) => {

package/react.mjs

@@ -1,4 +1,4 @@
-import { isFunction, isEmpty, observable, computeSelector, isArray, isMap, isObservableValueReady, linked, isPromise, observe, when, whenReady, internal, trackSelector, isPrimitive, isObservable } from '@legendapp/state';
+import { isFunction, isEmpty, observable, computeSelector, isArray, isMap, isObservableValueReady, isPromise, getNode as getNode$1, linked, observe, when, whenReady, internal, trackSelector, isPrimitive, isObservable } from '@legendapp/state';
 import React, { memo, forwardRef, createElement, useState, useContext, useMemo, useRef, useEffect, createContext, useCallback } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 import { enableReactive } from '@legendapp/state/react-reactive/enableReactive';
@@ -405,38 +405,6 @@ function Switch({
   const child = children[useSelector(value)];
   return (_b = child ? child() : (_a = children["default"]) == null ? void 0 : _a.call(children)) != null ? _b : null;
 }
-function useObservable(initialValue, deps) {
-  var _a;
-  const ref = useRef({});
-  ref.current.value = initialValue;
-  const depsObs$ = deps ? useObservable(deps) : void 0;
-  if (!((_a = ref.current) == null ? void 0 : _a.obs$)) {
-    const value = depsObs$ ? isFunction(initialValue) && initialValue.length === 1 ? (p) => {
-      depsObs$.get();
-      return ref.current.value(p);
-    } : () => {
-      depsObs$.get();
-      return computeSelector(ref.current.value);
-    } : initialValue;
-    ref.current.obs$ = observable(value);
-  }
-  if (depsObs$) {
-    depsObs$.set(deps);
-  }
-  return ref.current.obs$;
-}
-
-// src/react/useComputed.ts
-function useComputed(get, set, deps) {
-  if (!deps && isArray(set)) {
-    deps = set;
-    set = void 0;
-  }
-  return useObservable(
-    set ? linked({ get, set: ({ value }) => set(value) }) : get,
-    deps
-  );
-}
 var useEffectOnce = (effect, deps) => {
   if (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") {
     const refDispose = useRef({ num: 0 });
@@ -465,6 +433,8 @@ var useEffectOnce = (effect, deps) => {
     useEffect(effect, deps);
   }
 };
+
+// src/react/useMount.ts
 function useMount(fn) {
   return useEffectOnce(() => {
     const ret = fn();
@@ -475,6 +445,54 @@ function useMount(fn) {
 }
 var useMountOnce = useMount;
 
+// src/react/useUnmount.ts
+function useUnmount(fn) {
+  return useMount(() => fn);
+}
+var useUnmountOnce = useUnmount;
+
+// src/react/useObservable.ts
+var { deactivateNode } = internal;
+function useObservable(initialValue, deps) {
+  var _a;
+  const ref = useRef({});
+  ref.current.value = initialValue;
+  const depsObs$ = deps ? useObservable(deps) : void 0;
+  if (!((_a = ref.current) == null ? void 0 : _a.obs$)) {
+    const value = depsObs$ ? isFunction(initialValue) && initialValue.length === 1 ? (p) => {
+      depsObs$.get();
+      return ref.current.value(p);
+    } : () => {
+      depsObs$.get();
+      return computeSelector(ref.current.value);
+    } : initialValue;
+    ref.current.obs$ = observable(value);
+  }
+  if (depsObs$) {
+    depsObs$.set(deps);
+  }
+  useUnmount(() => {
+    const obs = ref.current.obs$;
+    if (obs) {
+      const node = getNode$1(obs);
+      deactivateNode(node);
+    }
+  });
+  return ref.current.obs$;
+}
+
+// src/react/useComputed.ts
+function useComputed(get, set, deps) {
+  if (!deps && isArray(set)) {
+    deps = set;
+    set = void 0;
+  }
+  return useObservable(
+    set ? linked({ get, set: ({ value }) => set(value) }) : get,
+    deps
+  );
+}
+
 // src/react/useIsMounted.ts
 function useIsMounted() {
   const obs = useObservable(false);
@@ -494,14 +512,6 @@ function useObservableReducer(reducer, initializerArg, initializer) {
   };
   return [obs, dispatch];
 }
-
-// src/react/useUnmount.ts
-function useUnmount(fn) {
-  return useMount(() => fn);
-}
-var useUnmountOnce = useUnmount;
-
-// src/react/useObserve.ts
 function useObserve(selector, reactionOrOptions, options) {
   let reaction;
   if (isFunction(reactionOrOptions)) {
@@ -511,15 +521,15 @@ function useObserve(selector, reactionOrOptions, options) {
   }
   const deps = options == null ? void 0 : options.deps;
   const depsObs$ = deps ? useObservable(deps) : void 0;
-  if (depsObs$) {
-    depsObs$.set(deps);
-  }
   const ref = useRef({});
   ref.current.selector = deps ? () => {
     depsObs$ == null ? void 0 : depsObs$.get();
     return computeSelector(selector);
   } : selector;
   ref.current.reaction = reaction;
+  if (depsObs$) {
+    depsObs$.set(deps);
+  }
   if (!ref.current.dispose) {
     ref.current.dispose = observe(
       (e) => computeSelector(ref.current.selector, void 0, e),
@@ -543,13 +553,13 @@ function useObserveEffect(selector, reactionOrOptions, options) {
   } else {
     options = reactionOrOptions;
   }
+  const ref = useRef({ selector });
+  ref.current = { selector, reaction };
   const deps = options == null ? void 0 : options.deps;
   const depsObs$ = deps ? useObservable(deps) : void 0;
   if (depsObs$) {
     depsObs$.set(deps);
   }
-  const ref = useRef({ selector });
-  ref.current = { selector, reaction };
   useMountOnce(
     () => observe(
       (e) => {

package/sync-plugins/crud.js

@@ -4,16 +4,18 @@ var state = require('@legendapp/state');
 var sync = require('@legendapp/state/sync');
 
 // src/sync-plugins/crud.ts
-var { clone, getKeys } = state.internal;
+var { clone, getKeys, setNodeValue, getChildNode } = state.internal;
 var { waitForSet, runWithRetry } = sync.internal;
 function transformOut(data, transform) {
   return transform ? transform(clone(data)) : data;
 }
-function ensureId(obj, fieldId, generateId) {
+function ensureId(obj, fieldId, generateId, node) {
   if (!obj[fieldId]) {
     obj[fieldId] = generateId();
+    if (node) {
+      setNodeValue(node, obj);
+    }
   }
-  return obj[fieldId];
 }
 function computeLastSync(data, fieldUpdatedAt, fieldCreatedAt) {
   let newLastSync = 0;
@@ -210,11 +212,11 @@ function syncedCrud(props) {
       const { path, prevAtPath, valueAtPath, pathTypes } = change;
       if (asType === "value") {
         if (value) {
-          let id = value == null ? void 0 : value[fieldId];
           let isCreate = fieldCreatedAt ? !value[fieldCreatedAt] : !prevAtPath;
-          if (state.isNullOrUndefined(id) && generateId) {
-            id = ensureId(value, fieldId, generateId);
+          if (state.isNullOrUndefined(value[fieldId]) && generateId) {
+            ensureId(value, fieldId, generateId, node);
           }
+          const id = value[fieldId];
           if (!state.isNullOrUndefined(id)) {
             changesById.set(id, change);
             if (pendingCreates.has(id)) {
@@ -253,6 +255,14 @@ function syncedCrud(props) {
       } else {
         let itemsChanged = [];
         if (path.length === 0) {
+          if (asArray && generateId) {
+            for (let i = 0; i < valueAtPath.length; i++) {
+              const value2 = valueAtPath[i];
+              if (value2 && !value2[fieldId]) {
+                ensureId(value2, fieldId, generateId, getChildNode(node, i + ""));
+              }
+            }
+          }
           const valueAsObject = asArray ? arrayToRecord(valueAtPath, fieldId) : valueAtPath;
           const prevAsObject = asArray ? arrayToRecord(prevAtPath, fieldId) : prevAtPath;
           const keys = getKeys(valueAsObject, false, asMap, false);
@@ -289,6 +299,9 @@ function syncedCrud(props) {
               changesById.set(prevAtPath[fieldId], change);
             }
           } else {
+            if (generateId) {
+              ensureId(itemValue, fieldId, generateId, getChildNode(node, itemKey + ""));
+            }
             const previous = state.setAtPath(
               clone(itemValue),
               path.slice(1),
@@ -301,9 +314,6 @@ function syncedCrud(props) {
         itemsChanged == null ? void 0 : itemsChanged.forEach(([item, prev, fullValue]) => {
           const isCreate = !pendingCreates.has(item[fieldId]) && (fieldCreatedAt ? !item[fieldCreatedAt] && !(prev == null ? void 0 : prev[fieldCreatedAt]) : fieldUpdatedAt ? !item[fieldUpdatedAt] && !(prev == null ? void 0 : prev[fieldCreatedAt]) : state.isNullOrUndefined(prev));
           if (isCreate) {
-            if (generateId) {
-              ensureId(item, fieldId, generateId);
-            }
             if (!item[fieldId]) {
               console.error("[legend-state]: added item without an id");
             }

package/sync-plugins/crud.mjs

@@ -2,16 +2,18 @@ import { isPromise, isNullOrUndefined, applyChanges, setAtPath, symbolDelete, is
 import { synced, deepEqual, internal as internal$1, diffObjects } from '@legendapp/state/sync';
 
 // src/sync-plugins/crud.ts
-var { clone, getKeys } = internal;
+var { clone, getKeys, setNodeValue, getChildNode } = internal;
 var { waitForSet, runWithRetry } = internal$1;
 function transformOut(data, transform) {
   return transform ? transform(clone(data)) : data;
 }
-function ensureId(obj, fieldId, generateId) {
+function ensureId(obj, fieldId, generateId, node) {
   if (!obj[fieldId]) {
     obj[fieldId] = generateId();
+    if (node) {
+      setNodeValue(node, obj);
+    }
   }
-  return obj[fieldId];
 }
 function computeLastSync(data, fieldUpdatedAt, fieldCreatedAt) {
   let newLastSync = 0;
@@ -208,11 +210,11 @@ function syncedCrud(props) {
       const { path, prevAtPath, valueAtPath, pathTypes } = change;
       if (asType === "value") {
         if (value) {
-          let id = value == null ? void 0 : value[fieldId];
           let isCreate = fieldCreatedAt ? !value[fieldCreatedAt] : !prevAtPath;
-          if (isNullOrUndefined(id) && generateId) {
-            id = ensureId(value, fieldId, generateId);
+          if (isNullOrUndefined(value[fieldId]) && generateId) {
+            ensureId(value, fieldId, generateId, node);
           }
+          const id = value[fieldId];
           if (!isNullOrUndefined(id)) {
             changesById.set(id, change);
             if (pendingCreates.has(id)) {
@@ -251,6 +253,14 @@ function syncedCrud(props) {
       } else {
         let itemsChanged = [];
         if (path.length === 0) {
+          if (asArray && generateId) {
+            for (let i = 0; i < valueAtPath.length; i++) {
+              const value2 = valueAtPath[i];
+              if (value2 && !value2[fieldId]) {
+                ensureId(value2, fieldId, generateId, getChildNode(node, i + ""));
+              }
+            }
+          }
           const valueAsObject = asArray ? arrayToRecord(valueAtPath, fieldId) : valueAtPath;
           const prevAsObject = asArray ? arrayToRecord(prevAtPath, fieldId) : prevAtPath;
           const keys = getKeys(valueAsObject, false, asMap, false);
@@ -287,6 +297,9 @@ function syncedCrud(props) {
               changesById.set(prevAtPath[fieldId], change);
             }
           } else {
+            if (generateId) {
+              ensureId(itemValue, fieldId, generateId, getChildNode(node, itemKey + ""));
+            }
             const previous = setAtPath(
               clone(itemValue),
               path.slice(1),
@@ -299,9 +312,6 @@ function syncedCrud(props) {
         itemsChanged == null ? void 0 : itemsChanged.forEach(([item, prev, fullValue]) => {
           const isCreate = !pendingCreates.has(item[fieldId]) && (fieldCreatedAt ? !item[fieldCreatedAt] && !(prev == null ? void 0 : prev[fieldCreatedAt]) : fieldUpdatedAt ? !item[fieldUpdatedAt] && !(prev == null ? void 0 : prev[fieldCreatedAt]) : isNullOrUndefined(prev));
           if (isCreate) {
-            if (generateId) {
-              ensureId(item, fieldId, generateId);
-            }
             if (!item[fieldId]) {
               console.error("[legend-state]: added item without an id");
             }