add experiment what Karax would look like without DOM diff'ing but with barebones reactive programming

experiments/trello/widgets.nim

@@ -0,0 +1,43 @@
+## Common widget implemenations
+
+import knete
+
+const
+  cross* = "x"
+  plus* = kstring"+"
+
+const
+  LEFT* = 37
+  UP* = 38
+  RIGHT* = 39
+  DOWN* = 40
+  TAB* = 9
+  ESC* = 27
+  ENTER* = 13
+
+proc editable*(x: kstring; onchanged: proc (value: kstring);
+               isEdited = false): Element =
+  proc onenter(ev: Event) = ev.target.blur()
+  proc submit(ev: Event) =
+    onchanged(ev.target.value)
+    # close the loop: This is a common pattern in Knete.
+    replace(result, editable(ev.target.value, onchanged, false))
+
+  proc makeEditable() =
+    # close the loop: This is a common pattern in Knete.
+    replace(result, editable(x, onchanged, true))
+
+  result = buildHtml():
+    if isEdited:
+      input(class = "edit",
+        onblur = submit,
+        onkeyupenter = onenter,
+        value = x,
+        setFocus = true)
+    else:
+      span(onclick = makeEditable):
+        text x
+
+template bindField*(field): Element =
+  editable field, proc (value: kstring) =
+    field = value