vsn 0.1.24 → 0.1.26

package/src/AST.ts

@@ -78,7 +78,8 @@ export enum TokenType {
     ELEMENT_REFERENCE,
     ELEMENT_ATTRIBUTE,
     ELEMENT_STYLE,
-    ELEMENT_QUERY
+    ELEMENT_QUERY,
+    UNIT,
 }
 
 const TOKEN_PATTERNS: TokenPattern[] = [
@@ -98,6 +99,10 @@ const TOKEN_PATTERNS: TokenPattern[] = [
         type: TokenType.TYPE_FLOAT,
         pattern: /^float+/
     },
+    {
+        type: TokenType.UNIT,
+        pattern: /^\d+\.?\d?(?:cm|mm|in|px|pt|pc|em|ex|ch|rem|vw|vh|vmin|vmax|%)/
+    },
     {
         type: TokenType.TYPE_STRING,
         pattern: /^string+/
@@ -144,11 +149,11 @@ const TOKEN_PATTERNS: TokenPattern[] = [
     },
     {
         type: TokenType.ELEMENT_ATTRIBUTE,
-        pattern: /^\.?@[_a-zA-Z0-9]*/
+        pattern: /^\.?@[-_a-zA-Z0-9]*/
     },
     {
         type: TokenType.ELEMENT_STYLE,
-        pattern: /^\.?\$[a-zA-Z0-9]*/
+        pattern: /^\.?\$[-a-zA-Z0-9]*/
     },
     {
         type: TokenType.ELEMENT_REFERENCE,
@@ -687,6 +692,55 @@ class NumberLiteralNode extends LiteralNode<number> {
     }
 }
 
+class UnitLiteral {
+    protected _amount: number;
+    protected _unit: string;
+
+    constructor(
+        protected _value: any
+    ) {
+        this.value = this._value;
+    }
+
+    get amount(): number {
+        return this._amount;
+    }
+
+    get unit(): string {
+        return this._unit;
+    }
+
+    get value(): string {
+        return `${this._amount}${this._unit}`;
+    }
+
+    set value(value: string) {
+        if (value.indexOf('.') > -1) {
+            this._amount = parseFloat(value)
+        } else {
+            this._amount = parseInt(value);
+        }
+
+        if (isNaN(this._amount))
+            this._amount = 0;
+
+        const unit = /[^\d.]+$/.exec(value);
+        this._unit = unit && unit[0] || '';
+    }
+
+    public toString() {
+        return this.value;
+    }
+}
+
+class UnitLiteralNode extends LiteralNode<UnitLiteral> {
+    constructor(
+        _value: any
+    ) {
+        super(new UnitLiteral(_value));
+    }
+}
+
 
 class FunctionCallNode<T = any> extends Node implements TreeNode {
     constructor(
@@ -895,6 +949,8 @@ class ArithmeticAssignmentNode extends Node implements TreeNode {
 
                 if (left instanceof Array) {
                     left = this.handleArray(name, left, right, localScope);
+                } else if ((left as any) instanceof UnitLiteral || right instanceof UnitLiteral) {
+                    left = this.handleUnit(name, left, right, localScope);
                 } else if (Number.isFinite(left)) {
                     left = this.handleNumber(name, left, right, localScope);
                 } else {
@@ -958,6 +1014,38 @@ class ArithmeticAssignmentNode extends Node implements TreeNode {
         return left;
     }
 
+    public handleUnit(key, left, right, scope) {
+        if (!(left instanceof UnitLiteral)) {
+            left = new UnitLiteral(left);
+        }
+
+        if (!(right instanceof UnitLiteral)) {
+            right = new UnitLiteral(right);
+        }
+        const unit = left.unit || right.unit || 'px';
+
+        switch (this.type) {
+            case TokenType.ASSIGN:
+                left = right;
+                break;
+            case TokenType.ADD_ASSIGN:
+                left = new UnitLiteral(`${left.amount+right.amount}${unit}`);
+                break;
+            case TokenType.SUBTRACT_ASSIGN:
+                left = new UnitLiteral(`${left.amount-right.amount}${unit}`);
+                break;
+            case TokenType.MULTIPLY_ASSIGN:
+                left = new UnitLiteral(`${left.amount*right.amount}${unit}`);
+                break;
+            case TokenType.DIVIDE_ASSIGN:
+                left = new UnitLiteral(`${left.amount/right.amount}${unit}`);
+                break;
+        }
+
+        scope.set(key, left);
+        return left;
+    }
+
     public async handleDOMObject(key: string, dom: DOM, domObject: DOMObject, tag: Tag) {
         let left = domObject.scope.get(key);
         let right: number | Array<any> | string = await this.right.evaluate(domObject.scope, dom, tag);
@@ -1486,6 +1574,9 @@ export class Tree {
                 node = ArithmeticAssignmentNode.parse(node, token, tokens);
             } else if (tokens[0].type === TokenType.WHITESPACE) {
                 tokens.splice(0, 1);
+            } else if (tokens[0].type === TokenType.UNIT) {
+                node = new UnitLiteralNode(tokens[0].value);
+                tokens.splice(0, 1);
             } else if (tokens[0].type === TokenType.BOOLEAN_LITERAL) {
                 node = new BooleanLiteralNode(tokens[0].value);
                 tokens.splice(0, 1);

package/src/Controller.ts

@@ -1,10 +1,27 @@
 import {EventDispatcher} from "simple-ts-event-dispatcher";
+import {Scope} from "./Scope";
 import {Tag} from "./Tag";
 
 export abstract class Controller extends EventDispatcher {
-    protected constructor(
-        protected tag: Tag
-    ) {
-        super();
+    protected _scope: Scope;
+    protected _tag: Tag;
+    protected _element: HTMLElement;
+
+    public get scope(): Scope {
+        return this._scope;
+    }
+
+    public get tag(): Tag {
+        return this._tag;
+    }
+
+    public get element(): HTMLElement {
+        return this._element;
+    }
+
+    public init(scope: Scope, tag: Tag, element: HTMLElement): void {
+        this._scope = scope;
+        this._tag = tag;
+        this._element = element;
     }
 }

package/src/DOM.ts

@@ -183,7 +183,7 @@ export class DOM extends EventDispatcher {
             if (tag === this.root)
                 continue;
 
-            // Find closest ancestor
+            // Find the closest ancestor
             let parentElement: HTMLElement = tag.element.parentElement as HTMLElement;
             let foundParent = false;
             while (parentElement) {

package/src/Registry.ts

@@ -1,7 +1,6 @@
 import {EventDispatcher} from "simple-ts-event-dispatcher";
 import {IDeferred, IPromise, Promise as SimplePromise} from "simple-ts-promise";
 import {VisionHelper} from "./helpers/VisionHelper";
-import {benchmark} from "./Bencmark";
 
 export function register(store: string, key: string = null, setup: () => void = null) {
     return function(target: any, _key: string = null) {
@@ -28,7 +27,6 @@ export class RegistryStore extends EventDispatcher {
         this.trigger(`registered:${key}`, item);
     }
 
-    @benchmark('RegistryStore.get')
     get(key: string): IPromise<any> {
         const deferred: IDeferred<any> = SimplePromise.defer();
 

package/src/Scope.ts

@@ -1,4 +1,4 @@
-import {DataModel} from "simple-ts-models";
+import {DataModel, Model} from "simple-ts-models";
 import {EventCallback, EventCallbackList, EventDispatcher, EventDispatcherCallback} from "simple-ts-event-dispatcher";
 import {Registry} from "./Registry";
 import {DOM} from "./DOM";
@@ -352,6 +352,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;
 

package/src/Tag.ts

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

package/src/attributes/On.ts

@@ -26,6 +26,8 @@ export abstract class On extends Attribute {
     }
 
     async handleEvent(e) {
+        if (this.hasModifier('preventdefault'))
+            e.preventDefault();
         await this.handler.evaluate(this.tag.scope, this.tag.dom, this.tag);
     }
 

package/src/attributes/Radio.ts

@@ -47,6 +47,7 @@ export class Radio extends Attribute {
     }
 
     async checkSelected() {
-        this.tag.checked = this.boundScope.get(this.key) === this.tag.value;
+        const scopeValue = this.boundScope.get(this.key);
+        this.tag.checked = `${scopeValue}` === this.tag.value;
     }
 }

package/src/{Vision.ts → vsn.ts}

@@ -73,4 +73,5 @@ export * from './Attribute';
 export * from './AST';
 export {DOM} from './DOM';
 export {WrappedArray, Scope, ScopeReference} from './Scope';
+export {Controller} from './Controller';
 export const vision: Vision = Vision.instance;

package/test/DOM.spec.ts

@@ -1,4 +1,4 @@
-import "../src/Vision";
+import "../src/vsn";
 import {DOM} from "../src/DOM";
 import {Registry} from "../src/Registry";
 

package/test/attributes/JSONAttribute.spec.ts

@@ -77,7 +77,7 @@ describe('JSONAttribute', () => {
     it("vsn-json should work with a ref path", (done) => {
         document.body.innerHTML = `
             <div vsn-name="testing">
-                <div vsn-json:testing.test="{&quot;testing&quot;: 123}"></div>
+                <div vsn-json:testing.test='{"testing": 123}'></div>
             </div>
         `;
         const dom = new DOM(document);

package/webpack.config.js

@@ -2,7 +2,7 @@ const path = require('path');
 const webpack = require("webpack");
 
 const defaultConfiguration = {
-  entry: './src/Vision.ts',
+  entry: './src/vsn.ts',
   module: {
     rules: [
       {
@@ -17,7 +17,7 @@ const defaultConfiguration = {
   },
   plugins: [],
   output: {
-    filename: 'vision.min.js',
+    filename: 'vsn.min.js',
     path: path.resolve(__dirname, 'dist'),
   },
 };