feat: function called as tagged template literal is reactively called

Co-authored-by: Oscar Dominguez <[email protected]>
sveltejs · Rich-Harris · Aug 2, 2024 · Aug 1, 2024 · Aug 1, 2024 · Aug 2, 2024
commit fc2983f023213ab0a50db5b2cfd402b13d64fb9d
diff --git a/.changeset/serious-owls-think.md b/.changeset/serious-owls-think.md
@@ -0,0  1,5 @@
 ---
 'svelte': patch
 ---
 
 feat: function called as tagged template literal is reactively called
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -23,6  23,7 @@ import { Attribute } from './visitors/Attribute.js';
 import { AwaitBlock } from './visitors/AwaitBlock.js';
 import { BindDirective } from './visitors/BindDirective.js';
 import { CallExpression } from './visitors/CallExpression.js';
 import { TaggedTemplateExpression } from './visitors/TaggedTemplateExpression.js';
 import { ClassBody } from './visitors/ClassBody.js';
 import { ClassDeclaration } from './visitors/ClassDeclaration.js';
 import { ClassDirective } from './visitors/ClassDirective.js';
@@ -164,7  165,8 @@ const visitors = {
 	Text,
 	TitleElement,
 	UpdateExpression,
-	VariableDeclarator
 	VariableDeclarator,
 	TaggedTemplateExpression
 };
 
 /**

diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
@@ -4,7  4,7 @@
 import { get_rune } from '../../scope.js';
 import * as e from '../../../errors.js';
 import { get_parent, unwrap_optional } from '../../../utils/ast.js';
-import { is_safe_identifier } from './shared/utils.js';
 import { is_known_safe_call, is_safe_identifier } from './shared/utils.js';
 
 /**
  * @param {CallExpression} node
@@ -182,28  182,3 @@ export function CallExpression(node, context) {
 		context.next();
 	}
 }
-
-/**
- * @param {CallExpression} node
- * @param {Context} context
- * @returns {boolean}
- */
-function is_known_safe_call(node, context) {
-	const callee = node.callee;
-
-	// String / Number / BigInt / Boolean casting calls
-	if (callee.type === 'Identifier') {
-		const name = callee.name;
-		const binding = context.state.scope.get(name);
-		if (
-			binding === null &&
-			(name === 'BigInt' || name === 'String' || name === 'Number' || name === 'Boolean')
-		) {
-			return true;
-		}
-	}
-
-	// TODO add more cases
-
-	return false;
-}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js
@@ -0,0  1,23 @@
 /** @import { TaggedTemplateExpression, VariableDeclarator } from 'estree' */
 /** @import { Context } from '../types' */
 import { is_known_safe_call } from './shared/utils.js';
 
 /**
  * @param {TaggedTemplateExpression} node
  * @param {Context} context
  */
 export function TaggedTemplateExpression(node, context) {
 	if (context.state.expression && !is_known_safe_call(node, context)) {
 		context.state.expression.has_call = true;
 		context.state.expression.has_state = true;
 	}
 
 	if (node.tag.type === 'Identifier') {
 		const binding = context.state.scope.get(node.tag.name);
 
 		if (binding !== null) {
 			binding.is_called = true;
 		}
 	}
 	context.next();
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
@@ -1,4  1,4 @@
-/** @import { AssignmentExpression, Expression, Pattern, PrivateIdentifier, Super, UpdateExpression, VariableDeclarator } from 'estree' */
 /** @import { AssignmentExpression, CallExpression, Expression, Pattern, PrivateIdentifier, Super, TaggedTemplateExpression, UpdateExpression, VariableDeclarator } from 'estree' */
 /** @import { Fragment } from '#compiler' */
 /** @import { AnalysisState, Context } from '../../types' */
 /** @import { Scope } from '../../../scope' */
@@ -165,3  165,28 @@ export function is_safe_identifier(expression, scope) {
 		binding.kind !== 'rest_prop'
 	);
 }
 
 /**
  * @param {TaggedTemplateExpression | CallExpression} node
  * @param {Context} context
  * @returns {boolean}
  */
 export function is_known_safe_call(node, context) {
 	const callee = node.type === 'TaggedTemplateExpression' ? node.tag : node.callee;
 
 	// String / Number / BigInt / Boolean casting calls
 	if (callee.type === 'Identifier') {
 		const name = callee.name;
 		const binding = context.state.scope.get(name);
 		if (
 			binding === null &&
 			(name === 'BigInt' || name === 'String' || name === 'Number' || name === 'Boolean')
 		) {
 			return true;
 		}
 	}
 
 	// TODO add more cases
 
 	return false;
 }
diff --git a/packages/svelte/tests/runtime-runes/samples/tagged-template-literal-reactive/_config.js b/packages/svelte/tests/runtime-runes/samples/tagged-template-literal-reactive/_config.js
@@ -0,0  1,17 @@
 import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
 	mode: ['client'],
 	async test({ assert, target, ok }) {
 		const button = target.querySelector('button');
 
 		assert.htmlEqual(target.innerHTML, `0 <button></button>`);
 
 		flushSync(() => {
 			button?.click();
 		});
 
 		assert.htmlEqual(target.innerHTML, `1 <button></button>`);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/tagged-template-literal-reactive/main.svelte b/packages/svelte/tests/runtime-runes/samples/tagged-template-literal-reactive/main.svelte
@@ -0,0  1,8 @@
 <script>
 	let count = $state(0);
 	function showCount() {
 		return count;
 	}
 </script>
 
 {showCount``} <button onclick={() => count  }></button>