Upgrade to Replicache 14

.eslintrc

@@ -7,9 +7,14 @@
   "parserOptions": {
     "ecmaVersion": 12,
     "sourceType": "module",
-    "project": "./tsconfig.json",
+    "project": "./tsconfig.json"
   },
-  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "next", "prettier"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "next",
+    "prettier"
+  ],
   "rules": {
     "@typescript-eslint/no-floating-promises": "error",
     "@typescript-eslint/naming-convention": [
@@ -29,17 +34,18 @@
       "error",
       {
         "VariableDeclarator": {
-          "object": true,
-        },
+          "object": true
+        }
       },
       {
-        "enforceForRenamedProperties": false,
-      },
+        "enforceForRenamedProperties": false
+      }
     ],
     "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": ["error", {"argsIgnorePattern": "^_"}]
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { "argsIgnorePattern": "^_" }
+    ]
   },
-  "plugins": [
-    "react", "@typescript-eslint"
-  ]
+  "plugins": ["react", "@typescript-eslint"]
 }

.github/workflows/js.yml

@@ -15,7 +15,7 @@ jobs:
       - uses: actions/setup-node@v2
         with:
           node-version: 16.x
-          cache: 'npm'
+          cache: "npm"
       - name: npm install
         run: npm install
       - run: npm run check-format
@@ -29,7 +29,7 @@ jobs:
       - uses: actions/setup-node@v2
         with:
           node-version: 16.x
-          cache: 'npm'
+          cache: "npm"
       - name: npm install
         run: npm install
       - run: npm run build

backend/replicache-transaction.ts

