vsn 0.1.22 → 0.1.26

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "vsn",
-  "version": "0.1.22",
+  "version": "0.1.26",
   "description": "SEO Friendly Javascript/Typescript Framework",
   "keywords": [
     "framework",
     "typescript"
   ],
-  "main": "./dist/Vision.js",
+  "main": "./dist/vsn.js",
   "scripts": {
     "build": "rm -rf ./dist/ && tsc",
     "build_dev": "rm -rf ./dist/ && webpack --env BUILD=development BENCHMARK=1",
-    "demo": "rm -rf ./dist/ && webpack --env BUILD=production BENCHMARK=1 && cp ./dist/vision.min.js ./demo/vision.js",
+    "demo": "rm -rf ./dist/ && webpack --env BUILD=production BENCHMARK=1 && cp ./dist/vsn.min.js ./demo/vsn.js",
     "clean": "rm -rf ./dist/",
     "test": "karma start --single-run",
     "posttest": "codecov",
@@ -37,16 +37,16 @@
     "webpack-cli": "^4.6.0"
   },
   "homepage": "https://www.vsnjs.com",
-  "git": "https://github.com/malero/visionjs",
-  "typings": "./dist/Vision.d.ts",
-  "types": "./dist/Vision.d.ts",
+  "git": "https://github.com/malero/vsn.git",
+  "typings": "./dist/vsn.d.ts",
+  "types": "./dist/vsn.d.ts",
   "author": "Malero <contact@vsnjs.com> (https://www.vsnjs.com/)",
   "bugs": {
-    "url": "https://github.com/malero/visionjs/issues",
+    "url": "https://github.com/malero/vsn/issues",
     "email": "contact@vsnjs.com"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/malero/visionjs.git"
+    "url": "https://github.com/malero/vsn.git"
   }
 }

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,18 +1,27 @@
 import {EventDispatcher} from "simple-ts-event-dispatcher";
+import {Scope} from "./Scope";
+import {Tag} from "./Tag";
 
 export abstract class Controller extends EventDispatcher {
-    protected _tag: any;
+    protected _scope: Scope;
+    protected _tag: Tag;
+    protected _element: HTMLElement;
 
-    protected constructor() {
-        super();
+    public get scope(): Scope {
+        return this._scope;
     }
 
-    public get tag(): any {
+    public get tag(): Tag {
         return this._tag;
     }
 
-    public set tag(tag: any) {
+    public get element(): HTMLElement {
+        return this._element;
+    }
+
+    public init(scope: Scope, tag: Tag, element: HTMLElement): void {
+        this._scope = scope;
         this._tag = tag;
-        this.trigger('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";
@@ -276,7 +276,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;
@@ -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

@@ -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 {
@@ -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;
     }
 
@@ -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/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) {

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();
     }
 }

package/src/attributes/Radio.ts

@@ -9,7 +9,7 @@ export class Radio extends Attribute {
     protected key?: string;
     protected boundScope?: Scope;
 
-    public async extract() {
+    public async setup() {
         let scopeKey: string = this.getAttributeValue() || this.tag.getRawAttributeValue('name');
         let ref: ScopeReference;
         try {
@@ -21,11 +21,25 @@ export class Radio extends Attribute {
 
         this.key = await ref.getKey();
         this.boundScope = await ref.getScope();
+        await super.setup();
+    }
+
+    public async extract() {
+        if (this.tag.checked)
+            await this.handleEvent(null);
+        await super.extract();
     }
 
     public async connect() {
         this.boundScope.bind(`change:${this.key}`, this.checkSelected, this);
         this.tag.addEventHandler('change', this.getAttributeModifiers(), this.handleEvent.bind(this));
+        await this.checkSelected();
+        await super.connect();
+    }
+
+    public async evaluate() {
+        await this.checkSelected();
+        await super.evaluate();
     }
 
     async handleEvent(e) {
@@ -33,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/attributes/RootAttribute.ts

@@ -9,5 +9,6 @@ export class RootAttribute extends Attribute {
 
     public async setup() {
         this.tag.scope.set('$mobile', VisionHelper.isMobile());
+        await super.setup();
     }
 }

package/src/attributes/ScopeChange.ts

@@ -12,12 +12,14 @@ export abstract class ScopeChange 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();
     }
 
     public async connect() {
         const binding = this.getAttributeBinding();
         const ref: ScopeReference = this.tag.scope.getReference(binding, false);
         (await ref.getScope()).bind(`change:${await ref.getKey()}`, this.handleEvent.bind(this));
+        await super.connect();
     }
 
     async handleEvent(e) {

package/src/attributes/SetAttribute.ts

@@ -30,6 +30,7 @@ export class SetAttribute extends Attribute {
         }
         this.key = await ref.getKey();
         this.boundScope = await ref.getScope();
+        await super.setup();
     }
 
     public async extract() {

package/src/attributes/StandardAttribute.ts

@@ -13,14 +13,17 @@ export class StandardAttribute extends Attribute {
         if (StandardAttribute.magicAttributes.indexOf(this.key) === -1 && !this.tag.element.hasAttribute(this.attributeName)) {
             this.tag.element.setAttribute(this.attributeName, '');
         }
+        await super.setup();
     }
 
     public async extract() {
         this.updateFrom();
+        await super.extract();
     }
 
     public async connect() {
         this.tag.scope.bind(`change:${this.key}`, this.updateTo.bind(this));
+        await super.connect();
     }
 
     public mutate(mutation: MutationRecord) {

package/src/attributes/StyleAttribute.ts

@@ -5,6 +5,7 @@ import {Scope, ScopeReference} from "../Scope";
 
 @Registry.attribute('vsn-styles')
 export class StyleAttribute extends Attribute {
+    public static readonly canDefer: boolean = false;
     private scopeRef: ScopeReference;
     private styleScope: Scope;
 

package/src/attributes/TypeAttribute.ts

@@ -18,5 +18,6 @@ export class TypeAttribute extends Attribute {
         }
 
         (await ref.getScope()).setType(await ref.getKey(), type);
+        await super.extract();
     }
 }

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'),
   },
 };