+
+
+ UI Benchmark: React
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/uibench/nim_uibench.nim b/uibench/nim_uibench.nim
new file mode 100644
index 0000000..4ff4cb3
--- /dev/null
+++ b/uibench/nim_uibench.nim
@@ -0,0 +1,130 @@
+import dom, vdom, karax, karaxdsl, jdict, jstrutils, kajax
+
+type
+ HomeState = object
+ TableItemState = object
+ id: int
+ active: bool
+ props: seq[cstring]
+ TableState = object
+ items: seq[TableItemState]
+ AnimBoxState = object
+ id: int
+ time: int
+ AnimState = object
+ items: seq[AnimBoxState]
+ TreeNodeState = object
+ id: int
+ container: bool
+ children: seq[TreeNodeState]
+ TreeState = object
+ root: TreeNodeState
+ AppState = object
+ location: cstring
+ home: HomeState
+ table: TableState
+ anim: AnimState
+ tree: TreeState
+
+proc init*(a: cstring, b: cstring) {.importc: "uibench.init", nodecl.}
+proc run*(a: proc(state: AppState), b: proc(samples: any)) {.importc: "uibench.run", nodecl.}
+
+init(cstring"Nim-karax", cstring"0.6.1")
+
+var container = document.getElementById("#App")
+var appState: AppState
+
+proc createTableCell(id: cstring): VNode =
+ proc tableCellClick(ev: karax.Event; n: VNode) =
+ kout "Clicked" & id
+ # ev.stopPropogation()
+ result = buildHtml(td(className="TableCell", onclick=tableCellClick)):
+ text id
+
+
+proc createTableRow(item: TableItemState): VNode =
+ var children = createTableCell("#" & &item.id)
+ for i in 0..len(item.props):
+ children.add(createTableCell(item.props[i]))
+ var dataId = cstring($item.id)
+
+ proc createRow(): VNode =
+ var className = cstring"TableRow"
+ if item.active:
+ className = cstring"TableRow active"
+ result = buildHtml(tr(class=className, `data-id`=dataId)):
+ children
+ result = createRow()
+
+
+proc tableCreateVNode(data: TableState): VNode =
+ var childrens: seq[VNode] = @[]
+ for i in 0..len(data.items):
+ childrens.add createTableRow(data.items[i])
+
+ proc createTable(): VNode =
+ result = buildHtml(table(class="Table")):
+ tbody:
+ for child in childrens:
+ child
+
+ result = createTable()
+
+proc createAnimBox(item: AnimBoxState): VNode =
+ var time = item.time
+ var dataId: cstring = &item.id
+ var color: float = float(time mod 10) / 10
+ var divStyles: cstring = "borderRadius: " & &(time mod 10) & "px; background: rgba(0,0,0," & cstring($color) & ")"
+ result = flatHtml(tdiv(className="AnimBox", `data-id`=dataId, style=divStyles))
+
+proc animCreateVNode(data: AnimState): VNode =
+ var items = data.items
+ var children: seq[VNode] = @[]
+ for i in 0..len(children):
+ var item = items[i]
+ children.add createAnimBox(item)
+ result = buildHtml(tdiv(className="Anim")):
+ for child in children:
+ child
+
+proc createTreeLeaf(data: TreeNodeState): VNode =
+ result = buildHtml(li(className="TreeLeaf")):
+ text &data.id
+
+proc createTreeNode(data: TreeNodeState): VNode =
+ var children: seq[VNode] = @[]
+ for i in 0..len(data.children):
+ var n = data.children[i]
+ if n.container:
+ children.add(createTreeNode(n))
+ else:
+ children.add(createTreeLeaf(n))
+
+proc treeCreateVNode(data: TreeState): VNode =
+ result = buildHtml(tdiv(className="Tree")):
+ createTreeNode(data.root)
+
+
+proc update(): VNode =
+ let location = appState.location
+ var children: VNode = nil
+ if location == cstring"table":
+ children = tableCreateVNode(appState.table)
+ elif location == cstring"anim":
+ children = animCreateVNode(appState.anim)
+ elif location == cstring"tree":
+ children = treeCreateVNode(appState.tree)
+ proc createMain(): VNode =
+ result = buildHtml(tdiv(class="Main")): children
+ result = createMain()
+
+
+proc a(state: AppState) =
+ appState = state
+
+proc b(samples: RootRef) =
+ document.body.innerHTML = cstring"
" & toJson(samples) & cstring"
"
+ redraw()
+
+setRenderer update
+run(a, b)
\ No newline at end of file
diff --git a/uibench/nim_uibench.nims b/uibench/nim_uibench.nims
new file mode 100644
index 0000000..532b206
--- /dev/null
+++ b/uibench/nim_uibench.nims
@@ -0,0 +1 @@
+--path: "../src"