Merge pull request #4 from tusharmath/examples

docs(readme): added example and esnextb links

README.md

@@ -17,7 +17,7 @@ This approach is an attempt to find a balance between a [scalable paradigm] and
 [snabbdom]:          https://github.com/paldepind/snabbdom
 [ShadowRoot]:        https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot
 [actions]:           http://redux.js.org/docs/basics/Actions.html
-
+[preact]:            https://github.com/developit/preact
 ## Installation
 
 ```bash
@@ -73,7 +73,7 @@ import snabbdom from 'snabbdom'
 import CounterComponent from './CounterComponent'
 
 // Patcher function (for snabbdom only)
-function snabbdomPatcher (shadowRoot) {
+function virtualDOMPatcher (shadowRoot) {
   const patch = snabbdom.init()
 
   // setup shadowroot element
@@ -86,7 +86,7 @@ function snabbdomPatcher (shadowRoot) {
 }
 
 // create prototype object
-const proto = rwc.createWCProto(snabbdomPatcher, CounterComponent)
+const proto = rwc.createWCProto(virtualDOMPatcher, CounterComponent)
 
 // create an HTMLElement instance
 const html = Object.create(HTMLElement.prototype)
@@ -99,7 +99,36 @@ document.registerElement('x-counter', CounterHTMLComponent)
 ```
 
 ## Virtual DOM Patcher
-The `patcher` function gives the to ability to customize how the shadow DOM is updated. The function takes in an element of [ShadowRoot] type and returns another function that is called whenever a new virtual DOM tree is created.
+The `virtualDOMPatcher` function argument gives the to ability to customize how the shadow DOM is updated.
+
+#### Examples:
+1. [snabbdom](https://esnextb.in/?gist=ba33f1903a3eefec86642afd34baf2b4)
+
+```js
+import snabbdom from 'snabbdom'
+
+function virtualDOMPatcher (shadowRoot) {
+  const patch = snabbdom.init()
+  let __vNode = shadowRoot.appendChild(document.createElement('div'))
+  return function (vNode) {
+    __vNode = patch(__vNode, vNode)
+  }
+}
+```
+
+2. [preact](https://esnextb.in/?gist=a5d9ddb7805a741c042516d170c0a150)
+
+```js
+import { render } from 'preact'
+import { createElement as h } from 'preact-hyperscript'
+
+function virtualDOMPatcher (shadowRoot) {
+  let __vNode = render(h('div'), shadowRoot)
+  return function (vNode) {
+    render(vNode, shadowRoot, __vNode)
+  }
+}
+```
 
 ## Dispatching Custom Events
 For components to communicate with the outside world the component can dispatch a [CustomEvent] via the `update()` function.
@@ -160,7 +189,7 @@ Creates the prototype for the web component element.
 
 | Param | Type | Description |
 | --- | --- | --- |
-| patcher | <code>function</code> | patches the virtual dom on [shadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot). |
+| virtualDOMPatcher | <code>function</code> | patches the virtual dom on [shadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot). |
 | component | <code>Object</code> |  |
 | component.init | <code>function</code> | returns the initial state of the component. |
 | component.update | <code>function</code> | a redux reducer for updating component state. |

docs/README.template.md

@@ -17,7 +17,7 @@ This approach is an attempt to find a balance between a [scalable paradigm] and
 [snabbdom]:          https://github.com/paldepind/snabbdom
 [ShadowRoot]:        https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot
 [actions]:           http://redux.js.org/docs/basics/Actions.html
-
+[preact]:            https://github.com/developit/preact
 ## Installation
 
 ```bash
@@ -73,7 +73,7 @@ import snabbdom from 'snabbdom'
 import CounterComponent from './CounterComponent'
 
 // Patcher function (for snabbdom only)
-function snabbdomPatcher (shadowRoot) {
+function virtualDOMPatcher (shadowRoot) {
   const patch = snabbdom.init()
 
   // setup shadowroot element
@@ -86,7 +86,7 @@ function snabbdomPatcher (shadowRoot) {
 }
 
 // create prototype object
-const proto = rwc.createWCProto(snabbdomPatcher, CounterComponent)
+const proto = rwc.createWCProto(virtualDOMPatcher, CounterComponent)
 
 // create an HTMLElement instance
 const html = Object.create(HTMLElement.prototype)
@@ -99,7 +99,36 @@ document.registerElement('x-counter', CounterHTMLComponent)
 ```
 
 ## Virtual DOM Patcher
-The `patcher` function gives the to ability to customize how the shadow DOM is updated. The function takes in an element of [ShadowRoot] type and returns another function that is called whenever a new virtual DOM tree is created.
+The `virtualDOMPatcher` function argument gives the to ability to customize how the shadow DOM is updated.
+
+#### Examples:
+1. [snabbdom](https://esnextb.in/?gist=ba33f1903a3eefec86642afd34baf2b4)
+
+```js
+import snabbdom from 'snabbdom'
+
+function virtualDOMPatcher (shadowRoot) {
+  const patch = snabbdom.init()
+  let __vNode = shadowRoot.appendChild(document.createElement('div'))
+  return function (vNode) {
+    __vNode = patch(__vNode, vNode)
+  }
+}
+```
+
+2. [preact](https://esnextb.in/?gist=a5d9ddb7805a741c042516d170c0a150)
+
+```js
+import { render } from 'preact'
+import { createElement as h } from 'preact-hyperscript'
+
+function virtualDOMPatcher (shadowRoot) {
+  let __vNode = render(h('div'), shadowRoot)
+  return function (vNode) {
+    render(vNode, shadowRoot, __vNode)
+  }
+}
+```
 
 ## Dispatching Custom Events
 For components to communicate with the outside world the component can dispatch a [CustomEvent] via the `update()` function.

src/createWCProto.js

@@ -15,14 +15,14 @@ function isArray (i) {
 /**
  * Creates the prototype for the web component element.
  * @name createWCProto
- * @param {Function} patcher - patches the virtual dom on [shadowRoot]{@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot}.
+ * @param {Function} virtualDOMPatcher - patches the virtual dom on [shadowRoot]{@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot}.
  * @param {Object} component
  * @param {Function} component.init - returns the initial state of the component.
  * @param {Function} component.update - a redux reducer for updating component state.
  * @param {Function} component.view - takes in the state and returns a dom tree.
  * @return {Object} prototype object for creating HTMLElements
  */
-export default (patcher, component) => {
+export default (virtualDOMPatcher, component) => {
   const {update, view, init} = component
   return ({
     __dispatchActions (type) {
@@ -44,7 +44,7 @@ export default (patcher, component) => {
       this.__store.dispatch({type: `@@attr/${name}`, params})
     },
     createdCallback () {
-      this.__patch = patcher(this.createShadowRoot())
+      this.__patch = virtualDOMPatcher(this.createShadowRoot())
       this.__store = createStore(this.__reducer.bind(this), init())
       this.__render()
       this.__dispose = this.__store.subscribe(() => this.__render())