1 files changed, 56 insertions, 1 deletions

diff --git a/src/new_fields/List.ts b/src/new_fields/List.ts
index 428f661c9..ecde4edc7 100644
--- a/src/new_fields/List.ts
+++ b/src/new_fields/List.ts
@@ -2,14 +2,68 @@ import { Deserializable, autoObject } from "../client/util/SerializationHelper";
 import { Field, Update, Self } from "./Doc";
 import { setter, getter } from "./util";
 import { serializable, alias, list } from "serializr";
-import { observable } from "mobx";
+import { observable, observe, IArrayChange, IArraySplice, IObservableArray, Lambda } from "mobx";
 import { ObjectField, OnUpdate } from "./ObjectField";
 
+const listHandlers: any = {
+    push(...items: any[]) {
+        console.log("push");
+        console.log(...items);
+        return this[Self].__fields.push(...items);
+    },
+    pop(): any {
+        return this[Self].__fields.pop();
+    }
+};
+
+function listGetter(target: any, prop: string | number | symbol, receiver: any): any {
+    if (listHandlers.hasOwnProperty(prop)) {
+        return listHandlers[prop];
+    }
+    return getter(target, prop, receiver);
+}
+
+interface ListSpliceUpdate<T> {
+    type: "splice";
+    index: number;
+    added: T[];
+    removedCount: number;
+}
+
+interface ListIndexUpdate<T> {
+    type: "update";
+    index: number;
+    newValue: T;
+}
+
+type ListUpdate<T> = ListSpliceUpdate<T> | ListIndexUpdate<T>;
+
+const ObserveDisposer = Symbol("Observe Disposer");
+
+function listObserver<T extends Field>(this: ListImpl<T>, change: IArrayChange<T> | IArraySplice<T>) {
+    if (change.type === "splice") {
+        this[Update]({
+            index: change.index,
+            removedCount: change.removedCount,
+            added: change.added,
+            type: change.type
+        });
+    } else {
+        //This should already be handled by the getter for the Proxy
+        // this[Update]({
+        //     index: change.index,
+        //     newValue: change.newValue,
+        //     type: change.type
+        // });
+    }
+}
+
 @Deserializable("list")
 class ListImpl<T extends Field> extends ObjectField {
     constructor(fields: T[] = []) {
         super();
         this.__fields = fields;
+        this[ObserveDisposer] = observe(this.__fields as IObservableArray<T>, listObserver.bind(this));
         const list = new Proxy<this>(this, {
             set: setter,
             get: getter,
@@ -31,6 +85,7 @@ class ListImpl<T extends Field> extends ObjectField {
         update && update(diff);
     }
 
+    private [ObserveDisposer]: Lambda;
     private [Self] = this;
 }
 export type List<T extends Field> = ListImpl<T> & T[];