vsn 0.1.124 → 0.1.126

package/src/DOM.ts

@@ -1,394 +1,13 @@
-import {Tag} from "./Tag";
-import {ElementHelper} from "./helpers/ElementHelper";
-import {Configuration} from "./Configuration";
-import {Tree} from "./AST";
-import {TagList} from "./Tag/TagList";
-import {WrappedWindow} from "./DOM/WrappedWindow";
-import {WrappedDocument} from "./DOM/WrappedDocument";
-import {Scope} from "./Scope";
-import {EventDispatcher} from "./EventDispatcher";
-import {ClassNode} from "./AST/ClassNode";
-import {Registry} from "./Registry";
-import {SlotTag} from "./Tag/SlotTag";
-import {SlottedTag} from "./Tag/SlottedTag";
 
-export enum EQuerySelectDirection {
-    ALL,
-    UP,
-    DOWN
-}
-
-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;
-    protected queued: HTMLElement[] = [];
-    protected window: WrappedWindow;
-    protected document: WrappedDocument;
-    protected _built: boolean = false;
-
-    constructor(
-        protected rootElement: Document,
-        build: boolean = true,
-        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 = [];
-
-        this.window = new WrappedWindow(window);
-        this.document = new WrappedDocument(window.document);
-
-        if (build) {
-            this.buildFrom(rootElement, true);
-        }
-        this.evaluate();
-        Configuration.instance.on('change', this.evaluate.bind(this));
-    }
-
-    public get built(): boolean {
-        return this._built;
-    }
-
-    public get root(): Tag {
-        return this._root;
-    }
-
-    public get ready(): Promise<boolean> {
-        return this.promise('builtRoot');
-    }
-
-    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);
-            case 'document':
-                return new TagList(this.document);
-            case 'body':
-                return new TagList(this.root);
-            default:
-                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);
-        }
-    }
-
-    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);
-    }
-
-    public registerElementInRoot(tag: Tag): void {
-        const id: string = tag.element.getAttribute('id');
-        if (!!id)
-            this.root.scope.set(`#${id}`, tag.scope);
-    }
-
-    public querySelectorClosest(q: string, tag: Tag = null): HTMLElement {
-        return tag.element.closest(q);
-    }
-
-    public querySelectPath(path: string[], element: HTMLElement = null): HTMLElement[] {
-        const current = path.shift();
-        if (!current) return [];
-        const elements = Array.from(element ? this.querySelectorElement(element, current) : this.querySelectorAll(current));
-        if (path.length > 0) {
-            const result = [];
-            for (const _element of elements) {
-                result.push(...this.querySelectPath([...path], _element as HTMLElement));
-            }
-            return result;
-        }
-
-        return elements as HTMLElement[];
-    }
-
-    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);
-    }
-
-    public querySelectorElement(element: HTMLElement | Document, q: string): NodeList | HTMLElement[] {
-        const parentIndex: number = q.indexOf(':parent');
-        if (parentIndex > -1) {
-            const _q = q.substring(0, parentIndex);
-            const rest = q.substring(parentIndex + 7);
-            if (_q.length > 0) {
-                const nodeList = [];
-                for (const _element of Array.from(this.querySelectorElement(element, _q))) {
-                    if (rest.length > 0) {
-                        nodeList.push(...Array.from(this.querySelectorElement(DOM.getParentElement(_element as HTMLElement), rest)));
-                    } else {
-                        nodeList.push(DOM.getParentElement(_element as HTMLElement));
-                    }
-                }
-                return nodeList;
-            } else if (rest.length === 0) {
-                return [DOM.getParentElement(element as HTMLElement)];
-            } else {
-                return this.querySelectorElement(DOM.getParentElement(element as HTMLElement), rest);
-            }
-        }
-        let matches = element.querySelectorAll(q);
-
-        if (matches.length === 0 && (element as HTMLElement).shadowRoot) {
-            matches = (element as HTMLElement).shadowRoot.querySelectorAll(q);
-        }
-        return matches;
-    }
-
-    public querySelector(q: string): Element {
-        return this.rootElement.querySelector(q);
-    }
-
-    public async exec(code: string) {
-        const tree = new Tree(code);
-        await tree.prepare(this.root.scope, this);
-        return await tree.evaluate(this.root.scope, this);
-    }
-
-    public async evaluate() {
-        clearTimeout(this.evaluateTimeout);
-        for (const tag of this.tags) {
-            await tag.evaluate();
-        }
-    }
-
-    public async mutation(mutations: MutationRecord[]) {
-        for (const mutation of mutations) {
-            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) {
-                    toRemove.deconstruct();
-                }
-            }
-        }
-    }
-
-    async discover(ele: HTMLElement, forComponent: boolean = false): Promise<HTMLElement[]> {
-        const discovered: HTMLElement[] = [];
-        const checkElement = (e: HTMLElement): boolean => {
-            if (Registry.instance.tags.has(e?.tagName?.toLowerCase())) {
-                return false;
-            }
-
-            if (ElementHelper.hasVisionAttribute(e)) {
-                if (
-                    (!forComponent && e.hasAttribute('slot'))
-                ) return false;
-                if (this.queued.indexOf(e) > -1) return false;
-                this.queued.push(e);
-                discovered.push(e);
-            }
+import {AbstractDOM} from "./DOM/AbstractDOM";
 
-            return true;
-        }
-        const scanChildren = (e: HTMLElement) => {
-            for (const element of Array.from(e.children) as HTMLElement[]) {
-                if (!checkElement(element)) continue;
-                if (element.tagName.toLowerCase() !== 'template')
-                    scanChildren(element);
-            }
-        }
-        checkElement(ele);
-        scanChildren(ele);
-
-        return discovered;
-    }
-
-    async buildTag<T = Tag>(element: HTMLElement, returnExisting: boolean = false, cls: any = Tag): Promise<T> {
-        if (element[Tag.TaggedVariable]) return returnExisting ? element[Tag.TaggedVariable] : null;
-        if (element.tagName.toLowerCase() === 'slot')
-            cls = SlotTag;
-        else if (element.hasAttribute('slot'))
-            cls = SlottedTag;
-
-        const tag: T = new cls(element, this);
-        this.tags.push(tag as any);
-        return tag;
-    }
-
-    async setupTags(tags: Tag[]) {
-         // Configure, setup & execute attributes
-        for (const tag of tags)
-            await tag.buildAttributes();
-
-        for (const tag of tags)
-            await tag.compileAttributes();
-
-        for (const tag of tags)
-            await tag.setupAttributes();
-
-        for (const tag of tags)
-            await tag.extractAttributes();
-
-        for (const tag of tags)
-            await tag.connectAttributes();
-
-        for (const tag of tags) {
-            await tag.finalize();
-            this.queued.splice(this.queued.indexOf(tag.element), 1);
-        }
-
-        for (const tag of tags) {
-            this.observer.observe(tag.element, {
-                attributes: true,
-                characterData: true,
-                childList: true,
-                subtree: true
-            });
-        }
-    }
-
-    async buildFrom(ele: any, isRoot: boolean = false, forComponent: boolean = false): Promise<Tag[]> {
-        if (isRoot) {
-            document.body.setAttribute('vsn-root', '');
-            document.ondragover = (e) => e.cancelable && e.preventDefault();  // Allow dragging over document
-            this._root = await this.buildTag(document.body, true);
-            this._root.createScope(true);
-            await this.setupTags([this._root]);
-        }
-
-        // Setup components first
-        const templateNodes = this.querySelectorElement(ele, 'template');
-        const components: Tag[] = [];
-        for (const n of Array.from(templateNodes) as HTMLElement[]) {
-            if (!ElementHelper.hasVisionAttribute(n))
-                continue;
-
-            const tag = await this.buildTag(n);
-            if (tag)
-                components.push(tag);
-        }
-        if (components.length)
-            await this.setupTags(components);
-
-        // Create tags for each html element with a vsn-attribute
-        const newTags: Tag[] = [];
-        const toBuild: HTMLElement[] = await this.discover(ele, forComponent);
-
-        for (const element of toBuild) {
-            const tag = await this.buildTag(element);
-            if (tag)
-                newTags.push(tag);
-        }
-
-        await this.setupTags(newTags);
-
-        if (isRoot) {
-            this._built = true;
-            this.dispatch('builtRoot')
-        }
-        this.dispatch('built', newTags);
-        return newTags;
-    }
-
-    async getTagsForElements(elements: Element[], create: boolean = false) {
-        const tags: TagList = new TagList();
-        const found: Element[] = [];
-
-        for (const element of elements) {
-            if (element && element[Tag.TaggedVariable]) {
-                tags.push(element[Tag.TaggedVariable]);
-                found.push(element);
-            }
-        }
-
-        if (create) {
-            const notFound: Element[] = [...elements];
-            for (let i = notFound.length; i >= 0; i--) {
-                const element: Element = notFound[i];
-                if (found.indexOf(element) > -1) {
-                    notFound.splice(i, 1);
-                }
-            }
-
-            for (const element of notFound) {
-                tags.push(await this.getTagForElement(element, create));
-            }
-        }
-
-        return tags;
-    }
-
-    async getTagForElement(element: Element, create: boolean = false, forComponent: boolean = false) {
-        if (element && element[Tag.TaggedVariable])
-            return element[Tag.TaggedVariable];
-
-        if (element && create) {
-            if (element instanceof HTMLElement)
-                element.setAttribute('vsn-ref', '');
-            await this.buildFrom(element.parentElement || element, false, forComponent);
-            return await this.getTagForElement(element, false);
-        }
-
-        return null;
-    }
-
-    async getTagForScope(scope: Scope) {
-        for (const tag of this.tags) {
-            if (tag.uniqueScope && tag.scope === scope)
-                return tag;
-        }
-
-        return null;
-    }
-
-    public async resetBranch(e: Tag | HTMLElement) {
-        if (e instanceof Tag)
-            e = e.element;
-
-        const tag: Tag = e[Tag.TaggedVariable];
-        if (tag) {
-            tag.findParentTag();
-        }
-
-        const children = Array.from(e.children) as HTMLElement[]
-        for (const t of children) {
-            await this.resetBranch(t);
-        }
-    }
+export class DOM extends AbstractDOM {
+    protected static _instance: AbstractDOM;
 
     public static get instance(): DOM {
         if (!DOM._instance)
-            DOM._instance = new DOM(document ,false, false);
+            DOM._instance = new DOM(document.body ,false, false);
 
         return DOM._instance;
     }
-
-    public static getParentElement(element: HTMLElement): HTMLElement {
-        if (element.parentElement) {
-            return element.parentElement as HTMLElement;
-        } else if (element.assignedSlot) {
-            return element.assignedSlot.parentElement as HTMLElement;
-        } else if (element['shadowParent']) {
-            return element['shadowParent'];
-        }
-        return null;
-    }
 }

