XUO/SWE-PolyBench huggingface dataset:
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Custom at-rules don't work if not in the last declaration block of a <style> tag
[REPL](https://svelte.dev/repl/6dd5a9e4a7d14a949bfb0850339d8a4b?version=3.6.1)

Custom at-rules, such as `@apply`, aren't parsed properly (and cause a compile-time error!) unless they are in the last declaration block of the component's styles.


Discussion:
This might be something else that #2995 aims to take care of.

Resolving patch:
diff --git a/src/compiler/compile/css/Stylesheet.ts b/src/compiler/compile/css/Stylesheet.ts
--- a/src/compiler/compile/css/Stylesheet.ts
+++ b/src/compiler/compile/css/Stylesheet.ts
@@ -315,7 +315,14 @@ export default class Stylesheet {
 
 				leave: (node: Node) => {
 					if (node.type === 'Rule' || node.type === 'Atrule') stack.pop();
-					if (node.type === 'Atrule') current_atrule = stack[stack.length - 1] as Atrule;
+					if (node.type === 'Atrule') {
+						current_atrule = null;
+						for (let i = stack.length - 1; i >= 0; i--) {
+							if (stack[i] instanceof Atrule) {
+								current_atrule = stack[i] as Atrule;
+							}
+						}
+					}
 				}
 			});
 		} else {


Test patch:
diff --git a/test/css/samples/unknown-at-rule-with-following-rules/expected.css b/test/css/samples/unknown-at-rule-with-following-rules/expected.css
new file mode 100644
--- /dev/null
+++ b/test/css/samples/unknown-at-rule-with-following-rules/expected.css
@@ -0,0 +1 @@
+div.svelte-xyz{@apply --funky-div;}
\ No newline at end of file
diff --git a/test/css/samples/unknown-at-rule-with-following-rules/input.svelte b/test/css/samples/unknown-at-rule-with-following-rules/input.svelte
new file mode 100644
--- /dev/null
+++ b/test/css/samples/unknown-at-rule-with-following-rules/input.svelte
@@ -0,0 +1,11 @@
+<div></div>
+
+<style>
+	div {
+		@apply --funky-div;
+	}
+
+	div {
+		
+	}
+</style>
\ No newline at end of file
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
:not(...) styles are broken
[REPL](https://svelte.technology/repl?version=2.13.1&gist=c80e2cda5f07897ad9eaada7df570cc0). The encapsulator should treat `:not(selector)` as `*:not(selector)`, but it doesn't.


Discussion:
I don't think it is a svelte bug. 
This is the normal behaviour in CSS. 
See this codepen : https://codepen.io/thollander/pen/JzJQKO?editors=1100

The color is inherited by default. 
https://www.w3schools.com/cssref/pr_text_color.asp
So it takes the color of the body property which validates the rule `:not(p)`
However, in the example, you can see border hasn't the same behaviour.


Updated REPL that shows the bug better: https://svelte.dev/repl/3c70b1effcf4442a8280b1c5db8c6f10?version=3.6.2

`:not(xxx)` should be converted to `.svelte-xyz123:not(xxx)`

Resolving patch:
diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts
--- a/src/compiler/compile/css/Selector.ts
+++ b/src/compiler/compile/css/Selector.ts
@@ -61,7 +61,10 @@ export default class Selector {
 			let i = block.selectors.length;
 			while (i--) {
 				const selector = block.selectors[i];
-				if (selector.type === 'PseudoElementSelector' || selector.type === 'PseudoClassSelector') continue;
+				if (selector.type === 'PseudoElementSelector' || selector.type === 'PseudoClassSelector') {
+					if (i === 0) code.prependRight(selector.start, attr);
+					continue;
+				}
 
 				if (selector.type === 'TypeSelector' && selector.name === '*') {
 					code.overwrite(selector.start, selector.end, attr);


Test patch:
diff --git a/test/css/samples/not-selector/expected.css b/test/css/samples/not-selector/expected.css
new file mode 100644
--- /dev/null
+++ b/test/css/samples/not-selector/expected.css
@@ -0,0 +1 @@
+.svelte-xyz:not(.foo){color:red}
\ No newline at end of file
diff --git a/test/css/samples/not-selector/input.svelte b/test/css/samples/not-selector/input.svelte
new file mode 100644
--- /dev/null
+++ b/test/css/samples/not-selector/input.svelte
@@ -0,0 +1,8 @@
+<p class="foo">foo</p>
+<p class="bar">bar</p>
+
+<style>
+	:not(.foo) {
+		color: red;
+	}
+</style>
\ No newline at end of file
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Shorthand methods in object literals disappear
This works fine:

```html
<script>
	import Greeter from './Greeter.svelte';
	const object = {
		getName() {
			return 'foo';
		}
	};
</script>
<Greeter thing={object} />
```

This breaks:

```html
<script>
	import Greeter from './Greeter.svelte';
</script>
<Greeter thing={{
	getName() {
		return 'foo';
	}
}} />
```

```
Can't find variable: getNamefunc_1
```

Looks like there's some too greedy function hoisting going on.

REPL: https://svelte.dev/repl/d1fcf63ccfea462f948fcc4cc16c3028?version=3.4.4

---

EDIT: Another example of shorthand methods breaking in a different way:

```html
<script>
	import Greeter from './Greeter.svelte';
	let name = 'foo';
</script>

<Greeter thing={{
	getName() {
		return name;
	}
}} />
```

Compiler refuses to compile and says: `Unexpected token (Note that you need plugins to import files that are not JavaScript)`

https://svelte.dev/repl/6e2cf0c00f85488195f4a47eee22c1e0?version=3.4.4


Discussion:
"Unexpected token (Note that you need plugins to import files that are not JavaScript)" is an error from Rollup actually, which generally indicates that the Svelte compiler is outputting invalid js, in this case `{ getNamectx.func }`.

Resolving patch:
diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts
--- a/src/compiler/compile/nodes/shared/Expression.ts
+++ b/src/compiler/compile/nodes/shared/Expression.ts
@@ -442,6 +442,10 @@ export default class Expression {
 						`);
 					}
 
+					if (parent && parent.method) {
+						code.prependRight(node.start, ': ');
+					}
+
 					function_expression = null;
 					dependencies = null;
 					contextual_dependencies = null;


Test patch:
diff --git a/test/runtime/samples/shorthand-method-in-template/Foo.svelte b/test/runtime/samples/shorthand-method-in-template/Foo.svelte
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/shorthand-method-in-template/Foo.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let bar;
+</script>
+
+{bar.answer()}
\ No newline at end of file
diff --git a/test/runtime/samples/shorthand-method-in-template/_config.js b/test/runtime/samples/shorthand-method-in-template/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/shorthand-method-in-template/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '42'
+};
\ No newline at end of file
diff --git a/test/runtime/samples/shorthand-method-in-template/main.svelte b/test/runtime/samples/shorthand-method-in-template/main.svelte
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/shorthand-method-in-template/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Foo from './Foo.svelte';
+</script>
+
+<Foo bar={{
+	answer() {
+		return 42;
+	}
+}} />
\ No newline at end of file
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
`get_store_value` doesn't account for RxJS observables
Somewhat adjacent to https://github.com/sveltejs/sapper/issues/781 but I think there's other stuff going on there too.

The support we added for RxJS observables (i.e., allowing for the `.subscribe()` method to also return an _object_ with an `.unsubscribe()` method) does not look like it extended to `get_store_value`.


Discussion:
Here is a minimal repl that demonstrates the bug I was discussing in sveltejs/sapper#781. https://svelte.dev/repl/8bf28363bde34ecb8fa4e9b91a9e397a?version=3.6.3

(I had misdiagnosed the problem earlier and it didn't deal with sapper, so I have closed it)

Resolving patch:
diff --git a/src/runtime/internal/ssr.ts b/src/runtime/internal/ssr.ts
--- a/src/runtime/internal/ssr.ts
+++ b/src/runtime/internal/ssr.ts
@@ -114,9 +114,15 @@ export function create_ssr_component(fn) {
 	};
 }
 
+/**
+ * Get the current value from a store by subscribing and immediately unsubscribing.
+ * @param store readable
+ */
 export function get_store_value<T>(store: Readable<T>): T | undefined {
 	let value;
-	store.subscribe(_ => value = _)();
+	const unsubscribe: any = store.subscribe(_ => value = _);
+	if (unsubscribe.unsubscribe) unsubscribe.unsubscribe();
+	else unsubscribe();
 	return value;
 }
 
diff --git a/src/runtime/store/index.ts b/src/runtime/store/index.ts
--- a/src/runtime/store/index.ts
+++ b/src/runtime/store/index.ts
@@ -1,4 +1,5 @@
 import { run_all, noop, safe_not_equal, is_function } from 'svelte/internal';
+export { get_store_value as get } from 'svelte/internal';
 
 /** Callback to inform of a value updates. */
 type Subscriber<T> = (value: T) => void;
@@ -188,14 +189,4 @@ export function derived<T, S extends Stores>(
 			};
 		}
 	};
-}
-
-/**
- * Get the current value from a store by subscribing and immediately unsubscribing.
- * @param store readable
- */
-export function get<T>(store: Readable<T>): T {
-	let value: T | undefined;
-	store.subscribe((_: T) => value = _)();
-	return value as T;
-}
+}
\ No newline at end of file


Test patch:
diff --git a/test/store/index.ts b/test/store/index.ts
--- a/test/store/index.ts
+++ b/test/store/index.ts
@@ -329,5 +329,18 @@ describe('store', () => {
 			const store = readable(42, () => { });
 			assert.equal(get(store), 42);
 		});
+
+		it('works with RxJS-style observables', () => {
+			const observable = {
+				subscribe(fn) {
+					fn(42);
+					return {
+						unsubscribe: () => {}
+					}
+				}
+			};
+
+			assert.equal(get(observable), 42);
+		});
 	});
 });
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Bindings don't receive context from let variables
Via [this Stack Overflow question](https://stackoverflow.com/questions/56817063/how-to-bind-variable-declared-with-svelte-let-directive).

Using a `let` variable in a binding doesn't work — the binding function isn't passed the relevant context, it seems: https://svelte.dev/repl/278fe8b586f443889632803dcff8bcca?version=3.6.1


Discussion:

Resolving patch:
diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts
--- a/src/compiler/compile/nodes/shared/Expression.ts
+++ b/src/compiler/compile/nodes/shared/Expression.ts
@@ -138,7 +138,8 @@ export default class Expression {
 					}
 
 					if (template_scope.is_let(name)) {
-						if (!function_expression) {
+						if (!function_expression) { // TODO should this be `!lazy` ?
+							contextual_dependencies.add(name);
 							dependencies.add(name);
 						}
 					} else if (template_scope.names.has(name)) {


Test patch:
diff --git a/test/runtime/samples/component-slot-let-in-binding/Nested.svelte b/test/runtime/samples/component-slot-let-in-binding/Nested.svelte
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-in-binding/Nested.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let items;
+</script>
+
+<div>
+	{#each items as item, index}
+		<slot {index}/>
+	{/each}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-in-binding/_config.js b/test/runtime/samples/component-slot-let-in-binding/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-in-binding/_config.js
@@ -0,0 +1,26 @@
+export default {
+	html: `
+		<div>
+			<label>1: <input></label>
+			<label>2: <input></label>
+			<label>3: <input></label>
+		</div>
+	`,
+
+	ssrHtml: `
+		<div>
+			<label>1: <input value="a"></label>
+			<label>2: <input value="b"></label>
+			<label>3: <input value="c"></label>
+		</div>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const inputs = target.querySelectorAll('input');
+
+		inputs[2].value = 'd';
+		await inputs[2].dispatchEvent(new window.Event('input'));
+
+		assert.deepEqual(component.letters, ['a', 'b', 'd']);
+	}
+};
diff --git a/test/runtime/samples/component-slot-let-in-binding/main.svelte b/test/runtime/samples/component-slot-let-in-binding/main.svelte
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-in-binding/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let letters = ['a', 'b', 'c'];
+</script>
+
+<Nested items={letters} let:index>
+	<label>
+		{index + 1}: <input bind:value={letters[index]}>
+	</label>
+</Nested>
\ No newline at end of file
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Global keyframes with no elements not rendered properly
**Reproduce**: https://svelte.dev/repl/fa0c4efb2ae043d78a8d9ed97d1badc1?version=3.6.7
**Issue**: keyframe selectors are eaten


Discussion:

Resolving patch:
diff --git a/src/compiler/compile/css/Stylesheet.ts b/src/compiler/compile/css/Stylesheet.ts
--- a/src/compiler/compile/css/Stylesheet.ts
+++ b/src/compiler/compile/css/Stylesheet.ts
@@ -217,6 +217,11 @@ class Atrule {
 				if (type === 'Identifier') {
 					if (name.startsWith('-global-')) {
 						code.remove(start, start + 8);
+						this.children.forEach((rule: Rule) => {
+							rule.selectors.forEach(selector => {
+								selector.used = true;
+							});
+						});
 					} else {
 						code.overwrite(start, end, keyframes.get(name));
 					}


Test patch:
diff --git a/test/css/samples/global-keyframes-with-no-elements/expected.css b/test/css/samples/global-keyframes-with-no-elements/expected.css
new file mode 100644
--- /dev/null
+++ b/test/css/samples/global-keyframes-with-no-elements/expected.css
@@ -0,0 +1 @@
+@keyframes why{0%{color:red}100%{color:blue}}
\ No newline at end of file
diff --git a/test/css/samples/global-keyframes-with-no-elements/input.svelte b/test/css/samples/global-keyframes-with-no-elements/input.svelte
new file mode 100644
--- /dev/null
+++ b/test/css/samples/global-keyframes-with-no-elements/input.svelte
@@ -0,0 +1,6 @@
+<style>
+	@keyframes -global-why {
+		0% { color: red; }
+		100% { color: blue; }
+	}
+</style>
\ No newline at end of file
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Reactive declarations with $$props don't refire if they reference other values
**Describe the bug**

Reactive declarations that refer to `$$props` should fire whenever any prop changes. Currently, this only holds true if the declaration doesn't reference anything else

**To Reproduce**

https://svelte.dev/repl/b51ee924d6ca407ebed0da276a8cc946?version=3.6.8

**Expected behavior**

Waggling either slider should cause things to be logged to the console.

**Severity**

It's blocking progress on Svelte GL


Discussion:

Resolving patch:
diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts
--- a/src/compiler/compile/render_dom/index.ts
+++ b/src/compiler/compile/render_dom/index.ts
@@ -359,15 +359,11 @@ export default function dom(
 
 		component.reactive_declarations
 			.forEach(d => {
-				let uses_props;
+				const dependencies = Array.from(d.dependencies);
+				const uses_props = !!dependencies.find(n => n === '$$props');
 
-				const condition = Array.from(d.dependencies)
+				const condition = !uses_props && dependencies
 					.filter(n => {
-						if (n === '$$props') {
-							uses_props = true;
-							return false;
-						}
-
 						const variable = component.var_lookup.get(n);
 						return variable && (variable.writable || variable.mutated);
 					})


Test patch:
diff --git a/test/runtime/samples/props-reactive-b/_config.js b/test/runtime/samples/props-reactive-b/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/props-reactive-b/_config.js
@@ -0,0 +1,30 @@
+export default {
+	props: {
+		a: 1,
+		b: 2
+	},
+
+	html: `
+		<p>a: 1</p>
+		<p>b: 2</p>
+		<p>c: 3</p>
+	`,
+
+	async test({ assert, component, target }) {
+		await component.$set({ a: 4 });
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>a: 4</p>
+			<p>b: 2</p>
+			<p>c: 6</p>
+		`);
+
+		await component.$set({ b: 5 });
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>a: 4</p>
+			<p>b: 5</p>
+			<p>c: 9</p>
+		`);
+	}
+};
\ No newline at end of file
diff --git a/test/runtime/samples/props-reactive-b/main.svelte b/test/runtime/samples/props-reactive-b/main.svelte
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/props-reactive-b/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let a;
+	$: c = a + $$props.b;
+</script>
+
+<p>a: {a}</p>
+<p>b: {$$props.b}</p>
+<p>c: {c}</p>
\ No newline at end of file
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Illegal property names aren't quoted for SSR
**Describe the bug**

A component can have a property like `<Foo x-y-z={42}/>`, and it will ordinarily be quoted by the compiler:

```js
var foo = new Foo({ props: { "x-y-z": 42 } });
```

In SSR mode, we get this instead:

```js
return `${validate_component(Foo, 'Foo').$$render($$result, { x-y-z: 42 }, {}, {})}`;
```

This is somewhat contrived (you can only access that property via `$$props['x-y-z']`), but it's a situation I've managed to encounter, and it's easily fixed.

**To Reproduce**

[Voila](https://svelte.dev/repl/07c5045a1d8044ccbba9989ea8198b05?version=3.6.9)

**Severity**

I mean... probably not the highest. But like I say, easy fix


Discussion:

Resolving patch:
diff --git a/src/compiler/compile/render_ssr/handlers/InlineComponent.ts b/src/compiler/compile/render_ssr/handlers/InlineComponent.ts
--- a/src/compiler/compile/render_ssr/handlers/InlineComponent.ts
+++ b/src/compiler/compile/render_ssr/handlers/InlineComponent.ts
@@ -58,7 +58,7 @@ export default function(node: InlineComponent, renderer: Renderer, options: Rend
 					if (attribute.is_spread) {
 						return snip(attribute.expression);
 					} else {
-						return `{ ${attribute.name}: ${get_attribute_value(attribute)} }`;
+						return `{ ${quote_name_if_necessary(attribute.name)}: ${get_attribute_value(attribute)} }`;
 					}
 				})
 				.concat(binding_props.map(p => `{ ${p} }`))
@@ -67,7 +67,7 @@ export default function(node: InlineComponent, renderer: Renderer, options: Rend
 	} else {
 		props = stringify_props(
 			node.attributes
-				.map(attribute => `${attribute.name}: ${get_attribute_value(attribute)}`)
+				.map(attribute => `${quote_name_if_necessary(attribute.name)}: ${get_attribute_value(attribute)}`)
 				.concat(binding_props)
 		);
 	}


Test patch:
diff --git a/test/runtime/samples/prop-quoted/Nested.svelte b/test/runtime/samples/prop-quoted/Nested.svelte
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/prop-quoted/Nested.svelte
@@ -0,0 +1 @@
+{$$props['x-y-z']}
\ No newline at end of file
diff --git a/test/runtime/samples/prop-quoted/_config.js b/test/runtime/samples/prop-quoted/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/prop-quoted/_config.js
@@ -0,0 +1,12 @@
+export default {
+	props: {
+		foo: 1
+	},
+
+	html: `1`,
+
+	async test({ assert, component, target }) {
+		component.foo = 2;
+		assert.htmlEqual(target.innerHTML, `2`);
+	}
+};
\ No newline at end of file
diff --git a/test/runtime/samples/prop-quoted/main.svelte b/test/runtime/samples/prop-quoted/main.svelte
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/prop-quoted/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let foo;
+</script>
+
+<Nested x-y-z={foo}/>
\ No newline at end of file
Repository: sveltejs/svelte (JavaScript) — Feature

Issue:
Support async arrow function for inline event handlers
It would be nice to have `async` inline event handlers without writing the full function in the `<script>` tag like:

```
<button on:click={async () => {await services.saveData()}}>
    Save
</button>
```

Currently, the compiler raises the following compile error

```
ReferenceError: async is not defined.
```

[REPL Demo](https://svelte.dev/repl/6715cdf1e8324c10bc5d4c6e9489bcbf?version=3.6.4)
[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/async_function)



Discussion:
The compiler does not appear to be throwing an error, but the generated code is invalid, and the event handler is not labeled as `async`. This is a bug, but can be worked around for now by defining the click handler in the `<script>` block.
```diff
diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts
index 3702800c..938cd843 100644
--- a/src/compiler/compile/nodes/shared/Expression.ts
+++ b/src/compiler/compile/nodes/shared/Expression.ts
@@ -363,7 +363,7 @@ export default class Expression {
 					}
 
 					const fn = deindent`
-						function ${name}(${args.join(', ')}) ${body}
+						${node.async && 'async '}function${node.generator && '*'} ${name}(${args.join(', ')}) ${body}
 					`;
 
 					if (dependencies.size === 0 && contextual_dependencies.size === 0) {
```

When created fully or partially hoisted function declarations, this makes sure their async-ness and generator-ness are specified correctly. I don't think there's anything else we need to do for this.

Resolving patch:
diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts
--- a/src/compiler/compile/nodes/shared/Expression.ts
+++ b/src/compiler/compile/nodes/shared/Expression.ts
@@ -363,7 +363,7 @@ export default class Expression {
 					}
 
 					const fn = deindent`
-						function ${name}(${args.join(', ')}) ${body}
+						${node.async && 'async '}function${node.generator && '*'} ${name}(${args.join(', ')}) ${body}
 					`;
 
 					if (dependencies.size === 0 && contextual_dependencies.size === 0) {


Test patch:
diff --git a/test/runtime/samples/event-handler-async/_config.js b/test/runtime/samples/event-handler-async/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/event-handler-async/_config.js
@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<button>nothing</button>
+	`,
+};
diff --git a/test/runtime/samples/event-handler-async/main.svelte b/test/runtime/samples/event-handler-async/main.svelte
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/event-handler-async/main.svelte
@@ -0,0 +1 @@
+<button on:click={async () => { await null; }}>nothing</button>
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Commas in generated HTML
**Describe the bug**

When portions of markup are turned into HTML, attributes with interpolated literals (insofar as that's not an oxymoron) contain unwanted commas

**To Reproduce**

```svelte
<div>
  <span class="a/{42}"/>
</div>
```

This needs to be compiled in production mode, since elements are never converted to static HTML in dev mode.

https://svelte.dev/repl/bf37bbf244594248b444a50ad3b95c73?version=3.6.10

**Expected behavior**

The chunks of the attribute should be concatenated without commas

**Severity**

Low, since attributes with interpolated literals are somewhat rare.

**Additional context**

In a case like this...

```svelte
<script>
  const answer = 42;
</script>

<div>
  <span class="a/{answer}"/>
</div>
```

...Svelte should recognise that `answer` cannot change, and so it's ok to use innerHTML:

```diff
-span = element("span");
-attr(span, "class", span_class_value = "a/" + answer);
+div.innerHTML = `<span class="a/${answer}"></span>`;
// ...
-append(div0, span);
```


Discussion:

Resolving patch:
diff --git a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
--- a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
@@ -240,7 +240,7 @@ export default class AttributeWrapper {
 			return chunk.type === 'Text'
 				? chunk.data.replace(/"/g, '\\"')
 				: `\${${chunk.render()}}`;
-		})}"`;
+		}).join('')}"`;
 	}
 }
 


Test patch:
diff --git a/test/runtime/samples/innerhtml-interpolated-literal/_config.js b/test/runtime/samples/innerhtml-interpolated-literal/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/innerhtml-interpolated-literal/_config.js
@@ -0,0 +1,7 @@
+export default {
+	html: `
+		<div>
+			<span class="a/42"/>
+		</div>
+	`
+}
\ No newline at end of file
diff --git a/test/runtime/samples/innerhtml-interpolated-literal/main.svelte b/test/runtime/samples/innerhtml-interpolated-literal/main.svelte
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/innerhtml-interpolated-literal/main.svelte
@@ -0,0 +1,3 @@
+<div>
+	<span class="a/{42}"/>
+</div>
\ No newline at end of file
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Using literal when spreading props generates invalid code
```svelte
<Foo {...{ bar: 42 }}/>
```

generates

```js
			var foo_changes = () ? get_spread_update(foo_spread_levels, [
				{ bar: 42 }
			]) : {};
```

because `{ bar: 42 }` has no dependencies.


Discussion:
https://github.com/sveltejs/svelte/blob/17096e6b0e73e18d701bcf57bb33718b93439caf/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts#L223

I'd assume we should be generating `var ${name_changes} = {};` when `all_dependencies` is empty.

Resolving patch:
diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
--- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
@@ -220,9 +220,9 @@ export default class InlineComponentWrapper extends Wrapper {
 				const conditions = Array.from(all_dependencies).map(dep => `changed.${dep}`).join(' || ');
 
 				updates.push(deindent`
-					var ${name_changes} = ${all_dependencies.size === 1 ? `${conditions}` : `(${conditions})`} ? @get_spread_update(${levels}, [
+					var ${name_changes} = ${conditions ? `(${conditions}) ? @get_spread_update(${levels}, [
 						${changes.join(',\n')}
-					]) : {};
+					]) : {}` : '{}'};
 				`);
 			} else {
 				this.node.attributes


Test patch:
diff --git a/test/runtime/samples/spread-component-literal/Widget.svelte b/test/runtime/samples/spread-component-literal/Widget.svelte
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/spread-component-literal/Widget.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo;
+</script>
+
+<p>foo: {foo}</p>
diff --git a/test/runtime/samples/spread-component-literal/_config.js b/test/runtime/samples/spread-component-literal/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/spread-component-literal/_config.js
@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<div><p>foo: bar</p></div>
+	`
+};
diff --git a/test/runtime/samples/spread-component-literal/main.svelte b/test/runtime/samples/spread-component-literal/main.svelte
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/spread-component-literal/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Widget from './Widget.svelte';
+</script>
+
+<div>
+	<Widget {...{ foo: 'bar' }}/>
+</div>
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Index of elements in each loop are not reactive inside if blocks
REPL: https://svelte.dev/repl?version=3.0.1&gist=5b40d855b7b1627769fdcfff259a9fcb

Index specified on event handlers, inside if blocks within each blocks, do not get updated reactively. However, it does work if the index is displayed inside the if block.

In the above REPL, try removing f2 and then f3. f3 doesn't get removed, since the index remains the same.


Discussion:
Maybe related to #2444?
More minimal example of the bug, also only occurs with keyed each blocks.
See this [REPL](https://svelte.dev/repl/5e6ddfa1ae4c47cfbee57affee264368?version=3.4.4) example based on @pk-iegaa sample

Resolving patch:
diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts
--- a/src/compiler/compile/nodes/shared/Expression.ts
+++ b/src/compiler/compile/nodes/shared/Expression.ts
@@ -147,7 +147,10 @@ export default class Expression {
 
 						contextual_dependencies.add(name);
 
-						if (!lazy) {
+						const owner = template_scope.get_owner(name);
+						const is_index = owner.type === 'EachBlock' && owner.key && name === owner.index;
+
+						if (!lazy || is_index) {
 							template_scope.dependencies_for_name.get(name).forEach(name => dependencies.add(name));
 						}
 					} else {


Test patch:
diff --git a/test/runtime/samples/each-block-keyed-index-in-event-handler/_config.js b/test/runtime/samples/each-block-keyed-index-in-event-handler/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-index-in-event-handler/_config.js
@@ -0,0 +1,18 @@
+export default {
+	html: `
+		<button>remove</button>
+		<button>remove</button>
+		<button>remove</button>
+	`,
+
+	async test({ assert, target, window }) {
+		const click = new window.MouseEvent('click');
+
+		await target.querySelectorAll('button')[1].dispatchEvent(click);
+		await target.querySelectorAll('button')[1].dispatchEvent(click);
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>remove</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/each-block-keyed-index-in-event-handler/main.svelte b/test/runtime/samples/each-block-keyed-index-in-event-handler/main.svelte
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-index-in-event-handler/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	let list = ["a", "b", "c"];
+
+	const remove = index => {
+		list.splice(index, 1);
+		list = list;
+	};
+</script>
+
+{#each list as value, index (value)}
+	{#if value}
+		<button on:click="{e => remove(index)}">
+			remove
+		</button>
+	{/if}
+{/each}
\ No newline at end of file
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Media Element Binding for set currentTime is unreliable
**Describe the bug**
The [Media Element Binding](https://svelte.dev/docs#Media_element_bindings) for setting `bind:currentTime={time}` is unreliable when setting single times.  For example a list of video position index markers.  Clicking on an index, which sets the **currentTime**, doesn't always set the video position.  Where as if I set **currentTime** via the DOM method then it does work every time.

**To Reproduce**
Here's a couple of examples the issue:
https://svelte.dev/repl/3470317362744bf296ae78b688445448?version=3.9.2
https://svelte.dev/repl/17fecf5e4b5449a79f7eda6abc480f19?version=3.9.2



Discussion:

Resolving patch:
diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -468,15 +468,25 @@ export default class ElementWrapper extends Wrapper {
 			// TODO dry this out — similar code for event handlers and component bindings
 			if (has_local_function) {
 				// need to create a block-local function that calls an instance-level function
-				block.builders.init.add_block(deindent`
-					function ${handler}() {
-						${animation_frame && deindent`
-						@_cancelAnimationFrame(${animation_frame});
-						if (!${this.var}.paused) ${animation_frame} = @raf(${handler});`}
-						${needs_lock && `${lock} = true;`}
-						ctx.${handler}.call(${this.var}${contextual_dependencies.size > 0 ? ', ctx' : ''});
-					}
-				`);
+				if (animation_frame) {
+					block.builders.init.add_block(deindent`
+						function ${handler}() {
+							@_cancelAnimationFrame(${animation_frame});
+							if (!${this.var}.paused) {
+								${animation_frame} = @raf(${handler});
+								${needs_lock && `${lock} = true;`}
+							}
+							ctx.${handler}.call(${this.var}${contextual_dependencies.size > 0 ? ', ctx' : ''});
+						}
+					`);
+				} else {
+					block.builders.init.add_block(deindent`
+						function ${handler}() {
+							${needs_lock && `${lock} = true;`}
+							ctx.${handler}.call(${this.var}${contextual_dependencies.size > 0 ? ', ctx' : ''});
+						}
+					`);
+				}
 
 				callee = handler;
 			} else {


Test patch:
diff --git a/test/js/samples/media-bindings/expected.js b/test/js/samples/media-bindings/expected.js
--- a/test/js/samples/media-bindings/expected.js
+++ b/test/js/samples/media-bindings/expected.js
@@ -19,8 +19,10 @@ function create_fragment(ctx) {
 
 	function audio_timeupdate_handler() {
 		cancelAnimationFrame(audio_animationframe);
-		if (!audio.paused) audio_animationframe = raf(audio_timeupdate_handler);
-		audio_updating = true;
+		if (!audio.paused) {
+			audio_animationframe = raf(audio_timeupdate_handler);
+			audio_updating = true;
+		}
 		ctx.audio_timeupdate_handler.call(audio);
 	}
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Store value not set via $-prefix if not used in template
Code for updating store value doesn't generated if store value actually not used in the component even if it used in other components.

REPL: https://svelte.dev/repl/ebcbacf20ea3402c990c92c7caf81ac6?version=3.10.1

If uncomment store usage in template example start to works correctly.


Discussion:
Should be mentioned that this worked in 3.10.0 as per repl url change
thanks — looking into it


Resolving patch:
diff --git a/src/compiler/compile/utils/invalidate.ts b/src/compiler/compile/utils/invalidate.ts
--- a/src/compiler/compile/utils/invalidate.ts
+++ b/src/compiler/compile/utils/invalidate.ts
@@ -18,7 +18,8 @@ export function invalidate(component: Component, scope: Scope, code: MagicString
 			(
 				variable.referenced ||
 				variable.is_reactive_dependency ||
-				variable.export_name
+				variable.export_name ||
+				variable.name[0] === '$'
 			)
 		);
 	});


Test patch:
diff --git a/test/runtime/samples/store-unreferenced/Nested.svelte b/test/runtime/samples/store-unreferenced/Nested.svelte
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/store-unreferenced/Nested.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { count } from './store.js';
+</script>
+
+<p>count: {$count}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/store-unreferenced/_config.js b/test/runtime/samples/store-unreferenced/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/store-unreferenced/_config.js
@@ -0,0 +1,13 @@
+import { count } from './store.js';
+
+export default {
+	html: `<p>count: 0</p>`,
+
+	async test({ assert, component, target }) {
+		await component.increment();
+
+		assert.htmlEqual(target.innerHTML, `<p>count: 1</p>`);
+
+		count.set(0);
+	}
+};
diff --git a/test/runtime/samples/store-unreferenced/main.svelte b/test/runtime/samples/store-unreferenced/main.svelte
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/store-unreferenced/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Nested from './Nested.svelte';
+	import { count } from './store.js';
+
+	export function increment() {
+		$count++;
+	}
+</script>
+
+<Nested />
\ No newline at end of file
diff --git a/test/runtime/samples/store-unreferenced/store.js b/test/runtime/samples/store-unreferenced/store.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/store-unreferenced/store.js
@@ -0,0 +1,3 @@
+import { writable } from '../../../../store';
+
+export const count = writable(0);
\ No newline at end of file
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Incorrect work #each with 'alert' as item name
[See this repl](https://svelte.dev/repl/d7858ca7293a4aadae79d1c13044bb69?version=3.12.1)

This code:
```
{#each alerts as alert}
	<p>{alert}</p>
{/each}
```
display the system alert() function instead the alerts item:
```
function alert() { [native code] }
function alert() { [native code] }
```

Same problem with many system names such as `window`, `document`, `history`, ...

It turns out that many good variable names are banned, also that leads to implicit errors, because I expect that local variables will override the global

Server rendering works correctly, probably because there are no such global variables


Discussion:

Resolving patch:
diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts
--- a/src/compiler/compile/nodes/shared/Expression.ts
+++ b/src/compiler/compile/nodes/shared/Expression.ts
@@ -127,7 +127,7 @@ export default class Expression {
 
 					if (scope.has(name)) return;
 
-					if (globals.has(name) && !component.var_lookup.has(name)) return;
+					if (globals.has(name) && !(component.var_lookup.has(name) || template_scope.names.has(name))) return;
 
 					if (name[0] === '$' && template_scope.names.has(name.slice(1))) {
 						component.error(node, {
@@ -261,7 +261,7 @@ export default class Expression {
 					const { name, nodes } = flatten_reference(node);
 
 					if (scope.has(name)) return;
-					if (globals.has(name) && !component.var_lookup.has(name)) return;
+					if (globals.has(name) && !(component.var_lookup.has(name) || template_scope.names.has(name))) return;
 
 					if (function_expression) {
 						if (template_scope.names.has(name)) {


Test patch:
diff --git a/test/runtime/samples/globals-shadowed-by-each-binding/_config.js b/test/runtime/samples/globals-shadowed-by-each-binding/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/globals-shadowed-by-each-binding/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<p>Alert1</p><p>Alert2</p>',
+};
diff --git a/test/runtime/samples/globals-shadowed-by-each-binding/main.svelte b/test/runtime/samples/globals-shadowed-by-each-binding/main.svelte
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/globals-shadowed-by-each-binding/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	const alerts = ['Alert1', 'Alert2'];
+</script>
+
+{#each alerts as alert}
+	<p>{alert}</p>
+{/each}
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
[svelte@next] Fails to compile with imported stores
Compilation Error:
`Unexpected token (Note that you need plugins to import files that are not JavaScript)`.

REPL: https://svelte.dev/repl/8c33aff5b60b4eb49e721c7b2692862a?version=3.13.0-alpha.0

This works with `version=3.12`.

The package that I am using here exports stores. The `ready` store is defined like this in the package:

```ts
import { writable, derived, Writable } from 'svelte/store'

const _ready = writable<boolean>(false)
export const ready = derived<boolean, Writable<boolean>>(
	_ready,
	$_ready => $_ready
)
```

(The package.json of the package only exports a `module` and no `main`, if that helps.)



Discussion:
The compiler is producing strange malformed js in this case, but only in dev mode. The imports up at the top of the file look like

```js
import {
	SvelteComponentDev,
	component_subscribe,
	detach_dev,
	dispatch_dev,
	init,
	insert_dev,
	noop,
	safe_not_equal,
	set_data_dev,
	text,
	validate_store(ready, 'ready');
} from "svelte/internal";
```

Resolving patch:
diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts
--- a/src/compiler/compile/render_dom/index.ts
+++ b/src/compiler/compile/render_dom/index.ts
@@ -301,7 +301,7 @@ export default function dom(
 			return !variable || variable.hoistable;
 		})
 		.map(({ name }) => b`
-			${component.compile_options.dev && `@validate_store(${name.slice(1)}, '${name.slice(1)}');`}
+			${component.compile_options.dev && b`@validate_store(${name.slice(1)}, '${name.slice(1)}');`}
 			@component_subscribe($$self, ${name.slice(1)}, $$value => $$invalidate('${name}', ${name} = $$value));
 		`);
 


Test patch:
diff --git a/test/runtime/samples/store-imported/_config.js b/test/runtime/samples/store-imported/_config.js
--- a/test/runtime/samples/store-imported/_config.js
+++ b/test/runtime/samples/store-imported/_config.js
@@ -1,4 +1,6 @@
 export default {
+	compileOptions: { dev: true }, // tests `@validate_store` code generation
+
 	html: `
 		<p>42</p>
 	`
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
{:then} without name for resolving value will not compile in certain circumstances
**Describe the bug**
In `{await}` ... `{:then}` blocks, not specifying a name for the resolving value will cause an error which is hard to trace back to the issue. It only happens when the block contains another block(?).
This did not happen in 3.15.0.

``
(plugin svelte) 
Error: Not implemented Empty
``

**To Reproduce**
https://svelte.dev/repl/0eb341643bb4465ca47616f8b1cf2091?version=3.16.0
https://svelte.dev/repl/0eb341643bb4465ca47616f8b1cf2091?version=3.15.0


Discussion:

Resolving patch:
diff --git a/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts b/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts
--- a/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts
+++ b/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts
@@ -206,7 +206,7 @@ export default class AwaitBlockWrapper extends Wrapper {
 
 					} else {
 						const #child_ctx = #ctx.slice();
-						#child_ctx[${value_index}] = ${info}.resolved;
+						${this.node.value && x`#child_ctx[${value_index}] = ${info}.resolved;`}
 						${info}.block.p(#child_ctx, #dirty);
 					}
 				`);
@@ -220,7 +220,7 @@ export default class AwaitBlockWrapper extends Wrapper {
 				block.chunks.update.push(b`
 					{
 						const #child_ctx = #ctx.slice();
-						#child_ctx[${value_index}] = ${info}.resolved;
+						${this.node.value && x`#child_ctx[${value_index}] = ${info}.resolved;`}
 						${info}.block.p(#child_ctx, #dirty);
 					}
 				`);


Test patch:
diff --git a/test/runtime/samples/await-then-no-context/main.svelte b/test/runtime/samples/await-then-no-context/main.svelte
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/await-then-no-context/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	const promise = new Promise(() => {});
+	const test = [1, 2, 3];
+</script>
+
+{#await promise}
+	<div>waiting</div>
+{:then}
+	{#each test as t}
+		<div>t</div>
+	{/each}
+{/await}
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
warning thrown in 3.16.0 when using export for store
**Describe the bug**
An incorrect(?) warning is thrown when exporting a variable that is exclusively used in a "$dereferenced" manner. This warning was not given in 3.15.0.

**To Reproduce**
```
<script>
	export let store
</script>

<div class="{$store?'a':'b'}"></div>
```

https://svelte.dev/repl/809da99693de49acb3474159f9006dcc?version=3.15.0
https://svelte.dev/repl/809da99693de49acb3474159f9006dcc?version=3.16.0


Discussion:

Resolving patch:
diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -465,7 +465,7 @@ export default class Component {
 						extract_names(declarator.id).forEach(name => {
 							const variable = this.var_lookup.get(name);
 							variable.export_name = name;
-							if (variable.writable && !(variable.referenced || variable.referenced_from_script)) {
+							if (variable.writable && !(variable.referenced || variable.referenced_from_script || variable.subscribable)) {
 								this.warn(declarator, {
 									code: `unused-export-let`,
 									message: `${this.name.name} has unused export property '${name}'. If it is for external reference only, please consider using \`export const '${name}'\``
@@ -488,7 +488,7 @@ export default class Component {
 					if (variable) {
 						variable.export_name = specifier.exported.name;
 
-						if (variable.writable && !(variable.referenced || variable.referenced_from_script)) {
+						if (variable.writable && !(variable.referenced || variable.referenced_from_script || variable.subscribable)) {
 							this.warn(specifier, {
 								code: `unused-export-let`,
 								message: `${this.name.name} has unused export property '${specifier.exported.name}'. If it is for external reference only, please consider using \`export const '${specifier.exported.name}'\``


Test patch:
diff --git a/test/validator/samples/unreferenced-variables/input.svelte b/test/validator/samples/unreferenced-variables/input.svelte
--- a/test/validator/samples/unreferenced-variables/input.svelte
+++ b/test/validator/samples/unreferenced-variables/input.svelte
@@ -18,4 +18,8 @@
   function foo() {
     return m + n + o;
   }
+  export let p;
+  export let q;
+  $p;
 </script>
+{$q}
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Autosubscribed stores no longer listed as referenced in `vars`
**Describe the bug**
Since #3945, autosubscribing to a store within the template no longer causes the store to be marked as `referenced: true` in the `vars` response from the compiler.

**Logs**
n/a

**To Reproduce**
```svelte
<script>
	let store;
</script>
{$store}
```

Compile this, and look at the `vars` value in the response. `store` has `referenced: false`.

**Expected behavior**
`store` should have `referenced: true`.

**Stacktraces**
n/a

**Information about your Svelte project:**
Svelte 3.16.0, 3.16.1

**Severity**
Moderate. Causing new incorrect warnings in the ESLint plugin - https://github.com/sveltejs/eslint-plugin-svelte3/issues/49

**Additional context**
Unlike the above, this seems to be working correctly:

```svelte
<script>
	let store;
	$store;
</script>
```


Discussion:

Resolving patch:
diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
--- a/src/compiler/compile/Component.ts
+++ b/src/compiler/compile/Component.ts
@@ -203,7 +203,10 @@ export default class Component {
 			const subscribable_name = name.slice(1);
 
 			const variable = this.var_lookup.get(subscribable_name);
-			if (variable) variable.subscribable = true;
+			if (variable) {
+				variable.referenced   = true;
+				variable.subscribable = true;
+			}
 		} else {
 			this.used_names.add(name);
 		}


Test patch:
diff --git a/test/js/samples/component-store-access-invalidate/expected.js b/test/js/samples/component-store-access-invalidate/expected.js
--- a/test/js/samples/component-store-access-invalidate/expected.js
+++ b/test/js/samples/component-store-access-invalidate/expected.js
@@ -43,7 +43,7 @@ function instance($$self, $$props, $$invalidate) {
 	let $foo;
 	const foo = writable(0);
 	component_subscribe($$self, foo, value => $$invalidate(0, $foo = value));
-	return [$foo];
+	return [$foo, foo];
 }
 
 class Component extends SvelteComponent {
diff --git a/test/vars/samples/store-referenced/_config.js b/test/vars/samples/store-referenced/_config.js
--- a/test/vars/samples/store-referenced/_config.js
+++ b/test/vars/samples/store-referenced/_config.js
@@ -8,7 +8,7 @@ export default {
 				module: false,
 				mutated: false,
 				reassigned: false,
-				referenced: false,
+				referenced: true,
 				referenced_from_script: false,
 				writable: true
 			},
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Whitespace is removed around <tspan> elements
**Describe the bug**
The whitespace between `foo` and `bar` is removed:

```svelte
<svg>
  <text>
    <tspan>foo</tspan> {"bar"}
  </text>
</svg>
```

**To Reproduce**
https://svelte.dev/repl/c80264cf1a924890bf1e23374337b141?version=3.15.0

**Expected behavior**
Both `<text>` elements should contain `foo bar`, not `foobar`.

**Severity**
Can be worked around, but is a bit of a nuisance


Discussion:
I have a fix for this... PR on its way :)

Resolving patch:
diff --git a/src/compiler/compile/render_dom/wrappers/Text.ts b/src/compiler/compile/render_dom/wrappers/Text.ts
--- a/src/compiler/compile/render_dom/wrappers/Text.ts
+++ b/src/compiler/compile/render_dom/wrappers/Text.ts
@@ -27,6 +27,11 @@ function should_skip(node: Text) {
 	if (parent_element.type === 'Head') return true;
 	if (parent_element.type === 'InlineComponent') return parent_element.children.length === 1 && node === parent_element.children[0];
 
+	// svg namespace exclusions
+	if (/svg$/.test(parent_element.namespace)) {
+		if (node.prev && node.prev.type === "Element" && node.prev.name === "tspan") return false;
+	}
+
 	return parent_element.namespace || elements_without_text.has(parent_element.name);
 }
 


Test patch:
diff --git a/test/runtime/samples/svg-tspan-preserve-space/_config.js b/test/runtime/samples/svg-tspan-preserve-space/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/svg-tspan-preserve-space/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: `<svg><text x=0 y=50><tspan>foo</tspan> bar<tspan>foo</tspan> bar</text></svg>`,
+};
diff --git a/test/runtime/samples/svg-tspan-preserve-space/main.svelte b/test/runtime/samples/svg-tspan-preserve-space/main.svelte
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/svg-tspan-preserve-space/main.svelte
@@ -0,0 +1 @@
+<svg><text x=0 y=50><tspan>foo</tspan> {"bar"}<tspan>foo</tspan> bar</text></svg>
\ No newline at end of file