@@ -1,1 +0,0 @@ 
-hastyscribe docs/H3_DeveloperGuide.md

@@ -7233,9 +7233,27 @@ <div id="header"><h1>H3 Microframework User Guide</h1></div>
     <div id="toc"><ul>
  <li>
  <ul>
-  <li><a href="#Overview">Overview</a>
+  <li><a href="#Overview">Overview</a></li>
+  <li><a href="#Quick-Start">Quick Start</a></li>
+  <li><a href="#Key-Concepts">Key Concepts</a>
   <ul>
-   <li><a href="#Rationale">Rationale</a></li>
+   <li><a href="#HyperScript">HyperScript</a></li>
+   <li><a href="#Functional-Components">Functional Components</a></li>
+   <li><a href="#Store">Store</a></li>
+   <li><a href="#Router">Router</a></li>
+  </ul>
+  </li>
+  <li><a href="#Usage">Usage</a></li>
+  <li><a href="#API">API</a>
+  <ul>
+   <li><a href="#h3.equal(a:-any,-b:-any)">h3.equal(a: any, b: any)</a></li>
+   <li><a href="#h3.dispatch(event:-string,-data:-any)">h3.dispatch(event: string, data: any)</a></li>
+   <li><a href="#h3.init(config:-object))">h3.init(config: object))</a></li>
+   <li><a href="#h3.navigateTo(path:-string,-params:-object)">h3.navigateTo(path: string, params: object)</a></li>
+   <li><a href="#h3.on(event:-string,-cb:-function)">h3.on(event: string, cb: function)</a></li>
+   <li><a href="#h3.redraw()">h3.redraw()</a></li>
+   <li><a href="#h3.route">h3.route</a></li>
+   <li><a href="#h3.state">h3.state</a></li>
   </ul>
   </li>
  </ul>
@@ -7246,13 +7264,62 @@ <div id="main">
 <a name="Overview"></a>
 <h2>Overview<a href="#document-top" title="Go to top"></a></h2>
 
-<a name="Rationale"></a>
-<h3>Rationale<a href="#document-top" title="Go to top"></a></h3>
+<p><strong>H3</strong> is a microframework to build client-side web applications in modern JavaScript.</p>
+
+<p>This site is under construction, but you can already peek at the <a href="https://github.com/h3rald/h3/blob/master/h3.js">source code</a>.</p>
+
+<a name="Quick-Start"></a>
+<h2>Quick Start<a href="#document-top" title="Go to top"></a></h2>
+
+<a name="Key-Concepts"></a>
+<h2>Key Concepts<a href="#document-top" title="Go to top"></a></h2>
+
+<a name="HyperScript"></a>
+<h3>HyperScript<a href="#document-top" title="Go to top"></a></h3>
+
+<a name="Functional-Components"></a>
+<h3>Functional Components<a href="#document-top" title="Go to top"></a></h3>
+
+<a name="Store"></a>
+<h3>Store<a href="#document-top" title="Go to top"></a></h3>
+
+<a name="Router"></a>
+<h3>Router<a href="#document-top" title="Go to top"></a></h3>
+
+<a name="Usage"></a>
+<h2>Usage<a href="#document-top" title="Go to top"></a></h2>
+
+<a name="API"></a>
+<h2>API<a href="#document-top" title="Go to top"></a></h2>
+
+<a name="h3.equal(a:-any,-b:-any)"></a>
+<h3>h3.equal(a: any, b: any)<a href="#document-top" title="Go to top"></a></h3>
+
+<a name="h3.dispatch(event:-string,-data:-any)"></a>
+<h3>h3.dispatch(event: string, data: any)<a href="#document-top" title="Go to top"></a></h3>
+
+<a name="h3.init(config:-object))"></a>
+<h3>h3.init(config: object))<a href="#document-top" title="Go to top"></a></h3>
+
+<a name="h3.navigateTo(path:-string,-params:-object)"></a>
+<h3>h3.navigateTo(path: string, params: object)<a href="#document-top" title="Go to top"></a></h3>
+
+<a name="h3.on(event:-string,-cb:-function)"></a>
+<h3>h3.on(event: string, cb: function)<a href="#document-top" title="Go to top"></a></h3>
+
+<a name="h3.redraw()"></a>
+<h3>h3.redraw()<a href="#document-top" title="Go to top"></a></h3>
+
+<a name="h3.route"></a>
+<h3>h3.route<a href="#document-top" title="Go to top"></a></h3>
+
+<a name="h3.state"></a>
+<h3>h3.state<a href="#document-top" title="Go to top"></a></h3>
 
 <p>&hellip;</p>
     </div>
     <div id="footer">
