jyapayne/karax
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

attempt to optimize todoapp wiht .component annotation

Browse source
This commit is contained in:
Andreas Rumpf 2017-04-21 12:49:37 +02:00
commit e21b4fa6a1
1 changed files with 30 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

62
examples/todoapp/todoapp.nim
View file

@ -1,5 +1,5 @@
import vdom, karax, karaxdsl, jstrutils import vdom, karax, karaxdsl, jstrutils, components
type type
Filter = enum Filter = enum
@ -47,7 +47,7 @@ proc toChecked(checked: bool): cstring =
proc selected(v: Filter): cstring = proc selected(v: Filter): cstring =
(if filter == v: cstring"selected" else: cstring(nil)) (if filter == v: cstring"selected" else: cstring(nil))
proc createEntry(id: int; d: cstring; completed, selected: bool): VNode = proc createEntry(id: int; d: cstring; completed, selected: bool): VNode {.component.} =
result = buildHtml(tr): result = buildHtml(tr):
li(class=toClass(completed)): li(class=toClass(completed)):
if not selected: if not selected:
@ -62,32 +62,8 @@ proc createEntry(id: int; d: cstring; completed, selected: bool): VNode =
onblur = focusLost, onblur = focusLost,
onkeyupenter = editEntry, value = d, setFocus) onkeyupenter = editEntry, value = d, setFocus)
proc createDom(): VNode = proc makeFooter(entriesCount, completedCount: int): VNode {.component.} =
result = buildHtml(tdiv(class="todomvc-wrapper")): result = buildHtml(footer(class = "footer")):
section(class = "todoapp"):
header(class = "header"):
h1:
text "todos"
input(class = "new-todo", placeholder="What needs to be done?", name = "newTodo",
onkeyupenter = onTodoEnter, setFocus)
section(class = "main"):
input(class = "toggle-all", `type` = "checkbox", name = "toggle")
label(`for` = "toggle-all", onclick = onAllDone):
text "Mark all as complete"
var entriesCount = 0
var completedCount = 0
ul(class = "todo-list"):
for i, d in pairs(entries):
if d[0] != nil:
let b = case filter
of all: true
of active: not d[1]
of completed: d[1]
if b:
createEntry(i, d[0], d[1], i == selectedEntry)
inc completedCount, ord(d[1])
inc entriesCount
footer(class = "footer"):
span(class = "todo-count"): span(class = "todo-count"):
strong: strong:
text(&entriesCount) text(&entriesCount)
@ -105,6 +81,36 @@ proc createDom(): VNode =
button(class = "clear-completed", onclick = clearCompleted): button(class = "clear-completed", onclick = clearCompleted):
text "Clear completed (" & &completedCount & ")" text "Clear completed (" & &completedCount & ")"
proc makeHeader(): VNode {.component.} =
result = buildHtml(header(class = "header")):
h1:
text "todos"
input(class = "new-todo", placeholder="What needs to be done?", name = "newTodo",
onkeyupenter = onTodoEnter, setFocus)
proc createDom(): VNode =
result = buildHtml(tdiv(class="todomvc-wrapper")):
section(class = "todoapp"):
makeHeader()
section(class = "main"):
input(class = "toggle-all", `type` = "checkbox", name = "toggle")
label(`for` = "toggle-all", onclick = onAllDone):
text "Mark all as complete"
var entriesCount = 0
var completedCount = 0
ul(class = "todo-list"):
for i, d in pairs(entries):
if d[0] != nil:
let b = case filter
of all: true
of active: not d[1]
of completed: d[1]
if b:
createEntry(i, d[0], d[1], i == selectedEntry)
inc completedCount, ord(d[1])
inc entriesCount
makeFooter(entriesCount, completedCount)
setOnHashChange(proc(hash: cstring) = setOnHashChange(proc(hash: cstring) =
if hash == "#/": filter = all if hash == "#/": filter = all
elif hash == "#/completed": filter = completed elif hash == "#/completed": filter = completed