allow computed properties to depend on store props

src/generators/Generator.ts

@@ -536,6 +536,9 @@ export default class Generator {
 							(param: Node) =>
 								param.type === 'AssignmentPattern' ? param.left.name : param.name
 						);
+						deps.forEach(dep => {
+							this.expectedProperties.add(dep);
+						});
 						dependencies.set(key, deps);
 					});
 

test/runtime/samples/store-computed/Todo.html

@@ -0,0 +1,15 @@
+{{#if isVisible}}
+	<div class='{{todo.done ? "done": "pending"}}'>{{todo.description}}</div>
+{{/if}}
+
+<script>
+	export default {
+		computed: {
+			isVisible: ($filter, todo) => {
+				if ($filter === 'all') return true;
+				if ($filter === 'done') return todo.done;
+				if ($filter === 'pending') return !todo.done;
+			}
+		}
+	};
+</script>

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

@@ -0,0 +1,65 @@
+import Store from '../../../../store.js';
+
+class MyStore extends Store {
+	setFilter(filter) {
+		this.set({ filter });
+	}
+
+	toggleTodo(todo) {
+		todo.done = !todo.done;
+		this.set({ todos: this.get('todos') });
+	}
+}
+
+const todos = [
+	{
+		description: 'Buy some milk',
+		done: true,
+	},
+	{
+		description: 'Do the laundry',
+		done: true,
+	},
+	{
+		description: "Find life's true purpose",
+		done: false,
+	}
+];
+
+const store = new MyStore({
+	filter: 'all',
+	todos
+});
+
+export default {
+	solo: true,
+
+	store,
+
+	html: `
+		<div class='done'>Buy some milk</div>
+		<div class='done'>Do the laundry</div>
+		<div class='pending'>Find life's true purpose</div>
+	`,
+
+	test(assert, component, target) {
+		store.setFilter('pending');
+
+		assert.htmlEqual(target.innerHTML, `
+			<div class='pending'>Find life's true purpose</div>
+		`);
+
+		store.toggleTodo(todos[1]);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div class='pending'>Do the laundry</div>
+			<div class='pending'>Find life's true purpose</div>
+		`);
+
+		store.setFilter('done');
+
+		assert.htmlEqual(target.innerHTML, `
+			<div class='done'>Buy some milk</div>
+		`);
+	}
+};

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

@@ -0,0 +1,11 @@
+{{#each $todos as todo}}
+	<Todo :todo/>
+{{/each}}
+
+<script>
+	import Todo from './Todo.html';
+
+	export default {
+		components: { Todo }
+	};
+</script>