vsn 0.1.27 → 0.1.30

package/src/Scope.ts

@@ -1,162 +1,15 @@
-import {Registry} from "./Registry";
-import {DOM} from "./DOM";
-import {EventDispatcher, EventDispatcherCallback} from "./EventDispatcher";
-import {DataModel} from "./Model/DataModel";
-import {Model} from "./Model";
+import {EventDispatcher} from "./EventDispatcher";
+import {ScopeReference} from "./Scope/ScopeReference";
+import {QueryReference} from "./Scope/QueryReference";
+import {WrappedArray} from "./Scope/WrappedArray";
+import {ScopeData} from "./Scope/ScopeData";
+import {DynamicScopeData} from "./Scope/DynamicScopeData";
 
-export class ScopeReference {
-    private _scope: Scope;
-    private _key: string;
-    private _value: any;
-
-    constructor(
-        scope: Scope = null,
-        key: string = null,
-        value: any = null
-    ) {
-        this._scope = scope;
-        this._key = key;
-        this._value = value;
-    }
-
-    public async getScope() {
-        return this._scope;
-    }
-
-    public async getKey() {
-        return this._key;
-    }
-
-    public async getValue() {
-        return this._value;
-    }
-}
-
-export class QueryReference extends ScopeReference {
-    constructor(
-        public readonly path: string,
-        public readonly scope: Scope
-    ) {
-        super();
-    }
-
-    public async getScope() {
-        let parts: string[] = this.path.split('.');
-        parts = parts.splice(0, parts.length - 1);
-        const qResult = await DOM.instance.eval(parts.join('.'));
-        return qResult.length === 1 ? qResult[0].scope : qResult.map((dobj) => dobj.scope);
-    }
-
-    public async getKey() {
-        const parts: string[] = this.path.split('.');
-        return parts[parts.length - 1];
-    }
-
-    public async getValue() {
-        return await DOM.instance.eval(this.path);
-    }
-}
-
-export class ScopeVariableType {
-    public static readonly Integer: string = 'integer';
-    public static readonly Float: string = 'float';
-    public static readonly Boolean: string = 'boolean';
-    public static readonly String: string = 'string';
-}
-
-export class WrappedArray<T> extends Array<T> {
-    private dispatcher: EventDispatcher;
-    public readonly $wrapped: boolean = true;
-
-    constructor(...items: T[]) {
-        super(...items);
-        Object.setPrototypeOf(this, WrappedArray.prototype);
-        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.dispatch('push', ...items);
-        this.dispatch('change', {
-            'added': items
-        });
-        for (const item of items) {
-            this.dispatch('add', item);
-        }
-        return num;
-    }
-
-    splice(start: number, deleteCount?: number): T[] {
-        const removed: T[] = super.splice(start, deleteCount);
-
-        this.dispatch('change', {
-            'removed': removed
-        });
-        for (const item of removed) {
-            this.dispatch('remove', item);
-        }
-
-        return removed;
-    }
-
-    get(key: string) {
-        const keys: string[] = [
-            'length'
-        ];
-        return keys.indexOf(key) > -1 ? this[key] : undefined;
-    }
-
-    get length(): number {
-        let c: number = 0;
-        for (const item of this) {
-            c += 1;
-        }
-        return c;
-    }
-
-    set length(num: number) {
-        this.setLength(num);
-    }
-
-    setLength(num: number) {
-        let c: number = 0;
-        const toRemove: T[] = [];
-        for (const item of this) {
-            c += 1;
-            if (c >= num) {
-                toRemove.push(item);
-            }
-        }
-
-        for (const item of toRemove) {
-            this.splice(this.indexOf(item), 1);
-        }
-    }
-}
 
 export class Scope extends EventDispatcher {
     public wrapped: any;
-    protected data: DataModel;
-    protected types: {[key: string]: string;} = {};
+    protected data: ScopeData;
     protected children: Scope[];
-    protected _keys: string[];
     protected _parentScope: Scope;
 
     constructor(
@@ -166,8 +19,8 @@ export class Scope extends EventDispatcher {
         if (parent)
             this.parentScope = parent;
         this.children = [];
-        this.data = new DataModel({});
-        this._keys = [];
+        this.data = new DynamicScopeData({});
+        this.data.addRelay(this);
     }
 
     public get parentScope(): Scope {
@@ -227,54 +80,29 @@ export class Scope extends EventDispatcher {
     }
 
     set(key: string, value: any) {
-        if (this.data[key] === undefined)
-            this.data.createField(key);
-
-        if (typeof value === 'string') {
-            const valueType = this.getType(key);
-            const caster = Registry.instance.types.getSynchronous(valueType);
-            if (caster) {
-                value = caster(value);
-            }
-
-            if ([ScopeVariableType.Integer, ScopeVariableType.Float].indexOf(valueType) > -1 && isNaN(value)) {
-                value = null;
-            }
-        }
-
-        if (this.data[key] !== value) {
-            const previousValue = this.data[key];
-            this.data[key] = value;
-            const event = {
-                value: value,
-                previousValue: previousValue,
-                key: key
-            };
-
-            this.dispatch(`change:${key}`, event);
-            this.dispatch('change', key, event);
-        }
-
-        if (this._keys.indexOf(key) === -1)
-            this._keys.push(key);
+        if (!this.data.hasProperty(key))
+            this.data.createProperty(key);
+        this.data[key] = value;
     }
 
     get keys(): string[] {
-        return [...this._keys];
+        return this.data.keys;
     }
 
     has(key: string): boolean {
-        return this._keys.indexOf(key) > -1;
+        return this.data.hasProperty(key);
     }
 
     setType(key: string, type: string) {
-        this.types[key] = type;
+        const property = this.data.getProperty(key, true);
+        property.type = type;
         if (this.has(key))
             this.set(key, this.get(key));
     }
 
     getType(key: string): string {
-        return this.types[key] || ScopeVariableType.String;
+        const property = this.data.getProperty(key);
+        return property.type;
     }
 
     extend(data) {
@@ -284,7 +112,7 @@ export class Scope extends EventDispatcher {
     }
 
     clear() {
-        for (const key of this._keys) {
+        for (const key of this.data.keys) {
             if (['function', 'object'].indexOf(typeof this.get(key)) > -1) continue;
             this.set(key, null);
         }
@@ -296,8 +124,14 @@ export class Scope extends EventDispatcher {
     }
 
     public wrap(toWrap: any, triggerUpdates: boolean = false, updateFromWrapped: boolean = true) {
-        if (toWrap instanceof Model) {
+        if (toWrap instanceof ScopeData) {
+            if (this.data instanceof EventDispatcher) {
+                this.data.removeRelay(this);
+                this.data.deconstruct();
+            }
+            this.wrapped = toWrap;
             this.data = toWrap;
+            this.data.addRelay(this);
             return;
         }
 
@@ -367,9 +201,9 @@ export class Scope extends EventDispatcher {
 
         this.wrapped.get = this.get.bind(this);
         this.wrapped.set = this.set.bind(this);
-        this.wrapped.bind = this.on.bind(this);
+        this.wrapped.on = this.on.bind(this);
         this.wrapped.once = this.once.bind(this);
-        this.wrapped.unbind = this.off.bind(this);
+        this.wrapped.off = this.off.bind(this);
     }
 
     public unwrap(): void {

package/src/SimplePromise.ts

@@ -3,7 +3,7 @@ import {EventDispatcher} from "./EventDispatcher";
 export interface IDeferred<T> {
     [key: string]: any;
     promise: SimplePromise<T>;
-    resolve(result: T): void;
+    resolve(result?: T): void;
     reject(reason: string): void;
 }
 
@@ -67,7 +67,7 @@ export class SimplePromise<T> extends EventDispatcher implements IPromise<T> {
      * 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> {
+    public static resolve<T>(result?: T): IPromise<T> {
         return new SimplePromise<T>((resolve: TResolve<T>): void => {
             if (result instanceof SimplePromise) {
                 result.then((innerResult: T) => {

package/src/Tag/List.ts

@@ -29,12 +29,12 @@ export class TagList extends Array<DOMObject> {
         return this.map(e => e.element);
     }
 
-    next() {
-        return this.map(e => e.element.nextElementSibling).filter(e => e != null)
+    get first(): DOMObject {
+        return this[0];
     }
 
-    prev() {
-        return this.map(e => e.element.previousElementSibling).filter(e => e != null)
+    get last(): DOMObject {
+        return this[this.length - 1];
     }
 
     removeClass(className) {

package/src/Tag.ts

@@ -254,11 +254,11 @@ export class Tag extends DOMObject {
         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;
         }
+        this.scope.wrap(obj, triggerUpdates, updateFromWrapped);
         return obj;
     }
 

package/src/Types.ts

@@ -1,9 +1,14 @@
 import {Registry} from "./Registry";
 
 export class Types {
+    @Registry.type('any')
+    public static any(value: any): any {
+        return value as any;
+    }
+
     @Registry.type('string')
     public static string(value: string) {
-        return value;
+        return `${value}`;
     }
 
     @Registry.type('integer')
@@ -19,7 +24,7 @@ export class Types {
 
     @Registry.type('boolean')
     public static boolean(value: string) {
-        return [0, '0', 'false', ''].indexOf(value) === -1;
+        return [0, '0', false, 'false', ''].indexOf(value) === -1;
     }
 
     @Registry.type('date')

package/src/Validators.ts

@@ -0,0 +1,45 @@
+import {Registry} from "./Registry";
+
+export class Validators {
+    public static readonly _emailRegex = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
+
+    @Registry.validator('email')
+    public static email(value: any): string[] {
+        const errors: string[] = [];
+
+        if(value != null && !this._emailRegex.test(value))
+            errors.push('Please enter a valid email address');
+
+        return errors;
+    }
+
+    @Registry.validator('required')
+    public static required(value: any): string[] {
+        const errors: string[] = [];
+
+        if(value == null || value.length == 0)
+            errors.push('This field is required');
+
+        return errors;
+    }
+
+    @Registry.validator('positive')
+    public static positive(value: any): string[] {
+        const errors: string[] = [];
+
+        if(value != null && value < 0)
+            errors.push('Please enter a positive number');
+
+        return errors;
+    }
+
+    @Registry.validator('negative')
+    public static negative(value: any): string[] {
+        const errors: string[] = [];
+
+        if(value != null && value > 0)
+            errors.push('Please enter a negative number');
+
+        return errors;
+    }
+}

package/src/attributes/Bind.ts

@@ -1,7 +1,8 @@
-import {Scope, ScopeReference} from "../Scope";
+import {Scope} from "../Scope";
 import {Attribute} from "../Attribute";
 import {Tree} from "../AST";
 import {Registry} from "../Registry";
+import {ScopeReference} from "../Scope/ScopeReference";
 
 @Registry.attribute('vsn-bind')
 export class Bind extends Attribute {
@@ -19,7 +20,7 @@ export class Bind extends Attribute {
     }
 
     public async setup() {
-        this.property = this.getAttributeBinding();
+        this.property = this.getAttributeBinding(this.property);
         const mods = this.getAttributeModifiers();
         if (mods.length) {
             if (mods.indexOf('from') > -1) {
@@ -90,7 +91,6 @@ export class Bind extends Attribute {
 
     public mutate(mutation: MutationRecord) {
         super.mutate(mutation);
-
         if (!this.doUpdateFrom) return;
 
         // Element innerText binding

package/src/attributes/ClassConstructor.ts

@@ -8,6 +8,7 @@ export class ClassConstructor extends Attribute {
     public static readonly scoped: boolean = true;
     protected attributeKey: string;
     protected className: string;
+    protected defaultClassName: string;
 
     public async setup() {
         const parentScope: Scope = this.tag.parentTag.scope;
@@ -15,7 +16,7 @@ export class ClassConstructor extends Attribute {
             return;
 
         this.attributeKey = this.getAttributeBinding();
-        this.className = this.getAttributeValue();
+        this.className = this.getAttributeValue(this.defaultClassName);
 
         const cls = await Registry.instance.classes.get(this.className);
         this.instantiateClass(cls);

package/src/attributes/JSONAttribute.ts

@@ -1,6 +1,7 @@
 import {Registry} from "../Registry";
 import {Attribute} from "../Attribute";
-import {Scope, ScopeReference} from "../Scope";
+import {Scope} from "../Scope";
+import {ScopeReference} from "../Scope/ScopeReference";
 
 @Registry.attribute('vsn-json')
 export class JSONAttribute extends Attribute {

package/src/attributes/List.ts

@@ -1,6 +1,6 @@
 import {Attribute} from "../Attribute";
 import {Tag} from "../Tag";
-import {WrappedArray} from "../Scope";
+import {WrappedArray} from "../Scope/WrappedArray";
 import {Tree} from "../AST";
 import {ElementHelper} from "../helpers/ElementHelper";
 import {Registry} from "../Registry";

package/src/attributes/Radio.ts

@@ -1,6 +1,7 @@
 import {Registry} from "../Registry";
 import {Attribute} from "../Attribute";
-import {Scope, ScopeReference} from "../Scope";
+import {Scope} from "../Scope";
+import {ScopeReference} from "../Scope/ScopeReference";
 
 
 @Registry.attribute('vsn-radio')

package/src/attributes/ScopeChange.ts

@@ -1,6 +1,6 @@
 import {Attribute} from "../Attribute";
 import {Tree} from "../AST";
-import {ScopeReference} from "../Scope";
+import {ScopeReference} from "../Scope/ScopeReference";
 import {Registry} from "../Registry";
 
 @Registry.attribute('vsn-scope-change')

package/src/attributes/SetAttribute.ts

@@ -1,6 +1,7 @@
-import {Scope, ScopeReference} from "../Scope";
+import {Scope} from "../Scope";
 import {Attribute} from "../Attribute";
 import {Registry} from "../Registry";
+import {ScopeReference} from "../Scope/ScopeReference";
 
 @Registry.attribute('vsn-set')
 export class SetAttribute extends Attribute {

package/src/attributes/StyleAttribute.ts

@@ -1,6 +1,7 @@
 import {Registry} from "../Registry";
 import {Attribute} from "../Attribute";
-import {Scope, ScopeReference} from "../Scope";
+import {Scope} from "../Scope";
+import {ScopeReference} from "../Scope/ScopeReference";
 
 
 @Registry.attribute('vsn-styles')

package/src/attributes/TypeAttribute.ts

@@ -1,5 +1,5 @@
 import {Attribute} from "../Attribute";
-import {ScopeReference} from "../Scope";
+import {ScopeReference} from "../Scope/ScopeReference";
 import {Registry} from "../Registry";
 
 @Registry.attribute('vsn-type')

package/src/vsn.ts

@@ -1,5 +1,5 @@
 import {DOM} from "./DOM";
-import {WrappedArray} from "./Scope";
+import {WrappedArray} from "./Scope/WrappedArray";
 import {Registry} from "./Registry";
 import "./Types";
 import "./Formats";
@@ -8,7 +8,9 @@ import {VisionHelper} from "./helpers/VisionHelper";
 import {Tree} from "./AST";
 import {Query} from "./Query";
 import {EventDispatcher} from "./EventDispatcher";
-import {DataModel} from "./Model/DataModel";
+import {DynamicScopeData} from "./Scope/DynamicScopeData";
+import {Controller} from "./Controller";
+import {property} from "./Scope/properties/Property";
 
 export class Vision extends EventDispatcher {
     protected static _instance: Vision;
@@ -28,7 +30,7 @@ export class Vision extends EventDispatcher {
         }
         this.registry.classes.register('Object', Object);
         this.registry.classes.register('WrappedArray', WrappedArray);
-        this.registry.classes.register('DataModel', DataModel);
+        this.registry.classes.register('Data', DynamicScopeData);
 
         if (VisionHelper.window) {
             window['Vision'] = Vision;
@@ -72,7 +74,15 @@ export * from './Registry';
 export * from './Attribute';
 export * from './AST';
 export {DOM} from './DOM';
-export {WrappedArray, Scope, ScopeReference} from './Scope';
+export {Scope} from './Scope';
+export {ScopeReference} from './Scope/ScopeReference';
+export {WrappedArray} from './Scope/WrappedArray';
 export {Controller} from './Controller';
+export {Property, property} from './Scope/properties/Property';
+export {Field} from './Model/Field';
+export {Model} from './Model';
+export {EventDispatcher} from './EventDispatcher';
+export {MessageList} from './MessageList';
+export {SimplePromise} from './SimplePromise';
 export {Tag} from './Tag';
 export const vision: Vision = Vision.instance;

package/test/AST/ArithmeticAssignmentNode.spec.ts

@@ -0,0 +1,47 @@
+import {SimplePromise} from "../../src/SimplePromise";
+import {DOM} from "../../src/DOM";
+import {Tree} from "../../src/AST";
+import {Scope} from "../../src/Scope";
+
+
+describe('ArithmeticAssignmentNode', () => {
+    it("should support simple arithmetic with numbers", async () => {
+        const tree = new Tree(`
+            a = 1;
+            a += 10;
+            b = a + 1;
+            b -= 10;
+            c = a + 1;
+            c /= 2;
+            d = a + 1;
+            d *= 2;
+        `);
+        const scope = new Scope();
+        await tree.evaluate(scope, null, null);
+        expect(scope.get("a")).toBe(11);
+        expect(scope.get("b")).toBe(2);
+        expect(scope.get("c")).toBe(6);
+        expect(scope.get("d")).toBe(24);
+    });
+
+    it("should support simple arithmetic with numbers inside nested objects", async () => {
+        const tree = new Tree(`
+            z = {};
+            a = 100;
+            z.z = {};
+            z.z.a = 10;
+            z.a = 1;
+            z.b = 15;
+            z.a += z.z.a;
+            z.b *= a + z.a + z.b;
+            z.z.b = z.z.a + z.a;
+            z.z.b *= z.z.a;
+        `);
+        const scope = new Scope();
+        await tree.evaluate(scope, null, null);
+        expect(await Tree.apply('z.z.a', scope, null, null)).toBe(10);
+        expect(await Tree.apply('z.a', scope, null, null)).toBe(11);
+        expect(await Tree.apply('z.b', scope, null, null)).toBe(1890);
+        expect(await Tree.apply('z.z.b', scope, null, null)).toBe(210);
+    });
+});

package/test/AST.spec.ts

@@ -1,5 +1,5 @@
-
-import {Scope, WrappedArray} from "../src/Scope";
+import {WrappedArray} from '../src/Scope/WrappedArray';
+import {Scope} from "../src/Scope";
 import {Tree} from "../src/AST";
 import {DOM} from "../src/DOM";
 import {IDeferred, SimplePromise} from "../src/SimplePromise";

package/test/Controller.spec.ts

@@ -0,0 +1,44 @@
+import {Controller} from '../src/Controller';
+import {DOM} from "../src/DOM";
+import {SimplePromise} from "../src/SimplePromise";
+import {Registry} from "../src/Registry";
+import {property} from "../src/Scope/properties/Property";
+import {Property} from "../src/vsn";
+
+@Registry.controller('ControllerTestController')
+class TestController extends Controller {
+    @property()
+    public test: string;
+
+    @property(Property, {
+        type: 'integer',
+        min: 0,
+        max: 100,
+        validators: [
+            'positive',
+        ]
+    })
+    public positive_integer: number;
+
+    isValid(): boolean {
+        return this.test === 'test';
+    }
+}
+
+describe('Controller', () => {
+    it("methods should be callable from vsn-script", async () => {
+        document.body.innerHTML = `
+            <div vsn-controller:test="ControllerTestController" vsn-set:test.test="notTest" vsn-bind="test.test"></div>
+        `;
+        const dom = new DOM(document);
+        const deferred = SimplePromise.defer();
+        dom.once('built', async () => {
+            expect(await dom.eval('test.test')).toBe('notTest');
+            expect(await dom.eval('test.isValid()')).toBe(false);
+            await dom.eval('test.test = "test"');
+            expect(await dom.eval('test.isValid()')).toBe(true);
+            deferred.resolve();
+        });
+        await deferred.promise;
+    });
+});

package/test/MessageList.spec.ts

@@ -1,4 +1,4 @@
-import MessageList from "../src/MessageList";
+import {MessageList} from "../src/MessageList";
 
 describe('MessageList', () => {
     it("should reset properly", () => {