added include[inject] mode

package.json

@@ -1,6 +1,6 @@
 {
   "name": "akili",
-  "version": "1.2.33",
+  "version": "1.2.34",
   "description": "Akili - javascript framework",
   "main": "./src/akili.js",
   "author": {

src/components/a.js

@@ -38,23 +38,9 @@ export default class A extends Component {
   }
 
   compiled() {
-    this.el.addEventListener('click', e => {
-      e.preventDefault();
-
-      if (this.isUrl) {
-        router.location(this.attrs.url, this.options);
-        return;
-      }
-
-      if(this.attrs.state) {
-        router.state(this.state.name, this.params, this.query, this.hash, this.options);
-        return;
-      }
-
-      router.reload(this.params, this.query, this.hash, this.options);
-    });
-
-    this.onStateChanged = () => this.state && this.setActivity();
+    this.onClickListener = this.onClick.bind(this);
+    this.onStateChanged = () => this.state && this.setActivity();    
+    this.el.addEventListener('click', this.onClickListener);
     window.addEventListener('state-changed', this.onStateChanged);
 
     this.attr('state', this.setState);
@@ -73,6 +59,23 @@ export default class A extends Component {
 
   removed() {
     window.removeEventListener('state-changed', this.onStateChanged);
+    this.el.removeEventListener('click', this.onClickListener);
+  }
+
+  onClick(e) {
+    e.preventDefault();
+
+    if (this.isUrl) {
+      router.location(this.attrs.url, this.options);
+      return;
+    }
+
+    if(this.attrs.state) {
+      router.state(this.state.name, this.params, this.query, this.hash, this.options);
+      return;
+    }
+
+    router.reload(this.params, this.query, this.hash, this.options);
   }
 
   setUrl(url) {

src/components/include.js

@@ -8,16 +8,17 @@ import request from '../services/request.js';
  * {@link https://akilijs.com/docs/components#docs_html_templates}
  * 
  * @tag include
- * @selector include[url]:not([html]),[html]:not([url])
+ * @selector [url],[html],[inject]
  * @attr {string} [url] - template path
  * @attr {string} [html] - html to append
+ * @attr {string} [inject] - inject component by name
  * @attr {number|function|boolean} [cache] - request cache {@link https://akilijs.com/docs/requests#docs_cache}
  * @message {void} load - sent on the template load
  * @message {Error} error - sent on error
  */
 export default class Include extends Component {
   static transparent = true; 
-  static matches = '[url]:not([html]),[html]:not([url])';
+  static matches = '[url],[html],[inject]';
   static events = ['load', 'error'];
 
   static define() {
@@ -26,17 +27,33 @@ export default class Include extends Component {
 
   constructor(...args) {
     super(...args);
+  }
+
+  created() {    
     this.html = this.el.innerHTML;
+
+    if(this.el.getAttribute('inject')) {
+      this.injected = this.el.querySelector('*');
+    }    
+
     this.el.innerHTML = '';
     this.connection = null;
   }
 
   compiled() {
     this.attr('cache', this.setCache);
+    this.attr('inject', this.setInject);
     this.attr('html', this.setHtml);
     return this.attr('url', this.setTemplate);
   }
 
+  setInject(name) {
+    this.injected.setAttribute('component', name);
+    this.empty();
+    this.el.innerHTML = this.injected.outerHTML;
+    return Akili.compile(this.el, { recompile: true });
+  }
+
   setCache(cache) {
     this.cache = cache;
   }

src/components/radio.js

@@ -30,23 +30,8 @@ export default class Radio extends For {
   }
 
   created() {
-    this.el.addEventListener('change', () => { 
-      if(this._disableInternalEvents) {
-        return;
-      }
-
-      let value = this.getRadioValue();
-
-      if (value === this.prevValue) {
-        return;
-      }
-
-      this.prevValue = value;
-
-      if(this.attrs.value === undefined || this.__isResolved) {
-        this.attrs.onRadio.trigger(value, { bubbles: true });
-      }      
-    });
+    this.onChangeListener = this.onChange.bind(this);    
+    this.el.addEventListener('change', this.onChangeListener);
 
     if(this.iterable) {
       return super.created.apply(this, arguments);
@@ -68,6 +53,29 @@ export default class Radio extends For {
     return this.attr('in', this.setIn, { callOnStart: false });
   }
 
+  removed() {
+    this.el.removeEventListener('change', this.onChangeListener);
+    return super.removed.apply(this, arguments);
+  }
+
+  onChange() { 
+    if(this._disableInternalEvents) {
+      return;
+    }
+
+    let value = this.getRadioValue();
+
+    if (value === this.prevValue) {
+      return;
+    }
+
+    this.prevValue = value;
+
+    if(this.attrs.value === undefined || this.__isResolved) {
+      this.attrs.onRadio.trigger(value, { bubbles: true });
+    }      
+  }
+
   setIn(data) {
     return this.draw(data).then(this.redrawRadio.bind(this));
   }

src/components/select.js

@@ -28,7 +28,8 @@ export default class Select extends For {
   }
 
   created() {
-    this.el.addEventListener('change', () => this.el.content = this.getContent());
+    this.onChangeListener = this.onChange.bind(this);    
+    this.el.addEventListener('change', this.onChangeListener);
 
     if(this.iterable) {
       return super.created.apply(this, arguments);
@@ -43,6 +44,15 @@ export default class Select extends For {
     return this.attr('in', this.setIn);
   }
 
+  removed() {
+    this.el.removeEventListener('change', this.onChangeListener);
+    return super.removed.apply(this, arguments);
+  }
+
+  onChange() {
+    this.el.content = this.getContent()
+  }
+
   setIn(data) {
     return this.draw(data).then(this.redrawSelect.bind(this));
   }

src/components/text.js

@@ -23,9 +23,10 @@ export default class Text extends Component {
 
   created() {
     if(this.el.hasAttribute('on-debounce')) {
-      this.el.addEventListener('input', utils.debounce(() => {
-        this.attrs.onDebounce.trigger(undefined, { bubbles: true });
-      }, this.debounceInterval));
+      this.onInputListener = utils.debounce(() => {
+        !this.isRemoved && this.attrs.onDebounce.trigger(undefined, { bubbles: true });
+      }, this.debounceInterval).bind(this);
+      this.el.addEventListener('input', this.onInputListener);
     }
   }
 
@@ -35,6 +36,10 @@ export default class Text extends Component {
     this.attr('debounce', this.setDebounce);
   }
 
+  removed() {
+    this.el.removeEventListener('input', this.onInputListener);
+  }
+
   setDebounce(interval) {
     this.debounceInterval = +interval;
   }

test/app/all.js

@@ -38,6 +38,12 @@ export default class All extends Component {
       <include html="<test>\${ 1 }</test>"></include>
     `;
 
+    this.el.innerHTML += `
+      <include inject="\${ 'for' }">
+        <div in="\${ [1] }"></div>
+      </include>
+    `;
+
     this.el.innerHTML += `
       <div component="for" in="\${ [1, 2, 3, 4] }" class="img-chunk">
         <loop>

test/components.js

@@ -107,7 +107,11 @@ describe('components/', () => {
     });
 
     it('should load an html', () => {
-      assert.equal(component.child('include').el.querySelector('test').textContent, '1');
+      assert.equal(component.child('include[html]').el.querySelector('test').textContent, '1');
+    });
+
+    it('should inject a component', () => {
+      assert.equal(component.child('include[inject]').child().data[0], '1');
     });
   });