fix: allow stores in transition,animation,use directives (#10481)

* fix: allow stores in `transition`,`animation`,`use` directives

* ssr

* naming

* linting is broken

* hope it works

* style

* desc

Author: navorite

.changeset/stale-jeans-refuse.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: subscribe to stores in `transition`,`animation`,`use` directives

packages/svelte/src/compiler/phases/3-transform/server/transform-server.js

@@ -362,6 +362,25 @@ function is_store_name(name) {
 	return name[0] === '$' && /[A-Za-z_]/.test(name[1]);
 }
 
+/**
+ *
+ * @param {Iterable<import('#compiler').Binding>} bindings
+ */
+function store_sub_exist(bindings) {
+	for (const binding of bindings) {
+		if (binding.kind === 'store_sub') {
+			for (const reference of binding.references) {
+				const node = reference.path.at(-1);
+
+				// hacky way to ensure the sub is not in a directive e.g. use:$store as it is unneeded
+				if (node?.type !== 'RegularElement') {
+					return true;
+				}
+			}
+		}
+	}
+}
+
 /**
  * @param {import('estree').AssignmentExpression} node
  * @param {import('zimmerframe').Context<import('#compiler').SvelteNode, import('./types').ServerTransformState>} context
@@ -2089,15 +2108,10 @@ export function server_component(analysis, options) {
 		];
 	}
 
-	if (
-		[...analysis.instance.scope.declarations.values()].some(
-			(binding) => binding.kind === 'store_sub'
-		)
-	) {
+	if (store_sub_exist(analysis.instance.scope.declarations.values())) {
 		instance.body.unshift(b.const('$$store_subs', b.object([])));
 		template.body.push(b.stmt(b.call('$.unsubscribe_stores', b.id('$$store_subs'))));
 	}
-
 	// Propagate values of bound props upwards if they're undefined in the parent and have a value.
 	// Don't do this as part of the props retrieval because people could eagerly mutate the prop in the instance script.
 	/** @type {import('estree').Property[]} */

packages/svelte/src/compiler/phases/scope.js

@@ -185,6 +185,7 @@ export class Scope {
 	reference(node, path) {
 		path = [...path]; // ensure that mutations to path afterwards don't affect this reference
 		let references = this.references.get(node.name);
+
 		if (!references) this.references.set(node.name, (references = []));
 
 		references.push({ node, path });
@@ -329,6 +330,18 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 		return /** @type {const} */ ([scope, is_default_slot]);
 	}
 
+	/**
+	 * Reference store in transion:, use:, animate: directives
+	 * @type {import('zimmerframe').Visitor<import('#compiler').Directive, State, import('#compiler').SvelteNode>}
+	 */
+	const SvelteDirective = (node, context) => {
+		const name = node.name;
+
+		if (name[0] === '$') {
+			context.state.scope.reference(b.id(name), context.path);
+		}
+	};
+
 	walk(ast, state, {
 		// references
 		Identifier(node, { path, state }) {
@@ -625,7 +638,11 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 				)
 			]);
 			context.next();
-		}
+		},
+
+		TransitionDirective: SvelteDirective,
+		AnimateDirective: SvelteDirective,
+		UseDirective: SvelteDirective
 
 		// TODO others
 	});

packages/svelte/tests/snapshot/samples/store-transition/_expected/client/main.svelte.js

@@ -0,0 +1,32 @@
+// main.svelte (Svelte VERSION)
+// Note: compiler output will change before 5.0 is released!
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal";
+import { writable } from 'svelte/store';
+
+var frag = $.template(`<div>Hello!</div> <div>Hello!</div>`, true);
+
+export default function Main($$anchor, $$props) {
+	$.push($$props, false);
+
+	const $$subscriptions = {};
+
+	$.unsubscribe_on_destroy($$subscriptions);
+
+	const $animate = () => $.store_get(animate, "$animate", $$subscriptions);
+	const animate = writable();
+
+	$.init();
+
+	/* Init */
+	var fragment = $.open_frag($$anchor, true, frag);
+	var div = $.child_frag(fragment);
+
+	$.in(div, $animate, () => ({ duration: 750, x: 0, y: -200 }), false);
+
+	var div_1 = $.sibling($.sibling(div, true));
+
+	$.action(div_1, ($$node) => $animate()($$node));
+	$.close_frag($$anchor, fragment);
+	$.pop();
+}

packages/svelte/tests/snapshot/samples/store-transition/_expected/server/main.svelte.js

@@ -0,0 +1,13 @@
+// main.svelte (Svelte VERSION)
+// Note: compiler output will change before 5.0 is released!
+import * as $ from "svelte/internal/server";
+import { writable } from 'svelte/store';
+
+export default function Main($$payload, $$props) {
+	$.push(false);
+
+	const animate = writable();
+
+	$$payload.out += `<div>Hello!</div> <div>Hello!</div>`;
+	$.pop();
+}

packages/svelte/tests/snapshot/samples/store-transition/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	import { writable, } from 'svelte/store';
+
+	const animate = writable();
+</script>
+
+<div in:$animate={{ duration: 750, x:0, y: -200}}>Hello!</div>
+<div use:$animate>Hello!</div>