vsn 0.1.87 → 0.1.88

package/package.json

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

package/src/AST/ClassNode.ts

@@ -73,8 +73,8 @@ export class ClassNode extends Node implements TreeNode {
                 else
                     dom.once('builtRoot', () => this.findClassElements(dom));
             }
-        } else {
-            await this.block.prepare(this.classScope, dom, tag, meta);
+        } else if (meta['PrepForSelector'] === this.fullSelector) { // Only prepare top level class if we're prepping for tag
+            await this.block.prepare(tag.scope, dom, tag, meta);
         }
     }
 
@@ -83,6 +83,7 @@ export class ClassNode extends Node implements TreeNode {
         for (const element of Array.from(dom.querySelectorAll(this.selector, tag))) {
             tags.push(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;
@@ -98,6 +99,7 @@ export class ClassNode extends Node implements TreeNode {
 
         tag.createScope(true);
         const meta = this.updateMeta();
+        meta['PrepForSelector'] = this.fullSelector;
         await this.block.prepare(tag.scope, dom, tag, meta);
         if (hasConstruct) {
             const fncCls: FunctionNode = this.classScope.get('construct') as FunctionNode;
@@ -140,7 +142,9 @@ export class ClassNode extends Node implements TreeNode {
             if (t.type === TokenType.L_BRACE) break;
             nameParts.push(t.value);
         }
-        const selector = nameParts.join('').trim();
+        let selector = nameParts.join('').trim();
+        if (selector.startsWith('>'))
+            selector = `:scope ${selector}`;
         tokens.splice(0, nameParts.length);
         const block = Tree.processTokens(Tree.getNextStatementTokens(tokens, true, true));
         return new ClassNode(selector, block);

package/src/Attribute.ts

@@ -24,7 +24,6 @@ export abstract class Attribute extends EventDispatcher {
     ) {
         super();
         this.configure();
-        if (VisionHelper.window) VisionHelper.window['Attributes'].push(this);
     }
 
     public get origin(): Tag {

package/src/Component.ts

@@ -21,6 +21,14 @@ export class Component extends HTMLElement {
         this.setAttribute('vsn-ref', '');
 
         this.shadow.appendChild(template.content.cloneNode(true));
+        this.shadow.querySelectorAll('slot').forEach(slot => {
+            slot.addEventListener('slotchange', async (e) => {
+                for (const child of slot.assignedNodes()) {
+                    const t = await DOM.instance.getTagForElement(child as HTMLElement, true, true);
+                    t?.slotted(slot);
+                }
+            });
+        });
         DOM.instance.buildFrom(this.shadow);
     }
 }

package/src/DOM/DOMObject.ts

@@ -22,8 +22,9 @@ export abstract class DOMObject extends EventDispatcher {
         if (this.isSlot) {
             this.delegates.push(...(element as HTMLSlotElement).assignedNodes() as HTMLElement[]);
         }
-        if (element.assignedSlot)
+        if (element.assignedSlot) {
             this.slot = element.assignedSlot;
+        }
     }
 
     public get isSlot(): boolean {

package/src/DOM.ts

@@ -189,42 +189,41 @@ export class DOM extends EventDispatcher {
         }
     }
 
-    async buildFrom(ele: any, isRoot: boolean = false) {
-        // Assign parents to each tag
-        const allElements: HTMLElement[] = [];
-
+    async buildFrom(ele: any, isRoot: boolean = false, forComponent: boolean = false) {
         if (isRoot) {
             document.body.setAttribute('vsn-root', '');
             document.ondragover = (e) => e.cancelable && e.preventDefault();  // Allow dragging over document
         }
 
-        for (const tag of this.tags)
-            allElements.push(tag.element);
-
         // Create tags for each html element with a v-attribute
         const newTags: Tag[] = [];
         const toBuild: HTMLElement[] = [];
-        const toSkip: HTMLElement[] = [];
-
-        if (ele && ele.querySelectorAll) {
-            for (const element of (Array.from(ele.querySelectorAll(`*`)) as HTMLElement[])) { // Don't build items more than once
-                if (!ElementHelper.hasVisionAttribute(element)) continue;
-                if ((element.hasAttribute('vsn-template') && element.tagName === 'template') || toSkip.indexOf(element.parentElement) > -1) {
-                    toSkip.push(element);
-                    continue;
-                }
-                if (this.queued.indexOf(element) > -1) continue;
-                this.queued.push(element);
-                toBuild.push(element);
+
+        const checkElement = (e: HTMLElement) => {
+            if (ElementHelper.hasVisionAttribute(e)) {
+                if (
+                    (!forComponent && e.hasAttribute('slot'))
+                ) return;
+                if (this.queued.indexOf(e) > -1) return;
+                this.queued.push(e);
+                toBuild.push(e);
+            }
+        }
+        const scanChildren = (e: HTMLElement) => {
+            for (const element of Array.from(e.children) as HTMLElement[]) {
+                checkElement(element);
+                if (element.tagName.toLowerCase() !== 'template')
+                    scanChildren(element);
             }
         }
+        checkElement(ele);
+        scanChildren(ele);
 
         for (const element of toBuild) {
-            if (allElements.indexOf(element) > -1) continue;
+            if (element[Tag.TaggedVariable]) continue;
             const tag: Tag = new Tag(element, this);
             this.tags.push(tag);
             newTags.push(tag);
-            allElements.push(element as HTMLElement);
         }
 
         if (isRoot)
@@ -295,14 +294,14 @@ export class DOM extends EventDispatcher {
         return tags;
     }
 
-    async getTagForElement(element: Element, create: boolean = false) {
+    async getTagForElement(element: Element, create: boolean = false, forComponent: boolean = false) {
         if (element[Tag.TaggedVariable])
             return element[Tag.TaggedVariable];
 
         if (element && create) {
             if (element instanceof HTMLElement)
                 element.setAttribute('vsn-ref', '');
-            await this.buildFrom(element.parentElement || element);
+            await this.buildFrom(element.parentElement || element, false, forComponent);
             return await this.getTagForElement(element, false);
         }
 

package/src/Tag.ts

@@ -62,15 +62,18 @@ export class Tag extends DOMObject {
         this.onEventHandlers = {};
         this.analyzeElementAttributes();
         this._state = TagState.Instantiated;
-        if (VisionHelper.window) {
-            if (!VisionHelper.window['Tags']) {
-                VisionHelper.window['Tags'] = [];
-                VisionHelper.window['Attributes'] = [];
-            }
-            VisionHelper.window['Tags'].push(this);
+        if (this.hasAttribute('slot')) {
+            this.addEventHandler('slotted',[], (e) => {
+                console.log('slot change', e, this.element.assignedSlot);
+            })
         }
     }
 
+    public slotted(slot: HTMLSlotElement) {
+        this.slot = slot;
+        console.log('i am slotted', slot);
+    }
+
     protected onAttributeStateChange(event) {
         if (event.previouseState === AttributeState.Deferred)  // @todo: what is this?
             this._nonDeferredAttributes.length = 0;

package/src/attributes/JSONAttribute.ts

@@ -26,15 +26,15 @@ export class JSONAttribute extends Attribute {
         } else {
             json = unescape(this.getAttributeValue());
         }
-        const property = this.getAttributeBinding();
         const data = JSON.parse(json);
+
         if (data && typeof data === 'object' && data.constructor === Object) {
             const newScope = new Scope(scope);
             newScope.wrap(data);
             scope.set(key, newScope);
+        } else {
+            scope.set(key, data);
         }
-
-        scope.set(key, data);
         await super.extract();
     }
 }

package/src/version.ts

@@ -1,2 +1,2 @@
-export const VERSION = '0.1.87';
+export const VERSION = '0.1.88';
 

package/test/attributes/JSONAttribute.spec.ts

@@ -3,23 +3,23 @@ import {DOM} from "../../src/DOM";
 describe('JSONAttribute', () => {
     it("vsn-json should work with script/ld-json and an array", (done) => {
         document.body.innerHTML = `
-            <script type="application/ld+json" vsn-json:test>
+            <script type="application/ld+json" vsn-json:t0>
                 [1,2,3,"four"]
             </script>
         `;
         const dom = new DOM(document);
         dom.once('built', async () => {
-            expect(dom.root.scope.get('test')[0]).toBe(1);
-            expect(dom.root.scope.get('test')[1]).toBe(2);
-            expect(dom.root.scope.get('test')[2]).toBe(3);
-            expect(dom.root.scope.get('test')[3]).toBe("four");
+            expect(dom.root.scope.get('t0')[0]).toBe(1);
+            expect(dom.root.scope.get('t0')[1]).toBe(2);
+            expect(dom.root.scope.get('t0')[2]).toBe(3);
+            expect(dom.root.scope.get('t0')[3]).toBe("four");
             done();
         });
     });
 
     it("vsn-json should work with script/ld-json and an object", (done) => {
         document.body.innerHTML = `
-            <script type="application/ld+json" vsn-json:test>
+            <script type="application/ld+json" vsn-json:t1>
                 {
                     "testing": [1,2,3,"four"],
                     "test": ["one","two","three",4],
@@ -29,47 +29,49 @@ describe('JSONAttribute', () => {
         `;
         const dom = new DOM(document);
         dom.once('built', async () => {
-            expect(dom.root.scope.get('test').get("testing")[0]).toBe(1);
-            expect(dom.root.scope.get('test').get("testing")[1]).toBe(2);
-            expect(dom.root.scope.get('test').get("testing")[2]).toBe(3);
-            expect(dom.root.scope.get('test').get("testing")[3]).toBe("four");
-            expect(dom.root.scope.get('test').get("test")[0]).toBe("one");
-            expect(dom.root.scope.get('test').get("test")[1]).toBe("two");
-            expect(dom.root.scope.get('test').get("test")[2]).toBe("three");
-            expect(dom.root.scope.get('test').get("test")[3]).toBe(4);
-            expect(dom.root.scope.get('test').get("val")).toBe(111);
+            expect(dom.root.scope.get('t1').get("testing")[0]).toBe(1);
+            expect(dom.root.scope.get('t1').get("testing")[1]).toBe(2);
+            expect(dom.root.scope.get('t1').get("testing")[2]).toBe(3);
+            expect(dom.root.scope.get('t1').get("testing")[3]).toBe("four");
+            expect(dom.root.scope.get('t1').get("test")[0]).toBe("one");
+            expect(dom.root.scope.get('t1').get("test")[1]).toBe("two");
+            expect(dom.root.scope.get('t1').get("test")[2]).toBe("three");
+            expect(dom.root.scope.get('t1').get("test")[3]).toBe(4);
+            expect(dom.root.scope.get('t1').get("val")).toBe(111);
             done();
         });
     });
 
     it("vsn-json should work with div and an array", (done) => {
         document.body.innerHTML = `
-            <div vsn-json:test="[1,2,3,&quot;four&quot;]"></div>
+            <div vsn-json:t2="[1,2,3,&quot;four&quot;]"></div>
         `;
+
         const dom = new DOM(document);
         dom.once('built', async () => {
-            expect(dom.root.scope.get('test')[0]).toBe(1);
-            expect(dom.root.scope.get('test')[1]).toBe(2);
-            expect(dom.root.scope.get('test')[2]).toBe(3);
-            expect(dom.root.scope.get('test')[3]).toBe("four");
+            console.log('scope keys', dom.root.scope.keys);
+            expect(dom.root.scope.get('t2')[0]).toBe(1);
+            expect(dom.root.scope.get('t2')[1]).toBe(2);
+            expect(dom.root.scope.get('t2')[2]).toBe(3);
+            expect(dom.root.scope.get('t2')[3]).toBe("four");
             done();
         });
     });
 
     it("vsn-json should work with div and an object", (done) => {
         document.body.innerHTML = `
-            <div vsn-json:test="{&quot;testing&quot;: [1,2,3,&quot;four&quot;],&quot;test&quot;: [&quot;one&quot;,&quot;two&quot;,&quot;three&quot;,4]}"></div>
+            <div vsn-json:t3="{&quot;testing&quot;: [1,2,3,&quot;four&quot;],&quot;test&quot;: [&quot;one&quot;,&quot;two&quot;,&quot;three&quot;,4]}"></div>
         `;
         const dom = new DOM(document);
         dom.once('built', async () => {
-            expect(dom.root.scope.get('test').get("testing")[0]).toBe(1);
-            expect(dom.root.scope.get('test').get("testing")[1]).toBe(2);
-            expect(dom.root.scope.get('test').get("testing")[2]).toBe(3);
-            expect(dom.root.scope.get('test').get("testing")[3]).toBe("four");
-            expect(dom.root.scope.get('test').get("test")[0]).toBe("one");
-            expect(dom.root.scope.get('test').get("test")[1]).toBe("two");
-            expect(dom.root.scope.get('test').get("test")[2]).toBe("three");
-            expect(dom.root.scope.get('test').get("test")[3]).toBe(4);
+            expect(dom.root.scope.get('t3').get("testing")[0]).toBe(1);
+            expect(dom.root.scope.get('t3').get("testing")[1]).toBe(2);
+            expect(dom.root.scope.get('t3').get("testing")[2]).toBe(3);
+            expect(dom.root.scope.get('t3').get("testing")[3]).toBe("four");
+            expect(dom.root.scope.get('t3').get("test")[0]).toBe("one");
+            expect(dom.root.scope.get('t3').get("test")[1]).toBe("two");
+            expect(dom.root.scope.get('t3').get("test")[2]).toBe("three");
+            expect(dom.root.scope.get('t3').get("test")[3]).toBe(4);
             done();
         });
     });