vsn 0.1.63 → 0.1.66

package/package.json

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

package/src/AST/ClassNode.ts

@@ -19,19 +19,19 @@ export class ClassNode extends Node implements TreeNode {
         super();
     }
 
-    public async prepare(scope: Scope, dom: DOM, tag: Tag = null): Promise<void> {
+    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);
+        await this.block.prepare(this.classScope, dom, tag, meta);
         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, hasConstructor: boolean | null = null) {
@@ -39,7 +39,8 @@ export class ClassNode extends Node implements TreeNode {
             hasConstructor = this.classScope.has('construct');
 
         tag.createScope(true);
-        await this.block.prepare(tag.scope, dom, tag);
+        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))();
@@ -83,7 +84,7 @@ export class ClassNode extends Node implements TreeNode {
             if (t.type === TokenType.L_BRACE) break;
             nameParts.push(t.value);
         }
-        const name = nameParts.join('');
+        const name = nameParts.join('').trim();
         tokens.splice(0, nameParts.length);
         const block = Tree.processTokens(Tree.getNextStatementTokens(tokens, true, true));
         return new ClassNode(name, block);
@@ -93,12 +94,11 @@ export class ClassNode extends Node implements TreeNode {
         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 {
+        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);
@@ -114,4 +114,8 @@ export class ClassNode extends Node implements TreeNode {
             }
         }
     }
+
+    public static isClass(cls: string): boolean {
+        return this.classes[cls] instanceof ClassNode;
+    }
 }

package/src/AST/ElementAttributeNode.ts

@@ -50,9 +50,9 @@ export class ElementAttributeNode extends Node implements TreeNode {
         return tags.map((tag) => tag.scope.get(`@${this.attributeName}`));
     }
 
