AmazonScience/SWE-PolyBench huggingface dataset:
Repository: sveltejs/svelte (JavaScript)
Date: 2019-07-12 10:41:29+00:00
Task type: 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


Issue discussion:

Solution 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)
Date: 2019-07-26 22:49:56+00:00
Task type: 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


Issue discussion:

Solution 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)
Date: 2019-07-30 18:33:55+00:00
Task type: 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


Issue discussion:

Solution 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)
Date: 2019-08-02 20:48:54+00:00
Task type: 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)



Issue 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.

Solution 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)
Date: 2019-08-03 17:23:27+00:00
Task type: 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);
```


Issue discussion:

Solution 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)
Date: 2019-08-08 16:14:47+00:00
Task type: 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.


Issue 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.

Solution 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)
Date: 2019-08-21 20:25:56+00:00
Task type: 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.


Issue 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

Solution 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)
Date: 2019-09-07 21:37:36+00:00
Task type: 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



Issue discussion:

Solution 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)
Date: 2019-09-08 22:36:04+00:00
Task type: 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.


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


Solution 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)
Date: 2019-10-12 11:55:42+00:00
Task type: 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


Issue discussion:

Solution 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)
Date: 2019-10-19 19:05:09+00:00
Task type: 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.)



Issue 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";
```

Solution 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)
Date: 2019-11-30 20:19:46+00:00
Task type: 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


Issue discussion:

Solution 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)
Date: 2019-12-01 00:57:07+00:00
Task type: 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


Issue discussion:

Solution 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)
Date: 2019-12-10 20:52:35+00:00
Task type: 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>
```


Issue discussion:

Solution 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)
Date: 2019-12-13 19:28:11+00:00
Task type: 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


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

Solution 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
Repository: sveltejs/svelte (JavaScript)
Date: 2020-01-05 03:53:11+00:00
Task type: Bug Fix

Issue:
Assigning to a member expression in a reactive statement shouldn't auto-declare the variable
**Describe the bug**
A reactive assignment that looks like `$: document.title = whatever;` doesn't work, because the compiler (unhelpfully, in this case) auto-declares `document` for us, and - since that is now undefined - the assignment `document.title = whatever;` is a runtime error.

**Logs**
`TypeError: document is undefined`

**To Reproduce**
```svelte
<script>
  $: document.title = 'foo';
