vsn 0.1.61 → 0.1.64

package/src/AST/ClassNode.ts

@@ -1,10 +1,11 @@
 import {Scope} from "../Scope";
 import {DOM} from "../DOM";
 import {Tag} from "../Tag";
-import {BlockType, Token, TokenType, Tree, TreeNode} from "../AST";
+import {Token, TokenType, Tree, TreeNode} from "../AST";
 import {Node} from "./Node";
 import {BlockNode} from "./BlockNode";
 import {Registry} from "../Registry";
+import {OnNode} from "./OnNode";
 
 export class ClassNode extends Node implements TreeNode {
     public static readonly classes: {[name: string]: ClassNode} = {};
@@ -23,11 +24,52 @@ export class ClassNode extends Node implements TreeNode {
         ClassNode.classes[this.name] = this;
         await this.block.prepare(this.classScope, dom, tag);
         Registry.class(this);
+        const hasConstructor = this.classScope.has('construct');
+
+        for (const element of Array.from(dom.querySelectorAll(`.${this.name}`))) {
+            const tag: Tag = await dom.getTagForElement(element as HTMLElement, true);
+            if (tag) {
+                await this.prepareTag(tag, dom, hasConstructor);
+            }
+        }
     }
 
-    public async prepareTag(tag: Tag, dom: DOM) {
+    public async prepareTag(tag: Tag, dom: DOM, hasConstructor: boolean | null = null) {
+        if (hasConstructor === null)
+            hasConstructor = this.classScope.has('construct');
+
         tag.createScope(true);
         await this.block.prepare(tag.scope, dom, tag);
+        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);
+            }
+        }
+         */
+        tag.preppedClasses.push(this.name);
+    }
+
+    public async tearDownTag(tag: Tag, dom: DOM, hasDeconstructor: boolean | null = null) {
+        if (hasDeconstructor === null)
+            hasDeconstructor = this.classScope.has('deconstruct');
+
+        if (hasDeconstructor) {
+            const fnc = this.classScope.get('deconstruct');
+            (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.removeContextEventHandlers(on);
+            }
+        }
+        tag.preppedClasses.splice(tag.preppedClasses.indexOf(this.name), 1);
     }
 
     public async evaluate(scope: Scope, dom: DOM, tag: Tag = null) {
@@ -46,4 +88,34 @@ export class ClassNode extends Node implements TreeNode {
         const block = Tree.processTokens(Tree.getNextStatementTokens(tokens, true, true));
         return new ClassNode(name, block);
     }
+
+    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[] = [];
+        if (tag) {
+            addedClasses = addedClasses.filter(c => !tag.preppedClasses.includes(c));
+            removedClasses = tag.preppedClasses.filter(c => !classes.includes(c));
+        } else {
+            tag = await dom.getTagForElement(element, true);
+        }
+
+        for (const addedClass of addedClasses) {
+            const classNode: ClassNode = Registry.instance.classes.getSynchronous(addedClass);
+            if (classNode) {
+                await classNode.prepareTag(tag, dom);
+            }
+        }
+
+        for (const removedClass of removedClasses) {
+            const classNode: ClassNode = Registry.instance.classes.getSynchronous(removedClass);
+            if (classNode) {
+                await classNode.tearDownTag(tag, dom);
+            }
+        }
+    }
+
+    public static isClass(cls: string): boolean {
+        return this.classes[cls] instanceof ClassNode;
+    }
 }

package/src/AST/FunctionCallNode.ts

@@ -6,7 +6,6 @@ import {Node} from "./Node";
 import {FunctionArgumentNode} from "./FunctionArgumentNode";
 import {ScopeMemberNode} from "./ScopeMemberNode";
 import {FunctionNode} from "./FunctionNode";