-      <p><span class="copy"></span> Fabio Cevasco &ndash; April 16, 2020</p>
+      <p><span class="copy"></span> Fabio Cevasco &ndash; April 18, 2020</p>
       <p><span>Powered by</span> <a href="https://h3rald.com/hastyscribe"><span class="hastyscribe"></span></a></p>
     </div>
   </div>

@@ -2,6 +2,14 @@ % H3 Microframework User Guide
 % Fabio Cevasco
 % -
 
-{@ ../site/md/overview.md || 0 @}
+{@ md/overview.md || 0 @}
+
+{@ md/quick-start.md || 0 @}
+
+{@ md/key-concepts.md || 0 @}
+
+{@ md/usage.md || 0 @}
+
+{@ md/api.md || 0 @}
 
 ...

@@ -58,6 +58,89 @@ const selectorRegex = /^([a-z0-9:_=-]+)(#[a-z0-9:_=-]+)?(\..+)?$/i;
 
 // Virtual Node Implementation with HyperScript-like syntax
 class VNode {
+
+  constructor(...args) {
+    this.type = undefined;
+    this.attributes = {};
+    this.data = {};
+    this.id = undefined;
+    this.$key = undefined;
+    this.$html = undefined;
+    this.style = undefined;
+    this.value = undefined;
+    this.children = [];
+    this.classList = [];
+    this.eventListeners = {};
+    if (args.length === 0) {
+      throw new Error("[VNode] No arguments passed to VNode constructor.");
+    }
+    if (args.length === 1) {
+      let vnode = args[0];
+      if (typeof vnode === "string") {
+        // Assume empty element
+        this.processSelector(vnode);
+      } else if (typeof vnode === "object" && vnode !== null) {
+        // Text node
+        if (vnode.type === "#text") {
+          this.type = "#text";
+          this.value = vnode.value;
+        } else {
+          this.from(this.processVNodeObject(vnode));
+        }
+      } else {
+        throw new Error(
+          "[VNode] Invalid first argument provided to VNode constructor."
+        );
+      }
+    } else if (args.length === 2) {
+      let [selector, data] = args;
+      if (typeof selector !== "string") {
+        throw new Error(
+          "[VNode] Invalid first argument provided to VNode constructor."
+        );
+      }
+      this.processSelector(selector);
+      this.children = [];
+      if (typeof data === "string") {
+        // Assume single child text node
+        this.type = "#text";
+        this.value = data;
+        return;
+      }
+      if (typeof data !== "object" || data === null) {
+        throw new Error(
+          "[VNode] The second argument of a VNode constructor must be an object or a string."
+        );
+      }
+      if (Array.isArray(data)) {
+        // Assume 2nd argument as children
+        this.processChildren(data);
+      } else {
+        if (data instanceof Function || data instanceof VNode) {
+          this.processChildren(data);
+        } else {
+          // Not a VNode, assume props object
+          this.processProperties(data);
+        }
+      }
+    } else if (args.length === 3) {
+      let [selector, props, children] = args;
+      if (typeof selector !== "string") {
+        throw new Error(
+          "[VNode] Invalid first argument provided to VNode constructor."
+        );
+      }
+      this.processSelector(selector);
+      if (typeof props !== "object" || props === null) {
+        throw new Error(
+          "[VNode] Invalid second argument provided to VNode constructor."
+        );
+      }
+      this.processProperties(props);
+      this.processChildren(children);
+    }
+  }
+
   from(data) {
     this.value = data.value;
     this.type = data.type;
@@ -139,88 +222,6 @@ return this.processVNodeObject(c);
       }
       throw new Error(`[VNode] Specified child is not a VNode: ${c}`);
     });
