feat: function called as tagged template literal is reactively called

Co-authored-by: Oscar Dominguez <[email protected]>

Author: paoloricciuti

.changeset/serious-owls-think.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: function called as tagged template literal is reactively called

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
 };
 
 /**

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;
-}

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();
+}

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;
+}

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>`);
+	}
+});

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>