Merge pull request #3 from theopensystemslab/concurrent

Concurrent prototype

Author: johnrees

package.json

@@ -3,31 +3,27 @@
   "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",
+    "@types/react": "^16.9.43",
+    "@types/react-dom": "^16.9.8",
     "@types/uuid": "^8.0.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": "^0.0.0-experimental-4c8c98ab9",
+    "react-dom": "^0.0.0-experimental-4c8c98ab9",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
-    "react-use-comlink": "^2.0.1",
     "reconnecting-websocket": "^4.4.0",
     "sharedb": "^1.4.0",
-    "typescript": "~3.7.2",
+    "typescript": "^3.9.7",
     "uuid": "^8.2.0",
     "ws": "^7.3.1"
   },
+  "devDependencies": {
+    "concurrently": "^5.2.0"
+  },
   "scripts": {
     "start": "concurrently 'node server' 'react-scripts start'",
     "build": "react-scripts build",
@@ -48,10 +44,5 @@
       "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"
   }
 }

src/App.tsx

@@ -1,7 +1,8 @@
 import randomWords from "random-words";
 import { v4 as uuid } from "uuid";
-import React, { useEffect, useMemo } from "react";
+import React, { useMemo, useState, useEffect, useCallback } from "react";
 import { connectToDB, getConnection } from "./sharedb";
+import { useTransition } from "./react-experimental";
 import {
   Link,
   BrowserRouter as Router,
@@ -26,16 +27,21 @@ function useFlow(config: {
   addNode: () => void;
   removeNode: (id: string) => void;
   reset: (flow: Flow) => void;
+  isPending: boolean;
 } {
   // Setup
 
-  const [state, setState] = React.useState<Flow | null>(null);
+  const [startTransition, isPending] = useTransition();
+
+  const [state, setState] = useState<Flow | null>(null);
 
   const doc = useMemo(() => getConnection(config.id), [config.id]);
 
   useEffect(() => {
     const cloneStateFromShareDB = () =>
-      setState(JSON.parse(JSON.stringify(doc.data)));
+      startTransition(() => {
+        setState(JSON.parse(JSON.stringify(doc.data)));
+      });
 
     connectToDB(doc).then(() => {
       cloneStateFromShareDB();
@@ -46,22 +52,22 @@ function useFlow(config: {
       setState(null);
       doc.destroy();
     };
-  }, [doc]);
+  }, [doc, startTransition]);
 
   // Methods
 
-  const addNode = React.useCallback(() => {
+  const addNode = useCallback(() => {
     doc.submitOp([{ p: ["nodes", uuid()], oi: { text: randomWords() } }]);
   }, [doc]);
 
-  const removeNode = React.useCallback(
+  const removeNode = useCallback(
     (id) => {
       doc.submitOp([{ p: ["nodes", id], od: {} }]);
     },
     [doc]
   );
 
-  const reset = React.useCallback(
+  const reset = useCallback(
     (flow) => {
       doc.submitOp([{ p: [], od: doc.data, oi: flow }]);
     },
@@ -75,6 +81,7 @@ function useFlow(config: {
     addNode,
     removeNode,
     reset,
+    isPending,
   };
 }
 
@@ -86,44 +93,47 @@ const Flow: React.FC<{ id: string }> = ({ id }) => {
   }
 
   return (
-    <main>
-      <button
-        onClick={() => {
-          flow.addNode();
-        }}
-      >
-        Add
-      </button>
-      <button
-        onClick={() => {
-          fetch("/flow.json")
-            .then((res) => res.json())
-            .then((flowData) => {
-              flow.reset(flowData);
+    <>
+      <main>
+        <button
+          onClick={() => {
+            flow.addNode();
+          }}
+        >
+          Add
+        </button>
+        <button
+          onClick={() => {
+            fetch("/flow.json")
+              .then((res) => res.json())
+              .then((flowData) => {
+                flow.reset(flowData);
+              });
+          }}
+        >
+          Import flow
+        </button>
+        <button
+          onClick={() => {
+            flow.reset({
+              nodes: {},
+              edges: [],
             });
-        }}
-      >
-        Import flow
-      </button>
-      <button
-        onClick={() => {
-          flow.reset({
-            nodes: {},
-            edges: [],
-          });
-        }}
-      >
-        Reset
-      </button>
-      {Object.keys(flow.state.nodes).map((k) => (
-        <NodeView
-          key={k}
-          onRemove={flow.removeNode}
-          id={k}
-          node={flow.state.nodes[k]}
-        />
-      ))}
-    </main>
+          }}
+        >
+          Reset
+        </button>
+        {Object.keys(flow.state.nodes).map((k) => (
+          <NodeView
+            key={k}
+            onRemove={flow.removeNode}
+            id={k}
+            node={flow.state.nodes[k]}
+          />
+        ))}
+      </main>
+      {flow.isPending && <div className="overlay" />}
+    </>
   );
 };
 
@@ -168,7 +178,7 @@ const App = () => {
   const history = useHistory();
   const location = useLocation();
 
-  const id = React.useMemo(() => {
+  const id = useMemo(() => {
     if (location.hash.length < 2) {
       return null;
     }

src/index.tsx

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

src/react-app-env.d.ts

@@ -1 +1,3 @@
 /// <reference types="react-scripts" />
+/// <reference types="react-dom/experimental" />
+/// <reference types="react/experimental" />

src/react-experimental.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+/**
+ * Typing hacks for experimental concurrent mode features in React
+ */
+
+export const createRoot = (ReactDOM as any).unstable_createRoot;
+
+export const useTransition: () => [
+  (fn: Function) => void,
+  boolean
+] = (React as any).unstable_useTransition;

src/style.css

@@ -39,3 +39,13 @@ a {
 .remove-button:hover {
   background-color: #dedede;
 }
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.6);
+  z-index: 1000;
+}

tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -19,7 +15,5 @@
     "noEmit": true,
     "jsx": "react"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }