vsn 0.1.93 → 0.1.96

package/dist/version.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
-exports.VERSION = '0.1.93';
+exports.VERSION = '0.1.96';
 //# sourceMappingURL=version.js.map

package/package.json

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

package/src/AST/ClassNode.ts

@@ -226,6 +226,11 @@ 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) {
             await classNode.constructTag(tag, dom);

package/src/DOM.ts

@@ -189,16 +189,8 @@ export class DOM extends EventDispatcher {
         }
     }
 
-    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 v-attribute
-        const newTags: Tag[] = [];
-        const toBuild: HTMLElement[] = [];
-
+    async discover(ele: HTMLElement, forComponent: boolean = false): Promise<HTMLElement[]> {
+        const discovered: HTMLElement[] = [];
         const checkElement = (e: HTMLElement): boolean => {
             if (ElementHelper.hasVisionAttribute(e)) {
                 if (
@@ -206,7 +198,7 @@ export class DOM extends EventDispatcher {
                 ) return false;
                 if (this.queued.indexOf(e) > -1) return false;
                 this.queued.push(e);
-                toBuild.push(e);
+                discovered.push(e);
             }
 
             return true;
@@ -221,38 +213,39 @@ export class DOM extends EventDispatcher {
         checkElement(ele);
         scanChildren(ele);
 
-        for (const element of toBuild) {
-            if (element[Tag.TaggedVariable]) continue;
-            const tag: Tag = new Tag(element, this);
-            this.tags.push(tag);
-            newTags.push(tag);
-        }
+        return discovered;
+    }
 
-        if (isRoot)
-            this._root = await this.getTagForElement(document.body);
+    async buildTag(element: HTMLElement, returnExisting: boolean = false): Promise<Tag> {
+        if (element[Tag.TaggedVariable]) return returnExisting ? element[Tag.TaggedVariable] : null;
+        const tag: Tag = new Tag(element, this);
+        this.tags.push(tag);
+        return tag;
+    }
 
-        // 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,
@@ -260,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/attributes/List.ts

@@ -113,11 +113,11 @@ export class List extends Attribute {
     }
 
     public get listItemName(): string {
-        return this.tag.getRawAttributeValue('vsn-list-item-name', 'item');
+        return this.tag.getRawAttributeValue('list-item-name', 'item');
     }
 
     public get listItemModel(): string {
-        return this.tag.getRawAttributeValue('vsn-list-item-model');
+        return this.tag.getRawAttributeValue('list-item-model');
     }
 
     public remove(item: any) {
@@ -135,6 +135,7 @@ export class List extends Attribute {
     }
 
     protected async add(obj) {
+        // Setup new HTML element
         const clone = this.template.cloneNode(true);
         let element: HTMLElement;
         if (clone instanceof DocumentFragment) {
@@ -144,20 +145,36 @@ export class List extends Attribute {
         }
         delete element[Tag.TaggedVariable];
 
-        this.tag.element.appendChild(element);
+        // Setup new tag
+        const tag = await this.tag.dom.buildTag(element, true);
+
+        await this.setupTag(tag, obj);
 
+        // Add to DOM & build
+        this.tag.element.appendChild(element);
         await this.tag.dom.buildFrom(this.tag.element);
-        const tag: Tag = await this.tag.dom.getTagForElement(element);
         this.tags.push(tag);
+        this.tag.dispatch('add', obj);
+    }
 
-        if (obj) {
-            if (tag.scope.wrapped) {
-                tag.scope.data.setData(obj);
-            } else {
-                tag.wrap(obj);
-            }
+    async setupTag(tag: Tag, obj: any) {
+        tag.createScope(true);
+
+        // Setup new scope & 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))
+                obj = new cls(obj);
         }
 
-        this.tag.dispatch('add', obj);
+        // Check if the class is set up already
+        if (!cls || (!(tag.scope.data instanceof cls) && !(tag.scope.wrapped instanceof cls)))
+            tag.wrap(obj);
+
+        tag.scope.set(this.listItemName, tag.scope);
     }
 }

package/src/attributes/ListItem.ts

@@ -18,30 +18,13 @@ export class ListItem extends Attribute {
         this._list = this.tag.findAncestorByAttribute('vsn-list');
         if (!this._list)
             throw Error(ListItem.ERROR_NO_PARENT);
-        const modelName: string = (await this.getList()).listItemModel;
-        if (modelName) {
-            const cls = await Registry.instance.models.get(modelName);
-            if (
-                !(this.tag.scope.data instanceof cls) &&
-                !(this.tag.scope.wrapped instanceof cls)
-            ) {
-                this.instantiateModel(cls);
-            }
 
-        }
-        this.tag.scope.set(this.listItemName, this.tag.scope);
+        const listAttr = await this.getListAttribute();
+        await listAttr.setupTag(this.tag, {});
         await super.setup();
     }
 
-    public get listItemName(): string {
-        return this.getAttributeBinding('item');
-    }
-
-    public async getList(): Promise<List> {
+    public async getListAttribute(): Promise<List> {
         return await this._list.getAttribute<List>('vsn-list');
     }
-
-    private instantiateModel(model: any) {
-        this.tag.wrap(model, false, true);
-    }
 }

package/src/version.ts

@@ -1,2 +1,2 @@
-export const VERSION = '0.1.93';
+export const VERSION = '0.1.96';
 

package/test/attributes/ListItem.spec.ts

@@ -41,7 +41,7 @@ describe('ListItem', () => {
 
     it("vsn-list-item should find it's parent list", (done) => {
         document.body.innerHTML = `
-            <ul vsn-list:list vsn-list-item-model="ListItemSpecTestItem" id="test"><li vsn-list-item:item id="test-item"></li></ul>
+            <ul vsn-list:list list-item-model="ListItemSpecTestItem" id="test"><li vsn-list-item id="test-item"></li></ul>
         `;
 
         const dom = new DOM(document);
@@ -58,7 +58,7 @@ describe('ListItem', () => {
     it("should properly wrap list item class", (done) => {
         document.body.innerHTML = `
             <div vsn-controller:controller="ListItemController">
-                <ul vsn-list:controller.items vsn-list-item-model="ListItemSpecTestItem" id="test">
+                <ul vsn-list:controller.items list-item-model="ListItemSpecTestItem" id="test">
                     <li vsn-template vsn-list-item:item></li>
                 </ul>
             </div>
@@ -89,15 +89,12 @@ describe('ListItem', () => {
 
     it("vsn-list-item should work with vsn-set", (done) => {
         document.body.innerHTML = `
-            <ul vsn-list:list vsn-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();
         });
@@ -105,14 +102,15 @@ describe('ListItem', () => {
 
     it("vsn-list-item should work with vsn-exec", (done) => {
         document.body.innerHTML = `
-            <ul vsn-list:list vsn-list-item-model="ListItemSpecTestItem" id="test"><li vsn-list-item:item id="test-item" vsn-exec="item.test = 1"></li></ul>
+            <ul vsn-list:list list-item-model="ListItemSpecTestItem" id="test">
+                <li vsn-list-item id="test-item" vsn-exec="item.test = 1"></li>
+            </ul>
         `;
 
+        console.log('################# building dom');
         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;
             console.log('test keys', listItem.scope.keys);
             expect(listItem.scope.get('test')).toBe(1);
             done();