From bfb998575438e29bb7b5c37bb78c123b203546fc Mon Sep 17 00:00:00 2001
From: Andreas Rumpf <rumpf_a@web.de>
Date: Thu, 17 Aug 2017 08:36:17 +0200
Subject: [PATCH] nextgen uses the karax DSL and DOM diffing

---
 experiments/nextgen.nim | 28 ++++++++++------------------
 src/karax.nim           |  1 +
 2 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/experiments/nextgen.nim b/experiments/nextgen.nim
index eb94658..8df39a2 100644
--- a/experiments/nextgen.nim
+++ b/experiments/nextgen.nim
@@ -1,5 +1,5 @@
 
-import kdom, jdict, jstrutils
+import vdom, kdom, vstyles, karax, karaxdsl, jdict, jstrutils
 
 type
   Message = enum
@@ -155,27 +155,19 @@ type
 
 var gu = newReactive(User(firstname: "Some", lastname: "Body"))
 
-proc renderUser(u: Reactive[User]): Node =
-  result = document.createElement("button")
-  result.appendChild document.createTextNode(u.now.firstname & " " & u.now.lastname)
-  result.addEventListener "click", proc (ev: Event) =
-    gu <- User(firstname: "Another", lastname: "Guy")
+proc renderUser(u: Reactive[User]): VNode =
+  result = buildHtml(button):
+    text u.now.firstname & " " & u.now.lastname
+    proc onclick(ev: Event; n: VNode) =
+      gu <- User(firstname: "Another", lastname: "Guy")
 
-proc replaceById(id: cstring; newTree: Node) =
-  let x = document.getElementById(id)
-  x.parentNode.replaceChild(newTree, x)
-  newTree.id = id
-
-template track(r: ReactiveBase; a, b: Node) =
+template track(r: ReactiveBase; a, b: VNode) =
   r.addSink proc(m: Message; pos: int) =
     if m == Changed:
-      a.parentNode.replaceChild(b, a)
+      runDiff(kxi, a, b)
 
-proc main(): Node =
+proc main(): VNode =
   result = renderUser(gu)
   track gu, result, renderUser(gu)
 
-proc init(ev: Event) =
-  replaceById("ROOT", main())
-
-window.onload = init
+setInitializer(main)
diff --git a/src/karax.nim b/src/karax.nim
index b0b7761..3f53405 100644
--- a/src/karax.nim
+++ b/src/karax.nim
@@ -187,6 +187,7 @@ proc same(n: VNode, e: Node; nesting = 0): bool =
 proc replaceById(id: cstring; newTree: Node) =
   let x = document.getElementById(id)
   x.parentNode.replaceChild(newTree, x)
+  newTree.id = id
 
 type
   EqResult = enum