import ReactDom from "https://esm.sh/react-dom";
import { createStore } from "https://esm.sh/tinybase";
import { createRemotePersister } from "https://esm.sh/tinybase/persisters/persister-remote";
import { useValue } from "https://esm.sh/tinybase/ui-react";
const store = createStore();
const persister = createRemotePersister(store, `${window.location.origin}/load`, `${window.location.origin}/save`);
await persister.startAutoLoad({}, {
count: 0,
});
await persister.startAutoSave();
function App() {
const count = useValue("count", store);
return (
<main>
<h1>Tinybase Example</h1>
<p>Open this website in two tabs to see the values get synced after a short interval.</p>
<div>
<button
onClick={() => {
store.setValue("count", count - 1);
}}
>
-
</button>
<span>{count}</span>
<button
onClick={() => {
store.setValue("count", count + 1);
}}
>
+
</button>
</div>
</main>
);
}
const root = ReactDom.createRoot(document.body);
root.render(<App />);