@@ -1,7 +1,11 @@
 import type {
+  DeepReadonly,
+  IndexKey,
   JSONValue,
-  KeyTypeForScanOptions,
   ReadTransaction,
+  ReadonlyJSONValue,
+  ScanIndexOptions,
+  ScanNoIndexOptions,
   ScanOptions,
   ScanResult,
   TransactionEnvironment,
@@ -56,6 +60,10 @@ export class ReplicacheTransaction implements WriteTransaction {
     return "server";
   }
 
+  get location() {
+    return this.environment;
+  }
+
   get mutationID(): number {
     return this._mutationID;
   }
@@ -65,6 +73,9 @@ export class ReplicacheTransaction implements WriteTransaction {
   }
 
   async put(key: string, value: JSONValue): Promise<void> {
+    await this.set(key, value);
+  }
+  async set(key: string, value: JSONValue): Promise<void> {
     this._cache.set(key, { value, dirty: true });
   }
   async del(key: string): Promise<boolean> {
@@ -90,10 +101,20 @@ export class ReplicacheTransaction implements WriteTransaction {
   async isEmpty(): Promise<boolean> {
     throw new Error("Method isEmpty not implemented");
   }
-  scan(): ScanResult<string>;
-  scan<Options extends ScanOptions>(
-    _options?: Options
-  ): ScanResult<KeyTypeForScanOptions<Options>> {
+
+  scan(options: ScanIndexOptions): ScanResult<IndexKey, ReadonlyJSONValue>;
+  scan(options?: ScanNoIndexOptions): ScanResult<string, ReadonlyJSONValue>;
+  scan(options?: ScanOptions): ScanResult<IndexKey | string, ReadonlyJSONValue>;
+  scan<V extends ReadonlyJSONValue>(
+    options: ScanIndexOptions
+  ): ScanResult<IndexKey, DeepReadonly<V>>;
+  scan<V extends ReadonlyJSONValue>(
+    options?: ScanNoIndexOptions
+  ): ScanResult<string, DeepReadonly<V>>;
+  scan<V extends ReadonlyJSONValue>(
+    options?: ScanOptions
+  ): ScanResult<IndexKey | string, DeepReadonly<V>>;
+  scan(): ScanResult<IndexKey | string, ReadonlyJSONValue> {
     throw new Error("Method scan not implemented.");
   }
 

frontend/app.tsx

@@ -35,7 +35,7 @@ import IssueDetail from "./issue-detail";
 import { generateKeyBetween } from "fractional-indexing";
 import { useSubscribe } from "replicache-react";
 import classnames from "classnames";
-import { getPartialSyncState, PartialSyncState } from "./control";
+import { getPartialSyncState } from "./control";
 import type { UndoManager } from "@rocicorp/undo";
 import { HotKeys } from "react-hotkeys";
 
@@ -358,21 +358,19 @@ const App = ({ rep, undoManager }: AppProps) => {
     issueOrder: getIssueOrder(view, orderBy),
   });
 
-  const partialSync = useSubscribe<
-    PartialSyncState | "NOT_RECEIVED_FROM_SERVER"
-  >(
+  const partialSync = useSubscribe(
     rep,
     async (tx: ReadTransaction) => {
       return (await getPartialSyncState(tx)) || "NOT_RECEIVED_FROM_SERVER";
     },
-    "NOT_RECEIVED_FROM_SERVER"
+    { default: "NOT_RECEIVED_FROM_SERVER" as const }
   );
 
   const partialSyncComplete = partialSync === "PARTIAL_SYNC_COMPLETE";
   useEffect(() => {
     console.log("partialSync", partialSync);
     if (!partialSyncComplete) {
-      rep.pull();
+      void rep.pull();
     }
   }, [rep, partialSync, partialSyncComplete]);
 

frontend/issue-detail.tsx

@@ -8,7 +8,6 @@ import PriorityMenu from "./priority-menu";
 import {
   Comment,
   getIssueComments,
-  Description,
   getIssueDescription,
   Issue,
   Priority,
@@ -92,39 +91,36 @@ export default function IssueDetail({
     }
   }, [issues, detailIssueID]);
 
-  const issue = useSubscribe<Issue | null>(
+  const issue = useSubscribe(
     rep,
     async (tx) => {
       if (detailIssueID) {
         return (await getIssue(tx, detailIssueID)) || null;
       }
       return null;
     },
-    null,
-    [detailIssueID]
+    { default: null, dependencies: [detailIssueID] }
   );
-  const description = useSubscribe<Description | null>(
+  const description = useSubscribe(
     rep,
     async (tx) => {
       if (detailIssueID) {
         return (await getIssueDescription(tx, detailIssueID)) || null;
       }
       return null;
     },
-    null,
-    [detailIssueID]
+    { default: null, dependencies: [detailIssueID] }
   );
 
-  const comments = useSubscribe<Comment[] | []>(
+  const comments = useSubscribe(
     rep,
     async (tx) => {
       if (detailIssueID) {
         return (await getIssueComments(tx, detailIssueID)) || [];
       }
       return [];
     },
-    [],
-    [detailIssueID]
+    { default: [], dependencies: [detailIssueID] }
   );
 
   const handleClose = useCallback(async () => {

frontend/issue.ts

@@ -134,7 +134,7 @@ export async function putIssue(
   tx: WriteTransaction,
   issue: Issue
 ): Promise<void> {
-  await tx.put(issueKey(issue.id), issue);
+  await tx.set(issueKey(issue.id), issue);
 }
 
 export function issueFromKeyAndValue(
@@ -175,7 +175,7 @@ export async function putIssueDescription(
   issueID: string,
   description: Description
 ): Promise<void> {
-  await tx.put(descriptionKey(issueID), description);
+  await tx.set(descriptionKey(issueID), description);
 }
 
 export const COMMENT_KEY_PREFIX = `comment/`;
@@ -232,7 +232,7 @@ export async function putIssueComment(
   tx: WriteTransaction,
   comment: Comment
 ): Promise<void> {
-  await tx.put(commentKey(comment.issueID, comment.id), comment);
+  await tx.set(commentKey(comment.issueID, comment.id), comment);
 }
 
 const REVERSE_TIMESTAMP_LENGTH = Number.MAX_SAFE_INTEGER.toString().length;