vsn 0.1.56 → 0.1.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vsn",
-  "version": "0.1.56",
+  "version": "0.1.59",
   "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,50 @@
+import {Scope} from "../Scope";
+import {DOM} from "../DOM";
+import {Tag} from "../Tag";
+import {Token, Tree, TreeNode} from "../AST";
+import {Node} from "./Node";
+import {BlockNode} from "./BlockNode";
+
+export class FunctionNode extends Node implements TreeNode {
+    protected requiresPrep: boolean = true;
+
+    constructor(
+        public readonly name: string,
+        public readonly args: string[],
+        public readonly block: BlockNode
+    ) {
+        super();
+    }
+
+    protected _getChildNodes(): Node[] {
+        return [
+            this.block
+        ];
+    }
+
+    public async prepare(scope: Scope, dom: DOM, tag: Tag = null) {
+        scope.set(this.name, async (...args) => {
+            const functionScope = new Scope(scope);
+            for (const arg of this.args) {
+                functionScope.set(arg, args.shift());
+            }
+            return await this.evaluate(functionScope, dom, tag);
+        });
+    }
+
+    public async evaluate(scope: Scope, dom: DOM, tag: Tag = null) {
+        return await this.block.evaluate(scope, dom, tag);
+    }
+
+    public static parse(lastNode, token, tokens: Token[]): FunctionNode {
+        tokens.shift(); // skip 'func'
+        const name = tokens.shift();
+        const argTokens = Tree.getBlockTokens(tokens);
+        const funcArgs: string[] = [];
+        for (const t of argTokens) {
+            funcArgs.push(t[0].value);
+        }
+        const block = Tree.processTokens(Tree.getBlockTokens(tokens, null)[0]);
+        return new FunctionNode(name.value, funcArgs, block);
+    }
+}

package/src/AST.ts

@@ -26,6 +26,7 @@ import {BooleanLiteralNode} from "./AST/BooleanLiteralNode";
 import {NotNode} from "./AST/NotNode";
 import {XHRNode} from "./AST/XHRNode";
 import {StringFormatNode} from "./AST/StringFormatNode";
+import {FunctionNode} from "./AST/FunctionNode";
 
 function lower(str: string): string {
     return str ? str.toLowerCase() : null;
@@ -65,6 +66,7 @@ export enum TokenType {
     IF,
     ELSE_IF,
     ELSE,
+    FUNC,
     NAME,
     L_BRACE,
     R_BRACE,
@@ -194,6 +196,10 @@ const TOKEN_PATTERNS: TokenPattern[] = [
         type: TokenType.ELSE,
         pattern: /^else\s?(?=\{)/
     },
+    {
+        type: TokenType.FUNC,
+        pattern: /^func\s/
+    },
     {
         type: TokenType.ELEMENT_ATTRIBUTE,
         pattern: /^\.?@[-_a-zA-Z0-9]*/
@@ -482,6 +488,10 @@ export class Tree {
                 node = ForStatementNode.parse(node, token, tokens);
                 blockNodes.push(node);
                 node = null;
+            } else if (token.type === TokenType.FUNC) {
+                node = FunctionNode.parse(node, token, tokens);
+                blockNodes.push(node);
+                node = null;
             } else if (StringFormatNode.match(tokens)) {
                 node = StringFormatNode.parse(node, tokens[0], tokens);
             } else if (token.type === TokenType.STRING_LITERAL) {

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

@@ -271,7 +271,7 @@ export class Tag extends DOMObject {
             return this._scope;
 
         if (this.uniqueScope)
-            return this.createScope();
+            return this.createScope(true);
 
         if (!!this.parentTag)
             return this.parentTag.scope;
@@ -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));
             }
@@ -593,18 +601,16 @@ export class Tag extends DOMObject {
     public createScope(force: boolean = false): Scope {
         // Standard attribute requires a unique scope
         // @todo: Does this cause any issues with attribute bindings on the parent scope prior to having its own scope? hmm...
-        if ((!this.uniqueScope && force) || this.uniqueScope) {
+        if (!this._scope && (force || this.uniqueScope)) {
             this._uniqueScope = true;
             this._scope = new Scope();
 
             if (this.parentTag) {
                 this.scope.parentScope = this.parentTag.scope;
             }
-
-            return this._scope;
         }
 
-        return null;
+        return this._scope;
     }
 
     async watchAttribute(attributeName: string) {

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/Exec.ts

@@ -7,8 +7,12 @@ export class Exec extends Attribute {
     public static readonly canDefer: boolean = false;
     protected tree: Tree;
 
+    public get code() {
+        return this.getAttributeValue();
+    }
+
     public async compile() {
-        this.tree = new Tree(this.getAttributeValue());
+        this.tree = new Tree(this.code);
         await this.tree.prepare(this.tag.scope, this.tag.dom, this.tag);
         await super.compile();
     }

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/attributes/ScriptAttribute.ts

@@ -0,0 +1,9 @@
+import {Registry} from "../Registry";
+import {Exec} from "./Exec";
+
+@Registry.attribute('vsn-script')
+export class ScriptAttribute extends Exec {
+    public get code() {
+        return this.tag.element.innerText;
+    }
+}

package/src/attributes/_imports.ts

@@ -19,6 +19,7 @@ export {Referenced} from "./Referenced";
 export {RootAttribute} from "./RootAttribute";
 export {ScopeAttribute} from "./ScopeAttribute";
 export {ScopeChange} from "./ScopeChange";
+export {ScriptAttribute} from "./ScriptAttribute";
 export {SetAttribute} from "./SetAttribute";
 export {StandardAttribute} from "./StandardAttribute";
 export {StyleAttribute} from "./StyleAttribute";

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/test/AST/FunctionNode.spec.ts

@@ -0,0 +1,14 @@
+import {Tree} from "../../src/AST";
+import {Scope} from "../../src/Scope";
+
+
+describe('FunctionNode', () => {
+    it("properly define a simple function", async () => {
+        const tree = new Tree(`func add(a, b) { return a + b; }; add(1, 2);`);
+        const scope = new Scope();
+        await tree.prepare(scope, null, null);
+        expect(scope.get('add')).toBeDefined();
+        const v = await tree.evaluate(scope, null, null);
+        expect(v).toBe(3);
+    });
+});

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) {