vsn 0.1.56 → 0.1.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vsn",
-  "version": "0.1.56",
+  "version": "0.1.57",
   "description": "SEO Friendly Javascript/Typescript Framework",
   "keywords": [
     "framework",
@@ -15,11 +15,10 @@
   "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/vsn.min.js ./demo/vsn.js",
-    "clean": "rm -rf ./dist/",
+    "demo": "webpack --env BUILD=production BENCHMARK=1 && cp ./dist/vsn.min.js ./demo/vsn.js",
     "test": "karma start --single-run",
     "posttest": "codecov",
-    "sample": "rm -rf sample/dist/ && tsc -p sample/ && node sample/dist/sample/index.js"
+    "clean": "rm -rf ./dist/"
   },
   "license": "MIT",
   "dependencies": {},

package/src/AST/FunctionNode.ts

@@ -0,0 +1,31 @@
+import {Scope} from "../Scope";
+import {DOM} from "../DOM";
+import {Tag} from "../Tag";
+import {Token, TreeNode} from "../AST";
+import {Node} from "./Node";
+import {LiteralNode} from "./LiteralNode";
+import {RootScopeMemberNode} from "./RootScopeMemberNode";
+import {ScopeMemberNode} from "./ScopeMemberNode";
+
+export class FunctionNode extends Node implements TreeNode {
+    constructor(
+        public readonly name: LiteralNode<string>,
+        public readonly variables: LiteralNode<string>[],
+        public readonly block: RootScopeMemberNode | ScopeMemberNode,
+    ) {
+        super();
+    }
+
+    protected _getChildNodes(): Node[] {
+        return [
+            this.block
+        ];
+    }
+
+    public async prepare(scope: Scope, dom: DOM, tag: Tag = null) {}
+    public async evaluate(scope: Scope, dom: DOM, tag: Tag = null) {}
+
+    public static parse(lastNode, token, tokens: Token[]): FunctionNode {
+        return new FunctionNode(null, null, null);
+    }
+}

package/src/DOM/DOMObject.ts

@@ -1,9 +1,15 @@
 import {Scope} from "../Scope";
 import {EventDispatcher} from "../EventDispatcher";
 
