msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

rename to `$effect.allowed`

Browse Source
effect-active
ComputerGuy 2 months ago
parent 3345ed0782
commit 5aff44a83f
13 changed files with 48 additions and 39 deletions
Show Stats Download Patch File Download Diff File

2
.changeset/two-dancers-speak.md
Unescape View File

@ -2,4 +2,4 @@
'svelte': minor 'svelte': minor
--- ---
feat: add `$effect.active` rune feat: add `$effect.allowed` rune

12
documentation/docs/02-runes/04-$effect.md
Unescape View File

@ -255,22 +255,22 @@ const destroy = $effect.root(() => {
destroy(); destroy();
``` ```
## `$effect.active` ## `$effect.allowed`
The `$effect.active` rune is an advanced feature that indicates whether or not an effect or [async `$derived`](await-expressions) can be created in the current context. To improve performance and memory efficiency, effects and async deriveds can only be created when a root effect is active. Root effects are created during component setup, but they can also be programmatically created via `$effect.root`. The `$effect.allowed` rune is an advanced feature that indicates whether or not an effect or [async `$derived`](await-expressions) can be created in the current context. To improve performance and memory efficiency, effects and async deriveds can only be created when a root effect is active. Root effects are created during component setup, but they can also be programmatically created via `$effect.root`.
```svelte ```svelte
<script> <script>
console.log('in component setup', $effect.active()); // true console.log('in component setup', $effect.allowed()); // true
function onclick() { function onclick() {
console.log('after component setup', $effect.active()); // false console.log('after component setup', $effect.allowed()); // false
} }
function ondblclick() { function ondblclick() {
$effect.root(() => { $effect.root(() => {
console.log('in root effect', $effect.active()); // true console.log('in root effect', $effect.allowed()); // true
return () => { return () => {
console.log('in effect teardown', $effect.active()); // false console.log('in effect teardown', $effect.allowed()); // false
} }
})(); })();
} }

14
packages/svelte/src/ambient.d.ts vendored
Unescape View File

@ -238,22 +238,22 @@ declare function $effect(fn: () => void | (() => void)): void;
declare namespace $effect { declare namespace $effect {
/** /**
* The `$effect.active` rune is an advanced feature that indicates whether an effect or async `$derived` can be created in the current context. * The `$effect.allowed` rune is an advanced feature that indicates whether an effect or async `$derived` can be created in the current context.
* Effects and async deriveds can only be created in root effects, which are created during component setup, or can be programmatically created via `$effect.root`. * Effects and async deriveds can only be created in root effects, which are created during component setup, or can be programmatically created via `$effect.root`.
* *
* Example: * Example:
* ```svelte * ```svelte
* <script> * <script>
* console.log('in component setup', $effect.active()); // true * console.log('in component setup', $effect.allowed()); // true
* *
* function onclick() { * function onclick() {
* console.log('after component setup', $effect.active()); // false * console.log('after component setup', $effect.allowed()); // false
* } * }
* function ondblclick() { * function ondblclick() {
* $effect.root(() => { * $effect.root(() => {
* console.log('in root effect', $effect.active()); // true * console.log('in root effect', $effect.allowed()); // true
* return () => { * return () => {
* console.log('in effect teardown', $effect.active()); // false * console.log('in effect teardown', $effect.allowed()); // false
* } * }
* })(); * })();
* } * }
@ -262,9 +262,9 @@ declare namespace $effect {
* <button {ondblclick}>Click me twice!</button> * <button {ondblclick}>Click me twice!</button>
* ``` * ```
* *
* https://svelte.dev/docs/svelte/$effect#$effect.active * https://svelte.dev/docs/svelte/$effect#$effect.allowed
*/ */
export function active(): boolean; export function allowed(): boolean;
/** /**
* Runs code right before a component is mounted to the DOM, and then whenever its dependencies change, i.e. `$state` or `$derived` values. * Runs code right before a component is mounted to the DOM, and then whenever its dependencies change, i.e. `$state` or `$derived` values.
* The timing of the execution is right before the DOM is updated. * The timing of the execution is right before the DOM is updated.

2
packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
Unescape View File

@ -150,7 +150,7 @@ export function CallExpression(node, context) {
break; break;
case '$effect.active': case '$effect.allowed':
case '$effect.tracking': case '$effect.tracking':
if (node.arguments.length !== 0) { if (node.arguments.length !== 0) {
e.rune_invalid_arguments(node, rune); e.rune_invalid_arguments(node, rune);

4
packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js
Unescape View File

@ -17,8 +17,8 @@ export function CallExpression(node, context) {
case '$host': case '$host':
return b.id('$$props.$$host'); return b.id('$$props.$$host');
case '$effect.active': case '$effect.allowed':
return b.call('$.effect_active'); return b.call('$.effect_allowed');
case '$effect.tracking': case '$effect.tracking':
return b.call('$.effect_tracking'); return b.call('$.effect_tracking');

2
packages/svelte/src/compiler/phases/3-transform/server/visitors/CallExpression.js
Unescape View File

@ -16,7 +16,7 @@ export function CallExpression(node, context) {
return b.void0; return b.void0;
} }
if (rune === '$effect.tracking' || rune === '$effect.active') { if (rune === '$effect.tracking' || rune === '$effect.allowed') {
return b.false; return b.false;
} }

2
packages/svelte/src/internal/client/index.js
Unescape View File

@ -107,7 +107,7 @@ export {
} from './reactivity/deriveds.js'; } from './reactivity/deriveds.js';
export { export {
aborted, aborted,
effect_active, effect_allowed,
effect_tracking, effect_tracking,
effect_root, effect_root,
legacy_pre_effect, legacy_pre_effect,

10
packages/svelte/src/internal/client/reactivity/effects.js vendored
Unescape View File

@ -53,7 +53,7 @@ const EFFECT_TEARDOWN = 3;
* If not, a value indicating why is returned. * If not, a value indicating why is returned.
* @returns {number} * @returns {number}
*/ */
function active_root_effect() { function valid_effect_creation_context() {
if (active_effect === null && active_reaction === null) { if (active_effect === null && active_reaction === null) {
return EFFECT_ORPHAN; return EFFECT_ORPHAN;
} }
@ -73,7 +73,7 @@ function active_root_effect() {
* @param {'$effect' | '$effect.pre' | '$inspect'} rune * @param {'$effect' | '$effect.pre' | '$inspect'} rune
*/ */
export function validate_effect(rune) { export function validate_effect(rune) {
const valid_effect_parent = active_root_effect(); const valid_effect_parent = valid_effect_creation_context();
switch (valid_effect_parent) { switch (valid_effect_parent) {
case VALID_EFFECT_PARENT: case VALID_EFFECT_PARENT:
return; return;
@ -195,11 +195,11 @@ export function effect_tracking() {
} }
/** /**
* Internal representation of `$effect.active()` * Internal representation of `$effect.allowed()`
* @returns {boolean} * @returns {boolean}
*/ */
export function effect_active() { export function effect_allowed() {
return active_root_effect() === VALID_EFFECT_PARENT; return valid_effect_creation_context() === VALID_EFFECT_PARENT;
} }
/** /**

2
packages/svelte/src/utils.js
Unescape View File

@ -442,7 +442,7 @@ const RUNES = /** @type {const} */ ([
'$props.id', '$props.id',
'$bindable', '$bindable',
'$effect', '$effect',
'$effect.active', '$effect.allowed',
'$effect.pre', '$effect.pre',
'$effect.tracking', '$effect.tracking',
'$effect.root', '$effect.root',

8
packages/svelte/tests/compiler-errors/samples/effect-active-rune/_config.js
Unescape View File

@ -0,0 +1,8 @@
import { test } from '../../test';
export default test({
error: {
code: 'rune_renamed',
message: '`$effect.active` is now `$effect.tracking`'
}
});

1
packages/svelte/tests/compiler-errors/samples/effect-active-rune/main.svelte.js
Unescape View File

@ -0,0 +1 @@
$effect.active();

14
packages/svelte/tests/signals/test.ts
Unescape View File

@ -4,7 +4,7 @@ import * as $ from '../../src/internal/client/runtime';
import { push, pop } from '../../src/internal/client/context'; import { push, pop } from '../../src/internal/client/context';
import { import {
effect, effect,
effect_active, effect_allowed,
effect_root, effect_root,
render_effect, render_effect,
user_effect, user_effect,
@ -1392,24 +1392,24 @@ describe('signals', () => {
}; };
}); });
test('$effect.active()', () => { test('$effect.allowed()', () => {
const log: Array<string | boolean> = []; const log: Array<string | boolean> = [];
return () => { return () => {
log.push('effect orphan', effect_active()); log.push('effect orphan', effect_allowed());
const destroy = effect_root(() => { const destroy = effect_root(() => {
log.push('effect root', effect_active()); log.push('effect root', effect_allowed());
effect(() => { effect(() => {
log.push('effect', effect_active()); log.push('effect', effect_allowed());
}); });
$.get( $.get(
derived(() => { derived(() => {
log.push('derived', effect_active()); log.push('derived', effect_allowed());
return 1; return 1;
}) })
); );
return () => { return () => {
log.push('effect teardown', effect_active()); log.push('effect teardown', effect_allowed());
}; };
}); });
flushSync(); flushSync();

14
packages/svelte/types/index.d.ts vendored
Unescape View File

@ -3312,22 +3312,22 @@ declare function $effect(fn: () => void | (() => void)): void;
declare namespace $effect { declare namespace $effect {
/** /**
* The `$effect.active` rune is an advanced feature that indicates whether an effect or async `$derived` can be created in the current context. * The `$effect.allowed` rune is an advanced feature that indicates whether an effect or async `$derived` can be created in the current context.
* Effects and async deriveds can only be created in root effects, which are created during component setup, or can be programmatically created via `$effect.root`. * Effects and async deriveds can only be created in root effects, which are created during component setup, or can be programmatically created via `$effect.root`.
* *
* Example: * Example:
* ```svelte * ```svelte
* <script> * <script>
* console.log('in component setup', $effect.active()); // true * console.log('in component setup', $effect.allowed()); // true
* *
* function onclick() { * function onclick() {
* console.log('after component setup', $effect.active()); // false * console.log('after component setup', $effect.allowed()); // false
* } * }
* function ondblclick() { * function ondblclick() {
* $effect.root(() => { * $effect.root(() => {
* console.log('in root effect', $effect.active()); // true * console.log('in root effect', $effect.allowed()); // true
* return () => { * return () => {
* console.log('in effect teardown', $effect.active()); // false * console.log('in effect teardown', $effect.allowed()); // false
* } * }
* })(); * })();
* } * }
@ -3336,9 +3336,9 @@ declare namespace $effect {
* <button {ondblclick}>Click me twice!</button> * <button {ondblclick}>Click me twice!</button>
* ``` * ```
* *
* https://svelte.dev/docs/svelte/$effect#$effect.active * https://svelte.dev/docs/svelte/$effect#$effect.allowed
*/ */
export function active(): boolean; export function allowed(): boolean;
/** /**
* Runs code right before a component is mounted to the DOM, and then whenever its dependencies change, i.e. `$state` or `$derived` values. * Runs code right before a component is mounted to the DOM, and then whenever its dependencies change, i.e. `$state` or `$derived` values.
* The timing of the execution is right before the DOM is updated. * The timing of the execution is right before the DOM is updated.

Write Preview
Loading…
Cancel
Save