vsn 0.1.86 → 0.1.89

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

package/src/AST/ClassNode.ts

@@ -73,8 +73,8 @@ export class ClassNode extends Node implements TreeNode {
                 else
                     dom.once('builtRoot', () => this.findClassElements(dom));
             }
-        } else {
-            await this.block.prepare(this.classScope, dom, tag, meta);
+        } else if (meta['PrepForSelector'] === this.fullSelector) { // Only prepare top level class if we're prepping for tag
+            await this.block.prepare(tag.scope, dom, tag, meta);
         }
     }
 
@@ -83,6 +83,7 @@ export class ClassNode extends Node implements TreeNode {
         for (const element of Array.from(dom.querySelectorAll(this.selector, tag))) {
             tags.push(await ClassNode.addElementClass(this._fullSelector, element as HTMLElement, dom, element[Tag.TaggedVariable] || null));
         }
+
         for (const childSelector of ClassNode.classChildren[this._fullSelector]) {
             const node =  ClassNode.classes[`${this._fullSelector} ${childSelector}`];
             if (!node) continue;
@@ -98,6 +99,7 @@ export class ClassNode extends Node implements TreeNode {
 
         tag.createScope(true);
         const meta = this.updateMeta();
+        meta['PrepForSelector'] = this.fullSelector;
         await this.block.prepare(tag.scope, dom, tag, meta);
         if (hasConstruct) {
             const fncCls: FunctionNode = this.classScope.get('construct') as FunctionNode;
@@ -140,7 +142,9 @@ export class ClassNode extends Node implements TreeNode {
             if (t.type === TokenType.L_BRACE) break;
             nameParts.push(t.value);
         }
-        const selector = nameParts.join('').trim();
+        let selector = nameParts.join('').trim();
+        if (selector.startsWith('>'))
+            selector = `:scope ${selector}`;
         tokens.splice(0, nameParts.length);
         const block = Tree.processTokens(Tree.getNextStatementTokens(tokens, true, true));
         return new ClassNode(selector, block);

package/src/Attribute.ts

@@ -24,7 +24,6 @@ export abstract class Attribute extends EventDispatcher {
     ) {
         super();
         this.configure();
-        if (VisionHelper.window) VisionHelper.window['Attributes'].push(this);
     }
 
     public get origin(): Tag {

package/src/Component.ts

@@ -21,6 +21,14 @@ export class Component extends HTMLElement {
         this.setAttribute('vsn-ref', '');
 
         this.shadow.appendChild(template.content.cloneNode(true));
+        this.shadow.querySelectorAll('slot').forEach(slot => {
+            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);
+                }
+            });
+        });
         DOM.instance.buildFrom(this.shadow);
     }
 }

package/src/DOM/DOMObject.ts

@@ -22,8 +22,9 @@ export abstract class DOMObject extends EventDispatcher {
         if (this.isSlot) {
             this.delegates.push(...(element as HTMLSlotElement).assignedNodes() as HTMLElement[]);
         }
-        if (element.assignedSlot)
+        if (element.assignedSlot) {
             this.slot = element.assignedSlot;
+        }
     }
 
     public get isSlot(): boolean {

package/src/DOM.ts

@@ -189,42 +189,43 @@ export class DOM extends EventDispatcher {
         }
     }
 
-    async buildFrom(ele: any, isRoot: boolean = false) {
-        // Assign parents to each tag
-        const allElements: HTMLElement[] = [];
-
+    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
         }
 
-        for (const tag of this.tags)
-            allElements.push(tag.element);
-
         // Create tags for each html element with a v-attribute
         const newTags: Tag[] = [];
         const toBuild: HTMLElement[] = [];
