vsn 0.1.75 → 0.1.78

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

package/src/AST/ClassNode.ts

@@ -66,7 +66,10 @@ export class ClassNode extends Node implements TreeNode {
             Registry.class(this);
 
             if (root) {
-                await this.findClassElements(dom);
+                if (dom.built)
+                    await this.findClassElements(dom);
+                else
+                    dom.once('builtRoot', () => this.findClassElements(dom));
             }
         } else {
             await this.block.prepare(this.classScope, dom, tag, meta);
@@ -84,14 +87,14 @@ export class ClassNode extends Node implements TreeNode {
         }
     }
 
-    public async constructTag(tag: Tag, dom: DOM, hasConstructor: boolean | null = null) {
-        if (hasConstructor === null)
-            hasConstructor = this.classScope.has('construct');
+    public async constructTag(tag: Tag, dom: DOM, hasConstruct: boolean | null = null) {
+        if (hasConstruct === null)
+            hasConstruct = this.classScope.has('construct');
 
         tag.createScope(true);
         const meta = this.updateMeta();
         await this.block.prepare(tag.scope, dom, tag, meta);
-        if (hasConstructor) {
+        if (hasConstruct) {
             const fncCls: FunctionNode = this.classScope.get('construct') as FunctionNode;
             const fnc = await fncCls.getFunction(tag.scope, dom, tag, false);
             await fnc();
@@ -101,11 +104,11 @@ export class ClassNode extends Node implements TreeNode {
         ClassNode.addPreparedClassToElement(tag.element, this.fullSelector);
     }
 
-    public async deconstructTag(tag: Tag, dom: DOM, hasDeconstructor: boolean | null = null) {
-        if (hasDeconstructor === null)
-            hasDeconstructor = this.classScope.has('deconstruct');
+    public async deconstructTag(tag: Tag, dom: DOM, hasDeconstruct: boolean | null = null) {
+        if (hasDeconstruct === null)
+            hasDeconstruct = this.classScope.has('deconstruct');
 
-        if (hasDeconstructor) {
+        if (hasDeconstruct) {
             const fncCls: FunctionNode = this.classScope.get('deconstruct') as FunctionNode;
             const fnc = await fncCls.getFunction(tag.scope, dom, tag, false);
             await fnc();

package/src/Attribute.ts

@@ -19,13 +19,18 @@ export abstract class Attribute extends EventDispatcher {
 
     constructor(
         public readonly tag: Tag,
-        public readonly attributeName: string
+        public readonly attributeName: string,
+        public readonly slot?: Tag
     ) {
         super();
         this.configure();
         if (VisionHelper.window) VisionHelper.window['Attributes'].push(this);
     }
 
+    public get origin(): Tag {
+        return this.slot || this.tag;
+    }
+
     public get state(): AttributeState {
         return this._state;
     }
@@ -54,15 +59,15 @@ export abstract class Attribute extends EventDispatcher {
     };
 
     public getAttributeValue(fallback: any = null) {
-        return this.tag.getRawAttributeValue(this.attributeName, fallback);
+        return this.origin.getRawAttributeValue(this.attributeName, fallback);
     }
 
     public getAttributeBinding(fallback: any = null): string {
-        return this.tag.getAttributeBinding(this.attributeName) || fallback;
+        return this.origin.getAttributeBinding(this.attributeName) || fallback;
     }
 
     public getAttributeModifiers(fallback: any = []): string[] {
-        const modifiers = this.tag.getAttributeModifiers(this.attributeName);
+        const modifiers = this.origin.getAttributeModifiers(this.attributeName);
         return modifiers.length && modifiers || fallback;
     }
 
@@ -73,11 +78,17 @@ export abstract class Attribute extends EventDispatcher {
     public mutate(mutation: MutationRecord): void {}
 
     public set value(value: string) {
-        this.tag.element.setAttribute(this.attributeName, value);
+        this.origin.element.setAttribute(this.attributeName, value);
     }
 
     public get value(): string {
-        return this.tag.element.getAttribute(this.attributeName) || '';
+        return this.origin.element.getAttribute(this.attributeName) || '';
+    }
+
+    public async apply(fnc: Function) {
+        for (const element of this.origin.delegates) {
+            await fnc(element);
+        }
     }
 
     private setState(state: AttributeState) {
@@ -90,7 +101,7 @@ export abstract class Attribute extends EventDispatcher {
         });
     }
 
-    public static create(tag: Tag, attributeName: string, cls: any): Attribute {
-        return new cls(tag, attributeName);
+    public static create(tag: Tag, attributeName: string, cls: any, slot?: Tag): Attribute {
+        return new cls(tag, attributeName, slot);
     }
 }

package/src/Component.ts

@@ -0,0 +1,24 @@
+import {Registry} from "./Registry";
+import {DOM} from "./DOM";
+
+export class Component extends HTMLElement {
+    protected readonly shadow: ShadowRoot;
+
+    constructor() {
+        super();
+        Object.setPrototypeOf(this, Component.prototype);
+
+        this.shadow = this.attachShadow({mode: 'open'});
+        const templateId = this.getAttribute('template');
+        let template: HTMLTemplateElement;
+
+        if (templateId) {
+            template = document.getElementById(templateId) as HTMLTemplateElement;
+        } else {
+            template = Registry.instance.templates.getSynchronous(this.tagName.toLowerCase());
+        }
+
+        this.shadow.appendChild(template.content.cloneNode(true));
+        DOM.instance.buildFrom(this.shadow);
+    }
+}

package/src/DOM/DOMObject.ts

@@ -11,12 +11,23 @@ export abstract class DOMObject extends EventDispatcher {
     protected _scope: Scope;
     protected onEventHandlers: {[key:string]: IEventHandler[]};
     protected _uniqueScope: boolean = false;
+    protected slot: HTMLSlotElement;
+    public readonly delegates: HTMLElement[] = [];
 
     constructor(
         public readonly element: HTMLElement,
         props
     ) {
         super();
+        if (this.isSlot) {
+            this.delegates.push(...(element as HTMLSlotElement).assignedNodes() as HTMLElement[]);
+        }
+        if (element.assignedSlot)
+            this.slot = element.assignedSlot;
+    }
+
+    public get isSlot(): boolean {
+        return this.element instanceof HTMLSlotElement;
     }
 
     public get scope(): Scope {

package/src/DOM.ts

@@ -8,6 +8,7 @@ import {WrappedDocument} from "./DOM/WrappedDocument";
 import {Scope} from "./Scope";
 import {EventDispatcher} from "./EventDispatcher";
 import {ClassNode} from "./AST/ClassNode";
+import {Registry} from "./Registry";
 
 export enum EQuerySelectDirection {
     ALL,
@@ -25,6 +26,7 @@ export class DOM extends EventDispatcher {
     protected queued: HTMLElement[] = [];
     protected window: WrappedWindow;
     protected document: WrappedDocument;
+    protected _built: boolean = false;
     public selected: Tag;
 
     constructor(
@@ -52,12 +54,16 @@ export class DOM extends EventDispatcher {
         Configuration.instance.on('change', this.evaluate.bind(this));
     }
 
+    public get built(): boolean {
+        return this._built;
+    }
+
     public get root(): Tag {
         return this._root;
     }
 
     public get ready(): Promise<boolean> {
-        return
+        return this.promise('builtRoot');
     }
 
     public async get(selector: string, create: boolean = false, tag: Tag = null, direction: EQuerySelectDirection = EQuerySelectDirection.DOWN): Promise<TagList> {
@@ -235,17 +241,21 @@ export class DOM extends EventDispatcher {
             await ClassNode.checkForClassChanges(tag.element, this, tag);
         }
 
-        this.dispatch('built');
+        if (isRoot) {
+            this._built = true;
+            this.dispatch('builtRoot')
+        }
+        this.dispatch('built', newTags);
     }
 
     async getTagsForElements(elements: Element[], create: boolean = false) {
         const tags: TagList = new TagList();
         const found: Element[] = [];
-        for (const tag of this.tags)
-        {
-            if (!found.includes(tag.element) && elements.indexOf(tag.element) > -1) {
-                tags.push(tag);
-                found.push(tag.element);
+
+        for (const element of elements) {
+            if (element[Tag.TaggedVariable]) {
+                tags.push(element[Tag.TaggedVariable]);
+                found.push(element);
             }
         }
 
@@ -267,10 +277,8 @@ export class DOM extends EventDispatcher {
     }
 
     async getTagForElement(element: Element, create: boolean = false) {
-        for (const tag of this.tags) {
-            if (tag.element === element)
-                return tag;
-        }
+        if (element[Tag.TaggedVariable])
+            return element[Tag.TaggedVariable];
 
         if (element && create) {
             if (element instanceof HTMLElement)

package/src/Registry.ts

@@ -13,9 +13,9 @@ export function register(store: string, key: string = null, setup: () => void =
     }
 }
 
-export class RegistryStore extends EventDispatcher {
+export class RegistryStore<T = any> extends EventDispatcher {
     private timeouts = {};
-    private readonly store: {[key: string]: any};
+    private readonly store: {[key: string]: T};
 
     constructor(defaults = null) {
         super();
@@ -62,6 +62,7 @@ export class RegistryStore extends EventDispatcher {
 
 export class Registry extends EventDispatcher {
     protected static _instance: Registry;
+    public readonly components: RegistryStore;
     public readonly functions: RegistryStore;
     public readonly controllers: RegistryStore;
     public readonly classes: RegistryStore;
@@ -74,17 +75,22 @@ export class Registry extends EventDispatcher {
 
     constructor() {
         super();
+        this.components = new RegistryStore();
         this.functions = new RegistryStore();
         this.controllers = new RegistryStore();
         this.classes = new RegistryStore();
         this.models = new RegistryStore();
-        this.templates = new RegistryStore();
+        this.templates = new RegistryStore<HTMLTemplateElement>();
         this.types = new RegistryStore();
         this.validators = new RegistryStore();
         this.formats = new RegistryStore();
         this.attributes = new RegistryStore();
     }
 
+    public static component(key: string = null, setup = null) {
+        return register('components', key, setup);
+    }
+
     public static function(key: string = null, setup = null) {
         return register('functions', key, setup);
     }

package/src/Tag.ts

@@ -6,7 +6,6 @@ import {VisionHelper} from "./helpers/VisionHelper";
 import {StandardAttribute} from "./attributes/StandardAttribute";
 import {On} from "./attributes/On";
 import {Registry} from "./Registry";
-import {benchmarkEnd, benchmarkStart} from "./Bencmark";
 import {DOMObject} from "./DOM/DOMObject";
 import {Tree} from "./AST";
 import {StyleAttribute} from "./attributes/StyleAttribute";
@@ -73,10 +72,14 @@ export class Tag extends DOMObject {
     }
 
     protected onAttributeStateChange(event) {
-        if (event.previouseState === AttributeState.Deferred)
+        if (event.previouseState === AttributeState.Deferred)  // @todo: what is this?
             this._nonDeferredAttributes.length = 0;
     }
 
+    public getAttributesWithState(state: AttributeState): Attribute[] {
+        return this.attributes.filter(attr => attr.state === state);
+    }
+
     public get nonDeferredAttributes(): Attribute[] {
         if (this._nonDeferredAttributes.length > 0)
             return this._nonDeferredAttributes;
@@ -408,6 +411,14 @@ export class Tag extends DOMObject {
         return this.parsedAttributes[key] && this.parsedAttributes[key][index] || fallback;
     }
 
+    public async getTagsToBuild() {
+        if (this.isSlot) {
+            return await DOM.instance.getTagsForElements(this.delegates, true);
+        } else {
+            return [this];
+        }
+    }
+
     public async buildAttributes() {
         let requiresScope = false;
         let defer: boolean = false;
@@ -420,81 +431,93 @@ export class Tag extends DOMObject {
             defer = true;
         }
 
-        for (let attr in this.rawAttributes) {
-            if (this.hasModifier(attr, 'mobile')) {
-                if (!isMobile) {
-                    continue;
+        const tags: Tag[] = await this.getTagsToBuild() as Tag[];
+        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 (this.hasModifier(attr, 'desktop')) {
-                if (isMobile) {
-                    continue;
+                if (this.hasModifier(attr, 'desktop')) {
+                    if (isMobile) {
+                        continue;
+                    }
                 }
-            }
 
-            const attrClass = await this.getAttributeClass(attr);
-            if (attrClass) {
-                if (attrClass.scoped)
-                    requiresScope = true;
-                const attrObj = attrClass.create(this, attr, attrClass);
-                this.attributes.push(attrObj);
-
-                if (defer && attrClass.canDefer) {
-                    await attrObj.defer();
-                    this.deferredAttributes.push(attrObj);
-                    attrObj.on('state', this.onAttributeStateChange.bind(this));
+                const attrClass = await this.getAttributeClass(attr);
+                if (attrClass) {
+                    if (attrClass.scoped)
+                        requiresScope = true;
+
+                    const attrObj = attrClass.create(tag, attr, attrClass, slot);
+                    tag.attributes.push(attrObj);
+                    if (defer && attrClass.canDefer) {
+                        await attrObj.defer();
+                        tag.deferredAttributes.push(attrObj);
+                        attrObj.on('state', tag.onAttributeStateChange, tag);
+                    }
                 }
             }
-        }
 
-        if (this.element.getAttribute('id'))
-            requiresScope = true;
+            if (tag.element.getAttribute('id'))
+                requiresScope = true;
 
-        if (requiresScope && !this.uniqueScope) {
-            this._uniqueScope = true;
-        }
+            if (requiresScope && !tag.uniqueScope) {
+                tag._uniqueScope = true;
+            }
 
+        }
         this._state = TagState.AttributesBuilt;
     }
 
     public async compileAttributes() {
-        for (const attr of this.nonDeferredAttributes) {
-            await attr.compile();
-        }
+        const tags: Tag[] = await this.getTagsToBuild() as Tag[];
+        for (const tag of tags) {
+            for (const attr of tag.getAttributesWithState(AttributeState.Instantiated)) {
+                await attr.compile();
+            }
 
+        }
         this._state = TagState.AttributesCompiled;
     }
 
     public async setupAttributes() {
-        if (VisionHelper.doBenchmark) benchmarkStart('Tag.setupAttributes');
-        for (const attr of this.nonDeferredAttributes) {
-            await attr.setup();
+        const tags: Tag[] = await this.getTagsToBuild() as Tag[];
+        for (const tag of tags) {
+            for (const attr of tag.getAttributesWithState(AttributeState.Compiled)) {
+                await attr.setup();
+            }
         }
-        if (VisionHelper.doBenchmark) benchmarkEnd('Tag.setupAttributes', 'Attribute.setup');
-        this.dom.registerElementInRoot(this);
-        if (VisionHelper.doBenchmark) benchmarkEnd('Tag.setupAttributes', 'register');
-
+        if (!this.isSlot)
+            this.dom.registerElementInRoot(this);
         this._state = TagState.AttributesSetup;
         this.callOnWrapped('$setup');
-        if (VisionHelper.doBenchmark) benchmarkEnd('Tag.setupAttributes', '$setup');
     }
 
     public async extractAttributes() {
-        for (const attr of this.nonDeferredAttributes) {
-            await attr.extract();
+        const tags: Tag[] = await this.getTagsToBuild() as Tag[];
+        for (const tag of tags) {
+            for (const attr of tag.getAttributesWithState(AttributeState.Setup)) {
+                await attr.extract();
+            }
         }
         this._state = TagState.AttributesExtracted;
         this.callOnWrapped('$extracted');
     }
 
     public async connectAttributes() {
-        if (this.isInput) {
-            this.addEventHandler('input', [], this.inputMutation, this);
-        }
+        const tags: Tag[] = await this.getTagsToBuild() as Tag[];
+        for (const tag of tags) {
+            if (tag.isInput) {
+                tag.addEventHandler('input', [], tag.inputMutation, tag);
+            }
 
-        for (const attr of this.nonDeferredAttributes) {
-            await attr.connect();
+            for (const attr of tag.getAttributesWithState(AttributeState.Extracted)) {
+                await attr.connect();
+            }
         }
         this._state = TagState.AttributesConnected;
         this.callOnWrapped('$bound');
@@ -514,16 +537,13 @@ export class Tag extends DOMObject {
                     option.removeAttribute('selected');
                 }
             }
-            //this.element.setAttribute('value', );
             this.value = values.join(',');
         } else {
-            //this.element.setAttribute('value', e.target.value);
-            //(this.element as any).value = e.target.value;
             this.value = e.target.value;
         }
     }
 
-    public finalize(): void {
+    public async finalize() {
         this._state = TagState.Built;
         this.callOnWrapped('$built', this, this.scope, this.element);
         VisionHelper.nice(this.setupDeferredAttributes.bind(this));

package/src/attributes/ComponentAttribute.ts

@@ -0,0 +1,24 @@
+import {Registry} from "../Registry";
+import {TemplateAttribute} from "./TemplateAttribute";
+import {Component} from "../Component";
+
+@Registry.attribute('vsn-component')
+export class ComponentAttribute extends TemplateAttribute {
+    public static readonly scoped: boolean = true;
+
+    public async extract() {
+        const name = this.getAttributeBinding();
+        if (!Registry.instance.components.has(name)) {
+            await super.extract();
+            const clsName = this.getAttributeValue();
+            let cls = Component;
+            if (clsName) {
+                cls = await Registry.instance.components.get(clsName);
+                if (!cls) {
+                    throw new Error(`Component ${clsName} not found`);
+                }
+            }
+            Registry.instance.components.register(name, cls);
+        }
+    }
+}

package/src/attributes/ListItem.ts

@@ -34,10 +34,6 @@ export class ListItem extends Attribute {
         return await this._list.getAttribute<List>('vsn-list');
     }
 
-    protected async configure() {
-
-    }
-
     private instantiateModel(model: any) {
         this.tag.wrap(model, false, true);
     }

package/src/attributes/RootAttribute.ts

@@ -9,7 +9,6 @@ export class RootAttribute extends Attribute {
 
     public async setup() {
         this.tag.scope.set('$mobile', VisionHelper.isMobile());
-
         for (const key of Registry.instance.functions.keys) {
             const fn = Registry.instance.functions.get(key);
             this.tag.scope.set(key, fn);

package/src/attributes/TemplateAttribute.ts

@@ -0,0 +1,12 @@
+import {Registry} from "../Registry";
+import {Attribute} from "../Attribute";
+
+@Registry.attribute('vsn-template')
+export class TemplateAttribute extends Attribute {
+    public static readonly canDefer: boolean = false;
+
+    public async extract() {
+        Registry.instance.templates.register(this.getAttributeBinding(), this.tag.element);
+        await super.extract();
+    }
+}

package/src/attributes/_imports.ts

@@ -1,5 +1,6 @@
 export {AddClassIf} from "./AddClassIf";
 export {Bind} from "./Bind";
+export {ComponentAttribute} from './ComponentAttribute';
 export {ControllerAttribute} from "./ControllerAttribute";
 export {DisableIf} from "./DisableIf";
 export {Exec} from "./Exec";
@@ -23,5 +24,5 @@ export {ScriptAttribute} from "./ScriptAttribute";
 export {SetAttribute} from "./SetAttribute";
 export {StandardAttribute} from "./StandardAttribute";
 export {StyleAttribute} from "./StyleAttribute";
-export {Template} from "./Template";
+export {TemplateAttribute} from "./TemplateAttribute";
 export {TypeAttribute} from "./TypeAttribute";

package/src/custom-elements.ts

@@ -0,0 +1,46 @@
+/**
+ * @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
+ */
+
+/**
+ * This shim allows elements written in, or compiled to, ES5 to work on native
+ * implementations of Custom Elements v1. It sets new.target to the value of
+ * this.constructor so that the native HTMLElement constructor can access the
+ * current under-construction element's definition.
+ */
+(function() {
+  if (
+    // No Reflect, no classes, no need for shim because native custom elements
+    // require ES2015 classes or Reflect.
+    window.Reflect === undefined ||
+    window.customElements === undefined ||
+    // The webcomponentsjs custom elements polyfill doesn't require
+    // ES2015-compatible construction (`super()` or `Reflect.construct`).
+    window.customElements['polyfillWrapFlushCallback']
+  ) {
+    return;
+  }
+  const BuiltInHTMLElement = HTMLElement;
+  /**
+   * With jscompiler's RECOMMENDED_FLAGS the function name will be optimized away.
+   * However, if we declare the function as a property on an object literal, and
+   * use quotes for the property name, then closure will leave that much intact,
+   * which is enough for the JS VM to correctly set Function.prototype.name.
+   */
+  const wrapperForTheName = {
+    'HTMLElement': /** @this {!Object} */ function HTMLElement() {
+      return Reflect.construct(
+          BuiltInHTMLElement, [], /** @type {!Function} */ (this.constructor));
+    }
+  };
+  window.HTMLElement = wrapperForTheName['HTMLElement'] as any;
+  HTMLElement.prototype = BuiltInHTMLElement.prototype;
+  HTMLElement.prototype.constructor = HTMLElement;
+  Object.setPrototypeOf(HTMLElement, BuiltInHTMLElement);
+})();

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = '0.1.75';
+export const VERSION = '0.1.78';

package/src/vsn.ts

@@ -9,6 +9,7 @@ import {EventDispatcher} from "./EventDispatcher";
 import {DynamicScopeData} from "./Scope/DynamicScopeData";
 import {Controller} from "./Controller";
 import {VERSION} from "./version";
+import './custom-elements';
 
 export class Vision extends EventDispatcher {
     protected static _instance: Vision;
@@ -18,6 +19,7 @@ export class Vision extends EventDispatcher {
 
     constructor() {
         super();
+        Registry.instance.components.on('register', this.defineComponent, this);
         if (VisionHelper.document) {
             document.addEventListener(
                 "DOMContentLoaded",
@@ -44,6 +46,10 @@ export class Vision extends EventDispatcher {
         }
     }
 
+    protected defineComponent(name, cls) {
+        customElements.define(name, cls);
+    }
+
     public get dom(): DOM {
         return this._dom;
     }

package/dist/attributes/Template.d.ts

@@ -1,4 +0,0 @@
-import { Attribute } from "../Attribute";
-export declare class Template extends Attribute {
-    static readonly canDefer: boolean;
-}