almost working

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

@@ -151,37 +151,19 @@ export default function visitComponent(
 	}
 
 	const statements: string[] = [];
-	const name_updating = local.bindings.length && block.alias(`${name}_updating`);
+	let name_updating: string;
-	if (local.bindings.length) block.addVariable(name_updating, '{}');
+	let initialData: string;
-
+	let bindings = [];
-	if (
-		local.staticAttributes.length ||
-		local.dynamicAttributes.length ||
-		local.bindings.length
-	) {
-		const initialProps = local.staticAttributes
-			.concat(local.dynamicAttributes)
-			.map(attribute => `${attribute.name}: ${attribute.value}`);
-
-		const initialPropString = stringifyProps(initialProps);
 
 	if (local.bindings.length) {
-			const initialData = block.getUniqueName(`${name}_initial_data`);
+		name_updating = block.alias(`${name}_updating`);
+		initialData = block.getUniqueName(`${name}_initial_data`);
 
-			statements.push(`var ${initialData} = ${initialPropString};`);
+		block.addVariable(name_updating, '{}');
-
-			local.bindings.forEach(binding => {
-				statements.push(
-					`if ( ${binding.prop} in ${binding.obj} ) ${initialData}.${binding.name} = ${binding.snippet};`
-				);
-			});
 
-			componentInitProperties.push(`data: ${initialData}`);
+		bindings = local.bindings.map(binding => {
+			let setParentFromChild;
 
-			componentInitProperties.push(deindent`
-				_bind: function(changed, childState) {
-					var state = #component.get(), newState = {};
-					${local.bindings.map(binding => {
 			const { name: key } = getObject(binding.value);
 
 			if (block.contexts.has(key)) {
@@ -189,8 +171,7 @@ export default function visitComponent(
 				const computed = isComputed(binding.value);
 				const tail = binding.value.type === 'MemberExpression' ? getTailSnippet(binding.value) : '';
 
-							return deindent`
+				setParentFromChild = deindent`
-								if (changed.${binding.name}) {
 					var list = ${name}._context.${block.listNames.get(key)};
 					var index = ${name}._context.${block.indexNames.get(key)};
 					list[index]${tail} = childState.${binding.name};
@@ -198,21 +179,68 @@ export default function visitComponent(
 					${binding.dependencies
 						.map((prop: string) => `newState.${prop} = state.${prop};`)
 						.join('\n')}
-								}
 				`;
 			}
 
-						if (binding.value.type === 'MemberExpression') {
+			else if (binding.value.type === 'MemberExpression') {
-							return deindent`
+				setParentFromChild = deindent`
-								if (changed.${binding.name}) {
 					${binding.snippet} = childState.${binding.name};
 					${binding.dependencies.map((prop: string) => `newState.${prop} = state.${prop};`).join('\n')}
-								}
 				`;
 			}
 
-						return `if (changed.${key}) newState.${binding.value.name} = childState.${key};`;
+			else {
-					})}
+				setParentFromChild = `newState.${binding.value.name} = childState.${binding.name};`;
+			}
+
+			return {
+				init: deindent`
+					if ( ${binding.prop} in ${binding.obj} ) {
+						${initialData}.${binding.name} = ${binding.snippet};
+						${name_updating}.${binding.name} = true;
+					}`,
+				bind: deindent`
+					if (!${name_updating}.${binding.name} && changed.${binding.name}) {
+						${setParentFromChild}
+					}
+				`,
+				setParentFromChild,
+
+				// TODO could binding.dependencies.length ever be 0?
+				update: binding.dependencies.length && deindent`
+					if ( !${name_updating}.${binding.name} && ${binding.dependencies.map((dependency: string) => `changed.${dependency}`).join(' || ')} ) {
+						${name}_changes.${binding.name} = ${binding.snippet};
+						${name_updating}.${binding.name} = true;
+					}
+				`
+			}
+		});
+	}
+
+	if (
+		local.staticAttributes.length ||
+		local.dynamicAttributes.length ||
+		local.bindings.length
+	) {
+		const initialProps = local.staticAttributes
+			.concat(local.dynamicAttributes)
+			.map(attribute => `${attribute.name}: ${attribute.value}`);
+
+		const initialPropString = stringifyProps(initialProps);
+
+		if (local.bindings.length) {
+			statements.push(`var ${initialData} = ${initialPropString};`);
+
+			bindings.forEach(binding => {
+				statements.push(binding.init);
+			});
+
+			componentInitProperties.push(`data: ${initialData}`);
+
+			componentInitProperties.push(deindent`
+				_bind: function(changed, childState) {
+					var state = #component.get(), newState = {};
+					${bindings.map(binding => binding.bind).join('\n')}
 					${name_updating} = changed;
 					#component._set(newState);
 					${name_updating} = {};
@@ -233,13 +261,19 @@ export default function visitComponent(
 		var ${name} = new ${expression}({
 			${componentInitProperties.join(',\n')}
 		});
+	`);
 
+	if (bindings.length) {
+		local.create.addBlock(deindent`
 			#component._root._beforecreate.push(function () {
-			var state = component.get(), newState = {};
+				var state = #component.get(), childState = ${name}.get(), newState = {};
-			// TODO
+				${bindings.map(binding => binding.setParentFromChild).join('\n')}
+				${name_updating} = { ${local.bindings.map(binding => `${binding.name}: true`).join(', ')} };
 				#component._set(newState);
+				${name_updating} = {};
 			});
 		`);
+	}
 
 	if (local.dynamicAttributes.length || local.bindings.length) {
 		const updates: string[] = [];
@@ -260,22 +294,15 @@ export default function visitComponent(
 			}
 		});
 
-		local.bindings.forEach(binding => {
+		bindings.forEach(binding => {
-			if (binding.dependencies.length) {
+			if (binding.update) updates.push(binding.update);
-				updates.push(deindent`
-					if ( !${name_updating}.${binding.name} && ${binding.dependencies
-						.map((dependency: string) => `changed.${dependency}`)
-						.join(' || ')} ) ${name}_changes.${binding.name} = ${binding.snippet};
-				`);
-			}
 		});
 
 		local.update.addBlock(deindent`
 			var ${name}_changes = {};
-
 			${updates.join('\n')}
-
 			${name}._set( ${name}_changes );
+			${bindings.length && `${name_updating} = {};`}
 		`);
 	}
 

src/shared/index.js

@@ -5,14 +5,12 @@ export * from './transitions.js';
 export * from './utils.js';
 
 export 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 = {};
 }
 
 export function destroyDev(detach) {