cleanup api

Author: heapwolf

API.md

@@ -4,7 +4,8 @@
 
 | Method | Description |
 | :--- | :--- |
-| `add(Class, root?)` | Register a class as a new custom-tag and provide options for it. |
+| `add(Class)` | Register a class as a new custom-tag and provide options for it. |
+| `init(root?)` | Initialize all components (optionally starating at a root node in the DOM). This is called automatically when an <App></App> component is added. |
 | `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. |

index.js

@@ -29,9 +29,9 @@ class Tonic {
     return el.matches(s) ? el : el.closest(s)
   }
 
-  static add (c, root) {
+  static add (c, isReady) {
     c.prototype._props = Object.getOwnPropertyNames(c.prototype)
-    if (!c.name || c.name.length === 1) throw Error('Mangling detected, see guide. https://github.com/hxoht/tonic/blob/master/HELP.md.')
+    if (!c.name || c.name.length === 1) throw Error('Mangling detected. https://github.com/heapwolf/tonic/blob/master/HELP.md')
 
     const name = Tonic._splitName(c.name)
     Tonic.registry[name.toUpperCase()] = Tonic[c.name] = c
@@ -45,23 +45,22 @@ class Tonic {
       Tonic.styleNode = document.head.appendChild(styleTag)
     }
 
-    if (!root) return
-    Tonic._constructTags(root)
+    if (isReady || c.name === 'App') Tonic.init(document.firstElementChild)
   }
 
-  static _constructTags (node, states = {}) { /* eslint-disable no-new */
+  static init (node = document.firstElementChild, states = {}) {
     node = node.firstElementChild
 
     while (node) {
       const tagName = node.tagName
 
-      if (Tonic.tags.includes(tagName)) {
+      if (Tonic.tags.includes(tagName)) { /* eslint-disable no-new */
         new Tonic.registry[tagName]({ node, state: states[node.id] })
         node = node.nextElementSibling
         continue
       }
 
-      Tonic._constructTags(node, states)
+      Tonic.init(node, states)
       node = node.nextElementSibling
     }
   }
@@ -108,7 +107,7 @@ class Tonic {
     const oldProps = JSON.parse(JSON.stringify(this.props))
     this.props = Tonic.sanitize(typeof o === 'function' ? o(this.props) : o)
     if (!this.root) throw new Error('.reRender called on destroyed component, see guide.')
-    Tonic._constructTags(this.root, this._setContent(this.root, this.render()))
+    Tonic.init(this.root, this._setContent(this.root, this.render()))
     this.updated && this.updated(oldProps)
   }
 
@@ -205,7 +204,7 @@ class Tonic {
     this.children = [...this.root.childNodes].map(node => node.cloneNode(true))
     this.children.__children__ = true
     this._setContent(this.root, this.render())
-    Tonic._constructTags(this.root)
+    Tonic.init(this.root)
     const style = this.stylesheet && this.stylesheet()
 
     if (style && !Tonic.registry[this.root.tagName].styled) {

test/index.js

@@ -338,7 +338,8 @@ test('compose sugar (this.children)', t => {
   `
 
   Tonic.add(ComponentG)
-  Tonic.add(ComponentH, document.body)
+  Tonic.add(ComponentH)
+  Tonic.init(document.body)
 
   const g = document.querySelector('component-g')
   const children = g.querySelectorAll('.child')
@@ -388,7 +389,10 @@ test('check that composed elements use (and re-use) their initial innerHTML corr
 
   Tonic.add(ComponentJ)
   Tonic.add(ComponentK)
-  Tonic.add(ComponentI, document.body)
+  Tonic.add(ComponentI)
+  Tonic.init()
+
+  t.comment('Uses init() instead of <app>')
 
   const i = document.querySelector('component-i')
   const kTags = i.getElementsByTagName('component-k')
@@ -463,7 +467,7 @@ test('mixed order declaration', t => {
   Tonic.add(ComponentA)
   Tonic.add(ComponentC)
   Tonic.add(ComponentB)
-  Tonic.add(App, document.body)
+  Tonic.add(App)
 
   {
     const div = document.querySelector('.app')