vsn 0.1.23 → 0.1.27

package/src/Scope.ts

@@ -1,7 +1,8 @@
-import {DataModel} from "simple-ts-models";
-import {EventCallback, EventCallbackList, EventDispatcher, EventDispatcherCallback} from "simple-ts-event-dispatcher";
 import {Registry} from "./Registry";
 import {DOM} from "./DOM";
+import {EventDispatcher, EventDispatcherCallback} from "./EventDispatcher";
+import {DataModel} from "./Model/DataModel";
+import {Model} from "./Model";
 
 export class ScopeReference {
     private _scope: Scope;
@@ -64,26 +65,40 @@ export class ScopeVariableType {
 }
 
 export class WrappedArray<T> extends Array<T> {
-    private _listeners: EventCallbackList;
-    private _lastKey: number;
+    private dispatcher: EventDispatcher;
     public readonly $wrapped: boolean = true;
 
     constructor(...items: T[]) {
         super(...items);
         Object.setPrototypeOf(this, WrappedArray.prototype);
-        this._lastKey = 0;
-        this._listeners = {};
+        this.dispatcher = new EventDispatcher();
+    }
+
+    dispatch(event: string, ...args: any[]) {
+        this.dispatcher.dispatch(event, ...args);
+    }
+
+    on(event: string, callback: EventDispatcherCallback) {
+        this.dispatcher.on(event, callback);
+    }
+
+    off(event: string, key?: number) {
+        this.dispatcher.off(event, key);
+    }
+
+    once(event: string, callback: EventDispatcherCallback) {
+        this.dispatcher.once(event, callback);
     }
 
     push(...items: T[]): number {
         const num: number = super.push(...items);
 
-        this.trigger('push', ...items);
-        this.trigger('change', {
+        this.dispatch('push', ...items);
+        this.dispatch('change', {
             'added': items
         });
         for (const item of items) {
-            this.trigger('add', item);
+            this.dispatch('add', item);
         }
         return num;
     }
@@ -91,11 +106,11 @@ export class WrappedArray<T> extends Array<T> {
     splice(start: number, deleteCount?: number): T[] {
         const removed: T[] = super.splice(start, deleteCount);
 
-        this.trigger('change', {
+        this.dispatch('change', {
             'removed': removed
         });
         for (const item of removed) {
-            this.trigger('remove', item);
+            this.dispatch('remove', item);
         }
 
         return removed;
@@ -134,77 +149,6 @@ export class WrappedArray<T> extends Array<T> {
             this.splice(this.indexOf(item), 1);
         }
     }
-
-    bind(event: string, fct: EventDispatcherCallback, context?: any, once?: boolean): number {
-        once = once || false;
-        this._lastKey++;
-        this._listeners[event] = this._listeners[event] || [];
-        this._listeners[event].push(new EventCallback(fct, this._lastKey, once, context));
-        return this._lastKey;
-    }
-
-    once(event: string, fct: EventDispatcherCallback, context?: any): number {
-        return this.bind(event, fct, context, true);
-    }
-
-    unbind(event: string, key?: number): boolean {
-        if(!(event in this._listeners)) return false;
-        if(key) {
-            for(const cb of this._listeners[event]) {
-                if(key == cb.key) {
-                    this._listeners[event].splice(this._listeners[event].indexOf(cb), 1);
-                    return true;
-                }
-            }
-        } else {
-            this._listeners[event] = [];
-            return true;
-        }
-        return false;
-    }
-
-    unbindWithContext(event: string, context: any): number {
-        if(!(event in this._listeners)) return 0;
-        let toRemove: EventCallback[] = [],
-            cnt = 0;
-
-        for(const cb of this._listeners[event]) {
-            if(context == cb.context) {
-                toRemove.push(cb);
-            }
-        }
-
-        for(const cb of toRemove) {
-            this._listeners[event].splice(this._listeners[event].indexOf(cb), 1);
-            cnt++;
-        }
-        return cnt;
-    }
-
-    getListener(event: string, key: number): EventCallback | undefined {
-        for(const cb of this._listeners[event]) {
-            if(key == cb.key)
-                return cb;
-        }
-    }
-
-    trigger(event: string, ...args: any[]): void {
-        if(!(event in this._listeners)) return;
-
-        for(let i = 0; i < this._listeners[event].length; i++) {
-            const cb: EventCallback = this._listeners[event][i];
-
-            // We need to unbind callbacks before they're called to prevent
-            // infinite loops if the event is somehow triggered within the
-            // callback
-            if(cb.once) {
-                this.unbind(event, cb.key);
-                i--;
-            }
-
-            cb.call(args);
-        }
-    }
 }
 
 export class Scope extends EventDispatcher {
@@ -276,7 +220,7 @@ export class Scope extends EventDispatcher {
             if (searchParents && this.parentScope)
                 return this.parentScope.get(key, searchParents);
 
-            return this._keys.indexOf(key) > -1 ? '' : undefined;
+            return '';
         }
 
         return value;
@@ -307,8 +251,8 @@ export class Scope extends EventDispatcher {
                 key: key
             };
 
-            this.trigger(`change:${key}`, event);
-            this.trigger('change', key, event);
+            this.dispatch(`change:${key}`, event);
+            this.dispatch('change', key, event);
         }
 
         if (this._keys.indexOf(key) === -1)
@@ -352,6 +296,11 @@ export class Scope extends EventDispatcher {
     }
 
     public wrap(toWrap: any, triggerUpdates: boolean = false, updateFromWrapped: boolean = true) {
+        if (toWrap instanceof Model) {
+            this.data = toWrap;
+            return;
+        }
+
         if (toWrap instanceof Scope)
             toWrap = toWrap.data;
 
@@ -381,8 +330,8 @@ export class Scope extends EventDispatcher {
                 if (!(this.wrapped[field] instanceof WrappedArray)) {
                     this.wrapped[field] = new WrappedArray(...toWrap[field]);
                 }
-                this.wrapped[field].bind('change', (...args) => {
-                    this.trigger(`change:${field}`, ...args);
+                this.wrapped[field].on('change', (...args) => {
+                    this.dispatch(`change:${field}`, ...args);
                 })
             }
 
@@ -413,14 +362,14 @@ export class Scope extends EventDispatcher {
             });
 
             if (triggerUpdates)
-                this.trigger(`change:${field}`);
+                this.dispatch(`change:${field}`);
         }
 
         this.wrapped.get = this.get.bind(this);
         this.wrapped.set = this.set.bind(this);
-        this.wrapped.bind = this.bind.bind(this);
+        this.wrapped.bind = this.on.bind(this);
         this.wrapped.once = this.once.bind(this);
-        this.wrapped.unbind = this.unbind.bind(this);
+        this.wrapped.unbind = this.off.bind(this);
     }
 
     public unwrap(): void {

package/src/SimplePromise.ts

@@ -0,0 +1,219 @@
+import {EventDispatcher} from "./EventDispatcher";
+
+export interface IDeferred<T> {
+    [key: string]: any;
+    promise: SimplePromise<T>;
+    resolve(result: T): void;
+    reject(reason: string): void;
+}
+
+export type TResolve<T> = (result: T) => void;
+export type TReject = (reason: string) => void;
+export type TResult<T> = T | string | null;
+
+export enum EPromiseStates {
+    PENDING,
+    FULFILLED,
+    REJECTED
+}
+
+export interface IPromise<T> extends EventDispatcher {
+    state: EPromiseStates;
+    result: TResult<T>;
+    then<X = T>(success?: (result?: T) => X, error?: (reason?: string) => string): IPromise<X>;
+    catch(onRejected: (reason: string) => string): IPromise<string>;
+    finally<X = T>(finallyCallback: (result: T | string) => X | string): IPromise<X>;
+}
+
+export function noop<T = any>(result?: T): T { return result as T; }
+
+export class SimplePromise<T> extends EventDispatcher implements IPromise<T> {
+    protected _state: EPromiseStates;
+    protected _result: TResult<T>  = null;
+    private promiseClass: typeof SimplePromise;
+
+    constructor(executor: (resolve: TResolve<T>, reject: TReject) => void) {
+        super();
+        this._state = EPromiseStates.PENDING;
+        this.promiseClass = (Object.getPrototypeOf(this).constructor);
+        try {
+            executor(this._resolve.bind(this), this._reject.bind(this));
+        } catch (e) {
+            this._reject(e);
+        }
+    }
+
+    public get state(): EPromiseStates {
+        return this._state;
+    }
+
+    public get result(): TResult<T> {
+        return this._result;
+    }
+
+    public static defer<T>(): IDeferred<T> {
+        const promise: SimplePromise<T> = new SimplePromise<T>((res, rej) => {});
+
+        return {
+            promise: promise,
+            resolve: promise._resolve.bind(promise),
+            reject: promise._reject.bind(promise)
+        };
+    }
+
+    /*
+     * Returns a Promise object that is resolved with the given value. If the value is a thenable (i.e. has a then
+     * method), the returned promise will "follow" that thenable, adopting its eventual state; otherwise the returned
+     * promise will be fulfilled with the value. Generally, if you don't know if a value is a promise or not,
+     * Promise.resolve(value) it instead and work with the return value as a promise.
+     */
+    public static resolve<T>(result: T): IPromise<T> {
+        return new SimplePromise<T>((resolve: TResolve<T>): void => {
+            if (result instanceof SimplePromise) {
+                result.then((innerResult: T) => {
+                    resolve(innerResult);
+                });
+            } else {
+                resolve(result);
+            }
+        });
+    }
+
+    /*
+     * Returns a Promise object that is rejected with the given reason.
+     */
+    public static reject(reason: string): IPromise<void> {
+        return new SimplePromise<void>((resolve: TResolve<void>, reject: TReject): void => {
+            reject(reason);
+        });
+    }
+
+    /*
+     * Returns a promise that either fulfills when all of the promises in the iterable argument have fulfilled or
+     * rejects as soon as one of the promises in the iterable argument rejects. If the returned promise fulfills, it is
+     * fulfilled with an array of the values from the fulfilled promises in the same order as defined in the iterable.
+     * If the returned promise rejects, it is rejected with the reason from the first promise in the iterable that
+     * rejected. This method can be useful for aggregating results of multiple promises.
+     */
+    public static all<T>(iter: IPromise<T>[]): IPromise<T[]> {
+        const deferred: IDeferred<T[]> = SimplePromise.defer<T[]>();
+        let done: boolean = true;
+        for (const promise of iter) {
+            if (promise.state == EPromiseStates.PENDING) {
+                done = false;
+                promise.once('fulfilled', (result: T): void => {
+                    SimplePromise.poolResults(iter, deferred);
+                });
+
+                promise.once('rejected', (reason: string): void => {
+                    deferred.reject(reason);
+                });
+            } else if(promise.state == EPromiseStates.REJECTED) {
+                deferred.reject(promise.result as string);
+                done = false;
+                break;
+            }
+        }
+
+        if (done)
+            SimplePromise.poolResults(iter, deferred);
+
+        return deferred.promise;
+    }
+
+    public static poolResults<T>(iter: IPromise<T>[], deferred: IDeferred<T[]>) {
+        let done: boolean = true;
+        const results: T[] = [];
+        for (const p of iter) {
+            if (p.state === EPromiseStates.REJECTED) {
+                deferred.reject(p.result as string);
+                break;
+            } else if (p.state === EPromiseStates.PENDING) {
+                done = false;
+            }
+            results.push(p.result as T);
+        }
+        if (done)
+            deferred.resolve(results);
+    }
+
+    /*
+     * Returns a promise that fulfills or rejects as soon as one of the promises in the iterable fulfills or rejects,
+     * with the value or reason from that promise.
+     */
+    public static race<T>(iter: IPromise<T>[]): IPromise<T> {
+        const deferred: IDeferred<T> = SimplePromise.defer<T>();
+
+        for (const promise of iter) {
+            promise.once('fulfilled', (result: T) => {
+                deferred.resolve(result);
+            });
+
+            promise.once('rejected', (reason: string) => {
+                deferred.reject(reason);
+            });
+        }
+
+        return deferred.promise;
+    }
+
+    /*
+     * Appends fulfillment and rejection handlers to the promise, and returns a new promise resolving to the return
+     * value of the called handler, or to its original settled value if the promise was not handled (i.e. if the
+     * relevant handler onFulfilled or onRejected is not a function).
+     */
+    public then<X = T>(success?: (result: T) => X, error?: (reason: string) => string): IPromise<X> {
+        return new this.promiseClass<X>((resolve: TResolve<X>, reject: TReject): void => {
+            if (this.state === EPromiseStates.FULFILLED) {
+                if (success)
+                    resolve(success(this.result as T));
+            } else if (this.state === EPromiseStates.REJECTED) {
+                if (error)
+                    reject(error(this.result as string));
+            } else {
+                this.once('fulfilled', (result: T): void => {
+                    if (success)
+                        resolve(success(result));
+                });
+
+                this.once('rejected', (reason: string): void => {
+                    if (error)
+                        reject(error(reason));
+                });
+            }
+        });
+    }
+
+    /*
+     * Appends a rejection handler callback to the promise, and returns a new promise resolving to the return value of
+     * the callback if it is called, or to its original fulfillment value if the promise is instead fulfilled.
+     */
+    public catch(onRejected: (reason: string) => string): IPromise<string> {
+        return this.then<string>(undefined, onRejected);
+    }
+
+    /*
+     * Appends a handler to the promise, and returns a new promise which is resolved when the original promise is
+     * resolved. The handler is called when the promise is settled, whether fulfilled or rejected.
+     */
+    public finally<X = T>(finallyCallback: (result: T | string) => X | string): IPromise<X> {
+        const success: (r: T) => X = (result: T): X => finallyCallback(result) as X;
+        const error: (r: string) => string = (reason: string): string => finallyCallback(reason) as string;
+
+        return this.then<X>(success, error);
+    }
+
+    protected _resolve(result: T): void {
+        if (this.state !== EPromiseStates.PENDING) return;
+        this._state = EPromiseStates.FULFILLED;
+        this._result = result;
+        this.dispatch('fulfilled', result);
+    }
+
+    protected _reject(reason: string): void {
+        if (this.state !== EPromiseStates.PENDING) return;
+        this._state = EPromiseStates.REJECTED;
+        this._result = reason;
+        this.dispatch('rejected', reason);
+    }
+}

package/src/Tag.ts

@@ -8,7 +8,7 @@ import {On} from "./attributes/On";
 import {Registry} from "./Registry";
 import {benchmarkEnd, benchmarkStart} from "./Bencmark";
 import {DOMObject} from "./DOM/DOMObject";
-import { Tree } from "./AST";
+import {Tree} from "./AST";
 import {StyleAttribute} from "./attributes/StyleAttribute";
 
 export enum TagState {
@@ -122,7 +122,7 @@ export class Tag extends DOMObject {
         for (const attr of this.attributes) {
             attr.mutate(mutation);
         }
-        this.trigger('mutate', mutation);
+        this.dispatch('mutate', mutation);
     }
 
     public get(attr: string) {
@@ -251,10 +251,14 @@ export class Tag extends DOMObject {
             obj = new obj();
         }
 
-        this.scope.wrap(obj, triggerUpdates, updateFromWrapped);
-        obj['$scope'] = this.scope;
-        obj['$tag'] = this;
-        obj['$el'] = this.element;
+        if (obj instanceof Controller) {
+            obj.init(this.scope, this, this.element);
+        } else {
+            this.scope.wrap(obj, triggerUpdates, updateFromWrapped);
+            obj['$scope'] = this.scope;
+            obj['$tag'] = this;
+            obj['$el'] = this.element;
+        }
         return obj;
     }
 
@@ -344,7 +348,7 @@ export class Tag extends DOMObject {
                 if (defer && attrClass.canDefer) {
                     await attrObj.defer();
                     this.deferredAttributes.push(attrObj);
-                    attrObj.bind('state', this.onAttributeStateChange.bind(this));
+                    attrObj.on('state', this.onAttributeStateChange.bind(this));
                 }
             }
         }
@@ -428,8 +432,7 @@ export class Tag extends DOMObject {
 
         this.scope.set('$event', e);
         this.scope.set('$value', this.value);
-        for (const handler of this.onEventHandlers[eventType])
-        {
+        for (const handler of this.onEventHandlers[eventType]) {
             handler(e);
         }
     }

package/src/attributes/Bind.ts

@@ -53,7 +53,7 @@ export class Bind extends Attribute {
     public async connect() {
         if (this.doUpdateTo) {
             this.updateTo();
-            this.boundScope.bind(`change:${this.key}`, this.updateTo, this);
+            this.boundScope.on(`change:${this.key}`, this.updateTo, this);
         }
         await super.connect();
     }

package/src/attributes/ClickRemoveClass.ts

@@ -9,10 +9,12 @@ export class ClickRemoveClass extends Attribute {
     public async setup() {
         this.cssClass = this.getAttributeBinding('active');
         this.target = this.getAttributeValue();
+        await super.setup();
     }
 
     public async connect() {
         this.tag.addEventHandler('click', this.getAttributeModifiers(), this.onClick.bind(this));
+        await super.connect();
     }
 
     onClick(e) {

package/src/attributes/ClickToggleClass.ts

@@ -9,10 +9,12 @@ export class ClickToggleClass extends Attribute {
     public async setup() {
         this.cssClass = this.getAttributeBinding( 'active');
         this.target = this.getAttributeValue();
+        await super.setup();
     }
 
     public async connect() {
         this.tag.addEventHandler('click', this.getAttributeModifiers(), this.onClick.bind(this));
+        await super.connect();
     }
 
     onClick(e) {

package/src/attributes/Exec.ts

@@ -10,9 +10,11 @@ export class Exec extends Attribute {
     public async compile() {
         this.tree = new Tree(this.getAttributeValue());
         await this.tree.prepare(this.tag.scope, this.tag.dom, this.tag);
+        await super.compile();
     }
 
     public async extract() {
         await this.tree.evaluate(this.tag.scope, this.tag.dom, this.tag);
+        await super.extract();
     }
 }

package/src/attributes/Format.ts

@@ -13,5 +13,6 @@ export class Format extends Attribute {
         const bindingKey = attribute ? `vsn-bind:${attribute}` : 'vsn-bind';
         const binding: Bind = await this.tag.getAttribute<Bind>(bindingKey);
         binding.setFormatter(formatter);
+        await super.extract();
     }
 }

package/src/attributes/If.ts

@@ -11,18 +11,22 @@ export class If extends Attribute {
         const statement: string = this.getAttributeValue();
         this.tree = new Tree(statement);
         await this.tree.prepare(this.tag.scope, this.tag.dom, this.tag);
+        await super.compile();
     }
 
     public async extract() {
         await this.evaluate();
+        await super.extract();
     }
 
     public async connect() {
         await this.tree.bindToScopeChanges(this.tag.scope, this.onChange.bind(this), this.tag.dom, this.tag);
+        await super.connect();
     }
 
     public async evaluate() {
         await this.onChange();
+        await super.evaluate();
     }
 
     async onChange() {

package/src/attributes/JSONAttribute.ts

@@ -34,5 +34,6 @@ export class JSONAttribute extends Attribute {
         }
 
         scope.set(key, data);
+        await super.extract();
     }
 }

package/src/attributes/KeyAbstract.ts

@@ -4,12 +4,13 @@ export abstract class KeyAbstract extends On {
     protected specificKey: string = null;
 
     public async compile() {
-        await super.compile();
         this.specificKey = this.getAttributeBinding();
+        await super.compile();
     }
 
     public async connect() {
         this.tag.addEventHandler('keydown', this.getAttributeModifiers(), this.handleEvent.bind(this));
+        await super.connect();
     }
 
     public async handleEvent(e) {

package/src/attributes/KeyDown.ts

@@ -5,5 +5,6 @@ import {Registry} from "../Registry";
 export class KeyDown extends KeyAbstract {
     public async connect() {
         this.tag.addEventHandler('keydown', this.getAttributeModifiers(), this.handleEvent.bind(this));
+        await super.connect();
     }
 }

package/src/attributes/KeyUp.ts

@@ -5,5 +5,6 @@ import {Registry} from "../Registry";
 export class KeyUp extends KeyAbstract {
     public async connect() {
         this.tag.addEventHandler('keyup', this.getAttributeModifiers(), this.handleEvent.bind(this));
+        await super.connect();
     }
 }

package/src/attributes/List.ts

@@ -19,6 +19,7 @@ export class List extends Attribute {
         const listAttr: string = this.getAttributeBinding();
         this.tree = new Tree(listAttr);
         await this.tree.prepare(this.tag.scope, this.tag.dom, this.tag);
+        await super.compile();
     }
 
     public async setup() {
@@ -43,6 +44,7 @@ export class List extends Attribute {
                 this.template = templateNode.element.content.cloneNode(true);
             }
         }
+        await super.setup();
     }
 
     public async extract() {
@@ -55,6 +57,7 @@ export class List extends Attribute {
                 await this.add({});
             }
         }
+        await super.extract();
     }
 
     protected async addExistingItems(defaultList: any[] | null) {
@@ -81,10 +84,10 @@ export class List extends Attribute {
             this.items = new WrappedArray(this.items);
         }
 
-        (this.items as WrappedArray<any>).bind('add', (item) => {
+        (this.items as WrappedArray<any>).on('add', (item) => {
             this.add(item);
         });
-        (this.items as WrappedArray<any>).bind('remove', (item) => {
+        (this.items as WrappedArray<any>).on('remove', (item) => {
             this.remove(item);
         });
 
@@ -134,6 +137,6 @@ export class List extends Attribute {
             tag.wrap(obj);
         }
 
-        this.tag.trigger('add', obj);
+        this.tag.dispatch('add', obj);
     }
 }

package/src/attributes/ListItem.ts

@@ -23,6 +23,7 @@ export class ListItem extends Attribute {
         const modelName: string = (await this.getList()).listItemModel;
         const cls = await Registry.instance.classes.get(modelName);
         this.instantiateModel(cls);
+        await super.setup();
     }
 
     public get listItemName(): string {

package/src/attributes/On.ts

@@ -22,13 +22,17 @@ export abstract class On extends Attribute {
         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();
     }
 
     async handleEvent(e) {
+        if (this.hasModifier('preventdefault'))
+            e.preventDefault();
         await this.handler.evaluate(this.tag.scope, this.tag.dom, this.tag);
     }
 
     public async connect() {
         this.tag.addEventHandler(this.getAttributeBinding(), this.getAttributeModifiers(), this.handleEvent.bind(this));
+        await super.connect();
     }
 }