Implement pym storage

src/core/client/framework/lib/bootstrap/TalkContext.tsx

@@ -8,6 +8,7 @@ import { Environment } from "relay-runtime";
 
 import { PostMessageService } from "talk-framework/lib/postMessage";
 import { RestClient } from "talk-framework/lib/rest";
+import { Storage } from "talk-framework/lib/storage";
 import { UIContext } from "talk-ui/components";
 import { ClickFarAwayRegister } from "talk-ui/components/ClickOutside";
 

src/core/client/framework/lib/bootstrap/createContext.tsx

@@ -8,6 +8,7 @@ import { Environment, Network, RecordSource, Store } from "relay-runtime";
 import { LOCAL_ID } from "talk-framework/lib/relay";
 import {
   createLocalStorage,
+  createPymStorage,
   createSessionStorage,
 } from "talk-framework/lib/storage";
 
@@ -116,8 +117,12 @@ export default async function createContext({
     registerClickFarAway,
     rest: new RestClient("/api", tokenGetter),
     postMessage: new PostMessageService(),
-    localStorage: createLocalStorage(),
-    sessionStorage: createSessionStorage(),
+    localStorage: pym
+      ? createPymStorage(pym, "localStorage")
+      : createLocalStorage(),
+    sessionStorage: pym
+      ? createPymStorage(pym, "sessionStorage")
+      : createSessionStorage(),
   };
 
   // Run custom initializations.

src/core/client/framework/lib/storage/InMemoryStorage.ts

@@ -38,6 +38,10 @@ class InMemoryStorage implements Storage {
   public removeItem(key: string) {
     delete this.storage[key];
   }
+
+  public toString() {
+    return JSON.stringify(this.storage);
+  }
 }
 
 export default function createInMemoryStorage() {

src/core/client/framework/lib/storage/PymStorage.spec.ts

@@ -0,0 +1,100 @@
+import createPymStorage from "./PymStorage";
+
+class PymStub {
+  public listeners: Record<string, ((msg: string) => void)> = {};
+  public messages: Array<{ key: string; value: string }> = [];
+  public type: string;
+
+  constructor(type: string) {
+    this.type = type;
+  }
+
+  public onMessage(key: string, callback: (msg: string) => void) {
+    this.listeners[key] = callback;
+  }
+  public sendMessage(key: string, value: string) {
+    this.messages.push({ key, value });
+  }
+}
+
+describe("PymStorage", () => {
+  it("should set item", () => {
+    const pym = new PymStub("localStorage");
+    const storage = createPymStorage(pym as any, "localStorage");
+    const promise = storage.setItem("test", "value");
+    const { key, value } = pym.messages.pop()!;
+    expect(key).toBe(`pymStorage.localStorage.request`);
+    const { id, method, parameters } = JSON.parse(value);
+    expect(method).toBe("setItem");
+    expect(parameters).toEqual({ key: "test", value: "value" });
+    pym.listeners["pymStorage.localStorage.response"](JSON.stringify({ id }));
+    expect(promise).resolves.toBeUndefined();
+  });
+
+  it("should remove item", () => {
+    const pym = new PymStub("localStorage");
+    const storage = createPymStorage(pym as any, "localStorage");
+    const promise = storage.removeItem("test");
+    const { key, value } = pym.messages.pop()!;
+    expect(key).toBe(`pymStorage.localStorage.request`);
+    const { id, method, parameters } = JSON.parse(value);
+    expect(method).toBe("removeItem");
+    expect(parameters).toEqual({ key: "test" });
+    pym.listeners["pymStorage.localStorage.response"](JSON.stringify({ id }));
+    expect(promise).resolves.toBeUndefined();
+  });
+
+  it("should get item", () => {
+    const pym = new PymStub("localStorage");
+    const storage = createPymStorage(pym as any, "localStorage");
+    const promise = storage.getItem("test");
+    const { key, value } = pym.messages.pop()!;
+    expect(key).toBe(`pymStorage.localStorage.request`);
+    const { id, method, parameters } = JSON.parse(value);
+    expect(method).toBe("getItem");
+    expect(parameters).toEqual({ key: "test" });
+    pym.listeners["pymStorage.localStorage.response"](
+      JSON.stringify({ id, result: "value" })
+    );
+    expect(promise).resolves.toBe("value");
+  });
+
+  describe("on error", () => {
+    it("should reject set item", () => {
+      const pym = new PymStub("localStorage");
+      const storage = createPymStorage(pym as any, "localStorage");
+      const promise = storage.setItem("test", "value");
+      const { key, value } = pym.messages.pop()!;
+      expect(key).toBe(`pymStorage.localStorage.request`);
+      const { id } = JSON.parse(value);
+      pym.listeners["pymStorage.localStorage.error"](
+        JSON.stringify({ id, error: "error" })
+      );
+      expect(promise).rejects.toThrow(new Error("error"));
+    });
+    it("should reject remove item", () => {
+      const pym = new PymStub("localStorage");
+      const storage = createPymStorage(pym as any, "localStorage");
+      const promise = storage.removeItem("test");
+      const { key, value } = pym.messages.pop()!;
+      expect(key).toBe(`pymStorage.localStorage.request`);
+      const { id } = JSON.parse(value);
+      pym.listeners["pymStorage.localStorage.error"](
+        JSON.stringify({ id, error: "error" })
+      );
+      expect(promise).rejects.toThrow(new Error("error"));
+    });
+    it("should reject get item", () => {
+      const pym = new PymStub("localStorage");
+      const storage = createPymStorage(pym as any, "localStorage");
+      const promise = storage.getItem("test");
+      const { key, value } = pym.messages.pop()!;
+      expect(key).toBe(`pymStorage.localStorage.request`);
+      const { id } = JSON.parse(value);
+      pym.listeners["pymStorage.localStorage.error"](
+        JSON.stringify({ id, error: "error" })
+      );
+      expect(promise).rejects.toThrow(new Error("error"));
+    });
+  });
+});

src/core/client/framework/lib/storage/PymStorage.ts

@@ -0,0 +1,57 @@
+import { Child, Parent } from "pym.js";
+import uuid from "uuid/v4";
+import { Storage } from "./interface";
+
+type Pym = Child | Parent;
+
+/**
+ * Creates a storage that put requests onto pym.
+ * This is the counterpart of `connectStorageToPym`.
+ * @param  {string} pym  pym
+ * @return {Object} storage
+ */
+export default function createPymStorage(
+  pym: Pym,
+  type: "localStorage" | "sessionStorage"
+): Storage {
+  // A Map of requestID => {resolve, reject}
+  const requests: Record<
+    string,
+    { resolve: ((v: any) => void); reject: ((v: any) => void) }
+  > = {};
+
+  // Requests method with parameters over pym.
+  const call = <T>(
+    method: string,
+    parameters: { key: string; value?: string }
+  ): Promise<T> => {
+    const id = uuid();
+    return new Promise((resolve, reject) => {
+      requests[id] = { resolve, reject };
+      pym.sendMessage(
+        `pymStorage.${type}.request`,
+        JSON.stringify({ id, method, parameters })
+      );
+    });
+  };
+
+  // Receive successful responses.
+  pym.onMessage(`pymStorage.${type}.response`, (msg: string) => {
+    const { id, result } = JSON.parse(msg);
+    requests[id].resolve(result);
+    delete requests[id];
+  });
+
+  // Receive error responses.
+  pym.onMessage(`pymStorage.${type}.error`, (msg: string) => {
+    const { id, error } = JSON.parse(msg);
+    requests[id].reject(new Error(error));
+    delete requests[id];
+  });
+
+  return {
+    setItem: (key: string, value: string) => call("setItem", { key, value }),
+    getItem: (key: string) => call("getItem", { key }),
+    removeItem: (key: string) => call("removeItem", { key }),
+  };
+}

src/core/client/framework/lib/storage/__snapshots__/PymStorage.spec.ts.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`connectStorageToPym should handle handle errors 1`] = `"[{\\"key\\":\\"pymStorage.localStorage.error\\",\\"value\\":\\"{\\\\\\"id\\\\\\":\\\\\\"0\\\\\\",\\\\\\"error\\\\\\":\\\\\\"error\\\\\\"}\\"}]"`;
+
+exports[`connectStorageToPym should handle unknown method 1`] = `"[{\\"key\\":\\"pymStorage.localStorage.error\\",\\"value\\":\\"{\\\\\\"id\\\\\\":\\\\\\"0\\\\\\",\\\\\\"error\\\\\\":\\\\\\"Unknown method unknown\\\\\\"}\\"}]"`;
+
+exports[`connectStorageToPym should set, get and remove item 1`] = `"{\\"talkPymStorage:key\\":\\"test\\"}"`;
+
+exports[`connectStorageToPym should set, get and remove item 2`] = `"{}"`;
+
+exports[`connectStorageToPym should set, get and remove item 3`] = `"[{\\"key\\":\\"pymStorage.localStorage.response\\",\\"value\\":\\"{\\\\\\"id\\\\\\":\\\\\\"0\\\\\\"}\\"},{\\"key\\":\\"pymStorage.localStorage.response\\",\\"value\\":\\"{\\\\\\"id\\\\\\":\\\\\\"1\\\\\\",\\\\\\"result\\\\\\":\\\\\\"test\\\\\\"}\\"},{\\"key\\":\\"pymStorage.localStorage.response\\",\\"value\\":\\"{\\\\\\"id\\\\\\":\\\\\\"2\\\\\\"}\\"}]"`;

src/core/client/framework/lib/storage/index.ts

@@ -1,3 +1,5 @@
 export { default as createInMemoryStorage } from "./InMemoryStorage";
 export { default as createLocalStorage } from "./LocalStorage";
 export { default as createSessionStorage } from "./SessionStorage";
+export { default as createPymStorage } from "./PymStorage";
+export { Storage } from "./interface";

src/core/client/framework/lib/storage/interface.ts

@@ -0,0 +1,14 @@
+export interface Storage {
+  /**
+   * value = storage[key]
+   */
+  getItem(key: string): Promise<string | null> | string | null;
+  /**
+   * delete storage[key]
+   */
+  removeItem(key: string): Promise<void> | void;
+  /**
+   * storage[key] = value
+   */
+  setItem(key: string, value: string): Promise<void> | void;
+}