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

.changeset/stale-jeans-refuse.md

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

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 });
@@ -287,6 +288,15 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 		next({ scope });
 	};
 
+	/**
+	 * @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);
+	};
+
 	/**
 	 * @param {import('#compiler').ElementLike} node
 	 * @param {Scope} parent
@@ -625,7 +635,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,15 @@
+// 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 $$store_subs = {};
+	const animate = writable();
+
+	$$payload.out += `<div>Hello!</div> <div>Hello!</div>`;
+	$.unsubscribe_stores($$store_subs);
+	$.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>