First set of tests, Collection is now order-preserving, custom json can use primitives, getters without setters

Author: danielearwicker

.travis.yml

@@ -0,0 +1,8 @@
+language: node_js
+install:
+    - npm install
+script: npm run all
+after_success:
+  - cat ./coverage/lcov.info|./node_modules/coveralls/bin/coveralls.js
+node_js:
+  - 6

README.md

@@ -110,3 +110,4 @@ When the type changes, the previous instance has its `dispose` method called, if
 ## Undo
 
 When you construct an `Undo` object you pass it the root object-with-a-`json`-property and it immediately captures the current state. It does this inside `autorun`, so if the state changes it will be recaptured. The second time this happens, the previous state is pushed onto the undo stack. `Undo` has public properties `canUndo` and `canRedo`, and methods `undo` and `redo`, so you can link those up to a couple of toolbar buttons in an editor.
+

package.json

@@ -1,23 +1,35 @@
 {
   "name": "json-mobx",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Simple undo/redo and persistence for MobX",
   "main": "built/index.js",
   "types": "built/index.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "prepublish": "tsc"
+    "build": "tsc",
+    "test": "tape built/test/**/*.js",
+    "coverage": "istanbul cover tape built/test/**/*.js",
+    "prepublish": "npm run build && npm run test",
+    "all": "npm run build && npm run test && npm run coverage"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/danielearwicker/json-mobx.git"
   },
+  "keywords": [
+    "mobx",
+    "persistence",
+    "json"
+  ],
   "author": "Daniel Earwicker <[email protected]>",
   "license": "MIT",
   "dependencies": {
     "mobx": "^3.0.0"
   },
   "devDependencies": {
-    "typescript": "^2.1.5"
+    "@types/blue-tape": "^0.1.30",
+    "blue-tape": "^1.0.0",
+    "coveralls": "^2.11.16",
+    "istanbul": "^0.4.5",
+    "typescript": "^2.1.6"
   }
 }

src/Collection.ts

