deep store bindings

src/compile/render-dom/wrappers/Element/Binding.ts

@@ -213,6 +213,12 @@ function getBindingGroup(renderer: Renderer, value: Node) {
 	return index;
 }
 
+function mutate_store(store, value, tail) {
+	return tail
+		? `${store}.update($$value => ($$value${tail} = ${value}, $$value));`
+		: `${store}.set(${value});`;
+}
+
 function getEventHandler(
 	binding: BindingWrapper,
 	renderer: Renderer,
@@ -223,36 +229,26 @@ function getEventHandler(
 	const value = getValueFromDom(renderer, binding.parent, binding);
 	const store = binding.object[0] === '$' ? binding.object.slice(1) : null;
 
-	if (store && binding.node.expression.node.type === 'MemberExpression') {
+	let tail = '';
-		// TODO is there a way around this? Mutating an object doesn't work,
+	if (binding.node.expression.node.type === 'MemberExpression') {
-		// because stores check for referential equality (i.e. immutable data).
+		const { start, end } = get_tail(binding.node.expression.node);
-		// But we can't safely or easily clone objects. So for now, we bail
+		tail = renderer.component.source.slice(start, end);
-		renderer.component.error(binding.node.expression.node.property, {
-			code: 'invalid-store-binding',
-			message: 'Cannot bind to a nested property of a store'
-		});
 	}
 
 	if (binding.node.isContextual) {
-		let tail = '';
-		if (binding.node.expression.node.type === 'MemberExpression') {
-			const { start, end } = get_tail(binding.node.expression.node);
-			tail = renderer.component.source.slice(start, end);
-		}
-
 		const { object, property, snippet } = block.bindings.get(name);
 
 		return {
 			usesContext: true,
 			mutation: store
-				? `${store}.set(${value});`
+				? mutate_store(store, value, tail)
 				: `${snippet}${tail} = ${value};`,
 			contextual_dependencies: new Set([object, property])
 		};
 	}
 
 	const mutation = store
-		? `${store}.set(${value});`
+		? mutate_store(store, value, tail)
 		: `${snippet} = ${value};`;
 
 	if (binding.node.expression.node.type === 'MemberExpression') {

test/runtime/samples/binding-store-deep/_config.js

@@ -1,5 +1,41 @@
 export default {
-	error(assert, err) {
+	html: `
-		assert.equal(err.message, `Cannot bind to a nested property of a store`);
+		<input>
-	}
+		<p>hello world</p>
+	`,
+
+	ssrHtml: `
+		<input value="world">
+		<p>hello world</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const input = target.querySelector('input');
+		assert.equal(input.value, 'world');
+
+		const event = new window.Event('input');
+
+		const names = [];
+		const unsubscribe = component.user.subscribe(user => {
+			names.push(user.name);
+		});
+
+		input.value = 'everybody';
+		await input.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>hello everybody</p>
+		`);
+
+		await component.user.set({ name: 'goodbye' });
+		assert.equal(input.value, 'goodbye');
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>hello goodbye</p>
+		`);
+
+		assert.deepEqual(names, ['world', 'everybody', 'goodbye']);
+		unsubscribe();
+	},
 };