feat: add $effect.active rune

trueadm · trueadm · commit 768251ec5e42 · 2024-12-18T19:56:31.000Z
diff --git a/.changeset/eighty-hairs-remain.md b/.changeset/eighty-hairs-remain.md
@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: add $effect.active rune
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
@@ -109,6 +109,7 @@ export function CallExpression(node, context) {
 
 			break;
 
+		case '$effect.active':
 		case '$effect.tracking':
 			if (node.arguments.length !== 0) {
 				e.rune_invalid_arguments(node, rune);
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -53,10 +53,6 @@ export function Identifier(node, context) {
 				parent = /** @type {Expression} */ (context.path[--i]);
 
 				if (!is_rune(name)) {
-					if (name === '$effect.active') {
-						e.rune_renamed(parent, '$effect.active', '$effect.tracking');
-					}
-
 					if (name === '$state.frozen') {
 						e.rune_renamed(parent, '$state.frozen', '$state.raw');
 					}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js
@@ -17,6 +17,9 @@ export function CallExpression(node, context) {
 		case '$effect.tracking':
 			return b.call('$.effect_tracking');
 
+		case '$effect.active':
+			return b.call('$.effect_active');
+
 		case '$state.snapshot':
 			return b.call(
 				'$.snapshot',
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
@@ -25,6 +25,7 @@ export function VariableDeclaration(node, context) {
 			if (
 				!rune ||
 				rune === '$effect.tracking' ||
+				rune === '$effect.active' ||
 				rune === '$effect.root' ||
 				rune === '$inspect' ||
 				rune === '$inspect.trace' ||
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/CallExpression.js
@@ -16,7 +16,7 @@ export function CallExpression(node, context) {
 		return b.id('undefined');
 	}
 
-	if (rune === '$effect.tracking') {
+	if (rune === '$effect.tracking' || rune === '$effect.active') {
 		return b.literal(false);
 	}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
@@ -19,7 +19,13 @@ export function VariableDeclaration(node, context) {
 		for (const declarator of node.declarations) {
 			const init = declarator.init;
 			const rune = get_rune(init, context.state.scope);
-			if (!rune || rune === '$effect.tracking' || rune === '$inspect' || rune === '$effect.root') {
+			if (
+				!rune ||
+				rune === '$effect.tracking' ||
+				rune === '$effect.active' ||
+				rune === '$inspect' ||
+				rune === '$effect.root'
+			) {
 				declarations.push(/** @type {VariableDeclarator} */ (context.visit(declarator)));
 				continue;
 			}
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
@@ -100,6 +100,7 @@ export {
 export { derived, derived_safe_equal } from './reactivity/deriveds.js';
 export {
 	effect_tracking,
+	effect_active,
 	effect_root,
 	legacy_pre_effect,
 	legacy_pre_effect_reset,
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -173,6 +173,14 @@ export function effect_tracking() {
 	return !skip_reaction;
 }
 
+/**
+ * Internal representation of `$effect.active()`
+ * @returns {boolean}
+ */
+export function effect_active() {
+	return active_effect !== null;
+}
+
 /**
  * @param {() => void} fn
  */
diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js
@@ -428,6 +428,7 @@ const RUNES = /** @type {const} */ ([
 	'$effect',
 	'$effect.pre',
 	'$effect.tracking',
+	'$effect.active',
 	'$effect.root',
 	'$inspect',
 	'$inspect().with',
diff --git a/packages/svelte/tests/compiler-errors/samples/effect-active-rune/_config.js b/packages/svelte/tests/compiler-errors/samples/effect-active-rune/_config.js
diff --git a/packages/svelte/tests/compiler-errors/samples/effect-active-rune/main.svelte.js b/packages/svelte/tests/compiler-errors/samples/effect-active-rune/main.svelte.js
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-active/_config.js b/packages/svelte/tests/runtime-runes/samples/effect-active/_config.js
@@ -0,0 +1,19 @@
+import { test } from '../../test';
+
+export default test({
+	ssrHtml: `
+		<p>false</p>
+		<p>false</p>
+		<p>false</p>
+		<p>false</p>
+		<p>false</p>
+	`,
+
+	html: `
+		<p>false</p>
+		<p>true</p>
+		<p>true</p>
+		<p>true</p>
+		<p>true</p>
+	`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-active/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-active/main.svelte
@@ -0,0 +1,19 @@
+<script module>
+	const mod = $effect.active()
+</script>
+
+<script>
+	import { untrack } from 'svelte';
+
+	const foo = $effect.active();
+	let bar = $state(false);
+	$effect.pre(() => {
+		bar = $effect.active();
+	});
+</script>
+
+<p>{mod}</p>
+<p>{foo}</p>
+<p>{bar}</p>
+<p>{(bar, $effect.active())}</p>
+<p>{untrack(() => (bar, $effect.active()))}</p>
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
@@ -1876,10 +1876,10 @@ declare module 'svelte/motion' {
 		 * 	const tween = Tween.of(() => number);
 		 * </script>
 		 * ```
-		 * 
+		 *
 		 */
 		static of<U>(fn: () => U, options?: TweenedOptions<U> | undefined): Tween<U>;
-		
+
 		constructor(value: T, options?: TweenedOptions<T>);
 		/**
 		 * Sets `tween.target` to `value` and returns a `Promise` that resolves if and when `tween.current` catches up to it.
@@ -1898,21 +1898,21 @@ declare module 'svelte/motion' {
 
 declare module 'svelte/reactivity' {
 	export class SvelteDate extends Date {
-		
+
 		constructor(...params: any[]);
 		#private;
 	}
 	export class SvelteSet<T> extends Set<T> {
-		
+
 		constructor(value?: Iterable<T> | null | undefined);
-		
+
 		add(value: T): this;
 		#private;
 	}
 	export class SvelteMap<K, V> extends Map<K, V> {
-		
+
 		constructor(value?: Iterable<readonly [K, V]> | null | undefined);
-		
+
 		set(key: K, value: V): this;
 		#private;
 	}
@@ -1922,7 +1922,7 @@ declare module 'svelte/reactivity' {
 	}
 	const REPLACE: unique symbol;
 	export class SvelteURLSearchParams extends URLSearchParams {
-		
+
 		[REPLACE](params: URLSearchParams): void;
 		#private;
 	}
@@ -1994,7 +1994,7 @@ declare module 'svelte/reactivity' {
 	 */
 	export function createSubscriber(start: (update: () => void) => (() => void) | void): () => void;
 	class ReactiveValue<T> {
-		
+
 		constructor(fn: () => T, onsubscribe: (update: () => void) => void);
 		get current(): T;
 		#private;
@@ -2059,7 +2059,7 @@ declare module 'svelte/reactivity/window' {
 		get current(): number | undefined;
 	};
 	class ReactiveValue<T> {
-		
+
 		constructor(fn: () => T, onsubscribe: (update: () => void) => void);
 		get current(): T;
 		#private;
@@ -2935,6 +2935,8 @@ declare namespace $effect {
 	 */
 	export function tracking(): boolean;
 
+	export function active(): boolean;
+
 	/**
 	 * The `$effect.root` rune is an advanced feature that creates a non-tracked scope that doesn't auto-cleanup. This is useful for
 	 * nested effects that you want to manually control. This rune also allows for creation of effects outside of the component
@@ -3069,4 +3071,4 @@ declare namespace $inspect {
  */
 declare function $host<El extends HTMLElement = HTMLElement>(): El;
 
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'svelte': minor
 +---
++
 +feat: add $effect.active rune
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ export function CallExpression(node, context) {`
`16`	`16`	`return b.id('undefined');`
`17`	`17`	`}`
`18`	`18`
`19`		`- if (rune === '$effect.tracking') {`
	`19`	`+ if (rune === '$effect.tracking' \|\| rune === '$effect.active') {`
`20`	`20`	`return b.literal(false);`
`21`	`21`	`}`
`22`	`22`