Merge branch 'stateful-components3' into devel

tests/blur.nim

@@ -1,7 +1,7 @@
 import vdom, kdom, vstyles, karax, karaxdsl, jdict, jstrutils
 
 type TextInput* = ref object of VComponent
-  value: cstring
+  value, guid: cstring
   isActive: bool
   onchange: proc (value: cstring)
 
@@ -35,73 +35,78 @@ proc render(x: VComponent): VNode =
 
   proc flip(ev: Event; n: VNode) =
     self.isActive = not self.isActive
-    kout cstring"onflip", n.value
+    echo "flip! ", self.isActive, " id: ", self.debugId, " version ", self.version
     markDirty(self)
 
   proc onchanged(ev: Event; n: VNode) =
-    if self.onchange != nil and self.value != n.value:
+    if self.onchange != nil:
       self.onchange n.value
       self.value = n.value
 
   result = buildHtml(tdiv(style=style)):
     input(style=inputStyle, value=self.value, onblur=flip, onfocus=flip, onkeyup=onchanged)
 
-proc setValue(x: TextInput; value: cstring) =
-  x.value = value
-  markDirty(x)
+proc changed(current, next: VComponent): bool =
+  let current = TextInput(current)
+  let next = TextInput(next)
+  if current.guid != next.guid:
+    result = true
+  else:
+    result = defaultChangedImpl(current, next)
 
-proc newTextInput*(style: VStyle = VStyle(); value: cstring = cstring"",
+proc update(current, next: VComponent) =
+  let current = TextInput(current)
+  let next = TextInput(next)
+  current.value = next.value
+  current.guid = next.guid
+  next.isActive = current.isActive
+
+proc newTextInput*(style: VStyle = VStyle(); guid: cstring; value: cstring = cstring"",
                    onchange: proc(v: cstring) = nil): TextInput =
-  result = newComponent(TextInput, render)
+  result = newComponent(TextInput, render, changed=changed, updated=update)
   result.style = style
   result.value = value
   result.onchange = onchange
+  result.guid = guid
 
-type
-  Combined = ref object of VComponent
-    a, b: TextInput
+when false:
+  type
+    Combined = ref object of VComponent
+      a, b: TextInput
 
-proc renderComb(self: VComponent): VNode =
-  let self = Combined(self)
+  proc renderComb(self: VComponent): VNode =
+    let self = Combined(self)
 
-  proc bu(ev: Event; n: VNode) =
-    self.a.value = ""
-    self.b.value = ""
-    markDirty(self.a)
-    markDirty(self.b)
+    proc bu(ev: Event; n: VNode) =
+      self.a.value = ""
+      self.b.value = ""
+      markDirty(self.a)
+      markDirty(self.b)
 
-  result = buildHtml(tdiv(style=self.style)):
-    self.a
-    self.b
-    button(onclick=bu):
-      text "reset"
+    result = buildHtml(tdiv(style=self.style)):
+      self.a
+      self.b
+      button(onclick=bu):
+        text "reset"
 
-proc changed(self: VComponent): bool =
-  let self = Combined(self)
-  result = self.a.changedImpl(self.a) or self.b.changedImpl(self.b)
+  proc changed(self: VComponent): bool =
+    let self = Combined(self)
+    result = self.a.changedImpl(self.a) or self.b.changedImpl(self.b)
 
-proc newCombined*(style: VStyle = VStyle()): Combined =
-  result = newComponent(Combined, renderComb, changed=changed)
-  result.a = newTextInput(style, "AAA")
-  result.b = newTextInput(style, "BBB")
+  proc newCombined*(style: VStyle = VStyle()): Combined =
+    result = newComponent(Combined, renderComb, changed=changed)
+    result.a = newTextInput(style, "AAA")
+    result.b = newTextInput(style, "BBB")
 
 
 var
   persons: seq[cstring] = @[cstring"Karax", "Abathur", "Fenix"]
   selected = -1
   errmsg = cstring""
-  ti = newTextInput(VStyle(), "", proc (v: cstring) =
-    if v.len > 0:
-      if selected >= 0: persons[selected] = v
-      errmsg = ""
-    else:
-      errmsg = "name must not be empty"
-  )
 
 proc renderPerson(text: cstring, index: int): VNode =
   proc select(ev: Event, n: VNode) =
     selected = index
-    ti.setValue(persons[selected])
 
   result = buildHtml():
     tdiv(onClick=select):
@@ -113,7 +118,13 @@ proc createDom(): VNode =
       for index, text in persons.pairs:
         renderPerson(text, index)
     tdiv:
-      ti
+      newTextInput(VStyle(), &selected, if selected >= 0: persons[selected] else: "", proc (v: cstring) =
+        if v.len > 0:
+          if selected >= 0: persons[selected] = v
+          errmsg = ""
+        else:
+          errmsg = "name must not be empty"
+      )
     tdiv:
       text errmsg