vsn 0.1.88 → 0.1.91

package/package.json

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

package/src/DOM.ts

@@ -199,19 +199,21 @@ export class DOM extends EventDispatcher {
         const newTags: Tag[] = [];
         const toBuild: HTMLElement[] = [];
 
-        const checkElement = (e: HTMLElement) => {
+        const checkElement = (e: HTMLElement): boolean => {
             if (ElementHelper.hasVisionAttribute(e)) {
                 if (
                     (!forComponent && e.hasAttribute('slot'))
-                ) return;
-                if (this.queued.indexOf(e) > -1) return;
+                ) return false;
+                if (this.queued.indexOf(e) > -1) return false;
                 this.queued.push(e);
                 toBuild.push(e);
             }
+
+            return true;
         }
         const scanChildren = (e: HTMLElement) => {
             for (const element of Array.from(e.children) as HTMLElement[]) {
-                checkElement(element);
+                if (!checkElement(element)) continue;
                 if (element.tagName.toLowerCase() !== 'template')
                     scanChildren(element);
             }

package/src/Scope/WrappedArray.ts

@@ -14,8 +14,8 @@ export class WrappedArray<T> extends Array<T> {
         this.dispatcher.dispatch(event, ...args);
     }
 
-    on(event: string, callback: EventDispatcherCallback) {
-        this.dispatcher.on(event, callback);
+    on(event: string, callback: EventDispatcherCallback, ctx?: any) {
+        this.dispatcher.on(event, callback, ctx);
     }
 
     off(event: string, key?: number) {

package/src/attributes/List.ts

@@ -1,27 +1,20 @@
 import {Attribute} from "../Attribute";
 import {Tag} from "../Tag";
 import {WrappedArray} from "../Scope/WrappedArray";
-import {Tree} from "../AST";
 import {ElementHelper} from "../helpers/ElementHelper";
 import {Registry} from "../Registry";
 import {DOM} from "../DOM";
+import {Scope} from "../Scope";
 
 @Registry.attribute('vsn-list')
 export class List extends Attribute {
     public static readonly canDefer: boolean = false;
     public static readonly scoped: boolean = true;
-    public tree: Tree;
+
     public items: any[];
     public tags: Tag[];
     protected template: Node;
 
-    public async compile() {
-        const listAttr: string = this.getAttributeBinding();
-        this.tree = new Tree(listAttr);
-        await this.tree.prepare(this.tag.scope, this.tag.dom, this.tag);
-        await super.compile();
-    }
-
     public async setup() {
         if (this.tag.element.children.length > 0) {
             const template = this.tag.element.children[0];
@@ -50,9 +43,26 @@ export class List extends Attribute {
     }
 
     public async extract() {
-        const items = await this.tree.evaluate(this.tag.scope, this.tag.dom, this.tag);
+        const listAttr: string = this.getAttributeBinding('items');
+        const ref = this.tag.scope.getReference(listAttr);
+        const listScope: Scope = await ref.getScope();
+        const listKey: string = await ref.getKey();
+        const items = listScope.get(listKey);
         await this.addExistingItems(items);
 
+        listScope.on(`change:${listKey}`, (e) => {
+            if (e.oldValue) {
+                if (e.oldValue instanceof WrappedArray) {
+                    e.oldValue.map((item) => {
+                        this.remove(item);
+                    });
+                    e.oldValue.offWithContext('add', this);
+                    e.oldValue.offWithContext('remove', this);
+                }
+                this.addExistingItems(e.value);
+            }
+        });
+
         if (this.tag.hasRawAttribute('initial-items')) {
             const toAdd: number = parseInt(this.tag.getRawAttributeValue('initial-items'));
             for (let i = 0; i < toAdd; i++) {
@@ -64,6 +74,14 @@ export class List extends Attribute {
 
     protected async addExistingItems(defaultList: any[] | null) {
         this.items = defaultList || new WrappedArray();
+
+        if (this.tags?.length > 0) {
+            for (const tag of this.tags) {
+                tag.deconstruct();
+                tag.removeFromDOM();
+            }
+        }
+
         this.tags = [];
 
         if (defaultList)
@@ -86,12 +104,8 @@ export class List extends Attribute {
             this.items = new WrappedArray(this.items);
         }
 
-        (this.items as WrappedArray<any>).on('add', (item) => {
-            this.add(item);
-        });
-        (this.items as WrappedArray<any>).on('remove', (item) => {
-            this.remove(item);
-        });
+        (this.items as WrappedArray<any>).on('add', this.add, this);
+        (this.items as WrappedArray<any>).on('remove', this.remove, this);
 
         this.tag.scope.set('add', this.add.bind(this));
         this.tag.scope.set('remove', this.remove.bind(this));
@@ -110,6 +124,7 @@ export class List extends Attribute {
             const tag: Tag = this.tags[i];
             const listItem = tag.scope.get(this.listItemName);
             if ([listItem, listItem.wrapped].indexOf(item) > -1) {
+                tag.deconstruct();
                 tag.removeFromDOM();
                 this.tags.splice(i, 1);
 

package/src/version.ts

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