Merge pull request #709 from sveltejs/gh-708

[WIP] Fix #708
sveltejs · Jul 25, 2017 · 1474556 · 1474556
2 parents 0a2fed8 + 9085c0a
commit 1474556
Show file tree

Hide file tree

Showing 21 changed files with 238 additions and 54 deletions.
diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts
@@ -125,9 +125,6 @@ export default function dom(
 		@dispatchObservers( this, this._observers.pre, newState, oldState );
 		${block.hasUpdateMethod && `this._fragment.update( newState, this._state );`}
 		@dispatchObservers( this, this._observers.post, newState, oldState );
-		${generator.hasComponents && `@callAll(this._oncreate);`}
-		${generator.hasComplexBindings && `@callAll(this._bindings);`}
-		${generator.hasIntroTransitions && `@callAll(this._postcreate);`}
 	`;
 
 	if (hasJs) {
@@ -207,9 +204,20 @@ export default function dom(
 			${generator.stylesheet.hasStyles &&
 				options.css !== false &&
 				`if ( !document.getElementById( '${generator.stylesheet.id}-style' ) ) @add_css();`}
-			${generator.hasComponents && `this._oncreate = [];`}
-			${generator.hasComplexBindings && `this._bindings = [];`}
-			${generator.hasIntroTransitions && `this._postcreate = [];`}
+
+			${templateProperties.oncreate && `var oncreate = @template.oncreate.bind( this );`}
+
+			${(templateProperties.oncreate || generator.hasComponents || generator.hasComplexBindings || generator.hasIntroTransitions) && deindent`
+				if ( !options._root ) {
+					this._oncreate = [${templateProperties.oncreate && `oncreate`}];
+					${(generator.hasComponents || generator.hasComplexBindings) && `this._beforecreate = [];`}
+					${(generator.hasComponents || generator.hasIntroTransitions) && `this._aftercreate = [];`}
+				} ${templateProperties.oncreate && deindent`
+					else {
+						this._root._oncreate.push(oncreate);
+					}
+				`}
+			`}
 
 			this._fragment = @create_main_fragment( this._state, this );
 
@@ -226,18 +234,16 @@ export default function dom(
 					`}
 				this._fragment.${block.hasIntroMethod ? 'intro' : 'mount'}( options.target, null );
 			}
-			
-			${generator.hasComponents && `@callAll(this._oncreate);`}
-			${generator.hasComplexBindings && `@callAll(this._bindings);`}
-
-			${templateProperties.oncreate && deindent`
-				if ( options._root ) {
-					options._root._oncreate.push( @template.oncreate.bind( this ) );
-				} else {
-					@template.oncreate.call( this );
-				}`}
-
-			${generator.hasIntroTransitions && `@callAll(this._postcreate);`}
+
+			${(generator.hasComponents || generator.hasComplexBindings || templateProperties.oncreate || generator.hasIntroTransitions) && deindent`
+				if ( !options._root ) {
+					${generator.hasComponents && `this._lock = true;`}
+					${(generator.hasComponents || generator.hasComplexBindings) && `@callAll(this._beforecreate);`}
+					${(generator.hasComponents || templateProperties.oncreate) && `@callAll(this._oncreate);`}
+					${(generator.hasComponents || generator.hasIntroTransitions) && `@callAll(this._aftercreate);`}
+					${generator.hasComponents && `this._lock = false;`}
+				}
+			`}
 		}
 
 		@assign( ${prototypeBase}, ${proto});

