vsn 0.1.71 → 0.1.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vsn",
-  "version": "0.1.71",
+  "version": "0.1.74",
   "description": "SEO Friendly Javascript/Typescript Framework",
   "keywords": [
     "framework",
@@ -13,7 +13,8 @@
   ],
   "main": "./dist/vsn.js",
   "scripts": {
-    "build": "rm -rf ./dist/ && tsc",
+    "build": "rm -rf ./dist/ && npm run-script version && tsc",
+    "version": "echo -n \"export const VERSION = '${npm_package_version}';\n\" > src/version.ts",
     "build_dev": "rm -rf ./dist/ && webpack --env BUILD=development BENCHMARK=1",
     "demo": "webpack --env BUILD=production BENCHMARK=1 && cp ./dist/vsn.min.js ./demo/vsn.js",
     "test": "karma start --single-run",

package/src/AST/ArithmeticAssignmentNode.ts

@@ -48,7 +48,7 @@ export class ArithmeticAssignmentNode extends Node implements TreeNode {
             }
         } else if ((this.left instanceof ElementAttributeNode || this.left instanceof ElementStyleNode) && this.left.elementRef) {
             const elements = await this.left.elementRef.evaluate(scope, dom, tag);
-            if (this.left.elementRef.first) {
+            if (this.left.elementRef.first || elements instanceof DOMObject) {
                 scopes.push(elements);
             } else {
                 scopes = elements;

package/src/AST/ClassNode.ts

@@ -2,45 +2,89 @@ import {Scope} from "../Scope";
 import {DOM} from "../DOM";
 import {Tag} from "../Tag";
 import {Token, TokenType, Tree, TreeNode} from "../AST";
-import {Node} from "./Node";
+import {INodeMeta, 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 ClassesVariable = '_vsn_classes';
     public static readonly classes: {[name: string]: ClassNode} = {};
+    public static readonly classParents: {[name: string]: string[]} = {};
+    public static readonly classChildren: {[name: string]: string[]} = {}; // List of child class selectors for a given class selector
+    public static readonly preppedTags: {[name: string]: Tag[]} = {};
+
     protected requiresPrep: boolean = true;
     public readonly classScope: Scope = new Scope();
-    protected _ready: boolean = false;
+    protected _fullSelector: string;
 
     constructor(
-        public readonly name: string,
+        public readonly selector: string,
         public readonly block: BlockNode
     ) {
         super();
     }
 
+    public get fullSelector(): string {
+        return this._fullSelector;
+    }
+
     public updateMeta(meta?: any) {
         meta = meta || {};
         meta['ClassNode'] = this;
         return meta;
     }
 
-    public async prepare(scope: Scope, dom: DOM, tag: Tag = null, meta?: any): Promise<void> {
-        meta = meta || {};
-        meta['ClassNodePrepare'] = true;
-        if (ClassNode.classes[this.name]) return; // Don't re-prepare same classes
-        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 prepare(scope: Scope, dom: DOM, tag: Tag = null, meta?: INodeMeta): Promise<void> {
+        meta = Object.assign({}, meta) || {};
+        const initial = !!meta['initial'];
+        let root: boolean = false;
+        meta['ClassNodePrepare'] = initial;
+
+        // Only prepare once during the initial prep, all subsequent prepares are on tag class blocks
+        if (initial) {
+            if (meta['ClassNodeSelector']) {
+                ClassNode.classChildren[meta['ClassNodeSelector'] as string].push(this.selector);
+                meta['ClassNodeSelector'] = `${meta['ClassNodeSelector']} ${this.selector}`;
+            } else {
+                root = true;
+                meta['ClassNodeSelector'] = this.selector;
+            }
+
+            this._fullSelector = meta['ClassNodeSelector'];
+            if (ClassNode.classes[this._fullSelector]) return; // Don't re-prepare same classes
+            ClassNode.classes[this._fullSelector] = this;
+            ClassNode.classChildren[this._fullSelector] = [];
+            ClassNode.preppedTags[this._fullSelector] = [];
+
+            if (ClassNode.classParents[this.selector] === undefined)
+                ClassNode.classParents[this.selector] = [];
+
+            ClassNode.classParents[this.selector].push(this._fullSelector);
+            await this.block.prepare(this.classScope, dom, tag, meta);
+            Registry.class(this);
+
+            if (root) {
+                await this.findClassElements(dom);
+            }
+        } else {
+            await this.block.prepare(this.classScope, dom, tag, meta);
         }
     }
 
-    public async prepareTag(tag: Tag, dom: DOM, hasConstructor: boolean | null = null) {
+    public async findClassElements(dom) {
+        for (const element of Array.from(dom.querySelectorAll(this._fullSelector))) {
+            await ClassNode.addElementClass(this._fullSelector, element as HTMLElement, dom, element[Tag.TaggedVariable] || null);
+        }
+        for (const childSelector of ClassNode.classChildren[this._fullSelector]) {
+            const node =  ClassNode.classes[`${this._fullSelector} ${childSelector}`];
+            if (!node) continue;
+            await node.findClassElements(dom);
+        }
+    }
+
+    public async constructTag(tag: Tag, dom: DOM, hasConstructor: boolean | null = null) {
         if (hasConstructor === null)
             hasConstructor = this.classScope.has('construct');
 
@@ -52,10 +96,12 @@ export class ClassNode extends Node implements TreeNode {
             const fnc = await fncCls.getFunction(tag.scope, dom, tag, false);
             await fnc();
         }
-        tag.preppedClasses.push(this.name);
+        tag.dispatch(`${this.fullSelector}.construct`, tag.element.id);
+        ClassNode.preppedTags[this.fullSelector].push(tag);
+        ClassNode.addPreparedClassToElement(tag.element, this.fullSelector);
     }
 
-    public async tearDownTag(tag: Tag, dom: DOM, hasDeconstructor: boolean | null = null) {
+    public async deconstructTag(tag: Tag, dom: DOM, hasDeconstructor: boolean | null = null) {
         if (hasDeconstructor === null)
             hasDeconstructor = this.classScope.has('deconstruct');
 
@@ -70,7 +116,9 @@ export class ClassNode extends Node implements TreeNode {
                 tag.removeContextEventHandlers(on);
             }
         }
-        tag.preppedClasses.splice(tag.preppedClasses.indexOf(this.name), 1);
+        tag.dispatch(`${this.fullSelector}.deconstruct`);
+        ClassNode.preppedTags[this.fullSelector].splice(ClassNode.preppedTags[this.fullSelector].indexOf(tag), 1);
+        await ClassNode.removePreparedClassFromElement(tag.element, this.fullSelector);
     }
 
     public async evaluate(scope: Scope, dom: DOM, tag: Tag = null) {
@@ -84,35 +132,92 @@ export class ClassNode extends Node implements TreeNode {
             if (t.type === TokenType.L_BRACE) break;
             nameParts.push(t.value);
         }
-        const name = nameParts.join('').trim();
+        const selector = nameParts.join('').trim();
         tokens.splice(0, nameParts.length);
         const block = Tree.processTokens(Tree.getNextStatementTokens(tokens, true, true));
-        return new ClassNode(name, block);
+        return new ClassNode(selector, 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[];
+        const localSelectors: string[] = [element.tagName.toLowerCase(), ...Array.from(element.classList).map(c => `.${c}`)];
+        const fullSelectors: string[] = [...ClassNode.getClassesForElement(element)];
+        if (element.id)
+            localSelectors.push(`#${element.id}`);
+
+        for (const selector in localSelectors) {
+            if (ClassNode.classParents[selector])
+                fullSelectors.push(...ClassNode.classParents[selector]);
+        }
 
         if (!tag) {
             tag = await dom.getTagForElement(element, true);
         }
-        addedClasses = addedClasses.filter(c => !tag.preppedClasses.includes(c));
-        removedClasses = tag.preppedClasses.filter(c => !classes.includes(c));
 
-        for (const addedClass of addedClasses) {
-            const classNode: ClassNode = Registry.instance.classes.getSynchronous(addedClass);
-            if (classNode) {
-                await classNode.prepareTag(tag, dom);
+        for (const selector of fullSelectors) {
+            const isPrepped = ClassNode.getClassesForElement(element).includes(selector);
+            const elements = Array.from(dom.querySelectorAll(selector));
+            const inElements = elements.includes(element);
+            let changed: boolean = false;
+
+            if (inElements && !isPrepped) {
+                await ClassNode.addElementClass(selector, element, dom, tag);
+                changed = true;
+            } else if (!inElements && isPrepped) {
+                await ClassNode.removeElementClass(selector, element, dom, tag);
+                changed = true;
             }
-        }
 
-        for (const removedClass of removedClasses) {
-            const classNode: ClassNode = Registry.instance.classes.getSynchronous(removedClass);
-            if (classNode) {
-                await classNode.tearDownTag(tag, dom);
+            if (changed && ClassNode.classChildren[selector].length > 0) {
+                for (const childSelector of ClassNode.classChildren[selector]) {
+                    for (const childElement of Array.from(dom.querySelectorAll(childSelector, tag)) as HTMLElement[]) {
+                        await ClassNode.checkForClassChanges(childElement, dom, childElement[Tag.TaggedVariable] || null);
+                    }
+                }
             }
+
+        }
+    }
+
+    public static getClassesForElement(element: HTMLElement): string[] {
+        if (!element[ClassNode.ClassesVariable])
+            element[ClassNode.ClassesVariable] = [];
+        return element[ClassNode.ClassesVariable];
+    }
+
+    public static addPreparedClassToElement(element: HTMLElement, selector: string) {
+        ClassNode.getClassesForElement(element).push(selector);
+    }
+
+    public static removePreparedClassFromElement(element: HTMLElement, selector: string) {
+        const classes = ClassNode.getClassesForElement(element);
+        classes.splice(classes.indexOf(selector), 1);
+    }
+
+    public static async addElementClass(selector: string, element: HTMLElement, dom: DOM, tag: Tag = null) {
+        const classes = ClassNode.getClassesForElement(element);
+        if (classes.includes(selector)) return;
+
+        if (!tag) {
+            tag = await dom.getTagForElement(element, true);
+        }
+
+        const classNode: ClassNode = Registry.instance.classes.getSynchronous(selector);
+        if (classNode) {
+            await classNode.constructTag(tag, dom);
+        }
+    }
+
+    public static async removeElementClass(selector: string, element: HTMLElement, dom: DOM, tag: Tag = null) {
+        const classes = ClassNode.getClassesForElement(element);
+        if (!classes.includes(selector)) return;
+
+        if (!tag) {
+            tag = await dom.getTagForElement(element, true);
+        }
+
+        const classNode: ClassNode = Registry.instance.classes.getSynchronous(selector);
+        if (classNode) {
+            await classNode.deconstructTag(tag, dom);
         }
     }
 

package/src/AST/ElementAttributeNode.ts

@@ -6,6 +6,7 @@ import {TreeNode} from "../AST";
 import {Node} from "./Node";
 import {ElementQueryNode} from "./ElementQueryNode";
 import {LiteralNode} from "./LiteralNode";
+import {DOMObject} from "../DOM/DOMObject";
 
 export class ElementAttributeNode extends Node implements TreeNode {
     protected requiresPrep: boolean = true;
@@ -53,10 +54,14 @@ export class ElementAttributeNode extends Node implements TreeNode {
     async prepare(scope: Scope, dom: DOM, tag: Tag = null, meta: any = null) {
         if (this.elementRef) {
             await this.elementRef.prepare(scope, dom, tag, meta);
-            const tags: TagList = await this.elementRef.evaluate(scope, dom, tag, true);
-            for (const t of tags)
-                await t.watchAttribute(this.attributeName);
-        } else if(tag) {
+            const tags: any = await this.elementRef.evaluate(scope, dom, tag, true);
+            if (tags instanceof TagList) {
+                for (const t of tags)
+                    await t.watchAttribute(this.attributeName);
+            } else if (tags instanceof DOMObject) {
+                await (tags as DOMObject).watchAttribute(this.attributeName);
+            }
+        } else if (tag) {
             await tag.watchAttribute(this.attributeName);
         }
     }

package/src/AST/FunctionCallNode.ts

@@ -8,6 +8,8 @@ import {ScopeMemberNode} from "./ScopeMemberNode";
 import {FunctionNode} from "./FunctionNode";
 import {Registry} from "../Registry";
 import {ElementQueryNode} from "./ElementQueryNode";
+import {ClassNode} from "./ClassNode";
+import {TagList} from "../Tag/List";
 
 export class FunctionCallNode<T = any> extends Node implements TreeNode {
     constructor(
@@ -31,7 +33,14 @@ export class FunctionCallNode<T = any> extends Node implements TreeNode {
         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[];
+                const _tags = await this.fnc.scope.evaluate(scope, dom, tag);
+                if (_tags instanceof Array) {
+                    tags = _tags;
+                } else if (_tags instanceof Tag) {
+                    tags = [_tags];
+                } else {
+                    throw new Error('Invalid element query result');
+                }
             } else {
                tags = [tag];
             }
@@ -46,7 +55,7 @@ export class FunctionCallNode<T = any> extends Node implements TreeNode {
             let calls = 0;
             for (const _tag of tags) {
                 let tagNum = 0;
-                for (const className of _tag.preppedClasses) {
+                for (const className of _tag.element[ClassNode.ClassesVariable]) {
                     tagNum++;
                     const cls = Registry.instance.classes.getSynchronous(className);
                     if (cls) {

package/src/AST/Node.ts

@@ -3,6 +3,10 @@ import {DOM} from "../DOM";
 import {Tag} from "../Tag";
 import {TreeNode} from "../AST";
 
+export interface INodeMeta {
+    [key: string]: string | number | boolean | null;
+}
+
 export abstract class Node implements TreeNode {
     protected requiresPrep: boolean = false;
     protected _isPreparationRequired: boolean;
@@ -28,7 +32,7 @@ export abstract class Node implements TreeNode {
         return false;
     }
 
-    async prepare(scope: Scope, dom: DOM, tag: Tag = null, meta: any = null): Promise<void> {
+    async prepare(scope: Scope, dom: DOM, tag: Tag = null, meta: INodeMeta = null): Promise<void> {
         for (const node of this.getChildNodes()) {
             await node.prepare(scope, dom, tag, meta);
         }

package/src/AST/ScopeMemberNode.ts

@@ -26,7 +26,6 @@ export class ScopeMemberNode extends ScopeNodeAbstract implements TreeNode {
     async evaluate(scope: Scope, dom: DOM, tag: Tag = null) {
         let scopes = [];
         const values = [];
-
         if (this.scope instanceof ElementQueryNode) {
             const elements = await this.scope.evaluate(scope, dom, tag);
             if (this.scope.first) {

package/src/AST.ts

@@ -420,7 +420,9 @@ export class Tree {
     async prepare(scope: Scope, dom: DOM, tag: Tag = null) {
         if (!this._root.isPreparationRequired())
             return;
-        return await this._root.prepare(scope, dom, tag);
+        return await this._root.prepare(scope, dom, tag, {
+            initial: true
+        });
     }
 
     async bindToScopeChanges(scope, fnc, dom: DOM, tag: Tag = null) {

package/src/DOM.ts

@@ -18,6 +18,7 @@ export enum EQuerySelectDirection {
 export class DOM extends EventDispatcher {
     protected static _instance: DOM;
     protected _root: Tag;
+    protected _ready: Promise<boolean>;
     protected tags: Tag[];
     protected observer: MutationObserver;
     protected evaluateTimeout: any;
@@ -32,6 +33,12 @@ export class DOM extends EventDispatcher {
         protected debug: boolean = false
     ) {
         super();
+        this._ready = new Promise((resolve) => {
+            this.once('built', () => {
+                resolve(true);
+            });
+        });
+
         this.observer = new MutationObserver(this.mutation.bind(this));
         this.tags = [];
 
@@ -49,6 +56,10 @@ export class DOM extends EventDispatcher {
         return this._root;
     }
 
+    public get ready(): Promise<boolean> {
+        return
+    }
+
     public async get(selector: string, create: boolean = false, tag: Tag = null, direction: EQuerySelectDirection = EQuerySelectDirection.DOWN): Promise<TagList> {
         switch (selector) {
             case 'window':
@@ -232,7 +243,7 @@ export class DOM extends EventDispatcher {
         const found: Element[] = [];
         for (const tag of this.tags)
         {
-            if (elements.indexOf(tag.element) > -1) {
+            if (!found.includes(tag.element) && elements.indexOf(tag.element) > -1) {
                 tags.push(tag);
                 found.push(tag.element);
             }
@@ -242,8 +253,9 @@ export class DOM extends EventDispatcher {
             const notFound: Element[] = [...elements];
             for (let i = notFound.length; i >= 0; i--) {
                 const element: Element = notFound[i];
-                if (found.indexOf(element) > -1)
-                    notFound.pop();
+                if (found.indexOf(element) > -1) {
+                    notFound.splice(i, 1);
+                }
             }
 
             for (const element of notFound) {

package/src/EventDispatcher.ts

@@ -70,6 +70,14 @@ export class EventDispatcher  {
         return this.on(event, fct, context, true);
     }
 
+    promise(event: string, ...args: any[]): Promise<any> {
+        return new Promise((resolve, reject) => {
+            this.once(event, (...args) => {
+                resolve(args);
+            }, null);
+        });
+    }
+
     off(event: string, key?: number): boolean {
         if(!(event in this._listeners)) return false;
         if(key) {

package/src/Registry.ts

@@ -90,7 +90,7 @@ export class Registry extends EventDispatcher {
     }
 
     public static class(cls: ClassNode) {
-        Registry.instance.classes.register(cls.name, cls);
+        Registry.instance.classes.register(cls.fullSelector, cls);
     }
 
     public static controller(key: string = null, setup = null) {

package/src/Tag/List.ts

@@ -12,19 +12,6 @@ export class TagList extends Array<DOMObject> {
         return this[0].scope
     }
 
-    on(event, cbOrSelector, cb) {
-        if (typeof cbOrSelector === "function") {
-            this.forEach(e => e.element.addEventListener(event, cbOrSelector))
-        } else {
-            this.forEach(elem => {
-                elem.element.addEventListener(event, e => {
-                    if (e.target.matches(cbOrSelector)) cb(e)
-                })
-            })
-        }
-        return this
-    }
-
     get elements(): HTMLElement[] {
         return this.map(e => e.element);
     }
@@ -37,6 +24,11 @@ export class TagList extends Array<DOMObject> {
         return this[this.length - 1];
     }
 
+    all(event: string): Promise<number[]> {
+        const promises = this.map(e => e.promise(event));
+        return Promise.all(promises);
+    }
+
     removeClass(className) {
         this.forEach(e => e.element.classList.remove(className))
         return this

package/src/Tag.ts

@@ -26,7 +26,6 @@ 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[] = [];

package/src/version.ts

@@ -0,0 +1 @@
+export const VERSION = '0.1.74';

package/src/vsn.ts

@@ -8,6 +8,7 @@ import {Query} from "./Query";
 import {EventDispatcher} from "./EventDispatcher";
 import {DynamicScopeData} from "./Scope/DynamicScopeData";
 import {Controller} from "./Controller";
+import {VERSION} from "./version";
 
 export class Vision extends EventDispatcher {
     protected static _instance: Vision;
@@ -59,7 +60,7 @@ export class Vision extends EventDispatcher {
         await this._dom.buildFrom(document, true);
         const now = (new Date()).getTime();
         const setupTime = now - startTime;
-        console.info(`Took ${setupTime}ms to start up VisionJS. https://www.vsnjs.com/`, window ? `v${window['VSN_VERSION']}` : null);
+        console.info(`Took ${setupTime}ms to start up VisionJS. https://www.vsnjs.com/`, `v${VERSION}`);
     }
 
     public static get instance() {

package/test/AST/ClassNode.spec.ts

@@ -1,29 +1,84 @@
 import {DOM} from "../../src/DOM";
+import {ClassNode} from "../../src/AST/ClassNode";
+import {Registry} from "../../src/Registry";
+import {TagList} from "../../src/Tag/List";
+import {Tag} from "../../src/Tag";
 
 
 describe('ClassNode', () => {
-    it("properly define a simple class", (done) => {
+    it("properly combine nested classes", async () => {
          document.body.innerHTML = `
             <script type="text/vsn" vsn-script>
-            class simple { 
+            class .simple { 
+                func construct() {}
+                class input {
+                    func construct() {}
+                }
+            }
+            </script>
+            <div class="simple"><input /></div>
+        `;
+        const dom = new DOM(document);
+        await dom.ready;
+        await Registry.instance.classes.get('.simple input');
+        expect(ClassNode.classParents['input']).toBeInstanceOf(Array);
+        expect(ClassNode.classParents['input'].includes('.simple input')).toBe(true);
+        expect(ClassNode.classes['.simple input']).toBeInstanceOf(ClassNode);
+    });
+
+    it("properly define a simple class", async () => {
+         document.body.innerHTML = `
+            <script type="text/vsn" vsn-script>
+            class .simple-construct { 
                 func construct() {
-                    a|integer = "15"; 
+                    a|integer = "15";
+                    log('####### construct', a);
                 }
                 
                 func test() {
                     a += 1;
+                    log('####### testing', a);
+                }
+            }
+            </script>
+            <div class="simple-construct" id="ele-1"></div>
+            <div class="simple-construct" id="ele-2"></div>
+        `;
+        const dom = new DOM(document);
+        await dom.ready;
+        await Registry.instance.classes.get('.simple-construct');
+        const t: TagList = await dom.exec('?(.simple-construct)');
+        expect(t).toBeInstanceOf(TagList);
+        expect(t.length).toBe(2);
+        await t.all('.simple-construct.construct');
+        console.log('####### hmm?', await dom.exec('?(.simple-construct).a'));
+        expect(await dom.exec('?(.simple-construct).a')).toEqual([15, 15]);
+        await dom.exec('?(.simple-construct).test()');
+        expect(await dom.exec('?(.simple-construct).a')).toEqual([16, 16]);
+    });
+
+    it("properly define a simple class with a parent", async () => {
+        document.body.innerHTML = `
+            <script type="text/vsn" vsn-script>
+            class .testing { 
+                func construct() {
+                    a|integer = 0;
+                }
+                
+                class .test {
+                    func construct() {
+                        ?<(.testing).a += 1;
+                    }
                 }
             }
             </script>
-            <div class="simple"></div>
-            <div class="simple"></div>
+            <div class="testing"><span class="test"></span></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();
-        });
+        await dom.ready;
+        await Registry.instance.classes.get('.testing .test');
+        const t = await dom.exec('?(.testing .test)[0]');
+        await t.promise('.testing .test.construct');
+        expect(await dom.exec('?(.testing)[0].a')).toEqual(1);
     });
 });

package/test/attributes/ListItem.spec.ts

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