vsn 0.1.76 → 0.1.77

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/On.ts

@@ -20,6 +20,7 @@ export abstract class On extends Attribute {
 
     public async compile() {
         const code: string = this.getAttributeValue();
+        console.log(`Compiling ${this.getAttributeBinding()} with ${code}`);
         this.handler = new Tree(code);
         await this.handler.prepare(this.tag.scope, this.tag.dom, this.tag);
         await super.compile();

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/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;
-}

package/dist/attributes/Template.js

@@ -1,39 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Template = void 0;
-var Registry_1 = require("../Registry");
-var Attribute_1 = require("../Attribute");
-var Template = /** @class */ (function (_super) {
-    __extends(Template, _super);
-    function Template() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Template.canDefer = false;
-    Template = __decorate([
-        Registry_1.Registry.attribute('vsn-template')
-    ], Template);
-    return Template;
-}(Attribute_1.Attribute));
-exports.Template = Template;
-//# sourceMappingURL=Template.js.map

package/dist/attributes/Template.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Template.js","sourceRoot":"","sources":["../../src/attributes/Template.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,wCAAqC;AACrC,0CAAuC;AAGvC;IAA8B,4BAAS;IAAvC;;IAEA,CAAC;IAD0B,iBAAQ,GAAY,KAAK,CAAC;IADxC,QAAQ;QADpB,mBAAQ,CAAC,SAAS,CAAC,cAAc,CAAC;OACtB,QAAQ,CAEpB;IAAD,eAAC;CAAA,AAFD,CAA8B,qBAAS,GAEtC;AAFY,4BAAQ"}

package/src/attributes/Template.ts

@@ -1,7 +0,0 @@
-import {Registry} from "../Registry";
-import {Attribute} from "../Attribute";
-
-@Registry.attribute('vsn-template')
-export class Template extends Attribute {
-    public static readonly canDefer: boolean = false;
-}