-  }
-
-  constructor(...args) {
-    this.type = undefined;
-    this.attributes = {};
-    this.data = {};
-    this.id = undefined;
-    this.$key = undefined;
-    this.$html = undefined;
-    this.style = undefined;
-    this.value = undefined;
-    this.children = [];
-    this.classList = [];
-    this.eventListeners = {};
-    if (args.length === 0) {
-      throw new Error("[VNode] No arguments passed to VNode constructor.");
-    }
-    if (args.length === 1) {
-      let vnode = args[0];
-      if (typeof vnode === "string") {
-        // Assume empty element
-        this.processSelector(vnode);
-      } else if (typeof vnode === "object" && vnode !== null) {
-        // Text node
-        if (vnode.type === "#text") {
-          this.type = "#text";
-          this.value = vnode.value;
-        } else {
-          this.from(this.processVNodeObject(vnode));
-        }
-      } else {
-        throw new Error(
-          "[VNode] Invalid first argument provided to VNode constructor."
-        );
-      }
-    } else if (args.length === 2) {
-      let [selector, data] = args;
-      if (typeof selector !== "string") {
-        throw new Error(
-          "[VNode] Invalid first argument provided to VNode constructor."
-        );
-      }
-      this.processSelector(selector);
-      this.children = [];
-      if (typeof data === "string") {
-        // Assume single child text node
-        this.type = "#text";
-        this.value = data;
-        return;
-      }
-      if (typeof data !== "object" || data === null) {
-        throw new Error(
-          "[VNode] The second argument of a VNode constructor must be an object or a string."
-        );
-      }
-      if (Array.isArray(data)) {
-        // Assume 2nd argument as children
-        this.processChildren(data);
-      } else {
-        if (data instanceof Function || data instanceof VNode) {
-          this.processChildren(data);
-        } else {
-          // Not a VNode, assume props object
-          this.processProperties(data);
-        }
-      }
-    } else if (args.length === 3) {
-      let [selector, props, children] = args;
-      if (typeof selector !== "string") {
-        throw new Error(
-          "[VNode] Invalid first argument provided to VNode constructor."
-        );
-      }
-      this.processSelector(selector);
-      if (typeof props !== "object" || props === null) {
-        throw new Error(
-          "[VNode] Invalid second argument provided to VNode constructor."
-        );
-      }
-      this.processProperties(props);
-      this.processChildren(children);
-    }
   }
 
   // Renders the actual DOM Node corresponding to the current Virtual Node

@@ -1,1 +1,10 @@ 
-## Key Concepts+## Key Concepts
+
+### HyperScript
+
+### Functional Components
+
+### Store
+
+### Router
+

@@ -58,6 +58,89 @@ const selectorRegex = /^([a-z0-9:_=-]+)(#[a-z0-9:_=-]+)?(\..+)?$/i;
 
 // Virtual Node Implementation with HyperScript-like syntax
 class VNode {
+
+  constructor(...args) {
+    this.type = undefined;
+    this.attributes = {};
+    this.data = {};
+    this.id = undefined;
+    this.$key = undefined;
+    this.$html = undefined;
+    this.style = undefined;
+    this.value = undefined;
+    this.children = [];
+    this.classList = [];
+    this.eventListeners = {};
+    if (args.length === 0) {
+      throw new Error("[VNode] No arguments passed to VNode constructor.");
+    }
+    if (args.length === 1) {
+      let vnode = args[0];
+      if (typeof vnode === "string") {
+        // Assume empty element
+        this.processSelector(vnode);
+      } else if (typeof vnode === "object" && vnode !== null) {
+        // Text node
+        if (vnode.type === "#text") {
+          this.type = "#text";
+          this.value = vnode.value;
+        } else {
+          this.from(this.processVNodeObject(vnode));
+        }
+      } else {
+        throw new Error(
+          "[VNode] Invalid first argument provided to VNode constructor."
+        );
+      }
+    } else if (args.length === 2) {
+      let [selector, data] = args;
+      if (typeof selector !== "string") {
+        throw new Error(
+          "[VNode] Invalid first argument provided to VNode constructor."
+        );
+      }
+      this.processSelector(selector);
+      this.children = [];
+      if (typeof data === "string") {
+        // Assume single child text node
+        this.type = "#text";
+        this.value = data;
+        return;
+      }
+      if (typeof data !== "object" || data === null) {
+        throw new Error(
+          "[VNode] The second argument of a VNode constructor must be an object or a string."
+        );
+      }
+      if (Array.isArray(data)) {
+        // Assume 2nd argument as children
+        this.processChildren(data);
+      } else {
+        if (data instanceof Function || data instanceof VNode) {
+          this.processChildren(data);
+        } else {
+          // Not a VNode, assume props object
+          this.processProperties(data);
+        }
+      }
+    } else if (args.length === 3) {
+      let [selector, props, children] = args;
+      if (typeof selector !== "string") {
+        throw new Error(
+          "[VNode] Invalid first argument provided to VNode constructor."
+        );
+      }
+      this.processSelector(selector);
+      if (typeof props !== "object" || props === null) {
+        throw new Error(
+          "[VNode] Invalid second argument provided to VNode constructor."
+        );
+      }
+      this.processProperties(props);
+      this.processChildren(children);
+    }
+  }
+
   from(data) {
     this.value = data.value;
     this.type = data.type;
@@ -139,88 +222,6 @@ return this.processVNodeObject(c);
       }
       throw new Error(`[VNode] Specified child is not a VNode: ${c}`);
     });
