vsn 0.1.125 → 0.1.126

package/src/Component.ts

@@ -1,16 +1,20 @@
 import {Registry} from "./Registry";
-import {DOM} from "./DOM";
 import {SlotTag} from "./Tag/SlotTag";
 import {SlottedTag} from "./Tag/SlottedTag";
+import {ShadowDOM} from "./DOM/ShadowDOM";
+import {DOM} from "./DOM";
 
 export class Component extends HTMLElement {
     protected readonly shadow: ShadowRoot;
+    protected readonly shadowDOM: ShadowDOM;
 
     constructor() {
         super();
         Object.setPrototypeOf(this, Component.prototype);
 
+        this.shadowDOM = new ShadowDOM(DOM.instance, this, false);
         this.shadow = this.attachShadow({mode: 'open'});
+
         const templateId = this.getAttribute('template');
         let template: HTMLTemplateElement;
 
@@ -28,34 +32,32 @@ export class Component extends HTMLElement {
         const slotPromises = [];
         const tagsToSetup = [];
         this.shadow.querySelectorAll('slot').forEach((slot) => {
-            const slotTagPromise = DOM.instance.buildTag(slot,false, SlotTag);
+            const slotTagPromise = this.shadowDOM.buildTag(slot,false, SlotTag);
             const promise = new Promise<SlotTag>((resolve, reject) => {
                 slot.addEventListener('slotchange', (e) => {
                     slotTagPromise.then(async (slotTag) => {
-
                         for (const child of slot.assignedNodes()) {
-                            const t = await DOM.instance.buildTag<SlottedTag>(child as HTMLElement, false, SlottedTag);
+                            const t = await this.shadowDOM.buildTag<SlottedTag>(child as HTMLElement, false, SlottedTag);
                             await t?.slotted(slotTag);
                             tagsToSetup.push(t);
                         }
                         resolve(slotTag);
                     });
                 });
-            })
+            });
             slotPromises.push(promise);
         });
         Promise.all(slotPromises).then(async (slotTags: SlotTag[]) => {
-            await DOM.instance.buildFrom(this, false, true);
-            await DOM.instance.setupTags(slotTags);
-            await DOM.instance.setupTags(tagsToSetup);
+            console.log('Building after slot setup', this);
         });
     }
 
     async connectedCallback() {
-        const tag = await DOM.instance.buildTag(this, true);
-        tag.createScope(true);
-        await DOM.instance.buildFrom(this.shadow);
-        await tag.dom.resetBranch(tag);
-        await tag.dom.setupTags([tag]);
+        //const tag = await this.shadowDOM.buildTag(this, true);
+        //tag.createScope(true);
+        console.log('Building from shadow', this.shadow);
+        await this.shadowDOM.buildFrom(this.shadow, true, true);
+        ///await tag.dom.resetBranch(tag);
+        //await tag.dom.setupTags([tag]);
     }
 }

package/src/DOM/AbstractDOM.ts

@@ -0,0 +1,389 @@
+import {Tag} from "../Tag";
+import {WrappedWindow} from "./WrappedWindow";
+import {WrappedDocument} from "./WrappedDocument";
+import {Configuration} from "../Configuration";
+import {TagList} from "../Tag/TagList";
+import {Tree} from "../AST";
+import {ClassNode} from "../AST/ClassNode";
+import {Registry} from "../Registry";
+import {ElementHelper} from "../helpers/ElementHelper";
+import {SlotTag} from "../Tag/SlotTag";
+import {SlottedTag} from "../Tag/SlottedTag";
+import {Scope} from "../Scope";
+import {EventDispatcher} from "../EventDispatcher";
+
+export enum EQuerySelectDirection {
+    ALL,
+    UP,
+    DOWN
+}
+
+export abstract class AbstractDOM extends EventDispatcher {
+    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: HTMLElement,
+        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(AbstractDOM.getParentElement(_element as HTMLElement), rest)));
+                    } else {
+                        nodeList.push(AbstractDOM.getParentElement(_element as HTMLElement));
+                    }
+                }
+                return nodeList;
+            } else if (rest.length === 0) {
+                return [AbstractDOM.getParentElement(element as HTMLElement)];
+            } else {
+                return this.querySelectorElement(AbstractDOM.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 (!forComponent && e?.tagName?.includes('-')) {
+                return false;
+            }
+
+            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);
+            }
+
+            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) {
+            this.rootElement.setAttribute('vsn-root', '');
+            this._root = await this.buildTag(this.rootElement, 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);
+        }
+    }
+
+    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/DOM/ShadowDOM.ts

@@ -0,0 +1,15 @@
+import {AbstractDOM} from "./AbstractDOM";
+
+export class ShadowDOM extends AbstractDOM {
+    protected _parent: AbstractDOM;
+
+    constructor(
+        parent: AbstractDOM,
+        rootElement: HTMLElement,
+        build: boolean = true,
+        debug: boolean = false
+    ) {
+        super(rootElement, build, debug);
+        this._parent = parent;
+    }
+}