vsn 0.1.94 → 0.1.97

package/dist/vsn.min.js.LICENSE.txt

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vsn",
-  "version": "0.1.94",
+  "version": "0.1.97",
   "description": "SEO Friendly Javascript/Typescript Framework",
   "keywords": [
     "framework",

package/src/AST/ClassNode.ts

@@ -226,8 +226,13 @@ export class ClassNode extends Node implements TreeNode {
             tag = await dom.getTagForElement(element, true);
         }
 
+        if (!tag) {
+            console.error('no tag found for element', element);
+            return;
+        }
+
         const classNode: ClassNode = Registry.instance.classes.getSynchronous(selector);
-        if (classNode && tag) {
+        if (classNode) {
             await classNode.constructTag(tag, dom);
         }
 

package/src/DOM.ts

@@ -223,47 +223,29 @@ export class DOM extends EventDispatcher {
         return tag;
     }
 
-    async buildFrom(ele: any, isRoot: boolean = false, forComponent: boolean = false) {
-        if (isRoot) {
-            document.body.setAttribute('vsn-root', '');
-            document.ondragover = (e) => e.cancelable && e.preventDefault();  // Allow dragging over document
-        }
-
-        // Create tags for each html element with a vsn-attribute
-        const newTags: Tag[] = [];
-        const toBuild: HTMLElement[] = await this.discover(ele, forComponent);
-
-        for (const element of toBuild) {
-            const tag = await this.buildTag(element);
-            if (tag)
-                newTags.push(tag);
-        }
-
-        if (isRoot)
-            this._root = await this.getTagForElement(document.body);
-
-        // Configure, setup & execute attributes
-        for (const tag of newTags)
+    async setupTags(tags: Tag[]) {
+         // Configure, setup & execute attributes
+        for (const tag of tags)
             await tag.buildAttributes();
 
-        for (const tag of newTags)
+        for (const tag of tags)
             await tag.compileAttributes();
 
-        for (const tag of newTags)
+        for (const tag of tags)
             await tag.setupAttributes();
 
-        for (const tag of newTags)
+        for (const tag of tags)
             await tag.extractAttributes();
 
-        for (const tag of newTags)
+        for (const tag of tags)
             await tag.connectAttributes();
 
-        for (const tag of newTags) {
+        for (const tag of tags) {
             await tag.finalize();
             this.queued.splice(this.queued.indexOf(tag.element), 1);
         }
 
-        for (const tag of newTags) {
+        for (const tag of tags) {
             this.observer.observe(tag.element, {
                 attributes: true,
                 characterData: true,
@@ -271,6 +253,28 @@ export class DOM extends EventDispatcher {
                 subtree: true
             });
         }
+    }
+
+    async buildFrom(ele: any, isRoot: boolean = false, forComponent: boolean = false) {
+        if (isRoot) {
+            document.body.setAttribute('vsn-root', '');
+            document.ondragover = (e) => e.cancelable && e.preventDefault();  // Allow dragging over document
+        }
+
+        // Create tags for each html element with a vsn-attribute
+        const newTags: Tag[] = [];
+        const toBuild: HTMLElement[] = await this.discover(ele, forComponent);
+
+        for (const element of toBuild) {
+            const tag = await this.buildTag(element);
+            if (tag)
+                newTags.push(tag);
+        }
+
+        if (isRoot)
+            this._root = await this.getTagForElement(document.body);
+
+       await this.setupTags(newTags);
 
         if (isRoot) {
             this._built = true;

package/src/Tag.ts

@@ -489,7 +489,6 @@ export class Tag extends DOMObject {
             for (const attr of tag.getAttributesWithState(AttributeState.Instantiated)) {
                 await attr.compile();
             }
-
         }
         this._state = TagState.AttributesCompiled;
     }

package/src/attributes/List.ts

@@ -51,7 +51,7 @@ export class List extends Attribute {
         await this.addExistingItems(items);
 
         listScope.on(`change:${listKey}`, (e) => {
-            if (e.oldValue) {
+            if (e?.oldValue) {
                 if (e.oldValue instanceof WrappedArray) {
                     e.oldValue.map((item) => {
                         this.remove(item);
@@ -147,6 +147,17 @@ export class List extends Attribute {
 
         // Setup new tag
         const tag = await this.tag.dom.buildTag(element, true);
+        await this.setupTagScope(tag, obj);
+
+        // Add to DOM & build
+        this.tag.element.appendChild(element);
+        await this.tag.dom.setupTags([tag]);
+        await this.tag.dom.buildFrom(this.tag.element);
+        this.tags.push(tag);
+        this.tag.dispatch('add', obj);
+    }
+
+    async setupTagScope(tag: Tag, obj: any) {
         tag.createScope(true);
 
         // Setup new scope & class, if defined
@@ -156,18 +167,17 @@ export class List extends Attribute {
             cls = await Registry.instance.models.get(modelName);
 
         if (cls) {
-            if (!obj || !(obj instanceof cls)) {
+            if (!obj || !(obj instanceof cls))
                 obj = new cls(obj);
-            }
         }
 
-        tag.scope.set(this.listItemName, tag.scope);
-        tag.wrap(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);
+        }
 
-        // Add to DOM & build
-        this.tag.element.appendChild(element);
-        await this.tag.dom.buildFrom(this.tag.element);
-        this.tags.push(tag);
-        this.tag.dispatch('add', obj);
+        tag.scope.set(this.listItemName, tag.scope);
     }
 }

package/src/attributes/ListItem.ts

@@ -19,8 +19,8 @@ export class ListItem extends Attribute {
         if (!this._list)
             throw Error(ListItem.ERROR_NO_PARENT);
 
-        this.tag.scope.set((await this.getListAttribute()).listItemName, this.tag.scope);
-
+        const listAttr = await this.getListAttribute();
+        await listAttr.setupTagScope(this.tag, {});
         await super.setup();
     }
 

package/src/version.ts

@@ -1,2 +1,2 @@
-export const VERSION = '0.1.94';
+export const VERSION = '0.1.97';
 

package/test/attributes/ListItem.spec.ts

@@ -89,15 +89,12 @@ describe('ListItem', () => {
 
     it("vsn-list-item should work with vsn-set", (done) => {
         document.body.innerHTML = `
-            <ul vsn-list:list list-item-model="ListItemSpecTestItem" id="test"><li vsn-list-item:item id="test-item" vsn-set:item.testing|integer="1"></li></ul>
+            <ul vsn-list:list list-item-model="ListItemSpecTestItem" id="test"><li vsn-list-item id="test-item" vsn-set:item.testing|integer="1"></li></ul>
         `;
 
         const dom = new DOM(document);
         dom.once('built', async () => {
-            const list = await dom.getTagForElement(document.getElementById('test'));
             const listItem = await dom.getTagForElement(document.getElementById('test-item'));
-            const listItemAttr: ListItem = await listItem.getAttribute('vsn-list-item') as ListItem;
-
             expect(listItem.scope.get('testing')).toBe(1);
             done();
         });
@@ -110,7 +107,6 @@ describe('ListItem', () => {
             </ul>
         `;
 
-        console.log('################# building dom');
         const dom = new DOM(document);
         dom.once('built', async () => {
             const listItem = await dom.getTagForElement(document.getElementById('test-item'));