vsn 0.1.53 → 0.1.56

package/src/Tag.ts

@@ -21,6 +21,8 @@ export enum TagState {
     Built,
 }
 
+export const TaggedVariable:string = '_vsn_tag';
+
 export class Tag extends DOMObject {
     public readonly rawAttributes: { [key: string]: string; };
     public readonly parsedAttributes: { [key: string]: string[]; };
@@ -55,6 +57,7 @@ export class Tag extends DOMObject {
         ...props
     ) {
         super(element, props);
+        element[TaggedVariable] = this;
         this.rawAttributes = {};
         this.parsedAttributes = {};
         this.attributes = [];
@@ -232,6 +235,23 @@ export class Tag extends DOMObject {
     }
 
     public get parentTag(): Tag {
+        if (!this._parentTag) {
+            let parentElement: HTMLElement = this.element.parentElement as HTMLElement;
+            let foundParent = false;
+            while (parentElement) {
+                if (parentElement[TaggedVariable]) {
+                    foundParent = true;
+                    this.parentTag = parentElement[TaggedVariable];
+                    break;
+                }
+
+                parentElement = parentElement.parentElement as HTMLElement;
+            }
+
+            if (!foundParent && DOM.instance.root !== this)
+                return DOM.instance.root;
+        }
+
         return this._parentTag;
     }
 
@@ -250,8 +270,11 @@ export class Tag extends DOMObject {
         if (!!this._scope)
             return this._scope;
 
-        if (!!this._parentTag)
-            return this._parentTag.scope;
+        if (this.uniqueScope)
+            return this.createScope();
+
+        if (!!this.parentTag)
+            return this.parentTag.scope;
 
         return null;
     }
@@ -290,7 +313,7 @@ export class Tag extends DOMObject {
     }
 
     public addToParentElement() {
-        this._parentTag.element.appendChild(this.element)
+        this.parentTag.element.appendChild(this.element)
     }
 
     public hide() {
@@ -304,7 +327,6 @@ export class Tag extends DOMObject {
     public findAncestorByAttribute(attr: string, includeSelf: boolean = false): Tag {
         if (includeSelf && this.hasAttribute(attr))
             return this;
-
         return this.parentTag ? this.parentTag.findAncestorByAttribute(attr, true) : null;
     }
 
@@ -432,7 +454,6 @@ export class Tag extends DOMObject {
 
         if (requiresScope && !this.uniqueScope) {
             this._uniqueScope = true;
-            this._scope = new Scope();
         }
 
         this._state = TagState.AttributesBuilt;
@@ -569,17 +590,21 @@ export class Tag extends DOMObject {
         }
     }
 
-    public createScope() {
+    public createScope(force: boolean = false): Scope {
         // Standard attribute requires a unique scope
         // @todo: Does this cause any issues with attribute bindings on the parent scope prior to having its own scope? hmm...
-        if (!this.uniqueScope) {
+        if ((!this.uniqueScope && force) || this.uniqueScope) {
             this._uniqueScope = true;
             this._scope = new Scope();
 
             if (this.parentTag) {
                 this.scope.parentScope = this.parentTag.scope;
             }
+
+            return this._scope;
         }
+
+        return null;
     }
 
     async watchAttribute(attributeName: string) {
@@ -589,7 +614,7 @@ export class Tag extends DOMObject {
             }
         }
 
-        this.createScope();
+        this.createScope(true);
 
         const standardAttribute = new StandardAttribute(this, attributeName);
         this.attributes.push(standardAttribute);
@@ -605,7 +630,7 @@ export class Tag extends DOMObject {
             }
         }
 
-        this.createScope();
+        this.createScope(true);
 
         const styleAttribute = new StyleAttribute(this, 'style');
         this.attributes.push(styleAttribute);

package/src/attributes/List.ts

@@ -25,9 +25,11 @@ export class List extends Attribute {
     public async setup() {
         if (this.tag.element.children.length > 0) {
             const template = this.tag.element.children[0];
+            const templateTag: Tag = await this.tag.dom.getTagForElement(template);
 
             if (template) {
                 if (template.hasAttribute('vsn-template')) {
+                    templateTag.parentTag = this.tag; // Set parentTag before removing from DOM
                     template.removeAttribute('vsn-template');
                     this.tag.element.removeChild(template);
                     this.template = template;

package/src/attributes/ScopeAttribute.ts

@@ -10,18 +10,24 @@ export class ScopeAttribute extends Attribute {
     protected tree: Tree;
 
     public async compile() {
-        this.tree = new Tree(this.getAttributeValue());
-        await this.tree.prepare(this.tag.scope, this.tag.dom, this.tag);
+        const code = this.getAttributeValue();
+        if (code) {
+            this.tree = new Tree(code);
+            await this.tree.prepare(this.tag.scope, this.tag.dom, this.tag);
+        }
         await super.compile();
     }
 
     public async extract() {
-        const value = await this.tree.evaluate(this.tag.scope, this.tag.dom, this.tag);
-        if (!(value instanceof Scope)) {
-            throw new Error(`Scope value must be an object, got ${typeof value}`);
-        }
-        for (const key of value.data.keys) {
-            this.tag.scope.set(key, value.data[key]);
+        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}`);
+            }
+            for (const key of value.data.keys) {
+                this.tag.scope.set(key, value.data[key]);
+            }
         }
+        await super.extract();
     }
 }

package/test/attributes/ListItem.spec.ts

@@ -68,6 +68,7 @@ describe('ListItem', () => {
                 </ul>
             </div>
         `;
+        console.log('########### test');
         const dom = new DOM(document);
         dom.once('built', async () => {
             const list = await dom.getTagForElement(document.getElementById('test'));

package/test/attributes/ScopeAttribute.spec.ts

@@ -20,4 +20,16 @@ describe('ScopeAttribute', () => {
             done();
         });
     });
+
+    it("vsn-scope should allow empty value to create a scope", (done) => {
+        document.body.innerHTML = `
+            <div vsn-scope></div>
+        `;
+        const dom = new DOM(document);
+        dom.once('built', async () => {
+            const element = (await dom.exec('?(div)'))[0];
+            expect(element.uniqueScope).toBe(true);
+            done();
+        });
+    });
 });