build and update Store

.gitignore

@@ -8,6 +8,7 @@
 
 # production
 /build
+^/build/.touch
 
 # misc
 .DS_Store

DOM.js

@@ -80,8 +80,7 @@ NS.apply = function(a,b) {
           prop = cfg.prop,
           on = cfg.on || {},
           renderTo = cfg.renderTo,
-          el = cfg.el || (type in customElementCreate ? customElementCreate[type](type, cfg) : document.createElement( type )),
-          classList = el.classList;
+          el = cfg.el || (type in customElementCreate ? customElementCreate[type](type, cfg) : document.createElement( type ));
 
         var i, _i, name;
 
@@ -189,7 +188,7 @@ NS.apply = function(a,b) {
     };
     'div,template,span,input,label,canvas,span,textarea,table,tr,td,th,tBody,tHead'.split( ',' ).forEach( function( name ){
         D[ name ] = function(){
-            return domEl.apply( null, [ name ].concat(ArraySlice.call(arguments)))
+            return domEl.apply( null, [ name ].concat(ArraySlice.call(arguments)));
         };
     } );
 
@@ -311,12 +310,14 @@ NS.apply = function(a,b) {
             if( type === 'function' ){
                 var tmp = D.Text('');//( {cls: 'zero-wrapper'} );
                 el.appendChild( tmp );
-                var list = [];
-                el.setAttribute('data-hooked', 'yep');
+                var list = [],
+                  isNotFragment = !(el instanceof DocumentFragment); // TODO: add attribute on real add to dom
+
+                isNotFragment && el.setAttribute('data-hooked', 'yep');
 
                 // maybe do it through outer weak map?
-                el.__un = el.__un || [];
-                var hookFn;
+                isNotFragment && (el.__un = el.__un || []);
+                var hookFn, release;
 
                 if(isHook){
                     hookFn = function(val){
@@ -344,8 +345,8 @@ NS.apply = function(a,b) {
                             el.insertBefore( fragment, tmp );
                         }
                     };
-
-                    el.__un.push(subEl.hook( hookFn ));
+                    release = subEl.hook( hookFn );
+                    isNotFragment && el.__un.push(release);
                 }else{
 
                     hookFn = function(){
@@ -368,8 +369,8 @@ NS.apply = function(a,b) {
                             return;
                         el.insertBefore(fragment, tmp);
                     };
-
-                    el.__un.push(subEl( hookFn ));
+                    release = subEl( hookFn );
+                    isNotFragment && el.__un.push(release);
                 }
             }else if( subEl !== void 0 && subEl !== false && subEl !== null ){
                 el.appendChild( D.Text( subEl ) );
@@ -530,7 +531,20 @@ NS.apply = function(a,b) {
                 u.dom = _construct(ctor, u.cfg, u.p);
                 d.dom && (d = d.dom);
                 if(d.parentNode){
-                    d.parentNode.replaceChild( 'dom' in u.dom ? u.dom.dom : u.dom, d )
+                    var dParent = d.parentNode,
+                      isInDOM = D.isInDOM(dParent),
+                      newChild = u.dom;
+
+                    if('dom' in u.dom){
+                        newChild = newChild.dom;
+                        newChild.__cmp = u.dom;
+                    }
+
+                    isInDOM && D._recursiveCmpCall(dParent, d, 'beforeRemoveFromDOM');
+                    isInDOM && D._recursiveCmpCall(dParent, newChild, 'beforeAddToDOM');
+                    d.parentNode.replaceChild( newChild, d )
+                    isInDOM && D._recursiveCmpCall(dParent, d, 'afterRemoveFromDOM');
+                    isInDOM && D._recursiveCmpCall(dParent, newChild, 'afterAddToDOM');
                 }
             }
         }else{

Store.js

@@ -99,17 +99,17 @@ var StoreParent = function(parent, key, item) {
 };
 StoreParent.prototype = {
   getKey: function() {
-    if(this.item){
+    if(this.key !== null && this.key !== void 0){
+      return this.key;
+    }else{
       var idx = this.parent._props.indexOf(this.item);
       if(idx > -1)
         return idx;
       console.error('try to write to not existed item');
-    }else{
-      return this.key;
     }
   },
   getPointer: function() {
-    return this.parent._props[this.getKey()];
+    return this.parent.get(this.getKey());
   }
 };
 Store.prototype = {
@@ -182,15 +182,35 @@ Store.prototype = {
   key: String, val: any
   key: {k: v, ...}
    */
-  set: function(key, val, changeList) {
+  set: function(key, val, changeList, bubbleState) {
     var isChangeList = changeList !== void 0;
-    changeList = changeList || [];
+    if(!changeList){
+      bubbleState = true;
+      changeList = [];
+    }
 
     var type = typeof key;
 
+    if(bubbleState && this.parent){
+      var parentKey = this.parent.getKey();
+      if(type === 'object'){
+        Store.prototype.set.call( this.parent.parent,
+          parentKey,
+          key
+        );
+      }else{
+        Store.prototype.set.call( this.parent.parent,
+          parentKey + '.' + key,
+          val
+        );
+      }
+      return this;
+    }else{
+      bubbleState = false
+    }
     if(type === 'object'){
       for(let k in key){
-        this.set(k, key[k], changeList);
+        this.set(k, key[k], changeList, bubbleState);
       }
       this._notify(changeList);
       return this;
@@ -203,18 +223,21 @@ Store.prototype = {
       _key = key.split('.');
     }else if(type === 'number'){
       _key = [key];
-
     }
 
     this._set(
       _key,
       val,
-      this.parent ? this.parent.getPointer() : this._props,
+      this._props,
       changeList
     );
+
     if(!isChangeList)
       this._notify(changeList);
 
+
+
+
     return this;
   },
   reSet: function(key, val, changeList) {
@@ -234,7 +257,7 @@ Store.prototype = {
       key = list.join('.');
       changeList.push([key, this.get(key)]);
     }
-    this._notify(changeList, '', additional)
+
     if(this.parent){
       changeListBubbled.push(this.parent.getKey());
       if(prefix) {
@@ -242,19 +265,33 @@ Store.prototype = {
       }else{
         this.parent.parent._notifyBubble(changeListBubbled, this.parent.getKey(), additional);
       }
+    }else{
+      this._notify(changeList, '', additional)
     }
 
     //debugger
 
   },
+  _notifyDeep: function(evt, fullKey, val, additional) {
+    this.events.fire(evt, fullKey, val, additional);
+    this.fire(fullKey, val, additional);
+    var tokens = fullKey.split('.');
+    if(tokens.length>1){
+      if(tokens[0] in this.arrays){
+        this.arrays[tokens[0]]._notifyDeep(evt,tokens.slice(1).join('.'), val, additional);
+      }else if(this.items.has(this._props[tokens[0]])){
+        this.items.get(this._props[tokens[0]])._notifyDeep(evt,tokens.slice(1).join('.'), val, additional);
+      }
+    }
+  },
   _notify: function(changeList, prefix, additional) {
-    prefix = prefix || '';
+    prefix = prefix === void 0 ? '' : prefix;
     for( let i = changeList.length; i; ){
       const changeListElement = changeList[ --i ];
       var key = changeListElement[0], val = changeListElement[1],
         fullKey = prefix+(key===''?'':(prefix===''?'':'.')+key);
-      this.events.fire('change', fullKey, changeListElement[1], additional);
-      this.fire(fullKey, changeListElement[1], additional);
+      this._notifyDeep('change', fullKey, changeListElement[1], additional)
+
 
     }
     if(this.parent){
@@ -282,7 +319,7 @@ Store.prototype = {
       key = [key];
     }
 
-    let ref = this.parent ? this.parent.parent.get(this.parent.getKey()) : this,
+    let ref = this.parent ? this.parent.getPointer() : this,
       lastStore = ref, i, _i;
 
     for( i = 0, _i = key.length; i < _i; i++ ){
@@ -371,7 +408,7 @@ Store.prototype = {
     return this;
   },
   bind: function (key) {
-    return new StoreBinding(this, key);
+    return new StoreBinding( this, key );
   },
   val: function(key) {
     const me = this;
@@ -654,7 +691,7 @@ ArrayStore.prototype = {
       }
       return i < _i ? i : -1;
     }else{
-      return this._props.indexOf(a);
+      return this._props.indexOf( a );
     }
   },
   toArray: function () {
@@ -728,9 +765,9 @@ ArrayStore.prototype = {
         this.splice.apply( this, [ 0, this.length ].concat( key ) )
         return this;
       }else if( key === this.length ){
-      this.push( item );
-      return void 0; // for same behavior we return empty array
-    }
+        this.push( item );
+        return void 0; // for same behavior we return empty array
+      }
       return this.splice( key, 1, item )[ 0 ];
     }else{
       return this.item(_key[0]).set(_key.slice(1), item);
@@ -779,7 +816,7 @@ ArrayStore.prototype = {
   }
 };
 ArrayStore.prototype = Object.assign(new Store(), ArrayStore.prototype);
-
 Store.ArrayStore = ArrayStore;
+
 typeof module === 'object' && (module.exports = Store);
 (typeof window === 'object') && (window.Store = Store);
\ No newline at end of file

build.js

@@ -30,7 +30,7 @@ Object
 
   for( let outFileName in build ){
     let
-      dest = path.join( dir, outFileName ),
+      dest = path.join( dir, outFileName )+'.js',
       source = header +
         (await minify(
           build[ outFileName ].map( fileName => hash[ fileName ] ).join( ';' )