vsn 0.1.99 → 0.1.102

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vsn",
-  "version": "0.1.99",
+  "version": "0.1.102",
   "description": "SEO Friendly Javascript/Typescript Framework",
   "keywords": [
     "framework",
@@ -9,7 +9,12 @@
     "ajax",
     "hateoas",
     "rest",
-    "seo"
+    "seo",
+    "reactive",
+    "component",
+    "web component",
+    "web components",
+    "web component framework"
   ],
   "main": "./dist/vsn.js",
   "scripts": {

package/src/AST.ts

@@ -282,14 +282,6 @@ const TOKEN_PATTERNS: TokenPattern[] = [
         type: TokenType.NOT_EQUALS,
         pattern: /^!=/
     },
-    {
-        type: TokenType.GREATER_THAN,
-        pattern: /^>/
-    },
-    {
-        type: TokenType.LESS_THAN,
-        pattern: /^</
-    },
     {
         type: TokenType.GREATER_THAN_EQUAL,
         pattern: /^>=/
@@ -298,6 +290,14 @@ const TOKEN_PATTERNS: TokenPattern[] = [
         type: TokenType.LESS_THAN_EQUAL,
         pattern: /^<=/
     },
+    {
+        type: TokenType.GREATER_THAN,
+        pattern: /^>/
+    },
+    {
+        type: TokenType.LESS_THAN,
+        pattern: /^</
+    },
     {
         type: TokenType.COLON,
         pattern: /^:/

package/src/Component.ts

@@ -20,22 +20,32 @@ export class Component extends HTMLElement {
             template = Registry.instance.templates.getSynchronous(this.tagName.toLowerCase());
         }
 
-        this.setAttribute('vsn-ref', '');
-
+        this.setAttribute('vsn-scope', '');
         this.shadow.appendChild(template.content.cloneNode(true));
+        for (const child of Array.from(this.shadow.children)) {
+            child['shadowParent'] = this;
+        }
         this.shadow.querySelectorAll('slot').forEach((slot) => {
             const slotTagPromise = DOM.instance.buildTag(slot,false, SlotTag);
-            slot.addEventListener('slotchange', async (e) => {
-                for (const child of slot.assignedNodes()) {
-                    const t = await DOM.instance.buildTag(child as HTMLElement, false, SlottedTag);
-                    await t?.slotted(slot);
-                }
-                slotTagPromise.then((slotTag) => {
-                    slotTag.buildAttributes();
+            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);
+                        await t?.slotted(slotTag);
+                    }
+                    await DOM.instance.setupTags([slotTag]);
                 });
             });
         });
+    }
 
-        DOM.instance.buildFrom(this.shadow);
+    async connectedCallback() {
+        const tag = await DOM.instance.buildTag(this, true);
+        tag.createScope(true);
+        const componentTags = await DOM.instance.buildFrom(this.shadow);
+        await DOM.instance.resetBranch(tag);
+        for (const componentTag of componentTags) {
+            await DOM.instance.resetBranch(componentTag);
+        }
     }
 }

package/src/DOM.ts

@@ -221,15 +221,15 @@ export class DOM extends EventDispatcher {
         return discovered;
     }
 
-    async buildTag(element: HTMLElement, returnExisting: boolean = false, cls: any = Tag): Promise<Tag> {
+    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: Tag = new cls(element, this);
-        this.tags.push(tag);
+        const tag: T = new cls(element, this);
+        this.tags.push(tag as any);
         return tag;
     }
 
@@ -265,7 +265,7 @@ export class DOM extends EventDispatcher {
         }
     }
 
