store bindings

src/generators/dom/index.ts

@@ -227,7 +227,7 @@ export default function dom(
 		${(templateProperties.ondestroy || storeProps.length) && (
 			`this._handlers.destroy = [${
 				[templateProperties.ondestroy && `%ondestroy`, storeProps.length && `@removeFromStore`].filter(Boolean).join(', ')
-			}]`
+			}];`
 		)}
 
 		${generator.slots.size && `this._slotted = options.slots || {};`}

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

@@ -195,13 +195,19 @@ export default function addBindings(
 
 		const usesContext = group.bindings.some(binding => binding.handler.usesContext);
 		const usesState = group.bindings.some(binding => binding.handler.usesState);
+		const usesStore = group.bindings.some(binding => binding.handler.usesStore);
 		const mutations = group.bindings.map(binding => binding.handler.mutation).filter(Boolean).join('\n');
 
 		const props = new Set();
+		const storeProps = new Set();
 		group.bindings.forEach(binding => {
 			binding.handler.props.forEach(prop => {
 				props.add(prop);
 			});
+
+			binding.handler.storeProps.forEach(prop => {
+				storeProps.add(prop);
+			});
 		}); // TODO use stringifyProps here, once indenting is fixed
 
 		// media bindings — awkward special case. The native timeupdate events
@@ -222,9 +228,11 @@ export default function addBindings(
 				}
 				${usesContext && `var context = ${node.var}._svelte;`}
 				${usesState && `var state = #component.get();`}
+				${usesStore && `var $ = #component.store.get();`}
 				${needsLock && `${lock} = true;`}
 				${mutations.length > 0 && mutations}
-				#component.set({ ${Array.from(props).join(', ')} });
+				${props.size > 0 && `#component.set({ ${Array.from(props).join(', ')} });`}
+				${storeProps.size > 0 && `#component.store.set({ ${Array.from(storeProps).join(', ')} });`}
 				${needsLock && `${lock} = false;`}
 			}
 		`);
@@ -307,6 +315,13 @@ function getEventHandler(
 	dependencies: string[],
 	value: string,
 ) {
+	let storeDependencies = [];
+
+	if (generator.options.store) {
+		storeDependencies = dependencies.filter(prop => prop[0] === '$').map(prop => prop.slice(1));
+		dependencies = dependencies.filter(prop => prop[0] !== '$');
+	}
+
 	if (block.contexts.has(name)) {
 		const tail = attribute.value.type === 'MemberExpression'
 			? getTailSnippet(attribute.value)
@@ -318,8 +333,10 @@ function getEventHandler(
 		return {
 			usesContext: true,
 			usesState: true,
+			usesStore: storeDependencies.length > 0,
 			mutation: `${list}[${index}]${tail} = ${value};`,
-			props: dependencies.map(prop => `${prop}: state.${prop}`)
+			props: dependencies.map(prop => `${prop}: state.${prop}`),
+			storeProps: storeDependencies.map(prop => `${prop}: $.${prop}`)
 		};
 	}
 
@@ -336,16 +353,31 @@ function getEventHandler(
 		return {
 			usesContext: false,
 			usesState: true,
+			usesStore: storeDependencies.length > 0,
 			mutation: `${snippet} = ${value}`,
-			props: dependencies.map((prop: string) => `${prop}: state.${prop}`)
+			props: dependencies.map((prop: string) => `${prop}: state.${prop}`),
+			storeProps: storeDependencies.map(prop => `${prop}: $.${prop}`)
 		};
 	}
 
+	let props;
+	let storeProps;
+
+	if (generator.options.store && name[0] === '$') {
+		props = [];
+		storeProps = [`${name.slice(1)}: ${value}`];
+	} else {
+		props = [`${name}: ${value}`];
+		storeProps = [];
+	}
+
 	return {
 		usesContext: false,
 		usesState: false,
+		usesStore: false,
 		mutation: null,
-		props: [`${name}: ${value}`]
+		props,
+		storeProps
 	};
 }
 

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

@@ -24,7 +24,7 @@ function SvelteComponent(options) {
 	init(this, options);
 	this._state = assign({}, options.data);
 
-	this._handlers.destroy = [ondestroy]
+	this._handlers.destroy = [ondestroy];
 
 	var _oncreate = oncreate.bind(this);
 

test/runtime/samples/store-binding/NameInput.html

@@ -0,0 +1 @@
+<input bind:value=$name>

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

@@ -0,0 +1,28 @@
+import Store from '../../../../store.js';
+
+const store = new Store({
+	name: 'world'
+});
+
+export default {
+	store,
+
+	html: `
+		<h1>Hello world!</h1>
+		<input>
+	`,
+
+	test(assert, component, target, window) {
+		const input = target.querySelector('input');
+		const event = new window.Event('input');
+
+		input.value = 'everybody';
+		input.dispatchEvent(event);
+
+		assert.equal(store.get('name'), 'everybody');
+		assert.htmlEqual(target.innerHTML, `
+			<h1>Hello everybody!</h1>
+			<input>
+		`);
+	}
+};

test/runtime/samples/store-binding/main.html

@@ -0,0 +1,10 @@
+<h1>Hello {{$name}}!</h1>
+<NameInput/>
+
+<script>
+	import NameInput from './NameInput.html';
+
+	export default {
+		components: { NameInput }
+	};
+</script>