Replace getters in examples (#2261)
Follow up to #2189 ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [x] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version
This commit is contained in:
David Sheldrick
GitHub
parent
263c04e6bf
commit
a55989f420
12 changed files with 56 additions and 56 deletions
|
|
@ -11668,7 +11668,7 @@
|
|||
{
|
||||
"kind": "Method",
|
||||
"canonicalReference": "@tldraw/editor!Editor#getPath:member(1)",
|
||||
"docComment": "/**\n * The editor's current path of active states.\n *\n * @example\n * ```ts\n * editor.path // \"select.idle\"\n * ```\n *\n * @public\n */\n",
|
||||
"docComment": "/**\n * The editor's current path of active states.\n *\n * @example\n * ```ts\n * editor.getPath() // \"select.idle\"\n * ```\n *\n * @public\n */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
|
|
@ -13687,7 +13687,7 @@
|
|||
{
|
||||
"kind": "Method",
|
||||
"canonicalReference": "@tldraw/editor!Editor#getSharedStyles:member(1)",
|
||||
"docComment": "/**\n * A map of all the current styles either in the current selection, or that are relevant to the current tool.\n *\n * @example\n * ```ts\n * const color = editor.sharedStyles.get(DefaultColorStyle)\n * if (color && color.type === 'shared') {\n * print('All selected shapes have the same color:', color.value)\n * }\n * ```\n *\n * @public\n */\n",
|
||||
"docComment": "/**\n * A map of all the current styles either in the current selection, or that are relevant to the current tool.\n *\n * @example\n * ```ts\n * const color = editor.getSharedStyles().get(DefaultColorStyle)\n * if (color && color.type === 'shared') {\n * print('All selected shapes have the same color:', color.value)\n * }\n * ```\n *\n * @public\n */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
|
|
@ -16707,7 +16707,7 @@
|
|||
{
|
||||
"kind": "Method",
|
||||
"canonicalReference": "@tldraw/editor!Editor#resetZoom:member(1)",
|
||||
"docComment": "/**\n * Set the zoom back to 100%.\n *\n * @param point - The screen point to zoom out on. Defaults to the viewport screen center.\n *\n * @param animation - The options for an animation.\n *\n * @example\n * ```ts\n * editor.resetZoom()\n * editor.resetZoom(editor.viewportScreenCenter)\n * editor.resetZoom(editor.viewportScreenCenter, { duration: 200 })\n * ```\n *\n * @public\n */\n",
|
||||
"docComment": "/**\n * Set the zoom back to 100%.\n *\n * @param point - The screen point to zoom out on. Defaults to the viewport screen center.\n *\n * @param animation - The options for an animation.\n *\n * @example\n * ```ts\n * editor.resetZoom()\n * editor.resetZoom(editor.getViewportScreenCenter(), { duration: 200 })\n * editor.resetZoom(editor.getViewportScreenCenter(), { duration: 200 })\n * ```\n *\n * @public\n */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
|
|
@ -20189,7 +20189,7 @@
|
|||
{
|
||||
"kind": "Method",
|
||||
"canonicalReference": "@tldraw/editor!Editor#zoomIn:member(1)",
|
||||
"docComment": "/**\n * Zoom the camera in.\n *\n * @param animation - The options for an animation.\n *\n * @example\n * ```ts\n * editor.zoomIn()\n * editor.zoomIn(editor.viewportScreenCenter, { duration: 120 })\n * editor.zoomIn(editor.inputs.currentScreenPoint, { duration: 120 })\n * ```\n *\n * @public\n */\n",
|
||||
"docComment": "/**\n * Zoom the camera in.\n *\n * @param animation - The options for an animation.\n *\n * @example\n * ```ts\n * editor.zoomIn()\n * editor.zoomIn(editor.getViewportScreenCenter(), { duration: 120 })\n * editor.zoomIn(editor.inputs.currentScreenPoint, { duration: 120 })\n * ```\n *\n * @public\n */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
|
|
@ -20285,7 +20285,7 @@
|
|||
{
|
||||
"kind": "Method",
|
||||
"canonicalReference": "@tldraw/editor!Editor#zoomOut:member(1)",
|
||||
"docComment": "/**\n * Zoom the camera out.\n *\n * @param animation - The options for an animation.\n *\n * @example\n * ```ts\n * editor.zoomOut()\n * editor.zoomOut(editor.viewportScreenCenter, { duration: 120 })\n * editor.zoomOut(editor.inputs.currentScreenPoint, { duration: 120 })\n * ```\n *\n * @public\n */\n",
|
||||
"docComment": "/**\n * Zoom the camera out.\n *\n * @param animation - The options for an animation.\n *\n * @example\n * ```ts\n * editor.zoomOut()\n * editor.zoomOut(editor.getViewportScreenCenter(), { duration: 120 })\n * editor.zoomOut(editor.inputs.currentScreenPoint, { duration: 120 })\n * ```\n *\n * @public\n */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
|
|
|
|||
|
|
@ -1063,7 +1063,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
*
|
||||
* @example
|
||||
* ```ts
|
||||
* editor.path // "select.idle"
|
||||
* editor.getPath() // "select.idle"
|
||||
* ```
|
||||
*
|
||||
* @public
|
||||
|
|
@ -2450,8 +2450,8 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
* @example
|
||||
* ```ts
|
||||
* editor.resetZoom()
|
||||
* editor.resetZoom(editor.viewportScreenCenter)
|
||||
* editor.resetZoom(editor.viewportScreenCenter, { duration: 200 })
|
||||
* editor.resetZoom(editor.getViewportScreenCenter(), { duration: 200 })
|
||||
* editor.resetZoom(editor.getViewportScreenCenter(), { duration: 200 })
|
||||
* ```
|
||||
*
|
||||
* @param point - The screen point to zoom out on. Defaults to the viewport screen center.
|
||||
|
|
@ -2478,7 +2478,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
* @example
|
||||
* ```ts
|
||||
* editor.zoomIn()
|
||||
* editor.zoomIn(editor.viewportScreenCenter, { duration: 120 })
|
||||
* editor.zoomIn(editor.getViewportScreenCenter(), { duration: 120 })
|
||||
* editor.zoomIn(editor.inputs.currentScreenPoint, { duration: 120 })
|
||||
* ```
|
||||
*
|
||||
|
|
@ -2516,7 +2516,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
* @example
|
||||
* ```ts
|
||||
* editor.zoomOut()
|
||||
* editor.zoomOut(editor.viewportScreenCenter, { duration: 120 })
|
||||
* editor.zoomOut(editor.getViewportScreenCenter(), { duration: 120 })
|
||||
* editor.zoomOut(editor.inputs.currentScreenPoint, { duration: 120 })
|
||||
* ```
|
||||
*
|
||||
|
|
@ -7641,7 +7641,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
*
|
||||
* @example
|
||||
* ```ts
|
||||
* const color = editor.sharedStyles.get(DefaultColorStyle)
|
||||
* const color = editor.getSharedStyles().get(DefaultColorStyle)
|
||||
* if (color && color.type === 'shared') {
|
||||
* print('All selected shapes have the same color:', color.value)
|
||||
* }
|
||||
|
|
|
|||
|
|
@ -175,7 +175,7 @@
|
|||
{
|
||||
"kind": "Function",
|
||||
"canonicalReference": "@tldraw/state!atom:function(1)",
|
||||
"docComment": "/**\n * Creates a new [[Atom]].\n *\n * An Atom is a signal that can be updated directly by calling [[Atom.set]] or [[Atom.update]].\n *\n * @example\n * ```ts\n * const name = atom('name', 'John')\n *\n * name.value // 'John'\n *\n * name.set('Jane')\n *\n * name.value // 'Jane'\n * ```\n *\n * @public\n */\n",
|
||||
"docComment": "/**\n * Creates a new [[Atom]].\n *\n * An Atom is a signal that can be updated directly by calling [[Atom.set]] or [[Atom.update]].\n *\n * @example\n * ```ts\n * const name = atom('name', 'John')\n *\n * name.get() // 'John'\n *\n * name.set('Jane')\n *\n * name.get() // 'Jane'\n * ```\n *\n * @public\n */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
|
|
@ -294,7 +294,7 @@
|
|||
{
|
||||
"kind": "Interface",
|
||||
"canonicalReference": "@tldraw/state!Atom:interface",
|
||||
"docComment": "/**\n * An Atom is a signal that can be updated directly by calling [[Atom.set]] or [[Atom.update]].\n *\n * Atoms are created using the [[atom]] function.\n *\n * @example\n * ```ts\n * const name = atom('name', 'John')\n *\n * print(name.value) // 'John'\n * ```\n *\n * @public\n */\n",
|
||||
"docComment": "/**\n * An Atom is a signal that can be updated directly by calling [[Atom.set]] or [[Atom.update]].\n *\n * Atoms are created using the [[atom]] function.\n *\n * @example\n * ```ts\n * const name = atom('name', 'John')\n *\n * print(name.get()) // 'John'\n * ```\n *\n * @public\n */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
|
|
@ -596,7 +596,7 @@
|
|||
{
|
||||
"kind": "Function",
|
||||
"canonicalReference": "@tldraw/state!computed:function(1)",
|
||||
"docComment": "/**\n * Creates a computed signal.\n *\n * @param name - The name of the signal.\n *\n * @param compute - The function that computes the value of the signal.\n *\n * @param options - Options for the signal.\n *\n * @example\n * ```ts\n * const name = atom('name', 'John')\n * const greeting = computed('greeting', () => `Hello ${name.value}!`)\n * console.log(greeting.value) // 'Hello John!'\n * ```\n *\n * `computed` may also be used as a decorator for creating computed getter methods.\n *\n * @example\n * ```ts\n * class Counter {\n * max = 100\n * count = atom<number>(0)\n *\n * @computed getRemaining() {\n * return this.max - this.count.value\n * }\n * }\n * ```\n *\n * You may optionally pass in a [[ComputedOptions]] when used as a decorator:\n *\n * @example\n * ```ts\n * class Counter {\n * max = 100\n * count = atom<number>(0)\n *\n * @computed({isEqual: (a, b) => a === b})\n * getRemaining() {\n * return this.max - this.count.value\n * }\n * }\n * ```\n *\n * @public\n */\n",
|
||||
"docComment": "/**\n * Creates a computed signal.\n *\n * @param name - The name of the signal.\n *\n * @param compute - The function that computes the value of the signal.\n *\n * @param options - Options for the signal.\n *\n * @example\n * ```ts\n * const name = atom('name', 'John')\n * const greeting = computed('greeting', () => `Hello ${name.get()}!`)\n * console.log(greeting.get()) // 'Hello John!'\n * ```\n *\n * `computed` may also be used as a decorator for creating computed getter methods.\n *\n * @example\n * ```ts\n * class Counter {\n * max = 100\n * count = atom<number>(0)\n *\n * @computed getRemaining() {\n * return this.max - this.count.get()\n * }\n * }\n * ```\n *\n * You may optionally pass in a [[ComputedOptions]] when used as a decorator:\n *\n * @example\n * ```ts\n * class Counter {\n * max = 100\n * count = atom<number>(0)\n *\n * @computed({isEqual: (a, b) => a === b})\n * getRemaining() {\n * return this.max - this.count.get()\n * }\n * }\n * ```\n *\n * @public\n */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
|
|
@ -1434,7 +1434,7 @@
|
|||
{
|
||||
"kind": "Function",
|
||||
"canonicalReference": "@tldraw/state!getComputedInstance:function(1)",
|
||||
"docComment": "/**\n * Retrieves the underlying computed instance for a given property created with the [[computed]] decorator.\n *\n * @param obj - The object\n *\n * @param propertyName - The property name\n *\n * @example\n * ```ts\n * class Counter {\n * max = 100\n * count = atom(0)\n *\n * @computed getRemaining() {\n * return this.max - this.count.value\n * }\n * }\n *\n * const c = new Counter()\n * const remaining = getComputedInstance(c, 'getRemaining')\n * remaining.value === 100 // true\n * c.count.set(13)\n * remaining.value === 87 // true\n * ```\n *\n * @public\n */\n",
|
||||
"docComment": "/**\n * Retrieves the underlying computed instance for a given property created with the [[computed]] decorator.\n *\n * @param obj - The object\n *\n * @param propertyName - The property name\n *\n * @example\n * ```ts\n * class Counter {\n * max = 100\n * count = atom(0)\n *\n * @computed getRemaining() {\n * return this.max - this.count.get()\n * }\n * }\n *\n * const c = new Counter()\n * const remaining = getComputedInstance(c, 'getRemaining')\n * remaining.get() === 100 // true\n * c.count.set(13)\n * remaining.get() === 87 // true\n * ```\n *\n * @public\n */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
|
|
@ -1658,7 +1658,7 @@
|
|||
{
|
||||
"kind": "Variable",
|
||||
"canonicalReference": "@tldraw/state!isUninitialized:var",
|
||||
"docComment": "/**\n * Call this inside a computed signal function to determine whether it is the first time the function is being called.\n *\n * Mainly useful for incremental signal computation.\n *\n * @param value - The value to check.\n *\n * @example\n * ```ts\n * const count = atom('count', 0)\n * const double = computed('double', (prevValue) => {\n * if (isUninitialized(prevValue)) {\n * print('First time!')\n * }\n * return count.value * 2\n * })\n * ```\n *\n * @public\n */\n",
|
||||
"docComment": "/**\n * Call this inside a computed signal function to determine whether it is the first time the function is being called.\n *\n * Mainly useful for incremental signal computation.\n *\n * @param value - The value to check.\n *\n * @example\n * ```ts\n * const count = atom('count', 0)\n * const double = computed('double', (prevValue) => {\n * if (isUninitialized(prevValue)) {\n * print('First time!')\n * }\n * return count.get() * 2\n * })\n * ```\n *\n * @public\n */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
|
|
@ -1695,7 +1695,7 @@
|
|||
{
|
||||
"kind": "Function",
|
||||
"canonicalReference": "@tldraw/state!react:function(1)",
|
||||
"docComment": "/**\n * Starts a new effect scheduler, scheduling the effect immediately.\n *\n * Returns a function that can be called to stop the scheduler.\n *\n * @example\n * ```ts\n * const color = atom('color', 'red')\n * const stop = react('set style', () => {\n * divElem.style.color = color.value\n * })\n * color.set('blue')\n * // divElem.style.color === 'blue'\n * stop()\n * color.set('green')\n * // divElem.style.color === 'blue'\n * ```\n *\n * Also useful in React applications for running effects outside of the render cycle.\n *\n * @example\n * ```ts\n * useEffect(() => react('set style', () => {\n * divRef.current.style.color = color.value\n * }), [])\n * ```\n *\n * @public\n */\n",
|
||||
"docComment": "/**\n * Starts a new effect scheduler, scheduling the effect immediately.\n *\n * Returns a function that can be called to stop the scheduler.\n *\n * @example\n * ```ts\n * const color = atom('color', 'red')\n * const stop = react('set style', () => {\n * divElem.style.color = color.get()\n * })\n * color.set('blue')\n * // divElem.style.color === 'blue'\n * stop()\n * color.set('green')\n * // divElem.style.color === 'blue'\n * ```\n *\n * Also useful in React applications for running effects outside of the render cycle.\n *\n * @example\n * ```ts\n * useEffect(() => react('set style', () => {\n * divRef.current.style.color = color.get()\n * }), [])\n * ```\n *\n * @public\n */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
|
|
@ -2304,7 +2304,7 @@
|
|||
{
|
||||
"kind": "Function",
|
||||
"canonicalReference": "@tldraw/state!track:function(1)",
|
||||
"docComment": "/**\n * Returns a tracked version of the given component. Any signals whose values are read while the component renders will be tracked. If any of the tracked signals change later it will cause the component to re-render.\n *\n * This also wraps the component in a React.memo() call, so it will only re-render if the props change.\n *\n * @param baseComponent - The base component to track.\n *\n * @example\n * ```ts\n * const Counter = track(function Counter(props: CounterProps) {\n * const count = useAtom('count', 0)\n * const increment = useCallback(() => count.set(count.value + 1), [count])\n * return <button onClick={increment}>{count.value}</button>\n * })\n * ```\n *\n * @public\n */\n",
|
||||
"docComment": "/**\n * Returns a tracked version of the given component. Any signals whose values are read while the component renders will be tracked. If any of the tracked signals change later it will cause the component to re-render.\n *\n * This also wraps the component in a React.memo() call, so it will only re-render if the props change.\n *\n * @param baseComponent - The base component to track.\n *\n * @example\n * ```ts\n * const Counter = track(function Counter(props: CounterProps) {\n * const count = useAtom('count', 0)\n * const increment = useCallback(() => count.set(count.get() + 1), [count])\n * return <button onClick={increment}>{count.get()}</button>\n * })\n * ```\n *\n * @public\n */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
|
|
@ -2451,7 +2451,7 @@
|
|||
{
|
||||
"kind": "Function",
|
||||
"canonicalReference": "@tldraw/state!transaction:function(1)",
|
||||
"docComment": "/**\n * Batches state updates, deferring side effects until after the transaction completes.\n *\n * @param fn - The function to run in a transaction, called with a function to roll back the change.\n *\n * @example\n * ```ts\n * const firstName = atom('John')\n * const lastName = atom('Doe')\n *\n * react('greet', () => {\n * print(`Hello, ${firstName.value} ${lastName.value}!`)\n * })\n *\n * // Logs \"Hello, John Doe!\"\n *\n * transaction(() => {\n * firstName.set('Jane')\n * lastName.set('Smith')\n * })\n *\n * // Logs \"Hello, Jane Smith!\"\n * ```\n *\n * If the function throws, the transaction is aborted and any signals that were updated during the transaction revert to their state before the transaction began.\n *\n * @example\n * ```ts\n * const firstName = atom('John')\n * const lastName = atom('Doe')\n *\n * react('greet', () => {\n * print(`Hello, ${firstName.value} ${lastName.value}!`)\n * })\n *\n * // Logs \"Hello, John Doe!\"\n *\n * transaction(() => {\n * firstName.set('Jane')\n * throw new Error('oops')\n * })\n *\n * // Does not log\n * // firstName.value === 'John'\n * ```\n *\n * A `rollback` callback is passed into the function. Calling this will prevent the transaction from committing and will revert any signals that were updated during the transaction to their state before the transaction began.\n *\n * *\n *\n * @example\n * ```ts\n * const firstName = atom('John')\n * const lastName = atom('Doe')\n *\n * react('greet', () => {\n * print(`Hello, ${firstName.value} ${lastName.value}!`)\n * })\n *\n * // Logs \"Hello, John Doe!\"\n *\n * transaction((rollback) => {\n * firstName.set('Jane')\n * lastName.set('Smith')\n * rollback()\n * })\n *\n * // Does not log\n * // firstName.value === 'John'\n * // lastName.value === 'Doe'\n * ```\n *\n * @public\n */\n",
|
||||
"docComment": "/**\n * Batches state updates, deferring side effects until after the transaction completes.\n *\n * @param fn - The function to run in a transaction, called with a function to roll back the change.\n *\n * @example\n * ```ts\n * const firstName = atom('John')\n * const lastName = atom('Doe')\n *\n * react('greet', () => {\n * print(`Hello, ${firstName.get()} ${lastName.get()}!`)\n * })\n *\n * // Logs \"Hello, John Doe!\"\n *\n * transaction(() => {\n * firstName.set('Jane')\n * lastName.set('Smith')\n * })\n *\n * // Logs \"Hello, Jane Smith!\"\n * ```\n *\n * If the function throws, the transaction is aborted and any signals that were updated during the transaction revert to their state before the transaction began.\n *\n * @example\n * ```ts\n * const firstName = atom('John')\n * const lastName = atom('Doe')\n *\n * react('greet', () => {\n * print(`Hello, ${firstName.get()} ${lastName.get()}!`)\n * })\n *\n * // Logs \"Hello, John Doe!\"\n *\n * transaction(() => {\n * firstName.set('Jane')\n * throw new Error('oops')\n * })\n *\n * // Does not log\n * // firstName.get() === 'John'\n * ```\n *\n * A `rollback` callback is passed into the function. Calling this will prevent the transaction from committing and will revert any signals that were updated during the transaction to their state before the transaction began.\n *\n * *\n *\n * @example\n * ```ts\n * const firstName = atom('John')\n * const lastName = atom('Doe')\n *\n * react('greet', () => {\n * print(`Hello, ${firstName.get()} ${lastName.get()}!`)\n * })\n *\n * // Logs \"Hello, John Doe!\"\n *\n * transaction((rollback) => {\n * firstName.set('Jane')\n * lastName.set('Smith')\n * rollback()\n * })\n *\n * // Does not log\n * // firstName.get() === 'John'\n * // lastName.get() === 'Doe'\n * ```\n *\n * @public\n */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
|
|
@ -2509,7 +2509,7 @@
|
|||
{
|
||||
"kind": "Function",
|
||||
"canonicalReference": "@tldraw/state!unsafe__withoutCapture:function(1)",
|
||||
"docComment": "/**\n * Executes the given function without capturing any parents in the current capture context.\n *\n * This is mainly useful if you want to run an effect only when certain signals change while also dereferencing other signals which should not cause the effect to rerun on their own.\n *\n * @example\n * ```ts\n * const name = atom('name', 'Sam')\n * const time = atom('time', () => new Date().getTime())\n *\n * setInterval(() => {\n * time.set(new Date().getTime())\n * })\n *\n * react('log name changes', () => {\n * \t print(name.value, 'was changed at', unsafe__withoutCapture(() => time.value))\n * })\n *\n * ```\n *\n * @public\n */\n",
|
||||
"docComment": "/**\n * Executes the given function without capturing any parents in the current capture context.\n *\n * This is mainly useful if you want to run an effect only when certain signals change while also dereferencing other signals which should not cause the effect to rerun on their own.\n *\n * @example\n * ```ts\n * const name = atom('name', 'Sam')\n * const time = atom('time', () => new Date().getTime())\n *\n * setInterval(() => {\n * time.set(new Date().getTime())\n * })\n *\n * react('log name changes', () => {\n * \t print(name.get(), 'was changed at', unsafe__withoutCapture(() => time.get()))\n * })\n *\n * ```\n *\n * @public\n */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
|
|
@ -2567,7 +2567,7 @@
|
|||
{
|
||||
"kind": "Function",
|
||||
"canonicalReference": "@tldraw/state!useAtom:function(1)",
|
||||
"docComment": "/**\n * Creates a new atom and returns it. The atom will be created only once.\n *\n * See [[atom]]\n *\n * @example\n * ```ts\n * const Counter = track(function Counter () {\n * const count = useAtom('count', 0)\n * const increment = useCallback(() => count.set(count.value + 1), [count])\n * return <button onClick={increment}>{count.value}</button>\n * })\n * ```\n *\n * @public\n */\n",
|
||||
"docComment": "/**\n * Creates a new atom and returns it. The atom will be created only once.\n *\n * See [[atom]]\n *\n * @example\n * ```ts\n * const Counter = track(function Counter () {\n * const count = useAtom('count', 0)\n * const increment = useCallback(() => count.set(count.get() + 1), [count])\n * return <button onClick={increment}>{count.get()}</button>\n * })\n * ```\n *\n * @public\n */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
|
|
@ -2686,7 +2686,7 @@
|
|||
{
|
||||
"kind": "Function",
|
||||
"canonicalReference": "@tldraw/state!useComputed:function(1)",
|
||||
"docComment": "/**\n * Creates a new computed signal and returns it. The computed signal will be created only once.\n *\n * See [[computed]]\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 = useComputed('fullName', () => `${firstName.value} ${lastName.value}`)\n * return <div>Hello {fullName.value}!</div>\n * })\n * ```\n *\n * @public\n */\n",
|
||||
"docComment": "/**\n * Creates a new computed signal and returns it. The computed signal will be created only once.\n *\n * See [[computed]]\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 = useComputed('fullName', () => `${firstName.get()} ${lastName.get()}`)\n * return <div>Hello {fullName.get()}!</div>\n * })\n * ```\n *\n * @public\n */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
|
|
@ -3070,7 +3070,7 @@
|
|||
{
|
||||
"kind": "Function",
|
||||
"canonicalReference": "@tldraw/state!useValue:function(1)",
|
||||
"docComment": "/**\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 [[track]]\n *\n * @example\n * ```ts\n * const Counter: React.FC = () => {\n * const $count = useAtom('count', 0)\n * const increment = useCallback(() => $count.set($count.value + 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.value} ${lastName.value}`, [\n * firstName,\n * lastName,\n * ])\n * return <div>Hello {fullName}!</div>\n * })\n * ```\n *\n * @public\n */\n",
|
||||
"docComment": "/**\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 [[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 */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
|
|
@ -3223,7 +3223,7 @@
|
|||
{
|
||||
"kind": "Function",
|
||||
"canonicalReference": "@tldraw/state!whyAmIRunning:function(1)",
|
||||
"docComment": "/**\n * A debugging tool that tells you why a computed signal or effect is running. Call in the body of a computed signal or effect function.\n *\n * @example\n * ```ts\n * const name = atom('name', 'Bob')\n * react('greeting', () => {\n * \twhyAmIRunning()\n * \tprint('Hello', name.value)\n * })\n *\n * name.set('Alice')\n *\n * // 'greeting' is running because:\n * // 'name' changed => 'Alice'\n * ```\n *\n * @public\n */\n",
|
||||
"docComment": "/**\n * A debugging tool that tells you why a computed signal or effect is running. Call in the body of a computed signal or effect function.\n *\n * @example\n * ```ts\n * const name = atom('name', 'Bob')\n * react('greeting', () => {\n * \twhyAmIRunning()\n * \tprint('Hello', name.get())\n * })\n *\n * name.set('Alice')\n *\n * // 'greeting' is running because:\n * // 'name' changed => 'Alice'\n * ```\n *\n * @public\n */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
|
|
@ -3251,7 +3251,7 @@
|
|||
{
|
||||
"kind": "Function",
|
||||
"canonicalReference": "@tldraw/state!withDiff:function(1)",
|
||||
"docComment": "/**\n * When writing incrementally-computed signals it is convenient (and usually more performant) to incrementally compute the diff too.\n *\n * You can use this function to wrap the return value of a computed signal function to indicate that the diff should be used instead of calculating a new one with [[AtomOptions.computeDiff]].\n *\n * @param value - The value.\n *\n * @param diff - The diff.\n *\n * @example\n * ```ts\n * const count = atom('count', 0)\n * const double = computed('double', (prevValue) => {\n * const nextValue = count.value * 2\n * if (isUninitialized(prevValue)) {\n * return nextValue\n * }\n * return withDiff(nextValue, nextValue - prevValue)\n * }, { historyLength: 10 })\n * ```\n *\n * @public\n */\n",
|
||||
"docComment": "/**\n * When writing incrementally-computed signals it is convenient (and usually more performant) to incrementally compute the diff too.\n *\n * You can use this function to wrap the return value of a computed signal function to indicate that the diff should be used instead of calculating a new one with [[AtomOptions.computeDiff]].\n *\n * @param value - The value.\n *\n * @param diff - The diff.\n *\n * @example\n * ```ts\n * const count = atom('count', 0)\n * const double = computed('double', (prevValue) => {\n * const nextValue = count.get() * 2\n * if (isUninitialized(prevValue)) {\n * return nextValue\n * }\n * return withDiff(nextValue, nextValue - prevValue)\n * }, { historyLength: 10 })\n * ```\n *\n * @public\n */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ export interface AtomOptions<Value, Diff> {
|
|||
* ```ts
|
||||
* const name = atom('name', 'John')
|
||||
*
|
||||
* print(name.value) // 'John'
|
||||
* print(name.get()) // 'John'
|
||||
* ```
|
||||
*
|
||||
* @public
|
||||
|
|
@ -171,11 +171,11 @@ export class _Atom<Value, Diff = unknown> implements Atom<Value, Diff> {
|
|||
* ```ts
|
||||
* const name = atom('name', 'John')
|
||||
*
|
||||
* name.value // 'John'
|
||||
* name.get() // 'John'
|
||||
*
|
||||
* name.set('Jane')
|
||||
*
|
||||
* name.value // 'Jane'
|
||||
* name.get() // 'Jane'
|
||||
* ```
|
||||
*
|
||||
* @public
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ type UNINITIALIZED = typeof UNINITIALIZED
|
|||
* if (isUninitialized(prevValue)) {
|
||||
* print('First time!')
|
||||
* }
|
||||
* return count.value * 2
|
||||
* return count.get() * 2
|
||||
* })
|
||||
* ```
|
||||
*
|
||||
|
|
@ -53,7 +53,7 @@ class WithDiff<Value, Diff> {
|
|||
* ```ts
|
||||
* const count = atom('count', 0)
|
||||
* const double = computed('double', (prevValue) => {
|
||||
* const nextValue = count.value * 2
|
||||
* const nextValue = count.get() * 2
|
||||
* if (isUninitialized(prevValue)) {
|
||||
* return nextValue
|
||||
* }
|
||||
|
|
@ -220,7 +220,7 @@ export class _Computed<Value, Diff = unknown> implements Computed<Value, Diff> {
|
|||
}
|
||||
|
||||
getDiffSince(epoch: number): RESET_VALUE | Diff[] {
|
||||
// need to call .value to ensure both that this derivation is up to date
|
||||
// need to call .get() to ensure both that this derivation is up to date
|
||||
// and that tracking happens correctly
|
||||
this.get()
|
||||
|
||||
|
|
@ -314,15 +314,15 @@ const isComputedMethodKey = '@@__isComputedMethod__@@'
|
|||
* count = atom(0)
|
||||
*
|
||||
* @computed getRemaining() {
|
||||
* return this.max - this.count.value
|
||||
* return this.max - this.count.get()
|
||||
* }
|
||||
* }
|
||||
*
|
||||
* const c = new Counter()
|
||||
* const remaining = getComputedInstance(c, 'getRemaining')
|
||||
* remaining.value === 100 // true
|
||||
* remaining.get() === 100 // true
|
||||
* c.count.set(13)
|
||||
* remaining.value === 87 // true
|
||||
* remaining.get() === 87 // true
|
||||
* ```
|
||||
*
|
||||
* @param obj - The object
|
||||
|
|
@ -353,8 +353,8 @@ export function getComputedInstance<Obj extends object, Prop extends keyof Obj>(
|
|||
* @example
|
||||
* ```ts
|
||||
* const name = atom('name', 'John')
|
||||
* const greeting = computed('greeting', () => `Hello ${name.value}!`)
|
||||
* console.log(greeting.value) // 'Hello John!'
|
||||
* const greeting = computed('greeting', () => `Hello ${name.get()}!`)
|
||||
* console.log(greeting.get()) // 'Hello John!'
|
||||
* ```
|
||||
*
|
||||
* `computed` may also be used as a decorator for creating computed getter methods.
|
||||
|
|
@ -366,7 +366,7 @@ export function getComputedInstance<Obj extends object, Prop extends keyof Obj>(
|
|||
* count = atom<number>(0)
|
||||
*
|
||||
* @computed getRemaining() {
|
||||
* return this.max - this.count.value
|
||||
* return this.max - this.count.get()
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
|
|
@ -381,7 +381,7 @@ export function getComputedInstance<Obj extends object, Prop extends keyof Obj>(
|
|||
*
|
||||
* @computed({isEqual: (a, b) => a === b})
|
||||
* getRemaining() {
|
||||
* return this.max - this.count.value
|
||||
* return this.max - this.count.get()
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
|
|
|
|||
|
|
@ -175,7 +175,7 @@ export class EffectScheduler<Result> {
|
|||
* ```ts
|
||||
* const color = atom('color', 'red')
|
||||
* const stop = react('set style', () => {
|
||||
* divElem.style.color = color.value
|
||||
* divElem.style.color = color.get()
|
||||
* })
|
||||
* color.set('blue')
|
||||
* // divElem.style.color === 'blue'
|
||||
|
|
@ -190,7 +190,7 @@ export class EffectScheduler<Result> {
|
|||
* @example
|
||||
* ```ts
|
||||
* useEffect(() => react('set style', () => {
|
||||
* divRef.current.style.color = color.value
|
||||
* divRef.current.style.color = color.get()
|
||||
* }), [])
|
||||
* ```
|
||||
*
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ let stack: CaptureStackFrame | null = null
|
|||
* })
|
||||
*
|
||||
* react('log name changes', () => {
|
||||
* print(name.value, 'was changed at', unsafe__withoutCapture(() => time.value))
|
||||
* print(name.get(), 'was changed at', unsafe__withoutCapture(() => time.get()))
|
||||
* })
|
||||
*
|
||||
* ```
|
||||
|
|
@ -134,7 +134,7 @@ export function maybeCaptureParent(p: Signal<any, any>) {
|
|||
* const name = atom('name', 'Bob')
|
||||
* react('greeting', () => {
|
||||
* whyAmIRunning()
|
||||
* print('Hello', name.value)
|
||||
* print('Hello', name.get())
|
||||
* })
|
||||
*
|
||||
* name.set('Alice')
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@ export let currentTransaction = null as Transaction | null
|
|||
* const lastName = atom('Doe')
|
||||
*
|
||||
* react('greet', () => {
|
||||
* print(`Hello, ${firstName.value} ${lastName.value}!`)
|
||||
* print(`Hello, ${firstName.get()} ${lastName.get()}!`)
|
||||
* })
|
||||
*
|
||||
* // Logs "Hello, John Doe!"
|
||||
|
|
@ -165,7 +165,7 @@ export let currentTransaction = null as Transaction | null
|
|||
* const lastName = atom('Doe')
|
||||
*
|
||||
* react('greet', () => {
|
||||
* print(`Hello, ${firstName.value} ${lastName.value}!`)
|
||||
* print(`Hello, ${firstName.get()} ${lastName.get()}!`)
|
||||
* })
|
||||
*
|
||||
* // Logs "Hello, John Doe!"
|
||||
|
|
@ -176,7 +176,7 @@ export let currentTransaction = null as Transaction | null
|
|||
* })
|
||||
*
|
||||
* // Does not log
|
||||
* // firstName.value === 'John'
|
||||
* // firstName.get() === 'John'
|
||||
* ```
|
||||
*
|
||||
* A `rollback` callback is passed into the function.
|
||||
|
|
@ -188,7 +188,7 @@ export let currentTransaction = null as Transaction | null
|
|||
* const lastName = atom('Doe')
|
||||
*
|
||||
* react('greet', () => {
|
||||
* print(`Hello, ${firstName.value} ${lastName.value}!`)
|
||||
* print(`Hello, ${firstName.get()} ${lastName.get()}!`)
|
||||
* })
|
||||
*
|
||||
* // Logs "Hello, John Doe!"
|
||||
|
|
@ -200,8 +200,8 @@ export let currentTransaction = null as Transaction | null
|
|||
* })
|
||||
*
|
||||
* // Does not log
|
||||
* // firstName.value === 'John'
|
||||
* // lastName.value === 'Doe'
|
||||
* // firstName.get() === 'John'
|
||||
* // lastName.get() === 'Doe'
|
||||
* ```
|
||||
*
|
||||
* @param fn - The function to run in a transaction, called with a function to roll back the change.
|
||||
|
|
|
|||
|
|
@ -35,8 +35,8 @@ export const ReactForwardRefSymbol = Symbol.for('react.forward_ref')
|
|||
* ```ts
|
||||
* const Counter = track(function Counter(props: CounterProps) {
|
||||
* const count = useAtom('count', 0)
|
||||
* const increment = useCallback(() => count.set(count.value + 1), [count])
|
||||
* return <button onClick={increment}>{count.value}</button>
|
||||
* const increment = useCallback(() => count.set(count.get() + 1), [count])
|
||||
* return <button onClick={increment}>{count.get()}</button>
|
||||
* })
|
||||
* ```
|
||||
*
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ import { Atom, AtomOptions, atom } from '../core'
|
|||
* ```ts
|
||||
* const Counter = track(function Counter () {
|
||||
* const count = useAtom('count', 0)
|
||||
* const increment = useCallback(() => count.set(count.value + 1), [count])
|
||||
* return <button onClick={increment}>{count.value}</button>
|
||||
* const increment = useCallback(() => count.set(count.get() + 1), [count])
|
||||
* return <button onClick={increment}>{count.get()}</button>
|
||||
* })
|
||||
* ```
|
||||
*
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ import { Computed, ComputedOptions, computed } from '../core'
|
|||
* }
|
||||
*
|
||||
* const Greeter = track(function Greeter ({firstName, lastName}: GreeterProps) {
|
||||
* const fullName = useComputed('fullName', () => `${firstName.value} ${lastName.value}`)
|
||||
* return <div>Hello {fullName.value}!</div>
|
||||
* const fullName = useComputed('fullName', () => `${firstName.get()} ${lastName.get()}`)
|
||||
* return <div>Hello {fullName.get()}!</div>
|
||||
* })
|
||||
* ```
|
||||
*
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { Signal, computed, react } from '../core'
|
|||
* ```ts
|
||||
* const Counter: React.FC = () => {
|
||||
* const $count = useAtom('count', 0)
|
||||
* const increment = useCallback(() => $count.set($count.value + 1), [count])
|
||||
* const increment = useCallback(() => $count.set($count.get() + 1), [count])
|
||||
* const currentCount = useValue($count)
|
||||
* return <button onClick={increment}>{currentCount}</button>
|
||||
* }
|
||||
|
|
@ -27,7 +27,7 @@ import { Signal, computed, react } from '../core'
|
|||
* }
|
||||
*
|
||||
* const Greeter = track(function Greeter({ firstName, lastName }: GreeterProps) {
|
||||
* const fullName = useValue('fullName', () => `${firstName.value} ${lastName.value}`, [
|
||||
* const fullName = useValue('fullName', () => `${firstName.get()} ${lastName.get()}`, [
|
||||
* firstName,
|
||||
* lastName,
|
||||
* ])
|
||||
|
|
|
|||
Loading…
Reference in a new issue