Closed mashpie closed 2 years ago
Hi @mashpie - we have recently (like a few days ago did a bunch of work to the docs. Have you seen the latest "get started": https://doc.replicache.dev/ ? Was it light or dark background when you last looked. If dark, take another look through, we think it should be a lot easier.
Or let it be some express or fastify server
Replicache requires a server that understands the Replicache sync protocol. this is not a lot of work, but it's not trivial either. Think of it sort of like a GraphQL backend. The next backend we provide in the current get started is about as trivial as it possible gets. Putting it in express wouldn't change anything I don't think (the amount of Next.js in the backend dir is like the two endpoint entrypoints).
svelte / vue client side.
This would definitely be interesting for those more familiar with those frameworks, and a vanillajs one is interesting too. Thanks for the recommendation.
If you have any specific questions happy to answer here or discord. Sorry the docs seems confusing.
Hi @aboodman, and thanks for the fast response. In the end, the backend is not my concern but the frontend. All examples I found are using:
import { useSubscribe } from "replicache-react";
To subscribe for changes. I could not find a way to subscribe to changes without it properly. If possible, to accomplish with RxJS, we were prepared for vanilla and vue (through https://vueuse.org/functions.html#category=%40RxJS). I think...
Now! After poking around in your older repositories I managed to get some vue reactivity with:
<script setup>
import { ref } from 'vue'
import { Replicache } from 'replicache'
const list = ref([])
const rep = new Replicache({
name: 'chat-user-id',
licenseKey: '...',
pushURL: '/api/replicache-push',
pullURL: '/api/replicache-pull'
})
rep.subscribe((tx) => tx.scan({ prefix: 'message/' }).entries().toArray(), {
onData(data) {
list.value = data
}
})
</script>
<template>
<div>
<pre>{{ list }}</pre>
</div>
</template>
Could that be so simple?
Yup! Sorry this was hard to find. We'll get a vanilla sample going soon.
And vanilla:
index.html
<!DOCTYPE html>
<body>
<button id="add-message">Add Message</button>
<div id="list"></div>
</body>
<script type="module" src="index.js"></script>
index.js
import {
Replicache,
TEST_LICENSE_KEY,
} from 'https://cdn.skypack.dev/replicache';
function drawList(rep, parentNode) {
rep.subscribe(
async tx => tx.scan({ prefix: 'messages/' }).values().toArray(),
{
onData(data) {
parentNode.replaceChildren(
...data.map(item => {
const div = document.createElement('div');
div.textContent = item;
return div;
}),
);
},
},
);
}
const rep = new Replicache({
name: 'vanilla',
licenseKey: TEST_LICENSE_KEY,
mutators: {
addData: async (tx, { key, value }) => {
await tx.put(key, value);
},
},
});
const listContainer = document.getElementById('list');
drawList(rep, listContainer);
let count = 0;
const button = document.getElementById('add-message');
button.onclick = () =>
rep.mutate.addData({
key: `messages/${++count}`,
value: `Hello world! ${count}`,
});
Nice, straight to the point. Thanks a lot for your support!
How about adding a minimal code sample without any framework requirements or abstractions?
Or let it be some express or fastify server side and svelte / vue client side.
What makes replicache so interesting to me is the fact that it should be easy to implement in custom on-premise projects. Sure, I've tried all provided examples, getting started, read and partially tried the Howto Integration own Backend. But to be honest: next adds so much noise around the key of syncing (and offline-first capabilties) that I got lost.