@tldraw/state-react 3.16.0-internal.a478398270c6 → 3.16.0-internal.f8b97f0c414f

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.a478398270c6",
+  "3.16.0-internal.f8b97f0c414f",
   "cjs"
 );
 //# sourceMappingURL=index.js.map

package/dist-cjs/lib/useReactor.js

@@ -22,27 +22,22 @@ __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 = []) {
-  const raf = (0, import_react.useRef)(-1);
-  const scheduler = (0, import_react.useMemo)(
-    () => new import_state.EffectScheduler(name, reactFn, {
+  (0, import_react.useEffect)(() => {
+    let cancelFn;
+    const scheduler = new import_state.EffectScheduler(name, reactFn, {
       scheduleEffect: (cb) => {
-        const rafId = requestAnimationFrame(cb);
-        raf.current = rafId;
-        return rafId;
+        cancelFn = (0, import_utils.throttleToNextFrame)(cb);
       }
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    deps
-  );
-  (0, import_react.useEffect)(() => {
+    });
     scheduler.attach();
     scheduler.execute();
     return () => {
       scheduler.detach();
-      cancelAnimationFrame(raf.current);
+      cancelFn?.();
     };
-  }, [scheduler]);
+  }, deps);
 }
 //# 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 { 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;",
+  "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;",
   "names": []
 }

package/dist-cjs/lib/useValue.js

@@ -27,39 +27,23 @@ 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 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 {};
-        }
-      }
-    });
+  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
+    };
   }, deps);
-  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;
-  }
+  (0, import_react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  return $val.__unsafe__getWithoutCapture();
 }
 //# 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, 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": []
+  "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"]
 }

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.a478398270c6",
+  "3.16.0-internal.f8b97f0c414f",
   "esm"
 );
 export {

package/dist-esm/lib/useReactor.mjs

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

package/dist-esm/lib/useValue.mjs

@@ -1,43 +1,27 @@
 import { computed, react } from "@tldraw/state";
-import { useMemo, useRef, useSyncExternalStore } from "react";
+import { useMemo, 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 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 {};
-        }
-      }
-    });
+  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
+    };
   }, deps);
-  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;
-  }
+  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return $val.__unsafe__getWithoutCapture();
 }
 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, 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": []
+  "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"]
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/state-react",
-  "description": "A tiny little drawing app (react bindings for state).",
-  "version": "3.16.0-internal.a478398270c6",
+  "description": "tldraw infinite canvas SDK (react bindings for state).",
+  "version": "3.16.0-internal.f8b97f0c414f",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -17,6 +17,7 @@
   },
   "keywords": [
     "tldraw",
+    "sdk",
     "drawing",
     "app",
     "development",
@@ -31,38 +32,29 @@
     "src"
   ],
   "scripts": {
-    "test-ci": "lazy inherit",
-    "test": "yarn run -T jest",
-    "test-coverage": "lazy inherit",
+    "test-ci": "yarn run -T vitest run --passWithNoTests",
+    "test": "yarn run -T vitest --passWithNoTests",
+    "test-coverage": "yarn run -T vitest run --coverage --passWithNoTests",
     "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"
-  },
-  "jest": {
-    "preset": "../../internal/config/jest/node/jest-preset.js",
-    "setupFiles": [
-      "raf/polyfill"
-    ],
-    "moduleNameMapper": {
-      "^~(.*)": "<rootDir>/src/$1"
-    },
-    "testEnvironment": "jsdom"
+    "lint": "yarn run -T tsx ../../internal/scripts/lint.ts",
+    "context": "yarn run -T tsx ../../internal/scripts/context.ts"
   },
   "dependencies": {
-    "@tldraw/state": "3.16.0-internal.a478398270c6",
-    "@tldraw/utils": "3.16.0-internal.a478398270c6"
+    "@tldraw/state": "3.16.0-internal.f8b97f0c414f",
+    "@tldraw/utils": "3.16.0-internal.f8b97f0c414f"
   },
   "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"
+    "react-dom": "^18.3.1",
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",

package/src/lib/useComputed.test.tsx

@@ -1,6 +1,7 @@
 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'
@@ -76,7 +77,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 = jest.fn((a, b) => a === b)
+	const isEqual = vi.fn((a, b) => a === b)
 	function Component() {
 		const [count, _setCount] = useState(0)
 		setCount = _setCount

package/src/lib/useReactor.ts

@@ -1,28 +1,22 @@
 import { EffectScheduler } from '@tldraw/state'
-import { useEffect, useMemo, useRef } from 'react'
+import { throttleToNextFrame } from '@tldraw/utils'
+import { useEffect } 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()
-			cancelAnimationFrame(raf.current)
+			cancelFn?.()
 		}
-	}, [scheduler])
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, deps)
 }

package/src/lib/useValue.test.tsx

@@ -1,10 +1,37 @@
 import { RenderResult, act, render } from '@testing-library/react'
 import { Atom, Computed, atom } from '@tldraw/state'
-import { useState } from 'react'
+import { Component, ReactNode, useState } from 'react'
+import { vi } from 'vitest'
 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>
@@ -85,6 +112,7 @@ 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 (
@@ -99,7 +127,10 @@ test("useValue doesn't throw when used in a zombie-child component", async () =>
 		const value = useValue(
 			'value',
 			() => {
-				if (!(id in theAtom.get())) throw new Error('id not found!')
+				if (!(id in theAtom.get())) {
+					numThrows++
+					throw new Error('id not found!')
+				}
 				return theAtom.get()[id]
 			},
 			[id]
@@ -108,16 +139,71 @@ test("useValue doesn't throw when used in a zombie-child component", async () =>
 	}
 
 	let view: RenderResult
-	await act(() => {
+	act(() => {
 		view = render(<Parent />)
 	})
 
 	expect(view!.asFragment().textContent).toMatchInlineSnapshot('"123"')
 
+	expect(numThrows).toBe(0)
 	// remove id 'b' creating a zombie-child
-	await act(() => {
+	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, useRef, useSyncExternalStore } from 'react'
+import { useMemo, useSyncExternalStore } from 'react'
 
 /** @public */
 export function useValue<Value>(value: Signal<Value>): Value
@@ -49,52 +49,27 @@ export function useValue() {
 	const deps = args.length === 3 ? args[2] : [args[0]]
 	const name = args.length === 3 ? args[0] : `useValue(${args[0].name})`
 
-	const isInRender = useRef(true)
-	isInRender.current = true
+	const { $val, subscribe, getSnapshot } = useMemo(() => {
+		const $val =
+			args.length === 1 ? (args[0] as Signal<any>) : (computed(name, args[1]) as Signal<any>)
 
-	const $val = useMemo(() => {
-		if (args.length === 1) {
-			return args[0]
+		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,
 		}
-		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)
 
-	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
-	}
+	useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
+	return $val.__unsafe__getWithoutCapture()
 }