vsn 0.1.80 → 0.1.83

package/package.json

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

package/src/AST/ClassNode.ts

@@ -18,6 +18,7 @@ export class ClassNode extends Node implements TreeNode {
     protected requiresPrep: boolean = true;
     public readonly classScope: Scope = new Scope();
     protected _fullSelector: string;
+    protected _parentSelector: string;
 
     constructor(
         public readonly selector: string,
@@ -45,6 +46,7 @@ export class ClassNode extends Node implements TreeNode {
         // Only prepare once during the initial prep, all subsequent prepares are on tag class blocks
         if (initial) {
             if (meta['ClassNodeSelector']) {
+                this._parentSelector = meta['ClassNodeSelector'] as string;
                 ClassNode.classChildren[meta['ClassNodeSelector'] as string].push(this.selector);
                 meta['ClassNodeSelector'] = `${meta['ClassNodeSelector']} ${this.selector}`;
             } else {
@@ -76,14 +78,17 @@ export class ClassNode extends Node implements TreeNode {
         }
     }
 
-    public async findClassElements(dom) {
-        for (const element of Array.from(dom.querySelectorAll(this._fullSelector))) {
-            await ClassNode.addElementClass(this._fullSelector, element as HTMLElement, dom, element[Tag.TaggedVariable] || null);
+    public async findClassElements(dom: DOM, tag: Tag = null) {
+        const tags: Tag[] = [];
+        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;
-            await node.findClassElements(dom);
+            for (const _tag of tags) {
+                await node.findClassElements(dom, _tag);
+            }
         }
     }
 
@@ -141,6 +146,16 @@ export class ClassNode extends Node implements TreeNode {
         return new ClassNode(selector, block);
     }
 
+    public getSelectorPath(): string[] {
+        const path: string[] = [this.selector];
+        let current = this._parentSelector;
+        while (current) {
+            path.push(ClassNode.classes[current].selector);
+            current = ClassNode.classes[current]._parentSelector;
+        }
+        return path.reverse();
+    }
+
     public static async checkForClassChanges(element: HTMLElement, dom: DOM, tag: Tag = null) {
         const localSelectors: string[] = [element.tagName.toLowerCase(), ...Array.from(element.classList).map(c => `.${c}`)];
         const fullSelectors: string[] = [...ClassNode.getClassesForElement(element)];
@@ -160,7 +175,8 @@ export class ClassNode extends Node implements TreeNode {
 
         for (const selector of fullSelectors) {
             const isPrepped = ClassNode.getClassesForElement(element).includes(selector);
-            const elements = Array.from(dom.querySelectorAll(selector));
+            const path = ClassNode.classes[selector]?.getSelectorPath();
+            const elements = dom.querySelectPath(path);
             const inElements = elements.includes(element);
             let changed: boolean = false;
 
@@ -210,6 +226,8 @@ export class ClassNode extends Node implements TreeNode {
         if (classNode) {
             await classNode.constructTag(tag, dom);
         }
+
+        return tag;
     }
 
     public static async removeElementClass(selector: string, element: HTMLElement, dom: DOM, tag: Tag = null) {

package/src/Attribute.ts

@@ -91,7 +91,7 @@ export abstract class Attribute extends EventDispatcher {
         }
     }
 
-    private setState(state: AttributeState) {
+    protected setState(state: AttributeState) {
         const previousState = this._state;
         this._state = state;
         this.dispatch('state', {

package/src/DOM.ts

@@ -102,6 +102,21 @@ export class DOM extends EventDispatcher {
         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);
@@ -128,7 +143,12 @@ export class DOM extends EventDispatcher {
                 return this.querySelectorElement(element.parentElement, rest);
             }
         }
-        return element.querySelectorAll(q);
+        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 {

package/src/Tag.ts

@@ -247,7 +247,14 @@ export class Tag extends DOMObject {
                     break;
                 }
 
-                parentElement = parentElement.parentElement as HTMLElement;
+                if (parentElement.parentElement) {
+                    parentElement = parentElement.parentElement as HTMLElement;
+                } else if (parentElement.assignedSlot) {
+                    parentElement = parentElement.assignedSlot.parentElement as HTMLElement;
+                } else {
+                    parentElement = null;
+                }
+
             }
 
             if (!foundParent && DOM.instance.root !== this)

package/src/attributes/Name.ts

@@ -10,7 +10,7 @@ export class Name extends Attribute {
     public async setup() {
         const parentScope: Scope = this.tag.scope.parentScope;
         if (parentScope) {
-            parentScope.set(this.tag.parsedAttributes['vsn-name'][1], this.tag.scope);
+            parentScope.set(this.getAttributeValue(), this.tag.scope);
         }
     }
 }

package/src/version.ts

@@ -1,2 +1,2 @@
-export const VERSION = '0.1.80';
+export const VERSION = '0.1.83';
 

package/test/AST/ClassNode.spec.ts

@@ -51,7 +51,6 @@ describe('ClassNode', () => {
         expect(t).toBeInstanceOf(TagList);
         expect(t.length).toBe(2);
         await t.all('.simple-construct.construct');
-        console.log('####### hmm?', await dom.exec('?(.simple-construct).a'));
         expect(await dom.exec('?(.simple-construct).a')).toEqual([15, 15]);
         await dom.exec('?(.simple-construct).test()');
         expect(await dom.exec('?(.simple-construct).a')).toEqual([16, 16]);
@@ -85,7 +84,7 @@ describe('ClassNode', () => {
     it("properly define a simple class with a parent", async () => {
         document.body.innerHTML = `
 <script type="text/vsn" vsn-script>
-class .product-firearm-option {
+class .option {
     func construct() {
         log('construct');
     }
@@ -132,20 +131,20 @@ class .product-firearm-option {
     }
 }
 </script>
-<div class="product-firearm-option">
-    <input data-type="firearm-type" />
+<div class="option">
+    <input data-type="normal" />
     <ul class="option-list">
-        <li data-type="rifle">Rifle</li>
-        <li data-type="pistol">Pistol</li>
-        <li data-type="shotgun">Shotgun</li>
+        <li data-type="test">Foo</li>
+        <li data-type="test">Bar</li>
+        <li data-type="test">Baz</li>
     </ul>
 </div>
-<div class="product-firearm-option">
-    <input data-type="model-type" />
+<div class="option">
+    <input data-type="reverse" />
     <ul class="option-list">
-        <li data-type="rifle">Glock</li>
-        <li data-type="pistol">Springfield Armory</li>
-        <li data-type="shotgun">Smith & Wesson</li>
+        <li data-type="tset">Oof</li>
+        <li data-type="tset">Rab</li>
+        <li data-type="tset">Zab</li>
     </ul>
 </div>
 `;