todo-replicache-sveltekit
Multiplayer, offline-compatible TODO-MVC Demo.
This repository contains sample code for Replicache. The example uses SvelteKit. The backend demonstrates implementations of push, pull, poke, createSpace, and spaceExists handlers, which are required for the Replicache sync protocol.
This is a port of todo-wc, with a few minor additions. The frontend was ported from svelte-todomvc. It uses svelte-sse for server-sent events and in-memory Postgres as the database (copied directly from todo-wc).
My goal in creating this was to learn more about both Replicache and SvelteKit, as porting a codebase forces one to understand it :). At the same time, I wanted to create something useful for others since the official examples on the Replicache website don't include a SvelteKit version. I chose the example with 'Per-Space Versioning' because it was the simplest one that also seemed practical (I couldn't think of a use case where global versioning would be desirable). Read more about it in this blog post.
0. What's Being Demonstrated Here?
This looks and feels like the normal TODO MVC app but has the following additional properties:
- It automatically syncs across tabs (even while offline).
- It syncs across browsers and devices when online, including when going back online after being offline.
- Despite writing every update to the backend, the user experience is snappy regardless of network speed and even when offline (thanks to Replicache's optimistic updates and its use of IndexedDB as a storage engine).
- It has all the other properties of an app that uses Replicache, such as the ability to handle conflicts, rebasing, rollbacks, schema changes, etc.
- The "syncing unit" here is a "space" (in our case, a list) - you'll see the spaceID in the URL. You can create multiple spaces, but when visiting one, only data related to it is synced back and forth with the backend. This means permissions can be granted per space. Every time you navigate to the root URL or try to go to a non-existing space, a new space is created (you have to be online for space creation to work). You can then copy the URL to another tab or window to see the space staying in sync.
Minor Functionality Additions By Me (over the official example)
- Added a primitive "sync pending/all changes saved" marker that's interesting to look at while throttling the network and when going into and out of offline mode.
- Added a service worker (the one from the SvelteKit docs) to allow refreshing or navigating to an existing space in offline mode.
Stuff I'd Like to Explore/Add But Haven't Yet
- Undo/redo and version history (maybe using Dolt).
- A conventional DB schema (e.g a table for items).
- Space creation while offline.
Other Thoughts
Notice that Replicache effectively plays the role a Svelte store would and has a very similar API from the frontend's point of view. Since Replicache holds all the data in memory (in addition to persisting it via IndexedDB), the app uses it directly without copying it into a Svelte store or state.
1. Setup
Get Your Replicache License Key (it's free)
$ npx replicache get-license
Set Your VITE_REPLICACHE_LICENSE_KEY Environment Variable, Either in .env or in Your Terminal:
$ export VITE_REPLICACHE_LICENSE_KEY="<your license key>"
Install
$ npm install
2. Start the Dev Server
$ npm run dev
