@tldraw/state-react 3.16.0-internal.51e99e128bd4 → 3.16.0-internal.a478398270c6

package/dist-cjs/index.js

@@ -37,7 +37,7 @@ var import_useStateTracking = require("./lib/useStateTracking");
 var import_useValue = require("./lib/useValue");
 (0, import_utils.registerTldrawLibraryVersion)(
   "@tldraw/state-react",
-  "3.16.0-internal.51e99e128bd4",
+  "3.16.0-internal.a478398270c6",
   "cjs"
 );
 //# sourceMappingURL=index.js.map

package/dist-cjs/lib/useReactor.js

@@ -22,22 +22,27 @@ __export(useReactor_exports, {
 });
 module.exports = __toCommonJS(useReactor_exports);
 var import_state = require("@tldraw/state");
-var import_utils = require("@tldraw/utils");
 var import_react = require("react");
 function useReactor(name, reactFn, deps = []) {
-  (0, import_react.useEffect)(() => {
-    let cancelFn;
-    const scheduler = new import_state.EffectScheduler(name, reactFn, {
+  const raf = (0, import_react.useRef)(-1);
+  const scheduler = (0, import_react.useMemo)(
+    () => new import_state.EffectScheduler(name, reactFn, {
       scheduleEffect: (cb) => {
-        cancelFn = (0, import_utils.throttleToNextFrame)(cb);
+        const rafId = requestAnimationFrame(cb);
+        raf.current = rafId;
+        return rafId;
       }
-    });
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    deps
+  );
+  (0, import_react.useEffect)(() => {
     scheduler.attach();
     scheduler.execute();
     return () => {
       scheduler.detach();
-      cancelFn?.();
+      cancelAnimationFrame(raf.current);
     };
-  }, deps);
+  }, [scheduler]);
 }
 //# sourceMappingURL=useReactor.js.map

package/dist-cjs/lib/useReactor.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/lib/useReactor.ts"],
-  "sourcesContent": ["import { EffectScheduler } from '@tldraw/state'\nimport { throttleToNextFrame } from '@tldraw/utils'\nimport { useEffect } from 'react'\n\n/** @public */\nexport function useReactor(name: string, reactFn: () => void, deps: undefined | any[] = []) {\n\tuseEffect(() => {\n\t\tlet cancelFn: () => void | undefined\n\t\tconst scheduler = new EffectScheduler(name, reactFn, {\n\t\t\tscheduleEffect: (cb) => {\n\t\t\t\tcancelFn = throttleToNextFrame(cb)\n\t\t\t},\n\t\t})\n\t\tscheduler.attach()\n\t\tscheduler.execute()\n\t\treturn () => {\n\t\t\tscheduler.detach()\n\t\t\tcancelFn?.()\n\t\t}\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, deps)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,mBAAoC;AACpC,mBAA0B;AAGnB,SAAS,WAAW,MAAc,SAAqB,OAA0B,CAAC,GAAG;AAC3F,8BAAU,MAAM;AACf,QAAI;AACJ,UAAM,YAAY,IAAI,6BAAgB,MAAM,SAAS;AAAA,MACpD,gBAAgB,CAAC,OAAO;AACvB,uBAAW,kCAAoB,EAAE;AAAA,MAClC;AAAA,IACD,CAAC;AACD,cAAU,OAAO;AACjB,cAAU,QAAQ;AAClB,WAAO,MAAM;AACZ,gBAAU,OAAO;AACjB,iBAAW;AAAA,IACZ;AAAA,EAED,GAAG,IAAI;AACR;",
+  "sourcesContent": ["import { EffectScheduler } from '@tldraw/state'\nimport { useEffect, useMemo, useRef } from 'react'\n\n/** @public */\nexport function useReactor(name: string, reactFn: () => void, deps: undefined | any[] = []) {\n\tconst raf = useRef(-1)\n\tconst scheduler = useMemo(\n\t\t() =>\n\t\t\tnew EffectScheduler(name, reactFn, {\n\t\t\t\tscheduleEffect: (cb) => {\n\t\t\t\t\tconst rafId = requestAnimationFrame(cb)\n\t\t\t\t\traf.current = rafId\n\t\t\t\t\treturn rafId\n\t\t\t\t},\n\t\t\t}),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\tdeps\n\t)\n\n\tuseEffect(() => {\n\t\tscheduler.attach()\n\t\tscheduler.execute()\n\t\treturn () => {\n\t\t\tscheduler.detach()\n\t\t\tcancelAnimationFrame(raf.current)\n\t\t}\n\t}, [scheduler])\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,mBAA2C;AAGpC,SAAS,WAAW,MAAc,SAAqB,OAA0B,CAAC,GAAG;AAC3F,QAAM,UAAM,qBAAO,EAAE;AACrB,QAAM,gBAAY;AAAA,IACjB,MACC,IAAI,6BAAgB,MAAM,SAAS;AAAA,MAClC,gBAAgB,CAAC,OAAO;AACvB,cAAM,QAAQ,sBAAsB,EAAE;AACtC,YAAI,UAAU;AACd,eAAO;AAAA,MACR;AAAA,IACD,CAAC;AAAA;AAAA,IAEF;AAAA,EACD;AAEA,8BAAU,MAAM;AACf,cAAU,OAAO;AACjB,cAAU,QAAQ;AAClB,WAAO,MAAM;AACZ,gBAAU,OAAO;AACjB,2BAAqB,IAAI,OAAO;AAAA,IACjC;AAAA,EACD,GAAG,CAAC,SAAS,CAAC;AACf;",
   "names": []
 }

package/dist-cjs/lib/useValue.js

@@ -27,23 +27,39 @@ function useValue() {
   const args = arguments;
   const deps = args.length === 3 ? args[2] : [args[0]];
   const name = args.length === 3 ? args[0] : `useValue(${args[0].name})`;
-  const { $val, subscribe, getSnapshot } = (0, import_react.useMemo)(() => {
-    const $val2 = args.length === 1 ? args[0] : (0, import_state.computed)(name, args[1]);
-    return {
-      $val: $val2,
-      subscribe: (notify) => {
-        return (0, import_state.react)(`useValue(${name})`, () => {
-          try {
-            $val2.get();
-          } catch {
-          }
-          notify();
-        });
-      },
-      getSnapshot: () => $val2.lastChangedEpoch
-    };
+  const isInRender = (0, import_react.useRef)(true);
+  isInRender.current = true;
+  const $val = (0, import_react.useMemo)(() => {
+    if (args.length === 1) {
+      return args[0];
+    }
+    return (0, import_state.computed)(name, () => {
+      if (isInRender.current) {
+        return args[1]();
+      } else {
+        try {
+          return args[1]();
+        } catch {
+          return {};
+        }
+      }
+    });
   }, deps);
-  (0, import_react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
-  return $val.__unsafe__getWithoutCapture();
+  try {
+    const { subscribe, getSnapshot } = (0, import_react.useMemo)(() => {
+      return {
+        subscribe: (listen) => {
+          return (0, import_state.react)(`useValue(${name})`, () => {
+            $val.get();
+            listen();
+          });
+        },
+        getSnapshot: () => $val.get()
+      };
+    }, [$val]);
+    return (0, import_react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  } finally {
+    isInRender.current = false;
+  }
 }
 //# sourceMappingURL=useValue.js.map

package/dist-cjs/lib/useValue.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/lib/useValue.ts"],
-  "sourcesContent": ["/* eslint-disable prefer-rest-params */\nimport { Signal, computed, react } from '@tldraw/state'\nimport { useMemo, useSyncExternalStore } from 'react'\n\n/** @public */\nexport function useValue<Value>(value: Signal<Value>): Value\n\n/**\n * Extracts the value from a signal and subscribes to it.\n *\n * Note that you do not need to use this hook if you are wrapping the component with {@link track}\n *\n * @example\n * ```ts\n * const Counter: React.FC = () => {\n *   const $count = useAtom('count', 0)\n *   const increment = useCallback(() => $count.set($count.get() + 1), [count])\n *   const currentCount = useValue($count)\n *   return <button onClick={increment}>{currentCount}</button>\n * }\n * ```\n *\n * You can also pass a function to compute the value and it will be memoized as in `useComputed`:\n *\n * @example\n * ```ts\n * type GreeterProps = {\n *   firstName: Signal<string>\n *   lastName: Signal<string>\n * }\n *\n * const Greeter = track(function Greeter({ firstName, lastName }: GreeterProps) {\n *   const fullName = useValue('fullName', () => `${firstName.get()} ${lastName.get()}`, [\n *     firstName,\n *     lastName,\n *   ])\n *   return <div>Hello {fullName}!</div>\n * })\n * ```\n *\n * @public\n */\nexport function useValue<Value>(name: string, fn: () => Value, deps: unknown[]): Value\n\n/** @public */\nexport function useValue() {\n\tconst args = arguments\n\t// deps will be either the computed or the deps array\n\tconst deps = args.length === 3 ? args[2] : [args[0]]\n\tconst name = args.length === 3 ? args[0] : `useValue(${args[0].name})`\n\n\tconst { $val, subscribe, getSnapshot } = useMemo(() => {\n\t\tconst $val =\n\t\t\targs.length === 1 ? (args[0] as Signal<any>) : (computed(name, args[1]) as Signal<any>)\n\n\t\treturn {\n\t\t\t$val,\n\t\t\tsubscribe: (notify: () => void) => {\n\t\t\t\treturn react(`useValue(${name})`, () => {\n\t\t\t\t\ttry {\n\t\t\t\t\t\t$val.get()\n\t\t\t\t\t} catch {\n\t\t\t\t\t\t// Will be rethrown during render if the component doesn't unmount first.\n\t\t\t\t\t}\n\t\t\t\t\tnotify()\n\t\t\t\t})\n\t\t\t},\n\t\t\tgetSnapshot: () => $val.lastChangedEpoch,\n\t\t}\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, deps)\n\n\tuseSyncExternalStore(subscribe, getSnapshot, getSnapshot)\n\treturn $val.__unsafe__getWithoutCapture()\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAwC;AACxC,mBAA8C;AA2CvC,SAAS,WAAW;AAC1B,QAAM,OAAO;AAEb,QAAM,OAAO,KAAK,WAAW,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AACnD,QAAM,OAAO,KAAK,WAAW,IAAI,KAAK,CAAC,IAAI,YAAY,KAAK,CAAC,EAAE,IAAI;AAEnE,QAAM,EAAE,MAAM,WAAW,YAAY,QAAI,sBAAQ,MAAM;AACtD,UAAMA,QACL,KAAK,WAAW,IAAK,KAAK,CAAC,QAAqB,uBAAS,MAAM,KAAK,CAAC,CAAC;AAEvE,WAAO;AAAA,MACN,MAAAA;AAAA,MACA,WAAW,CAAC,WAAuB;AAClC,mBAAO,oBAAM,YAAY,IAAI,KAAK,MAAM;AACvC,cAAI;AACH,YAAAA,MAAK,IAAI;AAAA,UACV,QAAQ;AAAA,UAER;AACA,iBAAO;AAAA,QACR,CAAC;AAAA,MACF;AAAA,MACA,aAAa,MAAMA,MAAK;AAAA,IACzB;AAAA,EAED,GAAG,IAAI;AAEP,yCAAqB,WAAW,aAAa,WAAW;AACxD,SAAO,KAAK,4BAA4B;AACzC;",
-  "names": ["$val"]
+  "sourcesContent": ["/* eslint-disable prefer-rest-params */\nimport { Signal, computed, react } from '@tldraw/state'\nimport { useMemo, useRef, useSyncExternalStore } from 'react'\n\n/** @public */\nexport function useValue<Value>(value: Signal<Value>): Value\n\n/**\n * Extracts the value from a signal and subscribes to it.\n *\n * Note that you do not need to use this hook if you are wrapping the component with {@link track}\n *\n * @example\n * ```ts\n * const Counter: React.FC = () => {\n *   const $count = useAtom('count', 0)\n *   const increment = useCallback(() => $count.set($count.get() + 1), [count])\n *   const currentCount = useValue($count)\n *   return <button onClick={increment}>{currentCount}</button>\n * }\n * ```\n *\n * You can also pass a function to compute the value and it will be memoized as in `useComputed`:\n *\n * @example\n * ```ts\n * type GreeterProps = {\n *   firstName: Signal<string>\n *   lastName: Signal<string>\n * }\n *\n * const Greeter = track(function Greeter({ firstName, lastName }: GreeterProps) {\n *   const fullName = useValue('fullName', () => `${firstName.get()} ${lastName.get()}`, [\n *     firstName,\n *     lastName,\n *   ])\n *   return <div>Hello {fullName}!</div>\n * })\n * ```\n *\n * @public\n */\nexport function useValue<Value>(name: string, fn: () => Value, deps: unknown[]): Value\n\n/** @public */\nexport function useValue() {\n\tconst args = arguments\n\t// deps will be either the computed or the deps array\n\tconst deps = args.length === 3 ? args[2] : [args[0]]\n\tconst name = args.length === 3 ? args[0] : `useValue(${args[0].name})`\n\n\tconst isInRender = useRef(true)\n\tisInRender.current = true\n\n\tconst $val = useMemo(() => {\n\t\tif (args.length === 1) {\n\t\t\treturn args[0]\n\t\t}\n\t\treturn computed(name, () => {\n\t\t\tif (isInRender.current) {\n\t\t\t\treturn args[1]()\n\t\t\t} else {\n\t\t\t\ttry {\n\t\t\t\t\treturn args[1]()\n\t\t\t\t} catch {\n\t\t\t\t\t// when getSnapshot is called outside of the render phase &\n\t\t\t\t\t// subsequently throws an error, it might be because we're\n\t\t\t\t\t// in a zombie-child state. in that case, we suppress the\n\t\t\t\t\t// error and instead return a new dummy value to trigger a\n\t\t\t\t\t// react re-render. if we were in a zombie child, react will\n\t\t\t\t\t// unmount us instead of re-rendering so the error is\n\t\t\t\t\t// irrelevant. if we're not in a zombie-child, react will\n\t\t\t\t\t// call `getSnapshot` again in the render phase, and the\n\t\t\t\t\t// error will be thrown as expected.\n\t\t\t\t\treturn {}\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, deps)\n\n\ttry {\n\t\tconst { subscribe, getSnapshot } = useMemo(() => {\n\t\t\treturn {\n\t\t\t\tsubscribe: (listen: () => void) => {\n\t\t\t\t\treturn react(`useValue(${name})`, () => {\n\t\t\t\t\t\t$val.get()\n\t\t\t\t\t\tlisten()\n\t\t\t\t\t})\n\t\t\t\t},\n\t\t\t\tgetSnapshot: () => $val.get(),\n\t\t\t}\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t}, [$val])\n\n\t\treturn useSyncExternalStore(subscribe, getSnapshot, getSnapshot)\n\t} finally {\n\t\tisInRender.current = false\n\t}\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAwC;AACxC,mBAAsD;AA2C/C,SAAS,WAAW;AAC1B,QAAM,OAAO;AAEb,QAAM,OAAO,KAAK,WAAW,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AACnD,QAAM,OAAO,KAAK,WAAW,IAAI,KAAK,CAAC,IAAI,YAAY,KAAK,CAAC,EAAE,IAAI;AAEnE,QAAM,iBAAa,qBAAO,IAAI;AAC9B,aAAW,UAAU;AAErB,QAAM,WAAO,sBAAQ,MAAM;AAC1B,QAAI,KAAK,WAAW,GAAG;AACtB,aAAO,KAAK,CAAC;AAAA,IACd;AACA,eAAO,uBAAS,MAAM,MAAM;AAC3B,UAAI,WAAW,SAAS;AACvB,eAAO,KAAK,CAAC,EAAE;AAAA,MAChB,OAAO;AACN,YAAI;AACH,iBAAO,KAAK,CAAC,EAAE;AAAA,QAChB,QAAQ;AAUP,iBAAO,CAAC;AAAA,QACT;AAAA,MACD;AAAA,IACD,CAAC;AAAA,EAEF,GAAG,IAAI;AAEP,MAAI;AACH,UAAM,EAAE,WAAW,YAAY,QAAI,sBAAQ,MAAM;AAChD,aAAO;AAAA,QACN,WAAW,CAAC,WAAuB;AAClC,qBAAO,oBAAM,YAAY,IAAI,KAAK,MAAM;AACvC,iBAAK,IAAI;AACT,mBAAO;AAAA,UACR,CAAC;AAAA,QACF;AAAA,QACA,aAAa,MAAM,KAAK,IAAI;AAAA,MAC7B;AAAA,IAED,GAAG,CAAC,IAAI,CAAC;AAET,eAAO,mCAAqB,WAAW,aAAa,WAAW;AAAA,EAChE,UAAE;AACD,eAAW,UAAU;AAAA,EACtB;AACD;",
+  "names": []
 }

package/dist-esm/index.mjs

@@ -8,7 +8,7 @@ import { useStateTracking } from "./lib/useStateTracking.mjs";
 import { useValue } from "./lib/useValue.mjs";
 registerTldrawLibraryVersion(
   "@tldraw/state-react",
-  "3.16.0-internal.51e99e128bd4",
+  "3.16.0-internal.a478398270c6",
   "esm"
 );
 export {

package/dist-esm/lib/useReactor.mjs

@@ -1,21 +1,26 @@
 import { EffectScheduler } from "@tldraw/state";
-import { throttleToNextFrame } from "@tldraw/utils";
-import { useEffect } from "react";
+import { useEffect, useMemo, useRef } from "react";
 function useReactor(name, reactFn, deps = []) {
-  useEffect(() => {
-    let cancelFn;
-    const scheduler = new EffectScheduler(name, reactFn, {
+  const raf = useRef(-1);
+  const scheduler = useMemo(
+    () => new EffectScheduler(name, reactFn, {
       scheduleEffect: (cb) => {
-        cancelFn = throttleToNextFrame(cb);
+        const rafId = requestAnimationFrame(cb);
+        raf.current = rafId;
+        return rafId;
       }
-    });
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    deps
+  );
+  useEffect(() => {
     scheduler.attach();
     scheduler.execute();
     return () => {
       scheduler.detach();
-      cancelFn?.();
+      cancelAnimationFrame(raf.current);
     };
-  }, deps);
+  }, [scheduler]);
 }
 export {
   useReactor

package/dist-esm/lib/useReactor.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/lib/useReactor.ts"],
-  "sourcesContent": ["import { EffectScheduler } from '@tldraw/state'\nimport { throttleToNextFrame } from '@tldraw/utils'\nimport { useEffect } from 'react'\n\n/** @public */\nexport function useReactor(name: string, reactFn: () => void, deps: undefined | any[] = []) {\n\tuseEffect(() => {\n\t\tlet cancelFn: () => void | undefined\n\t\tconst scheduler = new EffectScheduler(name, reactFn, {\n\t\t\tscheduleEffect: (cb) => {\n\t\t\t\tcancelFn = throttleToNextFrame(cb)\n\t\t\t},\n\t\t})\n\t\tscheduler.attach()\n\t\tscheduler.execute()\n\t\treturn () => {\n\t\t\tscheduler.detach()\n\t\t\tcancelFn?.()\n\t\t}\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, deps)\n}\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,2BAA2B;AACpC,SAAS,iBAAiB;AAGnB,SAAS,WAAW,MAAc,SAAqB,OAA0B,CAAC,GAAG;AAC3F,YAAU,MAAM;AACf,QAAI;AACJ,UAAM,YAAY,IAAI,gBAAgB,MAAM,SAAS;AAAA,MACpD,gBAAgB,CAAC,OAAO;AACvB,mBAAW,oBAAoB,EAAE;AAAA,MAClC;AAAA,IACD,CAAC;AACD,cAAU,OAAO;AACjB,cAAU,QAAQ;AAClB,WAAO,MAAM;AACZ,gBAAU,OAAO;AACjB,iBAAW;AAAA,IACZ;AAAA,EAED,GAAG,IAAI;AACR;",
+  "sourcesContent": ["import { EffectScheduler } from '@tldraw/state'\nimport { useEffect, useMemo, useRef } from 'react'\n\n/** @public */\nexport function useReactor(name: string, reactFn: () => void, deps: undefined | any[] = []) {\n\tconst raf = useRef(-1)\n\tconst scheduler = useMemo(\n\t\t() =>\n\t\t\tnew EffectScheduler(name, reactFn, {\n\t\t\t\tscheduleEffect: (cb) => {\n\t\t\t\t\tconst rafId = requestAnimationFrame(cb)\n\t\t\t\t\traf.current = rafId\n\t\t\t\t\treturn rafId\n\t\t\t\t},\n\t\t\t}),\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\tdeps\n\t)\n\n\tuseEffect(() => {\n\t\tscheduler.attach()\n\t\tscheduler.execute()\n\t\treturn () => {\n\t\t\tscheduler.detach()\n\t\t\tcancelAnimationFrame(raf.current)\n\t\t}\n\t}, [scheduler])\n}\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,WAAW,SAAS,cAAc;AAGpC,SAAS,WAAW,MAAc,SAAqB,OAA0B,CAAC,GAAG;AAC3F,QAAM,MAAM,OAAO,EAAE;AACrB,QAAM,YAAY;AAAA,IACjB,MACC,IAAI,gBAAgB,MAAM,SAAS;AAAA,MAClC,gBAAgB,CAAC,OAAO;AACvB,cAAM,QAAQ,sBAAsB,EAAE;AACtC,YAAI,UAAU;AACd,eAAO;AAAA,MACR;AAAA,IACD,CAAC;AAAA;AAAA,IAEF;AAAA,EACD;AAEA,YAAU,MAAM;AACf,cAAU,OAAO;AACjB,cAAU,QAAQ;AAClB,WAAO,MAAM;AACZ,gBAAU,OAAO;AACjB,2BAAqB,IAAI,OAAO;AAAA,IACjC;AAAA,EACD,GAAG,CAAC,SAAS,CAAC;AACf;",
   "names": []
 }

package/dist-esm/lib/useValue.mjs

@@ -1,27 +1,43 @@
 import { computed, react } from "@tldraw/state";
-import { useMemo, useSyncExternalStore } from "react";
+import { useMemo, useRef, useSyncExternalStore } from "react";
 function useValue() {
   const args = arguments;
   const deps = args.length === 3 ? args[2] : [args[0]];
   const name = args.length === 3 ? args[0] : `useValue(${args[0].name})`;
-  const { $val, subscribe, getSnapshot } = useMemo(() => {
-    const $val2 = args.length === 1 ? args[0] : computed(name, args[1]);
-    return {
-      $val: $val2,
-      subscribe: (notify) => {
-        return react(`useValue(${name})`, () => {
-          try {
-            $val2.get();
-          } catch {
-          }
-          notify();
-        });
-      },
-      getSnapshot: () => $val2.lastChangedEpoch
-    };
+  const isInRender = useRef(true);
+  isInRender.current = true;
+  const $val = useMemo(() => {
+    if (args.length === 1) {
+      return args[0];
+    }
+    return computed(name, () => {
+      if (isInRender.current) {
+        return args[1]();
+      } else {
+        try {
+          return args[1]();
+        } catch {
+          return {};
+        }
+      }
+    });
   }, deps);
-  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  return $val.__unsafe__getWithoutCapture();
+  try {
+    const { subscribe, getSnapshot } = useMemo(() => {
+      return {
+        subscribe: (listen) => {
+          return react(`useValue(${name})`, () => {
+            $val.get();
+            listen();
+          });
+        },
+        getSnapshot: () => $val.get()
+      };
+    }, [$val]);
+    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  } finally {
+    isInRender.current = false;
+  }
 }
 export {
   useValue

package/dist-esm/lib/useValue.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/lib/useValue.ts"],
-  "sourcesContent": ["/* eslint-disable prefer-rest-params */\nimport { Signal, computed, react } from '@tldraw/state'\nimport { useMemo, useSyncExternalStore } from 'react'\n\n/** @public */\nexport function useValue<Value>(value: Signal<Value>): Value\n\n/**\n * Extracts the value from a signal and subscribes to it.\n *\n * Note that you do not need to use this hook if you are wrapping the component with {@link track}\n *\n * @example\n * ```ts\n * const Counter: React.FC = () => {\n *   const $count = useAtom('count', 0)\n *   const increment = useCallback(() => $count.set($count.get() + 1), [count])\n *   const currentCount = useValue($count)\n *   return <button onClick={increment}>{currentCount}</button>\n * }\n * ```\n *\n * You can also pass a function to compute the value and it will be memoized as in `useComputed`:\n *\n * @example\n * ```ts\n * type GreeterProps = {\n *   firstName: Signal<string>\n *   lastName: Signal<string>\n * }\n *\n * const Greeter = track(function Greeter({ firstName, lastName }: GreeterProps) {\n *   const fullName = useValue('fullName', () => `${firstName.get()} ${lastName.get()}`, [\n *     firstName,\n *     lastName,\n *   ])\n *   return <div>Hello {fullName}!</div>\n * })\n * ```\n *\n * @public\n */\nexport function useValue<Value>(name: string, fn: () => Value, deps: unknown[]): Value\n\n/** @public */\nexport function useValue() {\n\tconst args = arguments\n\t// deps will be either the computed or the deps array\n\tconst deps = args.length === 3 ? args[2] : [args[0]]\n\tconst name = args.length === 3 ? args[0] : `useValue(${args[0].name})`\n\n\tconst { $val, subscribe, getSnapshot } = useMemo(() => {\n\t\tconst $val =\n\t\t\targs.length === 1 ? (args[0] as Signal<any>) : (computed(name, args[1]) as Signal<any>)\n\n\t\treturn {\n\t\t\t$val,\n\t\t\tsubscribe: (notify: () => void) => {\n\t\t\t\treturn react(`useValue(${name})`, () => {\n\t\t\t\t\ttry {\n\t\t\t\t\t\t$val.get()\n\t\t\t\t\t} catch {\n\t\t\t\t\t\t// Will be rethrown during render if the component doesn't unmount first.\n\t\t\t\t\t}\n\t\t\t\t\tnotify()\n\t\t\t\t})\n\t\t\t},\n\t\t\tgetSnapshot: () => $val.lastChangedEpoch,\n\t\t}\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, deps)\n\n\tuseSyncExternalStore(subscribe, getSnapshot, getSnapshot)\n\treturn $val.__unsafe__getWithoutCapture()\n}\n"],
-  "mappings": "AACA,SAAiB,UAAU,aAAa;AACxC,SAAS,SAAS,4BAA4B;AA2CvC,SAAS,WAAW;AAC1B,QAAM,OAAO;AAEb,QAAM,OAAO,KAAK,WAAW,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AACnD,QAAM,OAAO,KAAK,WAAW,IAAI,KAAK,CAAC,IAAI,YAAY,KAAK,CAAC,EAAE,IAAI;AAEnE,QAAM,EAAE,MAAM,WAAW,YAAY,IAAI,QAAQ,MAAM;AACtD,UAAMA,QACL,KAAK,WAAW,IAAK,KAAK,CAAC,IAAqB,SAAS,MAAM,KAAK,CAAC,CAAC;AAEvE,WAAO;AAAA,MACN,MAAAA;AAAA,MACA,WAAW,CAAC,WAAuB;AAClC,eAAO,MAAM,YAAY,IAAI,KAAK,MAAM;AACvC,cAAI;AACH,YAAAA,MAAK,IAAI;AAAA,UACV,QAAQ;AAAA,UAER;AACA,iBAAO;AAAA,QACR,CAAC;AAAA,MACF;AAAA,MACA,aAAa,MAAMA,MAAK;AAAA,IACzB;AAAA,EAED,GAAG,IAAI;AAEP,uBAAqB,WAAW,aAAa,WAAW;AACxD,SAAO,KAAK,4BAA4B;AACzC;",
-  "names": ["$val"]
+  "sourcesContent": ["/* eslint-disable prefer-rest-params */\nimport { Signal, computed, react } from '@tldraw/state'\nimport { useMemo, useRef, useSyncExternalStore } from 'react'\n\n/** @public */\nexport function useValue<Value>(value: Signal<Value>): Value\n\n/**\n * Extracts the value from a signal and subscribes to it.\n *\n * Note that you do not need to use this hook if you are wrapping the component with {@link track}\n *\n * @example\n * ```ts\n * const Counter: React.FC = () => {\n *   const $count = useAtom('count', 0)\n *   const increment = useCallback(() => $count.set($count.get() + 1), [count])\n *   const currentCount = useValue($count)\n *   return <button onClick={increment}>{currentCount}</button>\n * }\n * ```\n *\n * You can also pass a function to compute the value and it will be memoized as in `useComputed`:\n *\n * @example\n * ```ts\n * type GreeterProps = {\n *   firstName: Signal<string>\n *   lastName: Signal<string>\n * }\n *\n * const Greeter = track(function Greeter({ firstName, lastName }: GreeterProps) {\n *   const fullName = useValue('fullName', () => `${firstName.get()} ${lastName.get()}`, [\n *     firstName,\n *     lastName,\n *   ])\n *   return <div>Hello {fullName}!</div>\n * })\n * ```\n *\n * @public\n */\nexport function useValue<Value>(name: string, fn: () => Value, deps: unknown[]): Value\n\n/** @public */\nexport function useValue() {\n\tconst args = arguments\n\t// deps will be either the computed or the deps array\n\tconst deps = args.length === 3 ? args[2] : [args[0]]\n\tconst name = args.length === 3 ? args[0] : `useValue(${args[0].name})`\n\n\tconst isInRender = useRef(true)\n\tisInRender.current = true\n\n\tconst $val = useMemo(() => {\n\t\tif (args.length === 1) {\n\t\t\treturn args[0]\n\t\t}\n\t\treturn computed(name, () => {\n\t\t\tif (isInRender.current) {\n\t\t\t\treturn args[1]()\n\t\t\t} else {\n\t\t\t\ttry {\n\t\t\t\t\treturn args[1]()\n\t\t\t\t} catch {\n\t\t\t\t\t// when getSnapshot is called outside of the render phase &\n\t\t\t\t\t// subsequently throws an error, it might be because we're\n\t\t\t\t\t// in a zombie-child state. in that case, we suppress the\n\t\t\t\t\t// error and instead return a new dummy value to trigger a\n\t\t\t\t\t// react re-render. if we were in a zombie child, react will\n\t\t\t\t\t// unmount us instead of re-rendering so the error is\n\t\t\t\t\t// irrelevant. if we're not in a zombie-child, react will\n\t\t\t\t\t// call `getSnapshot` again in the render phase, and the\n\t\t\t\t\t// error will be thrown as expected.\n\t\t\t\t\treturn {}\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, deps)\n\n\ttry {\n\t\tconst { subscribe, getSnapshot } = useMemo(() => {\n\t\t\treturn {\n\t\t\t\tsubscribe: (listen: () => void) => {\n\t\t\t\t\treturn react(`useValue(${name})`, () => {\n\t\t\t\t\t\t$val.get()\n\t\t\t\t\t\tlisten()\n\t\t\t\t\t})\n\t\t\t\t},\n\t\t\t\tgetSnapshot: () => $val.get(),\n\t\t\t}\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t}, [$val])\n\n\t\treturn useSyncExternalStore(subscribe, getSnapshot, getSnapshot)\n\t} finally {\n\t\tisInRender.current = false\n\t}\n}\n"],
+  "mappings": "AACA,SAAiB,UAAU,aAAa;AACxC,SAAS,SAAS,QAAQ,4BAA4B;AA2C/C,SAAS,WAAW;AAC1B,QAAM,OAAO;AAEb,QAAM,OAAO,KAAK,WAAW,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AACnD,QAAM,OAAO,KAAK,WAAW,IAAI,KAAK,CAAC,IAAI,YAAY,KAAK,CAAC,EAAE,IAAI;AAEnE,QAAM,aAAa,OAAO,IAAI;AAC9B,aAAW,UAAU;AAErB,QAAM,OAAO,QAAQ,MAAM;AAC1B,QAAI,KAAK,WAAW,GAAG;AACtB,aAAO,KAAK,CAAC;AAAA,IACd;AACA,WAAO,SAAS,MAAM,MAAM;AAC3B,UAAI,WAAW,SAAS;AACvB,eAAO,KAAK,CAAC,EAAE;AAAA,MAChB,OAAO;AACN,YAAI;AACH,iBAAO,KAAK,CAAC,EAAE;AAAA,QAChB,QAAQ;AAUP,iBAAO,CAAC;AAAA,QACT;AAAA,MACD;AAAA,IACD,CAAC;AAAA,EAEF,GAAG,IAAI;AAEP,MAAI;AACH,UAAM,EAAE,WAAW,YAAY,IAAI,QAAQ,MAAM;AAChD,aAAO;AAAA,QACN,WAAW,CAAC,WAAuB;AAClC,iBAAO,MAAM,YAAY,IAAI,KAAK,MAAM;AACvC,iBAAK,IAAI;AACT,mBAAO;AAAA,UACR,CAAC;AAAA,QACF;AAAA,QACA,aAAa,MAAM,KAAK,IAAI;AAAA,MAC7B;AAAA,IAED,GAAG,CAAC,IAAI,CAAC;AAET,WAAO,qBAAqB,WAAW,aAAa,WAAW;AAAA,EAChE,UAAE;AACD,eAAW,UAAU;AAAA,EACtB;AACD;",
+  "names": []
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/state-react",
-  "description": "tldraw infinite canvas SDK (react bindings for state).",
-  "version": "3.16.0-internal.51e99e128bd4",
+  "description": "A tiny little drawing app (react bindings for state).",
+  "version": "3.16.0-internal.a478398270c6",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -17,7 +17,6 @@
   },
   "keywords": [
     "tldraw",
-    "sdk",
     "drawing",
     "app",
     "development",
@@ -32,29 +31,38 @@
     "src"
   ],
   "scripts": {
-    "test-ci": "yarn run -T vitest run --passWithNoTests",
-    "test": "yarn run -T vitest --passWithNoTests",
-    "test-coverage": "yarn run -T vitest run --coverage --passWithNoTests",
+    "test-ci": "lazy inherit",
+    "test": "yarn run -T jest",
+    "test-coverage": "lazy inherit",
     "build": "yarn run -T tsx ../../internal/scripts/build-package.ts",
     "build-api": "yarn run -T tsx ../../internal/scripts/build-api.ts",
     "prepack": "yarn run -T tsx ../../internal/scripts/prepack.ts",
     "postpack": "../../internal/scripts/postpack.sh",
     "pack-tarball": "yarn pack",
-    "lint": "yarn run -T tsx ../../internal/scripts/lint.ts",
-    "context": "yarn run -T tsx ../../internal/scripts/context.ts"
+    "lint": "yarn run -T tsx ../../internal/scripts/lint.ts"
+  },
+  "jest": {
+    "preset": "../../internal/config/jest/node/jest-preset.js",
+    "setupFiles": [
+      "raf/polyfill"
+    ],
+    "moduleNameMapper": {
+      "^~(.*)": "<rootDir>/src/$1"
+    },
+    "testEnvironment": "jsdom"
   },
   "dependencies": {
-    "@tldraw/state": "3.16.0-internal.51e99e128bd4",
-    "@tldraw/utils": "3.16.0-internal.51e99e128bd4"
+    "@tldraw/state": "3.16.0-internal.a478398270c6",
+    "@tldraw/utils": "3.16.0-internal.a478398270c6"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^15.0.7",
     "@types/lodash": "^4.17.14",
     "@types/react": "^18.3.18",
     "lodash": "^4.17.21",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "vitest": "^3.2.4"
+    "react-dom": "^18.3.1"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",

package/src/lib/useComputed.test.tsx

@@ -1,7 +1,6 @@
 import { act, render, RenderResult } from '@testing-library/react'
 import { Atom, Computed } from '@tldraw/state'
 import { useState } from 'react'
-import { vi } from 'vitest'
 import { useAtom } from './useAtom'
 import { useComputed } from './useComputed'
 import { useValue } from './useValue'
@@ -77,7 +76,7 @@ test('useComputed allows optionally passing options', async () => {
 	let theComputed = null as null | Computed<number>
 	let theAtom = null as null | Atom<number>
 	let setCount = null as null | ((count: number) => void)
-	const isEqual = vi.fn((a, b) => a === b)
+	const isEqual = jest.fn((a, b) => a === b)
 	function Component() {
 		const [count, _setCount] = useState(0)
 		setCount = _setCount

package/src/lib/useReactor.ts

@@ -1,22 +1,28 @@
 import { EffectScheduler } from '@tldraw/state'
-import { throttleToNextFrame } from '@tldraw/utils'
-import { useEffect } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 
 /** @public */
 export function useReactor(name: string, reactFn: () => void, deps: undefined | any[] = []) {
+	const raf = useRef(-1)
+	const scheduler = useMemo(
+		() =>
+			new EffectScheduler(name, reactFn, {
+				scheduleEffect: (cb) => {
+					const rafId = requestAnimationFrame(cb)
+					raf.current = rafId
+					return rafId
+				},
+			}),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		deps
+	)
+
 	useEffect(() => {
-		let cancelFn: () => void | undefined
-		const scheduler = new EffectScheduler(name, reactFn, {
-			scheduleEffect: (cb) => {
-				cancelFn = throttleToNextFrame(cb)
-			},
-		})
 		scheduler.attach()
 		scheduler.execute()
 		return () => {
 			scheduler.detach()
-			cancelFn?.()
+			cancelAnimationFrame(raf.current)
 		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, deps)
+	}, [scheduler])
 }

package/src/lib/useValue.test.tsx

@@ -1,37 +1,10 @@
 import { RenderResult, act, render } from '@testing-library/react'
 import { Atom, Computed, atom } from '@tldraw/state'
-import { Component, ReactNode, useState } from 'react'
-import { vi } from 'vitest'
+import { useState } from 'react'
 import { useAtom } from './useAtom'
 import { useComputed } from './useComputed'
 import { useValue } from './useValue'
 
-// Error boundary component for testing
-class TestErrorBoundary extends Component<
-	{ children: ReactNode; onError?(error: Error): void },
-	{ hasError: boolean; error: Error | null }
-> {
-	constructor(props: { children: ReactNode; onError?(error: Error): void }) {
-		super(props)
-		this.state = { hasError: false, error: null }
-	}
-
-	static getDerivedStateFromError(error: Error) {
-		return { hasError: true, error }
-	}
-
-	override componentDidCatch(error: Error) {
-		this.props.onError?.(error)
-	}
-
-	override render() {
-		if (this.state.hasError) {
-			return <div data-testid="error-boundary">Error: {this.state.error?.message}</div>
-		}
-		return this.props.children
-	}
-}
-
 test('useValue returns a value from a computed', async () => {
 	let theComputed = null as null | Computed<number>
 	let theAtom = null as null | Atom<number>
@@ -112,7 +85,6 @@ test('useValue returns a value from a compute function', async () => {
 
 test("useValue doesn't throw when used in a zombie-child component", async () => {
 	const theAtom = atom<Record<string, number>>('map', { a: 1, b: 2, c: 3 })
-	let numThrows = 0
 	function Parent() {
 		const ids = useValue('ids', () => Object.keys(theAtom.get()), [])
 		return (
@@ -127,10 +99,7 @@ test("useValue doesn't throw when used in a zombie-child component", async () =>
 		const value = useValue(
 			'value',
 			() => {
-				if (!(id in theAtom.get())) {
-					numThrows++
-					throw new Error('id not found!')
-				}
+				if (!(id in theAtom.get())) throw new Error('id not found!')
 				return theAtom.get()[id]
 			},
 			[id]
@@ -139,71 +108,16 @@ test("useValue doesn't throw when used in a zombie-child component", async () =>
 	}
 
 	let view: RenderResult
-	act(() => {
+	await act(() => {
 		view = render(<Parent />)
 	})
 
 	expect(view!.asFragment().textContent).toMatchInlineSnapshot('"123"')
 
-	expect(numThrows).toBe(0)
 	// remove id 'b' creating a zombie-child
-	act(() => {
+	await act(() => {
 		theAtom?.update(({ b: _, ...rest }) => rest)
 	})
 
 	expect(view!.asFragment().textContent).toMatchInlineSnapshot('"13"')
-
-	expect(numThrows).toBe(1)
-})
-
-test('useValue throws synchronously during render when the computed throws', async () => {
-	const theAtom = atom<Error | null>('map', null)
-	let caughtError = null as null | Error
-
-	// Suppress React's console.error for this test
-
-	function Component({ id }: { id: string }) {
-		const value = useValue(
-			'value',
-			() => {
-				const error = theAtom.get()
-				if (error) throw error
-				return 1
-			},
-			[id]
-		)
-		return <>{value}</>
-	}
-
-	let view: RenderResult
-	act(() => {
-		view = render(
-			<TestErrorBoundary
-				onError={(error) => {
-					caughtError = error
-				}}
-			>
-				<Component id="a" />
-			</TestErrorBoundary>
-		)
-	})
-
-	expect(view!.asFragment().textContent).toMatchInlineSnapshot('"1"')
-
-	// ignore console.error here because react will log the error to console.error
-	// even though it's caught by the error boundary
-	const originalError = console.error
-	console.error = vi.fn()
-	try {
-		act(() => {
-			theAtom.set(new Error('test'))
-		})
-	} finally {
-		console.error = originalError
-	}
-
-	expect(caughtError).toBeInstanceOf(Error)
-	expect(caughtError?.message).toBe('test')
-	expect(view!.getByTestId('error-boundary')).toBeTruthy()
-	expect(view!.getByTestId('error-boundary').textContent).toBe('Error: test')
 })

package/src/lib/useValue.ts

@@ -1,6 +1,6 @@
 /* eslint-disable prefer-rest-params */
 import { Signal, computed, react } from '@tldraw/state'
-import { useMemo, useSyncExternalStore } from 'react'
+import { useMemo, useRef, useSyncExternalStore } from 'react'
 
 /** @public */
 export function useValue<Value>(value: Signal<Value>): Value
@@ -49,27 +49,52 @@ export function useValue() {
 	const deps = args.length === 3 ? args[2] : [args[0]]
 	const name = args.length === 3 ? args[0] : `useValue(${args[0].name})`
 
-	const { $val, subscribe, getSnapshot } = useMemo(() => {
-		const $val =
-			args.length === 1 ? (args[0] as Signal<any>) : (computed(name, args[1]) as Signal<any>)
+	const isInRender = useRef(true)
+	isInRender.current = true
 
-		return {
-			$val,
-			subscribe: (notify: () => void) => {
-				return react(`useValue(${name})`, () => {
-					try {
-						$val.get()
-					} catch {
-						// Will be rethrown during render if the component doesn't unmount first.
-					}
-					notify()
-				})
-			},
-			getSnapshot: () => $val.lastChangedEpoch,
+	const $val = useMemo(() => {
+		if (args.length === 1) {
+			return args[0]
 		}
+		return computed(name, () => {
+			if (isInRender.current) {
+				return args[1]()
+			} else {
+				try {
+					return args[1]()
+				} catch {
+					// when getSnapshot is called outside of the render phase &
+					// subsequently throws an error, it might be because we're
+					// in a zombie-child state. in that case, we suppress the
+					// error and instead return a new dummy value to trigger a
+					// react re-render. if we were in a zombie child, react will
+					// unmount us instead of re-rendering so the error is
+					// irrelevant. if we're not in a zombie-child, react will
+					// call `getSnapshot` again in the render phase, and the
+					// error will be thrown as expected.
+					return {}
+				}
+			}
+		})
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, deps)
 
-	useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
-	return $val.__unsafe__getWithoutCapture()
+	try {
+		const { subscribe, getSnapshot } = useMemo(() => {
+			return {
+				subscribe: (listen: () => void) => {
+					return react(`useValue(${name})`, () => {
+						$val.get()
+						listen()
+					})
+				},
+				getSnapshot: () => $val.get(),
+			}
+			// eslint-disable-next-line react-hooks/exhaustive-deps
+		}, [$val])
+
+		return useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
+	} finally {
+		isInRender.current = false
+	}
 }