Replicache v15 update

.github/workflows/ci.yml

@@ -31,9 +31,6 @@ jobs:
       - name: Install dependencies
         run: yarn install --immutable
 
-      - name: Check Package Sync
-        run: if [[ -z $(yarn syncpack list-mismatches) ]]; then echo exit 0; else echo exit 1; fi
-
       - name: Build
         run: yarn run build
 
@@ -42,3 +39,29 @@ jobs:
 
       - name: Lint
         run: yarn run lint
+
+  check_workspace_dependency_drift:
+    name: Check Workspace Dependency Drift
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 2
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: "yarn"
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Generate new syncpack snapshot
+        run: yarn run update-syncpack-snapshot
+        shell: bash
+
+      - name: Check for unexpected workspace dependency drift
+        run: git diff --exit-code -- syncpack-snapshot.txt

.tool-versions

@@ -0,0 +1,3 @@
+nodejs 16.19.0
+yarn 1.22.10
+ruby 2.7.6

README.md

@@ -4,11 +4,16 @@
 
 <https://user-images.githubusercontent.com/5165963/219898954-f5e94045-69bf-4c33-84e8-7d152c6f2c32.mov>
 
+## Replicache version compatibility
+
+- 1.0.0 : replicache <= 14.2.2
+- 1.3.0 : replicache >= 15
+
 ## Why is this needed?
 
 Replicache enables us to build applications that are performant, offline-capable and collaborative. By default, it uses [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) for client-side persistance. Unfortunately, this technology is not available in React Native and is only supported in web-browsers.
 