-import {ClassNode} from "./ClassNode";
 import {Registry} from "../Registry";
 
 export class FunctionCallNode<T = any> extends Node implements TreeNode {
@@ -34,17 +33,25 @@ export class FunctionCallNode<T = any> extends Node implements TreeNode {
         const func = await this.fnc.evaluate(scope, dom, tag);
         if (!func) {
             const functionName = await (this.fnc as any).name.evaluate(scope, dom, tag);
-            const classes: ClassNode[] = [];
-            for (const className of Array.from(tag.element.classList)) {
+            const returnValues = [];
+            let calls = 0;
+            for (const className of tag.preppedClasses) {
                 const cls = Registry.instance.classes.getSynchronous(className);
-                if (cls) classes.push(cls);
-            }
-            for (const cls of classes) {
-                if (cls.classScope.has(functionName)) {
-                    const fnc = cls.classScope.get(functionName);
-                    return (await fnc.evaluate(functionScope, dom, tag))(...values);
+                if (cls) {
+                    if (cls.classScope.has(functionName)) {
+                        const fnc = cls.classScope.get(functionName);
+                        returnValues.push((await fnc.evaluate(functionScope, dom, tag))(...values));
+                        calls++;
+                    }
                 }
             }
+            if (calls === 1) {
+                return returnValues[0];
+            } else if (calls === 0) {
+                throw new Error(`Function ${functionName} not found`);
+            } else {
+                return returnValues;
+            }
         } else if (func instanceof FunctionNode) {
             return (await func.evaluate(functionScope, dom, tag) as any)(...values);
         } else {

package/src/AST/FunctionNode.ts

@@ -28,6 +28,10 @@ export class FunctionNode extends Node implements TreeNode {
     }
 
     public async evaluate(scope: Scope, dom: DOM, tag: Tag = null) {
+        return await this.getFunction(scope, dom, tag);
+    }
+
+    public async getFunction(scope: Scope, dom: DOM, tag: Tag = null) {
         return async (...args) => {
             const functionScope = new FunctionScope(scope);
             for (const arg of this.args) {
@@ -37,7 +41,7 @@ export class FunctionNode extends Node implements TreeNode {
         }
     }
 
-    public static parse(lastNode, token, tokens: Token[]): FunctionNode {
+    public static parse<T = FunctionNode>(lastNode, token, tokens: Token[], cls: any = FunctionNode): FunctionNode {
         tokens.shift(); // skip 'func'
         const name = tokens.shift();
         const argTokens = Tree.getBlockTokens(tokens);
@@ -46,6 +50,6 @@ export class FunctionNode extends Node implements TreeNode {
             funcArgs.push(t[0].value);
         }
         const block = Tree.processTokens(Tree.getNextStatementTokens(tokens, true, true));
-        return new FunctionNode(name.value, funcArgs, block);
+        return new cls(name.value, funcArgs, block);
     }
 }

package/src/AST/OnNode.ts

@@ -0,0 +1,18 @@
+import {Token, TreeNode} from "../AST";
+import {FunctionNode} from "./FunctionNode";
+import {Scope} from "../Scope";
+import {DOM} from "../DOM";
+import {Tag} from "../Tag";
+
+export class OnNode extends FunctionNode implements TreeNode {
+    public async prepare(scope: Scope, dom: DOM, tag: Tag = null): Promise<void> {
+        if (tag) {
+            tag.addEventHandler(this.name, [], await this.getFunction(scope, dom, tag), this);
+        }
+        await super.prepare(scope, dom, tag);
+    }
+
+    public static parse(lastNode, token, tokens: Token[]): OnNode {
+        return super.parse<OnNode>(lastNode, token, tokens, OnNode);
+    }
+}

package/src/AST.ts

@@ -28,6 +28,7 @@ import {XHRNode} from "./AST/XHRNode";
 import {StringFormatNode} from "./AST/StringFormatNode";
 import {FunctionNode} from "./AST/FunctionNode";
 import {ClassNode} from "./AST/ClassNode";
+import {OnNode} from "./AST/OnNode";
 
 function lower(str: string): string {
     return str ? str.toLowerCase() : null;
@@ -68,6 +69,7 @@ export enum TokenType {
     ELSE_IF,
     ELSE,
     FUNC,
+    ON,
     CLASS,
     NAME,
     L_BRACE,
@@ -202,6 +204,10 @@ const TOKEN_PATTERNS: TokenPattern[] = [
         type: TokenType.FUNC,
         pattern: /^func\s/
     },
+    {
+        type: TokenType.ON,
+        pattern: /^on\s/
+    },
     {
         type: TokenType.CLASS,
         pattern: /^class\s/
@@ -498,6 +504,10 @@ export class Tree {
                 node = FunctionNode.parse(node, token, tokens);
                 blockNodes.push(node);
                 node = null;
+            } else if (token.type === TokenType.ON) {
+                node = OnNode.parse(node, token, tokens);
+                blockNodes.push(node);
+                node = null;
             } else if (token.type === TokenType.CLASS) {
                 node = ClassNode.parse(node, token, tokens);
                 blockNodes.push(node);

package/src/DOM.ts

@@ -28,7 +28,6 @@ export class DOM extends EventDispatcher {
     ) {
         super();
         this.observer = new MutationObserver(this.mutation.bind(this));
-        Registry.instance.classes.on('register', this.prepareDOMClass.bind(this));
         this.tags = [];
 
         this.window = new WrappedWindow(window);
@@ -59,18 +58,6 @@ export class DOM extends EventDispatcher {
         }
     }
 
-    public async prepareDOMClass(className: string, classObject: ClassNode) {
-        for (const element of Array.from(this.querySelectorAll(`.${className}`))) {
-            const tag: Tag = await this.getTagForElement(element as HTMLElement, true);
-            if (tag) {
-                await classObject.prepareTag(tag, this);
-                if (classObject.classScope.has('construct')) {
-                    await tag.exec('construct()');
-                }
-            }
-        }
-    }
-
     public async getFromTag(tag: Tag, selector: string, create: boolean = false) {
         const nodes = this.querySelectorElement(tag.element, selector);
         return await this.getTagsForElements(Array.from(nodes) as Element[], create);
@@ -130,11 +117,16 @@ export class DOM extends EventDispatcher {
 
     public async mutation(mutations: MutationRecord[]) {
         for (const mutation of mutations) {
-            const tag: Tag = await this.getTagForElement(mutation.target as HTMLElement);
+            let tag: Tag = await this.getTagForElement(mutation.target as HTMLElement);
             if (tag) {
                 tag.mutate(mutation);
             }
 
+            // Check for class changes
+            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                await ClassNode.checkForClassChanges(mutation.target as HTMLElement, this, tag);
+            }
+
             for (const ele of Array.from(mutation.removedNodes)) {
                 const toRemove: Tag = await this.getTagForElement(ele as HTMLElement);
                 if (toRemove) {
@@ -206,12 +198,15 @@ export class DOM extends EventDispatcher {
             this.queued.splice(this.queued.indexOf(tag.element), 1);
         }
 
-        newTags.forEach(tag => this.observer.observe(tag.element, {
+        for (const tag of newTags) {
+            this.observer.observe(tag.element, {
                 attributes: true,
                 characterData: true,
                 childList: true,
                 subtree: true
-            }));
+            });
+            await ClassNode.checkForClassChanges(tag.element, this, tag);
+        }
 
         this.dispatch('built');
     }

package/src/Registry.ts

@@ -50,6 +50,10 @@ export class RegistryStore extends EventDispatcher {
     getSynchronous(key: string) {
         return this.store[key];
     }
+
+    has(key: string) {
+        return !!this.store[key];
+    }
 }
 
 export class Registry extends EventDispatcher {

package/src/Tag.ts

@@ -27,6 +27,7 @@ export class Tag extends DOMObject {
     public readonly rawAttributes: { [key: string]: string; };
     public readonly parsedAttributes: { [key: string]: string[]; };
     public readonly deferredAttributes: Attribute[] = [];
+    public readonly preppedClasses: string[] = [];
     protected _state: TagState;
     protected attributes: Attribute[];
     protected _nonDeferredAttributes: Attribute[] = [];
@@ -598,6 +599,16 @@ export class Tag extends DOMObject {
         }
     }
 
+    public removeContextEventHandlers(context: any) {
+        for (const eventType of Object.keys(this.onEventHandlers)) {
+            for (const handler of this.onEventHandlers[eventType]) {
+                if (handler.context === context) {
+                    this.removeEventHandler(eventType, handler.handler, context);
+                }
+            }
+        }
+    }
+
     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...

package/src/helpers/ElementHelper.ts

@@ -1,3 +1,4 @@
+import {ClassNode} from "../AST/ClassNode";
 
 export class ElementHelper {
     public static hasVisionAttribute(element: HTMLElement | Element, testAttr: string = 'vsn-'): boolean {
@@ -10,6 +11,11 @@ export class ElementHelper {
             }
         }
 
+        for (const cls of Array.from(element.classList)) {
+            if (ClassNode.isClass(cls))
+                return true;
+        }
+
         return false;
     }
 

package/dist/attributes/ClassConstructor.d.ts

@@ -1,10 +0,0 @@
-import { Attribute } from "../Attribute";
-export declare class ClassConstructor extends Attribute {
-    static readonly canDefer: boolean;
-    static readonly scoped: boolean;
-    protected attributeKey: string;
-    protected className: string;
-    protected defaultClassName: string;
-    setup(): Promise<void>;
-    protected instantiateClass(cls: any): void;
-}

package/dist/attributes/ClassConstructor.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ClassConstructor.js","sourceRoot":"","sources":["../../src/attributes/ClassConstructor.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,0CAAuC;AACvC,wCAAqC;AAGrC;IAAsC,oCAAS;IAA/C;;IA0BA,CAAC;IAnBgB,gCAAK,GAAlB;;;;;;wBACU,WAAW,GAAU,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,CAAC;wBACpD,IAAI,CAAC,WAAW;4BACZ,sBAAO;wBAEX,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;wBAC/C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;wBAEnD,qBAAM,mBAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,EAAA;;wBAAzD,GAAG,GAAG,SAAmD;wBAC/D,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;wBAE3B,IAAI,IAAI,CAAC,YAAY,IAAI,WAAW;4BAChC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;wBACvD,qBAAM,iBAAM,KAAK,WAAE,EAAA;;wBAAnB,SAAmB,CAAC;;;;;KACvB;IAES,2CAAgB,GAA1B,UAA2B,GAAG;QAC1B,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACvB,CAAC;IAxBsB,yBAAQ,GAAY,KAAK,CAAC;IAC1B,uBAAM,GAAY,IAAI,CAAC;IAFrC,gBAAgB;QAD5B,mBAAQ,CAAC,SAAS,CAAC,gBAAgB,CAAC;OACxB,gBAAgB,CA0B5B;IAAD,uBAAC;CAAA,AA1BD,CAAsC,qBAAS,GA0B9C;AA1BY,4CAAgB"}