Added WebComponent instructions to README

Author: James Hill

README.md

@@ -1,4 +1,6 @@
-A super fast and lightweight (**971bytes** gzipped) utility function to build HTML node trees, and stateful functional components. Can be used either directly via the `h` function, or from transpiled `JSX`.
+A super fast and lightweight (**971bytes** gzipped) utility function to build HTML node trees and stateful functional components. Can be used either directly via the `h` function, or from transpiled `JSX`.
+
+Due to it's size, `hypnode` is a useful companion utility for writing _WebComponents_, simplifying `HTML` structures, element references and state management. See section entitled "WebComponents" for an example.
 
 # Getting Started
 
@@ -220,6 +222,45 @@ function Button({ buttonText }) {
 
 You provide mutations to your state via the `setState` function, this accepts a _new_ value you wish to assign. Whenever this function is called, the component will be re-rendered.
 
+## WebComponents
+
+Creating and managing complex HTML structures using _WebComponents_ can become tricky as their size increases. `hypnode` simplifies this by incorporating a familiar component and state pattern into your custom elements. You can find more info on _WebComponents_ [here](https://www.webcomponents.org/introduction). As `hypnode` is fast and lightweight, _WebComponents_ can be more easily shared between projects without significant dependency overhead.
+
+A quick example can be found below:
+
+```
+// myComponent.tsx (TypeScript + JSX)
+
+import { h, useState, State } from  'hypnode';
+...
+class MyComponent extends HTMLElement {
+   private state: State<number>;
+
+   public connectedCallback() {
+      const Button = () => this.renderButton();
+
+      this.appendChild(<Button  />);
+   }
+
+   private  renderButton = () => {
+      const [counter] = (this.state =  useState(0));
+
+      return (
+         <div class="my-component">
+            <p>Counter: {counter}</p>
+            <button onClick={this.onClick}>Click Here</button>
+         </div>
+      );
+   }
+
+   private onClick = (ev: Event) => {
+      const [counter, setState] = this.state;
+
+      setState(counter + 1);
+   }
+}
+```
+
 # SSR
 
 `hypnode` provides a fallback Virtual `DOM` representation for server side rendering (universal rendering). You can use this output to generate a complete `HTML` representation of your app. This output depends on a `window.document` reference being undefined, if it is, `hypnode` will return a virtual `DOM` object. A prebuilt utility that can convert this into an `HTML` string can be found here: [`hypnode-server`](https://github.com/jhdevuk/hypnode-server)

package.json

@@ -1,6 +1,6 @@
 {
    "name": "hypnode",
-   "version": "1.1.6",
+   "version": "1.1.7",
    "description": "",
    "main": "dist/index.js",
    "types": "dist/index.d.ts",

src/index.ts

@@ -1,5 +1,5 @@
 import { IAttrs } from './attributes';
-import { useState, setElement, setIndex } from './useState';
+import { State, useState, setElement, setIndex } from './useState';
 import { IVNode, virtualDom } from './virtualDom';
 
 /* -----------------------------------
@@ -215,4 +215,4 @@ function render(root: HTMLElement, output: HTMLElement) {
  *
  * -------------------------------- */
 
-export { Hypnode, Tag, IVNode, h, useState, render };
+export { Hypnode, Tag, State, IVNode, h, useState, render };

src/useState.ts

@@ -23,6 +23,14 @@ interface IContext {
    };
 }
 
+/* -----------------------------------
+ *
+ * IState
+ *
+ * -------------------------------- */
+
+type State<T> = [T, (value: T) => void];
+
 /* -----------------------------------
  *
  * Variables
@@ -39,7 +47,7 @@ let callRender: number = null;
  *
  * -------------------------------- */
 
-function useState(initial: any) {
+function useState<T>(initial: T): State<T> {
    let index = callIndex;
    let state = initial;
 
@@ -128,4 +136,4 @@ function reRender(index: number) {
  *
  * -------------------------------- */
 
-export { useState, setIndex, setElement };
+export { State, useState, setIndex, setElement };