vsn 0.1.67 → 0.1.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vsn",
-  "version": "0.1.67",
+  "version": "0.1.70",
   "description": "SEO Friendly Javascript/Typescript Framework",
   "keywords": [
     "framework",

package/src/AST/ClassNode.ts

@@ -6,11 +6,13 @@ import {Node} from "./Node";
 import {BlockNode} from "./BlockNode";
 import {Registry} from "../Registry";
 import {OnNode} from "./OnNode";
+import {FunctionNode} from "./FunctionNode";
 
 export class ClassNode extends Node implements TreeNode {
     public static readonly classes: {[name: string]: ClassNode} = {};
     protected requiresPrep: boolean = true;
     public readonly classScope: Scope = new Scope();
+    protected _ready: boolean = false;
 
     constructor(
         public readonly name: string,
@@ -32,6 +34,10 @@ export class ClassNode extends Node implements TreeNode {
         ClassNode.classes[this.name] = this;
         await this.block.prepare(this.classScope, dom, tag, meta);
         Registry.class(this);
+
+        for (const element of Array.from(dom.querySelectorAll(`.${this.name}`))) {
+            await ClassNode.checkForClassChanges(element as HTMLElement, dom, element[Tag.TaggedVariable] || null);
+        }
     }
 
     public async prepareTag(tag: Tag, dom: DOM, hasConstructor: boolean | null = null) {
@@ -42,17 +48,10 @@ export class ClassNode extends Node implements TreeNode {
         const meta = this.updateMeta();
         await this.block.prepare(tag.scope, dom, tag, meta);
         if (hasConstructor) {
-            const fnc = this.classScope.get('construct');
-            (await fnc.evaluate(tag.scope, dom, tag))();
-        }
-        /*
-        for (const key of this.classScope.keys) {
-            if (this.classScope.get(key) instanceof OnNode) {
-                const on = this.classScope.get(key) as OnNode;
-                tag.addEventHandler(on.name, [], await on.getFunction(tag.scope, dom, tag), on);
-            }
+            const fncCls: FunctionNode = this.classScope.get('construct') as FunctionNode;
+            const fnc = await fncCls.getFunction(tag.scope, dom, tag, false);
+            await fnc();
         }
-         */
         tag.preppedClasses.push(this.name);
     }
 
@@ -61,8 +60,9 @@ export class ClassNode extends Node implements TreeNode {
             hasDeconstructor = this.classScope.has('deconstruct');
 
         if (hasDeconstructor) {
-            const fnc = this.classScope.get('deconstruct');
-            (await fnc.evaluate(tag.scope, dom, tag))();
+            const fncCls: FunctionNode = this.classScope.get('deconstruct') as FunctionNode;
+            const fnc = await fncCls.getFunction(tag.scope, dom, tag, false);
+            await fnc();
         }
         for (const key of this.classScope.keys) {
             if (this.classScope.get(key) instanceof OnNode) {
@@ -93,7 +93,8 @@ export class ClassNode extends Node implements TreeNode {
     public static async checkForClassChanges(element: HTMLElement, dom: DOM, tag: Tag = null) {
         const classes: string[] = Array.from(element.classList);
         let addedClasses: string[] = classes.filter(c => Registry.instance.classes.has(c));
-        let removedClasses: string[] = [];
+        let removedClasses: string[];
+
         if (!tag) {
             tag = await dom.getTagForElement(element, true);
         }

package/src/AST/FunctionCallNode.ts

@@ -7,6 +7,7 @@ import {FunctionArgumentNode} from "./FunctionArgumentNode";
 import {ScopeMemberNode} from "./ScopeMemberNode";
 import {FunctionNode} from "./FunctionNode";
 import {Registry} from "../Registry";
+import {ElementQueryNode} from "./ElementQueryNode";
 
 export class FunctionCallNode<T = any> extends Node implements TreeNode {
     constructor(
@@ -24,27 +25,43 @@ export class FunctionCallNode<T = any> extends Node implements TreeNode {
     }
 
     public async evaluate(scope: Scope, dom: DOM, tag: Tag = null) {
+        // @todo: Need to rewrite/refactor this. It's a bit of a mess with element queries.
+        let tags: Tag[];
         let functionScope: Scope = scope;
         if (this.fnc instanceof ScopeMemberNode) {
             functionScope = await this.fnc.scope.evaluate(scope, dom, tag);
+            if (this.fnc.scope instanceof ElementQueryNode) {
+                tags = await this.fnc.scope.evaluate(scope, dom, tag) as Tag[];
+            } else {
+               tags = [tag];
+            }
         }
 
         const values = await this.args.evaluate(scope, dom, tag);
-        const func = await this.fnc.evaluate(scope, dom, tag);
-        if (!func) {
+        let func = await this.fnc.evaluate(scope, dom, tag);
+        if (!func || func instanceof Array) {
             const functionName = await (this.fnc as any).name.evaluate(scope, dom, tag);
             const returnValues = [];
+            const toCleanup = [];
             let calls = 0;
-            for (const className of tag.preppedClasses) {
-                const cls = Registry.instance.classes.getSynchronous(className);
-                if (cls) {
-                    if (cls.classScope.has(functionName)) {
-                        const fnc = cls.classScope.get(functionName);
-                        returnValues.push((await fnc.evaluate(functionScope, dom, tag))(...values));
-                        calls++;
+            for (const _tag of tags) {
+                let tagNum = 0;
+                for (const className of _tag.preppedClasses) {
+                    tagNum++;
+                    const cls = Registry.instance.classes.getSynchronous(className);
+                    if (cls) {
+                        if (cls.classScope.has(functionName)) {
+                            const fnc = cls.classScope.get(functionName);
+                            toCleanup.push(fnc);
+                            returnValues.push(await (await fnc.evaluate(_tag.scope, dom, _tag))(...values));
+                            calls++;
+                        }
                     }
                 }
             }
+            for (const fnc of toCleanup) {
+                await fnc.collectGarbage();
+            }
             if (calls === 1) {
                 return returnValues[0];
             } else if (calls === 0) {
@@ -53,7 +70,9 @@ export class FunctionCallNode<T = any> extends Node implements TreeNode {
                 return returnValues;
             }
         } else if (func instanceof FunctionNode) {
-            return (await func.evaluate(functionScope, dom, tag) as any)(...values);
+            const r = await (await func.evaluate(functionScope, dom, tag) as any)(...values);
+            await func.collectGarbage();
+            return r;
         } else {
             return func.call(functionScope.wrapped || functionScope, ...values);
         }

package/src/AST/FunctionNode.ts

@@ -7,6 +7,7 @@ import {BlockNode} from "./BlockNode";
 
 export class FunctionNode extends Node implements TreeNode {
     protected requiresPrep: boolean = true;
+    protected garbage: FunctionScope[] = [];
 
     constructor(
         public readonly name: string,
@@ -32,9 +33,24 @@ export class FunctionNode extends Node implements TreeNode {
         return await this.getFunction(scope, dom, tag);
     }
 
-    public async getFunction(scope: Scope, dom: DOM, tag: Tag = null) {
+    public async collectGarbage() {
+        for (const f of this.garbage) {
+            f.collectGarbage();
+        }
+        this.garbage = [];
+    }
+
+    public async getFunction(scope: Scope, dom: DOM, tag: Tag = null, createFunctionScope: boolean = true) {
+        console.log(`FunctionNode.getFunction(${this.name})`);
+        const self = this;
         return async (...args) => {
-            const functionScope = new FunctionScope(scope);
+            let functionScope;
+            if (createFunctionScope && !(scope instanceof FunctionScope)) {
+                functionScope = new FunctionScope(scope);
+                self.garbage.push(functionScope);
+            } else {
+                functionScope = scope;
+            }
             for (const arg of this.args) {
                 functionScope.set(arg, args.shift());
             }

package/src/AST/ModifierNode.ts

@@ -0,0 +1,30 @@
+import {Scope} from "../Scope";
+import {DOM} from "../DOM";
+import {Tag} from "../Tag";
+import {Token, TreeNode} from "../AST";
+import {Node} from "./Node";
+import {BlockNode} from "./BlockNode";
+
+
+export class ModifierNode extends Node implements TreeNode {
+    constructor(
+        public readonly name: string,
+        public readonly block: BlockNode
+    ) {
+        super();
+    }
+
+    public async prepare(scope: Scope, dom: DOM, tag: Tag = null, meta?: any): Promise<void> {
+        return null;
+    }
+
+    public async evaluate(scope: Scope, dom: DOM, tag: Tag = null) {
+        return null;
+    }
+
+    public static parse(lastNode, token, tokens: Token[]): Node {
+        const modifier = tokens.shift().value.substr(1);
+        lastNode.modifiers.push(modifier);
+        return lastNode;
+    }
+}

package/src/AST/Node.ts

@@ -8,6 +8,7 @@ export abstract class Node implements TreeNode {
     protected _isPreparationRequired: boolean;
     protected childNodes: Node[];
     protected nodeCache: {[key: string]: Node[]} = {};
+    public readonly modifiers: string[] = [];
     abstract evaluate(scope: Scope, dom: DOM, tag?: Tag);
 
     isPreparationRequired(): boolean {
@@ -33,6 +34,12 @@ export abstract class Node implements TreeNode {
         }
     }
 
+    async cleanup(scope: Scope, dom: DOM, tag: Tag) {
+        for (const node of this.getChildNodes()) {
+            await node.cleanup(scope, dom, tag);
+        }
+    }
+
     protected _getChildNodes(): Node[] {
         return [];
     }

package/src/AST/OnNode.ts

@@ -7,8 +7,13 @@ import {Tag} from "../Tag";
 export class OnNode extends FunctionNode implements TreeNode {
     public async prepare(scope: Scope, dom: DOM, tag: Tag = null, meta): Promise<void> {
         const classPrep = meta?.ClassNodePrepare; // Don't add event handler if we're in class prep
-        if (tag && !classPrep)
-            tag.addEventHandler(this.name, [], await this.getFunction(scope, dom, tag), this);
+        if (tag && !classPrep) {
+            const func = await this.getFunction(scope, dom, tag);
+            tag.addEventHandler(this.name, [], async (...args) => {
+                await func(...args);
+                await this.collectGarbage();
+            }, this);
+        }
         await super.prepare(scope, dom, tag, meta);
     }
 

package/src/AST/RootScopeMemberNode.ts

@@ -3,8 +3,9 @@ import {DOM} from "../DOM";
 import {Tag} from "../Tag";
 import {TreeNode} from "../AST";
 import {Node} from "./Node";
+import {ScopeNodeAbstract} from "./ScopeNodeAbstract";
 
-export class RootScopeMemberNode<T = any> extends Node implements TreeNode {
+export class RootScopeMemberNode<T = any> extends ScopeNodeAbstract implements TreeNode {
     constructor(
         public readonly name: TreeNode<string>
     ) {
@@ -19,6 +20,7 @@ export class RootScopeMemberNode<T = any> extends Node implements TreeNode {
 
     async evaluate(scope: Scope, dom: DOM, tag: Tag = null) {
         const name = await this.name.evaluate(scope, dom, tag);
+        await this.applyModifiers(name, scope, dom, tag);
         const value = scope.get(name);
         return value instanceof Scope && value.wrapped || value;
     }

package/src/AST/ScopeMemberNode.ts

@@ -6,8 +6,9 @@ import {DOMObject} from "../DOM/DOMObject";
 import {TreeNode} from "../AST";
 import {Node} from "./Node";
 import {ElementQueryNode} from "./ElementQueryNode";
+import {ScopeNodeAbstract} from "./ScopeNodeAbstract";
 
-export class ScopeMemberNode extends Node implements TreeNode {
+export class ScopeMemberNode extends ScopeNodeAbstract implements TreeNode {
     constructor(
         public readonly scope: TreeNode<Scope>,
         public readonly name: TreeNode<string>
@@ -50,6 +51,7 @@ export class ScopeMemberNode extends Node implements TreeNode {
                 throw Error(`Cannot access "${await this.name.evaluate(scope, dom, tag)}" of undefined.`);
             }
             const name = await this.name.evaluate(scope, dom, tag);
+            await this.applyModifiers(name, parent, dom, tag);
             const value: any = parent.get(name, false);
             values.push(value instanceof Scope && value.wrapped || value);
         }

package/src/AST/ScopeNodeAbstract.ts

@@ -0,0 +1,20 @@
+import {Node} from "./Node";
+import {TreeNode} from "../AST";
+import {Scope} from "../Scope";
+import {DOM} from "../DOM";
+import {Tag} from "../Tag";
+import {Registry} from "../Registry";
+
+export abstract class ScopeNodeAbstract extends Node implements TreeNode {
+    async applyModifiers(name: string, scope: Scope, dom: DOM, tag: Tag) {
+        let type: string;
+        for (const modifier of this.modifiers) {
+            if (Registry.instance.types.has(modifier)) {
+                type = modifier;
+                break;
+            }
+        }
+        if (type)
+            scope.setType(name, type);
+    }
+}

package/src/AST.ts

@@ -29,6 +29,7 @@ import {StringFormatNode} from "./AST/StringFormatNode";
 import {FunctionNode} from "./AST/FunctionNode";
 import {ClassNode} from "./AST/ClassNode";
 import {OnNode} from "./AST/OnNode";
+import {ModifierNode} from "./AST/ModifierNode";
 
 function lower(str: string): string {
     return str ? str.toLowerCase() : null;
@@ -117,6 +118,7 @@ export enum TokenType {
     XHR_POST,
     XHR_PUT,
     XHR_DELETE,
+    MODIFIER,
 }
 
 const TOKEN_PATTERNS: TokenPattern[] = [
@@ -363,6 +365,10 @@ const TOKEN_PATTERNS: TokenPattern[] = [
     {
         type: TokenType.EXCLAMATION_POINT,
         pattern: /^!/
+    },
+    {
+        type: TokenType.MODIFIER,
+        pattern: /^\|\S+/
     }
 ];
 
@@ -585,6 +591,8 @@ export class Tree {
                 tokens.shift()
             } else if (tokens[0].type === TokenType.EXCLAMATION_POINT) {
                 node = NotNode.parse(node, tokens[0], tokens);
+            } else if (tokens[0].type === TokenType.MODIFIER) {
+                node = ModifierNode.parse(node, tokens[0], tokens);
             } else {
                 let code: string = Tree.toCode(tokens, 10);
                 throw Error(`Syntax Error. Near ${code}`);

package/src/Scope.ts

@@ -32,14 +32,25 @@ export class Scope extends EventDispatcher {
     }
 
     public set parentScope(scope: Scope) {
-        this._parentScope = scope;
-        scope.addChild(this);
+        if (scope) {
+            this._parentScope = scope;
+            scope.addChild(this);
+        } else if (this._parentScope){
+            this._parentScope.removeChild(this);
+            this._parentScope = null;
+        }
     }
 
     public addChild(scope: Scope) {
         this.children.push(scope);
     }
 
+    public removeChild(scope: Scope) {
+        const index = this.children.indexOf(scope);
+        if (index > -1)
+            this.children.splice(index, 1);
+    }
+
     getReference(path: string, createIfNotFound: boolean = true): ScopeReference {
         const scopePath: string[] = path.split('.');
         let key: string = scopePath[0];
@@ -127,6 +138,19 @@ export class Scope extends EventDispatcher {
         this.parentScope = null;
     }
 
+    collectGarbage(force: boolean = false) {
+        for (const child of this.children) {
+            child.collectGarbage(force);
+        }
+        if (force)
+            this.cleanup();
+    }
+
+    deconstruct() {
+        super.deconstruct();
+        this.collectGarbage(true);
+    }
+
     public wrap(toWrap: any, triggerUpdates: boolean = false, updateFromWrapped: boolean = true) {
         if (toWrap instanceof ScopeData) {
             if (this._data instanceof EventDispatcher) {
@@ -235,10 +259,15 @@ export class FunctionScope extends Scope {
     }
 
     set(key: string, value: any) {
-        if (this.parentScope.has(key) || ['$', '@'].indexOf(key[0]) > -1) {
+        if (this.parentScope && (this.parentScope.has(key) || ['$', '@'].indexOf(key[0]) > -1)) {
             this.parentScope.set(key, value);
         } else {
             super.set(key, value);
         }
     }
+
+    collectGarbage(force: boolean = true) {
+        super.collectGarbage(true);
+        this.cleanup();
+    }
 }

package/src/Tag.ts

@@ -21,9 +21,8 @@ export enum TagState {
     Built,
 }
 
-export const TaggedVariable:string = '_vsn_tag';
-
 export class Tag extends DOMObject {
+    public static readonly TaggedVariable: string = '_vsn_tag';
     public readonly rawAttributes: { [key: string]: string; };
     public readonly parsedAttributes: { [key: string]: string[]; };
     public readonly deferredAttributes: Attribute[] = [];
@@ -58,7 +57,7 @@ export class Tag extends DOMObject {
         ...props
     ) {
         super(element, props);
-        element[TaggedVariable] = this;
+        element[Tag.TaggedVariable] = this;
         this.rawAttributes = {};
         this.parsedAttributes = {};
         this.attributes = [];
@@ -240,9 +239,9 @@ export class Tag extends DOMObject {
             let parentElement: HTMLElement = this.element.parentElement as HTMLElement;
             let foundParent = false;
             while (parentElement) {
-                if (parentElement[TaggedVariable]) {
+                if (parentElement[Tag.TaggedVariable]) {
                     foundParent = true;
-                    this.parentTag = parentElement[TaggedVariable];
+                    this.parentTag = parentElement[Tag.TaggedVariable];
                     break;
                 }
 

package/src/helpers/ElementHelper.ts

@@ -2,11 +2,6 @@ import {ClassNode} from "../AST/ClassNode";
 
 export class ElementHelper {
     public static hasVisionAttribute(element: HTMLElement | Element, testAttr: string = 'vsn-'): boolean {
-        for (const cls of Array.from(element.classList)) {
-            if (ClassNode.isClass(cls))
-                return true;
-        }
-
         if (!element.attributes || element.attributes.length <= 0) return false;
         for (let i: number = 0; i < element.attributes.length; i++) {
             const attr: Attr = element.attributes[i];
@@ -16,6 +11,12 @@ export class ElementHelper {
             }
         }
 
+        for (const cls of Array.from(element.classList)) {
+            if (ClassNode.isClass(cls)) {
+                return true;
+            }
+        }
+
         return false;
     }
 

package/test/AST/ClassNode.spec.ts

@@ -0,0 +1,29 @@
+import {DOM} from "../../src/DOM";
+
+
+describe('ClassNode', () => {
+    it("properly define a simple class", (done) => {
+         document.body.innerHTML = `
+            <script type="text/vsn" vsn-script>
+            class simple { 
+                func construct() {
+                    a|integer = "15"; 
+                }
+                
+                func test() {
+                    a += 1;
+                }
+            }
+            </script>
+            <div class="simple"></div>
+            <div class="simple"></div>
+        `;
+        const dom = new DOM(document);
+        dom.once('built', async () => {
+            expect(await dom.exec('?(.simple).a')).toEqual([15, 15]);
+            await dom.exec('?(.simple).test()');
+            expect(await dom.exec('?(.simple).a')).toEqual([16, 16]);
+            done();
+        });
+    });
+});