prevent infinite loops caused by pathological component bindings (#398)

src/generators/dom/visitors/attributes/addComponentBinding.js

@@ -45,6 +45,7 @@ export default function createBinding ( generator, node, attribute, current, loc
 		component._bindings.push( function () {
 			if ( ${local.name}._torndown ) return;
 			${local.name}.observe( '${attribute.name}', function ( value ) {
+				if ( ${local.name}_updating ) return;
 				${local.name}_updating = true;
 				${setter}
 				${local.name}_updating = false;
@@ -54,7 +55,9 @@ export default function createBinding ( generator, node, attribute, current, loc
 
 	local.update.addBlock( deindent`
 		if ( !${local.name}_updating && ${dependencies.map( dependency => `'${dependency}' in changed` ).join( '||' )} ) {
+			${local.name}_updating = true;
 			${local.name}._set({ ${attribute.name}: ${snippet} });
+			${local.name}_updating = false;
 		}
 	` );
 }

test/generator/samples/component-binding-infinite-loop/A.html

@@ -0,0 +1,12 @@
+<B bind:currentIdentifier />
+<B bind:currentIdentifier />
+
+<script>
+import B from './B.html';
+
+export default {
+	components: {
+		B
+	}
+}
+</script>

test/generator/samples/component-binding-infinite-loop/B.html

@@ -0,0 +1,20 @@
+{{#each list as item}}
+	<p>
+		<C identifier="{{item}}" bind:currentIdentifier>
+			{{item}}
+		</C>
+	</p>
+{{/each}}
+
+<script>
+import C from './C.html';
+
+export default {
+	data: () => ({
+		list: [1, 2, 3, 2, 1]
+	}),
+	components: {
+		C
+	}
+}
+</script>

test/generator/samples/component-binding-infinite-loop/C.html

@@ -0,0 +1,23 @@
+<span
+	on:click="toggle()"
+	class="{{isCurrentlySelected ? 'selected' : ''}}"
+>
+	{{yield}}
+</span>
+
+<script>
+export default {
+	computed: {
+		isCurrentlySelected: (currentIdentifier, identifier) => currentIdentifier === identifier
+	},
+	methods: {
+		toggle() {
+			const isCurrentlySelected = this.get('isCurrentlySelected')
+
+			this.set({
+				currentIdentifier: isCurrentlySelected ? null : this.get('identifier')
+			})
+		}
+	}
+}
+</script>

test/generator/samples/component-binding-infinite-loop/_config.js

@@ -0,0 +1,90 @@
+export default {
+	html: `
+		<p><span class=''>1</span></p>
+		<p><span class='selected'>2</span></p>
+		<p><span class=''>3</span></p>
+		<p><span class='selected'>2</span></p>
+		<p><span class=''>1</span></p>
+
+		<p><span class=''>1</span></p>
+		<p><span class='selected'>2</span></p>
+		<p><span class=''>3</span></p>
+		<p><span class='selected'>2</span></p>
+		<p><span class=''>1</span></p>
+
+		<p><span class=''>1</span></p>
+		<p><span class='selected'>2</span></p>
+		<p><span class=''>3</span></p>
+		<p><span class='selected'>2</span></p>
+		<p><span class=''>1</span></p>
+
+		<p><span class=''>1</span></p>
+		<p><span class='selected'>2</span></p>
+		<p><span class=''>3</span></p>
+		<p><span class='selected'>2</span></p>
+		<p><span class=''>1</span></p>
+	`,
+
+	test ( assert, component, target, window ) {
+		const click = new window.MouseEvent( 'click' );
+		const spans = target.querySelectorAll( 'span' );
+
+		spans[0].dispatchEvent( click );
+
+		assert.equal( component.get( 'currentIdentifier' ), 1 );
+		assert.htmlEqual( target.innerHTML, `
+			<p><span class='selected'>1</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class=''>3</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class='selected'>1</span></p>
+
+			<p><span class='selected'>1</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class=''>3</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class='selected'>1</span></p>
+
+			<p><span class='selected'>1</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class=''>3</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class='selected'>1</span></p>
+
+			<p><span class='selected'>1</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class=''>3</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class='selected'>1</span></p>
+		` );
+
+		spans[0].dispatchEvent( click );
+
+		assert.equal( component.get( 'currentIdentifier' ), null );
+		assert.htmlEqual( target.innerHTML, `
+			<p><span class=''>1</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class=''>3</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class=''>1</span></p>
+
+			<p><span class=''>1</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class=''>3</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class=''>1</span></p>
+
+			<p><span class=''>1</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class=''>3</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class=''>1</span></p>
+
+			<p><span class=''>1</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class=''>3</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class=''>1</span></p>
+		` );
+	}
+};

test/generator/samples/component-binding-infinite-loop/main.html

@@ -0,0 +1,17 @@
+<A bind:currentIdentifier />
+<A bind:currentIdentifier />
+
+<script>
+import A from './A.html';
+
+export default {
+	data() {
+		return {
+			currentIdentifier: 2
+		}
+	},
+	components: {
+		A
+	}
+}
+</script>