vsn 0.1.89 → 0.1.92

package/package.json

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

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));
@@ -109,7 +123,8 @@ export class List extends Attribute {
         for (let i: number = 0; i < this.tags.length; i++) {
             const tag: Tag = this.tags[i];
             const listItem = tag.scope.get(this.listItemName);
-            if ([listItem, listItem.wrapped].indexOf(item) > -1) {
+            if ([listItem, listItem.data, 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.89';
+export const VERSION = '0.1.92';