A bunch of cleanups backported from my durable objects prototype

backend/data.ts

@@ -43,11 +43,11 @@ export async function setLastMutationID(
   );
 }
 
-export async function getObject<T extends JSONValue>(
+export async function getObject(
   executor: ExecuteStatementFn,
   documentID: string,
   key: string
-): Promise<T | null> {
+): Promise<JSONValue | undefined> {
   const { records } = await executor(
     "SELECT V FROM Object WHERE DocumentID =:docID AND K = :key AND Deleted = False",
     {
@@ -57,7 +57,7 @@ export async function getObject<T extends JSONValue>(
   );
   const value = records?.[0]?.[0]?.stringValue;
   if (!value) {
-    return null;
+    return undefined;
   }
   return JSON.parse(value);
 }
@@ -68,79 +68,33 @@ export async function putObject(
   key: string,
   value: JSONValue
 ): Promise<void> {
-  await executor(`
+  await executor(
+    `
     INSERT INTO Object (DocumentID, K, V, Deleted)
     VALUES (:docID, :key, :value, False)
       ON DUPLICATE KEY UPDATE V = :value, Deleted = False
-    `, {
+    `,
+    {
       docID: { stringValue: docID },
       key: { stringValue: key },
       value: { stringValue: JSON.stringify(value) },
-    });
+    }
+  );
 }
 
 export async function delObject(
   executor: ExecuteStatementFn,
   docID: string,
   key: string
 ): Promise<void> {
-  await executor(`
+  await executor(
+    `
     UPDATE Object SET Deleted = True
     WHERE DocumentID = :docID AND K = :key
-  `, {
-    docID: { stringValue: docID },
-    key: { stringValue: key },
-  });
-}
-
-export async function delAllShapes(
-  executor: ExecuteStatementFn,
-  docID: string
-): Promise<void> {
-  await executor(`
-    UPDATE Object Set Deleted = True
-    WHERE
-      DocumentID = :docID AND
-      K like 'shape-%'
-  `, {
-    docID: { stringValue: docID },
-  });
-}
-
-export function storage(executor: ExecuteStatementFn, docID: string) {
-  // TODO: When we have the real mysql client, check whether it appears to do
-  // this caching internally.
-  const cache: {
-    [key: string]: { value: JSONValue | undefined; dirty: boolean };
-  } = {};
-  return {
-    getObject: async (key: string) => {
-      const entry = cache[key];
-      if (entry) {
-        return entry.value;
-      }
-      const value = await getObject(executor, docID, key);
-      cache[key] = { value, dirty: false };
-      return value;
-    },
-    putObject: async (key: string, value: JSONValue) => {
-      cache[key] = { value, dirty: true };
-    },
-    delObject: async (key: string) => {
-      cache[key] = { value: undefined, dirty: true };
-    },
-    flush: async () => {
-      await Promise.all(
-        Object.entries(cache)
-          .filter(([, { dirty }]) => dirty)
-          .map(([k, { value }]) => {
-            if (value === undefined) {
-              return delObject(executor, docID, k);
-            } else {
-              return putObject(executor, docID, k, value);
-            }
-          })
-      );
-    },
-  };
+  `,
+    {
+      docID: { stringValue: docID },
+      key: { stringValue: key },
+    }
+  );
 }

backend/write-transaction-impl.ts

@@ -0,0 +1,68 @@
+import type { JSONValue, ScanResult, WriteTransaction } from "replicache";
+import { delObject, getObject, putObject } from "./data";
+import { ExecuteStatementFn, transact } from "./rds";
+
+/**
+ * Implements ReplicaCache's WriteTransaction interface in terms of a MySQL
+ * transaction.
+ */
+export class WriteTransactionImpl implements WriteTransaction {
+  private _docID: string;
+  private _executor: ExecuteStatementFn;
+  private _cache: Record<
+    string,
+    { value: JSONValue | undefined; dirty: boolean }
+  > = {};
+
+  constructor(executor: ExecuteStatementFn, docID: string) {
+    this._docID = docID;
+    this._executor = executor;
+  }
+
+  async put(key: string, value: JSONValue): Promise<void> {
+    this._cache[key] = { value, dirty: true };
+  }
+  async del(key: string): Promise<boolean> {
+    const had = await this.has(key);
+    this._cache[key] = { value: undefined, dirty: true };
+    return had;
+  }
+  async get(key: string): Promise<JSONValue | undefined> {
+    const entry = this._cache[key];
+    if (entry) {
+      return entry.value;
+    }
+    const value = await getObject(this._executor, this._docID, key);
+    this._cache[key] = { value, dirty: false };
+    return value;
+  }
+  async has(key: string): Promise<boolean> {
+    const val = await this.get(key);
+    return val !== undefined;
+  }
+
+  // TODO!
+  async isEmpty(): Promise<boolean> {
+    throw new Error("not implemented");
+  }
+  scan(): ScanResult<string> {
+    throw new Error("not implemented");
+  }
+  scanAll(): Promise<[string, JSONValue][]> {
+    throw new Error("not implemented");
+  }
+
+  async flush(): Promise<void> {
+    await Promise.all(
+      Object.entries(this._cache)
+        .filter(([, { dirty }]) => dirty)
+        .map(([k, { value }]) => {
+          if (value === undefined) {
+            return delObject(this._executor, this._docID, k);
+          } else {
+            return putObject(this._executor, this._docID, k, value);
+          }
+        })
+    );
+  }
+}

shared/client-state.ts → frontend/client-state.ts

@@ -1,6 +1,6 @@
+import { ReadTransaction, WriteTransaction } from "replicache";
 import * as t from "io-ts";
-import { must } from "../backend/decode";
-import { ReadStorage, WriteStorage } from "./storage";
+import { must } from "./decode";
 import { randInt } from "./rand";
 
 const colors = [
@@ -56,13 +56,13 @@ export type UserInfo = t.TypeOf<typeof userInfo>;
 export type ClientState = t.TypeOf<typeof clientState>;
 
 export async function initClientState(
-  storage: WriteStorage,
+  tx: WriteTransaction,
   { id, defaultUserInfo }: { id: string; defaultUserInfo: UserInfo }
 ): Promise<void> {
-  if (await storage.getObject(key(id))) {
+  if (await tx.has(key(id))) {
     return;
   }
-  await putClientState(storage, {
+  await putClientState(tx, {
     id,
     clientState: {
       cursor: {
@@ -77,49 +77,49 @@ export async function initClientState(
 }
 
 export async function getClientState(
-  storage: ReadStorage,
+  tx: ReadTransaction,
   id: string
 ): Promise<ClientState> {
-  const jv = await storage.getObject(key(id));
+  const jv = await tx.get(key(id));
   if (!jv) {
     throw new Error("Expected clientState to be initialized already: " + id);
   }
   return must(clientState.decode(jv));
 }
 
 export function putClientState(
-  storage: WriteStorage,
+  tx: WriteTransaction,
   { id, clientState }: { id: string; clientState: ClientState }
 ): Promise<void> {
-  return storage.putObject(key(id), clientState);
+  return tx.put(key(id), clientState);
 }
 
 export async function setCursor(
-  storage: WriteStorage,
+  tx: WriteTransaction,
   { id, x, y }: { id: string; x: number; y: number }
 ): Promise<void> {
-  const clientState = await getClientState(storage, id);
+  const clientState = await getClientState(tx, id);
   clientState.cursor.x = x;
   clientState.cursor.y = y;
-  await putClientState(storage, { id, clientState });
+  await putClientState(tx, { id, clientState });
 }
 
 export async function overShape(
-  storage: WriteStorage,
+  tx: WriteTransaction,
   { clientID, shapeID }: { clientID: string; shapeID: string }
 ): Promise<void> {
-  const client = await getClientState(storage, clientID);
+  const client = await getClientState(tx, clientID);
   client.overID = shapeID;
-  await putClientState(storage, { id: clientID, clientState: client });
+  await putClientState(tx, { id: clientID, clientState: client });
 }
 
 export async function selectShape(
-  storage: WriteStorage,
+  tx: WriteTransaction,
   { clientID, shapeID }: { clientID: string; shapeID: string }
 ): Promise<void> {
-  const client = await getClientState(storage, clientID);
+  const client = await getClientState(tx, clientID);
   client.selectedID = shapeID;
-  await putClientState(storage, { id: clientID, clientState: client });
+  await putClientState(tx, { id: clientID, clientState: client });
 }
 
 export function randUserInfo(): UserInfo {
@@ -132,7 +132,7 @@ export function randUserInfo(): UserInfo {
 }
 
 function key(id: string): string {
-  return `${keyPrefix}${id}`;
+  return `${clientStatePrefix}${id}`;
 }
 
-export const keyPrefix = `client-state-`;
+export const clientStatePrefix = `client-state-`;

frontend/collaborator.tsx

@@ -1,8 +1,10 @@
-import { Data } from "./data";
 import styles from "./collaborator.module.css";
 import { useEffect, useState } from "react";
 import { Rect } from "./rect";
 import { useCursor } from "./smoothie";
+import { Replicache } from "replicache";
+import { M } from "./mutators";
+import { useClientInfo } from "./subscriptions";
 
 const hideCollaboratorDelay = 5000;
 
@@ -15,17 +17,17 @@ interface Position {
 }
 
 export function Collaborator({
-  data,
+  rep,
   clientID,
 }: {
-  data: Data;
+  rep: Replicache<M>;
   clientID: string;
 }) {
-  const clientInfo = data.useClientInfo(clientID);
+  const clientInfo = useClientInfo(rep, clientID);
   const [lastPos, setLastPos] = useState<Position | null>(null);
   const [gotFirstChange, setGotFirstChange] = useState(false);
   const [, setPoke] = useState({});
-  const cursor = useCursor(data.rep, clientID);
+  const cursor = useCursor(rep, clientID);
 
   let curPos = null;
   let userInfo = null;
@@ -76,7 +78,7 @@ export function Collaborator({
       {clientInfo.selectedID && (
         <Rect
           {...{
-            data,
+            rep,
             key: `selection-${clientInfo.selectedID}`,
             id: clientInfo.selectedID,
             highlight: true,