vsn 0.1.97 → 0.1.100

package/src/Scope.ts

@@ -32,6 +32,9 @@ export class Scope extends EventDispatcher {
     }
 
     public set parentScope(scope: Scope) {
+        if (this._parentScope && this._parentScope !== scope)
+            this._parentScope.removeChild(this);
+
         if (scope) {
             this._parentScope = scope;
             scope.addChild(this);
@@ -94,7 +97,20 @@ export class Scope extends EventDispatcher {
         return value;
     }
 
-    set(key: string, value: any) {
+    set(key: string, value: any, detectType: boolean = false): void {
+        if (detectType) {
+            const type = typeof value;
+            if (type === 'number') {
+                if (value % 1 === 0)
+                    this.setType(key, 'integer');
+                else
+                    this.setType(key, 'float');
+            } else if (type === 'string') {
+                this.setType(key, 'string');
+            } else if (type === 'boolean') {
+                this.setType(key, 'boolean');
+            }
+        }
         if (!this._data.hasProperty(key))
             this._data.createProperty(key);
         this._data[key] = value;

package/src/Tag/ShadowRootTag.ts

@@ -0,0 +1,5 @@
+import {Tag} from "../Tag";
+
+export class ShadowRootTag extends Tag {
+
+}

package/src/Tag/SlotTag.ts

@@ -0,0 +1,5 @@
+import {Tag} from "../Tag";
+
+
+export class SlotTag extends Tag {
+}

package/src/Tag/SlottedTag.ts

@@ -0,0 +1,19 @@
+import {Tag} from "../Tag";
+import {SlotTag} from "./SlotTag";
+
+export class SlottedTag extends Tag {
+    protected slotTag: SlotTag;
+
+    public async slotted(slot: SlotTag) {
+        this.slotTag = slot;
+        this.slot = slot.element as HTMLSlotElement;
+        this.parentTag = slot;
+        await this.dom.setupTags([this]);
+        await this.dom.buildFrom(this.element, false, true);
+    }
+
+    findParentTag(): Tag {
+        this.parentTag = this.slotTag;
+        return this._parentTag;
+    }
+}

package/src/Tag.ts

@@ -26,7 +26,9 @@ export class Tag extends DOMObject {
     public readonly parsedAttributes: { [key: string]: string[]; };
     public readonly deferredAttributes: Attribute[] = [];
     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[] = [];
@@ -59,19 +61,16 @@ 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 slotted(slot: HTMLSlotElement) {
-        this.slot = slot;
-        console.log('i am slotted', slot);
+    public get meta() {
+        if (!this._meta)
+            this._meta = {};
+        return this._meta;
     }
 
     protected onAttributeStateChange(event) {
@@ -235,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;
@@ -271,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 {
@@ -432,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') ||
@@ -445,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) {
@@ -463,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,9 +5,11 @@ 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 {
+    public static readonly MetaItemSetupFlag = 'vsn-list-item-setup';
     public static readonly canDefer: boolean = false;
     public static readonly scoped: boolean = true;
 
@@ -145,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);
@@ -153,31 +162,44 @@ 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);
     }
 
     async setupTagScope(tag: Tag, obj: any) {
+        if (tag.meta[List.MetaItemSetupFlag])
+            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.97';
+export const VERSION = '0.1.100';
 

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"}