package/src/Scope/ObjectAccessor.ts

@@ -0,0 +1,21 @@
+import {ScopeAbstract} from "./ScopeAbstract";
+
+export class ObjectAccessor extends ScopeAbstract {
+    public readonly data: any;
+
+    constructor(data: any) {
+        super();
+        this.data = data;
+    }
+
+    public get(field: string, fallback = null): any {
+        const value = this.data[field];
+        if (typeof value === 'object')
+            return new ObjectAccessor(value);
+        return value === undefined ? fallback : value;
+    }
+
+    public set(field: string, value: any): void {
+        this.data[field] = value;
+    }
+}

package/src/Scope/ScopeAbstract.ts

@@ -0,0 +1,11 @@
+import {EventDispatcher} from "../EventDispatcher";
+
+export interface IScope {
+    get(field: string, fallback?: any): any;
+    set(field: string, value: any): void;
+}
+
+export abstract class ScopeAbstract extends EventDispatcher implements IScope {
+    public abstract get(field: string, fallback?: any): any;
+    public abstract set(field: string, value: any): void;
+}

package/src/Scope.ts

@@ -5,9 +5,10 @@ import {WrappedArray} from "./Scope/WrappedArray";
 import {ScopeData} from "./Scope/ScopeData";
 import {DynamicScopeData} from "./Scope/DynamicScopeData";
 import {DOM} from "./DOM";
