basic working sharedb + CRA example

Author: johnrees

package.json

@@ -3,20 +3,30 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@nx-js/observer-util": "^4.2.2",
+    "@teamwork/websocket-json-stream": "^2.0.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
+    "comlink": "^4.3.0",
+    "express": "^4.17.1",
+    "nanoid": "^3.1.10",
+    "random-words": "^1.1.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1",
-    "typescript": "~3.7.2"
+    "react-use-comlink": "^2.0.1",
+    "reconnecting-websocket": "^4.4.0",
+    "sharedb": "^1.4.0",
+    "typescript": "~3.7.2",
+    "ws": "^7.3.1"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "concurrently 'node server' 'react-scripts start'",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
@@ -35,5 +45,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "concurrently": "^5.2.0",
+    "ts-node": "^8.10.2",
+    "ts-node-dev": "^1.0.0-pre.52"
   }
 }

server.js

@@ -0,0 +1,42 @@
+const WebSocketJSONStream = require("@teamwork/websocket-json-stream");
+const express = require("express");
+const http = require("http");
+const ShareDB = require("sharedb");
+const { Server } = require("ws");
+
+var backend = new ShareDB();
+
+// createDoc(startServer);
+
+// (now doing this in the client instead, so that the ID can be dynamic)
+// function createDoc(callback) {
+//   var connection = backend.connect();
+//   var doc = connection.get("examples", "test");
+//   doc.fetch(function (err) {
+//     if (err) throw err;
+//     if (doc.type === null) {
+//       doc.create({ nodes: {}, edges: [] }, callback);
+//       return;
+//     }
+//     callback();
+//   });
+// }
+
+function startServer() {
+  // Create a web server to serve files and listen to WebSocket connections
+  var app = express();
+  app.use(express.static("static"));
+  var server = http.createServer(app);
+
+  // Connect any incoming WebSocket connection to ShareDB
+  var wss = new Server({ server });
+  wss.on("connection", function (ws) {
+    var stream = new WebSocketJSONStream(ws);
+    backend.listen(stream);
+  });
+
+  server.listen(8080);
+  console.log("Listening on http://localhost:8080");
+}
+
+startServer();

src/App.css

@@ -1,26 +1,72 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import randomWords from "random-words";
+import React, { useEffect, useRef } from "react";
+import { connectToDB, getConnection } from "./sharedb";
+
+const loadNewFlow = () => {
+  window.location.href = [window.location.origin, randomWords()].join("#");
+  // should react to url change rather than full reload
+  window.location.reload();
+};
+
+const Flow: React.FC<{ id: string }> = ({ id }) => {
+  const [state, setState] = React.useState<any>();
+  const docRef = useRef(null);
+
+  useEffect(() => {
+    // should probably useContext or something rather than
+    // this useRef stuff
+    docRef.current = getConnection(id);
+    const doc = docRef.current;
+
+    const cloneStateFromShareDB = () =>
+      setState(JSON.parse(JSON.stringify(doc.data)));
+
+    connectToDB(doc).then(() => {
+      cloneStateFromShareDB();
+      doc.on("op", cloneStateFromShareDB);
+    });
+
+    return () => {
+      docRef.current.destroy();
+    };
+  }, []);
 
-function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div>
+      {state?.nodes &&
+        Object.keys(state.nodes).map((k) => (
+          <Node key={k} doc={docRef.current} id={k} />
+        ))}
+      <button
+        onClick={() => {
+          // add a node
+          docRef.current.submitOp([{ p: ["nodes", randomWords()], oi: {} }]);
+        }}
+      >
+        ADD
+      </button>
+
+      <button onClick={loadNewFlow}>New flow</button>
     </div>
   );
-}
+};
+
+const Node = React.memo(({ id, doc }: any) => (
+  <h1
+    onClick={() => {
+      // remove the node
+      doc.submitOp([{ p: ["nodes", id], od: doc.data.nodes[id] }]);
+    }}
+  >
+    {id} {Math.round(Math.random() * 1000)}
+  </h1>
+));
+
+const App = () => {
+  let [, id] = window.location.href.split("#");
+  if (!id) loadNewFlow();
+
+  return <Flow id={id} />;
+};
 
 export default App;

src/App.test.tsx

@@ -1,14 +1,13 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );
 
 // If you want your app to work offline and load faster, you can change

src/App.tsx

@@ -0,0 +1,32 @@
+import ReconnectingWebSocket from "reconnecting-websocket";
+import sharedb from "sharedb/lib/client";
+
+const socket = new ReconnectingWebSocket("ws://localhost:8080");
+const connection = new sharedb.Connection(socket);
+
+export const getConnection = (id) => connection.get("examples", id);
+
+export const createDoc = async (
+  doc,
+  initialData = { nodes: {}, edges: [] }
+) => {
+  return new Promise(async (res, rej) => {
+    doc.create(initialData, (err) => {
+      if (err) rej(err);
+      res();
+    });
+  });
+};
+
+export const connectToDB = (doc) =>
+  new Promise((res, rej) => {
+    doc.subscribe(async (err) => {
+      console.log("subscribing to doc");
+      if (err) return rej(err);
+      if (doc.type === null) {
+        console.log("creating doc");
+        await createDoc(doc);
+      }
+      return res();
+    });
+  });

src/index.css

@@ -10,7 +10,7 @@
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "strict": true,
+    "strict": false,
     "forceConsistentCasingInFileNames": true,
     "module": "esnext",
     "moduleResolution": "node",