sane markDirty() mechanism for components

experiments/carousel.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+  <title>Carousel app</title>
+</head>
+
+<body id="body">
+
+<div id="ROOT" />
+
+<script type="text/javascript" src="nimcache/carousel.js"></script>
+
+</body>
+</html>

experiments/carousel.nim

@@ -1,3 +1,4 @@
+## This demo shows how you can develop your own stateful components with Karax.
 
 import vdom, vstyles, karax, karaxdsl, jdict, jstrutils, kdom
 
@@ -7,7 +8,6 @@ type
     cntdown, myid: int
     timer: TimeOut
     list: seq[cstring]
-    change: bool
 
 const ticksUntilChange = 5
 
@@ -24,11 +24,10 @@ proc render(x: VComponent): VNode =
       self.cntdown = ticksUntilChange
     else:
       self.timer = setTimeout(docount, 30)
-    self.change = true
+    markDirty(self)
     redraw()
 
   proc onclick(ev: Event; n: VNode) =
-    self.change = false
     if self.timer != nil:
       clearTimeout(self.timer)
     self.timer = setTimeout(docount, 30)
@@ -51,12 +50,8 @@ proc render(x: VComponent): VNode =
 
 var gid: int
 
-proc changed(c: VComponent): bool =
-  let x = Carousel(c)
-  result = x.change
-
 proc carousel(): Carousel =
-  result = newComponent(Carousel, render, changed)
+  result = newComponent(Carousel, render)
   result.list = images
   result.cntdown = ticksUntilChange
   result.myid = gid

experiments/example.html

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-
-<html>
-<head>
-  <title>Todo app</title>
-</head>
-
-<body id="body">
-
-<div id="ROOT" />
-
-<script type="text/javascript" src="nimcache/example.js"></script>
-
-</body>
-</html>