diff --git a/src/generators/dom/visitors/Component/Binding.ts b/src/generators/dom/visitors/Component/Binding.ts
@@ -66,15 +66,24 @@ export default function visitBinding(
 	const updating = block.getUniqueName(`${local.name}_updating`);
 	block.addVariable(updating, 'false');
 
+	const observer = block.getUniqueName('observer');
+	const value = block.getUniqueName('value');
+
 	local.create.addBlock(deindent`
-		#component._bindings.push( function () {
-			if ( ${local.name}._torndown ) return;
-			${local.name}.observe( '${attribute.name}', function ( value ) {
-				if ( ${updating} ) return;
-				${updating} = true;
-				${setter}
-				${updating} = false;
-			}, { init: @differs( ${local.name}.get( '${attribute.name}' ), ${snippet} ) });
+		function ${observer} ( value ) {
+			if ( ${updating} ) return;
+			${updating} = true;
+			${setter}
+			${updating} = false;
+		}
+
+		${local.name}.observe( '${attribute.name}', ${observer}, { init: false });
+
+		#component._root._beforecreate.push( function () {
+			var value = ${local.name}.get( '${attribute.name}' );
+			if ( @differs( value, ${snippet} ) ) {
+				${observer}.call( ${local.name}, value );
+			}
 		});
 	`);
 

diff --git a/src/generators/dom/visitors/Element/Binding.ts b/src/generators/dom/visitors/Element/Binding.ts
@@ -94,7 +94,7 @@ export default function visitBinding(
 
 		generator.hasComplexBindings = true;
 		block.builders.hydrate.addBlock(
-			`if ( !('${name}' in state) ) #component._bindings.push( ${handler} );`
+			`if ( !('${name}' in state) ) #component._root._beforecreate.push( ${handler} );`
 		);
 	} else if (attribute.name === 'group') {
 		// <input type='checkbox|radio' bind:group='selected'> special case
@@ -120,7 +120,7 @@ export default function visitBinding(
 		updateElement = `${state.parentNode}.checked = ${condition};`;
 	} else if (node.name === 'audio' || node.name === 'video') {
 		generator.hasComplexBindings = true;
-		block.builders.hydrate.addBlock(`#component._bindings.push( ${handler} );`);
+		block.builders.hydrate.addBlock(`#component._root._beforecreate.push( ${handler} );`);
 
 		if (attribute.name === 'currentTime') {
 			const frame = block.getUniqueName(`${state.parentNode}_animationframe`);

diff --git a/src/generators/dom/visitors/Element/addTransitions.ts b/src/generators/dom/visitors/Element/addTransitions.ts
@@ -23,7 +23,7 @@ export default function addTransitions(
 		const fn = `@template.transitions.${intro.name}`;
 
 		block.builders.intro.addBlock(deindent`
-			#component._postcreate.push( function () {
+			#component._root._aftercreate.push( function () {
 				if ( !${name} ) ${name} = @wrapTransition( #component, ${state.name}, ${fn}, ${snippet}, true, null );
 				${name}.run( true, function () {
 					#component.fire( 'intro.end', { node: ${state.name} });
@@ -58,7 +58,7 @@ export default function addTransitions(
 			}
 
 			block.builders.intro.addBlock(deindent`
-				#component._postcreate.push( function () {
+				#component._root._aftercreate.push( function () {
 					${introName} = @wrapTransition( #component, ${state.name}, ${fn}, ${snippet}, true, null );
 					${introName}.run( true, function () {
 						#component.fire( 'intro.end', { node: ${state.name} });

diff --git a/src/generators/dom/visitors/shared/binding/getSetter.ts b/src/generators/dom/visitors/shared/binding/getSetter.ts
@@ -27,10 +27,10 @@ export default function getSetter({
 			list[index]${tail} = ${value};
 
 			${computed
-				? `#component._set({ ${dependencies
+				? `#component.set({ ${dependencies
 						.map((prop: string) => `${prop}: state.${prop}`)
 						.join(', ')} });`
-				: `#component._set({ ${dependencies
+				: `#component.set({ ${dependencies
 						.map((prop: string) => `${prop}: #component.get( '${prop}' )`)
 						.join(', ')} });`}
 		`;
@@ -40,13 +40,13 @@ export default function getSetter({
 		return deindent`
 			var state = #component.get();
 			${snippet} = ${value};
-			#component._set({ ${dependencies
+			#component.set({ ${dependencies
 				.map((prop: string) => `${prop}: state.${prop}`)
 				.join(', ')} });
 		`;
 	}
 
-	return `#component._set({ ${name}: ${value} });`;
+	return `#component.set({ ${name}: ${value} });`;
 }
 
 function isComputed(node: Node) {

diff --git a/src/shared/index.js b/src/shared/index.js
@@ -106,7 +106,12 @@ export function onDev(eventName, handler) {
 
 export function set(newState) {
 	this._set(assign({}, newState));
+	if (this._root._lock) return;
+	this._root._lock = true;
+	callAll(this._root._beforecreate);
 	callAll(this._root._oncreate);
+	callAll(this._root._aftercreate);
+	this._root._lock = false;
 }
 
 export function callAll(fns) {

diff --git a/test/js/samples/collapses-text-around-comments/expected-bundle.js b/test/js/samples/collapses-text-around-comments/expected-bundle.js
@@ -115,7 +115,12 @@ function on(eventName, handler) {
 
 function set(newState) {
 	this._set(assign({}, newState));
+	if (this._root._lock) return;
+	this._root._lock = true;
+	callAll(this._root._beforecreate);
 	callAll(this._root._oncreate);
+	callAll(this._root._aftercreate);
+	this._root._lock = false;
 }
 
 function callAll(fns) {

diff --git a/test/js/samples/computed-collapsed-if/expected-bundle.js b/test/js/samples/computed-collapsed-if/expected-bundle.js
@@ -91,7 +91,12 @@ function on(eventName, handler) {
 
 function set(newState) {
 	this._set(assign({}, newState));
+	if (this._root._lock) return;
+	this._root._lock = true;
+	callAll(this._root._beforecreate);
 	callAll(this._root._oncreate);
+	callAll(this._root._aftercreate);
+	this._root._lock = false;
 }
 
 function callAll(fns) {

diff --git a/test/js/samples/each-block-changed-check/expected-bundle.js b/test/js/samples/each-block-changed-check/expected-bundle.js
@@ -124,7 +124,12 @@ function on(eventName, handler) {
 
 function set(newState) {
 	this._set(assign({}, newState));
+	if (this._root._lock) return;
+	this._root._lock = true;
+	callAll(this._root._beforecreate);
 	callAll(this._root._oncreate);
+	callAll(this._root._aftercreate);
+	this._root._lock = false;
 }
 
 function callAll(fns) {

diff --git a/test/js/samples/event-handlers-custom/expected-bundle.js b/test/js/samples/event-handlers-custom/expected-bundle.js
@@ -109,7 +109,12 @@ function on(eventName, handler) {
 
 function set(newState) {
 	this._set(assign({}, newState));
+	if (this._root._lock) return;
+	this._root._lock = true;
+	callAll(this._root._beforecreate);
 	callAll(this._root._oncreate);
+	callAll(this._root._aftercreate);
+	this._root._lock = false;
 }
 
 function callAll(fns) {

diff --git a/test/js/samples/if-block-no-update/expected-bundle.js b/test/js/samples/if-block-no-update/expected-bundle.js
@@ -115,7 +115,12 @@ function on(eventName, handler) {
 
 function set(newState) {
 	this._set(assign({}, newState));
+	if (this._root._lock) return;
+	this._root._lock = true;
+	callAll(this._root._beforecreate);
 	callAll(this._root._oncreate);
+	callAll(this._root._aftercreate);
+	this._root._lock = false;
 }
 
 function callAll(fns) {

diff --git a/test/js/samples/if-block-simple/expected-bundle.js b/test/js/samples/if-block-simple/expected-bundle.js
@@ -115,7 +115,12 @@ function on(eventName, handler) {
 
 function set(newState) {
 	this._set(assign({}, newState));
+	if (this._root._lock) return;
+	this._root._lock = true;
+	callAll(this._root._beforecreate);
 	callAll(this._root._oncreate);
+	callAll(this._root._aftercreate);
+	this._root._lock = false;
 }
 
 function callAll(fns) {

diff --git a/test/js/samples/non-imported-component/expected-bundle.js b/test/js/samples/non-imported-component/expected-bundle.js
@@ -103,7 +103,12 @@ function on(eventName, handler) {
 
 function set(newState) {
 	this._set(assign({}, newState));
+	if (this._root._lock) return;
+	this._root._lock = true;
+	callAll(this._root._beforecreate);
 	callAll(this._root._oncreate);
+	callAll(this._root._aftercreate);
+	this._root._lock = false;
 }
 
 function callAll(fns) {
@@ -178,7 +183,12 @@ function SvelteComponent ( options ) {
 	this._yield = options._yield;
 
 	this._torndown = false;
-	this._oncreate = [];
+
+	if ( !options._root ) {
+		this._oncreate = [];
+		this._beforecreate = [];
+		this._aftercreate = [];
+	}
 
 	this._fragment = create_main_fragment( this._state, this );
 
@@ -187,7 +197,13 @@ function SvelteComponent ( options ) {
 		this._fragment.mount( options.target, null );
 	}
 
-	callAll(this._oncreate);
+	if ( !options._root ) {
+		this._lock = true;
+		callAll(this._beforecreate);
+		callAll(this._oncreate);
+		callAll(this._aftercreate);
+		this._lock = false;
+	}
 }
 
 assign( SvelteComponent.prototype, proto );
@@ -197,7 +213,6 @@ SvelteComponent.prototype._set = function _set ( newState ) {
 	this._state = assign( {}, oldState, newState );
 	dispatchObservers( this, this._observers.pre, newState, oldState );
 	dispatchObservers( this, this._observers.post, newState, oldState );
-	callAll(this._oncreate);
 };
 
 SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) {

diff --git a/test/js/samples/non-imported-component/expected.js b/test/js/samples/non-imported-component/expected.js
@@ -62,7 +62,12 @@ function SvelteComponent ( options ) {
 	this._yield = options._yield;
 
 	this._torndown = false;
-	this._oncreate = [];
+
+	if ( !options._root ) {
+		this._oncreate = [];
+		this._beforecreate = [];
+		this._aftercreate = [];
+	}
 
 	this._fragment = create_main_fragment( this._state, this );
 
@@ -71,7 +76,13 @@ function SvelteComponent ( options ) {
 		this._fragment.mount( options.target, null );
 	}
 
-	callAll(this._oncreate);
+	if ( !options._root ) {
+		this._lock = true;
+		callAll(this._beforecreate);
+		callAll(this._oncreate);
+		callAll(this._aftercreate);
+		this._lock = false;
+	}
 }
 
 assign( SvelteComponent.prototype, proto );
@@ -81,7 +92,6 @@ SvelteComponent.prototype._set = function _set ( newState ) {
 	this._state = assign( {}, oldState, newState );
 	dispatchObservers( this, this._observers.pre, newState, oldState );
 	dispatchObservers( this, this._observers.post, newState, oldState );
-	callAll(this._oncreate);
 };
 
 SvelteComponent.prototype.teardown = SvelteComponent.prototype.destroy = function destroy ( detach ) {

diff --git a/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js b/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js
@@ -91,7 +91,12 @@ function on(eventName, handler) {
 
 function set(newState) {
 	this._set(assign({}, newState));
+	if (this._root._lock) return;
+	this._root._lock = true;
+	callAll(this._root._beforecreate);
 	callAll(this._root._oncreate);
+	callAll(this._root._aftercreate);
+	this._root._lock = false;
 }
 
 function callAll(fns) {
@@ -143,17 +148,23 @@ function SvelteComponent ( options ) {
 
 	this._torndown = false;
 
+	var oncreate = template.oncreate.bind( this );
+
+	if ( !options._root ) {
+		this._oncreate = [oncreate];
+	} else {
+	 	this._root._oncreate.push(oncreate);
+	 }
+
 	this._fragment = create_main_fragment( this._state, this );
 
 	if ( options.target ) {
 		this._fragment.create();
 		this._fragment.mount( options.target, null );
 	}
 
-	if ( options._root ) {
-		options._root._oncreate.push( template.oncreate.bind( this ) );
-	} else {
-		template.oncreate.call( this );
+	if ( !options._root ) {
+		callAll(this._oncreate);
 	}
 }