upgrade to react18 (#323)

YousefED · web-flow · commit 7b80ce09fb8b · 2022-11-28T21:48:10.000+01:00
* upgrade to react18

* fix

* remove .pause()

* fix login test

* log generate test

* upgrade react inspector

* upgrade package lock

* fix react-inspector

* fix
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,7 +4,9 @@
   "devDependencies": {
     "lerna": "^5.0.0",
     "playwright": "^1.18.1",
-    "patch-package": "^6.4.7"
+    "patch-package": "^6.4.7",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9"
   },
   "workspaces": [
     "packages/*"
@@ -35,6 +37,8 @@
   },
   "overrides": {
     "--comment": "needed so that playwright-test doesn't install a different version of pw",
-    "playwright-core": "1.24.2"
+    "playwright-core": "1.24.2",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9"
   }
 }
diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -4,9 +4,9 @@
   "private": true,
   "dependencies": {
     "@atlaskit/atlassian-navigation": "^2.2.6",
-    "@atlaskit/avatar": "^21.0.0",
+    "@atlaskit/avatar": "^21.1.1",
     "@atlaskit/banner": "^11.6.1",
-    "@atlaskit/breadcrumbs": "^11.6.2",
+    "@atlaskit/breadcrumbs": "^11.7.3",
     "@atlaskit/button": "^16.3.5",
     "@atlaskit/checkbox": "^12.3.18",
     "@atlaskit/comment": "^10.5.2",
@@ -23,7 +23,7 @@
     "@atlaskit/progress-bar": "^0.5.8",
     "@atlaskit/section-message": "^6.1.14",
     "@atlaskit/spinner": "^15.1.14",
-    "@atlaskit/select": "^15.6.0",
+    "@atlaskit/select": "^15.7.5",
     "@atlaskit/textarea": "^4.3.8",
     "@atlaskit/textfield": "^5.1.12",
     "@atlaskit/tree": "^8.6.1",
@@ -42,11 +42,6 @@
     "@typecell-org/parsers": "^0.0.3",
     "@typecell-org/common": "^0.0.3",
     "@typecell-org/engine": "^0.0.3",
-    "@types/markdown-it": "^10.0.3",
-    "@types/node": "^16.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@types/uuid": "^8.3.0",
     "@typescript/vfs": "^1.3.4",
     "@blocknote/core": "^0.1.0",
     "classnames": "^2.3.1",
@@ -66,15 +61,15 @@
     "prettier": "2.4.1",
     "probe.gl": "^3.1.4",
     "qs": "^6.10.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-avatar": "^3.10.0",
     "react-dnd": "^14.0.2",
     "react-dnd-html5-backend": "^14.0.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-error-overlay": "^6.0.9",
     "react-github-btn": "^1.2.1",
-    "react-icons": "^4.2.0",
-    "react-inspector": "^5.1.0",
+    "react-icons": "^4.6.0",
+    "react-inspector": "^6.0.1",
     "react-intl-next": "npm:react-intl@^5.18.1",
     "remixicon-react": "^1.0.0",
     "semver": "^7.3.5",
@@ -147,13 +142,16 @@
     "@types/lodash": "^4.14.168",
     "@types/lowlight": "0.0.2",
     "@types/qs": "^6.9.7",
-    "@types/react-inspector": "^4.0.1",
     "@types/semver": "^7.3.8",
     "@types/speakingurl": "^13.0.2",
     "@types/ua-parser-js": "^0.7.36",
     "@types/uuid": "^8.3.0",
     "@types/zxcvbn": "^4.4.1",
     "@types/prettier": "^2.6.4",
+    "@types/markdown-it": "^10.0.3",
+    "@types/node": "^16.0.0",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
     "cross-env": "^7.0.3",
     "eslint": "^8.21.0",
     "eslint-config-react-app": "^7.0.1",
diff --git a/packages/editor/src/app/documentRenderers/notebook/CellListDraggableCell.tsx b/packages/editor/src/app/documentRenderers/notebook/CellListDraggableCell.tsx
@@ -12,6 +12,7 @@ type Props = {
   onAddBefore: () => void;
   onAddAfter: () => void;
   onRemove: () => void;
+  children: any;
 };
 
 interface DragItem {
diff --git a/packages/editor/src/app/matrix-auth/auth/Registration.tsx b/packages/editor/src/app/matrix-auth/auth/Registration.tsx
@@ -225,7 +225,7 @@ export default class Registration extends React.Component<IProps, IState> {
       // do SSO instead. If we've already started the UI Auth process though, we don't
       // need to.
       if (!this.state.doingUIAuth) {
-        await this.makeRegisterRequest(null);
+        await this.makeRegisterRequest(cli, null);
         // This should never succeed since we specified no auth object.
         console.log("Expecting 401 from register request but got success!");
       }
@@ -439,7 +439,7 @@ export default class Registration extends React.Component<IProps, IState> {
     });
   };
 
-  private makeRegisterRequest = (auth: any) => {
+  private makeRegisterRequest = (matrixClient: MatrixClient, auth: any) => {
     // We inhibit login if we're trying to register with an email address: this
     // avoids a lot of complex race conditions that can occur if we try to log
     // the user in one one or both of the tabs they might end up with after
@@ -461,7 +461,7 @@ export default class Registration extends React.Component<IProps, IState> {
     if (auth) registerParams.auth = auth;
     if (inhibitLogin !== undefined && inhibitLogin !== null)
       registerParams.inhibit_login = inhibitLogin;
-    return this.state.matrixClient!.registerRequest(registerParams);
+    return matrixClient.registerRequest(registerParams);
   };
 
   private getUIAuthInputs() {
@@ -492,7 +492,9 @@ export default class Registration extends React.Component<IProps, IState> {
       return (
         <InteractiveAuth
           matrixClient={this.state.matrixClient}
-          makeRequest={this.makeRegisterRequest}
+          makeRequest={(params) =>
+            this.makeRegisterRequest(this.state.matrixClient!, params)
+          }
           onAuthFinished={this.onUIAuthFinished}
           inputs={this.getUIAuthInputs()}
           requestEmailToken={this.requestEmailToken}
diff --git a/packages/editor/src/index.host.tsx b/packages/editor/src/index.host.tsx
@@ -7,8 +7,7 @@ import { Buffer } from "buffer";
 import * as mobx from "mobx";
 import * as monaco from "monaco-editor";
 import * as process from "process";
-import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import App from "./app/App";
 import { MATRIX_CONFIG } from "./config/config";
 import { validateHostDomain } from "./config/security";
@@ -78,13 +77,15 @@ async function init() {
   setupTypecellTypeResolver(monaco);
   setupNpmTypeResolver(monaco);
 
-  ReactDOM.render(
-    <React.StrictMode>
-      <MonacoContext.Provider value={{ monaco }}>
-        <App config={cachedValidatedConfig} />
-      </MonacoContext.Provider>
-    </React.StrictMode>,
-    document.getElementById("root")
+  const root = createRoot(document.getElementById("root")!);
+
+  root.render(
+    // TODO: support strictmode
+    // <React.StrictMode>
+    <MonacoContext.Provider value={{ monaco }}>
+      <App config={cachedValidatedConfig} />
+    </MonacoContext.Provider>
+    // </React.StrictMode>
   );
 }
 
diff --git a/packages/editor/src/index.iframe.tsx b/packages/editor/src/index.iframe.tsx
@@ -1,7 +1,7 @@
 import "@atlaskit/css-reset/dist/bundle.css";
 import React from "react";
-import ReactDOM from "react-dom";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { createRoot } from "react-dom/client";
 import * as reo from "react-error-overlay";
 import {
   getMainDomainFromIframe,
@@ -36,11 +36,11 @@ async function init() {
   if (!validateFrameDomain()) {
     throw new Error("invalid hostname for frame");
   }
-  ReactDOM.render(
+  const root = createRoot(document.getElementById("root")!);
+  root.render(
     <React.StrictMode>
       <Frame />
-    </React.StrictMode>,
-    document.getElementById("root")
+    </React.StrictMode>
   );
 }
 
diff --git a/packages/editor/src/runtime/executor/components/DefaultOutputVisualizer.tsx b/packages/editor/src/runtime/executor/components/DefaultOutputVisualizer.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import ObjectInspector from "react-inspector";
+import { ObjectInspector } from "react-inspector";
 import { ContainedElement } from "../../../util/ContainedElement";
 import RetryErrorBoundary from "../../../util/RetryErrorBoundary";
 
diff --git a/packages/editor/src/runtime/executor/components/Output.tsx b/packages/editor/src/runtime/executor/components/Output.tsx
@@ -1,7 +1,7 @@
 import { ObservableMap, toJS } from "mobx";
 import { observer } from "mobx-react-lite";
 import React, { useState } from "react";
-import ObjectInspector from "react-inspector";
+import { ObjectInspector } from "react-inspector";
 import { DefaultOutputVisualizer } from "./DefaultOutputVisualizer";
 import { ModelOutput } from "./ModelOutput";
 
diff --git a/packages/editor/src/runtime/executor/resolver/LocalResolver.ts b/packages/editor/src/runtime/executor/resolver/LocalResolver.ts
@@ -22,12 +22,16 @@ async function resolveNestedModule(id: string, mode?: string) {
     id === "react" &&
     (!mode ||
       mode === "imports/optimized/react.js" ||
-      mode === "es2021/react.js")
+      mode === "es2021/react.js" ||
+      mode === "es2022/react.js")
   ) {
     return react;
   }
 
-  if (id === "react" && mode === "imports/unoptimized/jsx-runtime.js") {
+  if (
+    (id === "react" && mode === "imports/unoptimized/jsx-runtime.js") ||
+    id === "react/jsx-runtime"
+  ) {
     return jsxruntime;
   }
 
diff --git a/packages/editor/src/util/ErrorBoundary.tsx b/packages/editor/src/util/ErrorBoundary.tsx
@@ -1,13 +1,13 @@
 import React from "react";
 
 export default class ErrorBoundary extends React.Component<
-  {},
+  { children: any },
   {
     error: any;
     hasError: boolean;
   }
 > {
-  constructor(props: {}) {
+  constructor(props: { children: any }) {
     super(props);
     this.state = { hasError: false, error: undefined };
   }
@@ -22,7 +22,7 @@ export default class ErrorBoundary extends React.Component<
     return this.state.hasError;
   }
 
-  componentDidCatch(error: any, errorInfo: any) {
+  componentDidCatch(_error: any, _errorInfo: any) {
     // You can also log the error to an error reporting service
     // logErrorToMyService(error, errorInfo);
   }
diff --git a/packages/editor/tests/end-to-end/collaboration/twoWay-public.spec.ts b/packages/editor/tests/end-to-end/collaboration/twoWay-public.spec.ts
@@ -24,7 +24,7 @@ test.beforeAll(async ({ aliceContext, bobContext }) => {
 
   // set notebook to public
   await pageAlice.click('[aria-label="open"]');
-  await pageAlice.pause();
+  // await pageAlice.pause();
   // pageAlice.locator("text=Anyone can view and edit >> visible=true")
   await pageAlice.click(
     "text=Anyone can view and edit >> visible=true >> nth=-1"
diff --git a/packages/editor/tests/end-to-end/login/login.spec.ts b/packages/editor/tests/end-to-end/login/login.spec.ts
@@ -21,7 +21,7 @@ test("Sign in by email", async ({ page, aliceUser, aliceContext }) => {
   // sign in by username instead of email
   await page.locator("text=Email address").click();
   await page.waitForTimeout(100);
-  await page.keyboard.press("ArrowUp");
+  // await page.keyboard.press("ArrowUp");
   await page.keyboard.press("ArrowUp");
   await page.keyboard.press("Enter");
 
diff --git a/packages/engine/package.json b/packages/engine/package.json
@@ -6,7 +6,7 @@
     "es-module-shims": "1.4.3",
     "lodash": "^4.17.21",
     "mobx": "^6.2.0",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "vscode-lib": "^0.1.2"
   },
   "devDependencies": {
@@ -15,7 +15,7 @@
     "@types/chai": "^4.3.0",
     "@types/mocha": "^9.1.0",
     "@types/lodash": "^4.14.182",
-    "@types/react": "^17.0.0",
+    "@types/react": "^18.0.25",
     "rimraf": "^3.0.2",
     "typescript": "4.3.2",
     "@playwright/test": "^1.18.1",
diff --git a/packages/engine/src/resolvers/cdns/ESMshResolver.ts b/packages/engine/src/resolvers/cdns/ESMshResolver.ts
@@ -6,22 +6,25 @@ export class ESMshResolver extends ExternalModuleResolver {
   public async getModuleInfoFromURL(url: string) {
     // https://cdn.esm.sh/v66/@tldraw/core@1.7.0/es2021/core.js
 
-    const prefix = "https://cdn.esm.sh/";
+    const prefix = "https://esm.sh/";
     if (url.startsWith(prefix)) {
       url = url.substring(prefix.length - 1);
       let mode: string | undefined;
-      let library = url.match(/^\/v\d+\/[^\/]+\.js$/);
+      let library = url.match(/^\/(v\d+|stable)\/[^\/]+\.js$/);
+
       if (library) {
         return undefined;
       }
-      let matches = url.match(/^\/v\d+\/(.*)@[.\d]+(-[-a-z\d.]+)?\/(.*)$/);
-      if (!matches || !matches[1]) {
+      let matches = url.match(
+        /^\/(v\d+|stable)\/(.*)@[.\d]+(-[-a-z\d.]+)?\/(.*)$/
+      );
+      if (!matches || !matches[2]) {
         throw new Error("couldn't match url");
       }
-      const matchedModuleName = matches[1];
+      const matchedModuleName = matches[2];
 
       // mode is necessary for jsx-runtime, e.g.: @yousef/use-p2
-      mode = matches[3];
+      mode = matches[4];
 
       return {
         module: matchedModuleName,
diff --git a/packages/packager/package.json b/packages/packager/package.json
@@ -9,7 +9,7 @@
     "es-module-shims": "1.4.3",
     "lodash": "^4.17.21",
     "mobx": "^6.2.0",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "vscode-lib": "^0.1.2",
     "fast-glob": "^3.2.12"
   },
@@ -20,7 +20,7 @@
     "@types/chai": "^4.3.0",
     "@types/mocha": "^9.1.0",
     "@types/lodash": "^4.14.182",
-    "@types/react": "^17.0.0",
+    "@types/react": "^18.0.25",
     "rimraf": "^3.0.2",
     "typescript": "4.3.2",
     "@playwright/test": "^1.18.1",
diff --git a/packages/packager/src/generate/generate.test.ts b/packages/packager/src/generate/generate.test.ts
@@ -30,7 +30,7 @@ describe(
           fs.rmSync(dest, { recursive: true, force: true });
         }
         // fs.removeSync.rmdirSync(dest, {})
-
+        console.log("createProjectFromMarkdown", dest);
         await createProjectFromMarkdown(name, data, dest);
       });
     });
diff --git a/packages/packager/src/generate/generate.ts b/packages/packager/src/generate/generate.ts
@@ -271,9 +271,10 @@ export async function createProject(
   }
 
   // copy files
+  console.log("source dir", SOURCE_DIR);
+  console.log("create dir", projectDir);
   fs.mkdirSync(projectDir);
   fs.cpSync(SOURCE_DIR, projectDir, { recursive: true });
-  console.log(SOURCE_DIR);
 
   // generate src-notebook directory from document
   const cells = cellsWithId(tcDocument.cells);
diff --git a/packages/packager/template/package.json b/packages/packager/template/package.json
@@ -14,16 +14,16 @@
   },
   "dependencies": {
     "@typecell-org/engine": "file:../../../engine",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "mobx-react-lite": "^3.2.0",
     "mobx": "^6.2.0",
     "vscode-lib": "^0.1.2",
-    "react-inspector": "^5.1.0"
+    "react-inspector": "^6.0.1"
   },
   "devDependencies": {
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^2.2.0",
     "typescript": "^4.6.4",
     "vite": "^3.2.0",
diff --git a/packages/packager/template/src/components/DefaultOutputVisualizer.tsx b/packages/packager/template/src/components/DefaultOutputVisualizer.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import ObjectInspector from "react-inspector";
+import { ObjectInspector } from "react-inspector";
 import { ContainedElement } from "./ContainedElement";
 import RetryErrorBoundary from "./RetryErrorBoundary";
 
diff --git a/packages/packager/template/src/components/ErrorBoundary.tsx b/packages/packager/template/src/components/ErrorBoundary.tsx
diff --git a/packages/packager/template/src/components/Output.tsx b/packages/packager/template/src/components/Output.tsx
diff --git a/packages/packager/template/src/main.tsx b/packages/packager/template/src/main.tsx
diff --git a/packages/parsers/package.json b/packages/parsers/package.json
