Skip to content

Commit 21ba644

Browse files
committed
Improve readmes across the packages and bump to 1.0.0
1 parent 99b6c1f commit 21ba644

File tree

11 files changed

+134
-42
lines changed

11 files changed

+134
-42
lines changed

README.md

Lines changed: 38 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,60 @@
11
# React Native Replicache
22

3-
Plug-in React Native compatibility bindings for Replicache.
3+
> Plug-in React Native compatibility bindings for [Replicache](https://replicache.dev/).
44
5-
https://user-images.githubusercontent.com/5165963/219898954-f5e94045-69bf-4c33-84e8-7d152c6f2c32.mov
5+
<https://user-images.githubusercontent.com/5165963/219898954-f5e94045-69bf-4c33-84e8-7d152c6f2c32.mov>
66

77
## Why is this needed?
88

9-
By default, Replicache uses IndexedDB in the web-browser. This technology isn't available in React Native, but luckily Replicache is generic enough to allow us to provide our own local persistance provider.
9+
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.
1010

11-
## What's the strategy?
11+
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.
1212

13-
Currently, the strategy is to provide an implementation of Replicache's `ExperimentalCreateKVStore` backed by [`react-native-quick-sqlite`](https://github.com/ospfranco/react-native-quick-sqlite) or [`expo-sqlite`](https://docs.expo.dev/versions/latest/sdk/sqlite/#sqltransaction).
13+
## What are the strategies?
1414

15-
Additionally, some configuration is required to received poke events from the server.
15+
React Native has relatively good support for SQLite - which provides the [strict serializable](https://jepsen.io/consistency/models/strict-serializable) transactions that we require.
16+
17+
In particular, we provide the choice between two SQLite bindings:
18+
19+
1. [`@react-native-replicache/react-native-expo-sqlite`](https://github.com/Braden1996/react-native-replicache/tree/master/packages/react-native-expo-sqlite)
20+
- Backed by [`expo-sqlite`](https://docs.expo.dev/versions/latest/sdk/sqlite/)
21+
- Supported in [Expo Go](https://expo.dev/client).
22+
2. [`@react-native-replicache/react-native-quick-sqlite`](https://github.com/Braden1996/react-native-replicache/tree/master/packages/react-native-quick-sqlite)
23+
- Backed by [`react-native-quick-sqlite`](https://github.com/ospfranco/react-native-quick-sqlite)
24+
- Better performance.
25+
26+
### Any additional considerations?
27+
28+
Some configuration is required to receive [poke](https://doc.replicache.dev/byob/poke) events from the server. In our example, [seen here](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/use-replicache.ts), we use a polyfill for Server Sent Events. These aren't built into React Native, but are really handy for a demo.
29+
30+
You most likely want to use web-sockets for this. This is relatively trivial with Pusher/Ably etc and similar to the web-app so we won't discuss that further here.
1631

1732
## How can I install this?
1833

1934
1. Install the following in your React Native project:
20-
- `yarn add @react-native-replicache/react-native-quick-sqlite react-native-quick-sqlite expo-crypto`
21-
- or
22-
- `yarn add @react-native-replicache/react-native-expo-sqlite expo-sqlite expo-crypto`
35+
- `yarn add expo-crypto`
36+
- Decide which SQLite binding is for you and install one of the following:
37+
- `yarn add react-native-quick-sqlite @react-native-replicache/react-native-quick-sqlite`
38+
- `yarn add expo-sqlite @react-native-replicache/expo-sqlite`
2339
2. Ensure that you've polyfilled `crypto.getRandomValues` on the global namespace.
24-
- See [here for an example](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/crypto-polyfill.ts).
25-
3. Pass `createReplicacheReactNativeQuickSQLiteExperimentalCreateKVStore` or `createReplicacheReactNativeExpoSQLiteExperimentalCreateKVStore` into Replicache's `experimentalCreateKVStore` option.
26-
- See [here for an example](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/use-replicache.ts).
27-
28-
## What else will I need to do?
29-
30-
- Configure a poke mechanism.
31-
- You will likely want to use web-sockets for this, managed via Pusher/Ably/etc
32-
- In our example, [seen here](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/use-replicache.ts), we use a polyfill for Server Sent Events.
33-
- These aren't built into React Native, but are really handy for a demo.
40+
- See [here for an example](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/crypto-polyfill.ts).
41+
3. Pass in your chosen SQLite binding's React Native Replicache binding into Replicache's `experimentalCreateKVStore` option.
42+
- This will be one of the following, depending on the binding you chose:
43+
- `createReplicacheQuickSQLiteExperimentalCreateKVStore`
44+
- `createReplicacheExpoSQLiteExperimentalCreateKVStore`
45+
- See [here for an example](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/use-replicache.ts).
3446

3547
## How can I experiment with this locally?
3648

37-
### Prerequisites:
49+
### Prerequisites
3850

3951
- Environment capable of developing iOS/Android applications (iOS is likely preferred).
40-
- See https://dev-yakuza.posstree.com/en/react-native/install-on-mac/
41-
- or: https://reactnative.dev/docs/environment-setup
42-
- Note: Installing [Xcode](https://developer.apple.com/xcode/) from the [Mac App Store](https://apps.apple.com/us/app/xcode/id497799835?mt=12) tends to be unusually slow and buggy.
43-
- Try the `Download -> Website` approach instead, [found here](https://developer.apple.com/xcode/).
52+
- See [How to install React Native on Mac](https://dev-yakuza.posstree.com/en/react-native/install-on-mac/)
53+
- or: [Setting up the development environment](https://reactnative.dev/docs/environment-setup)
54+
- Note: Installing [Xcode](https://developer.apple.com/xcode/) from the [Mac App Store](https://apps.apple.com/us/app/xcode/id497799835?mt=12) tends to be unusually slow and buggy.
55+
- Try download it from the [Apple website](https://developer.apple.com/xcode/) instead.
56+
57+
### Instructions
4458

4559
1. Clone the repository: `git clone https://github.com/braden1996/react-native-replicache.git`
4660
2. Install yarn dependencies from repo root: `yarn install`

packages/deep-freeze/README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Deep Freeze
2+
3+
## Why is this needed?
4+
5+
This package includes some snippets taken from Replicache's internals. It provides a mechanism for us to enforce immutability on the data that comes out of our Replicache store, by giving us stricter types along with some checks when in development mode. In production, it does nothing meaningful.

packages/deep-freeze/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@react-native-replicache/deep-freeze",
3-
"version": "0.0.4",
3+
"version": "1.0.0",
44
"main": "./dist/commonjs/index.js",
55
"module": "./dist/module/index.js",
66
"react-native": "./src/index.ts",

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020
"dependencies": {
2121
"@react-native-replicache/example-client-shared": "0.0.0",
2222
"@react-native-replicache/example-shared": "0.0.0",
23-
"@react-native-replicache/react-native-expo-sqlite": "0.0.4",
24-
"@react-native-replicache/react-native-quick-sqlite": "0.0.4",
23+
"@react-native-replicache/react-native-expo-sqlite": "1.0.0",
24+
"@react-native-replicache/react-native-quick-sqlite": "1.0.0",
2525
"expo": "~48.0.1",
2626
"expo-build-properties": "0.5.1",
2727
"expo-crypto": "^12.0.0",
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# React Native Replicache
2+
3+
> Plug-in React Native compatibility bindings for [Replicache](https://replicache.dev/).
4+
5+
<https://user-images.githubusercontent.com/5165963/219898954-f5e94045-69bf-4c33-84e8-7d152c6f2c32.mov>
6+
7+
## Why is this needed?
8+
9+
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.
10+
11+
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.
12+
13+
## What are the strategies?
14+
15+
React Native has relatively good support for SQLite - which provides the [strict serializable](https://jepsen.io/consistency/models/strict-serializable) transactions that we require.
16+
17+
Here we provide a store implementation backed by [`expo-sqlite`](https://docs.expo.dev/versions/latest/sdk/sqlite/). However, we also offer [more bindings here](https://github.com/Braden1996/react-native-replicache). Be sure to see what best fits your project!
18+
19+
### Any additional considerations?
20+
21+
Some configuration is required to receive [poke](https://doc.replicache.dev/byob/poke) events from the server. In our example, [seen here](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/use-replicache.ts), we use a polyfill for Server Sent Events. These aren't built into React Native, but are really handy for a demo.
22+
23+
You most likely want to use web-sockets for this. This is relatively trivial with Pusher/Ably etc and similar to the web-app so we won't discuss that further here.
24+
25+
## How can I install this?
26+
27+
1. Install the following in your React Native project:
28+
- `yarn add expo-crypto expo-sqlite @react-native-replicache/react-native-expo-sqlite`
29+
2. Ensure that you've polyfilled `crypto.getRandomValues` on the global namespace.
30+
- See [here for an example](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/crypto-polyfill.ts).
31+
3. Pass in `createReplicacheExpoSQLiteExperimentalCreateKVStore` to Replicache's `experimentalCreateKVStore` option.
32+
- 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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@react-native-replicache/react-native-expo-sqlite",
3-
"version": "0.0.4",
3+
"version": "1.0.0",
44
"main": "./dist/commonjs/index.js",
55
"module": "./dist/module/index.js",
66
"react-native": "./src/index.ts",
@@ -34,7 +34,7 @@
3434
"clean": "rm -rf dist .turbo"
3535
},
3636
"dependencies": {
37-
"@react-native-replicache/replicache-generic-sqlite": "0.0.4"
37+
"@react-native-replicache/replicache-generic-sqlite": "1.0.0"
3838
},
3939
"devDependencies": {
4040
"@braden1996/tsconfig": "^0.0.1",
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# React Native Replicache
2+
3+
> Plug-in React Native compatibility bindings for [Replicache](https://replicache.dev/).
4+
5+
<https://user-images.githubusercontent.com/5165963/219898954-f5e94045-69bf-4c33-84e8-7d152c6f2c32.mov>
6+
7+
## Why is this needed?
8+
9+
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.
10+
11+
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.
12+
13+
## What are the strategies?
14+
15+
React Native has relatively good support for SQLite - which provides the [strict serializable](https://jepsen.io/consistency/models/strict-serializable) transactions that we require.
16+
17+
Here we provide a store implementation backed by [`react-native-quick-sqlite`](https://github.com/ospfranco/react-native-quick-sqlite). However, we also offer [more bindings here](https://github.com/Braden1996/react-native-replicache). Be sure to see what best fits your project!
18+
19+
### Any additional considerations?
20+
21+
Some configuration is required to receive [poke](https://doc.replicache.dev/byob/poke) events from the server. In our example, [seen here](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/use-replicache.ts), we use a polyfill for Server Sent Events. These aren't built into React Native, but are really handy for a demo.
22+
23+
You most likely want to use web-sockets for this. This is relatively trivial with Pusher/Ably etc and similar to the web-app so we won't discuss that further here.
24+
25+
## How can I install this?
26+
27+
1. Install the following in your React Native project:
28+
- `yarn add expo-crypto react-native-quick-sqlite @react-native-replicache/react-native-quick-sqlite`
29+
2. Ensure that you've polyfilled `crypto.getRandomValues` on the global namespace.
30+
- See [here for an example](https://github.com/Braden1996/react-native-replicache/blob/master/packages/example/mobile-react-native/src/crypto-polyfill.ts).
31+
3. Pass in `createReplicacheQuickSQLiteExperimentalCreateKVStore` to Replicache's `experimentalCreateKVStore` option.
32+
- 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-quick-sqlite/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@react-native-replicache/react-native-quick-sqlite",
3-
"version": "0.0.4",
3+
"version": "1.0.0",
44
"main": "./dist/commonjs/index.js",
55
"module": "./dist/module/index.js",
66
"react-native": "./src/index.ts",
@@ -34,7 +34,7 @@
3434
"clean": "rm -rf dist .turbo"
3535
},
3636
"dependencies": {
37-
"@react-native-replicache/replicache-generic-sqlite": "0.0.4"
37+
"@react-native-replicache/replicache-generic-sqlite": "1.0.0"
3838
},
3939
"devDependencies": {
4040
"@braden1996/tsconfig": "^0.0.1",
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# React Native Replicache - Generic SQLite
2+
3+
> Plug-in React Native compatibility bindings for [Replicache](https://replicache.dev/).
4+
5+
<https://user-images.githubusercontent.com/5165963/219898954-f5e94045-69bf-4c33-84e8-7d152c6f2c32.mov>
6+
7+
## Why is this needed?
8+
9+
This package provides a generic SQLite implementation of [`experimentalCreateKVStore`](https://doc.replicache.dev/api/interfaces/ReplicacheOptions#experimentalcreatekvstore) that is agnostic of the underlying SQLite binding. This abstraction enables us to easily support multiple SQLite bindings. It isn't coupled to React Native either, so could work on other platforms - but that remains to be explored.

packages/replicache-generic-sqlite/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@react-native-replicache/replicache-generic-sqlite",
3-
"version": "0.0.4",
3+
"version": "1.0.0",
44
"main": "./dist/commonjs/index.js",
55
"module": "./dist/module/index.js",
66
"react-native": "./src/index.ts",
@@ -36,7 +36,7 @@
3636
"clean": "rm -rf dist .turbo"
3737
},
3838
"dependencies": {
39-
"@react-native-replicache/deep-freeze": "0.0.4"
39+
"@react-native-replicache/deep-freeze": "1.0.0"
4040
},
4141
"devDependencies": {
4242
"@braden1996/tsconfig": "^0.0.1",

0 commit comments

Comments
 (0)