Update for handling keys.

1. Updated handling of keys. Now stored directly on vnode as property and removed from the props object.
2. Updated getKey to handle new location of key.
3. Updated test for new location of key on vnode.
4. Updated JSDocs for Component class.

lib/component.js

@@ -60,10 +60,20 @@ export class Component {
    * 6. componentDidUpdate - a callback to execute after the component updates.
    * 7. componentWillUnmount - a callback to execute before the component unmounts.
    *
-   * @typedef {object} props An object of property/values to configure the class instance.
-   * @property {string|element} props.container The container element in which to render the component.
    * @property {state} [props.state] The state object of the component. This can be of type boolean, string, number, object or array.
-   * @property {function} props.render A function that returns nodes to render to the DOM.
+   * @property {string} selector A CSS selector describing the DOM container in which to render the component.
+   * @property {Element} container The DOM node in which the component is rendered.
+   * @property {boolean} componentShouldUpdate A flag to determine whether a component can render or not. Setting this to false allows you to maipulate a component's state without triggering and automatic render. After setting to true, you may need to execute `update()` on a component instance to force render it.
+   * @property {boolean} mounted A boolean flag that tracks whether a component has been mounted in the DOM or not. This is used internally by Composi, do not touch!
+   * @property {Element} element The root or base element of a component's DOM tree. You can use it to register events or as the basis of a component-specific DOM query.
+   * @method {Function} componentWillMount A callback that is called before a component is mounted in the DOM.
+   * @method {Function} componentDidMount A callback that is called after a component is mounted in the DOM. Use this to register events, query the component DOM, etc.
+   * @method {Function} componentWillUpdate A callback that is called before a component is updated. This is not called the first time a component is rendered.
+   * @method {Function} componentDidUpdate A callback that is called after a component is updated. This is not called the first time a component is rendered.
+   * @method {Function} componentWillUnmount A callback that is called before a component is unmounted from the DOM. Use this for any environmental cleanup.
+   * @method {Function} render A method that returns nodes to render to the DOM.¸
+   * @method {function} update A method that renders the component template with provided data to the DOM. Data may be provided directly as the primary argument, or it can be derived from the component's state. Data provided as an argument will override use of component state.
+   * @method {function} unmount A method to unmount a component from the DOM. This deletes the DOM tree structure starting from the component's base element, and sets the component instance properties to null.
    * @constructs Component
    */
   constructor(props) {

lib/h.js

@@ -21,9 +21,17 @@ export function h(type, props, ...children) {
   const nodes = []
   const childNodes = []
   let length = children.length
+  let key
 
   while (length-- > 0) nodes.push(children[length])
 
+  if (props && props.key) {
+    // Assign by value:
+    key = props.key
+    // Remove duplicate from attributes:
+    delete props.key
+  }
+
   while (nodes.length) {
     const node = nodes.pop()
     if (node && node.pop) {
@@ -41,7 +49,8 @@ export function h(type, props, ...children) {
     return {
       type,
       props: props || {},
-      children: childNodes
+      children: childNodes,
+      key
     }
   }
 }

lib/utils/getKey.js

@@ -3,4 +3,4 @@
  * @param {object} node A virtual node.
  * @returns {string|number} key.
  */
-export const getKey = node => (node && node.props ? node.props.key : null)
+export const getKey = node => node && node.key

package.json

@@ -1,6 +1,6 @@
 {
   "name": "composi",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "A JavaScript library for creating websites, PWAs and hybrid apps.",
   "main": "index.js",
   "scripts": {

test/render.html

@@ -84,9 +84,9 @@ <h1>Mocha Tests - Composi mount &amp; render Function</h1>
         expect(vNode.children[2].children[0]).to.equal('Horse')
       })
       it('virtual node children should have following keys: "101", "102", "103"', function() {
-        expect(vNode.children[0].props.key).to.equal(101)
-        expect(vNode.children[1].props.key).to.equal(102)
-        expect(vNode.children[2].props.key).to.equal(103)
+        expect(vNode.children[0].key).to.equal(101)
+        expect(vNode.children[1].key).to.equal(102)
+        expect(vNode.children[2].key).to.equal(103)
       })
     }) 
 
@@ -176,10 +176,10 @@ <h1>Mocha Tests - Composi mount &amp; render Function</h1>
       })
       it('virtual node children keys should be "101", "102", "103", "104"', function(done) {
         setTimeout(() => {
-        expect(vNode.children[0].props.key).to.equal(101)
-        expect(vNode.children[1].props.key).to.equal(102)
-        expect(vNode.children[2].props.key).to.equal(103)
-        expect(vNode.children[3].props.key).to.equal(104)
+        expect(vNode.children[0].key).to.equal(101)
+        expect(vNode.children[1].key).to.equal(102)
+        expect(vNode.children[2].key).to.equal(103)
+        expect(vNode.children[3].key).to.equal(104)
         }, 3000)
         done()
       })