fix class method binding this

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mr-router5",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "mr-router5 uses Router5 together with MobX for your favorite React application.",
   "keywords": [
     "router5",

src/RoutePayload.ts

@@ -2,6 +2,13 @@
  * @private
  */
 export default class RoutePayload {
+    constructor() {
+        this.setExtra = this.setExtra.bind(this);
+        this.setDataLoader = this.setDataLoader.bind(this);
+        this.getExtra = this.getExtra.bind(this);
+        this.getDataLoader = this.getDataLoader.bind(this);
+    }
+
     /**
      * hold extra data.
      * @private

src/RouteTree.ts

@@ -24,6 +24,11 @@ export default class RouteTree extends RoutePayload {
     constructor(routeViews: RouteView[] = []) {
         super();
         this.routeViews = routeViews;
+
+        this.setRouter = this.setRouter.bind(this);
+        this.addRouteViews = this.addRouteViews.bind(this);
+        this.getRoutes = this.getRoutes.bind(this);
+        this.getRouteView = this.getRouteView.bind(this);
     }
 
     /**

src/RouterStore.ts

@@ -6,6 +6,10 @@ import RouteView from "./RouteView";
 
 
 export default class RouterStore {
+    constructor() {
+        this.getRouteNode = this.getRouteNode.bind(this);
+    }
+
     /**
      * the observable 'to' state route.
      */

src/__tests__/RoutePayload.test.ts

@@ -11,32 +11,28 @@ afterEach(() => {
     payload = null;
 });
 
-test("set extra data", () => {
-    expect(payload.setExtra("t1", "v1")).toBe(payload);
+test("set data", () => {
+    const { setExtra, setDataLoader } = payload;
+
+    expect(setExtra("t1", "v1")).toBe(payload);
     expect(payload.extra.get("t1")).toBe("v1");
-});
 
-test("set dataLoader data", () => {
-    expect(payload.setDataLoader("t1", "v1")).toBe(payload);
+    expect(setDataLoader("t1", "v1")).toBe(payload);
     expect(payload.dataLoader.get("t1")).toBe("v1");
 });
 
-test("get extra data", () => {
-    const extra = payload.extra;
+test("get data", () => {
+    const { extra, dataLoader, getExtra, getDataLoader } = payload;
 
     extra.set("t1", "v1");
     expect(extra.get("t1")).toBe("v1");
-    expect(payload.getExtra("t1")).toBe("v1");
-    expect(payload.getExtra("t2", "v2")).toBe("v2");
-    expect(payload.getExtra("t2")).toBe(undefined);
-});
-
-test("get dataLoader data", () => {
-    const dataLoader = payload.dataLoader;
+    expect(getExtra("t1")).toBe("v1");
+    expect(getExtra("t2", "v2")).toBe("v2");
+    expect(getExtra("t2")).toBe(undefined);
 
     dataLoader.set("t1", "v1");
     expect(dataLoader.get("t1")).toBe("v1");
-    expect(payload.getDataLoader("t1")).toBe("v1");
-    expect(payload.getDataLoader("t2", "v2")).toBe("v2");
-    expect(payload.getDataLoader("t2")).toBe(undefined);
+    expect(getDataLoader("t1")).toBe("v1");
+    expect(getDataLoader("t2", "v2")).toBe("v2");
+    expect(getDataLoader("t2")).toBe(undefined);
 });

src/__tests__/RouteTree.test.ts

@@ -11,43 +11,44 @@ const routeViews = [
 
 test("getRouteView - constructor()", () => {
     const routeTree = new RouteTree(routeViews);
+    const { getRouteView } = routeTree;
 
     expect(() => {
         routeTree.getRouteView("r3")
     }).toThrow();
     expect(routeTree.getRouteView("r1")).toBe(routeViews[0]);
-    expect(routeTree.getRouteView("r2")).toBe(routeViews[1]);
+    expect(getRouteView("r2")).toBe(routeViews[1]);
 });
 
 test("getRouteView - addRouteViews()", () => {
     const router = createRouter();
-    const routeTree = new RouteTree();
-    routeTree.setRouter(router);
-    routeTree.addRouteViews(routeViews);
+    const { setRouter, addRouteViews, getRouteView } = new RouteTree();
+    setRouter(router);
+    addRouteViews(routeViews);
     router.start("/r1");
 
-    expect(routeTree.getRouteView("r1")).toBe(routeViews[0]);
-    expect(routeTree.getRouteView("r2")).toBe(routeViews[1]);
+    expect(getRouteView("r1")).toBe(routeViews[0]);
+    expect(getRouteView("r2")).toBe(routeViews[1]);
     expect(router.buildPath("r1")).toBe("/r1");
     expect(router.buildPath("r2")).toBe("/r2");
 
     expect(router.buildPath("r3")).toBe(null);
     expect(() => {
-        routeTree.getRouteView("r3");
+        getRouteView("r3");
     }).toThrow();
 
 });
 
 test("getRouteView - addRouteViews() without setting router", () => {
-    const routeTree = new RouteTree();
+    const { addRouteViews } = new RouteTree();
     expect(() => {
-        routeTree.addRouteViews(routeViews);
+        addRouteViews(routeViews);
     }).toThrow();
 });
 
 test("getRoutes", () => {
-    const routeTree = new RouteTree(routeViews);
-    const routes = routeTree.getRoutes();
+    const { getRoutes } = new RouteTree(routeViews);
+    const routes = getRoutes();
 
     expect(routes.length).toBe(2);
     expect(routes[0].name).toBe("r1");

src/__tests__/RouterStore.test.ts

@@ -20,8 +20,10 @@ test("routerStore.routeUpdated()", () => {
     initMrRouter5(router, routeTree);
     router.start("/");
 
+    const { getRouteNode } = routerStore;
+
     router.navigate("users.view", () => {
         expect(routerStore.route.name).toBe("users.view");
-        expect(routerStore.getRouteNode("users").component).toBe(UserViewComponent);
+        expect(getRouteNode("users").component).toBe(UserViewComponent);
     });
 });