fixes nested initialization

when initializing tags, siblings were initialized more than once, this PR adds hierarchy to the initialization process. Because of the added hierarchy, the top-most node must be known so an argument is now accepted by the add method.

Author: heapwolf

API.md

@@ -4,7 +4,7 @@
 
 | Method | Description |
 | :--- | :--- |
-| `add(Class, Object)` | Register a class as a new custom-tag and provide options for it. |
+| `add(Class, root?)` | 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. |
@@ -31,7 +31,7 @@
 
 | Method | Description |
 | :--- | :--- |
-| `constructor(props)` | An instance of the element is created or upgraded. Useful for initializing state, setting up event listeners, or creating shadow dom. See the spec for restrictions on what you can do in the constructor. A constructor will receive an argument of `props` and must call `super(props)`. |
+| `constructor(object)` | An instance of the element is created or upgraded. Useful for initializing state, setting up event listeners, or creating shadow dom. See the spec for restrictions on what you can do in the constructor. The constructor's arguments must be forwarded by calling `super(object)`. |
 | `willConnect()` | Called prior to the element being inserted into the DOM. Useful for updating configuration, state and preparing for the render. |
 | `connected()` | Called every time the element is inserted into the DOM. Useful for running setup code, such as fetching resources or rendering. Generally, you should try to delay work until this time. |
 | `disconnected()` | Called every time the element is removed from the DOM. Useful for running clean up code. |

index.js

@@ -15,6 +15,7 @@ class Tonic {
       const render = this.render
       this.render = () => this.wrap(render.bind(this))
     }
+
     this._connect()
     Tonic.refs.push(this.root)
   }
@@ -28,7 +29,7 @@ class Tonic {
     return el.matches(s) ? el : el.closest(s)
   }
 
