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

Issue:
component.set doesn't update ui when called from an awaiting promise
Repro: https://svelte.technology/repl?version=1.53.0&gist=bfd178f583f0be414daadb871a1e18d6

As shown in the repl, when calling this.set at the end of the awaited promise's chain, it fails to update the ui. The second button with the setTimeout works (albeit with a flash).


Discussion:

Resolving patch:
diff --git a/src/generators/nodes/AwaitBlock.ts b/src/generators/nodes/AwaitBlock.ts
--- a/src/generators/nodes/AwaitBlock.ts
+++ b/src/generators/nodes/AwaitBlock.ts
@@ -127,8 +127,10 @@ export default class AwaitBlock extends Node {
 
 				if (@isPromise(${promise})) {
 					${promise}.then(function(${value}) {
+						var state = #component.get();
 						${replace_await_block}(${token}, ${create_then_block}, ${value}, ${params});
 					}, function (${error}) {
+						var state = #component.get();
 						${replace_await_block}(${token}, ${create_catch_block}, ${error}, ${params});
 					});
 


Test patch:
diff --git a/test/runtime/samples/await-set-simultaneous/_config.js b/test/runtime/samples/await-set-simultaneous/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/await-set-simultaneous/_config.js
@@ -0,0 +1,16 @@
+export default {
+	test(assert, component, target) {
+		const promise = Promise.resolve().then(() => component.set({ answer: 42 }));
+
+		component.set({ promise });
+
+		assert.htmlEqual(target.innerHTML, `<p>wait for it...</p>`);
+
+		return promise
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, `
+					<p>the answer is 42!</p>
+				`);
+			});
+	}
+};
\ No newline at end of file
diff --git a/test/runtime/samples/await-set-simultaneous/main.html b/test/runtime/samples/await-set-simultaneous/main.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/await-set-simultaneous/main.html
@@ -0,0 +1,9 @@
+{{#if promise}}
+	{{#await promise}}
+		<p>wait for it...</p>
+	{{then _}}
+		<p>the answer is {{answer}}!</p>
+	{{catch error}}
+		<p>well that's odd</p>
+	{{/await}}
+{{/if}}
\ No newline at end of file
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
<noscript> handling
Via https://github.com/sveltejs/sapper/issues/76. It probably makes sense just to ignore anything inside a `<noscript>` that's part of the template (except in SSR mode), since the fact that the component is rendering is proof that `<noscript>` doesn't apply.


Discussion:
Agreed, as long as long as we document that `<noscript>`, if needed, should be placed outside the context of any given component.

Resolving patch:
diff --git a/src/generators/nodes/Element.ts b/src/generators/nodes/Element.ts
--- a/src/generators/nodes/Element.ts
+++ b/src/generators/nodes/Element.ts
@@ -162,6 +162,8 @@ export default class Element extends Node {
 			this.generator.slots.add(slotName);
 		}
 
+		if (this.name === 'noscript') return;
+
 		const childState = {
 			parentNode: this.var,
 			parentNodes: parentNodes && block.getUniqueName(`${this.var}_nodes`) // if we're in unclaimable territory, i.e. <head>, parentNodes is null
@@ -417,6 +419,8 @@ export default class Element extends Node {
 		function toHTML(node: Element | Text) {
 			if (node.type === 'Text') return escapeHTML(node.data);
 
+			if (node.name === 'noscript') return '';
+
 			let open = `<${node.name}`;
 
 			if (node._needsCssAttribute) {


Test patch:
diff --git a/test/runtime/samples/noscript-removal/_config.js b/test/runtime/samples/noscript-removal/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/noscript-removal/_config.js
@@ -0,0 +1,9 @@
+export default {
+	'skip-ssr': true,
+
+	html: `
+	<div>foo</div>
+
+	<div>foo<div>foo</div></div>
+`,
+};
diff --git a/test/runtime/samples/noscript-removal/main.html b/test/runtime/samples/noscript-removal/main.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/noscript-removal/main.html
@@ -0,0 +1,5 @@
+<noscript>foo</noscript>
+
+<div>foo<noscript>foo</noscript></div>
+
+<div>foo<div>foo<noscript>foo</noscript></div></div>
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
can't use `component` as a context name
Eek, I really caused some damage with #1173: https://svelte.technology/repl?version=1.56.2&gist=a3cf9f2071401f3d6ee7a92e049b8d97

The line `var component = state.component` unsurprisingly breaks everything. This is the root cause of https://github.com/sveltejs/svelte.technology/issues/214.



Discussion:
Same is true for 'state': https://svelte.technology/repl?version=1.56.2&gist=0961ec1f092efd58571345fc5b5515f2

Resolving patch:
diff --git a/src/generators/dom/Block.ts b/src/generators/dom/Block.ts
--- a/src/generators/dom/Block.ts
+++ b/src/generators/dom/Block.ts
@@ -112,9 +112,13 @@ export default class Block {
 		this.hasOutroMethod = false;
 		this.outros = 0;
 
-		this.aliases = new Map();
-		this.variables = new Map();
 		this.getUniqueName = this.generator.getUniqueNameMaker();
+		this.variables = new Map();
+
+		this.aliases = new Map()
+			.set('component', this.getUniqueName('component'))
+			.set('state', this.getUniqueName('state'));
+		if (this.key) this.aliases.set('key', this.getUniqueName('key'));
 
 		this.hasUpdateMethod = false; // determined later
 	}


Test patch:
diff --git a/test/runtime/samples/deconflict-component-refs/_config.js b/test/runtime/samples/deconflict-component-refs/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/deconflict-component-refs/_config.js
@@ -0,0 +1,17 @@
+export default {
+	html: `
+		<ul>
+			<li><input></li>
+			<li>bar</li>
+			<li>baz</li>
+		</ul>
+	`,
+
+	data: {
+		components: [
+			{ name: 'foo', edit: true },
+			{ name: 'bar', edit: false },
+			{ name: 'baz', edit: false }
+		]
+	}
+};
\ No newline at end of file
diff --git a/test/runtime/samples/deconflict-component-refs/main.html b/test/runtime/samples/deconflict-component-refs/main.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/deconflict-component-refs/main.html
@@ -0,0 +1,11 @@
+<ul>
+	{{#each components as component}}
+		<li>
+			{{#if component.edit}}
+				<input ref:name bind:value=component.name />
+			{{else}}
+				{{component.name}}
+			{{/if}}
+		</li>
+	{{/each}}
+</ul>
\ No newline at end of file
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
CSS - Class not applied to child elements
> Linux Mint 18.3 Cinnamon
> Google Chrome Version 65.0.3325.146 (Official Build) (64-bit)
> Firefox Quantum 58.0.2 (64-bit)
> svelte: ^1.57.1

[Svelte REPL gist](https://svelte.technology/repl?version=1.57.1&gist=64afb258047bba01ced7946648335bd5)
```html
<!-- DevTools Inspector -->
<div class="cl1 svelte-1rs9q0o">
    Test 
    <div class="cl2">Test 2</div> <!-- class svelte-1rs9q0o missing from element, if added in DevTools it works -->
</div>
```

If I add `{{anyTag}}` inside any `div`, regardless of the depth, then `svelte-1rs9q0o` is present and styles are applied.
I've tried with depth of 3 and 4. Same behavior.


Discussion:

Resolving patch:
diff --git a/src/generators/nodes/Element.ts b/src/generators/nodes/Element.ts
--- a/src/generators/nodes/Element.ts
+++ b/src/generators/nodes/Element.ts
@@ -438,8 +438,8 @@ export default class Element extends Node {
 			}
 
 			node.attributes.forEach((attr: Node) => {
-				const value = node._needsCssAttribute && attr.name === 'class'
-					? attr.value.concat({ type: 'Text', data: ` ${generator.stylesheet.id}` })
+				const value = (node._needsCssAttribute && attr.name === 'class')
+					? [{ type: 'Text', data: `${attr.value[0].data} ${generator.stylesheet.id}` }]
 					: attr.value;
 
 				open += ` ${fixAttributeCasing(attr.name)}${stringifyAttributeValue(value)}`


Test patch:
diff --git a/test/css/samples/cascade-false-nested/_config.js b/test/css/samples/cascade-false-nested/_config.js
new file mode 100644
--- /dev/null
+++ b/test/css/samples/cascade-false-nested/_config.js
@@ -0,0 +1,7 @@
+export default {
+	cascade: false,
+
+	data: {
+		dynamic: 'x'
+	}
+};
\ No newline at end of file
diff --git a/test/css/samples/cascade-false-nested/expected.css b/test/css/samples/cascade-false-nested/expected.css
new file mode 100644
--- /dev/null
+++ b/test/css/samples/cascade-false-nested/expected.css
@@ -0,0 +1 @@
+.foo.svelte-xyz{color:red}.bar.svelte-xyz{font-style:italic}
\ No newline at end of file
diff --git a/test/css/samples/cascade-false-nested/expected.html b/test/css/samples/cascade-false-nested/expected.html
new file mode 100644
--- /dev/null
+++ b/test/css/samples/cascade-false-nested/expected.html
@@ -0,0 +1,2 @@
+<span class="foo svelte-xyz"><span class="bar svelte-xyz">text</span></span>
+<span class="foo svelte-xyz"><span class="bar svelte-xyz">x</span></span>
\ No newline at end of file
diff --git a/test/css/samples/cascade-false-nested/input.html b/test/css/samples/cascade-false-nested/input.html
new file mode 100644
--- /dev/null
+++ b/test/css/samples/cascade-false-nested/input.html
@@ -0,0 +1,16 @@
+<span class='foo'>
+	<span class='bar'>text</span>
+</span>
+
+<span class='foo'>
+	<span class='bar'>{{dynamic}}</span>
+</span>
+
+<style>
+	.foo {
+		color: red;
+	}
+	.bar {
+		font-style: italic;
+	}
+</style>
\ No newline at end of file
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Transitions not cancelled
Haven't fully diagnosed this but it seems maybe the transition manager is behaving as though the initial transition were still in play:

* https://svelte.technology/repl?version=1.55.0&gist=8411165d371374aab0ed259edf1c954e
* https://svelte.technology/repl?version=1.57.1&gist=51c62c40f99041f36f13816049890f94


Discussion:

Resolving patch:
diff --git a/src/shared/transitions.js b/src/shared/transitions.js
--- a/src/shared/transitions.js
+++ b/src/shared/transitions.js
@@ -106,7 +106,7 @@ export function wrapTransition(component, node, fn, params, intro, outgroup) {
 						// when introing, discard old animations if there are any
 						return anim && (program.delta < 0 || !/__svelte/.test(anim));
 					})
-					.concat(program.name + ' ' + duration + 'ms linear 1 forwards')
+					.concat(program.name + ' ' + program.duration + 'ms linear 1 forwards')
 					.join(', ');
 			}
 


Test patch:
diff --git a/test/runtime/samples/transition-css-duration/_config.js b/test/runtime/samples/transition-css-duration/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/transition-css-duration/_config.js
@@ -0,0 +1,11 @@
+export default {
+	test(assert, component, target, window, raf) {
+		component.set({ visible: true });
+		const div = target.querySelector('div');
+
+		raf.tick(25);
+		component.set({ visible: false });
+
+		assert.ok(~div.style.animation.indexOf('25ms'));
+	},
+};
diff --git a/test/runtime/samples/transition-css-duration/main.html b/test/runtime/samples/transition-css-duration/main.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/transition-css-duration/main.html
@@ -0,0 +1,18 @@
+{{#if visible}}
+	<div transition:foo></div>
+{{/if}}
+
+<script>
+	export default {
+		transitions: {
+			foo() {
+				return {
+					duration: 100,
+					css: t => {
+						return `opacity: ${t}`;
+					}
+				};
+			}
+		}
+	};
+</script>
\ No newline at end of file
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Keyed each blocks break with static content
[REPL](https://svelte.technology/repl?version=1.58.5&gist=b72943d6863d322b077c61b36a0c19ba). 

The offending code:

```js
each_blocks_1 = updateKeyedEach(each_blocks_1, component, changed, "z",, each_value, each_lookup, each_anchor.parentNode, false, create_each_block, "m", function(i) {...}
```


Discussion:

Resolving patch:
diff --git a/src/generators/nodes/EachBlock.ts b/src/generators/nodes/EachBlock.ts
--- a/src/generators/nodes/EachBlock.ts
+++ b/src/generators/nodes/EachBlock.ts
@@ -296,7 +296,7 @@ export default class EachBlock extends Node {
 		block.builders.update.addBlock(deindent`
 			var ${each_block_value} = ${snippet};
 
-			${blocks} = @updateKeyedEach(${blocks}, #component, changed, "${this.key}", ${dynamic}, ${each_block_value}, ${lookup}, ${updateMountNode}, ${String(this.block.hasOutroMethod)}, ${create_each_block}, "${mountOrIntro}", function(#i) {
+			${blocks} = @updateKeyedEach(${blocks}, #component, changed, "${this.key}", ${dynamic ? '1' : '0'}, ${each_block_value}, ${lookup}, ${updateMountNode}, ${String(this.block.hasOutroMethod)}, ${create_each_block}, "${mountOrIntro}", function(#i) {
 				return @assign(@assign({}, state), {
 					${this.contextProps.join(',\n')}
 				});


Test patch:
diff --git a/test/runtime/samples/each-block-keyed-static/_config.js b/test/runtime/samples/each-block-keyed-static/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-static/_config.js
@@ -0,0 +1,10 @@
+export default {
+	data: {
+		x: [{ z: 1 }, { z: 2 }],
+	},
+
+	html: `
+		<p>does not change</p>
+		<p>does not change</p>
+	`
+};
diff --git a/test/runtime/samples/each-block-keyed-static/main.html b/test/runtime/samples/each-block-keyed-static/main.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-static/main.html
@@ -0,0 +1,3 @@
+{{#each x as y @z}}
+	<p>does not change</p>
+{{/each}}
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
switch_instance_spread_levels is not defined
[REPL](https://svelte.technology/repl?version=1.60.0&gist=6acdb5552f0aa44dbc55bf9f770e7093). This prevents you from using spread props with `<:Component>`, which is perhaps where they're most useful.


Discussion:

Resolving patch:
diff --git a/src/generators/nodes/Component.ts b/src/generators/nodes/Component.ts
--- a/src/generators/nodes/Component.ts
+++ b/src/generators/nodes/Component.ts
@@ -145,8 +145,10 @@ export default class Component extends Node {
 						}
 					});
 
+				block.addVariable(levels);
+
 				statements.push(deindent`
-					var ${levels} = [
+					${levels} = [
 						${initialProps.join(',\n')}
 					];
 


Test patch:
diff --git a/test/runtime/samples/spread-component-dynamic/Foo.html b/test/runtime/samples/spread-component-dynamic/Foo.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/spread-component-dynamic/Foo.html
@@ -0,0 +1 @@
+<p>a: {{a}}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/spread-component-dynamic/_config.js b/test/runtime/samples/spread-component-dynamic/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/spread-component-dynamic/_config.js
@@ -0,0 +1,21 @@
+export default {
+	data: {
+		props: {
+			a: 1,
+		},
+	},
+
+	html: `
+		<p>a: 1</p>
+	`,
+
+	test(assert, component, target) {
+		component.set({
+			props: {
+				a: 2,
+			},
+		});
+
+		assert.htmlEqual(target.innerHTML, `<p>a: 2</p>`);
+	},
+};
diff --git a/test/runtime/samples/spread-component-dynamic/main.html b/test/runtime/samples/spread-component-dynamic/main.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/spread-component-dynamic/main.html
@@ -0,0 +1,13 @@
+<:Component {Foo} {{...props}} />
+
+<script>
+	import Foo from './Foo.html';
+
+	export default {
+		data() {
+			return {
+				Foo
+			};
+		}
+	};
+</script>
\ No newline at end of file
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Spread properties cause CSS to be DCE'd incorrectly
[REPL](https://svelte.technology/repl?version=1.60.0&gist=678853cb781d28931abbc159c22d2d7f)

```html
<div {{...props}} >
	Big red Comic Sans
</div>

<style>
	.foo {
		color: red;
		font-size: 2em;
		font-family: 'Comic Sans MS';
	}
</style>
```

`.foo` should be preserved; it isn't.


Discussion:

Resolving patch:
diff --git a/src/css/Selector.ts b/src/css/Selector.ts
--- a/src/css/Selector.ts
+++ b/src/css/Selector.ts
@@ -223,6 +223,9 @@ const operators = {
 };
 
 function attributeMatches(node: Node, name: string, expectedValue: string, operator: string, caseInsensitive: boolean) {
+	const spread = node.attributes.find(attr => attr.type === 'Spread');
+	if (spread) return true;
+
 	const attr = node.attributes.find((attr: Node) => attr.name === name);
 	if (!attr) return false;
 	if (attr.value === true) return operator === null;


Test patch:
diff --git a/test/css/samples/spread/_config.js b/test/css/samples/spread/_config.js
new file mode 100644
--- /dev/null
+++ b/test/css/samples/spread/_config.js
@@ -0,0 +1,3 @@
+export default {
+	cascade: false
+};
\ No newline at end of file
diff --git a/test/css/samples/spread/expected.css b/test/css/samples/spread/expected.css
new file mode 100644
--- /dev/null
+++ b/test/css/samples/spread/expected.css
@@ -0,0 +1 @@
+.foo.svelte-xyz{color:red;font-size:2em;font-family:'Comic Sans MS'}
\ No newline at end of file
diff --git a/test/css/samples/spread/input.html b/test/css/samples/spread/input.html
new file mode 100644
--- /dev/null
+++ b/test/css/samples/spread/input.html
@@ -0,0 +1,11 @@
+<div {{...props}} >
+	Big red Comic Sans
+</div>
+
+<style>
+	.foo {
+		color: red;
+		font-size: 2em;
+		font-family: 'Comic Sans MS';
+	}
+</style>
\ No newline at end of file
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Two-way binding select does not allow for dynamic multiple attribute
The two-way binding on multiple select elements don't take a dynamically set `multiple`-attribute into consideration.
Maybe this is as intended, in which case it appears to be missing from the documentation (or I simply overlooked it).

A [simple REPL](https://svelte.technology/repl?version=1.58.0&gist=31327ce7186cb451811813a5b832b255) to demonstrate the behavior.

Short examples:
 - Works: `<select bind:value multiple>`
 - Doesn't: `<select bind:value :multiple>`
 - Doesn't:`<select bind:value multiple="{{ multiple }}">`

As for browsers, the behavior is consistent across browsers, tested in Firefox 60, Brave 0.21, Electron 1.8.3 (Chromium 59)


Discussion:

Resolving patch:
diff --git a/src/validate/html/validateElement.ts b/src/validate/html/validateElement.ts
--- a/src/validate/html/validateElement.ts
+++ b/src/validate/html/validateElement.ts
@@ -102,7 +102,20 @@ export default function validateElement(
 					);
 				}
 
-				checkTypeAttribute(validator, node);
+				if (node.name === 'select') {
+					const attribute = node.attributes.find(
+						(attribute: Node) => attribute.name === 'multiple'
+					);
+
+					if (attribute && isDynamic(attribute)) {
+						validator.error(
+							`'multiple' attribute cannot be dynamic if select uses two-way binding`,
+							attribute
+						);
+					}
+				} else {
+					checkTypeAttribute(validator, node);
+				}
 			} else if (name === 'checked' || name === 'indeterminate') {
 				if (node.name !== 'input') {
 					validator.error(


Test patch:
diff --git a/test/validator/samples/binding-select-multiple-dynamic/errors.json b/test/validator/samples/binding-select-multiple-dynamic/errors.json
new file mode 100644
--- /dev/null
+++ b/test/validator/samples/binding-select-multiple-dynamic/errors.json
@@ -0,0 +1,12 @@
+[{
+	"message": "'multiple' attribute cannot be dynamic if select uses two-way binding",
+	"loc": {
+		"line": 1,
+		"column": 19
+	},
+	"end": {
+		"line": 1,
+		"column": 28
+	},
+	"pos": 19
+}]
\ No newline at end of file
diff --git a/test/validator/samples/binding-select-multiple-dynamic/input.html b/test/validator/samples/binding-select-multiple-dynamic/input.html
new file mode 100644
--- /dev/null
+++ b/test/validator/samples/binding-select-multiple-dynamic/input.html
@@ -0,0 +1,5 @@
+<select bind:value :multiple>
+	<option>1</option>
+	<option>2</option>
+	<option>3</option>
+</select>
\ No newline at end of file
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Capitalization throws off CSS scoping
If you put this in REPL: 

```
<h1>
	Big red Comic Sans
</h1>

<H1>
	Big red Comic Sans
</H1>

<style>
	h1 {
		color: red;
		font-size: 2em;
		font-family: 'Comic Sans MS';
	}
</style>
```

You'll see one of the H1s is styled the other is not. Element names are not case sensitive in CSS, so both elements should be styled.

See this codepen for non-svelte HTML result:

https://codepen.io/teleclimber/pen/GxmvGJ

Thanks!



Discussion:

Resolving patch:
diff --git a/src/css/Selector.ts b/src/css/Selector.ts
--- a/src/css/Selector.ts
+++ b/src/css/Selector.ts
@@ -167,7 +167,8 @@ function applySelector(blocks: Block[], node: Node, stack: Node[], toEncapsulate
 		}
 
 		else if (selector.type === 'TypeSelector') {
-			if (node.name !== selector.name && selector.name !== '*') return false;
+			// remove toLowerCase() in v2, when uppercase elements will be forbidden
+			if (node.name.toLowerCase() !== selector.name.toLowerCase() && selector.name !== '*') return false;
 		}
 
 		else if (selector.type === 'RefSelector') {


Test patch:
diff --git a/test/css/samples/omit-scoping-element-uppercase/_config.js b/test/css/samples/omit-scoping-element-uppercase/_config.js
new file mode 100644
--- /dev/null
+++ b/test/css/samples/omit-scoping-element-uppercase/_config.js
@@ -0,0 +1,22 @@
+export default {
+	cascade: false,
+
+	warnings: [{
+		message: 'P component is not defined',
+		loc: {
+			line: 2,
+			column: 1
+		},
+		end: {
+			line: 2,
+			column: 22
+		},
+		pos: 7,
+		frame: `
+			1: <div>
+			2:   <P>this is styled</P>
+			     ^
+			3: </div>
+			4:`
+	}]
+};
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-element-uppercase/expected.css b/test/css/samples/omit-scoping-element-uppercase/expected.css
new file mode 100644
--- /dev/null
+++ b/test/css/samples/omit-scoping-element-uppercase/expected.css
@@ -0,0 +1 @@
+p.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-element-uppercase/expected.html b/test/css/samples/omit-scoping-element-uppercase/expected.html
new file mode 100644
--- /dev/null
+++ b/test/css/samples/omit-scoping-element-uppercase/expected.html
@@ -0,0 +1 @@
+<div><p class="svelte-xyz">this is styled</p></div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-element-uppercase/input.html b/test/css/samples/omit-scoping-element-uppercase/input.html
new file mode 100644
--- /dev/null
+++ b/test/css/samples/omit-scoping-element-uppercase/input.html
@@ -0,0 +1,9 @@
+<div>
+	<P>this is styled</P>
+</div>
+
+<style>
+	p {
+		color: red;
+	}
+</style>
\ No newline at end of file
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Regression 1.60.1 -> 1.60.2 :: <select multiple... results in Module build failed
https://svelte.technology/repl?version=1.60.2&gist=3d32d3e082562a4de08b054f46e7756e

The example works with v 1.60.1 but not with 1.60.2.

I believe this is due to incorrect flow here:
https://github.com/sveltejs/svelte/blob/master/src/validate/html/validateElement.ts#L110

... from the PR meant to address generating a compiler error for dynamic binding of multiple:
https://github.com/sveltejs/svelte/pull/1313/files#diff-af8fdb1fcadd89d16ba4cf8722fe1eafR116

Looks like `checkTypeAttribute` is never called for a non-dynamic `multiple`



Discussion:

Resolving patch:
diff --git a/src/validate/html/validateElement.ts b/src/validate/html/validateElement.ts
--- a/src/validate/html/validateElement.ts
+++ b/src/validate/html/validateElement.ts
@@ -294,5 +294,6 @@ function checkSlotAttribute(validator: Validator, node: Node, attribute: Node, s
 }
 
 function isDynamic(attribute: Node) {
+	if (attribute.value === true) return false;
 	return attribute.value.length > 1 || attribute.value[0].type !== 'Text';
 }


Test patch:
diff --git a/test/validator/samples/select-multiple/input.html b/test/validator/samples/select-multiple/input.html
new file mode 100644
--- /dev/null
+++ b/test/validator/samples/select-multiple/input.html
@@ -0,0 +1,3 @@
+<select bind:value multiple>
+	<option>1</option>
+</select>
\ No newline at end of file
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Each block key incorrectly treated as expected data property
https://svelte.technology/repl?version=2.4.1&gist=6650af687dd70e62050e9b0d27e59c03

The keyed each block causes the runtime dev warning `<App> was created without expected data property 'letter'`, which it should not.

cc @johnmuhl


Discussion:

Resolving patch:
diff --git a/src/compile/nodes/EachBlock.ts b/src/compile/nodes/EachBlock.ts
--- a/src/compile/nodes/EachBlock.ts
+++ b/src/compile/nodes/EachBlock.ts
@@ -31,10 +31,6 @@ export default class EachBlock extends Node {
 		this.context = info.context.name || 'each'; // TODO this is used to facilitate binding; currently fails with destructuring
 		this.index = info.index;
 
-		this.key = info.key
-			? new Expression(compiler, this, scope, info.key)
-			: null;
-
 		this.scope = scope.child();
 
 		this.contexts = [];
@@ -44,6 +40,10 @@ export default class EachBlock extends Node {
 			this.scope.add(context.key.name, this.expression.dependencies);
 		});
 
+		this.key = info.key
+			? new Expression(compiler, this, this.scope, info.key)
+			: null;
+
 		if (this.index) {
 			// index can only change if this is a keyed each block
 			const dependencies = this.key ? this.expression.dependencies : [];


Test patch:
diff --git a/test/runtime/samples/dev-warning-missing-data-each/_config.js b/test/runtime/samples/dev-warning-missing-data-each/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/dev-warning-missing-data-each/_config.js
@@ -0,0 +1,22 @@
+export default {
+	dev: true,
+
+	data: {
+		letters: [
+			{
+				id: 1,
+				char: 'a',
+			},
+			{
+				id: 2,
+				char: 'b',
+			},
+			{
+				id: 3,
+				char: 'c',
+			},
+		],
+	},
+
+	warnings: [],
+};
diff --git a/test/runtime/samples/dev-warning-missing-data-each/main.html b/test/runtime/samples/dev-warning-missing-data-each/main.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/dev-warning-missing-data-each/main.html
@@ -0,0 +1,3 @@
+{#each letters as letter (letter.id)}
+  <div>{letter.char}</div>
+{/each}
\ No newline at end of file
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Canvas ref not working in div
Subj, a small modified example from the documentation:
https://svelte.technology/repl?version=2.4.2&gist=b06728bb9e129364fe7cd9e514275843

the problem started with 2.2.0 version.
This ref just not exist in a component.refs object. 


Discussion:
Looks like we're not correctly recognizing that we can't use the static `.innerHTML` shortcut when there's a ref. `Element#init` needs some code to the effect of `if (this.ref) this.parent.cannotUseInnerHTML();`.

Resolving patch:
diff --git a/src/compile/nodes/Element.ts b/src/compile/nodes/Element.ts
--- a/src/compile/nodes/Element.ts
+++ b/src/compile/nodes/Element.ts
@@ -191,6 +191,10 @@ export default class Element extends Node {
 			block.outros += 1;
 		}
 
+		if (this.ref) {
+			this.parent.cannotUseInnerHTML();
+		}
+
 		const valueAttribute = this.attributes.find((attribute: Attribute) => attribute.name === 'value');
 
 		// special case — in a case like this...


Test patch:
diff --git a/test/runtime/samples/refs-no-innerhtml/_config.js b/test/runtime/samples/refs-no-innerhtml/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/refs-no-innerhtml/_config.js
@@ -0,0 +1,7 @@
+export default {
+	html: '<div><canvas></canvas></div>',
+	test ( assert, component, target ) {
+		const canvas = target.querySelector( 'canvas' );
+		assert.equal( canvas, component.refs.foo );
+	}
+};
diff --git a/test/runtime/samples/refs-no-innerhtml/main.html b/test/runtime/samples/refs-no-innerhtml/main.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/refs-no-innerhtml/main.html
@@ -0,0 +1 @@
+<div><canvas ref:foo></canvas></div>
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Reserved keywords cause error when used in an expression with spaces around the keyword
When using reserved JavaScript keywords in an expression, if the expression has spaces in between the curly brackets and the keyword, the parser will throw an error.

This throws: `<div class="{ class }"></div>`
But this does not: `<div class="{class}"></div>`

This goes for all JS keywords. I've tested `import`, `export`, and `class` at least.

REPL with failing test case: https://svelte.technology/repl?version=2.5.0&gist=9d4b8a0c733a48397d8a66feb9881fa5

REPL with passing test case: https://svelte.technology/repl?version=2.5.0&gist=6149f93a9af8cbc6286a335b8afbfaec


Discussion:
I haven't tested this but I _think_ we should be able to fix this with just a `parser.allowWhitespace()` inserted as the first line of the `readExpression` function [here](https://github.com/sveltejs/svelte/blob/5dd149ef7b92cc84a19386319a2acb8d2aa8d725/src/parse/read/expression.ts#L7) and have it not break sourcemaps.
Actually, this is currently working with things like `{ export }` appearing in HTML, just not when they're in an attribute value. These both use `readExpression`, so that suggests maybe the `allowWhitespace()` ought to be inserted elsewhere, but I'm not sure where.
Ah, [right here](https://github.com/sveltejs/svelte/blob/5dd149ef7b92cc84a19386319a2acb8d2aa8d725/src/parse/state/tag.ts#L442).

Resolving patch:
diff --git a/src/parse/state/tag.ts b/src/parse/state/tag.ts
--- a/src/parse/state/tag.ts
+++ b/src/parse/state/tag.ts
@@ -439,6 +439,7 @@ function readSequence(parser: Parser, done: () => boolean) {
 				chunks.push(currentChunk);
 			}
 
+			parser.allowWhitespace();
 			const expression = readExpression(parser);
 			parser.allowWhitespace();
 			parser.eat('}', true);


Test patch:
diff --git a/test/runtime/samples/attribute-dynamic-reserved/_config.js b/test/runtime/samples/attribute-dynamic-reserved/_config.js
--- a/test/runtime/samples/attribute-dynamic-reserved/_config.js
+++ b/test/runtime/samples/attribute-dynamic-reserved/_config.js
@@ -3,11 +3,17 @@ export default {
 		class: 'foo'
 	},
 
-	html: `<div class="foo"></div>123`,
+	html: `
+		<div class="foo"></div>123
+		<div class="foo"></div>123
+	`,
 
 	test ( assert, component, target ) {
 		component.set({ class: 'bar' });
-		assert.equal( target.innerHTML, `<div class="bar"></div>123` );
+		assert.htmlEqual( target.innerHTML, `
+			<div class="bar"></div>123
+			<div class="bar"></div>123
+		` );
 
 		component.destroy();
 	}
diff --git a/test/runtime/samples/attribute-dynamic-reserved/main.html b/test/runtime/samples/attribute-dynamic-reserved/main.html
--- a/test/runtime/samples/attribute-dynamic-reserved/main.html
+++ b/test/runtime/samples/attribute-dynamic-reserved/main.html
@@ -1 +1,2 @@
 <div class='{class}'></div>{123}
+<div class='{ class }'></div>{ 123 }
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Error with transition changes in 2.6.1
See https://svelte.technology/repl?version=2.6.1&gist=7b57b551d51b754e048a2fab07c18459

Components within an if-statement throw an error:
```
component1._fragment.o is not a function
```



Discussion:

Resolving patch:
diff --git a/src/compile/dom/index.ts b/src/compile/dom/index.ts
--- a/src/compile/dom/index.ts
+++ b/src/compile/dom/index.ts
@@ -55,6 +55,10 @@ export default function dom(
 	compiler.fragment.build();
 	const { block } = compiler.fragment;
 
+	if (compiler.options.nestedTransitions) {
+		block.hasOutroMethod = true;
+	}
+
 	// prevent fragment being created twice (#1063)
 	if (options.customElement) block.builders.create.addLine(`this.c = @noop;`);
 


Test patch:
diff --git a/test/runtime/samples/if-block-component-without-outro/Widget.html b/test/runtime/samples/if-block-component-without-outro/Widget.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/if-block-component-without-outro/Widget.html
@@ -0,0 +1 @@
+<div>A wild component appears</div>
\ No newline at end of file
diff --git a/test/runtime/samples/if-block-component-without-outro/_config.js b/test/runtime/samples/if-block-component-without-outro/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/if-block-component-without-outro/_config.js
@@ -0,0 +1,15 @@
+export default {
+	skipIntroByDefault: true,
+	nestedTransitions: true,
+
+	data: {
+		foo: true,
+	},
+
+	html: '<div>A wild component appears</div>',
+
+	test(assert, component, target) {
+		component.set({ foo: false });
+		assert.htmlEqual(target.innerHTML, '');
+	},
+};
diff --git a/test/runtime/samples/if-block-component-without-outro/main.html b/test/runtime/samples/if-block-component-without-outro/main.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/if-block-component-without-outro/main.html
@@ -0,0 +1,11 @@
+{#if foo}
+	<Widget/>
+{/if}
+
+<script>
+	export default {
+		components: {
+			Widget: './Widget.html'
+		}
+	};
+</script>
\ No newline at end of file
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Empty lists with transitions prevent DOM from being removed
[REPL](https://svelte.technology/repl?version=2.7.1&gist=87122d2f34f1b5ed6cf34f5fb008a390). The outro callback is never called if the list is empty.


Discussion:

Resolving patch:
diff --git a/src/shared/utils.js b/src/shared/utils.js
--- a/src/shared/utils.js
+++ b/src/shared/utils.js
@@ -15,6 +15,7 @@ export function isPromise(value) {
 }
 
 export function callAfter(fn, i) {
+	if (i === 0) fn();
 	return () => {
 		if (!--i) fn();
 	};


Test patch:
diff --git a/test/runtime/samples/each-block-empty-outro/Thing.html b/test/runtime/samples/each-block-empty-outro/Thing.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/each-block-empty-outro/Thing.html
@@ -0,0 +1 @@
+<p>{thing}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-empty-outro/_config.js b/test/runtime/samples/each-block-empty-outro/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/each-block-empty-outro/_config.js
@@ -0,0 +1,20 @@
+export default {
+	data: {
+		visible: true,
+		empty: []
+	},
+
+	html: `
+		<div>
+			<p>text</p>
+		</div>
+	`,
+
+	nestedTransitions: true,
+
+	test(assert, component, target) {
+		component.set({ visible: false });
+
+		assert.htmlEqual(target.innerHTML, ``);
+	}
+};
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-empty-outro/main.html b/test/runtime/samples/each-block-empty-outro/main.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/each-block-empty-outro/main.html
@@ -0,0 +1,17 @@
+{#if visible}
+	<div>
+		{#each empty as thing}
+			<Thing {thing}/>
+		{/each}
+
+		<p>text</p>
+	</div>
+{/if}
+
+<script>
+	export default {
+		components: {
+			Thing: './Thing.html'
+		}
+	};
+</script>
\ No newline at end of file
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
each_else.i is not a function
REPL: https://svelte.technology/repl?version=2.8.1&gist=d929e4517407a49609079c0fabc4ad0f

Only if an array is empty.


Discussion:
Interesting. This has something to do with there being a nested component in the main `{#each}` part but not in the `{:else}`. I'll have to dig a bit more to figure out which methods are supposed to be defined on which fragments.
@Conduitry Yes, it's related to a nested component. Without it, everything works.

Resolving patch:
diff --git a/src/compile/nodes/EachBlock.ts b/src/compile/nodes/EachBlock.ts
--- a/src/compile/nodes/EachBlock.ts
+++ b/src/compile/nodes/EachBlock.ts
@@ -189,6 +189,7 @@ export default class EachBlock extends Node {
 
 		if (this.else) {
 			const each_block_else = compiler.getUniqueName(`${each}_else`);
+			const mountOrIntro = (this.else.block.hasIntroMethod || this.else.block.hasOutroMethod) ? 'i' : 'm';
 
 			block.builders.init.addLine(`var ${each_block_else} = null;`);
 
diff --git a/src/compile/nodes/ElseBlock.ts b/src/compile/nodes/ElseBlock.ts
--- a/src/compile/nodes/ElseBlock.ts
+++ b/src/compile/nodes/ElseBlock.ts
@@ -5,6 +5,7 @@ import mapChildren from './shared/mapChildren';
 export default class ElseBlock extends Node {
 	type: 'ElseBlock';
 	children: Node[];
+	block: Block;
 
 	constructor(compiler, parent, scope, info) {
 		super(compiler, parent, scope, info);


Test patch:
diff --git a/test/runtime/samples/each-block-else-mount-or-intro/Widget.html b/test/runtime/samples/each-block-else-mount-or-intro/Widget.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/each-block-else-mount-or-intro/Widget.html
@@ -0,0 +1 @@
+Foo
diff --git a/test/runtime/samples/each-block-else-mount-or-intro/_config.js b/test/runtime/samples/each-block-else-mount-or-intro/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/each-block-else-mount-or-intro/_config.js
@@ -0,0 +1,5 @@
+export default {
+	nestedTransitions: true,
+	data: { items: [] },
+	html: `No items.`,
+};
diff --git a/test/runtime/samples/each-block-else-mount-or-intro/main.html b/test/runtime/samples/each-block-else-mount-or-intro/main.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/each-block-else-mount-or-intro/main.html
@@ -0,0 +1,9 @@
+{#each items as item}
+	<Widget {item}/>
+{:else}
+	No items.
+{/each}
+
+<script>
+	export default { components: { Widget: './Widget.html' } };
+</script>
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Dynamic component instances aren't nulled out if they no longer exist
resulting in bugs like this: https://svelte.technology/repl?version=2.9.4&gist=548cb46d598080e13992ccacb9989a10

This affects the forthcoming version of Sapper. AFAICT it's an easy fix — PR inbound


Discussion:

Resolving patch:
diff --git a/src/compile/nodes/Component.ts b/src/compile/nodes/Component.ts
--- a/src/compile/nodes/Component.ts
+++ b/src/compile/nodes/Component.ts
@@ -429,12 +429,13 @@ export default class Component extends Node {
 						`)}
 
 						${this.ref && `#component.refs.${this.ref} = ${name};`}
-					}
-
-					${this.ref && deindent`
-						else if (#component.refs.${this.ref} === ${name}) {
+					} else {
+						${name} = null;
+						${this.ref && deindent`
+						if (#component.refs.${this.ref} === ${name}) {
 							#component.refs.${this.ref} = null;
 						}`}
+					}
 				}
 			`);
 


Test patch:
diff --git a/test/runtime/samples/dynamic-component-nulled-out/Foo.html b/test/runtime/samples/dynamic-component-nulled-out/Foo.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-nulled-out/Foo.html
@@ -0,0 +1 @@
+<p>Foo</p>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-nulled-out/_config.js b/test/runtime/samples/dynamic-component-nulled-out/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-nulled-out/_config.js
@@ -0,0 +1,21 @@
+export default {
+	html: `
+		<p>Foo</p>
+	`,
+
+	nestedTransitions: true,
+
+	test(assert, component, target) {
+		const state = component.get();
+
+		component.set({ Foo: null });
+
+		assert.htmlEqual(target.innerHTML, ``);
+
+		component.set({ Foo: state.Foo });
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>Foo</p>
+		`);
+	}
+};
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-nulled-out/main.html b/test/runtime/samples/dynamic-component-nulled-out/main.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-nulled-out/main.html
@@ -0,0 +1,11 @@
+<svelte:component this={Foo}/>
+
+<script>
+	import Foo from './Foo.html';
+
+	export default {
+		data() {
+			return { Foo };
+		}
+	};
+</script>
\ No newline at end of file
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
addResizeListener bug
It's possible (albeit unusual) for [this line](https://github.com/sveltejs/svelte/blob/82c9217e534fef018b04dbfa0bf7483303f3dcb8/src/shared/dom.js#L223) to run before `win` has been set


Discussion:
This bug hit me yesterday... During a demo no less.
In my case I was destroying a component too quickly after it was instantiated, using a `<svelte:component>`

Resolving patch:
diff --git a/src/shared/dom.js b/src/shared/dom.js
--- a/src/shared/dom.js
+++ b/src/shared/dom.js
@@ -220,7 +220,7 @@ export function addResizeListener(element, fn) {
 
 	return {
 		cancel: () => {
-			win.removeEventListener('resize', fn);
+			win && win.removeEventListener('resize', fn);
 			element.removeChild(object);
 		}
 	};


Test patch:
diff --git a/test/js/samples/bind-width-height/expected-bundle.js b/test/js/samples/bind-width-height/expected-bundle.js
--- a/test/js/samples/bind-width-height/expected-bundle.js
+++ b/test/js/samples/bind-width-height/expected-bundle.js
@@ -43,7 +43,7 @@ function addResizeListener(element, fn) {
 
 	return {
 		cancel: () => {
-			win.removeEventListener('resize', fn);
+			win && win.removeEventListener('resize', fn);
 			element.removeChild(object);
 		}
 	};
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
resize bindings broken in v3
The handler isn't being called with the element as context

https://v3.svelte.technology/repl?version=3.0.0-alpha8&gist=0eb9e3a2d22b981b67924c326ed1293a


Discussion:

Resolving patch:
diff --git a/src/compile/render-dom/wrappers/Element/index.ts b/src/compile/render-dom/wrappers/Element/index.ts
--- a/src/compile/render-dom/wrappers/Element/index.ts
+++ b/src/compile/render-dom/wrappers/Element/index.ts
@@ -494,7 +494,7 @@ export default class ElementWrapper extends Wrapper {
 					block.addVariable(resize_listener);
 
 					block.builders.mount.addLine(
-						`${resize_listener} = @addResizeListener(${this.var}, ${callee});`
+						`${resize_listener} = @addResizeListener(${this.var}, ${callee}.bind(${this.var}));`
 					);
 
 					block.builders.destroy.addLine(


Test patch:
diff --git a/test/js/samples/bind-width-height/expected.js b/test/js/samples/bind-width-height/expected.js
--- a/test/js/samples/bind-width-height/expected.js
+++ b/test/js/samples/bind-width-height/expected.js
@@ -13,7 +13,7 @@ function create_fragment(component, ctx) {
 
 		m(target, anchor) {
 			insert(target, div, anchor);
-			div_resize_listener = addResizeListener(div, ctx.div_resize_handler);
+			div_resize_listener = addResizeListener(div, ctx.div_resize_handler.bind(div));
 			current = true;
 		},
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
v3: Bindings broken when binding this and value
Here's a [REPL](https://v3.svelte.technology/repl?version=3.0.0-alpha9&gist=06e5b13e5ca1b9fb811f4178843b1e87) - when typing into the input, `$$node is not defined` is thown and the binding not updated.


Discussion:

Resolving patch:
diff --git a/src/compile/render-dom/wrappers/Element/index.ts b/src/compile/render-dom/wrappers/Element/index.ts
--- a/src/compile/render-dom/wrappers/Element/index.ts
+++ b/src/compile/render-dom/wrappers/Element/index.ts
@@ -403,7 +403,9 @@ export default class ElementWrapper extends Wrapper {
 		const groups = events
 			.map(event => ({
 				events: event.eventNames,
-				bindings: mungedBindings.filter(binding => event.filter(this.node, binding.name))
+				bindings: mungedBindings
+					.filter(binding => binding.name !== 'this')
+					.filter(binding => event.filter(this.node, binding.name))
 			}))
 			.filter(group => group.bindings.length);
 


Test patch:
diff --git a/test/runtime/samples/binding-this-and-value/_config.js b/test/runtime/samples/binding-this-and-value/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/binding-this-and-value/_config.js
@@ -0,0 +1,24 @@
+export default {
+	html: `
+		<input>
+		<p>value: initial</p>
+	`,
+
+	ssrHtml: `
+		<input value="initial">
+		<p>value: initial</p>
+	`,
+
+	async test({ assert, target, window }) {
+		const input = target.querySelector('input');
+		const event = new window.Event('input');
+
+		input.value = 'changed';
+		await input.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>value: changed</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-this-and-value/main.html b/test/runtime/samples/binding-this-and-value/main.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/binding-this-and-value/main.html
@@ -0,0 +1,7 @@
+<script>
+	let node;
+	export let value = 'initial';
+</script>
+
+<input bind:this={node} bind:value>
+<p>value: {value}</p>
Repository: sveltejs/svelte (JavaScript) — Bug Fix

Issue:
Event handlers not deconflicted when one is binding inside each loop and one outside
```html
<input bind:value={foo}>

{#each [] as bar}
	<input bind:value={bar}>
{/each}
```

results in code that look like

```javascript
	function input_input_handler() {
		foo = this.value;
		$$invalidate('foo', foo);
	}

	function input_input_handler({ bar, each_value, bar_index }) {
		each_value[bar_index] = this.value;
	}
```

(Aside: I can't believe this isn't a syntax error, and that I had to find this out by my app not working. Thanks, javascript.)


Discussion:

Resolving patch:
diff --git a/src/compile/render-dom/wrappers/Element/index.ts b/src/compile/render-dom/wrappers/Element/index.ts
--- a/src/compile/render-dom/wrappers/Element/index.ts
+++ b/src/compile/render-dom/wrappers/Element/index.ts
@@ -410,7 +410,7 @@ export default class ElementWrapper extends Wrapper {
 			.filter(group => group.bindings.length);
 
 		groups.forEach(group => {
-			const handler = block.getUniqueName(`${this.var}_${group.events.join('_')}_handler`);
+			const handler = renderer.component.getUniqueName(`${this.var}_${group.events.join('_')}_handler`);
 			renderer.component.declarations.push(handler);
 			renderer.component.template_references.add(handler);
 


Test patch:
diff --git a/test/runtime/samples/binding-input-text-contextual-deconflicted/_config.js b/test/runtime/samples/binding-input-text-contextual-deconflicted/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/binding-input-text-contextual-deconflicted/_config.js
@@ -0,0 +1,37 @@
+export default {
+	props: {
+		foo: 'a',
+		items: ['x'],
+	},
+
+	html: `
+		<div><input><p>a</p></div>
+		<div><input><p>x</p></div>
+	`,
+
+	ssrHtml: `
+		<div><input value=a><p>a</p></div>
+		<div><input value=x><p>x</p></div>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const inputs = [...target.querySelectorAll('input')];
+		const items = component.items;
+		const event = new window.Event('input');
+
+		assert.equal(inputs[0].value, 'a');
+
+		inputs[0].value = 'b';
+		inputs[1].value = 'y';
+		await inputs[0].dispatchEvent(event);
+		await inputs[1].dispatchEvent(event);
+
+		assert.equal(component.foo, 'b');
+		assert.equal(component.items[0], 'y');
+
+		assert.htmlEqual(target.innerHTML, `
+			<div><input><p>b</p></div>
+			<div><input><p>y</p></div>
+		`);
+	},
+};
diff --git a/test/runtime/samples/binding-input-text-contextual-deconflicted/main.html b/test/runtime/samples/binding-input-text-contextual-deconflicted/main.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/binding-input-text-contextual-deconflicted/main.html
@@ -0,0 +1,5 @@
+<div><input bind:value={foo}><p>{foo}</p></div>
+
+{#each items as bar}
+	<div><input bind:value={bar}><p>{bar}</p></div>
+{/each}
\ No newline at end of file