vsn 0.1.110 → 0.1.112

package/package.json

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

package/src/AST/FunctionCallNode.ts

@@ -29,8 +29,12 @@ export class FunctionCallNode<T = any> extends Node implements TreeNode {
         // @todo: Need to rewrite/refactor this. It's a bit of a mess with element queries.
         let tags: Tag[] = [];
         let functionScope: Scope = scope;
+        let functionName: string = '';
+        let instanceOfScopeMemberNode = false;
         if (this.fnc instanceof ScopeMemberNode) {
+            instanceOfScopeMemberNode = true
             functionScope = await this.fnc.scope.evaluate(scope, dom, tag);
+            functionName = await this.fnc.name.evaluate(scope, dom, tag);
             if (this.fnc.scope instanceof ElementQueryNode) {
                 const _tags = await this.fnc.scope.evaluate(scope, dom, tag);
                 if (_tags instanceof Array) {
@@ -47,6 +51,7 @@ export class FunctionCallNode<T = any> extends Node implements TreeNode {
 
         const values = await this.args.evaluate(scope, dom, tag);
         let func = await this.fnc.evaluate(scope, dom, tag);
+        console.log(tag?.element, functionName, func, scope.keys, functionScope?.keys, instanceOfScopeMemberNode);
         if (!func || func instanceof Array) {
             const functionName = await (this.fnc as any).name.evaluate(scope, dom, tag);
             const returnValues = [];

package/src/AST/ScopeMemberNode.ts

@@ -51,6 +51,8 @@ export class ScopeMemberNode extends ScopeNodeAbstract implements TreeNode {
             }
             const name = await this.name.evaluate(scope, dom, tag);
             await this.applyModifiers(name, parent, dom, tag);
+            if (!parent.get)
+                console.log('nani?', parent);
             const value: any = parent.get(name, false);
             values.push(value instanceof Scope && value.wrapped || value);
         }

package/src/Component.ts

@@ -25,17 +25,29 @@ export class Component extends HTMLElement {
         for (const child of Array.from(this.shadow.children)) {
             child['shadowParent'] = this;
         }
+        const slotPromises = [];
+        const tagsToSetup = [];
         this.shadow.querySelectorAll('slot').forEach((slot) => {
             const slotTagPromise = DOM.instance.buildTag(slot,false, SlotTag);
-            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]);
+            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);
+                            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);
         });
     }
 
@@ -43,7 +55,7 @@ export class Component extends HTMLElement {
         const tag = await DOM.instance.buildTag(this, true);
         tag.createScope(true);
         await DOM.instance.buildFrom(this.shadow);
-        await DOM.instance.resetBranch(tag);
-        await DOM.instance.setupTags([tag]);
+        await tag.dom.resetBranch(tag);
+        await tag.dom.setupTags([tag]);
     }
 }

package/src/Controller.ts

@@ -7,6 +7,15 @@ export abstract class Controller extends ScopeData {
     protected _tag: Tag;
     protected _element: HTMLElement;
 
+    constructor() {
+        super();
+        for (const k in this) {
+            if (this[k] as any instanceof Function) {
+                this.__properties__.push(k);
+            }
+        }
+    }
+
     public get scope(): Scope {
         return this._scope;
     }
@@ -24,12 +33,4 @@ export abstract class Controller extends ScopeData {
         this._tag = tag;
         this._element = element;
     }
-
-    public get(key: string): any {
-        return this._scope?.get(key);
-    }
-
-    public set(key: string, value: any): void {
-        this._scope?.set(key, value);
-    }
 }

package/src/DOM.ts

@@ -298,7 +298,7 @@ export class DOM extends EventDispatcher {
                 newTags.push(tag);
         }
 
