This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const AddTodo = (store: TodoStore) => h('div', [ | |
input(store), | |
submit(store) | |
]) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const TodoList = (store: TodoStore) => hc('ul', store.todos.map(TodoComponent)) | |
const TodoComponent = ({ text }: Todo) => ht('li', text) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const Filter = ( | |
$vis: StreamBox<Visibility>, | |
filterVis: Visibility, | |
label: string | |
) => { | |
const className = $vis.map((v) => ( | |
'filter ' + (v === vis ? 'active' : '') | |
)) | |
return h$('button', { | |
unsub: className.destroy, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class TodoStore { | |
public readonly visibility: StreamBox<Visibility> | |
constructor() { | |
this.visibility = new StreamBox(Visibility.ALL) | |
} | |
dispose() { | |
this.visibility.destroy() | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class TodoStore { | |
public readonly visibilityFilter: $Predicate$<Todo> | |
constructor() { | |
this.visibilityFilter = this.visibility.map(vis2pred) | |
} | |
dispose() { | |
this.visibilityFilter.destroy() | |
} | |
} | |
function vis2pred(v: Visibility): Predicate$<Todo> { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const TodoList = (store: TodoStore) => | |
h$filter$$( | |
hcc('ul', 'todo-list'), | |
store.todos, | |
TodoComponent, | |
store.visibilityFilter, | |
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
this.visibility.map(vis2pred) | |
function vis2pred(v: Visibility): Predicate<Todo> { | |
switch (v) { | |
case Visibility.ALL: | |
return () => true | |
case Visibility.DONE: | |
return (todo) => todo.done.get() | |
case Visibility.TODO: | |
return (todo) => !todo.done.get() | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const Footer = ({ visibility }: TodoStore) => ( | |
hc('div', [ | |
ht('span', 'Show: '), | |
Filter(visibility, Visibility.ALL, 'All'), | |
Filter(visibility, Visibility.TODO, 'Active'), | |
Filter(visibility, Visibility.DONE, 'Completed'), | |
]) | |
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
type Todo = { | |
text: string, | |
done: StreamBox<boolean> | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
addTodo(todo: string): void { | |
this.todos.push({ | |
text: todo, | |
done: new StreamBox(false) | |
}) | |
} |