Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Certain directives don't cause `vars` to be `referenced` when compilation isn't with `generate: 'dom'`
At the very least, it looks like `referenced` is false for variables used as actions when `generate: false` is specified. (They look okay when a compiled component is being generated, though.) I'll have to go through and look for any other differences. It's probably also a good idea to extend the `vars` tests so as to run three times for each one (DOM, SSR, false).


Discussion:

Resolving patch:
diff --git a/src/compile/nodes/Action.ts b/src/compile/nodes/Action.ts
--- a/src/compile/nodes/Action.ts
+++ b/src/compile/nodes/Action.ts
@@ -14,6 +14,7 @@ export default class Action extends Node {
 		component.warn_if_undefined(info, scope);
 
 		this.name = info.name;
+		component.qualify(info.name);
 
 		this.expression = info.expression
 			? new Expression(component, this, scope, info.expression)
diff --git a/src/compile/nodes/Animation.ts b/src/compile/nodes/Animation.ts
--- a/src/compile/nodes/Animation.ts
+++ b/src/compile/nodes/Animation.ts
@@ -13,6 +13,7 @@ export default class Animation extends Node {
 		component.warn_if_undefined(info, scope);
 
 		this.name = info.name;
+		component.qualify(info.name);
 
 		if (parent.animation) {
 			component.error(this, {
diff --git a/src/compile/nodes/Transition.ts b/src/compile/nodes/Transition.ts
--- a/src/compile/nodes/Transition.ts
+++ b/src/compile/nodes/Transition.ts
@@ -15,6 +15,8 @@ export default class Transition extends Node {
 		component.warn_if_undefined(info, scope);
 
 		this.name = info.name;
+		component.qualify(info.name);
+
 		this.directive = info.intro && info.outro ? 'transition' : info.intro ? 'in' : 'out';
 		this.is_local = info.modifiers.includes('local');
 


Test patch:
diff --git a/test/vars/index.js b/test/vars/index.js
--- a/test/vars/index.js
+++ b/test/vars/index.js
@@ -14,47 +14,41 @@ describe('vars', () => {
 			throw new Error('Forgot to remove `solo: true` from test');
 		}
 
-		(solo ? it.only : skip ? it.skip : it)(dir, () => {
-			const config = loadConfig(`./vars/samples/${dir}/_config.js`);
-			const filename = `test/vars/samples/${dir}/input.svelte`;
-			const input = fs.readFileSync(filename, 'utf-8').replace(/\s+$/, '');
-
-			const expectedError = tryToLoadJson(
-				`test/vars/samples/${dir}/error.json`
-			);
-
-			let result;
-			let error;
-
-			try {
-				result = svelte.compile(input, config.options);
-				config.test(assert, result.vars);
-			} catch (e) {
-				error = e;
-			}
-
-			if (error || expectedError) {
-				if (error && !expectedError) {
-					throw error;
+		for (const generate of ['dom', 'ssr', false]) {
+			(solo ? it.only : skip ? it.skip : it)(`${dir}, generate: ${generate}`, () => {
+				const config = loadConfig(`./vars/samples/${dir}/_config.js`);
+				const filename = `test/vars/samples/${dir}/input.svelte`;
+				const input = fs.readFileSync(filename, 'utf-8').replace(/\s+$/, '');
+
+				const expectedError = tryToLoadJson(
+					`test/vars/samples/${dir}/error.json`
+				);
+
+				let result;
+				let error;
+
+				try {
+					result = svelte.compile(input, { ...config.options, generate });
+					config.test(assert, result.vars);
+				} catch (e) {
+					error = e;
 				}
 
-				if (expectedError && !error) {
-					throw new Error(`Expected an error: ${expectedError.message}`);
-				}
-
-				assert.equal(error.message, expectedError.message);
-				assert.deepEqual(error.start, expectedError.start);
-				assert.deepEqual(error.end, expectedError.end);
-				assert.equal(error.pos, expectedError.pos);
-			}
-		});
-	});
+				if (error || expectedError) {
+					if (error && !expectedError) {
+						throw error;
+					}
 
-	it('returns a vars object when options.generate is false', () => {
-		const { vars } = svelte.compile('', {
-			generate: false
-		});
+					if (expectedError && !error) {
+						throw new Error(`Expected an error: ${expectedError.message}`);
+					}
 
-		assert.ok(Array.isArray(vars));
+					assert.equal(error.message, expectedError.message);
+					assert.deepEqual(error.start, expectedError.start);
+					assert.deepEqual(error.end, expectedError.end);
+					assert.equal(error.pos, expectedError.pos);
+				}
+			});
+		}
 	});
 });
diff --git a/test/vars/samples/actions/_config.js b/test/vars/samples/actions/_config.js
new file mode 100644
--- /dev/null
+++ b/test/vars/samples/actions/_config.js
@@ -0,0 +1,16 @@
+export default {
+	test(assert, vars) {
+		assert.deepEqual(vars, [
+			{
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				name: 'foo',
+				reassigned: false,
+				referenced: true,
+				writable: true
+			}
+		]);
+	}
+};
diff --git a/test/vars/samples/actions/input.svelte b/test/vars/samples/actions/input.svelte
new file mode 100644
--- /dev/null
+++ b/test/vars/samples/actions/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	let foo;
+</script>
+
+<div use:foo/>
diff --git a/test/vars/samples/animations/_config.js b/test/vars/samples/animations/_config.js
new file mode 100644
--- /dev/null
+++ b/test/vars/samples/animations/_config.js
@@ -0,0 +1,16 @@
+export default {
+	test(assert, vars) {
+		assert.deepEqual(vars, [
+			{
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				name: 'foo',
+				reassigned: false,
+				referenced: true,
+				writable: true
+			}
+		]);
+	}
+};
diff --git a/test/vars/samples/animations/input.svelte b/test/vars/samples/animations/input.svelte
new file mode 100644
--- /dev/null
+++ b/test/vars/samples/animations/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	let foo;
+</script>
+
+{#each [] as x (x)}
+	<div animate:foo/>
+{/each}
diff --git a/test/vars/samples/transitions/_config.js b/test/vars/samples/transitions/_config.js
new file mode 100644
--- /dev/null
+++ b/test/vars/samples/transitions/_config.js
@@ -0,0 +1,36 @@
+export default {
+	test(assert, vars) {
+		assert.deepEqual(vars, [
+			{
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				name: 'foo',
+				reassigned: false,
+				referenced: true,
+				writable: true
+			},
+			{
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				name: 'bar',
+				reassigned: false,
+				referenced: true,
+				writable: true
+			},
+			{
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				name: 'baz',
+				reassigned: false,
+				referenced: true,
+				writable: true
+			}
+		]);
+	}
+};
diff --git a/test/vars/samples/transitions/input.svelte b/test/vars/samples/transitions/input.svelte
new file mode 100644
--- /dev/null
+++ b/test/vars/samples/transitions/input.svelte
@@ -0,0 +1,9 @@
+<script>
+	let foo;
+	let bar;
+	let baz;
+</script>
+
+<div in:foo/>
+<div out:bar/>
+<div transition:baz/>