@legendapp/state 3.0.0-beta.31 → 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[];
@@ -418,6 +419,7 @@ declare const internal: {
     ensureNodeValue: typeof ensureNodeValue;
     findIDKey: typeof findIDKey;
     get: typeof get;
+    getChildNode: typeof getChildNode;
     getKeys: typeof getKeys;
     getNode: typeof getNode;
     getNodeValue: typeof getNodeValue;

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[];
@@ -418,6 +419,7 @@ declare const internal: {
     ensureNodeValue: typeof ensureNodeValue;
     findIDKey: typeof findIDKey;
     get: typeof get;
+    getChildNode: typeof getChildNode;
     getKeys: typeof getKeys;
     getNode: typeof getNode;
     getNodeValue: typeof getNodeValue;

package/index.js

@@ -2460,6 +2460,7 @@ var internal = {
   ensureNodeValue,
   findIDKey,
   get,
+  getChildNode,
   getKeys,
   getNode,
   getNodeValue,

package/index.mjs

@@ -2458,6 +2458,7 @@ var internal = {
   ensureNodeValue,
   findIDKey,
   get,
+  getChildNode,
   getKeys,
   getNode,
   getNodeValue,

package/package.json

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

package/react.js

@@ -527,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),
@@ -559,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

@@ -521,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),
@@ -553,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");
             }