-    async buildFrom(ele: any, isRoot: boolean = false, forComponent: boolean = false) {
+    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
@@ -304,6 +304,7 @@ export class DOM extends EventDispatcher {
             this.dispatch('builtRoot')
         }
         this.dispatch('built', newTags);
+        return newTags;
     }
 
     async getTagsForElements(elements: Element[], create: boolean = false) {
@@ -357,10 +358,38 @@ export class DOM extends EventDispatcher {
         return null;
     }
 
+    public async resetBranch(e: Tag | HTMLElement) {
+        if (e instanceof Tag)
+            e = e.element;
+        const tag = e[Tag.TaggedVariable];
+        if (tag)
+            tag.parentTag = null;
+
+        const children = Array.from(e.children) as HTMLElement[]
+        for (const t of children) {
+            await this.resetBranch(t);
+        }
+
+        if (tag && tag.uniqueScope && tag.parentTag) {
+            tag.scope.parentScope = tag.parentTag.scope;
+        }
+    }
+
     public static get instance(): DOM {
         if (!DOM._instance)
             DOM._instance = new DOM(document ,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.ts

@@ -32,6 +32,9 @@ export class Scope extends EventDispatcher {
     }
 
     public set parentScope(scope: Scope) {
+        if (this._parentScope && this._parentScope !== scope)
+            this._parentScope.removeChild(this);
+
         if (scope) {
             this._parentScope = scope;
             scope.addChild(this);

package/src/Tag/SlottedTag.ts

@@ -1,5 +1,19 @@
 import {Tag} from "../Tag";
+import {SlotTag} from "./SlotTag";
 
 export class SlottedTag extends Tag {
+    protected slotTag: SlotTag;
 
+    public async slotted(slot: SlotTag) {
+        this.slotTag = slot;
+        this.slot = slot.element as HTMLSlotElement;
+        this.parentTag = slot;
+        await this.dom.setupTags([this]);
+        await this.dom.buildFrom(this.element, false, true);
+    }
+
+    findParentTag(): Tag {
+        this.parentTag = this.slotTag;
+        return this._parentTag;
+    }
 }

package/src/Tag.ts

@@ -73,13 +73,6 @@ export class Tag extends DOMObject {
         return this._meta;
     }
 
-    public async slotted(slot: HTMLSlotElement) {
-        this.slot = slot;
-        this.parentTag = await this.dom.getTagForElement(slot);
-        await this.dom.setupTags([this]);
-        await this.dom.buildFrom(this.element, false, true);
-    }
-
     protected onAttributeStateChange(event) {
         if (event.previouseState === AttributeState.Deferred)  // @todo: what is this?
             this._nonDeferredAttributes.length = 0;
@@ -241,33 +234,33 @@ export class Tag extends DOMObject {
         this._children.push(tag);
     }
 
+    public removeChild(tag: Tag) {
+        this._children.splice(this._children.indexOf(tag), 1);
+    }
+
     public get children(): Tag[] {
         return [...this._children];
     }
 
-    public get parentTag(): Tag {
-        if (!this._parentTag) {
-            let parentElement: HTMLElement = this.element.parentElement as HTMLElement;
-            let foundParent = false;
-            while (parentElement) {
-                if (parentElement[Tag.TaggedVariable]) {
-                    foundParent = true;
-                    this.parentTag = parentElement[Tag.TaggedVariable];
-                    break;
-                }
-
-                if (parentElement.parentElement) {
-                    parentElement = parentElement.parentElement as HTMLElement;
-                } else if (parentElement.assignedSlot) {
-                    parentElement = parentElement.assignedSlot.parentElement as HTMLElement;
-                } else {
-                    parentElement = null;
-                }
-
+    public findParentTag() {
+        let parentElement: HTMLElement = DOM.getParentElement(this.element);
+        let foundParent = false;
+        while (parentElement) {
+            if (parentElement[Tag.TaggedVariable]) {
+                foundParent = true;
+                this.parentTag = parentElement[Tag.TaggedVariable];
+                break;
             }
+            parentElement = DOM.getParentElement(parentElement);
+        }
 
-            if (!foundParent && DOM.instance.root !== this)
-                return DOM.instance.root;
+        if (!foundParent && DOM.instance.root !== this)
+            return DOM.instance.root;
+    }
+
+    public get parentTag(): Tag {
+        if (!this._parentTag) {
+            this.findParentTag();
         }
 
         return this._parentTag;
@@ -277,11 +270,19 @@ export class Tag extends DOMObject {
         if (this.element === document.body)
             return;
 
+        if (this._parentTag && this._parentTag !== tag) {
+            this._parentTag.removeChild(this);
+            this.scope.parentScope = null;
+        }
+
         this._parentTag = tag;
-        tag.addChild(this);
+        if (tag) {
+            tag.addChild(this);
 
-        if (this.scope !== tag.scope)
-            this.scope.parentScope = tag.scope;
+            if (this.scope !== tag.scope) {
+                this.scope.parentScope = tag.scope;
+            }
+        }
     }
 
     public get scope(): Scope {

package/src/attributes/If.ts

@@ -9,6 +9,7 @@ export class If extends Attribute {
 
     public async compile() {
         const statement: string = this.getAttributeValue();
+        console.log('if statement for', this.tag.element, statement);
         this.tree = new Tree(statement);
         await this.tree.prepare(this.tag.scope, this.tag.dom, this.tag);
         await super.compile();
@@ -33,8 +34,10 @@ export class If extends Attribute {
         const result: boolean = await this.tree.evaluate(this.tag.scope, this.tag.dom, this.tag);
         if (result) {
             this.tag.show();
+            console.log('show', this.tag.element);
         } else {
             this.tag.hide();
+            console.log('hide', this.tag.element);
         }
     }
 }

package/src/version.ts

@@ -1,2 +1,2 @@
-export const VERSION = '0.1.99';
+export const VERSION = '0.1.102';
 

package/src/vsn.ts

@@ -47,7 +47,13 @@ export class Vision extends EventDispatcher {
     }
 
     protected defineComponent(name, cls) {
-        customElements.define(name, cls);
+        if (this.dom.built) {
+            customElements.define(name, cls);
+        } else {
+            this.dom.once('built', () => {
+                customElements.define(name, cls);
+            });
+        }
     }
 
     public get dom(): DOM {