</script>
```

**Expected behavior**
This should simply assign to the global `document` and not attempt to automatically declare it

**Stacktraces**
-

**Information about your Svelte project:**
Svelte 3.16.7 - independent of browser or bundler.

**Severity**
Moderate, probably. We do specifically mention this syntax in the docs, and it doesn't work.

**Additional context**
I believe this will simply be a matter of adjusting the logic [here](https://github.com/sveltejs/svelte/blob/5486d67adf2d48820e94a1812028dba9392975b7/src/compiler/compile/Component.ts#L600
) for when we bail out and decide we don't need to auto-declare the variable.


Issue discussion:

Solution patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 * Prevent text input cursor jumping in Safari with one-way binding ([#3449](https://github.com/sveltejs/svelte/issues/3449))
 * Expose compiler version in dev events ([#4047](https://github.com/sveltejs/svelte/issues/4047))
+* Do not automatically declare variables in reactive declarations when assigning to a member expression ([#4212](https://github.com/sveltejs/svelte/issues/4212))
 
 ## 3.16.7
 
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
@@ -603,6 +603,7 @@ export default class Component {
 
 			const { expression } = node.body;
 			if (expression.type !== 'AssignmentExpression') return;
+			if (expression.left.type === 'MemberExpression') return;
 
 			extract_names(expression.left).forEach(name => {
 				if (!this.var_lookup.has(name) && name[0] !== '$') {


Test patch:
diff --git a/test/runtime/samples/reactive-values-no-implicit-member-expression/_config.js b/test/runtime/samples/reactive-values-no-implicit-member-expression/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/reactive-values-no-implicit-member-expression/_config.js
@@ -0,0 +1,5 @@
+export default {
+	test({ assert, window }) {
+		assert.equal(window.document.title, 'foo');
+	}
+};
diff --git a/test/runtime/samples/reactive-values-no-implicit-member-expression/main.svelte b/test/runtime/samples/reactive-values-no-implicit-member-expression/main.svelte
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/reactive-values-no-implicit-member-expression/main.svelte
@@ -0,0 +1,3 @@
+<script>
+	$: document.title = 'foo';
+</script>
Repository: sveltejs/svelte (JavaScript)
Date: 2020-02-23 21:30:21+00:00
Task type: Bug Fix

Issue:
Dev mode {#each} check breaks with strings
**Describe the bug**
The dev mode validation check for `{#each}` blocks breaks with strings.

**Logs**
`cannot use 'in' operator to search for "length" in "foo"`

**To Reproduce**
https://svelte.dev/repl/svg-transitions?version=3.19.0

**Expected behavior**
Same as https://svelte.dev/repl/svg-transitions?version=3.18.2

**Stacktraces**
-

**Information about your Svelte project:**
- Browser independent
- Reproducible in REPL

**Severity**
Moderate, probably.

**Additional context**
The check introduced in #4419 apparently throws with strings. We probably want to consider strings to be array-like objects, and so we need to be more permissive with the validation check.


Issue discussion:

Solution patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## Unreleased
+
+* Fix dev mode validation of `{#each}` blocks using strings ([#4450](https://github.com/sveltejs/svelte/issues/4450))
+
 ## 3.19.0
 
 * Fix indirect bindings involving elements with spreads ([#3680](https://github.com/sveltejs/svelte/issues/3680))
diff --git a/src/runtime/internal/dev.ts b/src/runtime/internal/dev.ts
--- a/src/runtime/internal/dev.ts
+++ b/src/runtime/internal/dev.ts
@@ -80,7 +80,7 @@ export function set_data_dev(text, data) {
 }
 
 export function validate_each_argument(arg) {
-	if (!arg || !('length' in arg)) {
+	if (typeof arg !== 'string' && !(arg && typeof arg === 'object' && 'length' in arg)) {
 		let msg = '{#each} only iterates over array-like objects.';
 		if (typeof Symbol === 'function' && arg && Symbol.iterator in arg) {
 			msg += ' You can use a spread to convert this iterable into an array.';


Test patch:
diff --git a/test/runtime/samples/each-block-string/_config.js b/test/runtime/samples/each-block-string/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/each-block-string/_config.js
@@ -0,0 +1,10 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+	html: `
+		<div>f</div>
+		<div>o</div>
+		<div>o</div>
+	`
+};
diff --git a/test/runtime/samples/each-block-string/main.svelte b/test/runtime/samples/each-block-string/main.svelte
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/each-block-string/main.svelte
@@ -0,0 +1,3 @@
+{#each 'foo' as c}
+	<div>{c}</div>
+{/each}
Repository: sveltejs/svelte (JavaScript)
Date: 2020-04-22 15:01:06+00:00
Task type: Bug Fix

Issue:
If blocks in nested slots break the app
**Description**
When using an if-block directly in a nested slot, it causes the app to break. 

**To Reproduce**
- Open REPL: https://svelte.dev/repl/b78f73d066784716806a64d86a0ed58a?version=3.20.1
- Simply open the console and click the checkbox.

<details>
  <summary>Stack trace</summary>

VM260:541 Uncaught (in promise) ReferenceError: span is not defined
    at Object.update [as p] (eval at handle_message (VM254 about:srcdoc:13), <anonymous>:541:21)
    at Object.update [as p] (eval at handle_message (VM254 about:srcdoc:13), <anonymous>:597:35)
    at Object.update [as p] (eval at handle_message (VM254 about:srcdoc:13), <anonymous>:428:21)
    at update (eval at handle_message (VM254 about:srcdoc:13), <anonymous>:167:40)
    at flush (eval at handle_message (VM254 about:srcdoc:13), <anonymous>:136:17)

</details>


**Information about your Svelte project:**
- Your browser and the version: Chrome (latest)
- OS X 

**Severity**
Hard to judge. On the one hand, it breaks the app. But on the other hand, there is a straightforward workaround, so it can be easily mitigated: As soon as the if-block is contained in another element it works: https://svelte.dev/repl/803509fd37d3464c879e2af530db7ba1?version=3.20.1

**Will break:**
```svelte
<Inner>
	<span slot="label">
		<slot>
			Click on the checkbox to break the app
			{#if showMore}
				more
			{/if}
		</slot>
	</span>
</Inner>
```

**Will work:**
```svelte
<Inner>
	<span slot="label">
		<slot>
			<span>
				This one will not break
				{#if showMore}
					more
				{/if}
			</span>
		</slot>
	</span>
</Inner>
```


Issue discussion:

Solution patch:
diff --git a/src/compiler/compile/render_dom/wrappers/Slot.ts b/src/compiler/compile/render_dom/wrappers/Slot.ts
--- a/src/compiler/compile/render_dom/wrappers/Slot.ts
+++ b/src/compiler/compile/render_dom/wrappers/Slot.ts
@@ -45,7 +45,7 @@ export default class SlotWrapper extends Wrapper {
 			renderer,
 			this.fallback,
 			node.children,
-			parent,
+			this,
 			strip_whitespace,
 			next_sibling
 		);


Test patch:
diff --git a/test/runtime/samples/slot-if-block-update-no-anchor/_config.js b/test/runtime/samples/slot-if-block-update-no-anchor/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/slot-if-block-update-no-anchor/_config.js
@@ -0,0 +1,7 @@
+export default {
+	test({ assert, target, component }) {
+		assert.htmlEqual(target.innerHTML, `<span></span>`);
+		component.enabled = true;
+		assert.htmlEqual(target.innerHTML, `<span>enabled</span>`);
+	},
+};
diff --git a/test/runtime/samples/slot-if-block-update-no-anchor/main.svelte b/test/runtime/samples/slot-if-block-update-no-anchor/main.svelte
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/slot-if-block-update-no-anchor/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let enabled = false;
+</script>
+
+<span>
+	<slot>
+		{#if enabled}enabled{/if}
+	</slot>
+</span>
Repository: sveltejs/svelte (JavaScript)
Date: 2020-05-03 06:52:56+00:00
Task type: Bug Fix

Issue:
Immediate tweened store value update with { duration: 0 } option
**Is your feature request related to a problem? Please describe.**
In Firefox and Safari, when there's a tweened store and we call `tweenedStore.update(fn, {duration: 0})` sometimes the tweened value gets computed to `NaN`. Then I went to read about how the value gets computed: 
https://github.com/sveltejs/svelte/blob/master/src/runtime/motion/tweened.ts#L121
As the result is based on `elapsed/duration`, which makes sense to not have duration to be 0 mathematically. Although, in FF and Safari the `elapsed` variable can be `0` when compute is getting executed, which causes the result of the compute to be NaN.

**Describe the solution you'd like**
if the `options.duration` is 0 then we set the value right away instead of going through the interpolation compute ?

**Describe alternatives you've considered**

- We can clamp the lower bound duration to 1, just in case another person runs into situation like this
- error on passing `options.duration` when <=0

**How important is this feature to you?**
Currently I'm using `{duration: 1}` as a work around. when I want to update some tweened store "immediately". I'm curious about what would be a good way to handle this tho !

**Additional context**
Thanks for reading !



Issue discussion:
I'd prefer to early-out and immediately set the value in this case as well.
I bumped into this issue while implementing touch gestures for an image gallery. I wanted to set the value immediately when handling touch events, but have the possibility to tween/spring the values when, for example, the user's gesture moved something a bit too far and I need to revert state to the nearest sensible value.

Solution patch:
diff --git a/src/runtime/motion/tweened.ts b/src/runtime/motion/tweened.ts
--- a/src/runtime/motion/tweened.ts
+++ b/src/runtime/motion/tweened.ts
@@ -93,6 +93,11 @@ export function tweened<T>(value?: T, defaults: Options<T> = {}): Tweened<T> {
 			interpolate = get_interpolator
 		} = assign(assign({}, defaults), opts);
 
+		if (duration === 0) {
+			store.set(target_value);
+			return Promise.resolve();
+		}
+
 		const start = now() + delay;
 		let fn;
 


Test patch:
diff --git a/test/motion/index.js b/test/motion/index.js
--- a/test/motion/index.js
+++ b/test/motion/index.js
@@ -19,5 +19,12 @@ describe('motion', () => {
 			size.set(100);
 			assert.equal(get(size), 100);
 		});
+
+		it('sets immediately when duration is 0', () => {
+			const size = tweened(0);
+
+			size.set(100, { duration : 0 });
+			assert.equal(get(size), 100);
+		});
 	});
 });