Merge pull request #2103 from sveltejs/gh-2016

error on contextual stores, for now

Author: Rich-Harris

src/compile/nodes/shared/Expression.ts

@@ -122,8 +122,16 @@ export default class Expression {
 					const { name, nodes } = flattenReference(node);
 
 					if (scope.has(name)) return;
+
 					if (globalWhitelist.has(name) && !component.var_lookup.has(name)) return;
 
+					if (name[0] === '$' && template_scope.names.has(name.slice(1))) {
+						component.error(node, {
+							code: `contextual-store`,
+							message: `Stores must be declared at the top level of the component (this may change in a future version of Svelte)`
+						});
+					}
+
 					if (template_scope.is_let(name)) {
 						if (!function_expression) {
 							dependencies.add(name);

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

@@ -0,0 +1,76 @@
+import { writable } from '../../../../store.js';
+
+const todos = [
+	writable({ done: false, text: 'write docs' }),
+	writable({ done: false, text: 'implement contextual stores' }),
+	writable({ done: false, text: 'go outside' })
+];
+
+export default {
+	error: `Stores must be declared at the top level of the component (this may change in a future version of Svelte)`,
+
+	props: {
+		todos
+	},
+
+	html: `
+		<label>
+			<input type=checkbox>
+			[todo] write docs
+		</label>
+
+		<label>
+			<input type=checkbox>
+			[todo] implement contextual stores
+		</label>
+
+		<label>
+			<input type=checkbox>
+			[todo] go outside
+		</label>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const inputs = target.querySelectorAll('input');
+		const change = new window.MouseEvent('change');
+
+		inputs[1].checked = true;
+		await inputs[1].dispatchEvent(change);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label>
+				<input type=checkbox>
+				[todo] write docs
+			</label>
+
+			<label>
+				<input type=checkbox>
+				[done] implement contextual stores
+			</label>
+
+			<label>
+				<input type=checkbox>
+				[todo] go outside
+			</label>
+		`);
+
+		await todos[0].update(todo => ({ done: !todo.done, text: todo.text }));
+
+		assert.htmlEqual(target.innerHTML, `
+			<label>
+				<input type=checkbox>
+				[done] write docs
+			</label>
+
+			<label>
+				<input type=checkbox>
+				[done] implement contextual stores
+			</label>
+
+			<label>
+				<input type=checkbox>
+				[todo] go outside
+			</label>
+		`);
+	}
+};

test/runtime/samples/store-contextual/main.svelte

@@ -0,0 +1,6 @@
+{#each todos as todo}
+	<label>
+		<input type=checkbox on:change={e => todo.update(t => ({ done: e.target.checked, text: t.text }))}>
+		{$todo.done ? '[done]' : '[todo]'} {$todo.text}
+	</label>
+{/each}