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
---
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();
```
## `$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
<script>
console.log('in component setup', $effect.active()); // true
console.log('in component setup', $effect.allowed()); // true
function onclick() {
console.log('after component setup', $effect.active()); // false
console.log('after component setup', $effect.allowed()); // false
}
function ondblclick() {
$effect.root(() => {
console.log('in root effect', $effect.active()); // true
console.log('in root effect', $effect.allowed()); // true
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 {
/**
* 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`.
*
* Example:
* ```svelte
* <script>
* console.log('in component setup', $effect.active()); // true
* console.log('in component setup', $effect.allowed()); // true
*
* function onclick() {
* console.log('after component setup', $effect.active()); // false
* console.log('after component setup', $effect.allowed()); // false
* }
* function ondblclick() {
* $effect.root(() => {
* console.log('in root effect', $effect.active()); // true
* console.log('in root effect', $effect.allowed()); // true
* 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>
* ```
*
* 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.
* 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;
case '$effect.active':
case '$effect.allowed':
case '$effect.tracking':
if (node.arguments.length !== 0) {
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':
return b.id('$$props.$$host');
case '$effect.active':
return b.call('$.effect_active');
case '$effect.allowed':
return b.call('$.effect_allowed');
case '$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;
}
if (rune === '$effect.tracking' || rune === '$effect.active') {
if (rune === '$effect.tracking' || rune === '$effect.allowed') {
return b.false;
}

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

@ -107,7 +107,7 @@ export {
} from './reactivity/deriveds.js';
export {
aborted,
effect_active,
effect_allowed,
effect_tracking,
effect_root,
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.
* @returns {number}
*/
function active_root_effect() {
function valid_effect_creation_context() {
if (active_effect === null && active_reaction === null) {
return EFFECT_ORPHAN;
}
@ -73,7 +73,7 @@ function active_root_effect() {
* @param {'$effect' | '$effect.pre' | '$inspect'} 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) {
case VALID_EFFECT_PARENT:
return;
@ -195,11 +195,11 @@ export function effect_tracking() {
}
/**
* Internal representation of `$effect.active()`
* Internal representation of `$effect.allowed()`
* @returns {boolean}
*/
export function effect_active() {
return active_root_effect() === VALID_EFFECT_PARENT;
export function effect_allowed() {
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',
'$bindable',
'$effect',
'$effect.active',
'$effect.allowed',
'$effect.pre',
'$effect.tracking',
'$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 {
effect,
effect_active,
effect_allowed,
effect_root,
render_effect,
user_effect,
@ -1392,24 +1392,24 @@ describe('signals', () => {
};
});
test('$effect.active()', () => {
test('$effect.allowed()', () => {
const log: Array<string | boolean> = [];
return () => {
log.push('effect orphan', effect_active());
log.push('effect orphan', effect_allowed());
const destroy = effect_root(() => {
log.push('effect root', effect_active());
log.push('effect root', effect_allowed());
effect(() => {
log.push('effect', effect_active());
log.push('effect', effect_allowed());
});
$.get(
derived(() => {
log.push('derived', effect_active());
log.push('derived', effect_allowed());
return 1;
})
);
return () => {
log.push('effect teardown', effect_active());
log.push('effect teardown', effect_allowed());
};
});
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 {
/**
* 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`.
*
* Example:
* ```svelte
* <script>
* console.log('in component setup', $effect.active()); // true
* console.log('in component setup', $effect.allowed()); // true
*
* function onclick() {
* console.log('after component setup', $effect.active()); // false
* console.log('after component setup', $effect.allowed()); // false
* }
* function ondblclick() {
* $effect.root(() => {
* console.log('in root effect', $effect.active()); // true
* console.log('in root effect', $effect.allowed()); // true
* 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>
* ```
*
* 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.
* The timing of the execution is right before the DOM is updated.

Write Preview
Loading…
Cancel
Save