vsn 0.1.123 → 0.1.125

package/src/Attribute.ts

@@ -1,6 +1,7 @@
 import {Tag} from "./Tag";
 import {VisionHelper} from "./helpers/VisionHelper";
 import {EventDispatcher} from "./EventDispatcher";
+import {Modifiers} from "./Modifiers";
 
 export enum AttributeState {
     Instantiated,
@@ -14,6 +15,7 @@ export enum AttributeState {
 
 export abstract class Attribute extends EventDispatcher {
     protected _state: AttributeState;
+    public readonly modifiers: Modifiers;
     public static readonly scoped: boolean = false;
     public static readonly canDefer: boolean = true;
 
@@ -23,6 +25,7 @@ export abstract class Attribute extends EventDispatcher {
         public readonly slot?: Tag
     ) {
         super();
+        this.modifiers = Modifiers.fromAttribute(attributeName)
         this.configure();
     }
 
@@ -37,25 +40,30 @@ export abstract class Attribute extends EventDispatcher {
     protected async defer() {
         this.setState(AttributeState.Deferred);
     }
+
     protected async configure() {
         this.setState(AttributeState.Instantiated);
-    };
+    }
+
     public async compile() {
         this.setState(AttributeState.Compiled);
-    };
+    }
+
     public async setup() {
         this.setState(AttributeState.Setup);
-    };
+    }
 
     public async extract() {
         this.setState(AttributeState.Extracted);
-    };
+    }
+
     public async connect() {
         this.setState(AttributeState.Connected);
     }
