vsn 0.1.98 → 0.1.101

package/src/Tag.ts

@@ -28,6 +28,7 @@ export class Tag extends DOMObject {
     protected _state: TagState;
     protected _meta: { [key: string]: any; };
     protected attributes: Attribute[];
+    protected attributeMap: { [key: string]: Attribute; };
     protected _nonDeferredAttributes: Attribute[] = [];
     protected _parentTag: Tag;
     protected _children: Tag[] = [];
@@ -60,14 +61,10 @@ export class Tag extends DOMObject {
         this.rawAttributes = {};
         this.parsedAttributes = {};
         this.attributes = [];
+        this.attributeMap = {};
         this.onEventHandlers = {};
         this.analyzeElementAttributes();
         this._state = TagState.Instantiated;
-        if (this.hasAttribute('slot')) {
-            this.addEventHandler('slotted',[], (e) => {
-                console.log('slot change', e, this.element.assignedSlot);
-            })
-        }
     }
 
     public get meta() {
@@ -76,11 +73,6 @@ export class Tag extends DOMObject {
         return this._meta;
     }
 
-    public slotted(slot: HTMLSlotElement) {
-        this.slot = slot;
-        console.log('i am slotted', slot);
-    }
-
     protected onAttributeStateChange(event) {
         if (event.previouseState === AttributeState.Deferred)  // @todo: what is this?
             this._nonDeferredAttributes.length = 0;
@@ -242,33 +234,33 @@ export class Tag extends DOMObject {
         this._children.push(tag);
     }
 
+    public removeChild(tag: Tag) {
+        this._children.splice(this._children.indexOf(tag), 1);
+    }
+
     public get children(): Tag[] {
         return [...this._children];
     }
 
-    public get parentTag(): Tag {
-        if (!this._parentTag) {
-            let parentElement: HTMLElement = this.element.parentElement as HTMLElement;
-            let foundParent = false;
-            while (parentElement) {
-                if (parentElement[Tag.TaggedVariable]) {
-                    foundParent = true;
-                    this.parentTag = parentElement[Tag.TaggedVariable];
-                    break;
-                }
-
-                if (parentElement.parentElement) {
-                    parentElement = parentElement.parentElement as HTMLElement;
-                } else if (parentElement.assignedSlot) {
-                    parentElement = parentElement.assignedSlot.parentElement as HTMLElement;
-                } else {
-                    parentElement = null;
-                }
-
+    public findParentTag() {
+        let parentElement: HTMLElement = DOM.getParentElement(this.element);
+        let foundParent = false;
+        while (parentElement) {
+            if (parentElement[Tag.TaggedVariable]) {
+                foundParent = true;
+                this.parentTag = parentElement[Tag.TaggedVariable];
+                break;
             }
+            parentElement = DOM.getParentElement(parentElement);
+        }
+
+        if (!foundParent && DOM.instance.root !== this)
+            return DOM.instance.root;
+    }
 
-            if (!foundParent && DOM.instance.root !== this)
-                return DOM.instance.root;
+    public get parentTag(): Tag {
+        if (!this._parentTag) {
+            this.findParentTag();
         }
 
         return this._parentTag;
@@ -278,11 +270,19 @@ export class Tag extends DOMObject {
         if (this.element === document.body)
             return;
 
+        if (this._parentTag && this._parentTag !== tag) {
+            this._parentTag.removeChild(this);
+            this.scope.parentScope = null;
+        }
+
         this._parentTag = tag;
-        tag.addChild(this);
+        if (tag) {
+            tag.addChild(this);
 
-        if (this.scope !== tag.scope)
-            this.scope.parentScope = tag.scope;
+            if (this.scope !== tag.scope) {
+                this.scope.parentScope = tag.scope;
+            }
+        }
     }
 
     public get scope(): Scope {
@@ -439,7 +439,6 @@ export class Tag extends DOMObject {
     public async buildAttributes() {
         let requiresScope = false;
         let defer: boolean = false;
-        this.attributes.length = 0;
         const isMobile: boolean = VisionHelper.isMobile();
         if (this.element.offsetParent === null ||
             this.hasAttribute('hidden') ||
@@ -452,17 +451,15 @@ export class Tag extends DOMObject {
         const slot: Tag = this.isSlot ? this : null;
         for (const tag of tags) {
             for (let attr in this.rawAttributes) {
-                if (this.hasModifier(attr, 'mobile')) {
-                    if (!isMobile) {
-                        continue;
-                    }
-                }
+                if (tag.attributeMap[attr])
+                    continue;
 
-                if (this.hasModifier(attr, 'desktop')) {
-                    if (isMobile) {
-                        continue;
-                    }
-                }
+                if (this.hasModifier(attr, 'mobile') && !isMobile)
+                    continue;
+
+
+                if (this.hasModifier(attr, 'desktop') && isMobile)
+                    continue;
 
                 const attrClass = await this.getAttributeClass(attr);
                 if (attrClass) {
@@ -470,7 +467,9 @@ export class Tag extends DOMObject {
                         requiresScope = true;
 
                     const attrObj = attrClass.create(tag, attr, attrClass, slot);
+
                     tag.attributes.push(attrObj);
+                    tag.attributeMap[attr] = attrObj;
                     if (defer && attrClass.canDefer) {
                         await attrObj.defer();
                         tag.deferredAttributes.push(attrObj);

package/src/attributes/List.ts

@@ -5,6 +5,7 @@ import {ElementHelper} from "../helpers/ElementHelper";
 import {Registry} from "../Registry";
 import {DOM} from "../DOM";
 import {Scope} from "../Scope";
+import {ScopeData} from "../Scope/ScopeData";
 
 @Registry.attribute('vsn-list')
 export class List extends Attribute {
@@ -146,6 +147,13 @@ export class List extends Attribute {
         }
         delete element[Tag.TaggedVariable];
 
+        // Collect raw data
+        let data;
+        if (obj instanceof ScopeData)
+            data = obj.getData();
+        else
+            data = Object.assign({}, obj);
+
         // Setup new tag
         const tag = await this.tag.dom.buildTag(element, true);
         await this.setupTagScope(tag, obj);
@@ -154,6 +162,13 @@ export class List extends Attribute {
         this.tag.element.appendChild(element);
         await this.tag.dom.setupTags([tag]);
         await this.tag.dom.buildFrom(this.tag.element);
+
+        // Make sure we're using the correct data (Template may have vsn-bind values that are not desired)
+        const itemScope = tag.scope.get(this.listItemName);
+        if (itemScope instanceof Scope && data) {
+            itemScope.data.setData(data);
+        }
+
         this.tags.push(tag);
         this.tag.dispatch('add', obj);
     }
@@ -163,26 +178,28 @@ export class List extends Attribute {
             return;
 
         tag.createScope(true);
+        const itemScope = new Scope(tag.scope);
 
-        // Setup new scope & class, if defined
+        // Setup new scope & model class, if defined
         const modelName: string = this.listItemModel;
         let cls;
         if (modelName)
             cls = await Registry.instance.models.get(modelName);
 
         if (cls) {
-            if (!obj || !(obj instanceof cls))
+            if (!obj || !(obj instanceof cls)) {
                 obj = new cls(obj);
+            }
         }
 
         // Check if the class is set up already
-        if (!cls || (!(tag.scope.data instanceof cls) && !(tag.scope.wrapped instanceof cls))) {
-            if (tag.scope.wrapped)
-                tag.scope.unwrap();
-            tag.wrap(obj);
+        if (!cls || (!(itemScope.data instanceof cls) && !(itemScope.wrapped instanceof cls))) {
+            if (itemScope.wrapped)
+                itemScope.unwrap();
+            itemScope.wrap(obj, true, true);
         }
 
-        tag.scope.set(this.listItemName, tag.scope);
+        tag.scope.set(this.listItemName, itemScope);
         tag.meta[List.MetaItemSetupFlag] = true;
     }
 }

package/src/attributes/ScopeAttribute.ts

@@ -20,17 +20,21 @@ export class ScopeAttribute extends Attribute {
 
     public async extract() {
         if (this.tree) {
-            const value = await this.tree.evaluate(this.tag.scope, this.tag.dom, this.tag);
-            if (!(value instanceof Scope)) {
-                throw new Error(`vsn-scope value must be an object, got ${typeof value}`);
+            const binding = this.getAttributeBinding();
+
+            const scope = await this.tree.evaluate(this.tag.scope, this.tag.dom, this.tag);
+            if (!(scope instanceof Scope)) {
+                throw new Error(`vsn-scope value must be an object, got ${typeof scope}`);
             }
-            for (const key of value.data.keys) {
-                this.tag.scope.set(key, value.data[key]);
+
+            if (binding) {
+                this.tag.scope.set(binding, scope);
+            } else {
+                for (const key of scope.data.keys) {
+                    this.tag.scope.set(key, scope.data[key]);
+                }
             }
         }
-        const binding = this.getAttributeBinding();
-        if (binding)
-            this.tag.scope.parentScope.set(binding, this.tag.scope);
         await super.extract();
     }
 }

package/src/version.ts

@@ -1,2 +1,2 @@
-export const VERSION = '0.1.98';
+export const VERSION = '0.1.101';
 

package/src/vsn.ts

@@ -47,7 +47,13 @@ export class Vision extends EventDispatcher {
     }
 
     protected defineComponent(name, cls) {
-        customElements.define(name, cls);
+        if (this.dom.built) {
+            customElements.define(name, cls);
+        } else {
+            this.dom.once('built', () => {
+                customElements.define(name, cls);
+            });
+        }
     }
 
     public get dom(): DOM {

package/test/AST/ClassNode.spec.ts

@@ -1,7 +1,7 @@
 import {DOM} from "../../src/DOM";
 import {ClassNode} from "../../src/AST/ClassNode";
 import {Registry} from "../../src/Registry";
-import {TagList} from "../../src/Tag/List";
+import {TagList} from "../../src/Tag/TagList";
 
 
 describe('ClassNode', () => {

package/test/Tag/TagList.spec.ts

@@ -1,6 +1,6 @@
 import {DOM} from "../../src/DOM";
 import {Query} from "../../src/Query";
-import {TagList} from "../../src/Tag/List";
+import {TagList} from "../../src/Tag/TagList";
 import {DOMObject} from "../../src/DOM/DOMObject";
 
 describe('TagList', () => {

package/test/attributes/ListItem.spec.ts

@@ -72,7 +72,7 @@ describe('ListItem', () => {
             list.on('add', () => {
                 const listItem = listAttr.tags[0];
 
-                expect(listItem.scope.data instanceof ListItemSpecTestItem).toBeTrue();
+                expect(listItem.scope.get('item').data instanceof ListItemSpecTestItem).toBeTrue();
                 expect(controller.items.length).toBe(1);
                 expect(controller.items[0] instanceof ListItemSpecTestItem).toBeTrue();
 
@@ -95,7 +95,7 @@ describe('ListItem', () => {
         const dom = new DOM(document);
         dom.once('built', async () => {
             const listItem = await dom.getTagForElement(document.getElementById('test-item'));
-            expect(listItem.scope.get('testing')).toBe(1);
+            expect(listItem.scope.get('item').get('testing')).toBe(1);
             done();
         });
     });

package/dist/Tag/List.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"List.js","sourceRoot":"","sources":["../../src/Tag/List.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,wDAAqD;AAIrD;IAA6B,2BAAgB;IACzC;QAAY,eAAqB;aAArB,UAAqB,EAArB,qBAAqB,EAArB,IAAqB;YAArB,0BAAqB;;QAAjC,+BACa,KAAK,UAEjB;QADG,MAAM,CAAC,cAAc,CAAC,KAAI,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;;IACnD,CAAC;IAED,sBAAI,0BAAK;aAAT;YACI,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAA;QACxB,CAAC;;;OAAA;IAED,sBAAI,6BAAQ;aAAZ;YACI,OAAO,IAAI,CAAC,GAAG,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,OAAO,EAAT,CAAS,CAAC,CAAC;QACpC,CAAC;;;OAAA;IAED,sBAAI,0BAAK;aAAT;YACI,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC;QACnB,CAAC;;;OAAA;IAED,sBAAI,yBAAI;aAAR;YACI,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACjC,CAAC;;;OAAA;IAED,qBAAG,GAAH,UAAI,KAAa;QACb,IAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAhB,CAAgB,CAAC,CAAC;QACjD,OAAO,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACjC,CAAC;IAED,6BAAW,GAAX,UAAY,SAAS;QACjB,IAAI,CAAC,OAAO,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,EAArC,CAAqC,CAAC,CAAA;QACxD,OAAO,IAAI,CAAA;IACf,CAAC;IAED,0BAAQ,GAAR,UAAS,SAAS;QACd,IAAI,CAAC,OAAO,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,EAAlC,CAAkC,CAAC,CAAA;QACrD,OAAO,IAAI,CAAA;IACf,CAAC;IAED,qBAAG,GAAH,UAAI,QAAQ,EAAE,KAAK;QACf,IAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,UAAU,EAAE,UAAA,CAAC;YAC5C,OAAO,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,WAAW,EAAE,CAAA;QAC3C,CAAC,CAAC,CAAA;QACF,IAAI,CAAC,OAAO,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,EAApC,CAAoC,CAAC,CAAA;QACvD,OAAO,IAAI,CAAA;IACf,CAAC;IACL,cAAC;AAAD,CAAC,AA5CD,CAA6B,KAAK,GA4CjC;AA5CY,0BAAO;AA8CpB,IAAI,2BAAY,CAAC,aAAa,IAAI,2BAAY,CAAC,MAAM;IACjD,MAAM,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC"}