Update to Replicache 6.2.0

rocicorp · Apr 12, 2021 · 2af89a0 · 2af89a0
1 parent 2593b5e
commit 2af89a0
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 109 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,6 @@
+{
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "arrowParens": "always",
+  "bracketSpacing": true
+}
diff --git a/frontend/data.ts b/frontend/data.ts
@@ -27,7 +27,10 @@ import type { UserInfo } from "../shared/client-state";
 export type Data = Await<ReturnType<typeof createData>>;
 type Await<T> = T extends PromiseLike<infer U> ? U : T;
 
-export async function createData(rep: Replicache) {
+export async function createData(
+  rep: Replicache<typeof mutators>,
+  defaultUserInfo: UserInfo
+) {
   let clientID = await rep.clientID;
 
   function subscribe<T extends JSONValue>(
@@ -37,106 +40,25 @@ export async function createData(rep: Replicache) {
     return useSubscribe(rep, f, def);
   }
 
+  await rep.mutate.initClientState({
+    id: clientID,
+    defaultUserInfo,
+  });
+
   return {
     clientID,
 
     get rep(): Replicache {
       return rep;
     },
 
-    // mutators
-    createShape: rep.register(
-      "createShape",
-      async (tx: WriteTransaction, args: { id: string; shape: Shape }) => {
-        await putShape(writeStorage(tx), args);
-      }
-    ),
-
-    deleteShape: rep.register(
-      "deleteShape",
-      async (tx: WriteTransaction, id: string) => {
-        await deleteShape(writeStorage(tx), id);
-      }
-    ),
-
-    moveShape: rep.register(
-      "moveShape",
-      async (
-        tx: WriteTransaction,
-        args: { id: string; dx: number; dy: number }
-      ) => {
-        await moveShape(writeStorage(tx), args);
-      }
-    ),
-
-    resizeShape: rep.register(
-      "resizeShape",
-      async (tx: WriteTransaction, args: { id: string; ds: number }) => {
-        await resizeShape(writeStorage(tx), args);
-      }
-    ),
-
-    rotateShape: rep.register(
-      "rotateShape",
-      async (tx: WriteTransaction, args: { id: string; ddeg: number }) => {
-        await rotateShape(writeStorage(tx), args);
-      }
-    ),
-
-    initClientState: rep.register(
-      "initClientState",
-      async (
-        tx: WriteTransaction,
-        args: { id: string; defaultUserInfo: UserInfo }
-      ) => {
-        await initClientState(writeStorage(tx), args);
-      }
-    ),
-
-    setCursor: rep.register(
-      "setCursor",
-      async (
-        tx: WriteTransaction,
-        args: { id: string; x: number; y: number }
-      ) => {
-        await setCursor(writeStorage(tx), args);
-      }
-    ),
-
-    overShape: rep.register(
-      "overShape",
-      async (
-        tx: WriteTransaction,
-        args: { clientID: string; shapeID: string }
-      ) => {
-        await overShape(writeStorage(tx), args);
-      }
-    ),
-
-    selectShape: rep.register(
-      "selectShape",
-      async (
-        tx: WriteTransaction,
-        args: { clientID: string; shapeID: string }
-      ) => {
-        await selectShape(writeStorage(tx), args);
-      }
-    ),
-
-    deleteAllShapes: rep.register(
-      "deleteAllShapes",
-      async (tx: WriteTransaction) => {
-        await Promise.all(
-          (await tx.scanAll({ prefix: `shape-` })).map(([k]) => tx.del(k))
-        );
-      }
-    ),
+    ...rep.mutate,
 
     // subscriptions
     useShapeIDs: () =>
       subscribe([], async (tx: ReadTransaction) => {
-        const shapes = await tx.scanAll({ prefix: "shape-" });
-        return shapes.map(([k, _]) => k.split("-")[1]);
+        const shapes = await tx.scan({ prefix: "shape-" }).keys().toArray();
+        return shapes.map((k) => k.split("-", 2)[1]);
       }),
 
     useShapeByID: (id: string) =>
@@ -177,6 +99,67 @@ export async function createData(rep: Replicache) {
   };
 }
 
+export const mutators = {
+  async createShape(tx: WriteTransaction, args: { id: string; shape: Shape }) {
+    await putShape(writeStorage(tx), args);
+  },
+
+  async deleteShape(tx: WriteTransaction, id: string) {
+    await deleteShape(writeStorage(tx), id);
+  },
+
+  async moveShape(
+    tx: WriteTransaction,
+    args: { id: string; dx: number; dy: number }
+  ) {
+    await moveShape(writeStorage(tx), args);
+  },
+
+  async resizeShape(tx: WriteTransaction, args: { id: string; ds: number }) {
+    await resizeShape(writeStorage(tx), args);
+  },
+
+  async rotateShape(tx: WriteTransaction, args: { id: string; ddeg: number }) {
+    await rotateShape(writeStorage(tx), args);
+  },
+
+  async initClientState(
+    tx: WriteTransaction,
+    args: { id: string; defaultUserInfo: UserInfo }
+  ) {
+    await initClientState(writeStorage(tx), args);
+  },
+
+  async setCursor(
+    tx: WriteTransaction,
+    args: { id: string; x: number; y: number }
+  ) {
+    await setCursor(writeStorage(tx), args);
+  },
+
+  async overShape(
+    tx: WriteTransaction,
+    args: { clientID: string; shapeID: string }
+  ) {
+    await overShape(writeStorage(tx), args);
+  },
+
+  async selectShape(
+    tx: WriteTransaction,
+    args: { clientID: string; shapeID: string }
+  ) {
+    await selectShape(writeStorage(tx), args);
+  },
+
+  async deleteAllShapes(tx: WriteTransaction) {
+    await Promise.all(
+      (await tx.scan({ prefix: `shape-` }).keys().toArray()).map((k) =>
+        tx.del(k)
+      )
+    );
+  },
+};
+
 export function readStorage(tx: ReadTransaction): ReadStorage {
   return {
     getObject: (key: string) => tx.get(key),

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "react-dom": "17.0.1",
     "react-draggable": "^4.4.3",
     "react-hotkeys": "^1.1.4",
-    "replicache": "^6.1.4",
+    "replicache": "^6.2.0",
     "replicache-react-util": "^2.2.0"
   },
   "devDependencies": {

diff --git a/pages/d/[id].tsx b/pages/d/[id].tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { Replicache } from "replicache";
-import { createData } from "../../frontend/data";
+import { createData, mutators } from "../../frontend/data";
 import { Designer } from "../../frontend/designer";
 import { Nav } from "../../frontend/nav";
 import Pusher from "pusher-js";
@@ -26,14 +26,11 @@ export default function Home() {
         wasmModule: isProd ? "/replicache.wasm" : "/replicache.dev.wasm",
         useMemstore: true,
         name: docID,
+        mutators,
       });
 
       const defaultUserInfo = randUserInfo();
-      const d = await createData(rep);
-      d.initClientState({
-        id: d.clientID,
-        defaultUserInfo,
-      });
+      const d = await createData(rep, defaultUserInfo);
 
       // Do one initial pull to get fresh data.
       // After this, our websocket will tell us when to pull.

diff --git a/shared/client-state.ts b/shared/client-state.ts
@@ -122,11 +122,11 @@ export async function selectShape(
   await putClientState(storage, { id: clientID, clientState: client });
 }
 
-export function randUserInfo() {
+export function randUserInfo(): UserInfo {
   const [avatar, name] = avatars[randInt(0, avatars.length - 1)];
   return {
     avatar,
-    name: name,
+    name,
     color: colors[randInt(0, colors.length - 1)],
   };
 }