Implement counter

Author: rexim

README.md

@@ -19,32 +19,32 @@ https://tsoding.org/grecha.js/example.html
       const kasha = img("Kasha.png");
       const kashaHard = img("KashaHard.gif");
 
-      entry.appendChild(
-        router({
-          "/": div(
-            h1("Grecha.js"),
-            div(a("Foo").att$("href", "#/foo")),
-            div(a("Bar").att$("href", "#/bar")),
-            div(kasha).onclick$(function () {
-                if (this.contains(kasha)) {
-                    kasha.replaceWith(kashaHard);
-                } else {
-                    kashaHard.replaceWith(kasha);
-                }
-            }),
-          ),
-          "/foo": div(
-            h1("Foo"),
-            p(LOREM),
-            div(a("Home").att$("href", "#")),
-          ),
-          "/bar": div(
-            h1("Bar"),
-            p(LOREM),
-            div(a("Home").att$("href", "#"))
-          )
-        })
-      );
+      let count = 0;
+      let hard = false;
+      const r = router({
+        "/": () => div(
+          h1("Grecha.js"),
+          div(a("Foo").att$("href", "#/foo")),
+          div(a("Bar").att$("href", "#/bar")),
+          div("Counter: "+count),
+          div(hard ? kashaHard : kasha).onclick$(function () {
+            count += 1;
+            hard = !hard
+            r.refresh();
+          }),
+        ),
+        "/foo": () => div(
+          h1("Foo"),
+          p(LOREM),
+          div(a("Home").att$("href", "#")),
+        ),
+        "/bar": () => div(
+          h1("Bar"),
+          p(LOREM),
+          div(a("Home").att$("href", "#"))
+        )
+      });
+      entry.appendChild(r);
     </script>
   </body>
 </html>

example.html

@@ -7,33 +7,33 @@
     <script>
       const kasha = img("Kasha.png");
       const kashaHard = img("KashaHard.gif");
-
-      entry.appendChild(
-        router({
-          "/": div(
-            h1("Grecha.js"),
-            div(a("Foo").att$("href", "#/foo")),
-            div(a("Bar").att$("href", "#/bar")),
-            div(kasha).onclick$(function () {
-                if (this.contains(kasha)) {
-                    kasha.replaceWith(kashaHard);
-                } else {
-                    kashaHard.replaceWith(kasha);
-                }
-            }),
-          ),
-          "/foo": div(
-            h1("Foo"),
-            p(LOREM),
-            div(a("Home").att$("href", "#")),
-          ),
-          "/bar": div(
-            h1("Bar"),
-            p(LOREM),
-            div(a("Home").att$("href", "#"))
-          )
-        })
-      );
+      
+      let count = 0;
+      let hard = false;
+      const r = router({
+        "/": () => div(
+          h1("Grecha.js"),
+          div(a("Foo").att$("href", "#/foo")),
+          div(a("Bar").att$("href", "#/bar")),
+          div("Counter: "+count),
+          div(hard ? kashaHard : kasha).onclick$(function () {
+            count += 1;
+            hard = !hard
+            r.refresh();
+          }),
+        ),
+        "/foo": () => div(
+          h1("Foo"),
+          p(LOREM),
+          div(a("Home").att$("href", "#")),
+        ),
+        "/bar": () => div(
+          h1("Bar"),
+          p(LOREM),
+          div(a("Home").att$("href", "#"))
+        )
+      });
+      entry.appendChild(r);
     </script>
   </body>
 </html>

grecha.js

@@ -56,14 +56,14 @@ function router(routes) {
         while (result.firstChild) {
             result.removeChild(result.lastChild);
         }
-        result.appendChild(routes[hashLocation]);
+        result.appendChild(routes[hashLocation]());
 
         return result;
     };
-
     syncHash();
     // TODO(#3): there is way to "destroy" an instance of the router to make it remove it's "hashchange" callback
     window.addEventListener("hashchange", syncHash);
+    result.refresh = syncHash;
 
     return result;
 }