Upgrades to React 18, Blueprint 5 (#48)

* react-18 * progress * fix * fixes
flydelabs · Aug 24, 2023 · e519531 · e519531
1 parent e110d46
commit e519531
Show file tree

Hide file tree

Showing 42 changed files with 1,002 additions and 1,027 deletions.
diff --git a/dev-server/src/server.ts b/dev-server/src/server.ts
@@ -102,9 +102,9 @@ export const runDevServer = (
     }
   });
 
-  app.use("/editor", express.static(editorStaticRoot));
+  app.use("/", express.static(editorStaticRoot));
 
-  app.use(["/editor", "/editor/*"], async (req, res, next) => {
+  app.use(["/", "/*"], async (req, res, next) => {
     const path = join(editorStaticRoot, "index.html");
     res.sendFile(path);
   });

diff --git a/editor/package.json b/editor/package.json
@@ -9,10 +9,9 @@
   "license": "agpl-3.0",
   "proxy": "http://localhost:8484",
   "dependencies": {
-    "@blueprintjs/core": "^3.54.0",
-    "@blueprintjs/icons": "^4.16.0",
-    "@blueprintjs/popover2": "^0.3.3",
-    "@blueprintjs/select": "^3.19.1",
+    "@blueprintjs/core": "^5.0.0",
+    "@blueprintjs/icons": "^5.0.0",
+    "@blueprintjs/select": "^5.0.0",
     "@flyde/core": "workspace:*",
     "@flyde/dev-server": "workspace:*",
     "@flyde/flow-editor": "workspace:*",
@@ -22,11 +21,9 @@
     "@types/jest": "^26.0.24",
     "@types/lodash": "^4.14.197",
     "@types/node": "^12.20.55",
-    "@types/react": "^17.0.64",
-    "@types/react-dom": "^17.0.20",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@types/react-resizable": "^1.7.4",
-    "@types/react-router": "^5.1.20",
-    "@types/react-router-dom": "^5.3.3",
     "axios": "^0.27.2",
     "classnames": "^2.3.2",
     "cuid": "^2.1.8",
@@ -36,14 +33,15 @@
     "lodash": "^4.17.21",
     "patch-package": "^6.5.1",
     "query-string": "^7.1.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-resizable": "^1.11.1",
-    "react-router-dom": "^5.3.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-resizable": "^3.0.0",
+    "react-router": "^6.15.0",
+    "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.0",
     "use-debounce": "^8.0.4",
     "use-error-boundary": "^2.0.6",
-    "use-query-params": "^1.2.3",
+    "use-query-params": "^2.2.0",
     "usehooks-ts": "^2.9.1",
     "web-vitals": "^1.1.2"
   },
@@ -54,10 +52,10 @@
     "typescript": "^4.9.5"
   },
   "scripts": {
-    "build": "PUBLIC_URL=/editor REACT_APP_FLYDE_MODE=production react-scripts build --debug --log --verbose",
+    "build": "PUBLIC_URL=/ REACT_APP_FLYDE_MODE=production react-scripts build --debug --log --verbose",
     "test": ":",
     "eject": "react-scripts eject",
-    "dev": "WDS_SOCKET_HOST=localhost DANGEROUSLY_DISABLE_HOST_CHECK=true FAST_REFRESH=false PUBLIC_URL=/editor REACT_APP_FLYDE_MODE=development FORCE_ENV=production react-scripts start",
+    "dev": "WDS_SOCKET_HOST=localhost DANGEROUSLY_DISABLE_HOST_CHECK=true FAST_REFRESH=false PUBLIC_URL=/ REACT_APP_FLYDE_MODE=development FORCE_ENV=production react-scripts start",
     "__publish": "npm version patch && npm publish",
     "start": "pnpm run dev",
     "postinstall": "node dependencies-patch/index.js || true"
@@ -81,4 +79,4 @@
     ]
   },
   "gitHead": "5f06bd4a0f3da610e64d74c19cc84babc4557f56"
-}
+}
diff --git a/editor/src/index.scss b/editor/src/index.scss
@@ -3,7 +3,7 @@
 @import "~@blueprintjs/core/lib/css/blueprint.css";
 @import "~@blueprintjs/select/lib/css/blueprint-select.css";
 @import "~@blueprintjs/icons/lib/css/blueprint-icons.css";
-@import "~@blueprintjs/popover2/lib/css/blueprint-popover2.css";
+// @import "~@blueprintjs/popover2/lib/css/blueprint-popover2.css";
 
 @import "~@flyde/flow-editor/src/index.scss";
 

diff --git a/editor/src/index.tsx b/editor/src/index.tsx
@@ -1,9 +1,10 @@
 /* eslint-disable no-restricted-globals */
-import * as React from "react";
-import * as ReactDOM from "react-dom";
+
+import { createRoot } from "react-dom/client";
 
 import { FocusStyleManager } from "@blueprintjs/core";
-import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom";
+import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
+import { ReactRouter6Adapter } from "use-query-params/adapters/react-router-6";
 
 import { QueryParamProvider } from "use-query-params";
 
