Router Functionality with Customizable 404 Page and Clean-Up Mechanism

README.md

@@ -26,6 +26,7 @@ https://tsoding.github.io/grecha.js/example.html
           h1("Grecha.js"),
           div(a("Foo").att$("href", "#/foo")),
           div(a("Bar").att$("href", "#/bar")),
+          div(a("Something").att$("href", "#/something-notfound")),
           div("Counter: "+count),
           div(hard ? kashaHard : kasha).onclick$(function () {
             count += 1;
@@ -42,7 +43,12 @@ https://tsoding.github.io/grecha.js/example.html
           h1("Bar"),
           p(LOREM),
           div(a("Home").att$("href", "#"))
-        )
+        ),
+        "/404": () => div(
+          h1("404 Not Found"),
+          p("The page you are looking for does not exist."),
+          div(a("Home").att$("href", "#"))
+        ),
       });
       entry.appendChild(r);
     </script>

example.html

@@ -7,14 +7,15 @@
     <script>
       const kasha = img("Kasha.png");
       const kashaHard = img("KashaHard.gif");
-      
+
       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(a("Something").att$("href", "#/something-notfound")),
           div("Counter: "+count),
           div(hard ? kashaHard : kasha).onclick$(function () {
             count += 1;
@@ -31,7 +32,12 @@
           h1("Bar"),
           p(LOREM),
           div(a("Home").att$("href", "#"))
-        )
+        ),
+        "/404": () => div(
+          h1("404 Not Found"),
+          p("The page you are looking for does not exist."),
+          div(a("Home").att$("href", "#"))
+        ),
       });
       entry.appendChild(r);
     </script>

grecha.js

@@ -36,34 +36,34 @@ function input(type) {
     return tag("input").att$("type", type);
 }
 
-function router(routes) {
+function router(routes, route404 = "/404") {
     let result = div();
 
     function syncHash() {
         let hashLocation = document.location.hash.split('#')[1];
+
         if (!hashLocation) {
             hashLocation = '/';
         }
 
         if (!(hashLocation in routes)) {
-            // TODO(#2): make the route404 customizable in the router component
-            const route404 = '/404';
-
             console.assert(route404 in routes);
             hashLocation = route404;
         }
 
         result.replaceChildren(routes[hashLocation]());
-
         return result;
     };
 
-    syncHash();
+    function destroy() {
+        window.removeEventListener("hashchange", syncHash);
+        result.remove();
+    }
 
-    // TODO(#3): there is way to "destroy" an instance of the router to make it remove it's "hashchange" callback
+    syncHash();
     window.addEventListener("hashchange", syncHash);
-
     result.refresh = syncHash;
+    result.destroy = destroy;
 
     return result;
 }