Document more of prism
This commit is contained in:
parent
d522c84aac
commit
e2c98669f9
1 changed files with 55 additions and 0 deletions
|
@ -277,6 +277,40 @@ function memo<T>(
|
||||||
return memo.cachedValue as $IntentionalAny as T
|
return memo.cachedValue as $IntentionalAny as T
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A state hook, similar to react's `useState()`.
|
||||||
|
*
|
||||||
|
* @param key - the key for the state
|
||||||
|
* @param initialValue - the initial value
|
||||||
|
* @returns [currentState, setState]
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* ```ts
|
||||||
|
* import {prism} from 'dataverse'
|
||||||
|
*
|
||||||
|
* // This derivation holds the current mouse position and updates when the mouse moves
|
||||||
|
* const mousePositionD = prism(() => {
|
||||||
|
* const [pos, setPos] = prism.state<[x: number, y: number]>('pos', [0, 0])
|
||||||
|
*
|
||||||
|
* prism.effect(
|
||||||
|
* 'setupListeners',
|
||||||
|
* () => {
|
||||||
|
* const handleMouseMove = (e: MouseEvent) => {
|
||||||
|
* setPos([e.screenX, e.screenY])
|
||||||
|
* }
|
||||||
|
* document.addEventListener('mousemove', handleMouseMove)
|
||||||
|
*
|
||||||
|
* return () => {
|
||||||
|
* document.removeEventListener('mousemove', handleMouseMove)
|
||||||
|
* }
|
||||||
|
* },
|
||||||
|
* [],
|
||||||
|
* )
|
||||||
|
*
|
||||||
|
* return pos
|
||||||
|
* })
|
||||||
|
* ```
|
||||||
|
*/
|
||||||
function state<T>(key: string, initialValue: T): [T, (val: T) => void] {
|
function state<T>(key: string, initialValue: T): [T, (val: T) => void] {
|
||||||
const {b, setValue} = prism.memo(
|
const {b, setValue} = prism.memo(
|
||||||
'state/' + key,
|
'state/' + key,
|
||||||
|
@ -291,6 +325,27 @@ function state<T>(key: string, initialValue: T): [T, (val: T) => void] {
|
||||||
return [b.derivation.getValue(), setValue]
|
return [b.derivation.getValue(), setValue]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This is useful to make sure your code is running inside a `prism()` call.
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* ```ts
|
||||||
|
* import {prism} from '@theatre/dataverse'
|
||||||
|
*
|
||||||
|
* function onlyUsefulInAPrism() {
|
||||||
|
* prism.ensurePrism()
|
||||||
|
* }
|
||||||
|
*
|
||||||
|
* prism(() => {
|
||||||
|
* onlyUsefulInAPrism() // will run fine
|
||||||
|
* })
|
||||||
|
*
|
||||||
|
* setTimeout(() => {
|
||||||
|
* onlyUsefulInAPrism() // throws an error
|
||||||
|
* console.log('This will never get logged')
|
||||||
|
* }, 0)
|
||||||
|
* ```
|
||||||
|
*/
|
||||||
function ensurePrism(): void {
|
function ensurePrism(): void {
|
||||||
const scope = hookScopeStack.peek()
|
const scope = hookScopeStack.peek()
|
||||||
if (!scope) {
|
if (!scope) {
|
||||||
|
|
Loading…
Reference in a new issue