[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
This commit is contained in:
parent
190ea19caa
commit
0235f84115
4 changed files with 28 additions and 2 deletions
|
@ -13,6 +13,7 @@ import { ComponentType } from 'react';
|
||||||
import { Computed } from '@tldraw/state';
|
import { Computed } from '@tldraw/state';
|
||||||
import { computed } from '@tldraw/state';
|
import { computed } from '@tldraw/state';
|
||||||
import { Dispatch } from 'react';
|
import { Dispatch } from 'react';
|
||||||
|
import { EffectScheduler } from '@tldraw/state';
|
||||||
import { EmbedDefinition } from '@tldraw/tlschema';
|
import { EmbedDefinition } from '@tldraw/tlschema';
|
||||||
import { EMPTY_ARRAY } from '@tldraw/state';
|
import { EMPTY_ARRAY } from '@tldraw/state';
|
||||||
import EventEmitter from 'eventemitter3';
|
import EventEmitter from 'eventemitter3';
|
||||||
|
@ -85,6 +86,7 @@ import { UnknownRecord } from '@tldraw/store';
|
||||||
import { useComputed } from '@tldraw/state';
|
import { useComputed } from '@tldraw/state';
|
||||||
import { useQuickReactor } from '@tldraw/state';
|
import { useQuickReactor } from '@tldraw/state';
|
||||||
import { useReactor } from '@tldraw/state';
|
import { useReactor } from '@tldraw/state';
|
||||||
|
import { useStateTracking } from '@tldraw/state';
|
||||||
import { useValue } from '@tldraw/state';
|
import { useValue } from '@tldraw/state';
|
||||||
import { VecModel } from '@tldraw/tlschema';
|
import { VecModel } from '@tldraw/tlschema';
|
||||||
import { whyAmIRunning } from '@tldraw/state';
|
import { whyAmIRunning } from '@tldraw/state';
|
||||||
|
@ -1227,6 +1229,8 @@ export class Editor extends EventEmitter<TLEventMap> {
|
||||||
zoomToUser(userId: string, opts?: TLCameraMoveOptions): this;
|
zoomToUser(userId: string, opts?: TLCameraMoveOptions): this;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export { EffectScheduler }
|
||||||
|
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export class Ellipse2d extends Geometry2d {
|
export class Ellipse2d extends Geometry2d {
|
||||||
constructor(config: Omit<Geometry2dOptions, 'isClosed'> & {
|
constructor(config: Omit<Geometry2dOptions, 'isClosed'> & {
|
||||||
|
@ -3508,6 +3512,8 @@ export function useShallowArrayIdentity<T>(arr: readonly T[]): readonly T[];
|
||||||
// @internal (undocumented)
|
// @internal (undocumented)
|
||||||
export function useShallowObjectIdentity<T extends object>(arr: T): T;
|
export function useShallowObjectIdentity<T extends object>(arr: T): T;
|
||||||
|
|
||||||
|
export { useStateTracking }
|
||||||
|
|
||||||
// @public
|
// @public
|
||||||
export function useSvgExportContext(): {
|
export function useSvgExportContext(): {
|
||||||
isDarkMode: boolean;
|
isDarkMode: boolean;
|
||||||
|
|
|
@ -18,6 +18,7 @@ export * from '@tldraw/validate'
|
||||||
|
|
||||||
export {
|
export {
|
||||||
EMPTY_ARRAY,
|
EMPTY_ARRAY,
|
||||||
|
EffectScheduler,
|
||||||
atom,
|
atom,
|
||||||
computed,
|
computed,
|
||||||
react,
|
react,
|
||||||
|
@ -27,6 +28,7 @@ export {
|
||||||
useComputed,
|
useComputed,
|
||||||
useQuickReactor,
|
useQuickReactor,
|
||||||
useReactor,
|
useReactor,
|
||||||
|
useStateTracking,
|
||||||
useValue,
|
useValue,
|
||||||
whyAmIRunning,
|
whyAmIRunning,
|
||||||
type Atom,
|
type Atom,
|
||||||
|
|
|
@ -198,7 +198,7 @@ export function useQuickReactor(name: string, reactFn: () => void, deps?: any[])
|
||||||
// @public (undocumented)
|
// @public (undocumented)
|
||||||
export function useReactor(name: string, reactFn: () => void, deps?: any[] | undefined): void;
|
export function useReactor(name: string, reactFn: () => void, deps?: any[] | undefined): void;
|
||||||
|
|
||||||
// @internal (undocumented)
|
// @public
|
||||||
export function useStateTracking<T>(name: string, render: () => T): T;
|
export function useStateTracking<T>(name: string, render: () => T): T;
|
||||||
|
|
||||||
// @public
|
// @public
|
||||||
|
|
|
@ -1,7 +1,25 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { EffectScheduler } from '../core'
|
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 {
|
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
|
// 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.
|
// defers the actual execution of the effect to the consumer of this hook.
|
||||||
|
|
Loading…
Reference in a new issue