-  }
-
-  constructor(...args) {
-    this.type = undefined;
-    this.attributes = {};
-    this.data = {};
-    this.id = undefined;
-    this.$key = undefined;
-    this.$html = undefined;
-    this.style = undefined;
-    this.value = undefined;
-    this.children = [];
-    this.classList = [];
-    this.eventListeners = {};
-    if (args.length === 0) {
-      throw new Error("[VNode] No arguments passed to VNode constructor.");
-    }
-    if (args.length === 1) {
-      let vnode = args[0];
-      if (typeof vnode === "string") {
-        // Assume empty element
-        this.processSelector(vnode);
-      } else if (typeof vnode === "object" && vnode !== null) {
-        // Text node
-        if (vnode.type === "#text") {
-          this.type = "#text";
-          this.value = vnode.value;
-        } else {
-          this.from(this.processVNodeObject(vnode));
-        }
-      } else {
-        throw new Error(
-          "[VNode] Invalid first argument provided to VNode constructor."
-        );
-      }
-    } else if (args.length === 2) {
-      let [selector, data] = args;
-      if (typeof selector !== "string") {
-        throw new Error(
-          "[VNode] Invalid first argument provided to VNode constructor."
-        );
-      }
-      this.processSelector(selector);
-      this.children = [];
-      if (typeof data === "string") {
-        // Assume single child text node
-        this.type = "#text";
-        this.value = data;
-        return;
-      }
-      if (typeof data !== "object" || data === null) {
-        throw new Error(
-          "[VNode] The second argument of a VNode constructor must be an object or a string."
-        );
-      }
-      if (Array.isArray(data)) {
-        // Assume 2nd argument as children
-        this.processChildren(data);
-      } else {
-        if (data instanceof Function || data instanceof VNode) {
-          this.processChildren(data);
-        } else {
-          // Not a VNode, assume props object
-          this.processProperties(data);
-        }
-      }
-    } else if (args.length === 3) {
-      let [selector, props, children] = args;
-      if (typeof selector !== "string") {
-        throw new Error(
-          "[VNode] Invalid first argument provided to VNode constructor."
-        );
-      }
-      this.processSelector(selector);
-      if (typeof props !== "object" || props === null) {
-        throw new Error(
-          "[VNode] Invalid second argument provided to VNode constructor."
-        );
-      }
-      this.processProperties(props);
-      this.processChildren(children);
-    }
   }
 
   // Renders the actual DOM Node corresponding to the current Virtual Node