+export interface IEventHandler {
+    event: string;
+    handler: (...args: any[]) => any;
+    context?: any;
+}
+
 export abstract class DOMObject extends EventDispatcher {
     protected _scope: Scope;
-    protected onEventHandlers: {[key:string]:any[]};
+    protected onEventHandlers: {[key:string]: IEventHandler[]};
     protected _uniqueScope: boolean = false;
 
     constructor(

package/src/Tag.ts

@@ -491,7 +491,7 @@ export class Tag extends DOMObject {
 
     public async connectAttributes() {
         if (this.isInput) {
-            this.addEventHandler('input', [], this.inputMutation.bind(this));
+            this.addEventHandler('input', [], this.inputMutation, this);
         }
 
         for (const attr of this.nonDeferredAttributes) {
@@ -515,9 +515,12 @@ export class Tag extends DOMObject {
                     option.removeAttribute('selected');
                 }
             }
-            this.element.setAttribute('value', values.join(','));
+            //this.element.setAttribute('value', );
+            this.value = values.join(',');
         } else {
-            this.element.setAttribute('value', e.target.value);
+            //this.element.setAttribute('value', e.target.value);
+            //(this.element as any).value = e.target.value;
+            this.value = e.target.value;
         }
     }
 
@@ -538,13 +541,14 @@ export class Tag extends DOMObject {
     protected handleEvent(eventType: string, e) {
         if (e)
             e.stopPropagation();
+
         if (!this.onEventHandlers[eventType])
             return;
 
         this.scope.set('$event', e);
         this.scope.set('$value', this.value);
         for (const handler of this.onEventHandlers[eventType]) {
-            handler(e);
+            handler.handler.call(handler.context, e);
         }
     }
 
@@ -556,7 +560,7 @@ export class Tag extends DOMObject {
         return attribute.replace(`|${modifier}`, '');
     }
 
-    public addEventHandler(eventType: string, modifiers: string[], handler) {
+    public addEventHandler(eventType: string, modifiers: string[], handler, context: any = null) {
         let passiveValue: boolean = null;
         if (modifiers.indexOf('active') > -1) {
             passiveValue = false;
@@ -574,16 +578,20 @@ export class Tag extends DOMObject {
             element.addEventListener(eventType, this.handleEvent.bind(this, eventType), opts);
         }
 
-        this.onEventHandlers[eventType].push(handler);
+        this.onEventHandlers[eventType].push({
+            handler: handler,
+            event: eventType,
+            context: context,
+        });
     }
 
-    public removeEventHandler(eventType: string, handler) {
+    public removeEventHandler(eventType: string, handler, context: any = null) {
         if (!this.onEventHandlers[eventType])
             return;
 
-        const index = this.onEventHandlers[eventType].indexOf(handler);
-        if (index > -1) {
-            this.onEventHandlers[eventType].splice(index, 1);
+        const _handler = this.onEventHandlers[eventType].find(h => h.handler === handler && h.context === context);
+        if (_handler) {
+            this.onEventHandlers[eventType].splice(this.onEventHandlers[eventType].indexOf(_handler), 1);
             if (this.onEventHandlers[eventType].length === 0) {
                 this.element.removeEventListener(eventType, this.handleEvent.bind(this, eventType));
             }

package/src/Types.ts

@@ -18,7 +18,7 @@ export class Types {
 
     @Registry.type('float')
     public static float(value: string) {
-        value = `${value}`.replace(/[^0-9.]+/, '');
+        value = `${value}`.replace(/[^\d.]+/, '');
         return parseFloat(value);
     }
 

package/src/attributes/Bind.ts

@@ -44,7 +44,6 @@ export class Bind extends Attribute {
 
         this.key = await ref.getKey();
         this.boundScope = await ref.getScope();
-
         if (!!this.valueFromElement)
             this.updateFrom();
 
@@ -80,12 +79,12 @@ export class Bind extends Attribute {
 
     get valueFromElement(): string {
         let value;
+
         if (this.property) {
             value = this.tag.getElementAttribute(this.property);
         } else {
             value = this.tag.value;
         }
-
         return value;
     }
 

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.bind(this));
+        this.tag.addEventHandler('keydown', this.getAttributeModifiers(), 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.bind(this));
+        this.tag.addEventHandler('keydown', this.getAttributeModifiers(), 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.bind(this));
+        this.tag.addEventHandler('keyup', this.getAttributeModifiers(), this.handleEvent, this);
         await super.connect();
     }
 }

package/src/attributes/LazyAttribute.ts

@@ -12,7 +12,7 @@ export class LazyAttribute extends On {
     }
 
     public async connect() {
-        this.tag.addEventHandler('scroll', ['passive'], this.handleEvent.bind(this));
+        this.tag.addEventHandler('scroll', ['passive'], this.handleEvent, this);
         await this.handleEvent();
     }
 
@@ -20,7 +20,7 @@ export class LazyAttribute extends On {
         if (!this.loaded && window.scrollY + window.outerHeight >= this.eleTop) {
             this.loaded = true;
             await this.handler.evaluate(this.tag.scope, this.tag.dom, this.tag);
-            this.tag.removeEventHandler('scroll', this.handleEvent.bind(this));
+            this.tag.removeEventHandler('scroll', this.handleEvent, this);
         }
     }
 }

package/src/attributes/On.ts

@@ -32,7 +32,7 @@ export abstract class On extends Attribute {
     }
 
     public async connect() {
-        this.tag.addEventHandler(this.getAttributeBinding(), this.getAttributeModifiers(), this.handleEvent.bind(this));
+        this.tag.addEventHandler(this.getAttributeBinding(), this.getAttributeModifiers(), this.handleEvent, this);
         await super.connect();
     }
 }

package/src/vsn.ts

@@ -43,7 +43,7 @@ export class Vision extends EventDispatcher {
         return this._dom;
     }
 
-    public async eval(code: string) {
+    public async exec(code: string) {
         return await this._dom.exec(code);
     }
 
@@ -55,7 +55,7 @@ export class Vision extends EventDispatcher {
         await this._dom.buildFrom(document, true);
         const now = (new Date()).getTime();
         const setupTime = now - startTime;
-        console.warn(`Took ${setupTime}ms to start up VisionJS. https://www.vsnjs.com/`);
+        console.warn(`Took ${setupTime}ms to start up VisionJS. https://www.vsnjs.com/`, window ? `v${window['VSN_VERSION']}` : null);
     }
 
     public static get instance() {

package/webpack.config.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const webpack = require("webpack");
+const TerserPlugin = require("terser-webpack-plugin");
 
 const defaultConfiguration = {
   entry: './src/vsn.ts',
@@ -20,6 +21,15 @@ const defaultConfiguration = {
     filename: 'vsn.min.js',
     path: path.resolve(__dirname, 'dist'),
   },
+  optimization: {
+    minimizer: [new TerserPlugin({
+    terserOptions: {
+      format: {
+        preamble: `/* Copyright ${new Date().getUTCFullYear()}, VSNjs. ${require('./package.json').name} ${require('./package.json').version} (${new Date().toUTCString()}) */if (window) window['VSN_VERSION']='${require('./package.json').version}';`
+      }
+    }
+  })],
+  }
 };
 
 function buildConfig(env) {