@legendapp/state 3.0.0-beta.46 → 3.0.0-beta.48

package/react.js

@@ -13,8 +13,17 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 
 // src/react/react-globals.ts
 var reactGlobals = {
-  inObserver: false
+  inObserver: false,
+  renderDepth: 0
 };
+function runInRender(fn) {
+  reactGlobals.renderDepth++;
+  try {
+    return fn();
+  } finally {
+    reactGlobals.renderDepth--;
+  }
+}
 var pauseContext = void 0;
 var getPauseContext = () => {
   return pauseContext || (pauseContext = React.createContext(null));
@@ -36,6 +45,22 @@ function createSelectorFunctions(options, isPaused$) {
   let _selector;
   let prev;
   let pendingUpdate = void 0;
+  let notifyQueued = false;
+  const scheduleNotify = () => {
+    if (notify) {
+      if (reactGlobals.renderDepth > 0) {
+        if (!notifyQueued) {
+          notifyQueued = true;
+          queueMicrotask(() => {
+            notifyQueued = false;
+            notify == null ? void 0 : notify();
+          });
+        }
+      } else {
+        notify();
+      }
+    }
+  };
   const run = () => {
     dispose == null ? void 0 : dispose();
     const {
@@ -79,7 +104,7 @@ function createSelectorFunctions(options, isPaused$) {
       }
       if (changed) {
         version++;
-        notify == null ? void 0 : notify();
+        scheduleNotify();
       }
     }
   };
@@ -91,6 +116,7 @@ function createSelectorFunctions(options, isPaused$) {
       }
       return () => {
         dispose == null ? void 0 : dispose();
+        notify = void 0;
         dispose = void 0;
       };
     },
@@ -123,7 +149,7 @@ function useSelector(selector, options) {
     const isPaused$ = React.useContext(getPauseContext());
     const selectorFn = React.useMemo(() => createSelectorFunctions(options, isPaused$), []);
     const { subscribe, getVersion, run } = selectorFn;
-    value = run(selector);
+    value = runInRender(() => run(selector));
     index_js.useSyncExternalStore(subscribe, getVersion, getVersion);
   } catch (err) {
     if ((process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && ((_a = err == null ? void 0 : err.message) == null ? void 0 : _a.includes("Rendered more"))) {
@@ -175,50 +201,64 @@ function createReactiveComponent(component, observe3, reactive2, keysReactive, b
     apply(target, thisArg, argArray) {
       if (reactive2) {
         const props = argArray[0];
-        const propsOut = {};
-        const keys = Object.keys(props);
-        for (let i = 0; i < keys.length; i++) {
-          const key = keys[i];
-          const p = props[key];
-          const isReactiveKey = keysReactiveSet && keysReactiveSet.has(key);
-          if (key === "children" && (state.isFunction(p) || state.isObservable(p))) {
-            propsOut[key] = useSelector(p, { skipCheck: true });
-          } else if (isReactiveKey || key.startsWith("$") || key.endsWith("$")) {
-            if (process.env.NODE_ENV === "development" && !didWarnProps && key.endsWith("$")) {
-              didWarnProps = true;
-              console.warn(
-                `[legend-state] Reactive props were changed to start with $ instead of end with $ in version 2.0. So please change ${key} to $${key.replace(
-                  "$",
-                  ""
-                )}. See https://legendapp.com/open-source/state/migrating for more details.`
-              );
-            }
-            const k = isReactiveKey ? key : key.endsWith("$") ? key.slice(0, -1) : key.slice(1);
-            const bind = bindKeys == null ? void 0 : bindKeys[k];
-            const shouldBind = bind && state.isObservable(p);
-            propsOut[k] = shouldBind && (bind == null ? void 0 : bind.selector) ? bind.selector(propsOut, p) : useSelector(p);
-            if (shouldBind) {
-              if (bind.defaultValue !== void 0 && propsOut[k] === void 0) {
-                propsOut[k] = bind.defaultValue;
-              }
-              if (bind.handler && bind.getValue) {
-                const handlerFn = (e) => {
-                  var _a;
-                  p.set(bind.getValue(e));
-                  (_a = props[bind.handler]) == null ? void 0 : _a.call(props, e);
-                };
-                propsOut[bind.handler] = // If in development mode, don't memoize the handler. fix fast refresh bug
-                process.env.NODE_ENV === "development" ? handlerFn : React.useCallback(handlerFn, [props[bind.handler], bindKeys]);
+        const bindHandlersRef = React.useRef({});
+        argArray[0] = useSelector(
+          () => {
+            const propsOut = {};
+            const keys = Object.keys(props);
+            for (let i = 0; i < keys.length; i++) {
+              const key = keys[i];
+              const p = props[key];
+              const isReactiveKey = keysReactiveSet && keysReactiveSet.has(key);
+              if (key === "children" && (state.isFunction(p) || state.isObservable(p))) {
+                propsOut[key] = state.computeSelector(p);
+              } else if (isReactiveKey || key.startsWith("$") || key.endsWith("$")) {
+                if (process.env.NODE_ENV === "development" && !didWarnProps && key.endsWith("$")) {
+                  didWarnProps = true;
+                  console.warn(
+                    `[legend-state] Reactive props were changed to start with $ instead of end with $ in version 2.0. So please change ${key} to $${key.replace(
+                      "$",
+                      ""
+                    )}. See https://legendapp.com/open-source/state/migrating for more details.`
+                  );
+                }
+                const k = isReactiveKey ? key : key.endsWith("$") ? key.slice(0, -1) : key.slice(1);
+                const bind = bindKeys == null ? void 0 : bindKeys[k];
+                const shouldBind = bind && state.isObservable(p);
+                propsOut[k] = shouldBind && (bind == null ? void 0 : bind.selector) ? bind.selector(propsOut, p) : state.computeSelector(p);
+                if (shouldBind) {
+                  if (bind.defaultValue !== void 0 && propsOut[k] === void 0) {
+                    propsOut[k] = bind.defaultValue;
+                  }
+                  if (bind.handler && bind.getValue) {
+                    const handlerKey = bind.handler;
+                    const originalHandler = props[handlerKey];
+                    let cached = bindHandlersRef.current[k];
+                    if (!cached || cached.bind !== bind || cached.observable !== p || cached.originalHandler !== originalHandler) {
+                      cached = bindHandlersRef.current[k] = {
+                        bind,
+                        observable: p,
+                        originalHandler,
+                        handler: (event) => {
+                          p.set(bind.getValue(event));
+                          originalHandler == null ? void 0 : originalHandler(event);
+                        }
+                      };
+                    }
+                    propsOut[handlerKey] = cached.handler;
+                  }
+                }
+                if (!isReactiveKey) {
+                  delete propsOut[key];
+                }
+              } else if (propsOut[key] === void 0) {
+                propsOut[key] = p;
               }
             }
-            if (!isReactiveKey) {
-              delete propsOut[key];
-            }
-          } else if (propsOut[key] === void 0) {
-            propsOut[key] = p;
-          }
-        }
-        argArray[0] = propsOut;
+            return propsOut;
+          },
+          { skipCheck: true }
+        );
       }
       if (observe3) {
         return useSelector(
@@ -477,7 +517,7 @@ function useObservable(initialValue, deps) {
     ref.current.obs$ = state.observable(value);
   }
   if (depsObs$) {
-    depsObs$.set(deps);
+    runInRender(() => depsObs$.set(deps));
   }
   useUnmount(() => {
     const obs = ref.current.obs$;
@@ -546,21 +586,23 @@ function useObserve(selector, reactionOrOptionsOrDeps, options, deps) {
   ref.current.selector = selector;
   ref.current.reaction = reaction;
   if (depsObs$) {
-    depsObs$.set(deps);
+    runInRender(() => depsObs$.set(deps));
   }
   if (!ref.current.dispose) {
-    ref.current.dispose = state.observe(
-      (e) => {
-        var _a;
-        depsObs$ == null ? void 0 : depsObs$.get();
-        const selector2 = (_a = ref.current) == null ? void 0 : _a.selector;
-        return state.computeSelector(selector2, void 0, e);
-      },
-      (e) => {
-        var _a, _b;
-        return (_b = (_a = ref.current).reaction) == null ? void 0 : _b.call(_a, e);
-      },
-      options
+    ref.current.dispose = runInRender(
+      () => state.observe(
+        (e) => {
+          var _a;
+          depsObs$ == null ? void 0 : depsObs$.get();
+          const selector2 = (_a = ref.current) == null ? void 0 : _a.selector;
+          return state.computeSelector(selector2, void 0, e);
+        },
+        (e) => {
+          var _a, _b;
+          return (_b = (_a = ref.current).reaction) == null ? void 0 : _b.call(_a, e);
+        },
+        options
+      )
     );
   }
   useUnmountOnce(() => {
@@ -589,7 +631,7 @@ function useObserveEffect(selector, reactionOrOptionsOrDeps, options, deps) {
   ref.current.selector = selector;
   ref.current.reaction = reaction;
   if (depsObs$) {
-    depsObs$.set(deps);
+    runInRender(() => depsObs$.set(deps));
   }
   useMountOnce(
     () => state.observe(

package/react.mjs

@@ -1,5 +1,5 @@
 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 React, { memo, forwardRef, createElement, useState, useContext, useMemo, useRef, useEffect, createContext } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 import { enableReactive } from '@legendapp/state/react-reactive/enableReactive';
 
@@ -7,8 +7,17 @@ import { enableReactive } from '@legendapp/state/react-reactive/enableReactive';
 
 // src/react/react-globals.ts
 var reactGlobals = {
-  inObserver: false
+  inObserver: false,
+  renderDepth: 0
 };
+function runInRender(fn) {
+  reactGlobals.renderDepth++;
+  try {
+    return fn();
+  } finally {
+    reactGlobals.renderDepth--;
+  }
+}
 var pauseContext = void 0;
 var getPauseContext = () => {
   return pauseContext || (pauseContext = createContext(null));
@@ -30,6 +39,22 @@ function createSelectorFunctions(options, isPaused$) {
   let _selector;
   let prev;
   let pendingUpdate = void 0;
+  let notifyQueued = false;
+  const scheduleNotify = () => {
+    if (notify) {
+      if (reactGlobals.renderDepth > 0) {
+        if (!notifyQueued) {
+          notifyQueued = true;
+          queueMicrotask(() => {
+            notifyQueued = false;
+            notify == null ? void 0 : notify();
+          });
+        }
+      } else {
+        notify();
+      }
+    }
+  };
   const run = () => {
     dispose == null ? void 0 : dispose();
     const {
@@ -73,7 +98,7 @@ function createSelectorFunctions(options, isPaused$) {
       }
       if (changed) {
         version++;
-        notify == null ? void 0 : notify();
+        scheduleNotify();
       }
     }
   };
@@ -85,6 +110,7 @@ function createSelectorFunctions(options, isPaused$) {
       }
       return () => {
         dispose == null ? void 0 : dispose();
+        notify = void 0;
         dispose = void 0;
       };
     },
@@ -117,7 +143,7 @@ function useSelector(selector, options) {
     const isPaused$ = useContext(getPauseContext());
     const selectorFn = useMemo(() => createSelectorFunctions(options, isPaused$), []);
     const { subscribe, getVersion, run } = selectorFn;
-    value = run(selector);
+    value = runInRender(() => run(selector));
     useSyncExternalStore(subscribe, getVersion, getVersion);
   } catch (err) {
     if ((process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && ((_a = err == null ? void 0 : err.message) == null ? void 0 : _a.includes("Rendered more"))) {
@@ -169,50 +195,64 @@ function createReactiveComponent(component, observe3, reactive2, keysReactive, b
     apply(target, thisArg, argArray) {
       if (reactive2) {
         const props = argArray[0];
-        const propsOut = {};
-        const keys = Object.keys(props);
-        for (let i = 0; i < keys.length; i++) {
-          const key = keys[i];
-          const p = props[key];
-          const isReactiveKey = keysReactiveSet && keysReactiveSet.has(key);
-          if (key === "children" && (isFunction(p) || isObservable(p))) {
-            propsOut[key] = useSelector(p, { skipCheck: true });
-          } else if (isReactiveKey || key.startsWith("$") || key.endsWith("$")) {
-            if (process.env.NODE_ENV === "development" && !didWarnProps && key.endsWith("$")) {
-              didWarnProps = true;
-              console.warn(
-                `[legend-state] Reactive props were changed to start with $ instead of end with $ in version 2.0. So please change ${key} to $${key.replace(
-                  "$",
-                  ""
-                )}. See https://legendapp.com/open-source/state/migrating for more details.`
-              );
-            }
-            const k = isReactiveKey ? key : key.endsWith("$") ? key.slice(0, -1) : key.slice(1);
-            const bind = bindKeys == null ? void 0 : bindKeys[k];
-            const shouldBind = bind && isObservable(p);
-            propsOut[k] = shouldBind && (bind == null ? void 0 : bind.selector) ? bind.selector(propsOut, p) : useSelector(p);
-            if (shouldBind) {
-              if (bind.defaultValue !== void 0 && propsOut[k] === void 0) {
-                propsOut[k] = bind.defaultValue;
-              }
-              if (bind.handler && bind.getValue) {
-                const handlerFn = (e) => {
-                  var _a;
-                  p.set(bind.getValue(e));
-                  (_a = props[bind.handler]) == null ? void 0 : _a.call(props, e);
-                };
-                propsOut[bind.handler] = // If in development mode, don't memoize the handler. fix fast refresh bug
-                process.env.NODE_ENV === "development" ? handlerFn : useCallback(handlerFn, [props[bind.handler], bindKeys]);
+        const bindHandlersRef = useRef({});
+        argArray[0] = useSelector(
+          () => {
+            const propsOut = {};
+            const keys = Object.keys(props);
+            for (let i = 0; i < keys.length; i++) {
+              const key = keys[i];
+              const p = props[key];
+              const isReactiveKey = keysReactiveSet && keysReactiveSet.has(key);
+              if (key === "children" && (isFunction(p) || isObservable(p))) {
+                propsOut[key] = computeSelector(p);
+              } else if (isReactiveKey || key.startsWith("$") || key.endsWith("$")) {
+                if (process.env.NODE_ENV === "development" && !didWarnProps && key.endsWith("$")) {
+                  didWarnProps = true;
+                  console.warn(
+                    `[legend-state] Reactive props were changed to start with $ instead of end with $ in version 2.0. So please change ${key} to $${key.replace(
+                      "$",
+                      ""
+                    )}. See https://legendapp.com/open-source/state/migrating for more details.`
+                  );
+                }
+                const k = isReactiveKey ? key : key.endsWith("$") ? key.slice(0, -1) : key.slice(1);
+                const bind = bindKeys == null ? void 0 : bindKeys[k];
+                const shouldBind = bind && isObservable(p);
+                propsOut[k] = shouldBind && (bind == null ? void 0 : bind.selector) ? bind.selector(propsOut, p) : computeSelector(p);
+                if (shouldBind) {
+                  if (bind.defaultValue !== void 0 && propsOut[k] === void 0) {
+                    propsOut[k] = bind.defaultValue;
+                  }
+                  if (bind.handler && bind.getValue) {
+                    const handlerKey = bind.handler;
+                    const originalHandler = props[handlerKey];
+                    let cached = bindHandlersRef.current[k];
+                    if (!cached || cached.bind !== bind || cached.observable !== p || cached.originalHandler !== originalHandler) {
+                      cached = bindHandlersRef.current[k] = {
+                        bind,
+                        observable: p,
+                        originalHandler,
+                        handler: (event) => {
+                          p.set(bind.getValue(event));
+                          originalHandler == null ? void 0 : originalHandler(event);
+                        }
+                      };
+                    }
+                    propsOut[handlerKey] = cached.handler;
+                  }
+                }
+                if (!isReactiveKey) {
+                  delete propsOut[key];
+                }
+              } else if (propsOut[key] === void 0) {
+                propsOut[key] = p;
               }
             }
-            if (!isReactiveKey) {
-              delete propsOut[key];
-            }
-          } else if (propsOut[key] === void 0) {
-            propsOut[key] = p;
-          }
-        }
-        argArray[0] = propsOut;
+            return propsOut;
+          },
+          { skipCheck: true }
+        );
       }
       if (observe3) {
         return useSelector(
@@ -471,7 +511,7 @@ function useObservable(initialValue, deps) {
     ref.current.obs$ = observable(value);
   }
   if (depsObs$) {
-    depsObs$.set(deps);
+    runInRender(() => depsObs$.set(deps));
   }
   useUnmount(() => {
     const obs = ref.current.obs$;
@@ -540,21 +580,23 @@ function useObserve(selector, reactionOrOptionsOrDeps, options, deps) {
   ref.current.selector = selector;
   ref.current.reaction = reaction;
   if (depsObs$) {
-    depsObs$.set(deps);
+    runInRender(() => depsObs$.set(deps));
   }
   if (!ref.current.dispose) {
-    ref.current.dispose = observe(
-      (e) => {
-        var _a;
-        depsObs$ == null ? void 0 : depsObs$.get();
-        const selector2 = (_a = ref.current) == null ? void 0 : _a.selector;
-        return computeSelector(selector2, void 0, e);
-      },
-      (e) => {
-        var _a, _b;
-        return (_b = (_a = ref.current).reaction) == null ? void 0 : _b.call(_a, e);
-      },
-      options
+    ref.current.dispose = runInRender(
+      () => observe(
+        (e) => {
+          var _a;
+          depsObs$ == null ? void 0 : depsObs$.get();
+          const selector2 = (_a = ref.current) == null ? void 0 : _a.selector;
+          return computeSelector(selector2, void 0, e);
+        },
+        (e) => {
+          var _a, _b;
+          return (_b = (_a = ref.current).reaction) == null ? void 0 : _b.call(_a, e);
+        },
+        options
+      )
     );
   }
   useUnmountOnce(() => {
@@ -583,7 +625,7 @@ function useObserveEffect(selector, reactionOrOptionsOrDeps, options, deps) {
   ref.current.selector = selector;
   ref.current.reaction = reaction;
   if (depsObs$) {
-    depsObs$.set(deps);
+    runInRender(() => depsObs$.set(deps));
   }
   useMountOnce(
     () => observe(