-    async prepare(scope: Scope, dom: DOM, tag: Tag = null) {
+    async prepare(scope: Scope, dom: DOM, tag: Tag = null, meta: any = null) {
         if (this.elementRef) {
-            await this.elementRef.prepare(scope, dom, tag);
+            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);

package/src/AST/ElementQueryNode.ts

@@ -1,5 +1,5 @@
 import {Scope} from "../Scope";
-import {DOM} from "../DOM";
+import {DOM, EQuerySelectDirection} from "../DOM";
 import {Tag} from "../Tag";
 import {Token, TreeNode} from "../AST";
 import {Node} from "./Node";
@@ -10,24 +10,32 @@ export class ElementQueryNode extends Node implements TreeNode {
     constructor(
         public readonly query: string,
         public readonly first: boolean = false,
-        public readonly global: boolean = false,
+        public readonly direction: EQuerySelectDirection = EQuerySelectDirection.ALL,
     ) {
         super();
     }
 
     async evaluate(scope: Scope, dom: DOM, tag: Tag = null, forceList: boolean = false): Promise<any> {
         tag = tag || await dom.getTagForScope(scope);
-        const elements = await dom.get(this.query, true, this.global ? null : tag);
+        const elements = await dom.get(this.query, true, tag, this.direction);
         return this.first && !forceList ? elements[0] : elements;
     }
 
-    async prepare(scope: Scope, dom: DOM, tag: Tag = null) {
+    async prepare(scope: Scope, dom: DOM, tag: Tag = null, meta: any = null): Promise<any> {
         tag = tag || await dom.getTagForScope(scope);
         await dom.get(this.query, true, tag);
     }
 
     public static parse(lastNode, token, tokens: Token[]): ElementQueryNode {
         tokens.shift();
-        return new ElementQueryNode(token.value, false, !token.full.startsWith('?>'));
+        let first = false;
+        let direction = EQuerySelectDirection.ALL;
+        if (token.full.startsWith('?>')) {
+            direction = EQuerySelectDirection.DOWN;
+        } else if (token.full.startsWith('?<')) {
+            direction = EQuerySelectDirection.UP;
+            first = true;
+        }
+        return new ElementQueryNode(token.value, first, direction);
     }
 }

package/src/AST/ElementStyleNode.ts

@@ -50,9 +50,9 @@ export class ElementStyleNode extends Node implements TreeNode {
         return tags.map((tag) => tag.scope.get(`$${this.attributeName}`));
     }
 
-    async prepare(scope: Scope, dom: DOM, tag: Tag = null) {
+    async prepare(scope: Scope, dom: DOM, tag: Tag = null, meta: any = null) {
         if (this.elementRef) {
-            await this.elementRef.prepare(scope, dom, tag);
+            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.watchStyle(this.attributeName);

package/src/AST/FunctionNode.ts

@@ -22,9 +22,10 @@ export class FunctionNode extends Node implements TreeNode {
         ];
     }
 
-    public async prepare(scope: Scope, dom: DOM, tag: Tag = null): Promise<void> {
-        scope.set(this.name, this);
-        await super.prepare(scope, dom, tag);
+    public async prepare(scope: Scope, dom: DOM, tag: Tag = null, meta?: any): Promise<void> {
+        if (!meta?.ClassNode) // Don't muddle up tag scope if we're in a class
+            scope.set(this.name, this);
+        await super.prepare(scope, dom, tag, meta);
     }
 
     public async evaluate(scope: Scope, dom: DOM, tag: Tag = null) {

package/src/AST/Node.ts

@@ -27,9 +27,9 @@ export abstract class Node implements TreeNode {
         return false;
     }
 
-    async prepare(scope: Scope, dom: DOM, tag: Tag = null) {
+    async prepare(scope: Scope, dom: DOM, tag: Tag = null, meta: any = null): Promise<void> {
         for (const node of this.getChildNodes()) {
-            await node.prepare(scope, dom, tag);
+            await node.prepare(scope, dom, tag, meta);
         }
     }
 

package/src/AST/OnNode.ts

@@ -5,11 +5,11 @@ 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) {
+    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);
-        }
-        await super.prepare(scope, dom, tag);
+        await super.prepare(scope, dom, tag, meta);
     }
 
     public static parse(lastNode, token, tokens: Token[]): OnNode {

package/src/AST.ts

@@ -226,7 +226,7 @@ const TOKEN_PATTERNS: TokenPattern[] = [
     },
     {
         type: TokenType.ELEMENT_QUERY,
-        pattern: /^\?>?\(([#.\[\]:,=\-_a-zA-Z0-9*\s]*[\]_a-zA-Z0-9*])\)/
+        pattern: /^\?[>|<]?\(([#.\[\]:,=\-_a-zA-Z0-9*\s]*[\]_a-zA-Z0-9*])\)/
     },
     {
         type: TokenType.NAME,
@@ -368,8 +368,7 @@ const TOKEN_PATTERNS: TokenPattern[] = [
 
 export interface TreeNode<T = any> {
     evaluate(scope: Scope, dom: DOM, tag?: Tag);
-
-    prepare(scope: Scope, dom: DOM, tag?: Tag);
+    prepare(scope: Scope, dom: DOM, tag?: Tag, meta?: any);
 }
 
 export interface IBlockInfo {

package/src/DOM.ts

@@ -7,9 +7,14 @@ import {WrappedWindow} from "./DOM/WrappedWindow";
 import {WrappedDocument} from "./DOM/WrappedDocument";
 import {Scope} from "./Scope";
 import {EventDispatcher} from "./EventDispatcher";
-import {Registry} from "./Registry";
 import {ClassNode} from "./AST/ClassNode";
 
+export enum EQuerySelectDirection {
+    ALL,
+    UP,
+    DOWN
+}
+
 export class DOM extends EventDispatcher {
     protected static _instance: DOM;
     protected _root: Tag;
@@ -44,7 +49,7 @@ export class DOM extends EventDispatcher {
         return this._root;
     }
 
-    public async get(selector: string, create: boolean = false, tag: Tag = null) {
+    public async get(selector: string, create: boolean = false, tag: Tag = null, direction: EQuerySelectDirection = EQuerySelectDirection.DOWN): Promise<TagList> {
         switch (selector) {
             case 'window':
                 return new TagList(this.window);
@@ -53,7 +58,14 @@ export class DOM extends EventDispatcher {
             case 'body':
                 return new TagList(this.root);
             default:
-                const nodes = this.querySelectorAll(selector, tag);
+                let nodes;
+                if (direction === EQuerySelectDirection.DOWN) {
+                    nodes = this.querySelectorAll(selector, tag);
+                } else if (direction === EQuerySelectDirection.UP) {
+                    nodes = [this.querySelectorClosest(selector, tag)];
+                } else {
+                    nodes = this.querySelectorAll(selector);
+                }
                 return await this.getTagsForElements(Array.from(nodes) as Element[], create);
         }
     }
@@ -69,6 +81,10 @@ export class DOM extends EventDispatcher {
             this.root.scope.set(`#${id}`, tag.scope);
     }
 
+    public querySelectorClosest(q: string, tag: Tag = null): HTMLElement {
+        return tag.element.closest(q);
+    }
+
     public querySelectorAll(q: string, tag: Tag = null): NodeList | HTMLElement[] {
         const element: HTMLElement | Document = tag && !q.startsWith('#') ? tag.element : this.rootElement;
         return this.querySelectorElement(element, q);

package/src/Registry.ts

@@ -54,10 +54,15 @@ export class RegistryStore extends EventDispatcher {
     has(key: string) {
         return !!this.store[key];
     }
+
+    get keys(): string[] {
+        return Object.keys(this.store);
+    }
 }
 
 export class Registry extends EventDispatcher {
     protected static _instance: Registry;
+    public readonly functions: RegistryStore;
     public readonly controllers: RegistryStore;
     public readonly classes: RegistryStore;
     public readonly models: RegistryStore;
@@ -69,6 +74,7 @@ export class Registry extends EventDispatcher {
 
     constructor() {
         super();
+        this.functions = new RegistryStore();
         this.controllers = new RegistryStore();
         this.classes = new RegistryStore();
         this.models = new RegistryStore();
@@ -79,6 +85,10 @@ export class Registry extends EventDispatcher {
         this.attributes = new RegistryStore();
     }
 
+    public static function(key: string = null, setup = null) {
+        return register('functions', key, setup);
+    }
+
     public static class(cls: ClassNode) {
         Registry.instance.classes.register(cls.name, cls);
     }

package/src/Scope.ts

@@ -229,10 +229,16 @@ export class Scope extends EventDispatcher {
 }
 
 export class FunctionScope extends Scope {
+    constructor(parentScope?: Scope) {
+        super(parentScope);
+        this.addRelay(parentScope);
+    }
+
     set(key: string, value: any) {
-        if (this.parentScope.has(key) || ['$', '@'].indexOf(key[0]) > -1)
+        if (this.parentScope.has(key) || ['$', '@'].indexOf(key[0]) > -1) {
             this.parentScope.set(key, value);
-        else
+        } else {
             super.set(key, value);
+        }
     }
 }

package/src/attributes/RootAttribute.ts

@@ -1,7 +1,6 @@
 import {Attribute} from "../Attribute";
 import {VisionHelper} from "../helpers/VisionHelper";
 import {Registry} from "../Registry";
-import {Scope} from "../Scope";
 
 @Registry.attribute('vsn-root')
 export class RootAttribute extends Attribute {
@@ -10,8 +9,17 @@ export class RootAttribute extends Attribute {
 
     public async setup() {
         this.tag.scope.set('$mobile', VisionHelper.isMobile());
-        if (console && !this.tag.scope.get('console'))
-            this.tag.scope.set('console', Scope.fromObject(console));
+
+        for (const key of Registry.instance.functions.keys) {
+            const fn = Registry.instance.functions.get(key);
+            this.tag.scope.set(key, fn);
+        }
+
+        Registry.instance.functions.on('register', this.registerFunction, this);
         await super.setup();
     }
+
+    public async registerFunction(name: string, fn: Function) {
+        this.tag.scope.set(name, fn);
+    }
 }

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/src/vsn.ts

@@ -25,6 +25,10 @@ export class Vision extends EventDispatcher {
         } else {
             console.warn('No dom, running in CLI mode.');
         }
+        this.registry.functions.register('log', console.log);
+        this.registry.functions.register('warn', console.warn);
+        this.registry.functions.register('error', console.error);
+        this.registry.functions.register('info', console.info);
         this.registry.controllers.register('Object', Object);
         this.registry.controllers.register('WrappedArray', WrappedArray);
         this.registry.controllers.register('Data', DynamicScopeData);

package/test/DOM.spec.ts

@@ -33,4 +33,31 @@ describe('DOM', () => {
             done();
         });
     });
+
+    it("should be able to query elements in all directions", (done) => {
+        document.body.innerHTML = `
+            <div id="root" vsn-set:asd|integer="1">
+                <main id="parent" vsn-set:asd|integer="123">
+                    <div id="testing" vsn-controller:test="TestController" vsn-set:asd="234|integer">
+                        <div id="child" vsn-set:asd|integer="345">
+                            <ul>
+                                <li vsn-set:asd|integer="456"></li>
+                                <li id="grandchild" vsn-set:asd|integer="567"></li>
+                            </ul>
+                        </div>
+                    </div>
+                </main>
+            </div>
+        `;
+        const dom = new DOM(document);
+        dom.once('built', async () => {
+            const root = await dom.exec('#root');
+            const child = await dom.exec('#child');
+            const grandchild = await dom.exec('#grandchild');
+            expect(await child.exec('?<(main).asd')).toBe(123);
+            expect(await child.exec('?>(li)[0].asd')).toBe(456);
+            expect(await dom.exec('?(#grandchild)[0]')).toBe(grandchild);
+            done();
+        });
+    });
 });