@@ -58,6 +58,89 @@ const selectorRegex = /^([a-z0-9:_=-]+)(#[a-z0-9:_=-]+)?(\..+)?$/i;
 
 // Virtual Node Implementation with HyperScript-like syntax
 class VNode {
+
+  constructor(...args) {
+    this.type = undefined;
+    this.attributes = {};
+    this.data = {};
+    this.id = undefined;
+    this.$key = undefined;
+    this.$html = undefined;
+    this.style = undefined;
+    this.value = undefined;
+    this.children = [];
+    this.classList = [];
+    this.eventListeners = {};
+    if (args.length === 0) {
+      throw new Error("[VNode] No arguments passed to VNode constructor.");
+    }
+    if (args.length === 1) {
+      let vnode = args[0];
+      if (typeof vnode === "string") {
+        // Assume empty element
+        this.processSelector(vnode);
+      } else if (typeof vnode === "object" && vnode !== null) {
+        // Text node
+        if (vnode.type === "#text") {
+          this.type = "#text";
+          this.value = vnode.value;
+        } else {
+          this.from(this.processVNodeObject(vnode));
+        }
+      } else {
+        throw new Error(
+          "[VNode] Invalid first argument provided to VNode constructor."
+        );
+      }
+    } else if (args.length === 2) {
+      let [selector, data] = args;
+      if (typeof selector !== "string") {
+        throw new Error(
+          "[VNode] Invalid first argument provided to VNode constructor."
+        );
+      }
+      this.processSelector(selector);
+      this.children = [];
+      if (typeof data === "string") {
+        // Assume single child text node
+        this.type = "#text";
+        this.value = data;
+        return;
+      }
+      if (typeof data !== "object" || data === null) {
+        throw new Error(
+          "[VNode] The second argument of a VNode constructor must be an object or a string."
+        );
+      }
+      if (Array.isArray(data)) {
+        // Assume 2nd argument as children
+        this.processChildren(data);
+      } else {
+        if (data instanceof Function || data instanceof VNode) {
+          this.processChildren(data);
+        } else {
+          // Not a VNode, assume props object
+          this.processProperties(data);
+        }
+      }
+    } else if (args.length === 3) {
+      let [selector, props, children] = args;
+      if (typeof selector !== "string") {
+        throw new Error(
+          "[VNode] Invalid first argument provided to VNode constructor."
+        );
+      }
+      this.processSelector(selector);
+      if (typeof props !== "object" || props === null) {
+        throw new Error(
+          "[VNode] Invalid second argument provided to VNode constructor."
+        );
+      }
+      this.processProperties(props);
+      this.processChildren(children);
+    }
+  }
+
   from(data) {
     this.value = data.value;
     this.type = data.type;
@@ -139,88 +222,6 @@ return this.processVNodeObject(c);
       }
       throw new Error(`[VNode] Specified child is not a VNode: ${c}`);
     });
-  }
-
-  constructor(...args) {
-    this.type = undefined;
-    this.attributes = {};
-    this.data = {};
-    this.id = undefined;
-    this.$key = undefined;
-    this.$html = undefined;
-    this.style = undefined;
-    this.value = undefined;
-    this.children = [];
-    this.classList = [];
-    this.eventListeners = {};
-    if (args.length === 0) {
-      throw new Error("[VNode] No arguments passed to VNode constructor.");
-    }
-    if (args.length === 1) {
-      let vnode = args[0];
-      if (typeof vnode === "string") {
-        // Assume empty element
-        this.processSelector(vnode);
-      } else if (typeof vnode === "object" && vnode !== null) {
-        // Text node
-        if (vnode.type === "#text") {
-          this.type = "#text";
-          this.value = vnode.value;
-        } else {
-          this.from(this.processVNodeObject(vnode));
-        }
-      } else {
-        throw new Error(
-          "[VNode] Invalid first argument provided to VNode constructor."
-        );
-      }
-    } else if (args.length === 2) {
-      let [selector, data] = args;
-      if (typeof selector !== "string") {
-        throw new Error(
-          "[VNode] Invalid first argument provided to VNode constructor."
-        );
-      }
-      this.processSelector(selector);
-      this.children = [];
-      if (typeof data === "string") {
-        // Assume single child text node
-        this.type = "#text";
-        this.value = data;
-        return;
-      }
-      if (typeof data !== "object" || data === null) {
-        throw new Error(
-          "[VNode] The second argument of a VNode constructor must be an object or a string."
-        );
-      }
-      if (Array.isArray(data)) {
-        // Assume 2nd argument as children
-        this.processChildren(data);
-      } else {
-        if (data instanceof Function || data instanceof VNode) {
-          this.processChildren(data);
-        } else {
-          // Not a VNode, assume props object
-          this.processProperties(data);
-        }
-      }
-    } else if (args.length === 3) {
-      let [selector, props, children] = args;
-      if (typeof selector !== "string") {
-        throw new Error(
-          "[VNode] Invalid first argument provided to VNode constructor."
-        );
-      }
-      this.processSelector(selector);
-      if (typeof props !== "object" || props === null) {
-        throw new Error(
-          "[VNode] Invalid second argument provided to VNode constructor."
-        );
-      }
-      this.processProperties(props);
-      this.processChildren(children);
-    }
   }
 
   // Renders the actual DOM Node corresponding to the current Virtual Node

@@ -10,8 +10,8 @@ },
   "scripts": {
     "test": "jest",
     "coverage": "jest --coverage",
-    "minify": "terser h3.js -o h3.min.js --source-map",
-    "copy": "cp h3.js docs/js/h3.js && cp h3.js example/assets/js/h3.js"
+    "copy": "cp h3.js docs/js/h3.js && cp h3.js example/assets/js/h3.js",
+    "guide": "hastyscribe docs/H3_DeveloperGuide.md"
   },
   "repository": {
     "type": "git",