client-side simple storage! now for a more fault-tolerant approach ho…

…pefully
jaredly · Jan 27, 2020 · 0eba084 · 0eba084
1 parent d83bd1e
commit 0eba084
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 1 deletion.
diff --git a/examples/fault-tolerant/.babelrc b/examples/fault-tolerant/.babelrc
@@ -0,0 +1 @@
+{"presets": ["@babel/preset-flow", "@babel/preset-env"]}
diff --git a/examples/fault-tolerant/.flowconfig b/examples/fault-tolerant/.flowconfig
@@ -0,0 +1,12 @@
+[ignore]
+
+[include]
+../../node_modules
+
+[libs]
+
+[lints]
+
+[options]
+
+[strict]
diff --git a/examples/fault-tolerant/.gitignore b/examples/fault-tolerant/.gitignore
@@ -0,0 +1,3 @@
+.cache
+.data
+dist
diff --git a/examples/fault-tolerant/package.json b/examples/fault-tolerant/package.json
@@ -0,0 +1,26 @@
+{
+    "name": "fault-tolerant",
+    "version": "1.0.0",
+    "dependencies": {
+        "@local-first/hybrid-logical-clock": "^1.0",
+        "@local-first/nested-object-crdt": "^1.0",
+        "body-parser": "^1.19.0",
+        "cors": "^2.8.5",
+        "express": "^4.17.1",
+        "express-ws": "^4.0.0",
+        "idb": "^5.0.0",
+        "leveldown": "^5.4.1",
+        "levelup": "^4.3.2",
+        "parcel": "^1.12.4",
+        "react": "^16.12.0",
+        "react-dom": "^16.12.0"
+    },
+    "browserslist": [
+        "last 1 Chrome versions"
+    ],
+    "devDependencies": {
+        "@babel/core": "^7.8.3",
+        "@babel/register": "^7.8.3",
+        "flow-bin": "^0.116.1"
+    }
+}
diff --git a/examples/simple-example/client/client.js b/examples/simple-example/client/client.js
@@ -26,6 +26,34 @@ export type CRDTImpl<Delta, Data> = {
     },
 };
 
+export const dump = <Delta, Data>(collections: Collections<Delta, Data>) => {
+    const data = {};
+    Object.keys(collections).forEach(k => {
+        const col = collections[k];
+        data[k] = {
+            data: col.data,
+            hlc: col.hlc,
+            lastSeenDelta: col.lastSeenDelta,
+            deltas: col.deltas,
+            pendingDeltas: col.pendingDeltas,
+        };
+    });
+    return data;
+};
+
+export const inflate = <Delta, Data>(
+    sessionId: string,
+    collections: Collections<Delta, Data>,
+    dump: any,
+) => {
+    Object.keys(dump).forEach(k => {
+        if (!collections[k]) {
+            collections[k] = newCollection(sessionId);
+        }
+        Object.assign(collections[k], dump[k]);
+    });
+};
+
 type CollectionState<Delta, Data> = {
     hlc: HLC,
     data: { [key: string]: Data },
@@ -84,7 +112,7 @@ export const debounce = function<T>(fn: () => void): () => void {
         if (!waiting) {
             waiting = true;
             setTimeout(() => {
-                console.log('ok');
+                // console.log('ok');
                 fn();
                 waiting = false;
             }, 0);

diff --git a/examples/simple-example/client/ws.js b/examples/simple-example/client/ws.js
@@ -6,6 +6,8 @@ import makeClient, {
     syncFailed,
     syncSucceeded,
     debounce,
+    dump,
+    inflate,
     type ClientState,
 } from './client';
 import backOff from './back-off';
@@ -55,6 +57,8 @@ const reconnectingSocket = (
     return state;
 };
 
+const storageKey = `simple-example:data`;
+
 export default function<Delta, Data>(
     url: string,
     sessionId: string,
@@ -75,6 +79,10 @@ export default function<Delta, Data>(
     );
 
     const sync = () => {
+        localStorage.setItem(
+            storageKey,
+            JSON.stringify(dump(client.collections)),
+        );
         if (state.socket) {
             const socket = state.socket;
             const messages = syncMessages(client.collections);
@@ -85,6 +93,11 @@ export default function<Delta, Data>(
     };
 
     const client = makeClient(crdt, sessionId, debounce(sync));
+    const storedRaw = localStorage.getItem(storageKey);
+    if (storedRaw) {
+        const data = JSON.parse(storedRaw);
+        inflate(sessionId, client.collections, data);
+    }
     sync();
     return {
         client,