@@ -15,28 +15,46 @@ export class Collection<T extends (Identified & Partial<Disposable>)> {
     @computed get json() {
         return this.items.map(json.save);
     }
-    set json(data) {        
-        // Do a simple diff/merge to avoid recreating items unnecessarily
-        const existing: { [id: string]: boolean } = {};
-        for (let i = 0; i < this.items.length; i++) {
-            const item = this.items[i];
-            const itemJson = data.find(w => w.id === item.id);
-            if (itemJson) {
+    set json(data) {
+
+        // Build map of existing items by id (check for uniqueness)
+        const existing: { [id: string]: T } = {};
+        for (const item of this.items) {
+            if (existing[item.id]) {
+                throw new Error(`Duplicate item id ${item.id}`);
+            }
+            existing[item.id] = item;
+        }
+
+        // Bring into line with supplied data
+        if (data && Array.isArray(data)) {            
+            for (let i = 0; i < data.length; i++) {
+                const itemJson = data[i];
+
+                // Reuse existing item with same id
+                let item = existing[itemJson.id];
+                if (item) {
+                    delete existing[itemJson.id];
+                } else {
+                    item = this.factory();
+                }
+
                 json.load(item, itemJson);
-                existing[item.id] = true;
-            } else {
-                if (item.dispose) {
-                    item.dispose();
-                }                
-                this.items.splice(i, 1);
-                i--;
+                if (item.id !== itemJson.id) {
+                    throw new Error("Items must have persistent id property");
+                }
+
+                this.items[i] = item;
             }
+        } else {
+            this.items.length = 0;
         }
-        for (const itemJson of data) {
-            if (!existing[itemJson.id]) {
-                const newItem = this.factory();
-                json.load(newItem, itemJson);
-                this.items.push(newItem);
+
+        // Dispose any items not reused
+        for (const key of Object.keys(existing)) {
+            const item = existing[key];
+            if (item.dispose) {
+                item.dispose();
             }
         }
     }

src/json.ts

@@ -3,7 +3,18 @@ import { computed, IComputedValue } from "mobx";
 const jsonPropertiesKey = "$jsonProperties";
 const jsonJsonKey = "$jsonJson";
 
-function jsonImpl(prototype: any, propertyName: any) {
+function getPropertyDescriptor(obj: any, propertyName: string) {
+    while (obj) {
+        const desc = Object.getOwnPropertyDescriptor(obj, propertyName);
+        if (desc) {
+            return desc;
+        }
+        obj = Object.getPrototypeOf(obj);
+    }
+    return undefined;
+}
+
+function jsonImpl(prototype: any, propertyName: string) {
 
     function getJsonComputed(that: any) {
 
@@ -21,10 +32,13 @@ function jsonImpl(prototype: any, propertyName: any) {
                 for (const propertyName of that[jsonPropertiesKey]) {
                     const source = data[propertyName];
                     const target = that[propertyName];
-                    if (target && typeof target === "object" && "json" in target) {
+                    if (source && target && typeof target === "object" && "json" in target) {
                         target.json = source;
                     } else {
-                        that[propertyName] = source;
+                        const prop = getPropertyDescriptor(that, propertyName);
+                        if (!prop || prop.set || !prop.get) {
+                            that[propertyName] = source;
+                        }
                     }
                 }
             });
@@ -62,13 +76,13 @@ function jsonImpl(prototype: any, propertyName: any) {
 }
 
 function checkJsonProperty(obj: any) {
-    if (!obj && !("json" in obj)) {
+    if (typeof obj !== "object" || !("json" in obj)) {
         throw new Error("Cannot load/save objects without json property");
     }
 }
 
 function load(obj: any, data: any) {    
-    if (data) {
+    if (data !== "undefined" && obj) {
         checkJsonProperty(obj);
         obj.json = data;
     }

test/customFormat.ts

@@ -0,0 +1,53 @@
+import * as test from "tape";
+import { json } from "../index"
+
+class C1 {
+
+    get json() {
+        return { mandatory: true };
+    }
+    set json(data: any) {
+        if (!data.mandatory) {
+            throw new Error("missing!");
+        }
+    }
+}
+
+class C2 {
+    @json c1 = new C1();
+}
+
+class C3 {
+
+    b = false;
+
+    get json() {
+        return this.b;
+    }
+    set json(data: any) {
+        this.b = data;
+    }
+}
+
+test(`customFormat`, t => {
+
+    const o1 = new C1();
+    const j1 = json.save(o1);
+    t.same(j1, { mandatory: true });
+    json.load(o1, { mandatory: true});
+
+    const o2 = new C2();
+    const j2 = json.save(o2);
+    t.same(j2, { c1: { mandatory: true } });
+    json.load(o2, { c1: { mandatory: true} });
+
+    const o3 = new C3();
+    const j3 = json.save(o3);
+    t.equal(j3, false);
+    json.load(o3, true);
+    t.equal(o3.b, true);
+    json.load(o3, false);
+    t.equal(o3.b, false);
+
+    t.end();
+});

test/deepTree.ts

@@ -0,0 +1,36 @@
+import * as test from "tape";
+import { observable } from "mobx"
+import { json } from "../index"
+
+class Node {
+    @json @observable tag: number;
+    @json @observable next?: Node;
+
+    constructor(tag: number, next?: Node) {
+        this.tag = tag;
+        this.next = next;
+    }
+}
+
+test(`deepTree`, t => {
+
+    let head: Node | undefined = undefined;
+    for (let n = 0; n < 20; n++) {
+        head = new Node(n, head);
+    }
+
+    const j1 = json.save(head);
+
+    t.equal(JSON.stringify(j1), '{"tag":19,"next":{"tag":18,"next":{"tag":17,"next":{"tag":16,"next":{"tag":15,"next":{"tag":14,"next":{"tag":13,"next":{"tag":12,"next":{"tag":11,"next":{"tag":10,"next":{"tag":9,"next":{"tag":8,"next":{"tag":7,"next":{"tag":6,"next":{"tag":5,"next":{"tag":4,"next":{"tag":3,"next":{"tag":2,"next":{"tag":1,"next":{"tag":0}}}}}}}}}}}}}}}}}}}}');    
+
+    json.load(head, JSON.parse('{"tag":4,"next":{"tag":3,"next":{"tag":2,"next":{"tag":1,"next":{"tag":0}}}}}'));
+
+    t.equal(head!.next!.next!.next!.next!.next!, undefined);
+    t.equal(head!.next!.next!.next!.next!.tag, 0);
+    t.equal(head!.next!.next!.next!.tag, 1);
+    t.equal(head!.next!.next!.tag, 2);
+    t.equal(head!.next!.tag, 3);
+    t.equal(head!.tag, 4);
+
+    t.end();
+});

test/getterWithoutSetter.ts

@@ -0,0 +1,58 @@
+import * as test from "tape";
+import { observable } from "mobx"
+import { json } from "../index"
+
+class C1 {
+    @json yourName = "Ted";
+
+    @json get message() {
+        return `Hello, ${this.yourName}`;
+    }
+}
+
+test(`getterWithoutSetter - with plain value`, t => {
+
+    const o1 = new C1();
+
+    const j = json.save(o1);
+
+    t.equal(j.yourName, "Ted");
+    t.equal(j.message, "Hello, Ted");
+
+    j.yourName = "Bill";
+
+    json.load(o1, j);
+
+    t.equal(o1.yourName, "Bill");
+    t.equal(o1.message, "Hello, Bill");
+
+    t.end();
+});
+
+class C2 {
+    @json @observable yourName = "Ted";
+
+    @json get message() {
+        return `Hello, ${this.yourName}`;
+    }
+}
+
+test(`getterWithoutSetter - with observable value`, t => {
+
+    const o1 = new C2();
+
+    const j = json.save(o1);
+
+    t.equal(j.yourName, "Ted");
+    t.equal(j.message, "Hello, Ted");
+
+    j.yourName = "Bill";
+
+    json.load(o1, j);
+
+    t.equal(o1.yourName, "Bill");
+    t.equal(o1.message, "Hello, Bill");
+
+    t.end();
+});
+

test/stableCollection.ts

@@ -0,0 +1,48 @@
+import * as test from "tape";
+//import { observable } from "mobx"
+import { json, Collection } from "../index"
+
+class I {
+    @json id = I.nextId++;
+    @json message = ""
+
+    selected = false;
+
+    constructor(message?: string) {
+        this.message = message || "";
+    }
+
+    static nextId = 1;
+}
+
+class C {
+    @json list = new Collection<I>(() => new I());
+
+    messages() {
+        return this.list.items.map(i => i.message).join(",");
+    }
+}
+
+test(`stableCollection`, t => {
+
+    const c = new C();
+
+    c.list.items.push(new I("a"));
+    c.list.items.push(new I("b"));
+    t.equal(c.messages(), "a,b");
+
+    c.list.items[1].selected = true;
+
+    json.load(c, {
+        list: [
+            {id: 1, message: "a"},
+            {id: 3, message: "c"},
+            {id: 2, message: "b"}
+        ]
+    });
+
+    t.equal(c.messages(), "a,c,b");
+    t.equal(c.list.items[2].selected, true);
+
+    t.end();
+});