-  static add (c) {
+  static add (c, root) {
     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.')
 
@@ -44,14 +45,24 @@ class Tonic {
       Tonic.styleNode = document.head.appendChild(styleTag)
     }
 
-    Tonic._constructTags()
+    if (!root) return
+    Tonic._constructTags(root)
   }
 
-  static _constructTags (root, states = {}) { /* eslint-disable no-new */
-    for (const tagName of Tonic.tags) {
-      for (const node of (root || document).getElementsByTagName(tagName)) {
-        if (!node.disconnect) new Tonic.registry[tagName]({ node, state: states[node.id] })
+  static _constructTags (node, states = {}) { /* eslint-disable no-new */
+    node = node.firstElementChild
+
+    while (node) {
+      const tagName = node.tagName
+
+      if (Tonic.tags.includes(tagName)) {
+        new Tonic.registry[tagName]({ node, state: states[node.id] })
+        node = node.nextElementSibling
+        continue
       }
+
+      Tonic._constructTags(node, states)
+      node = node.nextElementSibling
     }
   }
 
@@ -79,6 +90,7 @@ class Tonic {
       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`
+      if (typeof v === 'boolean') return `${v.toString()}`
       return v
     }
     return values.map(ref).reduce(reduce, [s]).filter(filter).join('')

package.json

@@ -1,14 +1,15 @@
 {
   "name": "@conductorlab/tonic",
-  "version": "7.3.0",
+  "version": "8.0.0",
   "description": "A composable component inspired by React.",
   "main": "events.js",
   "scripts": {
     "test": "npm run test:browser",
     "test:browser": "browserify --bare ./test | tape-run --node",
+    "test:h": "browserify --bare ./test/h | tape-run --node",
     "build:demo": "browserify --bare ./demo > ./docs/bundle.js"
   },
-  "author": "",
+  "author": "heapwolf",
   "license": "MIT",
   "devDependencies": {
     "browserify": "^16.2.2",

test/index.js

@@ -17,7 +17,7 @@ test('attach to dom', t => {
     <component-a></component-a>
   `
 
-  Tonic.add(ComponentA)
+  Tonic.add(ComponentA, document.body)
 
   const div = document.querySelector('div')
   t.ok(div, 'a div was created and attached')
@@ -63,7 +63,7 @@ test('pass props', t => {
         </component-b-b>
       `
     }
-  })
+  }, document.body)
 
   const bb = document.getElementById('y')
   {
@@ -98,7 +98,7 @@ test('get element by id and set properties via the api', t => {
     }
   }
 
-  Tonic.add(ComponentC)
+  Tonic.add(ComponentC, document.body)
 
   {
     const div = document.getElementById('test')
@@ -178,7 +178,7 @@ test('stylesheets and inline styles', t => {
     }
   }
 
-  Tonic.add(ComponentF)
+  Tonic.add(ComponentF, document.body)
   const style = document.head.getElementsByTagName('style')[0]
   const expected = `component-f div { color: red; }`
   t.equal(style.textContent, expected, 'style was prefixed')
@@ -216,8 +216,8 @@ test('component composition', t => {
     }
   }
 
-  Tonic.add(Foo)
-  Tonic.add(Bar)
+  Tonic.add(Foo, document.body)
+  Tonic.add(Bar, document.body)
 
   t.equal(document.body.querySelectorAll('.bar').length, 2, 'two bar divs')
   t.equal(document.body.querySelectorAll('.foo').length, 4, 'four foo divs')
@@ -251,8 +251,8 @@ test('persist named component state after re-renering', t => {
     }
   }
 
-  Tonic.add(StatefulParent)
   Tonic.add(StatefulChild)
+  Tonic.add(StatefulParent, document.body)
   const parent = document.getElementsByTagName('stateful-parent')[0]
   parent.reRender()
   const child = document.getElementsByTagName('stateful-child')[0]
@@ -303,7 +303,7 @@ test('lifecycle events', t => {
   }
 
   Tonic.add(Bazz)
-  Tonic.add(Quxx)
+  Tonic.add(Quxx, document.body)
   const q = document.querySelector('quxx')
   q.reRender({})
   const refsLength = Tonic.refs.length
@@ -338,7 +338,7 @@ test('compose sugar (this.children)', t => {
   `
 
   Tonic.add(ComponentG)
-  Tonic.add(ComponentH)
+  Tonic.add(ComponentH, document.body)
 
   const g = document.querySelector('component-g')
   const children = g.querySelectorAll('.child')
@@ -386,9 +386,9 @@ test('check that composed elements use (and re-use) their initial innerHTML corr
     </component-i>
   `
 
-  Tonic.add(ComponentI)
   Tonic.add(ComponentJ)
   Tonic.add(ComponentK)
+  Tonic.add(ComponentI, document.body)
 
   const i = document.querySelector('component-i')
   const kTags = i.getElementsByTagName('component-k')
@@ -414,6 +414,85 @@ test('check that composed elements use (and re-use) their initial innerHTML corr
   t.end()
 })
 
+test('mixed order declaration', t => {
+  class App extends Tonic {
+    render () {
+      return this.html`<div class="app">${this.children}</div>`
+    }
+  }
+
+  class ComponentA extends Tonic {
+    render () {
+      return `<div class="a">A</div>`
+    }
+  }
+
+  class ComponentB extends Tonic {
+    render () {
+      return this.html`<div class="b">${this.children}</div>`
+    }
+  }
+
+  class ComponentC extends Tonic {
+    render () {
+      return this.html`<div class="c">${this.children}</div>`
+    }
+  }
+
+  class ComponentD extends Tonic {
+    render () {
+      return `<div class="d">D</div>`
+    }
+  }
+
+  document.body.innerHTML = `
+    <App>
+      <component-a>
+      </component-a>
+
+      <component-b>
+        <component-c>
+          <component-d>
+          </component-d>
+        </component-c>
+      </component-b> 
+    </App>
+  `
+
+  Tonic.add(ComponentD)
+  Tonic.add(ComponentA)
+  Tonic.add(ComponentC)
+  Tonic.add(ComponentB)
+  Tonic.add(App, document.body)
+
+  {
+    const div = document.querySelector('.app')
+    t.ok(div, 'a div was created and attached')
+  }
+
+  {
+    const div = document.querySelector('body .app .a')
+    t.ok(div, 'a div was created and attached')
+  }
+
+  {
+    const div = document.querySelector('body .app .b')
+    t.ok(div, 'a div was created and attached')
+  }
+
+  {
+    const div = document.querySelector('body .app .b .c')
+    t.ok(div, 'a div was created and attached')
+  }
+
+  {
+    const div = document.querySelector('body .app .b .c .d')
+    t.ok(div, 'a div was created and attached')
+  }
+
+  t.end()
+})
+
 test('cleanup, ensure exist', t => {
   t.end()
   process.exit(0)