[sdk] make EffectScheduler and useStateTracking public (#4155)

closes #4085 

Neither of these should be too valuable for tldraw users, but they're
also both totally stable and well documented (now) so it should be fine
to make them public?

### Change type

- [ ] `bugfix`
- [ ] `improvement`
- [ ] `feature`
- [x] `api`
- [ ] `other`

### Test plan

1. Create a shape...
2.

- [ ] Unit tests
- [ ] End to end tests

### Release notes

- Made `EffectScheduler` and `useStateTracking` public

packages/editor/api-report.md

@@ -13,6 +13,7 @@ import { ComponentType } from 'react';
 import { Computed } from '@tldraw/state';
 import { computed } from '@tldraw/state';
 import { Dispatch } from 'react';
+import { EffectScheduler } from '@tldraw/state';
 import { EmbedDefinition } from '@tldraw/tlschema';
 import { EMPTY_ARRAY } from '@tldraw/state';
 import EventEmitter from 'eventemitter3';
@@ -85,6 +86,7 @@ import { UnknownRecord } from '@tldraw/store';
 import { useComputed } from '@tldraw/state';
 import { useQuickReactor } from '@tldraw/state';
 import { useReactor } from '@tldraw/state';
+import { useStateTracking } from '@tldraw/state';
 import { useValue } from '@tldraw/state';
 import { VecModel } from '@tldraw/tlschema';
 import { whyAmIRunning } from '@tldraw/state';
@@ -1227,6 +1229,8 @@ export class Editor extends EventEmitter<TLEventMap> {
     zoomToUser(userId: string, opts?: TLCameraMoveOptions): this;
 }
 
+export { EffectScheduler }
+
 // @public (undocumented)
 export class Ellipse2d extends Geometry2d {
     constructor(config: Omit<Geometry2dOptions, 'isClosed'> & {
@@ -3508,6 +3512,8 @@ export function useShallowArrayIdentity<T>(arr: readonly T[]): readonly T[];
 // @internal (undocumented)
 export function useShallowObjectIdentity<T extends object>(arr: T): T;
 
+export { useStateTracking }
+
 // @public
 export function useSvgExportContext(): {
     isDarkMode: boolean;

packages/editor/src/index.ts

@@ -18,6 +18,7 @@ export * from '@tldraw/validate'
 
 export {
 	EMPTY_ARRAY,
+	EffectScheduler,
 	atom,
 	computed,
 	react,
@@ -27,6 +28,7 @@ export {
 	useComputed,
 	useQuickReactor,
 	useReactor,
+	useStateTracking,
 	useValue,
 	whyAmIRunning,
 	type Atom,

packages/state/api-report.md

@@ -198,7 +198,7 @@ export function useQuickReactor(name: string, reactFn: () => void, deps?: any[])
 // @public (undocumented)
 export function useReactor(name: string, reactFn: () => void, deps?: any[] | undefined): void;
 
-// @internal (undocumented)
+// @public
 export function useStateTracking<T>(name: string, render: () => T): T;
 
 // @public

packages/state/src/lib/react/useStateTracking.ts

@@ -1,7 +1,25 @@
 import React from 'react'
 import { EffectScheduler } from '../core'
 
-/** @internal */
+/**
+ * Wraps some synchronous react render logic in a reactive tracking context.
+ *
+ * This allows you to use reactive values transparently.
+ *
+ * @example
+ * ```ts
+ * function MyComponent() {
+ *   return useStateTracking('MyComponent', () => {
+ *     const editor = useEditor()
+ *     return <div>Num shapes: {editor.getCurrentPageShapes().length}</div>
+ *   })
+ * }
+ * ```
+ *
+ * @see the `track` component wrapper, which uses this under the hood.
+ *
+ * @public
+ */
 export function useStateTracking<T>(name: string, render: () => T): T {
 	// This hook creates an effect scheduler that will trigger re-renders when its reactive dependencies change, but it
 	// defers the actual execution of the effect to the consumer of this hook.