diff --git a/uibench/index.html b/uibench/index.html new file mode 100644 index 0000000..6b3e9c0 --- /dev/null +++ b/uibench/index.html @@ -0,0 +1,13 @@ + + + + + + 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"