-       await this.setupTags(newTags);
+        await this.setupTags(newTags);
 
         if (isRoot) {
             this._built = true;
@@ -352,7 +352,7 @@ export class DOM extends EventDispatcher {
 
     async getTagForScope(scope: Scope) {
         for (const tag of this.tags) {
-            if (tag.scope === scope)
+            if (tag.uniqueScope && tag.scope === scope)
                 return tag;
         }
 

package/src/Scope/ScopeDataAbstract.ts

@@ -23,8 +23,8 @@ export class ScopeDataAbstract extends EventDispatcher {
             return this.getProperty(name);
         }
         config = config || {};
-        const instance = new propertyType(config.default, config),
-            propDesc = Object.getOwnPropertyDescriptor(this, name);
+        const instance = new propertyType(config.default, config);
+        const propDesc = Object.getOwnPropertyDescriptor(this, name);
         this['__'+name] = instance;
         this.__properties__.push(name);
 
@@ -101,11 +101,11 @@ export class ScopeDataAbstract extends EventDispatcher {
         return data;
     }
 
-    get(key: string) {
+    public get(key: string) {
         return this[key];
     }
 
-    set(key: string, value: any) {
+    public set(key: string, value: any) {
         this[key] = value;
     }
 

package/src/Tag/SlottedTag.ts

@@ -7,9 +7,7 @@ export class SlottedTag extends Tag {
     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);
+        this.findParentTag();
     }
 
     findParentTag(): Tag {

package/src/Tag.ts

@@ -38,7 +38,8 @@ export class Tag extends DOMObject {
         '@text',
         '@html',
         '@class',
-        '@value'
+        '@value',
+        '@disabled'
     ];
 
     protected inputTags: string[] = [
@@ -395,6 +396,12 @@ export class Tag extends DOMObject {
                 const classes: string[] = value instanceof Array ? value : [value];
                 if (classes.length)
                     this.element.classList.add(...classes);
+            } else if (key === '@disabled') {
+                if (!!value) {
+                    this.element.setAttribute('disabled', '');
+                } else {
+                    this.element.removeAttribute('disabled');
+                }
             }
         } else {
             this.element.setAttribute(key, value);
@@ -411,6 +418,8 @@ export class Tag extends DOMObject {
                 return this.value;
             else if (key === '@class') {
                 return Array.from(this.element.classList);
+            } else if (key === '@disabled') {
+                return this.element.hasAttribute('disabled');
             }
         }
         return this.element.getAttribute(key);

package/src/attributes/Bind.ts

@@ -16,6 +16,7 @@ export class Bind extends Attribute {
     public async compile() {
         const tree: Tree = new Tree(this.getAttributeValue());
         await tree.prepare(this.tag.scope, this.tag.dom, this.tag);
+
         await super.compile();
     }
 
@@ -32,7 +33,7 @@ export class Bind extends Attribute {
         await super.setup();
     }
 
-    public async extract() {
+    public async connect() {
         let scopeKey: string = this.getAttributeValue();
         let ref: ScopeReference;
         try {
@@ -47,10 +48,6 @@ export class Bind extends Attribute {
         if (!!this.valueFromElement)
             this.updateFrom();
 
-        await super.extract();
-    }
-
-    public async connect() {
         if (this.doUpdateTo) {
             this.updateTo();
             this.boundScope.on(`change:${this.key}`, this.updateTo, this);

package/src/attributes/ControllerAttribute.ts

@@ -1,34 +1,32 @@
 import {Scope} from "../Scope";
 import {Attribute} from "../Attribute";
 import {Registry} from "../Registry";
+import {Controller} from "../Controller";
 
 @Registry.attribute('vsn-controller')
 export class ControllerAttribute extends Attribute {
     public static readonly canDefer: boolean = false;
     public static readonly scoped: boolean = true;
     public readonly registryName: string = 'controllers'
-    public readonly assignToParent: boolean = true;
     protected attributeKey: string;
     protected className: string;
     protected defaultClassName: string;
 
     public async setup() {
-        const parentScope: Scope = this.tag.parentTag.scope;
-        if (!parentScope)
-            return;
-
         this.attributeKey = this.getAttributeBinding();
         this.className = this.getAttributeValue(this.defaultClassName);
-
         const cls = await Registry.instance[this.registryName].get(this.className);
-        const obj = this.instantiateClass(cls);
 
-        if (this.attributeKey && obj) {
-            if (this.assignToParent && parentScope) {
-                parentScope.set(this.attributeKey, obj);
-            } else {
-                this.tag.scope.set(this.attributeKey, obj);
+        if (this.attributeKey) {
+            const controllerScope = new Scope(this.tag.scope);
+            const obj = new cls();
+            if (obj instanceof Controller) {
+                obj.init(this.tag.scope, this.tag, this.tag.element);
             }
+            controllerScope.wrap(obj);
+            this.tag.scope.set(this.attributeKey, controllerScope);
+        } else {
+            this.instantiateClass(cls);
         }
         await super.setup();
     }

package/src/attributes/SetAttribute.ts

@@ -21,7 +21,7 @@ export class SetAttribute extends Attribute {
         return this.boundScope.get(this.key, false);
     }
 
-    public async setup() {
+    public async extract() {
         this.property = this.getAttributeBinding();
         let ref: ScopeReference;
         try {
@@ -31,10 +31,6 @@ export class SetAttribute extends Attribute {
         }
         this.key = await ref.getKey();
         this.boundScope = await ref.getScope();
-        await super.setup();
-    }
-
-    public async extract() {
         let value = this.getAttributeValue(null);
         for (const m of this.getAttributeModifiers()) {
             const t = Registry.instance.types.getSynchronous(m);

package/src/version.ts

@@ -1,2 +1,2 @@
-export const VERSION = '0.1.110';
+export const VERSION = '0.1.112';
 

package/test/Controller.spec.ts

@@ -28,15 +28,18 @@ class TestController extends Controller {
 describe('Controller', () => {
     it("methods should be callable from vsn-script", async () => {
         document.body.innerHTML = `
-            <div vsn-controller:test="ControllerTestController" vsn-set:test.test="notTest" vsn-bind="test.test"></div>
+            <div id="controller" vsn-controller:test="ControllerTestController" vsn-set:test.test="notTest" vsn-bind="test.test"></div>
         `;
         const dom = new DOM(document);
         const deferred = SimplePromise.defer();
         dom.once('built', async () => {
-            expect(await dom.exec('test.test')).toBe('notTest');
-            expect(await dom.exec('test.isValid()')).toBe(false);
-            await dom.exec('test.test = "test"');
-            expect(await dom.exec('test.isValid()')).toBe(true);
+            const tag = await dom.exec('#controller');
+            expect(tag.scope.keys).toEqual(['test']);
+            expect(tag.scope.get('test').wrapped).toBeInstanceOf(TestController);
+            expect(await tag.exec('test.isValid()')).toBe(false);
+            expect(await tag.exec('test.test')).toBe('notTest');
+            await tag.exec('test.test = "test"');
+            expect(await tag.exec('test.isValid()')).toBe(true);
             deferred.resolve();
         });
         await deferred.promise;