Merge branch 'master' into improve-perf

src/generators/dom/index.js

@@ -230,6 +230,8 @@ export default function dom ( parsed, source, options, names ) {
 	let i = generator.renderers.length;
 	while ( i-- ) builders.main.addBlock( generator.renderers[i] );
 
+	builders.init.addLine( `this._torndown = false;` );
+
 	if ( parsed.css && options.css !== false ) {
 		builders.init.addLine( `if ( !addedCss ) addCss();` );
 	}
@@ -334,6 +336,7 @@ export default function dom ( parsed, source, options, names ) {
 			this._fragment = null;
 
 			this._state = {};
+			this._torndown = true;
 		};
 	` );
 

src/generators/dom/visitors/attributes/binding/index.js

@@ -70,10 +70,10 @@ export default function createBinding ( generator, node, attribute, current, loc
 		setter = deindent`
 			var ${parts[0]} = component.get( '${parts[0]}' );
 			${parts[0]}.${parts.slice( 1 ).join( '.' )} = ${value};
-			component.set({ ${parts[0]}: ${parts[0]} });
+			component._set({ ${parts[0]}: ${parts[0]} });
 		`;
 	} else {
-		setter = `component.set({ ${attribute.value}: ${value} });`;
+		setter = `component._set({ ${attribute.value}: ${value} });`;
 	}
 
 	// special case
@@ -88,6 +88,7 @@ export default function createBinding ( generator, node, attribute, current, loc
 			var ${local.name}_updating = false;
 
 			component._bindings.push( function () {
+				if ( ${local.name}._torndown ) return;
 				${local.name}.observe( '${attribute.name}', function ( value ) {
 					${local.name}_updating = true;
 					${setter}

test/generate.js

@@ -9,8 +9,13 @@ import { addLineNumbers, loadConfig, svelte, env, setupHtmlEqual } from './helpe
 let showCompiledCode = false;
 let compileOptions = null;
 
+function getName ( filename ) {
+	const base = path.basename( filename ).replace( '.html', '' );
+	return base[0].toUpperCase() + base.slice( 1 );
+}
+
 require.extensions[ '.html' ] = function ( module, filename ) {
-	const options = Object.assign({ filename }, compileOptions );
+	const options = Object.assign({ filename, name: getName( filename ) }, compileOptions );
 	const { code } = svelte.compile( fs.readFileSync( filename, 'utf-8' ), options );
 
 	if ( showCompiledCode ) console.log( addLineNumbers( code ) ); // eslint-disable-line no-console

test/generator/component-binding-conditional-b/Bar.html

@@ -0,0 +1,9 @@
+<p>y: {{y}}</p>
+
+<script>
+	export default {
+		data: () => ({
+			y: 'bar'
+		})
+	};
+</script>

test/generator/component-binding-conditional-b/Baz.html

@@ -0,0 +1,7 @@
+<script>
+	export default {
+		data: () => ({
+			x: true
+		})
+	};
+</script>

test/generator/component-binding-conditional-b/Foo.html

@@ -0,0 +1,9 @@
+<p>y: {{y}}</p>
+
+<script>
+	export default {
+		data: () => ({
+			y: 'foo'
+		})
+	};
+</script>

test/generator/component-binding-conditional-b/_config.js

@@ -0,0 +1,24 @@
+export default {
+	'skip-ssr': true, // TODO delete this line, once binding works
+
+	// This test fails, because the Bar y binding is activated before the
+	// Baz x binding, meaning that by the time Foo is created, we already
+	// have a value for y which Foo won't override. Easily worked around,
+	// probably impossible to 'fix', so this test is left here for info
+	// purposes but will probably remain skipped indefinitely.
+	skip: true,
+
+	html: `
+		<p>y: foo</p>
+		<p>y: foo</p>
+	`,
+
+	test ( assert, component, target ) {
+		component.set({ x: false });
+
+		assert.htmlEqual( target.innerHTML, `
+			<p>y: foo</p>
+			<p>y: foo</p>
+		` );
+	}
+};

test/generator/component-binding-conditional-b/main.html

@@ -0,0 +1,23 @@
+<p>y: {{y}}</p>
+
+<Baz bind:x/>
+
+{{#if x}}
+	<Foo bind:y/>
+{{else}}
+	<Bar bind:y/>
+{{/if}}
+
+<script>
+	import Foo from './Foo.html';
+	import Bar from './Bar.html';
+	import Baz from './Baz.html';
+
+	export default {
+		components: {
+			Foo,
+			Bar,
+			Baz
+		}
+	};
+</script>

test/generator/component-binding-conditional/Bar.html

@@ -0,0 +1,9 @@
+<p>y: {{y}}</p>
+
+<script>
+	export default {
+		data: () => ({
+			y: 'bar'
+		})
+	};
+</script>

test/generator/component-binding-conditional/Baz.html

@@ -0,0 +1,7 @@
+<script>
+	export default {
+		data: () => ({
+			x: true
+		})
+	};
+</script>

test/generator/component-binding-conditional/Foo.html

@@ -0,0 +1,9 @@
+<p>y: {{y}}</p>
+
+<script>
+	export default {
+		data: () => ({
+			y: 'foo'
+		})
+	};
+</script>

test/generator/component-binding-conditional/_config.js

@@ -0,0 +1,17 @@
+export default {
+	'skip-ssr': true, // TODO delete this line, once binding works
+
+	html: `
+		<p>y: foo</p>
+		<p>y: foo</p>
+	`,
+
+	test ( assert, component, target ) {
+		component.set({ x: false });
+
+		assert.htmlEqual( target.innerHTML, `
+			<p>y: foo</p>
+			<p>y: foo</p>
+		` );
+	}
+};

test/generator/component-binding-conditional/main.html

@@ -0,0 +1,23 @@
+<p>y: {{y}}</p>
+
+{{#if x}}
+	<Foo bind:y/>
+{{else}}
+	<Bar bind:y/>
+{{/if}}
+
+<Baz bind:x/>
+
+<script>
+	import Foo from './Foo.html';
+	import Bar from './Bar.html';
+	import Baz from './Baz.html';
+
+	export default {
+		components: {
+			Foo,
+			Bar,
+			Baz
+		}
+	};
+</script>