+
     public async evaluate() {
         this.setState(AttributeState.Built);
-    };
+    }
 
     public getAttributeValue(fallback: any = null) {
         return this.origin.getRawAttributeValue(this.attributeName, fallback);
@@ -66,12 +74,15 @@ export abstract class Attribute extends EventDispatcher {
     }
 
     public getAttributeModifiers(fallback: any = []): string[] {
-        const modifiers = this.origin.getAttributeModifiers(this.attributeName);
-        return modifiers.length && modifiers || fallback;
+        return this.modifiers.length && this.modifiers.names || fallback;
+    }
+
+    public getAttributeModifierArguments(modifier: string, fallback: string[] = []): string[] {
+        return this.modifiers.has(modifier) ? this.modifiers.get(modifier).arguments : fallback;
     }
 
     public hasModifier(mod: string): boolean {
-        return this.getAttributeModifiers().indexOf(mod) > -1;
+        return this.modifiers.has(mod);
     }
 
     public mutate(mutation: MutationRecord): void {}

package/src/DOM/DOMObject.ts

@@ -1,10 +1,13 @@
 import {Scope} from "../Scope";
 import {EventDispatcher} from "../EventDispatcher";
+import {Modifiers} from "../Modifiers";
 
 export interface IEventHandler {
     event: string;
     handler: (...args: any[]) => any;
-    context?: any;
+    context: any;
+    state: { [key: string]: any };
+    modifiers: Modifiers;
 }
 
 export abstract class DOMObject extends EventDispatcher {

package/src/Modifiers.ts

@@ -0,0 +1,54 @@
+
+export class Modifier {
+    public readonly name: string;
+    public readonly arguments: string[];
+
+    constructor(modifier: string) {
+        const [name, ...args] = modifier.split(',');
+        this.name = name;
+        this.arguments = args;
+    }
+
+    public getArguments(fallback: string[] = []): string[] {
+        return this.arguments.length ? this.arguments : fallback;
+    }
+}
+
+export class Modifiers {
+    protected modifiers: Map<string, Modifier> = new Map<string, Modifier>();
+
+    constructor(modifiers: string[] = []) {
+        for (const modifier of modifiers) {
+            this.add(modifier);
+        }
+    }
+
+    public add(modifier: string) {
+        const m = new Modifier(modifier);
+        this.modifiers.set(m.name, m);
+    }
+
+    public has(name: string): boolean {
+        return this.modifiers.has(name);
+    }
+
+    public get(name: string): Modifier {
+        return this.modifiers.get(name);
+    }
+
+    public get iter(): Modifier[] {
+        return Array.from(this.modifiers.values());
+    }
+
+    public get names(): string[] {
+        return this.iter.map(m => m.name);
+    }
+
+    public get length(): number {
+        return this.modifiers.size;
+    }
+
+    public static fromAttribute(attribute: string): Modifiers {
+        return new Modifiers(attribute.split('|').splice(1));
+    }
+}

package/src/Scope/ObjectAccessor.ts

@@ -0,0 +1,21 @@
+import {ScopeAbstract} from "./ScopeAbstract";
+
+export class ObjectAccessor extends ScopeAbstract {
+    public readonly data: any;
+
+    constructor(data: any) {
+        super();
+        this.data = data;
+    }
+
+    public get(field: string, fallback = null): any {
+        const value = this.data[field];
+        if (typeof value === 'object')
+            return new ObjectAccessor(value);
+        return value === undefined ? fallback : value;
+    }
+
+    public set(field: string, value: any): void {
+        this.data[field] = value;
+    }
+}

package/src/Scope/ScopeAbstract.ts

@@ -0,0 +1,11 @@
+import {EventDispatcher} from "../EventDispatcher";
+
+export interface IScope {
+    get(field: string, fallback?: any): any;
+    set(field: string, value: any): void;
+}
+
+export abstract class ScopeAbstract extends EventDispatcher implements IScope {
+    public abstract get(field: string, fallback?: any): any;
+    public abstract set(field: string, value: any): void;
+}

package/src/Scope.ts

@@ -5,9 +5,10 @@ import {WrappedArray} from "./Scope/WrappedArray";
 import {ScopeData} from "./Scope/ScopeData";
 import {DynamicScopeData} from "./Scope/DynamicScopeData";
 import {DOM} from "./DOM";
+import {ScopeAbstract} from "./Scope/ScopeAbstract";
 
 
-export class Scope extends EventDispatcher {
+export class Scope extends ScopeAbstract {
     public wrapped: any;
     protected _data: ScopeData;
     protected children: Scope[];
@@ -29,6 +30,18 @@ export class Scope extends EventDispatcher {
         return this._data;
     }
 
+    public get objectify(): any {
+        const obj = {};
+        for (const key of this.keys) {
+            const value = this.get(key);
+            if (value instanceof Scope)
+                obj[key] = value.objectify;
+            else
+                obj[key] = value;
+        }
+        return obj;
+    }
+
     public get parentScope(): Scope {
         if (this._parentScope)
             return this._parentScope;

package/src/Tag.ts

@@ -9,6 +9,7 @@ import {Registry} from "./Registry";
 import {DOMObject} from "./DOM/DOMObject";
 import {Tree} from "./AST";
 import {StyleAttribute} from "./attributes/StyleAttribute";
+import {Modifiers} from "./Modifiers";
 
 export enum TagState {
     Instantiated,
@@ -27,8 +28,7 @@ export class Tag extends DOMObject {
     public readonly deferredAttributes: Attribute[] = [];
     protected _state: TagState;
     protected _meta: { [key: string]: any; };
-    protected attributes: Attribute[];
-    protected attributeMap: { [key: string]: Attribute; };
+    protected attributes: Map<string, Attribute> = new Map<string, Attribute>();
     protected _nonDeferredAttributes: Attribute[] = [];
     protected _parentTag: Tag;
     protected _children: Tag[] = [];
@@ -78,8 +78,6 @@ export class Tag extends DOMObject {
         element[Tag.TaggedVariable] = this;
         this.rawAttributes = {};
         this.parsedAttributes = {};
-        this.attributes = [];
-        this.attributeMap = {};
         this.onEventHandlers = {};
         this.analyzeElementAttributes();
         this._state = TagState.Instantiated;
@@ -97,14 +95,23 @@ export class Tag extends DOMObject {
     }
 
     public getAttributesWithState(state: AttributeState): Attribute[] {
-        return this.attributes.filter(attr => attr.state === state);
+        const attrs: Attribute[] = [];
+        for (const attr of this.attributes.values()) {
+            if (attr.state === state)
+                attrs.push(attr);
+        }
+        return attrs;
     }
 
     public get nonDeferredAttributes(): Attribute[] {
         if (this._nonDeferredAttributes.length > 0)
             return this._nonDeferredAttributes;
 
-        const attrs: Attribute[] = this.attributes.filter(attr => attr.state !== AttributeState.Deferred);
+        const attrs: Attribute[] = [];
+        for (const attr of this.attributes.values()) {
+            if (attr.state !== AttributeState.Deferred)
+                attrs.push(attr);
+        }
         this._nonDeferredAttributes = attrs;
         return attrs;
     }
@@ -146,7 +153,7 @@ export class Tag extends DOMObject {
     }
 
     mutate(mutation: MutationRecord): void {
-        this.attributes.map(attr => attr.mutate(mutation));
+        this.attributes.forEach(attr => attr.mutate(mutation));
         this.dispatch('mutate', mutation);
     }
 
@@ -185,10 +192,6 @@ export class Tag extends DOMObject {
         return null;
     }
 
-    getAttributeModifiers(attr: string): string[] {
-        return attr.split('|').splice(1);
-    }
-
     get isInput(): boolean {
         return this.inputTags.indexOf(this.element.tagName.toLowerCase()) > -1;
     }
@@ -390,7 +393,7 @@ export class Tag extends DOMObject {
     public async getAttribute<T = Attribute>(key: string): Promise<T> {
         const cls: any = await Registry.instance.attributes.get(key);
         if (!cls) return;
-        for (const attr of this.attributes)
+        for (const attr of this.attributes.values())
             if (attr instanceof cls)
                 return attr as any as T;
     }
@@ -481,8 +484,7 @@ export class Tag extends DOMObject {
         const slot: Tag = this.isSlot ? this : null;
         for (const tag of tags) {
             for (let attr in this.rawAttributes) {
-                if (tag.attributeMap[attr])
-                    continue;
+                if (tag.attributes.has(attr)) continue;
 
                 if (this.hasModifier(attr, 'mobile') && !isMobile)
                     continue;
@@ -498,8 +500,7 @@ export class Tag extends DOMObject {
 
                     const attrObj = attrClass.create(tag, attr, attrClass, slot);
 
-                    tag.attributes.push(attrObj);
-                    tag.attributeMap[attr] = attrObj;
+                    tag.attributes.set(attr, attrObj);
                     if (defer && attrClass.canDefer) {
                         await attrObj.defer();
                         tag.deferredAttributes.push(attrObj);
@@ -557,7 +558,7 @@ export class Tag extends DOMObject {
         const tags: Tag[] = await this.getTagsToBuild() as Tag[];
         for (const tag of tags) {
             if (tag.isInput) {
-                tag.addEventHandler('input', [], tag.inputMutation, tag);
+                tag.addEventHandler('input', null, tag.inputMutation, tag);
             }
 
             for (const attr of tag.getAttributesWithState(AttributeState.Extracted)) {
@@ -612,12 +613,42 @@ export class Tag extends DOMObject {
 
         this.scope.set('$event', e);
         this.scope.set('$value', this.value);
+        let preventedDefault = false;
         for (const handler of this.onEventHandlers[eventType]) {
-            handler.handler.call(handler.context, e);
+            if (!preventedDefault && handler.modifiers.has('preventdefault') && e.cancelable) {
+                e.preventDefault();
+                preventedDefault = true;
+            }
+
+            if (handler.modifiers.has('once'))
+                this.removeEventHandler(handler.event, handler.handler, handler.context);
+
+            if (handler.modifiers.has('throttle')) {
+                const modifierArguments = handler.modifiers.get('throttle').getArguments(['1000']);
+                const throttleTime = parseInt(modifierArguments[0]);
+                const now = Math.floor(Date.now());
+                if (!handler.state.lastCalled || handler.state.lastCalled + throttleTime < now) {
+                    handler.state.lastCalled = now;
+                } else {
+                    continue;
+                }
+            }
+
+            if (handler.modifiers.has('debounce')) {
+                clearTimeout(handler.state.debounceTimeout);
+                const modifierArguments = handler.modifiers.get('debounce').getArguments(['1000']);
+                const debounceTime = parseInt(modifierArguments[0]);
+                handler.state.debounceTimeout = setTimeout(async () => {
+                    await handler.handler.call(handler.context, e);
+                }, debounceTime);
+            } else {
+                handler.handler.call(handler.context, e);
+            }
         }
     }
 
     public hasModifier(attribute: string, modifier: string): boolean {
+        this.attributes
         return attribute.indexOf(`|${modifier}`) > -1;
     }
 
@@ -625,28 +656,32 @@ export class Tag extends DOMObject {
         return attribute.replace(`|${modifier}`, '');
     }
 
-    public addEventHandler(eventType: string, modifiers: string[], handler, context: any = null) {
+    public addEventHandler(eventType: string, modifiers: Modifiers, handler, context: any = null) {
         let passiveValue: boolean = null;
-        if (modifiers.indexOf('active') > -1) {
+        modifiers = modifiers || new Modifiers();
+
+        if (modifiers.has('active')) {
             passiveValue = false;
-        } else if (modifiers.indexOf('passive') > -1) {
+        } else if (modifiers.has('passive')) {
             passiveValue = true;
         }
 
         if (!this.onEventHandlers[eventType]) {
             this.onEventHandlers[eventType] = [];
             const element: HTMLElement | Window = On.WindowEvents.indexOf(eventType) > -1 && window ? window : this.element;
-            const opts: any = {};
+            const eventListenerOpts: any = {};
             if (eventType.indexOf('touch') > -1 || passiveValue !== null)
-                opts['passive'] = passiveValue === null && true || passiveValue;
+                eventListenerOpts['passive'] = passiveValue === null && true || passiveValue;
 
-            element.addEventListener(eventType, this.handleEvent.bind(this, eventType), opts);
+            element.addEventListener(eventType, this.handleEvent.bind(this, eventType), eventListenerOpts);
         }
 
         this.onEventHandlers[eventType].push({
             handler: handler,
             event: eventType,
             context: context,
+            modifiers: modifiers,
+            state: {}
         });
     }
 
@@ -689,32 +724,26 @@ export class Tag extends DOMObject {
     }
 
     async watchAttribute(attributeName: string) {
-        for (const attribute of this.attributes) {
-            if (attribute instanceof StandardAttribute && attribute.attributeName == attributeName) {
-                return attribute;
-            }
+        if (this.attributes.has(attributeName) && this.attributes.get(attributeName) instanceof StandardAttribute) {
+            return this.attributes.get(attributeName);
         }
 
         this.createScope(true);
-
         const standardAttribute = new StandardAttribute(this, attributeName);
-        this.attributes.push(standardAttribute);
+        this.attributes.set(attributeName, standardAttribute);
         await this.setupAttribute(standardAttribute);
 
         return standardAttribute;
     }
 
     async watchStyle(styleName: string) {
-        for (const attribute of this.attributes) {
-            if (attribute instanceof StyleAttribute) {
-                return attribute;
-            }
-        }
+        if (this.attributes.has('style'))
+            return this.attributes.get('style');
 
         this.createScope(true);
 
         const styleAttribute = new StyleAttribute(this, 'style');
-        this.attributes.push(styleAttribute);
+        this.attributes.set('style', styleAttribute);
         await this.setupAttribute(styleAttribute);
 
         return styleAttribute;
@@ -735,7 +764,7 @@ export class Tag extends DOMObject {
 
     deconstruct() {
         this.attributes.forEach(attr => attr.deconstruct());
-        this.attributes.length = 0;
+        this.attributes.clear();
         this._children.forEach(child => child.deconstruct());
         this._children.length = 0;
         super.deconstruct();

package/src/attributes/KeyAbstract.ts

@@ -9,7 +9,7 @@ export abstract class KeyAbstract extends On {
     }
 
     public async connect() {
-        this.tag.addEventHandler('keydown', this.getAttributeModifiers(), this.handleEvent, this);
+        this.tag.addEventHandler('keydown', this.modifiers, this.handleEvent, this);
         await super.connect();
     }
 

package/src/attributes/KeyDown.ts

@@ -4,7 +4,7 @@ import {Registry} from "../Registry";
 @Registry.attribute('vsn-key-down')
 export class KeyDown extends KeyAbstract {
     public async connect() {
-        this.tag.addEventHandler('keydown', this.getAttributeModifiers(), this.handleEvent, this);
+        this.tag.addEventHandler('keydown', this.modifiers, this.handleEvent, this);
         await super.connect();
     }
 }

package/src/attributes/KeyUp.ts

@@ -4,7 +4,7 @@ import {Registry} from "../Registry";
 @Registry.attribute('vsn-key-up')
 export class KeyUp extends KeyAbstract {
     public async connect() {
-        this.tag.addEventHandler('keyup', this.getAttributeModifiers(), this.handleEvent, this);
+        this.tag.addEventHandler('keyup', this.modifiers, this.handleEvent, this);
         await super.connect();
     }
 }

package/src/attributes/LazyAttribute.ts

@@ -1,5 +1,6 @@
 import {Registry} from "../Registry";
 import {On} from "./On";
+import {Modifiers} from "../Modifiers";
 
 @Registry.attribute('vsn-lazy')
 export class LazyAttribute extends On {
@@ -12,14 +13,17 @@ export class LazyAttribute extends On {
     }
 
     public async connect() {
-        this.tag.addEventHandler('scroll', ['passive'], this.handleEvent, this);
+        if (!this.modifiers.has('active'))
+            this.modifiers.add('passive');
+
+        this.tag.addEventHandler('scroll', this.modifiers, this.handleEvent, this);
         await this.handleEvent();
     }
 
     async handleEvent(e?: Event) {
         if (!this.loaded && window.scrollY + window.outerHeight >= this.eleTop) {
             this.loaded = true;
-            await this.handler.evaluate(this.tag.scope, this.tag.dom, this.tag);
+            await super.handleEvent(e);
             this.tag.removeEventHandler('scroll', this.handleEvent, this);
         }
     }

package/src/attributes/On.ts

@@ -18,21 +18,22 @@ export abstract class On extends Attribute {
         'unload',
     ];
 
-    public async compile() {
-        const code: string = this.getAttributeValue();
-        this.handler = new Tree(code);
-        await this.handler.prepare(this.tag.scope, this.tag.dom, this.tag);
-        await super.compile();
+    protected async getTree(): Promise<Tree> {
+        if (!this.handler) {
+            const code: string = this.getAttributeValue();
+            this.handler = new Tree(code);
+            await this.handler.prepare(this.tag.scope, this.tag.dom, this.tag);
+        }
+        return this.handler;
     }
 
     async handleEvent(e) {
-        if (this.hasModifier('preventdefault') && e.cancelable)
-            e.preventDefault();
-        await this.handler.evaluate(this.tag.scope, this.tag.dom, this.tag);
+        const tree = await this.getTree();
+        await tree.evaluate(this.tag.scope, this.tag.dom, this.tag);
     }
 
     public async connect() {
-        this.tag.addEventHandler(this.getAttributeBinding(), this.getAttributeModifiers(), this.handleEvent, this);
+        this.tag.addEventHandler(this.getAttributeBinding(), this.modifiers, this.handleEvent, this);
         await super.connect();
     }
 }

package/src/attributes/XHRAttribute.ts

@@ -22,9 +22,9 @@ export class XHRAttribute extends Attribute {
 
     public async connect() {
         if (this.isForm) {
-            this.tag.addEventHandler('submit', this.getAttributeModifiers(), this.handleEvent, this);
+            this.tag.addEventHandler('submit', this.modifiers, this.handleEvent, this);
         } else if (this.isAnchor) {
-            this.tag.addEventHandler('click', this.getAttributeModifiers(), this.handleEvent, this);
+            this.tag.addEventHandler('click', this.modifiers, this.handleEvent, this);
         }
         await super.connect();
     }

package/src/version.ts

@@ -1,2 +1,2 @@
-export const VERSION = '0.1.123';
+export const VERSION = '0.1.125';
 

package/src/vsn.ts

@@ -4,7 +4,6 @@ import {Registry} from "./Registry";
 import {Configuration} from "./Configuration";
 import {VisionHelper} from "./helpers/VisionHelper";
 import {Tree} from "./AST";
-import {Query} from "./Query";
 import {EventDispatcher} from "./EventDispatcher";
 import {DynamicScopeData} from "./Scope/DynamicScopeData";
 import {Controller} from "./Controller";
@@ -46,7 +45,7 @@ export class Vision extends EventDispatcher {
             window['Registry'] = Registry;
             window['vision'] = window['vsn'] = this;
             window['Tree'] = Tree;
-            window['$'] = Query;
+            window['$'] = this.exec.bind(this);
             VisionHelper.window.dispatchEvent(new Event('vsn'));
         }
     }

package/test/AST/ClassNode.spec.ts

@@ -2,6 +2,7 @@ import {DOM} from "../../src/DOM";
 import {ClassNode} from "../../src/AST/ClassNode";
 import {Registry} from "../../src/Registry";
 import {TagList} from "../../src/Tag/TagList";
+import {Tag} from "../../src/vsn";
 
 
 describe('ClassNode', () => {
@@ -16,6 +17,7 @@ describe('ClassNode', () => {
             }
             </script>
             <div class="simple"><input /></div>
+            <input id="not-nested" />
         `;
         const dom = new DOM(document);
         await dom.ready;
@@ -25,6 +27,26 @@ describe('ClassNode', () => {
         expect(ClassNode.classes['.simple input']).toBeInstanceOf(ClassNode);
     });
 
+    it("properly build classes on newly added elements in the dom", async () => {
+        document.body.innerHTML = `
+            <script type="text/vsn" vsn-script>
+            class .added-html { 
+                func construct() {}
+            }
+            </script>
+            <div id="container"></div>
+        `;
+        const dom = new DOM(document);
+        await dom.ready;
+        await Registry.instance.classes.get('.added-html');
+        const newHtml: string = `<div class="added-html" id="added"></div>`;
+        dom.root.scope.set('newHtml', newHtml);
+        await dom.exec('#container.@html = newHtml');
+        const addedTag = await dom.exec('#added');
+        expect(addedTag).toBeInstanceOf(Tag);
+        expect(ClassNode.preppedTags['.added-html'].indexOf(addedTag)).toBeGreaterThan(-1);
+    });
+
     it("properly define a simple class", async () => {
         document.body.innerHTML = `
             <script type="text/vsn" vsn-script>

package/tsconfig.base.json

@@ -8,7 +8,8 @@
     "rootDir": "./src",
     "outDir": "./dist",
     "strict": false,
-    "experimentalDecorators": true
+    "experimentalDecorators": true,
+    "downlevelIteration": true
   },
   "exclude": [
     "node_modules"