tidy up

src/generators/dom/visitors/Component/Binding.ts

@@ -1,6 +1,5 @@
 import deindent from '../../../../utils/deindent';
 import flattenReference from '../../../../utils/flattenReference';
-import getSetter from '../shared/binding/getSetter';
 import { DomGenerator } from '../../index';
 import Block from '../../Block';
 import { Node } from '../../../../interfaces';
@@ -52,52 +51,5 @@ export default function visitBinding(
 		dependencies
 	});
 
-	const setter = getSetter({
-		block,
-		name,
-		snippet,
-		_this: 'this',
-		props: '_context',
-		attribute,
-		dependencies,
-		value: 'value',
-	});
-
 	generator.hasComplexBindings = true;
-
-	const updating = block.getUniqueName(`${local.name}_updating`);
-	block.addVariable(updating, 'false');
-
-	const observer = block.getUniqueName('observer');
-	const value = block.getUniqueName('value');
-
-	//console.log({ setter });
-
-	// local.create.addBlock(deindent`
-	// 	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 );
-	// 		}
-	// 	});
-	// `);
-
-	// local.update.addBlock(deindent`
-	// 	if ( !${updating} && ${dependencies
-	// 	.map(dependency => `changed.${dependency}`)
-	// 	.join(' || ')} ) {
-	// 		${updating} = true;
-	// 		${local.name}._set({ ${attribute.name}: ${snippet} });
-	// 		${updating} = false;
-	// 	}
-	// `);
 }

src/generators/dom/visitors/Component/Component.ts

