Merge pull request #12 from heapwolf/v7.3.0

V7.3.0

Author: heapwolf

API.md

@@ -4,7 +4,7 @@
 
 | Method | Description |
 | :--- | :--- |
-| `add(Class, Object)` | Register a class as a new custom-tag and provide optional options for it. |
+| `add(Class, Object)` | Register a class as a new custom-tag and provide options for it. |
 | `escape(String)` | Escapes HTML characters from a string (based on [he][3]). |
 | `sanitize(Object)` | Escapes all the strings found in an object literal. |
 | `match(Node, Selector)` | Match the given node against a selector or any matching parent of the given node. This is useful when trying to locate a node from the actual node that was interacted with. |
@@ -17,10 +17,16 @@
 | `getProps()` | Get the properties of a component instance. |
 | <code>setState(Object &#124; Function)</code> | Set the state of a component instance. Can also take a function which will receive the current props as an argument. |
 | `stylesheet()` | Returns a string of css to be lazily added to a `style` tag in the head. |
-| `styles()` | Returns an object that represents inline-styles. Styles are applied by adding a keys from the object to the `styles` attribute of an html tag in the render function, for example `styles="key1 key2"`. Each object's key-value pair are added to the element's style object. |
+| `styles()` | Returns an object that represents inline-styles to be applied to the component. Styles are applied by adding a keys from the object to the `styles` attribute of an html tag in the render function, for example `styles="key1 key2"`. Each object's key-value pair are added to the element's style object. |
 | `render()` | Returns HTML to be parsed or a dom node that will overwrite. There is usually no need to call this directly, prefer `componentInstance.reRender({ ... })`. |
 | html\`...\` | Tidy up an HTML string (use as a [tagged template][2]). |
 
+## INSTANCE PROPERTIES
+
+| Name | Description |
+| :--- | :--- |
+| <code>children</code> | An array of nodes, the original child nodes of the component. |
+
 ## "LIFECYCLE" INSTANCE METHODS
 
 | Method | Description |

index.js

@@ -76,6 +76,7 @@ class Tonic {
     const reduce = (a, b) => a.concat(b, strings.shift())
     const filter = s => s && (s !== true || s === 0)
     const ref = v => {
+      if (typeof v === 'object' && v.__children__) return this._children(v)
       if (typeof v === 'object' || typeof v === 'function') return this._prop(v)
       if (typeof v === 'number') return `${v}__float`
       return v
@@ -103,11 +104,15 @@ class Tonic {
     return this.props
   }
 
+  handleEvent (e) {
+    this[e.type](e)
+  }
+
   _bindEventListeners () {
     const hp = Object.getOwnPropertyNames(window.HTMLElement.prototype)
     for (const p of this._props) {
       if (hp.indexOf('on' + p) === -1) continue
-      this.root.addEventListener(p, e => this[p](e))
+      this.root.addEventListener(p, this)
     }
   }
 
@@ -131,6 +136,15 @@ class Tonic {
           el.getAttribute('styles').split(/\s+/).forEach(s =>
             Object.assign(el.style, styles[s.trim()])))
       }
+
+      Array.from(target.querySelectorAll('tonic-children')).forEach(el => {
+        const root = Tonic._elements[this.root._id]
+        Array.from(root[el.id]).forEach(node => {
+          el.parentNode.insertBefore(node, el)
+        })
+        delete root[el.id]
+        el.parentNode.removeChild(el)
+      })
     } else {
       while (target.firstChild) target.removeChild(target.firstChild)
       target.appendChild(content.cloneNode(true))
@@ -147,6 +161,14 @@ class Tonic {
     return p
   }
 
+  _children (r) {
+    const id = this.root._id
+    const ref = Tonic._createId()
+    if (!Tonic._elements[id]) Tonic._elements[id] = {}
+    Tonic._elements[id][ref] = r
+    return `<tonic-children id="${ref}"/></tonic-children>`
+  }
+
   _connect () {
     for (let { name, value } of this.root.attributes) {
       name = name.replace(/-(.)/g, (_, m) => m.toUpperCase())
@@ -168,7 +190,8 @@ class Tonic {
     }
 
     this.willConnect && this.willConnect()
-    this.children = this.children || this.root.innerHTML
+    this.children = [...this.root.childNodes].map(node => node.cloneNode(true))
+    this.children.__children__ = true
     this._setContent(this.root, this.render())
     Tonic._constructTags(this.root)
     const style = this.stylesheet && this.stylesheet()
@@ -184,6 +207,7 @@ class Tonic {
   _disconnect (index) {
     this.disconnected && this.disconnected()
     delete Tonic._data[this.root._id]
+    delete Tonic._elements[this.root._id]
     delete this.root
     Tonic.refs.splice(index, 1)
   }
@@ -192,6 +216,7 @@ class Tonic {
 Tonic.tags = []
 Tonic.refs = []
 Tonic._data = {}
+Tonic._elements = {}
 Tonic.registry = {}
 Tonic.escapeRe = /["&'<>`]/g
 Tonic.escapeMap = { '"': '&quot;', '&': '&amp;', '\'': '&#x27;', '<': '&lt;', '>': '&gt;', '`': '&#x60;' }