chore(dependencies): Upgrade beta app dependencies - react to 18 and nx to 17 (#1321)

This PR upgrades some dependencies including react from 17 -> 18 (and
all necessary dependencies like react-dom and react-test-runner) as well
as upgrading the `nx` monorepo setup from 15.5.3 -> 17.0.3 using their
migration tool:

`YARN_NODE_LINKER="node-modules" npx nx migrate latest && npx nx migrate
--run-migrations`

I also added `"esModuleInterop": true` to all the package typescript
configurations in an attempt to modernize the typescript setup. This
then required me to change all `import * as Whatever from 'whatever'`
import statements to `import Whatever from 'whatever'`

Author: markrickert

.gitignore

@@ -65,4 +65,5 @@ TODO
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions
+.nx/cache

.prettierignore

@@ -7,3 +7,5 @@
 **/package.json
 **/release
 CHANGELOG.md
+
+/.nx/cache

apps/reactotron-app/package.json

@@ -51,18 +51,18 @@
     }
   },
   "dependencies": {
-    "electron-log": "^4.4.8",
+    "electron-log": "^5.0.0",
     "electron-store": "^8.1.0",
-    "electron-updater": "^6.1.5",
+    "electron-updater": "^6.1.7",
     "electron-window-state": "^5.0.3",
     "immer": "^10.0.3",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-hotkeys": "^2.0.0",
     "react-icons": "^4.11.0",
     "react-modal": "3.16.1",
     "react-motion": "0.5.2",
-    "react-router-dom": "^6.16.0",
+    "react-router-dom": "^6.18.0",
     "react-tooltip": "4.5.1",
     "reactotron-core-contract": "workspace:*",
     "reactotron-core-server": "workspace:*",
@@ -82,14 +82,14 @@
     "@storybook/addons": "^5.2.8",
     "@storybook/react": "^5.2.8",
     "@testing-library/react-hooks": "^8.0.1",
-    "@types/jest": "^29.5.5",
-    "@types/react": "17.0.65",
-    "@types/react-dom": "17.0.20",
+    "@types/jest": "^29.5.7",
+    "@types/react": "18.2.35",
+    "@types/react-dom": "18.2.14",
     "@typescript-eslint/eslint-plugin": "^6.7.5",
     "@typescript-eslint/parser": "^6.7.5",
     "babel-loader": "^8.3.0",
-    "electron": "26.4.0",
-    "electron-builder": "^24.7.0",
+    "electron": "27.0.3",
+    "electron-builder": "^24.8.1",
     "electron-webpack": "2.8.2",
     "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
@@ -104,7 +104,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "mime": "^3.0.0",
     "prettier": "^3.0.3",
-    "react-test-renderer": "17.0.2",
+    "react-test-renderer": "18.2.0",
     "rimraf": "^5.0.5",
     "ts-jest": "^29.1.1",
     "typescript": "^4.9.5"

apps/reactotron-app/project.json

@@ -1,5 +1,6 @@
 {
   "name": "reactotron-app",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "targets": {
     "version": {
       "executor": "@jscutlery/semver:version",

apps/reactotron-app/src/main/index.ts

@@ -1,5 +1,5 @@
 import { app, BrowserWindow } from "electron"
-import * as path from "path"
+import path from "path"
 import { format as formatUrl } from "url"
 import log from "electron-log"
 import { autoUpdater } from "electron-updater"

apps/reactotron-app/src/renderer/ReactotronBrain.tsx

@@ -1,5 +1,5 @@
 // TODO: Name this better...
-import React, { FunctionComponent } from "react"
+import React, { FunctionComponent, PropsWithChildren } from "react"
 import { Command } from "reactotron-core-contract"
 import {
   ReactotronProvider,
@@ -19,7 +19,7 @@ interface Props {
 }
 
 /** Wrapper for Reactotron context providers */
-const ReactotronBrain: FunctionComponent<Props> = ({
+const ReactotronBrain: FunctionComponent<PropsWithChildren<Props>> = ({
   commands,
   sendCommand,
   clearCommands,

apps/reactotron-app/src/renderer/index.tsx

@@ -1,17 +1,17 @@
 import "v8-compile-cache"
 import React from "react"
-import { render } from "react-dom"
+import { createRoot } from "react-dom/client"
 import { ReactotronAppProvider } from "reactotron-core-ui"
 
 import "./global.css"
 
 import App from "./App"
 
-render(
+const root = createRoot(document.getElementById("app"))
+root.render(
   <ReactotronAppProvider>
     <App />
-  </ReactotronAppProvider>,
-  document.getElementById("app")
+  </ReactotronAppProvider>
 )
 
 if ((module as any).hot) {

lib/reactotron-apisauce/package.json

@@ -43,9 +43,9 @@
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/preset-env": "^7.23.2",
     "@babel/preset-typescript": "^7.23.2",
-    "@types/jest": "^29.5.5",
+    "@types/jest": "^29.5.7",
     "@types/json-server": "^0.14.0",
-    "@types/node": "^11.9.5",
+    "@types/node": "^18.18.8",
     "@typescript-eslint/eslint-plugin": "^6.7.5",
     "@typescript-eslint/parser": "^6.7.5",
     "babel-jest": "^29.7.0",

lib/reactotron-apisauce/project.json

@@ -1,5 +1,6 @@
 {
   "name": "reactotron-apisauce",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "targets": {
     "version": {
       "executor": "@jscutlery/semver:version",

lib/reactotron-apisauce/test/plugin.test.ts

@@ -1,4 +1,4 @@
-import * as jsonServer from "json-server"
+import jsonServer from "json-server"
 import apisauce from "apisauce"
 import createPlugin from "../src/index"
 

lib/reactotron-apisauce/tsconfig.json

@@ -16,8 +16,9 @@
     "noImplicitThis": true,
     "noUnusedLocals": true,
     "sourceMap": true,
-    "target": "es5"
+    "target": "es5",
+    "esModuleInterop": true
   },
   "exclude": ["node_modules"],
-  "include": ["src"]
+  "include": ["src", "test"]
 }

lib/reactotron-core-client/package.json

@@ -39,9 +39,9 @@
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/preset-env": "^7.23.2",
     "@babel/preset-typescript": "^7.23.2",
-    "@types/jest": "^29.5.5",
-    "@types/node": "14.17.11",
-    "@types/ws": "^8.5.7",
+    "@types/jest": "^29.5.7",
+    "@types/node": "^18.18.8",
+    "@types/ws": "^8.5.8",
     "@typescript-eslint/eslint-plugin": "^6.7.5",
     "@typescript-eslint/parser": "^6.7.5",
     "babel-eslint": "^10.1.0",

lib/reactotron-core-client/project.json

@@ -1,5 +1,6 @@
 {
   "name": "reactotron-core-client",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "targets": {
     "version": {
       "executor": "@jscutlery/semver:version",

lib/reactotron-core-client/src/client-options.ts

@@ -1,5 +1,5 @@
 import type { LifeCycleMethods, PluginCreator } from "./reactotron-core-client"
-import * as NodeWebSocket from "ws"
+import NodeWebSocket from "ws"
 
 type BrowserWebSocket = WebSocket
 

lib/reactotron-core-client/src/reactotron-core-client.ts

@@ -1,4 +1,4 @@
-import * as WebSocket from "ws"
+import WebSocket from "ws"
 import { Command, CommandTypeKey } from "reactotron-core-contract"
 import validate from "./validate"
 import logger from "./plugins/logger"

lib/reactotron-core-client/test/api-response.test.ts

@@ -1,6 +1,6 @@
 import { createClient, corePlugins } from "../src/reactotron-core-client"
 import plugin from "../src/plugins/state-responses"
-import * as WebSocket from "ws"
+import WebSocket from "ws"
 
 const createSocket = (path: string) => new WebSocket(path)
 

lib/reactotron-core-client/test/configure.test.ts

@@ -1,5 +1,5 @@
 import { createClient } from "../src/reactotron-core-client"
-import * as WebSocket from "ws"
+import WebSocket from "ws"
 
 const createSocket = (path) => new WebSocket(path)
 

lib/reactotron-core-client/test/connect.test.ts

@@ -1,6 +1,6 @@
 import { createClient } from "../src/reactotron-core-client"
-import * as WebSocket from "ws"
-import * as getPort from "get-port"
+import WebSocket from "ws"
+import getPort from "get-port"
 import { createClosingServer } from "./create-closing-server"
 
 const createSocket = (path) => new WebSocket(path)

lib/reactotron-core-client/test/create-closing-server.ts

@@ -1,4 +1,4 @@
-import * as WebSocket from "ws"
+import WebSocket from "ws"
 
 /**
  * A server which shuts down after somebody connects.

lib/reactotron-core-client/test/on-command.test.ts

@@ -1,6 +1,6 @@
 import { createClient } from "../src/reactotron-core-client"
-import * as WebSocket from "ws"
-import * as getPort from "get-port"
+import WebSocket from "ws"
+import getPort from "get-port"
 
 const createSocket = (path) => new WebSocket(path)
 

lib/reactotron-core-client/test/on-connect.test.ts

@@ -1,6 +1,6 @@
 import { createClient } from "../src/reactotron-core-client"
-import * as WebSocket from "ws"
-import * as getPort from "get-port"
+import WebSocket from "ws"
+import getPort from "get-port"
 import { createClosingServer } from "./create-closing-server"
 
 const createSocket = (path) => new WebSocket(path)

lib/reactotron-core-client/test/on-disconnect.test.ts

@@ -1,6 +1,6 @@
 import { createClient } from "../src/reactotron-core-client"
-import * as WebSocket from "ws"
-import * as getPort from "get-port"
+import WebSocket from "ws"
+import getPort from "get-port"
 import { createClosingServer } from "./create-closing-server"
 
 const createSocket = (path: string) => new WebSocket(path)

lib/reactotron-core-client/test/plugin-benchmark.test.ts

@@ -1,6 +1,6 @@
 import { createClient, corePlugins } from "../src/reactotron-core-client"
 import plugin from "../src/plugins/benchmark"
-import * as WebSocket from "ws"
+import WebSocket from "ws"
 
 const createSocket = (path: string) => new WebSocket(path)
 

lib/reactotron-core-client/test/plugin-clear.test.ts

@@ -1,6 +1,6 @@
 import { createClient, corePlugins } from "../src/reactotron-core-client"
 import plugin from "../src/plugins/clear"
-import * as WebSocket from "ws"
+import WebSocket from "ws"
 
 const createSocket = (path) => new WebSocket(path)
 

lib/reactotron-core-client/test/plugin-features.test.ts

@@ -1,5 +1,5 @@
 import { createClient } from "../src/reactotron-core-client"
-import * as WebSocket from "ws"
+import WebSocket from "ws"
 
 const createSocket = (path) => new WebSocket(path)
 

lib/reactotron-core-client/test/plugin-image.test.ts

@@ -1,6 +1,6 @@
 import { createClient, corePlugins } from "../src/reactotron-core-client"
 import plugin from "../src/plugins/image"
-import * as WebSocket from "ws"
+import WebSocket from "ws"
 
 const createSocket = (path: string) => new WebSocket(path)
 

lib/reactotron-core-client/test/plugin-interface.test.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { createClient, corePlugins, ReactotronCore } from "../src/reactotron-core-client"
-import * as WebSocket from "ws"
+import WebSocket from "ws"
 
 const createSocket = (path) => new WebSocket(path)
 

lib/reactotron-core-client/test/plugin-logger.test.ts

@@ -1,6 +1,6 @@
 import { createClient, corePlugins } from "../src/reactotron-core-client"
 import plugin from "../src/plugins/logger"
-import * as WebSocket from "ws"
+import WebSocket from "ws"
 
 const createSocket = (path) => new WebSocket(path)
 

lib/reactotron-core-client/test/plugin-on-command.test.ts

@@ -1,6 +1,6 @@
 import { createClient } from "../src/reactotron-core-client"
-import * as WebSocket from "ws"
-import * as getPort from "get-port"
+import WebSocket from "ws"
+import getPort from "get-port"
 
 const createSocket = (path) => new WebSocket(path)
 const mock = { type: "type", payload: "payload" }

lib/reactotron-core-client/test/plugin-on-connect.test.ts

@@ -1,6 +1,6 @@
 import { createClient } from "../src/reactotron-core-client"
-import * as WebSocket from "ws"
-import * as getPort from "get-port"
+import WebSocket from "ws"
+import getPort from "get-port"
 
 const createSocket = (path) => new WebSocket(path)
 

lib/reactotron-core-client/test/plugin-on-disconnect.test.ts

@@ -1,6 +1,6 @@
 import { Plugin, ReactotronCore, createClient } from "../src/reactotron-core-client"
-import * as WebSocket from "ws"
-import * as getPort from "get-port"
+import WebSocket from "ws"
+import getPort from "get-port"
 import { createClosingServer } from "./create-closing-server"
 
 const createSocket = (path: string) => new WebSocket(path)

lib/reactotron-core-client/test/plugin-on-plugin.test.ts

@@ -1,5 +1,5 @@
 import { createClient } from "../src/reactotron-core-client"
-import * as WebSocket from "ws"
+import WebSocket from "ws"
 
 const createSocket = (path) => new WebSocket(path)
 

lib/reactotron-core-client/test/plugin-send.test.ts

@@ -1,6 +1,6 @@
 import { ReactotronCore, createClient } from "../src/reactotron-core-client"
-import * as WebSocket from "ws"
-import * as getPort from "get-port"
+import WebSocket from "ws"
+import getPort from "get-port"
 import { PluginCreator } from "reactotron-core-client"
 
 const createSocket = (path) => new WebSocket(path)

lib/reactotron-core-client/test/plugin-state-responses.test.ts

@@ -1,6 +1,6 @@
 import { createClient, corePlugins } from "../src/reactotron-core-client"
 import plugin from "../src/plugins/api-response"
-import * as WebSocket from "ws"
+import WebSocket from "ws"
 
 const createSocket = (path) => new WebSocket(path)
 

lib/reactotron-core-client/test/send.test.ts

@@ -1,6 +1,6 @@
 import { createClient } from "../src/reactotron-core-client"
-import * as WebSocket from "ws"
-import * as getPort from "get-port"
+import WebSocket from "ws"
+import getPort from "get-port"
 
 const createSocket = (path) => new WebSocket(path)
 

lib/reactotron-core-client/test/start-timer.test.ts

@@ -1,5 +1,5 @@
 import { createClient } from "../src/reactotron-core-client"
-import * as WebSocket from "ws"
+import WebSocket from "ws"
 
 const createSocket = (path) => new WebSocket(path)
 

lib/reactotron-core-client/tsconfig.json

@@ -16,7 +16,8 @@
     "noImplicitThis": true,
     "noUnusedLocals": true,
     "sourceMap": true,
-    "target": "es5"
+    "target": "es5",
+    "esModuleInterop": true
   },
   "exclude": ["node_modules"],
   "include": ["src"]

lib/reactotron-core-contract/package.json

@@ -39,9 +39,9 @@
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/preset-env": "^7.23.2",
     "@babel/preset-typescript": "^7.23.2",
-    "@types/jest": "^29.5.5",
-    "@types/node": "14.17.11",
-    "@types/ws": "^8.5.7",
+    "@types/jest": "^29.5.7",
+    "@types/node": "^18.18.8",
+    "@types/ws": "^8.5.8",
     "@typescript-eslint/eslint-plugin": "^6.7.5",
     "@typescript-eslint/parser": "^6.7.5",
     "babel-eslint": "^10.1.0",

lib/reactotron-core-contract/project.json

@@ -1,5 +1,6 @@
 {
   "name": "reactotron-core-contract",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "targets": {
     "version": {
       "executor": "@jscutlery/semver:version"

lib/reactotron-core-contract/src/server-events.ts

@@ -1,4 +1,4 @@
-import * as WebSocket from "ws"
+import WebSocket from "ws"
 import { Command } from "./command"
 
 export interface PfxServerOptions {