+import {ScopeAbstract} from "./Scope/ScopeAbstract";
 
 
-export class Scope extends EventDispatcher {
+export class Scope extends ScopeAbstract {
     public wrapped: any;
     protected _data: ScopeData;
     protected children: Scope[];
@@ -29,6 +30,18 @@ export class Scope extends EventDispatcher {
         return this._data;
     }
 
+    public get objectify(): any {
+        const obj = {};
+        for (const key of this.keys) {
+            const value = this.get(key);
+            if (value instanceof Scope)
+                obj[key] = value.objectify;
+            else
+                obj[key] = value;
+        }
+        return obj;
+    }
+
     public get parentScope(): Scope {
         if (this._parentScope)
             return this._parentScope;

package/src/Tag.ts

@@ -656,6 +656,22 @@ export class Tag extends DOMObject {
         return attribute.replace(`|${modifier}`, '');
     }
 
+    public getElementPath(element: HTMLElement): string {
+        const path = [];
+        let currentElement = element;
+        while (currentElement) {
+            let tag = currentElement.tagName
+            if (currentElement.hasAttribute('id'))
+                tag += `#${currentElement.getAttribute('id')}`;
+            else if (currentElement.hasAttribute('class'))
+                tag += `.${currentElement.getAttribute('class').split(' ').join('.')}`;
+
+            path.push(tag);
+            currentElement = currentElement.parentElement;
+        }
+        return path.reverse().join('>');
+    }
+
     public addEventHandler(eventType: string, modifiers: Modifiers, handler, context: any = null) {
         let passiveValue: boolean = null;
         modifiers = modifiers || new Modifiers();
@@ -698,6 +714,14 @@ export class Tag extends DOMObject {
         }
     }
 
+    public removeAllEventHandlers() {
+        for (const eventType of Object.keys(this.onEventHandlers)) {
+            for (const handler of this.onEventHandlers[eventType]) {
+                this.removeEventHandler(eventType, handler.handler, handler.context);
+            }
+        }
+    }
+
     public removeContextEventHandlers(context: any) {
         for (const eventType of Object.keys(this.onEventHandlers)) {
             for (const handler of this.onEventHandlers[eventType]) {
@@ -763,6 +787,7 @@ export class Tag extends DOMObject {
     }
 
     deconstruct() {
+        this.removeAllEventHandlers();
         this.attributes.forEach(attr => attr.deconstruct());
         this.attributes.clear();
         this._children.forEach(child => child.deconstruct());

package/src/helpers/VisionHelper.ts

@@ -59,6 +59,12 @@ export class VisionHelper {
         return _url.toString();
     }
 
+    public static async wait (seconds) {
+        return new Promise((resolve) => {
+            setTimeout(resolve, seconds * 1000);
+        });
+    }
+
     public static nice(callback, timeout: number = 100) {
         if (VisionHelper.window && window['requestIdleCallback']) {
             window['requestIdleCallback'](callback);

package/src/version.ts

@@ -1,2 +1,2 @@
-export const VERSION = '0.1.124';
+export const VERSION = '0.1.126';
 

package/src/vsn.ts

@@ -4,7 +4,6 @@ import {Registry} from "./Registry";
 import {Configuration} from "./Configuration";
 import {VisionHelper} from "./helpers/VisionHelper";
 import {Tree} from "./AST";
-import {Query} from "./Query";
 import {EventDispatcher} from "./EventDispatcher";
 import {DynamicScopeData} from "./Scope/DynamicScopeData";
 import {Controller} from "./Controller";
@@ -19,6 +18,7 @@ export class Vision extends EventDispatcher {
 
     constructor() {
         super();
+        document.ondragover = (e) => e.cancelable && e.preventDefault();  // Allow dragging over document
         Registry.instance.tags.on('register', this.defineComponent, this);
         if (VisionHelper.document) {
             document.addEventListener(
@@ -32,11 +32,7 @@ export class Vision extends EventDispatcher {
         this.registry.functions.register('warn', console.warn);
         this.registry.functions.register('error', console.error);
         this.registry.functions.register('info', console.info);
-        this.registry.functions.register('wait', async (seconds) => {
-            return new Promise((resolve) => {
-                setTimeout(resolve, seconds * 1000);
-            });
-        });
+        this.registry.functions.register('wait', VisionHelper.wait);
         this.registry.models.register('Object', Object);
         this.registry.controllers.register('WrappedArray', WrappedArray);
         this.registry.controllers.register('Data', DynamicScopeData);
@@ -46,7 +42,7 @@ export class Vision extends EventDispatcher {
             window['Registry'] = Registry;
             window['vision'] = window['vsn'] = this;
             window['Tree'] = Tree;
-            window['$'] = Query;
+            window['$'] = this.exec.bind(this);
             VisionHelper.window.dispatchEvent(new Event('vsn'));
         }
     }

package/test/AST/ClassNode.spec.ts

@@ -2,6 +2,7 @@ import {DOM} from "../../src/DOM";
 import {ClassNode} from "../../src/AST/ClassNode";
 import {Registry} from "../../src/Registry";
 import {TagList} from "../../src/Tag/TagList";
+import {Tag} from "../../src/vsn";
 
 
 describe('ClassNode', () => {
@@ -16,8 +17,9 @@ describe('ClassNode', () => {
             }
             </script>
             <div class="simple"><input /></div>
+            <input id="not-nested" />
         `;
-        const dom = new DOM(document);
+        const dom = new DOM(document.body);
         await dom.ready;
         await Registry.instance.classes.get('.simple input');
         expect(ClassNode.classParents['input']).toBeInstanceOf(Array);
@@ -25,6 +27,26 @@ describe('ClassNode', () => {
         expect(ClassNode.classes['.simple input']).toBeInstanceOf(ClassNode);
     });
 
+    it("properly build classes on newly added elements in the dom", async () => {
+        document.body.innerHTML = `
+            <script type="text/vsn" vsn-script>
+            class .added-html { 
+                func construct() {}
+            }
+            </script>
+            <div id="container"></div>
+        `;
+        const dom = new DOM(document.body);
+        await dom.ready;
+        await Registry.instance.classes.get('.added-html');
+        const newHtml: string = `<div class="added-html" id="added"></div>`;
+        dom.root.scope.set('newHtml', newHtml);
+        await dom.exec('#container.@html = newHtml');
+        const addedTag = await dom.exec('#added');
+        expect(addedTag).toBeInstanceOf(Tag);
+        expect(ClassNode.preppedTags['.added-html'].indexOf(addedTag)).toBeGreaterThan(-1);
+    });
+
     it("properly define a simple class", async () => {
         document.body.innerHTML = `
             <script type="text/vsn" vsn-script>
@@ -43,7 +65,7 @@ describe('ClassNode', () => {
             <div class="simple-construct" id="ele-1"></div>
             <div class="simple-construct" id="ele-2"></div>
         `;
-        const dom = new DOM(document);
+        const dom = new DOM(document.body);
         await dom.ready;
         await Registry.instance.classes.get('.simple-construct');
         const t: TagList = await dom.exec('?(.simple-construct)');
@@ -72,7 +94,7 @@ describe('ClassNode', () => {
             </script>
             <div class="testing"><span class="test"></span></div>
         `;
-        const dom = new DOM(document);
+        const dom = new DOM(document.body);
         await dom.ready;
         await Registry.instance.classes.get('.testing .test');
         const t = await dom.exec('?(.testing .test)[0]');
@@ -147,7 +169,7 @@ class .option {
     </ul>
 </div>
 `;
-        const dom = new DOM(document);
+        const dom = new DOM(document.body);
         await dom.ready;
     });
 });