-Thankfully, Replicache allows us to provide our own transactional data-store via [`experimentalCreateKVStore`](https://doc.replicache.dev/api/interfaces/ReplicacheOptions#experimentalcreatekvstore). The goal of this project is to provide some implementations of such a store, along with some guidance in getting up and running with Replicache in React Native.
+Thankfully, Replicache allows us to provide our own transactional data-store via [`kvStore`](https://doc.replicache.dev/api/interfaces/ReplicacheOptions#kvstoree). The goal of this project is to provide some implementations of such a store, along with some guidance in getting up and running with Replicache in React Native.
 
 ## What are the strategies?
 
@@ -38,10 +43,10 @@ You most likely want to use web-sockets for this. This is relatively trivial wit
      - `yarn add expo-sqlite @react-native-replicache/expo-sqlite`
 2. Ensure that you've polyfilled `crypto.getRandomValues` on the global namespace.
    - See [here for an example](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/crypto-polyfill.ts).
-3. Pass in your chosen SQLite binding's React Native Replicache binding into Replicache's `experimentalCreateKVStore` option.
+3. Pass in your chosen SQLite binding's React Native Replicache binding into Replicache's `kvStore` option.
    - This will be one of the following, depending on the binding you chose:
-     - `createReplicacheOPSQLiteExperimentalCreateKVStore`
-     - `createReplicacheExpoSQLiteExperimentalCreateKVStore`
+     - `createReplicacheOPSQLiteKVStore`
+     - `createReplicacheExpoSQLiteKVStore`
    - See [here for an example](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/use-replicache.ts).
 
 ## How can I experiment with this locally?

package.json

@@ -28,7 +28,8 @@
     "graph": "turbo run build --graph=graph.pdf",
     "root:eslint": "cd $INIT_CWD && eslint",
     "root:rimraf": "cd $INIT_CWD && rimraf",
-    "root:tsc": "cd $INIT_CWD && tsc"
+    "root:tsc": "cd $INIT_CWD && tsc",
+    "update-syncpack-snapshot": "syncpack list-mismatch --filter '^(?!@react-native-replicache/)(?!react-native-replicache$).*$' | sed '/^-/d' > syncpack-snapshot.txt"
   },
   "devDependencies": {
     "eslint": "8.56.0",

packages/deep-freeze/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-replicache/deep-freeze",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "main": "./dist/commonjs/index.js",
   "module": "./dist/module/index.js",
   "react-native": "./src/index.ts",
@@ -37,7 +37,7 @@
     "react-native-builder-bob": "^0.20.3"
   },
   "peerDependencies": {
-    "replicache": ">=12.2.0"
+    "replicache": ">=15.0.0"
   },
   "react-native-builder-bob": {
     "source": "src",

packages/deep-freeze/src/deep-freeze.ts

@@ -87,7 +87,7 @@ function deepFreezeArray(
 function deepFreezeObject(v: ReadonlyJSONObject, seen: object[]): void {
   for (const k in v) {
     if (hasOwn(v, k)) {
-      deepFreezeInternal(v[k], seen);
+      deepFreezeInternal(v[k]!, seen);
     }
   }
 }

packages/deep-freeze/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "@braden1996/tsconfig/base.json",
   "compilerOptions": {
+    "target": "ES2017",
     "types": ["./types/globals"]
   },
   "include": ["src"]

packages/example/client-shared/package.json

@@ -18,8 +18,8 @@
   },
   "peerDependencies": {
     "react": ">=18.2.0",
-    "replicache": ">=12.2.0",
-    "replicache-react": ">=2.10.0"
+    "replicache": "15.0.0",
+    "replicache-react": "^2.10.0"
   },
   "eslintConfig": {
     "extends": "universe"

packages/example/mobile-react-native/package.json

@@ -21,8 +21,8 @@
     "@op-engineering/op-sqlite": "^6.0.1",
     "@react-native-replicache/example-client-shared": "0.0.0",
     "@react-native-replicache/example-shared": "0.0.0",
-    "@react-native-replicache/react-native-expo-sqlite": "1.1.0",
-    "@react-native-replicache/react-native-op-sqlite": "1.1.0",
+    "@react-native-replicache/react-native-expo-sqlite": "1.3.1",
+    "@react-native-replicache/react-native-op-sqlite": "1.3.1",
     "expo": "~51.0.8",
     "expo-build-properties": "~0.12.1",
     "expo-crypto": "~13.0.2",
@@ -35,7 +35,7 @@
     "react-dom": "18.2.0",
     "react-native": "0.74.1",
     "react-native-sse": "^1.1.0",
-    "replicache": "12.2.0",
+    "replicache": "15.0.0",
     "replicache-react": "^2.10.0"
   },
   "devDependencies": {

packages/example/mobile-react-native/src/components/todo-list.tsx

@@ -1,7 +1,7 @@
 import { listTodos, TodoUpdate } from "@react-native-replicache/example-shared";
 import { nanoid } from "nanoid";
 import React from "react";
-import { FlatList, StyleSheet, Text, View } from "react-native";
+import { Button, FlatList, StyleSheet, Text, View } from "react-native";
 import { useSubscribe } from "replicache-react";
 
 import { TodoInput } from "./todo-input";
@@ -13,7 +13,7 @@ interface TodoListProps {
 }
 
 export function TodoList({ listId }: TodoListProps) {
-  const rep = useReplicache(listId);
+  const { rep, close } = useReplicache(listId);
 
   // Subscribe to all todos and sort them.
   const todos = useSubscribe(rep, listTodos, [], [rep]);
@@ -55,6 +55,8 @@ export function TodoList({ listId }: TodoListProps) {
       ListFooterComponent={
         <View style={styles.footerContainer}>
           <Text style={styles.footerText}>List: {listId}</Text>
+
+          <Button title="Logout" onPress={close} />
         </View>
       }
       ItemSeparatorComponent={() => <View style={styles.separator} />}

packages/example/mobile-react-native/src/use-replicache.ts

@@ -1,9 +1,9 @@
 import { mutators } from "@react-native-replicache/example-shared";
-import { createReplicacheExpoSQLiteExperimentalCreateKVStore } from "@react-native-replicache/react-native-expo-sqlite";
-// import { createReplicacheReactNativeOpSQLiteExperimentalCreateKVStore } from "@react-native-replicache/react-native-op-sqlite";
+// import { createReplicacheExpoSQLiteKVStore } from "@react-native-replicache/react-native-expo-sqlite";
+import { createReplicacheReactNativeOPSQLiteKVStore } from "@react-native-replicache/react-native-op-sqlite";
 import React from "react";
 import EventSource from "react-native-sse";
-import { Replicache, TEST_LICENSE_KEY } from "replicache";
+import { Replicache, TEST_LICENSE_KEY, dropAllDatabases } from "replicache";
 
 export function useReplicache(listID: string) {
   // See https://doc.replicache.dev/licensing for how to get a license key.
@@ -12,20 +12,26 @@ export function useReplicache(listID: string) {
     throw new Error("Missing VITE_REPLICACHE_LICENSE_KEY");
   }
 
-  const r = React.useMemo(
+  const rep = React.useMemo(
     () =>
       new Replicache({
         licenseKey,
         pushURL: `http://127.0.0.1:8080/api/replicache/push?spaceID=${listID}`,
         pullURL: `http://127.0.0.1:8080/api/replicache/pull?spaceID=${listID}`,
-        experimentalCreateKVStore:
-          createReplicacheExpoSQLiteExperimentalCreateKVStore,
+        kvStore: createReplicacheReactNativeOPSQLiteKVStore,
         name: listID,
         mutators,
       }),
     [listID],
   );
 
+  const close = React.useCallback(async () => {
+    await rep.close();
+    await dropAllDatabases({
+      kvStore: createReplicacheReactNativeOPSQLiteKVStore,
+    });
+  }, []);
+
   React.useEffect(() => {
     // Note: React Native doesn't support SSE; this is just a polyfill.
     // You probably want to setup a WebSocket connection via Pusher.
@@ -41,7 +47,7 @@ export function useReplicache(listID: string) {
     ev.addEventListener("message", async (evt) => {
       if (evt.type !== "message") return;
       if (evt.data === "poke") {
-        await r.pull();
+        await rep.pull();
       }
     });
 
@@ -50,5 +56,5 @@ export function useReplicache(listID: string) {
     };
   }, [listID]);
 
-  return r;
+  return { rep, close };
 }

packages/example/server/package.json

@@ -37,8 +37,8 @@
     "dotenv": "^16.0.1",
     "express": "^4.18.1",
     "pg-mem": "^2.6.4",
-    "replicache": "12.2.0",
-    "replicache-express": "^0.2.1"
+    "replicache": "15.0.0",
+    "replicache-express": "^0.3.0-beta.2"
   },
   "devDependencies": {
     "@braden1996/tsconfig": "^0.0.1",

packages/example/shared/package.json

@@ -21,7 +21,7 @@
     "ts-node": "^10.9.1"
   },
   "peerDependencies": {
-    "replicache": ">=12.2.0"
+    "replicache": ">=15.0.0"
   },
   "eslintConfig": {
     "extends": "universe"

packages/example/shared/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "@braden1996/tsconfig/base.json",
   "compilerOptions": {
+    "target": "ES2017",
     "rootDir": "./src",
     "types": ["./types/replicache"]
   },

packages/example/web-react/package.json

@@ -21,7 +21,7 @@
     "qs": "^6.11.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "replicache": "12.2.0",
+    "replicache": "15.0.0",
     "replicache-react": "^2.10.0",
     "todomvc-app-css": "^2.4.2"
   },

packages/react-native-expo-sqlite/README.md

@@ -4,11 +4,16 @@
 
 <https://user-images.githubusercontent.com/5165963/219898954-f5e94045-69bf-4c33-84e8-7d152c6f2c32.mov>
 
+## Replicache version compatibility
+
+- 1.0.0 : replicache <= 14.2.2
+- 1.3.0 : replicache >= 15
+
 ## Why is this needed?
 
 Replicache enables us to build applications that are performant, offline-capable and collaborative. By default, it uses [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) for client-side persistance. Unfortunately, this technology is not available in React Native and is only supported in web-browsers.
 
-Thankfully, Replicache allows us to provide our own transactional data-store via [`experimentalCreateKVStore`](https://doc.replicache.dev/api/interfaces/ReplicacheOptions#experimentalcreatekvstore). The goal of this project is to provide some implementations of such a store, along with some guidance in getting up and running with Replicache in React Native.
+Thankfully, Replicache allows us to provide our own transactional data-store via [`kvStore`](https://doc.replicache.dev/api/interfaces/ReplicacheOptions#kvstoree). The goal of this project is to provide some implementations of such a store, along with some guidance in getting up and running with Replicache in React Native.
 
 ## What are the strategies?
 
@@ -28,5 +33,5 @@ You most likely want to use web-sockets for this. This is relatively trivial wit
    - `yarn add expo-crypto expo-sqlite @react-native-replicache/react-native-expo-sqlite`
 2. Ensure that you've polyfilled `crypto.getRandomValues` on the global namespace.
    - See [here for an example](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/crypto-polyfill.ts).
-3. Pass in `createReplicacheExpoSQLiteExperimentalCreateKVStore` to Replicache's `experimentalCreateKVStore` option.
+3. Pass in `createReplicacheExpoSQLiteKVStore` to Replicache's `kvStore` option.
    - See [here for an example](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/use-replicache.ts).

packages/react-native-expo-sqlite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-replicache/react-native-expo-sqlite",
-  "version": "1.1.0",
+  "version": "1.3.1",
   "main": "./dist/commonjs/index.js",
   "module": "./dist/module/index.js",
   "react-native": "./src/index.ts",
@@ -34,7 +34,7 @@
     "clean": "yarn run root:rimraf dist .turbo"
   },
   "dependencies": {
-    "@react-native-replicache/replicache-generic-sqlite": "1.1.0"
+    "@react-native-replicache/replicache-generic-sqlite": "1.3.0"
   },
   "devDependencies": {
     "@braden1996/tsconfig": "^0.0.1",

packages/react-native-expo-sqlite/src/index.ts

@@ -1,7 +1,7 @@
 import {
   GenericDatabaseManager,
   GenericSQLDatabase,
-  getCreateReplicacheSQLiteExperimentalCreateKVStore,
+  getCreateReplicacheSQLiteKVStore,
   ReplicacheGenericSQLiteDatabaseManager,
 } from "@react-native-replicache/replicache-generic-sqlite";
 import * as SQLite from "expo-sqlite";
@@ -29,5 +29,7 @@ const expoDbManagerInstance = new ReplicacheGenericSQLiteDatabaseManager(
   genericDatabase,
 );
 
-export const createReplicacheExpoSQLiteExperimentalCreateKVStore =
-  getCreateReplicacheSQLiteExperimentalCreateKVStore(expoDbManagerInstance);
+export const createReplicacheExpoSQLiteKVStore = {
+  create: getCreateReplicacheSQLiteKVStore(expoDbManagerInstance),
+  drop: (name: string) => expoDbManagerInstance.destroy(name),
+};

packages/react-native-op-sqlite/README.md

@@ -4,11 +4,16 @@
 
 <https://user-images.githubusercontent.com/5165963/219898954-f5e94045-69bf-4c33-84e8-7d152c6f2c32.mov>
 
+## Replicache version compatibility
+
+- 1.0.0 : replicache <= 14.2.2
+- 1.3.0 : replicache >= 15
+
 ## Why is this needed?
 
 Replicache enables us to build applications that are performant, offline-capable and collaborative. By default, it uses [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) for client-side persistance. Unfortunately, this technology is not available in React Native and is only supported in web-browsers.
 
-Thankfully, Replicache allows us to provide our own transactional data-store via [`experimentalCreateKVStore`](https://doc.replicache.dev/api/interfaces/ReplicacheOptions#experimentalcreatekvstore). The goal of this project is to provide some implementations of such a store, along with some guidance in getting up and running with Replicache in React Native.
+Thankfully, Replicache allows us to provide our own transactional data-store via [`kvStore`](https://doc.replicache.dev/api/interfaces/ReplicacheOptions#kvstoree). The goal of this project is to provide some implementations of such a store, along with some guidance in getting up and running with Replicache in React Native.
 
 ## What are the strategies?
 
@@ -28,5 +33,5 @@ You most likely want to use web-sockets for this. This is relatively trivial wit
    - `yarn add expo-crypto @op-engineering/op-sqlite @react-native-replicache/react-native-op-sqlite`
 2. Ensure that you've polyfilled `crypto.getRandomValues` on the global namespace.
    - See [here for an example](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/crypto-polyfill.ts).
-3. Pass in `createReplicacheOPSQLiteExperimentalCreateKVStore` to Replicache's `experimentalCreateKVStore` option.
+3. Pass in `createReplicacheOPSQLiteKVStore` to Replicache's `kvStore` option.
    - See [here for an example](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/use-replicache.ts).

packages/react-native-op-sqlite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-replicache/react-native-op-sqlite",
-  "version": "1.1.0",
+  "version": "1.3.1",
   "main": "./dist/commonjs/index.js",
   "module": "./dist/module/index.js",
   "react-native": "./src/index.ts",
@@ -34,9 +34,11 @@
     "clean": "yarn run root:rimraf dist .turbo"
   },
   "dependencies": {
-    "@react-native-replicache/replicache-generic-sqlite": "1.1.0"
+    "@react-native-replicache/replicache-generic-sqlite": "1.3.0"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.20.0",
+    "@babel/runtime": "^7.20.0",
     "@braden1996/tsconfig": "^0.0.1",
     "@types/react": "~18.2.79",
     "react-native-builder-bob": "^0.20.3"