Update client

Author: davidjamesstone

README.md

@@ -1,16 +1,18 @@
 # superviews.js
 
-Template engine for google [incremental-dom](http://google.github.io/incremental-dom)
+On the server `superviews.js` is used as a template engine for google's [incremental-dom](http://google.github.io/incremental-dom).
 
-Try it out [live in your browser](http://davidjamesstone.github.io/superviews.js/playground/index.html)</a>
+It can also now be used [in the browser](#client) to help build web applications based on [Custom Elements V1](https://www.w3.org/TR/custom-elements/)
+
+Try it out [live in your browser](http://davidjamesstone.github.io/superviews.js/playground/index.html)
 
 `npm install superviews.js --save`
 
 ## API
 
 `tmplstr` (required) - The template string.  
-`name` - The output function name (will be overridden with a <template> element).  
-`argstr` - The output function arguments (will be overridden with a <template> element).  
+`name` - The output function name (will be overridden with a `<template>` element).  
+`argstr` - The output function arguments (will be overridden with a `<template>` element).  
 `mode` - The output format. Can be one of ['es6', 'cjs', 'browser', 'amd'], if any other value is passed the function is exported as a variable with that name. 
 
 `superviews(tmplstr, name, argstr, mode)`
@@ -19,6 +21,12 @@ Try it out [live in your browser](http://davidjamesstone.github.io/superviews.js
 
 `cat examples/test.html | superviews --mode=es6 --name=foo --argstr=bar > examples/test.js`
 
+## Client
+
+NEW! superviews can now be [used in the browser](docs/client.md).
+
+Use it as a clientside library with a set of helpful classes and methods for building web applications based on the Web Components spec, specifically [Custom Elements V1](https://www.w3.org/TR/custom-elements/).
+
 ## Example
 
 Create a file called `tmpl.html`

client/index.js

@@ -39,7 +39,6 @@ const superviews = (options, Base = window.HTMLElement) => class Superviews exte
     super()
 
     const cache = {
-      // initialState: initialState,
       options: options
     }
 
@@ -58,38 +57,28 @@ const superviews = (options, Base = window.HTMLElement) => class Superviews exte
 
     cache.render = render
 
-    /**
-     * State
-     */
-    // const store = new Store(initialState)
-
-    // store.on('update', function (currentState, prevState) {
-    //   render()
-    // })
-
-    // cache.store = store
-    // cache.initialFrozenState = store.get()
-
     /**
      * Input props/attrs & validation
      */
     const schema = options.schema
-    if (schema) {
+    if (schema && schema.properties) {
       const validate = validator(schema, validatorOptions)
       const props = schema.properties
-      // const attrs = options.attributes
       const keys = Object.keys(props)
 
+      // For every key in the root schemas properties
+      // set up an attribute or property on the element
       keys.forEach((key) => {
-        let item = props[key]
-        let isAttr = isSimple(item)
+        const item = props[key]
+        const isAttr = isSimple(item)
         let dflt
 
         if ('default' in item) {
           dflt = item.default
         }
 
         if (isAttr) {
+          // Store primitive types as attributes and cast on `get`
           Object.defineProperty(this, key, {
             get () {
               return this.hasAttribute(key)
@@ -101,6 +90,7 @@ const superviews = (options, Base = window.HTMLElement) => class Superviews exte
             }
           })
         } else {
+          // Store objects/arrays types as attributes and cast on `get`
           let val
 
           Object.defineProperty(this, key, {
@@ -122,17 +112,11 @@ const superviews = (options, Base = window.HTMLElement) => class Superviews exte
     /**
      * Event Delegation
      */
-
-    // Hold a map of bound handers to the original handler
-    // const handlers = new Map()
-
-    // Initialise the delegator
     const del = delegator(this)
     this.on = del.on.bind(del)
     this.off = del.off.bind(del)
     cache.delegate = del
 
-    // cache.handlers = handlers
     cache.events = options.events
 
     this.__superviews = cache
@@ -153,19 +137,21 @@ const superviews = (options, Base = window.HTMLElement) => class Superviews exte
   }
 
   propertyChangedCallback (name, oldValue, newValue) {
-    // Render on any change to observed property
+    // Render on any change to observed properties
+    // This can be overriden in a subclass.
+    // To call this from the subclass use
+    // super.propertyChangedCallback(name, oldValue, newValue)
     this.render()
   }
 
   attributeChangedCallback (name, oldValue, newValue) {
     // Render on any change to observed attributes
+    // This can be overriden in a subclass.
+    // To call this from the subclass use
+    // super.propertyChangedCallback(name, oldValue, newValue)
     this.render()
   }
 
-  // get state () {
-  //   return this.__superviews.store.get()
-  // }
-
   render (immediatley) {
     if (immediatley) {
       this.renderCallback()
@@ -174,55 +160,6 @@ const superviews = (options, Base = window.HTMLElement) => class Superviews exte
     }
   }
 
-  // on (eventType, selector, handler, useCapture) {
-  //   const del = this.__superviews.delegate
-  //   const handlers = this.__superviews.handlers
-
-  //   // handler can be passed as
-  //   // the second or third argument
-  //   let bound
-  //   if (typeof selector === 'function') {
-  //     bound = selector.bind(this)
-  //     handlers.set(selector, bound)
-  //     selector = bound
-  //   } else {
-  //     bound = handler.bind(this)
-  //     handlers.set(handler, bound)
-  //     handler = bound
-  //   }
-
-  //   del.on(eventType, selector, handler, useCapture)
-
-  //   return this
-  // }
-
-  // off (eventType, selector, handler, useCapture) {
-  //   const del = this.__superviews.delegate
-  //   const handlers = this.__superviews.handlers
-
-  //   if (arguments.length === 0) {
-  //     // Remove all
-  //     handlers.clear()
-  //   } else {
-  //     // handler can be passed as
-  //     // the second or third argument
-  //     let bound
-  //     if (typeof selector === 'function') {
-  //       bound = handlers.get(selector)
-  //       handlers.delete(selector)
-  //       selector = bound
-  //     } else {
-  //       bound = handlers.get(handler)
-  //       handlers.delete(handler)
-  //       handler = bound
-  //     }
-  //   }
-
-  //   del.off(eventType, selector, handler, useCapture)
-
-  //   return this
-  // }
-
   emit (name, detail) {
     // Only emit registered events
     const events = this.__superviews.events
@@ -236,9 +173,10 @@ const superviews = (options, Base = window.HTMLElement) => class Superviews exte
       detail: detail
     })
 
-    // Call the DOM Level 1 handler if one exists
-    if (this['on' + name]) {
-      this['on' + name](event)
+    // Call the DOM Level 1 handler if it exists
+    const eventName = 'on' + name
+    if (this[eventName]) {
+      this[eventName](event)
     }
 
     // Dispatch the event
@@ -276,6 +214,10 @@ const superviews = (options, Base = window.HTMLElement) => class Superviews exte
   static get schema () {
     return options.schema
   }
+
+  static get events () {
+    return options.events
+  }
 }
 
 module.exports = superviews

docs/client.md

@@ -29,7 +29,7 @@ This can then be used in HTML like so:
 
 `superviews.js` provides a thin wrapper around this pattern that includes events, event delegation and property and attribute validation.
 
-The idea is that by describing what your components inputs (property/attributes) and outputs (events) are, you document the component and can also use this information to validate the state of the component.
+The idea is that by describing what your components inputs (property/attributes) and outputs (events) are, you document the component and can also use the information to validate the state of the component.
 
 JSON Schema is used to describe the properties and attributes.
 
@@ -42,11 +42,14 @@ All the examples are CJS/browserify.
 Say you want to build a Todo List Web Component.
 
 It's to have a `theme` that can be either `light` or `dark` but defaults to `dark`.
-It also needs to be supplied a list of items called `todos`. Both these inputs are required. The list of `todo` items should be an array of objects with a required integer `id`, required `text` string and a boolean flag to indicate if the task `isCompleted`.
+It also needs to be supplied a list of items called `todos`. 
+Both these inputs are required.
+
+The list of `todo` items should be an array of objects with a required integer `id`, required `text` string and a boolean flag to indicate if the task `isCompleted`.
 
 A third optional input is a `title` for the todo list and has a max length of 10. 
 
-The Todos component should emit 3 events - `change`, `add` and `remove`.
+The Todos component can emit 3 events - `change`, `add` and `remove`.
 
 Using `superviews.js`, it looks like this:
 
@@ -110,7 +113,7 @@ class Todos extends superviews(options) {
 window.customElements.define('x-todos', Todos)
 ```
 
-This could then be used like:
+This can then be used in HTML like this:
 
 ```html
 <x-todos theme="light" title="My Todos">
@@ -253,4 +256,4 @@ You can use it via `superviews.js` if you like:
 require('superviews.js/dre')
 ```
 
-For more info see the [examples](../examples) folder or open [todos](../examples/client/x-todos/index.html) or [widget](../examples/client/x-widget/test.html)
+For more info see the [examples](../examples) folder or open [todos](../examples/client/x-todos/test.html) or [widget](../examples/client/x-widget/test.html)