@@ -152,12 +152,12 @@ export default function visitComponent(
 
 	const statements: string[] = [];
 	let name_updating: string;
-	let initialData: string;
+	let name_initial_data: string;
 	let bindings = [];
 
 	if (local.bindings.length) {
 		name_updating = block.alias(`${name}_updating`);
-		initialData = block.getUniqueName(`${name}_initial_data`);
+		name_initial_data = block.getUniqueName(`${name}_initial_data`);
 
 		block.addVariable(name_updating, '{}');
 
@@ -196,7 +196,7 @@ export default function visitComponent(
 			return {
 				init: deindent`
 					if ( ${binding.prop} in ${binding.obj} ) {
-						${initialData}.${binding.name} = ${binding.snippet};
+						${name_initial_data}.${binding.name} = ${binding.snippet};
 						${name_updating}.${binding.name} = true;
 					}`,
 				bind: deindent`
@@ -233,13 +233,13 @@ export default function visitComponent(
 		const initialPropString = stringifyProps(initialProps);
 
 		if (local.bindings.length) {
-			statements.push(`var ${initialData} = ${initialPropString};`);
+			statements.push(`var ${name_initial_data} = ${initialPropString};`);
 
 			bindings.forEach(binding => {
 				statements.push(binding.init);
 			});
 
-			componentInitProperties.push(`data: ${initialData}`);
+			componentInitProperties.push(`data: ${name_initial_data}`);
 
 			componentInitProperties.push(deindent`
 				_bind: function(changed, childState) {

src/generators/dom/visitors/Element/Binding.ts

@@ -1,6 +1,5 @@
 import deindent from '../../../../utils/deindent';
 import flattenReference from '../../../../utils/flattenReference';
-import getSetter from '../shared/binding/getSetter';
 import getStaticAttributeValue from './getStaticAttributeValue';
 import { DomGenerator } from '../../index';
 import Block from '../../Block';
@@ -50,16 +49,7 @@ export default function visitBinding(
 		type
 	);
 
-	let setter = getSetter({
+	let setter = getSetter(block, name, snippet, state.parentNode, attribute, dependencies, value);
-		block,
-		name,
-		snippet,
-		_this: state.parentNode,
-		props: '_svelte',
-		attribute,
-		dependencies,
-		value,
-	});
 	let updateElement = `${state.parentNode}.${attribute.name} = ${snippet};`;
 	const lock = `#${state.parentNode}_updating`;
 	let updateCondition = `!${lock}`;
@@ -271,3 +261,58 @@ function getBindingGroup(generator: DomGenerator, value: Node) {
 
 	return index;
 }
+
+function getSetter(
+	block: Block,
+	name: string,
+	snippet: string,
+	_this: string,
+	attribute: Node,
+	dependencies: string[],
+	value: string,
+) {
+	const tail = attribute.value.type === 'MemberExpression'
+		? getTailSnippet(attribute.value)
+		: '';
+
+	if (block.contexts.has(name)) {
+		const prop = dependencies[0];
+		const computed = isComputed(attribute.value);
+
+		return deindent`
+			var list = ${_this}._svelte.${block.listNames.get(name)};
+			var index = ${_this}._svelte.${block.indexNames.get(name)};
+			${computed && `var state = #component.get();`}
+			list[index]${tail} = ${value};
+
+			${computed
+				? `#component.set({ ${dependencies
+						.map((prop: string) => `${prop}: state.${prop}`)
+						.join(', ')} });`
+				: `#component.set({ ${dependencies
+						.map((prop: string) => `${prop}: #component.get( '${prop}' )`)
+						.join(', ')} });`}
+		`;
+	}
+
+	if (attribute.value.type === 'MemberExpression') {
+		return deindent`
+			var state = #component.get();
+			${snippet} = ${value};
+			#component.set({ ${dependencies
+				.map((prop: string) => `${prop}: state.${prop}`)
+				.join(', ')} });
+		`;
+	}
+
+	return `#component.set({ ${name}: ${value} });`;
+}
+
+function isComputed(node: Node) {
+	while (node.type === 'MemberExpression') {
+		if (node.computed) return true;
+		node = node.object;
+	}
+
+	return false;
+}

src/generators/dom/visitors/shared/binding/getSetter.ts

@@ -1,59 +0,0 @@
-import deindent from '../../../../../utils/deindent';
-import getTailSnippet from '../../../../../utils/getTailSnippet';
-import { Node } from '../../../../../interfaces';
-
-export default function getSetter({
-	block,
-	name,
-	snippet,
-	_this,
-	props,
-	attribute,
-	dependencies,
-	value,
-}) {
-	const tail = attribute.value.type === 'MemberExpression'
-		? getTailSnippet(attribute.value)
-		: '';
-
-	if (block.contexts.has(name)) {
-		const prop = dependencies[0];
-		const computed = isComputed(attribute.value);
-
-		return deindent`
-			var list = ${_this}.${props}.${block.listNames.get(name)};
-			var index = ${_this}.${props}.${block.indexNames.get(name)};
-			${computed && `var state = #component.get();`}
-			list[index]${tail} = ${value};
-
-			${computed
-				? `#component.set({ ${dependencies
-						.map((prop: string) => `${prop}: state.${prop}`)
-						.join(', ')} });`
-				: `#component.set({ ${dependencies
-						.map((prop: string) => `${prop}: #component.get( '${prop}' )`)
-						.join(', ')} });`}
-		`;
-	}
-
-	if (attribute.value.type === 'MemberExpression') {
-		return deindent`
-			var state = #component.get();
-			${snippet} = ${value};
-			#component.set({ ${dependencies
-				.map((prop: string) => `${prop}: state.${prop}`)
-				.join(', ')} });
-		`;
-	}
-
-	return `#component.set({ ${name}: ${value} });`;
-}
-
-function isComputed(node: Node) {
-	while (node.type === 'MemberExpression') {
-		if (node.computed) return true;
-		node = node.object;
-	}
-
-	return false;
-}

test/js/samples/collapses-text-around-comments/expected-bundle.js

@@ -38,14 +38,12 @@ function setAttribute(node, attribute, value) {
 }
 
 function destroy(detach) {
-	this.destroy = this.set = noop;
+	this.destroy = this.set = this.get = noop;
 	this.fire('destroy');
 
 	if (detach !== false) this._fragment.unmount();
 	this._fragment.destroy();
-	this._fragment = null;
+	this._fragment = this._state = null;
-
-	this._state = {};
 }
 
 function differs(a, b) {
@@ -144,6 +142,7 @@ function _set(newState) {
 
 	this._state = assign({}, oldState, newState);
 	this._recompute(changed, this._state, oldState, false);
+	if (this._bind) this._bind(changed, this._state);
 	dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
 	this._fragment.update(changed, this._state);
 	dispatchObservers(this, this._observers.post, changed, this._state, oldState);
@@ -230,6 +229,7 @@ function SvelteComponent ( options ) {
 
 	this._root = options._root || this;
 	this._yield = options._yield;
+	this._bind = options._bind;
 
 	if ( !document.getElementById( 'svelte-3590263702-style' ) ) add_css();
 

test/js/samples/collapses-text-around-comments/expected.js

@@ -65,6 +65,7 @@ function SvelteComponent ( options ) {
 
 	this._root = options._root || this;
 	this._yield = options._yield;
+	this._bind = options._bind;
 
 	if ( !document.getElementById( 'svelte-3590263702-style' ) ) add_css();
 

test/js/samples/computed-collapsed-if/expected-bundle.js

@@ -14,14 +14,12 @@ function assign(target) {
 }
 
 function destroy(detach) {
-	this.destroy = this.set = noop;
+	this.destroy = this.set = this.get = noop;
 	this.fire('destroy');
 
 	if (detach !== false) this._fragment.unmount();
 	this._fragment.destroy();
-	this._fragment = null;
+	this._fragment = this._state = null;
-
-	this._state = {};
 }
 
 function differs(a, b) {
@@ -120,6 +118,7 @@ function _set(newState) {
 
 	this._state = assign({}, oldState, newState);
 	this._recompute(changed, this._state, oldState, false);
+	if (this._bind) this._bind(changed, this._state);
 	dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
 	this._fragment.update(changed, this._state);
 	dispatchObservers(this, this._observers.post, changed, this._state, oldState);
@@ -179,6 +178,7 @@ function SvelteComponent ( options ) {
 
 	this._root = options._root || this;
 	this._yield = options._yield;
+	this._bind = options._bind;
 
 	this._fragment = create_main_fragment( this._state, this );
 

test/js/samples/computed-collapsed-if/expected.js

@@ -38,6 +38,7 @@ function SvelteComponent ( options ) {
 
 	this._root = options._root || this;
 	this._yield = options._yield;
+	this._bind = options._bind;
 
 	this._fragment = create_main_fragment( this._state, this );
 

test/js/samples/css-media-query/expected-bundle.js

@@ -34,14 +34,12 @@ function setAttribute(node, attribute, value) {
 }
 
 function destroy(detach) {
-	this.destroy = this.set = noop;
+	this.destroy = this.set = this.get = noop;
 	this.fire('destroy');
 
 	if (detach !== false) this._fragment.unmount();
 	this._fragment.destroy();
-	this._fragment = null;
+	this._fragment = this._state = null;
-
-	this._state = {};
 }
 
 function differs(a, b) {
@@ -140,6 +138,7 @@ function _set(newState) {
 
 	this._state = assign({}, oldState, newState);
 	this._recompute(changed, this._state, oldState, false);
+	if (this._bind) this._bind(changed, this._state);
 	dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
 	this._fragment.update(changed, this._state);
 	dispatchObservers(this, this._observers.post, changed, this._state, oldState);
@@ -212,6 +211,7 @@ function SvelteComponent ( options ) {
 
 	this._root = options._root || this;
 	this._yield = options._yield;
+	this._bind = options._bind;
 
 	if ( !document.getElementById( 'svelte-2363328337-style' ) ) add_css();
 

test/js/samples/css-media-query/expected.js

@@ -51,6 +51,7 @@ function SvelteComponent ( options ) {
 
 	this._root = options._root || this;
 	this._yield = options._yield;
+	this._bind = options._bind;
 
 	if ( !document.getElementById( 'svelte-2363328337-style' ) ) add_css();
 

test/js/samples/each-block-changed-check/expected-bundle.js

@@ -47,14 +47,12 @@ function createText(data) {
 }
 
 function destroy(detach) {
-	this.destroy = this.set = noop;
+	this.destroy = this.set = this.get = noop;
 	this.fire('destroy');
 
 	if (detach !== false) this._fragment.unmount();
 	this._fragment.destroy();
-	this._fragment = null;
+	this._fragment = this._state = null;
-
-	this._state = {};
 }
 
 function differs(a, b) {
@@ -153,6 +151,7 @@ function _set(newState) {
 
 	this._state = assign({}, oldState, newState);
 	this._recompute(changed, this._state, oldState, false);
+	if (this._bind) this._bind(changed, this._state);
 	dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
 	this._fragment.update(changed, this._state);
 	dispatchObservers(this, this._observers.post, changed, this._state, oldState);
@@ -326,6 +325,7 @@ function SvelteComponent ( options ) {
 
 	this._root = options._root || this;
 	this._yield = options._yield;
+	this._bind = options._bind;
 
 	this._fragment = create_main_fragment( this._state, this );
 

test/js/samples/each-block-changed-check/expected.js

@@ -152,6 +152,7 @@ function SvelteComponent ( options ) {
 
 	this._root = options._root || this;
 	this._yield = options._yield;
+	this._bind = options._bind;
 
 	this._fragment = create_main_fragment( this._state, this );
 

test/js/samples/event-handlers-custom/expected-bundle.js

@@ -34,14 +34,12 @@ function createText(data) {
 }
 
 function destroy(detach) {
-	this.destroy = this.set = noop;
+	this.destroy = this.set = this.get = noop;
 	this.fire('destroy');
 
 	if (detach !== false) this._fragment.unmount();
 	this._fragment.destroy();
-	this._fragment = null;
+	this._fragment = this._state = null;
-
-	this._state = {};
 }
 
 function differs(a, b) {
@@ -140,6 +138,7 @@ function _set(newState) {
 
 	this._state = assign({}, oldState, newState);
 	this._recompute(changed, this._state, oldState, false);
+	if (this._bind) this._bind(changed, this._state);
 	dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
 	this._fragment.update(changed, this._state);
 	dispatchObservers(this, this._observers.post, changed, this._state, oldState);
@@ -223,6 +222,7 @@ function SvelteComponent ( options ) {
 
 	this._root = options._root || this;
 	this._yield = options._yield;
+	this._bind = options._bind;
 
 	this._fragment = create_main_fragment( this._state, this );
 

test/js/samples/event-handlers-custom/expected.js

@@ -62,6 +62,7 @@ function SvelteComponent ( options ) {
 
 	this._root = options._root || this;
 	this._yield = options._yield;
+	this._bind = options._bind;
 
 	this._fragment = create_main_fragment( this._state, this );
 

test/js/samples/if-block-no-update/expected-bundle.js

@@ -38,14 +38,12 @@ function createComment() {
 }
 
 function destroy(detach) {
-	this.destroy = this.set = noop;
+	this.destroy = this.set = this.get = noop;
 	this.fire('destroy');
 
 	if (detach !== false) this._fragment.unmount();
 	this._fragment.destroy();
-	this._fragment = null;
+	this._fragment = this._state = null;
-
-	this._state = {};
 }
 
 function differs(a, b) {
@@ -144,6 +142,7 @@ function _set(newState) {
 
 	this._state = assign({}, oldState, newState);
 	this._recompute(changed, this._state, oldState, false);
+	if (this._bind) this._bind(changed, this._state);
 	dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
 	this._fragment.update(changed, this._state);
 	dispatchObservers(this, this._observers.post, changed, this._state, oldState);
@@ -265,6 +264,7 @@ function SvelteComponent ( options ) {
 
 	this._root = options._root || this;
 	this._yield = options._yield;
+	this._bind = options._bind;
 
 	this._fragment = create_main_fragment( this._state, this );
 

test/js/samples/if-block-no-update/expected.js

@@ -100,6 +100,7 @@ function SvelteComponent ( options ) {
 
 	this._root = options._root || this;
 	this._yield = options._yield;
+	this._bind = options._bind;
 
 	this._fragment = create_main_fragment( this._state, this );
 

test/js/samples/if-block-simple/expected-bundle.js

@@ -38,14 +38,12 @@ function createComment() {
 }
 
 function destroy(detach) {
-	this.destroy = this.set = noop;
+	this.destroy = this.set = this.get = noop;
 	this.fire('destroy');
 
 	if (detach !== false) this._fragment.unmount();
 	this._fragment.destroy();
-	this._fragment = null;
+	this._fragment = this._state = null;
-
-	this._state = {};
 }
 
 function differs(a, b) {
@@ -144,6 +142,7 @@ function _set(newState) {
 
 	this._state = assign({}, oldState, newState);
 	this._recompute(changed, this._state, oldState, false);
+	if (this._bind) this._bind(changed, this._state);
 	dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
 	this._fragment.update(changed, this._state);
 	dispatchObservers(this, this._observers.post, changed, this._state, oldState);
@@ -241,6 +240,7 @@ function SvelteComponent ( options ) {
 
 	this._root = options._root || this;
 	this._yield = options._yield;
+	this._bind = options._bind;
 
 	this._fragment = create_main_fragment( this._state, this );
 

test/js/samples/if-block-simple/expected.js

@@ -76,6 +76,7 @@ function SvelteComponent ( options ) {
 
 	this._root = options._root || this;
 	this._yield = options._yield;
+	this._bind = options._bind;
 
 	this._fragment = create_main_fragment( this._state, this );
 

test/js/samples/non-imported-component/expected-bundle.js

@@ -28,14 +28,12 @@ function createText(data) {
 }
 
 function destroy(detach) {
-	this.destroy = this.set = noop;
+	this.destroy = this.set = this.get = noop;
 	this.fire('destroy');
 
 	if (detach !== false) this._fragment.unmount();
 	this._fragment.destroy();
-	this._fragment = null;
+	this._fragment = this._state = null;
-
-	this._state = {};
 }
 
 function differs(a, b) {
@@ -134,6 +132,7 @@ function _set(newState) {
 
 	this._state = assign({}, oldState, newState);
 	this._recompute(changed, this._state, oldState, false);
+	if (this._bind) this._bind(changed, this._state);
 	dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
 	this._fragment.update(changed, this._state);
 	dispatchObservers(this, this._observers.post, changed, this._state, oldState);
@@ -215,6 +214,7 @@ function SvelteComponent ( options ) {
 
 	this._root = options._root || this;
 	this._yield = options._yield;
+	this._bind = options._bind;
 
 	if ( !options._root ) {
 		this._oncreate = [];

test/js/samples/non-imported-component/expected.js

@@ -62,6 +62,7 @@ function SvelteComponent ( options ) {
 
 	this._root = options._root || this;
 	this._yield = options._yield;
+	this._bind = options._bind;
 
 	if ( !options._root ) {
 		this._oncreate = [];

test/js/samples/onrender-onteardown-rewritten/expected-bundle.js

@@ -14,14 +14,12 @@ function assign(target) {
 }
 
 function destroy(detach) {
-	this.destroy = this.set = noop;
+	this.destroy = this.set = this.get = noop;
 	this.fire('destroy');
 
 	if (detach !== false) this._fragment.unmount();
 	this._fragment.destroy();
-	this._fragment = null;
+	this._fragment = this._state = null;
-
-	this._state = {};
 }
 
 function differs(a, b) {
@@ -120,6 +118,7 @@ function _set(newState) {
 
 	this._state = assign({}, oldState, newState);
 	this._recompute(changed, this._state, oldState, false);
+	if (this._bind) this._bind(changed, this._state);
 	dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
 	this._fragment.update(changed, this._state);
 	dispatchObservers(this, this._observers.post, changed, this._state, oldState);
@@ -178,6 +177,7 @@ function SvelteComponent ( options ) {
 
 	this._root = options._root || this;
 	this._yield = options._yield;
+	this._bind = options._bind;
 
 	var oncreate = template.oncreate.bind( this );
 

test/js/samples/onrender-onteardown-rewritten/expected.js

@@ -37,6 +37,7 @@ function SvelteComponent ( options ) {
 
 	this._root = options._root || this;
 	this._yield = options._yield;
+	this._bind = options._bind;
 
 	var oncreate = template.oncreate.bind( this );
 

test/js/samples/setup-method/expected-bundle.js

@@ -14,14 +14,12 @@ function assign(target) {
 }
 
 function destroy(detach) {
-	this.destroy = this.set = noop;
+	this.destroy = this.set = this.get = noop;
 	this.fire('destroy');
 
 	if (detach !== false) this._fragment.unmount();
 	this._fragment.destroy();
-	this._fragment = null;
+	this._fragment = this._state = null;
-
-	this._state = {};
 }
 
 function differs(a, b) {
@@ -120,6 +118,7 @@ function _set(newState) {
 
 	this._state = assign({}, oldState, newState);
 	this._recompute(changed, this._state, oldState, false);
+	if (this._bind) this._bind(changed, this._state);
 	dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
 	this._fragment.update(changed, this._state);
 	dispatchObservers(this, this._observers.post, changed, this._state, oldState);
@@ -188,6 +187,7 @@ function SvelteComponent ( options ) {
 
 	this._root = options._root || this;
 	this._yield = options._yield;
+	this._bind = options._bind;
 
 	this._fragment = create_main_fragment( this._state, this );
 

test/js/samples/setup-method/expected.js

@@ -47,6 +47,7 @@ function SvelteComponent ( options ) {
 
 	this._root = options._root || this;
 	this._yield = options._yield;
+	this._bind = options._bind;
 
 	this._fragment = create_main_fragment( this._state, this );
 

test/js/samples/use-elements-as-anchors/expected-bundle.js

@@ -38,14 +38,12 @@ function createComment() {
 }
 
 function destroy(detach) {
-	this.destroy = this.set = noop;
+	this.destroy = this.set = this.get = noop;
 	this.fire('destroy');
 
 	if (detach !== false) this._fragment.unmount();
 	this._fragment.destroy();
-	this._fragment = null;
+	this._fragment = this._state = null;
-
-	this._state = {};
 }
 
 function differs(a, b) {
@@ -144,6 +142,7 @@ function _set(newState) {
 
 	this._state = assign({}, oldState, newState);
 	this._recompute(changed, this._state, oldState, false);
+	if (this._bind) this._bind(changed, this._state);
 	dispatchObservers(this, this._observers.pre, changed, this._state, oldState);
 	this._fragment.update(changed, this._state);
 	dispatchObservers(this, this._observers.post, changed, this._state, oldState);
@@ -425,6 +424,7 @@ function SvelteComponent ( options ) {
 
 	this._root = options._root || this;
 	this._yield = options._yield;
+	this._bind = options._bind;
 
 	this._fragment = create_main_fragment( this._state, this );
 

test/js/samples/use-elements-as-anchors/expected.js

@@ -260,6 +260,7 @@ function SvelteComponent ( options ) {
 
 	this._root = options._root || this;
 	this._yield = options._yield;
+	this._bind = options._bind;
 
 	this._fragment = create_main_fragment( this._state, this );