Merge pull request #1216 from sveltejs/gh-1213

prevent context variables being called component or state

Author: Rich-Harris

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/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 }
+		]
+	}
+};

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>