-        const toSkip: HTMLElement[] = [];
-
-        if (ele && ele.querySelectorAll) {
-            for (const element of (Array.from(ele.querySelectorAll(`*`)) as HTMLElement[])) { // Don't build items more than once
-                if (!ElementHelper.hasVisionAttribute(element)) continue;
-                if ((element.hasAttribute('vsn-template') && element.tagName === 'template') || toSkip.indexOf(element.parentElement) > -1) {
-                    toSkip.push(element);
-                    continue;
-                }
-                if (this.queued.indexOf(element) > -1) continue;
-                this.queued.push(element);
-                toBuild.push(element);
+
+        const checkElement = (e: HTMLElement): boolean => {
+            if (ElementHelper.hasVisionAttribute(e)) {
+                if (
+                    (!forComponent && e.hasAttribute('slot'))
+                ) return false;
+                if (this.queued.indexOf(e) > -1) return false;
+                this.queued.push(e);
+                toBuild.push(e);
+            }
+
+            return true;
+        }
+        const scanChildren = (e: HTMLElement) => {
+            for (const element of Array.from(e.children) as HTMLElement[]) {
+                if (!checkElement(element)) continue;
+                if (element.tagName.toLowerCase() !== 'template')
+                    scanChildren(element);
             }
         }
+        checkElement(ele);
+        scanChildren(ele);
 
         for (const element of toBuild) {
-            if (allElements.indexOf(element) > -1) continue;
+            if (element[Tag.TaggedVariable]) continue;
             const tag: Tag = new Tag(element, this);
             this.tags.push(tag);
             newTags.push(tag);
-            allElements.push(element as HTMLElement);
         }
 
         if (isRoot)
@@ -295,14 +296,14 @@ export class DOM extends EventDispatcher {
         return tags;
     }
 
-    async getTagForElement(element: Element, create: boolean = false) {
+    async getTagForElement(element: Element, create: boolean = false, forComponent: boolean = false) {
         if (element[Tag.TaggedVariable])
             return element[Tag.TaggedVariable];
 
         if (element && create) {
             if (element instanceof HTMLElement)
                 element.setAttribute('vsn-ref', '');
-            await this.buildFrom(element.parentElement || element);
+            await this.buildFrom(element.parentElement || element, false, forComponent);
             return await this.getTagForElement(element, false);
         }
 

package/src/Registry.ts

@@ -68,6 +68,7 @@ export class Registry extends EventDispatcher {
     public readonly classes: RegistryStore;
     public readonly models: RegistryStore;
     public readonly templates: RegistryStore;
+    public readonly services: RegistryStore;
     public readonly types: RegistryStore;
     public readonly validators: RegistryStore;
     public readonly formats: RegistryStore;
@@ -81,6 +82,7 @@ export class Registry extends EventDispatcher {
         this.classes = new RegistryStore();
         this.models = new RegistryStore();
         this.templates = new RegistryStore<HTMLTemplateElement>();
+        this.services = new RegistryStore();
         this.types = new RegistryStore();
         this.validators = new RegistryStore();
         this.formats = new RegistryStore();
@@ -111,6 +113,10 @@ export class Registry extends EventDispatcher {
         return register('templates', key, setup);
     }
 
+    public static service(key: string = null, setup = null) {
+        return register('services', key, setup);
+    }
+
     public static type(key: string = null, setup = null) {
         return register('types', key, setup);
     }

package/src/Service.ts

@@ -0,0 +1,24 @@
+import {ScopeData} from "./Scope/ScopeData";
+import {Scope} from "./Scope";
+
+export class Service extends ScopeData {
+    protected static _instance: Service;
+    protected _scope: Scope;
+
+    constructor() {
+        super();
+        this._scope = new Scope();
+        this._scope.wrap(this);
+    }
+
+    public get scope(): Scope {
+        return this._scope;
+    }
+
+    public static get instance(): Service {
+        if (!this._instance) {
+            this._instance = new this();
+        }
+        return this._instance;
+    }
+}

package/src/Tag.ts

@@ -62,15 +62,18 @@ export class Tag extends DOMObject {
         this.onEventHandlers = {};
         this.analyzeElementAttributes();
         this._state = TagState.Instantiated;
-        if (VisionHelper.window) {
-            if (!VisionHelper.window['Tags']) {
-                VisionHelper.window['Tags'] = [];
-                VisionHelper.window['Attributes'] = [];
-            }
-            VisionHelper.window['Tags'].push(this);
+        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);
+    }
+
     protected onAttributeStateChange(event) {
         if (event.previouseState === AttributeState.Deferred)  // @todo: what is this?
             this._nonDeferredAttributes.length = 0;

package/src/attributes/ControllerAttribute.ts

@@ -6,6 +6,8 @@ import {Registry} from "../Registry";
 export class ControllerAttribute extends Attribute {
     public static readonly canDefer: boolean = false;
     public static readonly scoped: boolean = true;
+    public readonly registryName: string = 'controllers'
+    public readonly assignToParent: boolean = true;
     protected attributeKey: string;
     protected className: string;
     protected defaultClassName: string;
@@ -18,15 +20,21 @@ export class ControllerAttribute extends Attribute {
         this.attributeKey = this.getAttributeBinding();
         this.className = this.getAttributeValue(this.defaultClassName);
 
-        const cls = await Registry.instance.controllers.get(this.className);
-        this.instantiateClass(cls);
+        const cls = await Registry.instance[this.registryName].get(this.className);
+        const obj = this.instantiateClass(cls);
 
-        if (this.attributeKey && parentScope)
-            parentScope.set(this.attributeKey, this.tag.scope);
+        if (this.attributeKey && obj) {
+            if (this.assignToParent && parentScope) {
+                parentScope.set(this.attributeKey, obj);
+            } else {
+                this.tag.scope.set(this.attributeKey, obj);
+            }
+        }
         await super.setup();
     }
 
-    protected instantiateClass(cls) {
+    protected instantiateClass(cls): any {
         this.tag.wrap(cls);
+        return this.tag.scope;
     }
 }

package/src/attributes/JSONAttribute.ts

@@ -26,15 +26,15 @@ export class JSONAttribute extends Attribute {
         } else {
             json = unescape(this.getAttributeValue());
         }
-        const property = this.getAttributeBinding();
         const data = JSON.parse(json);
+
         if (data && typeof data === 'object' && data.constructor === Object) {
             const newScope = new Scope(scope);
             newScope.wrap(data);
             scope.set(key, newScope);
+        } else {
+            scope.set(key, data);
         }
-
-        scope.set(key, data);
         await super.extract();
     }
 }

package/src/attributes/ModelAttribute.ts

@@ -1,5 +1,8 @@
 import {ControllerAttribute} from "./ControllerAttribute";
+import {Registry} from "../Registry";
 
+@Registry.attribute('vsn-model')
 export class ModelAttribute extends ControllerAttribute {
     public static readonly canDefer: boolean = false;
+    public readonly registryName: string = 'models'
 }

package/src/attributes/ServiceAttribute.ts

@@ -0,0 +1,13 @@
+import {ControllerAttribute} from "./ControllerAttribute";
+import {Registry} from "../Registry";
+
+@Registry.attribute('vsn-service')
+export class ServiceAttribute extends ControllerAttribute {
+    public static readonly canDefer: boolean = false;
+    public readonly registryName: string = 'services'
+    public readonly assignToParent: boolean = false;
+
+    protected instantiateClass(cls): any {
+        return cls.instance.scope;
+    }
+}

package/src/attributes/_imports.ts

@@ -21,6 +21,7 @@ export {RootAttribute} from "./RootAttribute";
 export {ScopeAttribute} from "./ScopeAttribute";
 export {ScopeChange} from "./ScopeChange";
 export {ScriptAttribute} from "./ScriptAttribute";
+export {ServiceAttribute} from "./ServiceAttribute";
 export {SetAttribute} from "./SetAttribute";
 export {StandardAttribute} from "./StandardAttribute";
 export {StyleAttribute} from "./StyleAttribute";

package/src/version.ts

@@ -1,2 +1,2 @@
-export const VERSION = '0.1.86';
+export const VERSION = '0.1.89';
 

package/src/vsn.ts

@@ -91,6 +91,7 @@ export {ScopeReference} from './Scope/ScopeReference';
 export {WrappedArray} from './Scope/WrappedArray';
 export {Controller} from './Controller';
 export {Model} from './Model';
+export {Service} from './Service';
 export {EventDispatcher} from './EventDispatcher';
 export {MessageList} from './MessageList';
 export {SimplePromise} from './SimplePromise';

package/test/attributes/JSONAttribute.spec.ts

@@ -3,23 +3,23 @@ import {DOM} from "../../src/DOM";
 describe('JSONAttribute', () => {
     it("vsn-json should work with script/ld-json and an array", (done) => {
         document.body.innerHTML = `
-            <script type="application/ld+json" vsn-json:test>
+            <script type="application/ld+json" vsn-json:t0>
                 [1,2,3,"four"]
             </script>
         `;
         const dom = new DOM(document);
         dom.once('built', async () => {
-            expect(dom.root.scope.get('test')[0]).toBe(1);
-            expect(dom.root.scope.get('test')[1]).toBe(2);
-            expect(dom.root.scope.get('test')[2]).toBe(3);
-            expect(dom.root.scope.get('test')[3]).toBe("four");
+            expect(dom.root.scope.get('t0')[0]).toBe(1);
+            expect(dom.root.scope.get('t0')[1]).toBe(2);
+            expect(dom.root.scope.get('t0')[2]).toBe(3);
+            expect(dom.root.scope.get('t0')[3]).toBe("four");
             done();
         });
     });
 
     it("vsn-json should work with script/ld-json and an object", (done) => {
         document.body.innerHTML = `
-            <script type="application/ld+json" vsn-json:test>
+            <script type="application/ld+json" vsn-json:t1>
                 {
                     "testing": [1,2,3,"four"],
                     "test": ["one","two","three",4],
@@ -29,47 +29,49 @@ describe('JSONAttribute', () => {
         `;
         const dom = new DOM(document);
         dom.once('built', async () => {
-            expect(dom.root.scope.get('test').get("testing")[0]).toBe(1);
-            expect(dom.root.scope.get('test').get("testing")[1]).toBe(2);
-            expect(dom.root.scope.get('test').get("testing")[2]).toBe(3);
-            expect(dom.root.scope.get('test').get("testing")[3]).toBe("four");
-            expect(dom.root.scope.get('test').get("test")[0]).toBe("one");
-            expect(dom.root.scope.get('test').get("test")[1]).toBe("two");
-            expect(dom.root.scope.get('test').get("test")[2]).toBe("three");
-            expect(dom.root.scope.get('test').get("test")[3]).toBe(4);
-            expect(dom.root.scope.get('test').get("val")).toBe(111);
+            expect(dom.root.scope.get('t1').get("testing")[0]).toBe(1);
+            expect(dom.root.scope.get('t1').get("testing")[1]).toBe(2);
+            expect(dom.root.scope.get('t1').get("testing")[2]).toBe(3);
+            expect(dom.root.scope.get('t1').get("testing")[3]).toBe("four");
+            expect(dom.root.scope.get('t1').get("test")[0]).toBe("one");
+            expect(dom.root.scope.get('t1').get("test")[1]).toBe("two");
+            expect(dom.root.scope.get('t1').get("test")[2]).toBe("three");
+            expect(dom.root.scope.get('t1').get("test")[3]).toBe(4);
+            expect(dom.root.scope.get('t1').get("val")).toBe(111);
             done();
         });
     });
 
     it("vsn-json should work with div and an array", (done) => {
         document.body.innerHTML = `
-            <div vsn-json:test="[1,2,3,&quot;four&quot;]"></div>
+            <div vsn-json:t2="[1,2,3,&quot;four&quot;]"></div>
         `;
+
         const dom = new DOM(document);
         dom.once('built', async () => {
-            expect(dom.root.scope.get('test')[0]).toBe(1);
-            expect(dom.root.scope.get('test')[1]).toBe(2);
-            expect(dom.root.scope.get('test')[2]).toBe(3);
-            expect(dom.root.scope.get('test')[3]).toBe("four");
+            console.log('scope keys', dom.root.scope.keys);
+            expect(dom.root.scope.get('t2')[0]).toBe(1);
+            expect(dom.root.scope.get('t2')[1]).toBe(2);
+            expect(dom.root.scope.get('t2')[2]).toBe(3);
+            expect(dom.root.scope.get('t2')[3]).toBe("four");
             done();
         });
     });
 
     it("vsn-json should work with div and an object", (done) => {
         document.body.innerHTML = `
-            <div vsn-json:test="{&quot;testing&quot;: [1,2,3,&quot;four&quot;],&quot;test&quot;: [&quot;one&quot;,&quot;two&quot;,&quot;three&quot;,4]}"></div>
+            <div vsn-json:t3="{&quot;testing&quot;: [1,2,3,&quot;four&quot;],&quot;test&quot;: [&quot;one&quot;,&quot;two&quot;,&quot;three&quot;,4]}"></div>
         `;
         const dom = new DOM(document);
         dom.once('built', async () => {
-            expect(dom.root.scope.get('test').get("testing")[0]).toBe(1);
-            expect(dom.root.scope.get('test').get("testing")[1]).toBe(2);
-            expect(dom.root.scope.get('test').get("testing")[2]).toBe(3);
-            expect(dom.root.scope.get('test').get("testing")[3]).toBe("four");
-            expect(dom.root.scope.get('test').get("test")[0]).toBe("one");
-            expect(dom.root.scope.get('test').get("test")[1]).toBe("two");
-            expect(dom.root.scope.get('test').get("test")[2]).toBe("three");
-            expect(dom.root.scope.get('test').get("test")[3]).toBe(4);
+            expect(dom.root.scope.get('t3').get("testing")[0]).toBe(1);
+            expect(dom.root.scope.get('t3').get("testing")[1]).toBe(2);
+            expect(dom.root.scope.get('t3').get("testing")[2]).toBe(3);
+            expect(dom.root.scope.get('t3').get("testing")[3]).toBe("four");
+            expect(dom.root.scope.get('t3').get("test")[0]).toBe("one");
+            expect(dom.root.scope.get('t3').get("test")[1]).toBe("two");
+            expect(dom.root.scope.get('t3').get("test")[2]).toBe("three");
+            expect(dom.root.scope.get('t3').get("test")[3]).toBe(4);
             done();
         });
     });

package/test/attributes/ServiceAttribute.spec.ts

@@ -0,0 +1,34 @@
+import {DOM} from "../../src/DOM";
+import "../../src/Types";
+import "../../src/attributes/_imports";
+import {Registry} from "../../src/Registry";
+import {Service} from "../../src/Service";
+import {property} from "../../src/Scope/properties/Property";
+
+
+@Registry.service('TestService')
+class TestService extends Service {
+    @property()
+    public test: string;
+
+    constructor() {
+        super();
+    }
+
+}
+
+
+describe('ServiceAttribute', () => {
+    it("vsn-styles to just work", (done) => {
+        document.body.innerHTML = `
+            <div vsn-service:test1="TestService" id="test"></div>
+            <div vsn-service:test2="TestService" vsn-set:test2.test="testing"></div>
+        `;
+        const dom = new DOM(document);
+        dom.once('built', async () => {
+            expect(TestService.instance.test).toBe('testing');
+            expect(await dom.exec('#test.test1.test')).toBe('testing');
+            done();
+        });
+    });
+});