From f168ea10cae27b4a18d68954204abd1d68bcdc91 Mon Sep 17 00:00:00 2001 From: Scott Wu Date: Tue, 24 Dec 2024 14:50:57 +0800 Subject: [PATCH 1/2] Update 04-$effect.md --- documentation/docs/02-runes/04-$effect.md | 66 +++++++++++++---------- 1 file changed, 39 insertions(+), 27 deletions(-) diff --git a/documentation/docs/02-runes/04-$effect.md b/documentation/docs/02-runes/04-$effect.md index b33879522007..ed851ca04b30 100644 --- a/documentation/docs/02-runes/04-$effect.md +++ b/documentation/docs/02-runes/04-$effect.md @@ -1,4 +1,5 @@ --- +NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts title: $effect --- @@ -179,7 +180,13 @@ Apart from the timing, `$effect.pre` works exactly like `$effect`. ## `$effect.tracking` -The `$effect.tracking` rune is an advanced feature that tells you whether or not the code is running inside a tracking context, such as an effect or inside your template ([demo](/playground/untitled#H4sIAAAAAAAACn3PwYrCMBDG8VeZDYIt2PYeY8Dn2HrIhqkU08nQjItS-u6buAt7UDzmz8ePyaKGMWBS-nNRcmdU-hHUTpGbyuvI3KZvDFLal0v4qvtIgiSZUSb5eWSxPfWSc4oB2xDP1XYk8HHiSHkICeXKeruDDQ4Demlldv4y0rmq6z10HQwuJMxGVv4mVVXDwcJS0jP9u3knynwtoKz1vifT_Z9Jhm0WBCcOTlDD8kyspmML5qNpHg40jc3fFryJ0iWsp_UHgz3180oBAAA=)): +```js +// @noErrors +const $effect.tracking: boolean; +``` + +The `$effect.tracking` rune is `true` when used inside a reactive context, such as an `$effect`, `$effect.pre` or in your svelte markup ([demo](/playground/untitled#H4sIAAAAAAAACn3PwYrCMBDG8VeZDYIt2PYeY8Dn2HrIhqkU08nQjItS-u6buAt7UDzmz8ePyaKGMWBS-nNRcmdU-hHUTpGbyuvI3KZvDFLal0v4qvtIgiSZUSb5eWSxPfWSc4oB2xDP1XYk8HHiSHkICeXKeruDDQ4Demlldv4y0rmq6z10HQwuJMxGVv4mVVXDwcJS0jP9u3knynwtoKz1vifT_Z9Jhm0WBCcOTlDD8kyspmML5qNpHg40jc3fFryJ0iWsp_UHgz3180oBAAA=)): + ```svelte

in template: {$effect.tracking()}

``` -This allows you to (for example) add things like subscriptions without causing memory leaks, by putting them in child effects. Here's a `readable` function that listens to changes from a callback function as long as it's inside a tracking context: +This allows you to (for example) add things like subscriptions without causing memory leaks, by putting them in child effects. Here's a `readable` function that listens to changes from a callback function as long as it's inside a reactive context: ```ts import { tick } from 'svelte'; @@ -209,31 +220,32 @@ export default function readable( return { get value() { - // If in a tracking context ... - if ($effect.tracking()) { - $effect(() => { - // ...and there's no subscribers yet... - if (subscribers === 0) { - // ...invoke the function and listen to changes to update state - stop = start((fn) => (value = fn(value))); - } - - subscribers++; - - // The return callback is called once a listener unlistens - return () => { - tick().then(() => { - subscribers--; - // If it was the last subscriber... - if (subscribers === 0) { - // ...stop listening to changes - stop?.(); - stop = null; - } - }); - }; - }); - } + // If not in a reactive context + if (!$effect.tracking()) return value + + // If in a reactive context ... + $effect(() => { + // ...and there's no subscribers yet... + if (subscribers === 0) { + // ...invoke the function and listen to changes to update state + stop = start((fn) => (value = fn(value))); + } + + subscribers++; + + // The return callback is called once a listener unlistens + return () => { + tick().then(() => { + subscribers--; + // If it was the last subscriber... + if (subscribers === 0) { + // ...stop listening to changes + stop?.(); + stop = null; + } + }); + }; + }); return value; } From 18d69f7887068fb8e5db1aa2b1b60cc4894250dc Mon Sep 17 00:00:00 2001 From: Scott Wu Date: Tue, 24 Dec 2024 15:24:56 +0800 Subject: [PATCH 2/2] tweaks --- documentation/docs/02-runes/04-$effect.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/documentation/docs/02-runes/04-$effect.md b/documentation/docs/02-runes/04-$effect.md index ed851ca04b30..262047064213 100644 --- a/documentation/docs/02-runes/04-$effect.md +++ b/documentation/docs/02-runes/04-$effect.md @@ -180,12 +180,12 @@ Apart from the timing, `$effect.pre` works exactly like `$effect`. ## `$effect.tracking` -```js +```ts // @noErrors -const $effect.tracking: boolean; +const $effect.tracking: () => boolean; ``` -The `$effect.tracking` rune is `true` when used inside a reactive context, such as an `$effect`, `$effect.pre` or in your svelte markup ([demo](/playground/untitled#H4sIAAAAAAAACn3PwYrCMBDG8VeZDYIt2PYeY8Dn2HrIhqkU08nQjItS-u6buAt7UDzmz8ePyaKGMWBS-nNRcmdU-hHUTpGbyuvI3KZvDFLal0v4qvtIgiSZUSb5eWSxPfWSc4oB2xDP1XYk8HHiSHkICeXKeruDDQ4Demlldv4y0rmq6z10HQwuJMxGVv4mVVXDwcJS0jP9u3knynwtoKz1vifT_Z9Jhm0WBCcOTlDD8kyspmML5qNpHg40jc3fFryJ0iWsp_UHgz3180oBAAA=)): +This rune is `true` when used inside a reactive context, such as an `$effect`, `$effect.pre` or in your svelte markup ([demo](/playground/untitled#H4sIAAAAAAAACn3PwYrCMBDG8VeZDYIt2PYeY8Dn2HrIhqkU08nQjItS-u6buAt7UDzmz8ePyaKGMWBS-nNRcmdU-hHUTpGbyuvI3KZvDFLal0v4qvtIgiSZUSb5eWSxPfWSc4oB2xDP1XYk8HHiSHkICeXKeruDDQ4Demlldv4y0rmq6z10HQwuJMxGVv4mVVXDwcJS0jP9u3knynwtoKz1vifT_Z9Jhm0WBCcOTlDD8kyspmML5qNpHg40jc3fFryJ0iWsp_UHgz3180oBAAA=)): ```svelte