vsn 0.1.54 → 0.1.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vsn",
-  "version": "0.1.54",
+  "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/DOM.ts

@@ -177,26 +177,6 @@ export class DOM extends EventDispatcher {
         for (const tag of newTags)
             await tag.compileAttributes();
 
-        for (const tag of newTags) {
-            if (tag === this.root)
-                continue;
-
-            // Find the closest ancestor
-            let parentElement: HTMLElement = tag.element.parentElement as HTMLElement;
-            let foundParent = false;
-            while (parentElement) {
-                if (allElements.indexOf(parentElement) > -1) {
-                    foundParent = true;
-                    tag.parentTag = await this.getTagForElement(parentElement);
-                    break;
-                }
-
-                parentElement = parentElement.parentElement as HTMLElement;
-            }
-            if (!foundParent)
-                console.error('Could not find parent for ', tag);
-        }
-
         for (const tag of newTags)
             await tag.setupAttributes();
 

package/src/Tag.ts

@@ -21,6 +21,8 @@ export enum TagState {
     Built,
 }
 
+export const TaggedVariable:string = '_vsn_tag';
+
 export class Tag extends DOMObject {
     public readonly rawAttributes: { [key: string]: string; };
     public readonly parsedAttributes: { [key: string]: string[]; };
@@ -55,6 +57,7 @@ export class Tag extends DOMObject {
         ...props
     ) {
         super(element, props);
+        element[TaggedVariable] = this;
         this.rawAttributes = {};
         this.parsedAttributes = {};
         this.attributes = [];
@@ -232,6 +235,23 @@ export class Tag extends DOMObject {
     }
 
     public get parentTag(): Tag {
+        if (!this._parentTag) {
+            let parentElement: HTMLElement = this.element.parentElement as HTMLElement;
+            let foundParent = false;
+            while (parentElement) {
+                if (parentElement[TaggedVariable]) {
+                    foundParent = true;
+                    this.parentTag = parentElement[TaggedVariable];
+                    break;
+                }
+
+                parentElement = parentElement.parentElement as HTMLElement;
+            }
+
+            if (!foundParent && DOM.instance.root !== this)
+                return DOM.instance.root;
+        }
+
         return this._parentTag;
     }
 
@@ -253,8 +273,8 @@ export class Tag extends DOMObject {
         if (this.uniqueScope)
             return this.createScope();
 
-        if (!!this._parentTag)
-            return this._parentTag.scope;
+        if (!!this.parentTag)
+            return this.parentTag.scope;
 
         return null;
     }
@@ -293,7 +313,7 @@ export class Tag extends DOMObject {
     }
 
     public addToParentElement() {
-        this._parentTag.element.appendChild(this.element)
+        this.parentTag.element.appendChild(this.element)
     }
 
     public hide() {
@@ -307,7 +327,6 @@ export class Tag extends DOMObject {
     public findAncestorByAttribute(attr: string, includeSelf: boolean = false): Tag {
         if (includeSelf && this.hasAttribute(attr))
             return this;
-
         return this.parentTag ? this.parentTag.findAncestorByAttribute(attr, true) : null;
     }
 
@@ -472,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) {
@@ -496,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;
         }
     }
 
@@ -519,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);
         }
     }
 
@@ -537,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;
@@ -555,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/List.ts

@@ -25,9 +25,11 @@ export class List extends Attribute {
     public async setup() {
         if (this.tag.element.children.length > 0) {
             const template = this.tag.element.children[0];
+            const templateTag: Tag = await this.tag.dom.getTagForElement(template);
 
             if (template) {
                 if (template.hasAttribute('vsn-template')) {
+                    templateTag.parentTag = this.tag; // Set parentTag before removing from DOM
                     template.removeAttribute('vsn-template');
                     this.tag.element.removeChild(template);
                     this.template = template;

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/test/attributes/ListItem.spec.ts

@@ -68,6 +68,7 @@ describe('ListItem', () => {
                 </ul>
             </div>
         `;
+        console.log('########### test');
         const dom = new DOM(document);
         dom.once('built', async () => {
             const list = await dom.getTagForElement(document.getElementById('test'));

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