vsn 0.1.96 → 0.1.99

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.96",
+  "version": "0.1.99",
   "description": "SEO Friendly Javascript/Typescript Framework",
   "keywords": [
     "framework",

package/src/AST/ElementAttributeNode.ts

@@ -1,7 +1,7 @@
 import {Scope} from "../Scope";
 import {DOM} from "../DOM";
 import {Tag} from "../Tag";
-import {TagList} from "../Tag/List";
+import {TagList} from "../Tag/TagList";
 import {TreeNode} from "../AST";
 import {Node} from "./Node";
 import {ElementQueryNode} from "./ElementQueryNode";

package/src/AST/ElementStyleNode.ts

@@ -1,7 +1,7 @@
 import {Scope} from "../Scope";
 import {DOM} from "../DOM";
 import {Tag} from "../Tag";
-import {TagList} from "../Tag/List";
+import {TagList} from "../Tag/TagList";
 import {TreeNode} from "../AST";
 import {Node} from "./Node";
 import {ElementQueryNode} from "./ElementQueryNode";

package/src/AST/FunctionCallNode.ts

@@ -55,7 +55,7 @@ export class FunctionCallNode<T = any> extends Node implements TreeNode {
 
             for (const _tag of tags) {
                 let tagNum = 0;
-                for (const className of _tag.element[ClassNode.ClassesVariable]) {
+                for (const className of _tag.element[ClassNode.ClassesVariable] || []) {
                     tagNum++;
                     const cls = Registry.instance.classes.getSynchronous(className);
                     if (cls) {

package/src/AST/ObjectNode.ts

@@ -21,7 +21,7 @@ export class ObjectNode extends Node implements TreeNode {
         for (let i = 0; i < this.values.length; i++) {
             const key = this.keys[i];
             const val = this.values[i];
-            obj.set(await key.evaluate(scope, dom, tag), await val.evaluate(scope, dom, tag));
+            obj.set(await key.evaluate(scope, dom, tag), await val.evaluate(scope, dom, tag), true);
         }
         return obj;
     }

package/src/AST/ScopeMemberNode.ts

@@ -1,7 +1,7 @@
 import {Scope} from "../Scope";
 import {DOM} from "../DOM";
 import {Tag} from "../Tag";
-import {TagList} from "../Tag/List";
+import {TagList} from "../Tag/TagList";
 import {DOMObject} from "../DOM/DOMObject";
 import {TreeNode} from "../AST";
 import {Node} from "./Node";

package/src/Component.ts

@@ -1,5 +1,7 @@
 import {Registry} from "./Registry";
 import {DOM} from "./DOM";
+import {SlotTag} from "./Tag/SlotTag";
+import {SlottedTag} from "./Tag/SlottedTag";
 
 export class Component extends HTMLElement {
     protected readonly shadow: ShadowRoot;
@@ -21,14 +23,19 @@ export class Component extends HTMLElement {
         this.setAttribute('vsn-ref', '');
 
         this.shadow.appendChild(template.content.cloneNode(true));
-        this.shadow.querySelectorAll('slot').forEach(slot => {
+        this.shadow.querySelectorAll('slot').forEach((slot) => {
+            const slotTagPromise = DOM.instance.buildTag(slot,false, SlotTag);
             slot.addEventListener('slotchange', async (e) => {
                 for (const child of slot.assignedNodes()) {
-                    const t = await DOM.instance.getTagForElement(child as HTMLElement, true, true);
-                    t?.slotted(slot);
+                    const t = await DOM.instance.buildTag(child as HTMLElement, false, SlottedTag);
+                    await t?.slotted(slot);
                 }
+                slotTagPromise.then((slotTag) => {
+                    slotTag.buildAttributes();
+                });
             });
         });
+
         DOM.instance.buildFrom(this.shadow);
     }
 }

package/src/DOM/DOMObject.ts

@@ -31,6 +31,10 @@ export abstract class DOMObject extends EventDispatcher {
         return this.element instanceof HTMLSlotElement;
     }
 
+    public get isSlotted(): boolean {
+        return this.element.hasAttribute('slot');
+    }
+
     public get scope(): Scope {
         if (!!this._scope)
             return this._scope;

package/src/DOM.ts

@@ -2,13 +2,15 @@ import {Tag} from "./Tag";
 import {ElementHelper} from "./helpers/ElementHelper";
 import {Configuration} from "./Configuration";
 import {Tree} from "./AST";
-import {TagList} from "./Tag/List";
+import {TagList} from "./Tag/TagList";
 import {WrappedWindow} from "./DOM/WrappedWindow";
 import {WrappedDocument} from "./DOM/WrappedDocument";
 import {Scope} from "./Scope";
 import {EventDispatcher} from "./EventDispatcher";
 import {ClassNode} from "./AST/ClassNode";
 import {Registry} from "./Registry";
+import {SlotTag} from "./Tag/SlotTag";
+import {SlottedTag} from "./Tag/SlottedTag";
 
 export enum EQuerySelectDirection {
     ALL,
@@ -27,7 +29,6 @@ export class DOM extends EventDispatcher {
     protected window: WrappedWindow;
     protected document: WrappedDocument;
     protected _built: boolean = false;
-    public selected: Tag;
 
     constructor(
         protected rootElement: Document,
@@ -192,6 +193,10 @@ export class DOM extends EventDispatcher {
     async discover(ele: HTMLElement, forComponent: boolean = false): Promise<HTMLElement[]> {
         const discovered: HTMLElement[] = [];
         const checkElement = (e: HTMLElement): boolean => {
+            if (Registry.instance.components.has(e?.tagName?.toLowerCase())) {
+                return false;
+            }
+
             if (ElementHelper.hasVisionAttribute(e)) {
                 if (
                     (!forComponent && e.hasAttribute('slot'))
@@ -216,9 +221,14 @@ export class DOM extends EventDispatcher {
         return discovered;
     }
 
-    async buildTag(element: HTMLElement, returnExisting: boolean = false): Promise<Tag> {
+    async buildTag(element: HTMLElement, returnExisting: boolean = false, cls: any = Tag): Promise<Tag> {
         if (element[Tag.TaggedVariable]) return returnExisting ? element[Tag.TaggedVariable] : null;
-        const tag: Tag = new Tag(element, this);
+        if (element.tagName.toLowerCase() === 'slot')
+            cls = SlotTag;
+        else if (element.hasAttribute('slot'))
+            cls = SlottedTag;
+
+        const tag: Tag = new cls(element, this);
         this.tags.push(tag);
         return tag;
     }
@@ -261,6 +271,20 @@ export class DOM extends EventDispatcher {
             document.ondragover = (e) => e.cancelable && e.preventDefault();  // Allow dragging over document
         }
 
+        // Setup components first
+        const templateNodes = this.querySelectorElement(ele, 'template');
+        const components: Tag[] = [];
+        for (const n of Array.from(templateNodes) as HTMLElement[]) {
+            if (!ElementHelper.hasVisionAttribute(n))
+                continue;
+
+            const tag = await this.buildTag(n);
+            if (tag)
+                components.push(tag);
+        }
+        if (components.length)
+            await this.setupTags(components);
+
         // Create tags for each html element with a vsn-attribute
         const newTags: Tag[] = [];
         const toBuild: HTMLElement[] = await this.discover(ele, forComponent);
@@ -270,7 +294,6 @@ export class DOM extends EventDispatcher {
             if (tag)
                 newTags.push(tag);
         }
-
         if (isRoot)
             this._root = await this.getTagForElement(document.body);
 

package/src/Formats.ts

@@ -20,7 +20,10 @@ export class Formats {
             setup();
         }
         value = `${value}`.replace(/[^0-9.]+/, '');
-        return Formats.CurrencyFormatter.format(parseFloat(value));
+        value = parseFloat(value);
+        if (isNaN(value))
+            return '';
+        return Formats.CurrencyFormatter.format(value);
     }
 
     @Registry.format('date')

package/src/Query.ts

@@ -1,4 +1,4 @@
-import {TagList} from "./Tag/List";
+import {TagList} from "./Tag/TagList";
 import {VisionHelper} from "./helpers/VisionHelper";
 import {DOM} from "./DOM";
 import {WrappedWindow} from "./DOM/WrappedWindow";

package/src/Scope.ts

@@ -94,7 +94,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,5 @@
+import {Tag} from "../Tag";
+
+export class SlottedTag extends Tag {
+
+}

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,23 @@ 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) {
+    public get meta() {
+        if (!this._meta)
+            this._meta = {};
+        return this._meta;
+    }
+
+    public async slotted(slot: HTMLSlotElement) {
         this.slot = slot;
-        console.log('i am slotted', slot);
+        this.parentTag = await this.dom.getTagForElement(slot);
+        await this.dom.setupTags([this]);
+        await this.dom.buildFrom(this.element, false, true);
     }
 
     protected onAttributeStateChange(event) {
@@ -432,7 +438,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 +450,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, 'mobile') && !isMobile)
+                    continue;
 
-                if (this.hasModifier(attr, 'desktop')) {
-                    if (isMobile) {
-                        continue;
-                    }
-                }
+
+                if (this.hasModifier(attr, 'desktop') && isMobile)
+                    continue;
 
                 const attrClass = await this.getAttributeClass(attr);
                 if (attrClass) {
@@ -463,7 +466,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);
@@ -489,7 +494,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

@@ -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;
 
@@ -51,7 +53,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);
@@ -145,36 +147,59 @@ 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.setupTag(tag, obj);
+        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);
+
+        // 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 setupTag(tag: Tag, obj: any) {
+    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)))
-            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/ListItem.ts

@@ -20,7 +20,7 @@ export class ListItem extends Attribute {
             throw Error(ListItem.ERROR_NO_PARENT);
 
         const listAttr = await this.getListAttribute();
-        await listAttr.setupTag(this.tag, {});
+        await listAttr.setupTagScope(this.tag, {});
         await super.setup();
     }
 

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.96';
+export const VERSION = '0.1.99';
 

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();
         });
     });
@@ -107,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'));

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