An example project on how to use RxDB with svelte-kit.
Svelte kit is in beta, so this project may break at any time. It is working as of May 12th 2021.
To run this example:
npm install
npm run dev
And navigate to http://localhost:3000
The example checks for the browser in $app/env and doesn't run RxDB on the backend. This means that it will work offline with a SPA that has server side rendering disabled.
Here's a rough outline what I did to get RxDB working:
npm install --save events rxdb pouchdb-adapter-idb rxjs- Modify your
svelte.config.jslike so:
kit: {
vite: {
define: {
'process.env': {}
}
}
}
- Add the following to your
app.htmlinside<head>
<script>var global = globalThis</script>
These steps might be incomplete and YMMV.
import { createRxDatabase, addRxPlugin } from 'rxdb';
import { of, NEVER, from } from 'rxjs';
import { tap, switchMap, shareReplay } from 'rxjs/operators';
import * as idb from 'pouchdb-adapter-idb';
import { browser } from '$app/env';
const db$ = (browser ? of(null) : NEVER).pipe(
tap(() => addRxPlugin(idb)),
switchMap(() => {
return from(createRxDatabase({
name: 'mydb',
adapter: 'idb',
ignoreDuplicate: true
}))
}),
shareReplay(1)
)
db$.subscribe(console.log)
// log output (in browser): RxDatabaseBase2 {internalStore: PouchDB, idleQueue: IdleQueue2, token: "ie2lkbhj48", _subs: Array(1), destroyed: false, …}
// on server side `db$` will produce no valuesRemember to not use the RxDB API outside a $app/env.browser = true check, or otherwise you may encounter errors.