@@ -16,7 +17,7 @@ import "./index.scss";
 disableCookieAccessForVscode();
 FocusStyleManager.onlyShowFocusOnTabs();
 
-const baseName = "/editor";
+const baseName = "";
 
 export enum AppState {
   LOADING,
@@ -26,17 +27,15 @@ export enum AppState {
 const RoutedApp = () => {
   return (
     <BrowserRouter basename={baseName}>
-      <QueryParamProvider ReactRouterRoute={Route}>
-        <Switch>
-          <Route path="/files">
-            <FlowLoader />
-          </Route>
-          <Redirect to="/files" />
-        </Switch>
+      <QueryParamProvider adapter={ReactRouter6Adapter}>
+        <Routes>
+          <Route path="/files" element={<FlowLoader />} />
+          <Route path="*" element={<Navigate to="/files" />} />
+        </Routes>
       </QueryParamProvider>
     </BrowserRouter>
   );
 };
 
-ReactDOM.render(<RoutedApp />, document.getElementById("root") as HTMLElement);
-// registerServiceWorker();
+const root = createRoot(document.getElementById("root") as HTMLElement); // createRoot(container!) if you use TypeScript
+root.render(<RoutedApp />);
diff --git a/editor/src/integrated-flow-manager/flow-loader.tsx b/editor/src/integrated-flow-manager/flow-loader.tsx
@@ -2,7 +2,7 @@ import { FlydeFlow, ResolvedDependenciesDefinitions } from "@flyde/core";
 import { File, FolderStructure } from "@flyde/dev-server";
 import React, { useCallback, useEffect, useRef } from "react";
 
-import { useHistory, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { useQueryParam } from "use-query-params";
 import { useDevServerApi } from "../api/dev-server-api";
 import { Loader, PortsContext } from "@flyde/flow-editor"; // ../../common/lib/loader
@@ -23,15 +23,15 @@ export const FlowLoader: React.FC = (props) => {
 
   const [executionId, setExecutionId] = React.useState<string>("n/a");
 
-  const history = useHistory();
+  const navigate = useNavigate();
   const { search } = useLocation();
 
   const devServerClient = useDevServerApi();
 
   const ports = useRef(
     isEmbedded
       ? createVsCodePorts()
-      : createWebPorts({ devServerClient, history })
+      : createWebPorts({ devServerClient, navigate })
   );
 
   const loadData = useCallback(async () => {

diff --git a/editor/src/integrated-flow-manager/side-menu/FoldersSection/index.tsx b/editor/src/integrated-flow-manager/side-menu/FoldersSection/index.tsx
@@ -1,10 +1,7 @@
 import {
   Classes,
   Collapse,
-  ContextMenu,
-  ITreeNode,
-  Menu,
-  MenuItem,
+  TreeNodeInfo,
   Tree,
   TreeEventHandler,
 } from "@blueprintjs/core";
@@ -15,8 +12,7 @@ import "./styles.scss";
 import { FolderStructure, FileOrFolder } from "@flyde/dev-server";
 import { useDevServerApi } from "../../../api/dev-server-api";
 import { Loader } from "@flyde/flow-editor"; // ../../../../common/lib/loader
-import { toastMsg } from "@flyde/flow-editor"; // ../../../../common/toaster
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { NewFlowModal } from "./NewFlowModal/NewFlowModal";
 import {
   BaseNode,
@@ -41,7 +37,7 @@ const toTreeNode = (
   fileOrFolder: FileOrFolder,
   expanded: Set<string>,
   selected: Set<string>
-): ITreeNode<FileOrFolder> => {
+): TreeNodeInfo<FileOrFolder> => {
   const base = {
     label: fileOrFolder.name,
     id: fileOrFolder.relativePath,
@@ -90,7 +86,7 @@ export const FoldersSection: React.FC<FoldersSectionProps> = (props) => {
     [foldersExpanded]
   );
 
-  const history = useHistory();
+  const navigate = useNavigate();
 
   useEffect(() => {
     devClient.fileStructure().then(setStructure);
@@ -112,9 +108,9 @@ export const FoldersSection: React.FC<FoldersSectionProps> = (props) => {
     []
   );
 
-  const onCreateFlowHere = (data: FileOrFolder) => {
-    setNewFlowTarget(data.relativePath);
-  };
+  // const onCreateFlowHere = (data: FileOrFolder) => {
+  //   setNewFlowTarget(data.relativePath);
+  // };
 
   const onNodeContextMenu: TreeEventHandler<FileOrFolder> = React.useCallback(
     (node, _, e) => {
@@ -126,38 +122,38 @@ export const FoldersSection: React.FC<FoldersSectionProps> = (props) => {
 
       e.preventDefault();
 
-      if (data.isFolder) {
-        const menu = (
-          <Menu>
-            <MenuItem
-              label={`Add new flow here`}
-              onClick={() => onCreateFlowHere(data)}
-              // onClick={preventDefaultAnd(() => onAddIoPin("input"))}
-              // disabled={!nodeIoEditable}
-            />
-          </Menu>
-        );
-        ContextMenu.show(menu, { left: e.pageX, top: e.pageY });
-      } else {
-        const menu = (
-          <Menu>
-            <MenuItem
-              label={`Duplicate flow`}
-              onClick={() => toastMsg("Bob " + data?.fullPath)}
-              // onClick={preventDefaultAnd(() => onAddIoPin("input"))}
-              // disabled={!nodeIoEditable}
-            />
-            <MenuItem
-              label={`Delete flow`}
-              intent="danger"
-              onClick={() => toastMsg("Bob " + data?.fullPath)}
-              // onClick={preventDefaultAnd(() => onAddIoPin("input"))}
-              // disabled={!nodeIoEditable}
-            />
-          </Menu>
-        );
-        ContextMenu.show(menu, { left: e.pageX, top: e.pageY });
-      }
+      // if (data.isFolder) {
+      //   const menu = (
+      //     <Menu>
+      //       <MenuItem
+      //         text={`Add new flow here`}
+      //         onClick={() => onCreateFlowHere(data)}
+      //         // onClick={preventDefaultAnd(() => onAddIoPin("input"))}
+      //         // disabled={!nodeIoEditable}
+      //       />
+      //     </Menu>
+      //   );
+      //   ContextMenu.show(menu, { left: e.pageX, top: e.pageY });
+      // } else {
+      //   const menu = (
+      //     <Menu>
+      //       <MenuItem
+      //         label={`Duplicate flow`}
+      //         onClick={() => toastMsg("Bob " + data?.fullPath)}
+      //         // onClick={preventDefaultAnd(() => onAddIoPin("input"))}
+      //         // disabled={!nodeIoEditable}
+      //       />
+      //       <MenuItem
+      //         label={`Delete flow`}
+      //         intent="danger"
+      //         onClick={() => toastMsg("Bob " + data?.fullPath)}
+      //         // onClick={preventDefaultAnd(() => onAddIoPin("input"))}
+      //         // disabled={!nodeIoEditable}
+      //       />
+      //     </Menu>
+      //   );
+      //   ContextMenu.show(menu, { left: e.pageX, top: e.pageY });
+      // }
     },
     []
   );
@@ -166,10 +162,10 @@ export const FoldersSection: React.FC<FoldersSectionProps> = (props) => {
     (node) => {
       const data = node.nodeData;
       if (data && !data.isFolder && data.isFlyde) {
-        history.push(`/files?fileName=${data.relativePath}`);
+        navigate(`/files?fileName=${data.relativePath}`);
       }
     },
-    [history]
+    [navigate]
   );
 
   const onCreateFlow = useCallback(
@@ -187,9 +183,9 @@ export const FoldersSection: React.FC<FoldersSectionProps> = (props) => {
       };
       devClient.saveFile(path, flow);
 
-      history.push(`/files?fileName=${path}`);
+      navigate(`/files?fileName=${path}`);
     },
-    [devClient, newFlowTarget, history]
+    [devClient, newFlowTarget, navigate]
   );
 
   if (!structure) {

diff --git a/editor/src/integrated-flow-manager/side-menu/add-section/index.tsx b/editor/src/integrated-flow-manager/side-menu/add-section/index.tsx
@@ -19,7 +19,7 @@ export const MenuAddSection: React.FC<MenuAddSectionProps> = (props) => {
     return k.toLowerCase().includes(debouncedSearch.toLowerCase());
   });
 
-  const onSearchChange = useCallback((e) => {
+  const onSearchChange = useCallback((e: any) => {
     setSearchTerm(e.target.value);
   }, []);
 

diff --git a/editor/src/web-ports.ts b/editor/src/web-ports.ts
@@ -1,15 +1,15 @@
 import { DevServerClient } from "@flyde/dev-server";
 import { EditorPorts, toastMsg } from "@flyde/flow-editor";
-import { useHistory } from "react-router";
+import { useNavigate } from "react-router-dom";
 
 export type WebPortsConfig = {
   devServerClient: DevServerClient;
-  history: ReturnType<typeof useHistory>;
+  navigate: ReturnType<typeof useNavigate>;
 };
 
 export const createWebPorts = ({
   devServerClient,
-  history,
+  navigate,
 }: WebPortsConfig): EditorPorts => {
   return {
     prompt: async ({ text, defaultValue }) => {
@@ -19,11 +19,11 @@ export const createWebPorts = ({
       return confirm(text);
     },
     openFile: async ({ absPath }) => {
-      const params = new URLSearchParams(history.location.search);
+      const params = new URLSearchParams(location.search);
       params.set("fileName", absPath);
       const newUrl = decodeURIComponent(`${location.pathname}?${params}`);
       toastMsg(newUrl);
-      history.push(newUrl);
+      navigate(newUrl);
     },
     readFlow: async ({ absPath }) => {
       return devServerClient.readFile(absPath);