chore: update to react 18

Bumping to React 18 required only a few small updates to new/updated React APIs (instead of `react-dom.render()`, it is now `react-dom.createRoot().render()`. However, their updates to the rendering stack exposed a small number of long-term race conditions in the kui code base. Thus, this PR had to clean those up.

BREAKING CHANGE: `at-kui-shell/react` will now pull in react v18.

BREAKING CHANGE: we now pre-allocate execUUID on when the block is first mounted (these are known as Active blocks, because they have an active input). Previously, we relied on kui core/repl/exec to allocate upon run. This leads to a race condition, where command handlers expect to be able to communicate with the views based on an execUUID... but the views may not be mounted before the command handlers start... An example of this was the PTY. pty/client in plugin-bash-like sends pty streaming output ... the Output component (in plugin-client-common) is supposed to be the receiver, but it only listens after it is mounted). With this PR, we pre-allocate the execUUID, and mount the Output block even on Active blocks.

Author: starpit

package-lock.json

@@ -91,8 +91,8 @@
     "@types/needle": "2.5.3",
     "@types/node": "18.11.9",
     "@types/pluralize": "0.0.29",
-    "@types/react": "17.0.43",
-    "@types/react-dom": "17.0.14",
+    "@types/react": "18.0.25",
+    "@types/react-dom": "18.0.9",
     "@types/resize-observer-browser": "0.1.7",
     "@types/shelljs": "0.8.11",
     "@types/tmp": "0.2.3",
@@ -123,8 +123,6 @@
     "nan": "github:jkleinsc/nan#6a2f95a6a2209d8aa7542fb18099fd808a802059",
     "prettier": "2.8.0",
     "properties-parser": "0.3.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
     "tmp": "0.2.1",
     "typedoc": "0.23.21",
     "typedoc-plugin-markdown": "3.13.6",

package.json

@@ -612,12 +612,13 @@ export const exec = (commandUntrimmed: string, execOptions = emptyExecOptions())
  * @param execUUID for command re-execution
  *
  */
-export const doEval = (_tab: Tab, block: Block, command: string, execUUID?: string) => {
+export const doEval = (_tab: Tab, block: Block, command: string, execUUID?: string, type?: ExecType) => {
   const tab = splitFor(_tab)
   const defaultExecOptions = new DefaultExecOptionsForTab(tab, block, execUUID)
-  const execOptions: ExecOptions = !execUUID
-    ? defaultExecOptions
-    : Object.assign(defaultExecOptions, { type: ExecType.Rerun })
+  const execOptions: ExecOptions =
+    execUUID === undefined && type === undefined
+      ? defaultExecOptions
+      : Object.assign(defaultExecOptions, { execUUID, type: type === undefined ? ExecType.Rerun : type })
 
   return exec(command, execOptions)
 }

packages/core/src/repl/exec.ts

@@ -16,8 +16,8 @@
     "url": "git+https://github.com/IBM/kui.git"
   },
   "dependencies": {
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "publishConfig": {
     "access": "public"

packages/react/package.json

@@ -21,7 +21,7 @@ declare let __webpack_nonce__: string
 __webpack_nonce__ = _kuiNonce
 
 import React from 'react'
-import { render as ReactDomRender } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import Client from '@kui-shell/client'
 
@@ -39,16 +39,17 @@ function renderMain(
 ) {
   // re: noBootstrap; since we do the bootstrapping here, we don't
   // need the Client to do anything more
-  ReactDomRender(
+  const root = createRoot(container)
+
+  root.render(
     <Client
       noBootstrap
       isPopup={isPopup}
       commandLine={commandLine}
       title={title}
       initialTabTitle={initialTabTitle}
       quietExecCommand={quietExecCommand}
-    />,
-    container
+    />
   )
 }
 

packages/react/src/index.tsx

@@ -30,7 +30,7 @@
     "anser": "2.1.1",
     "ansi-regex": "6.0.1",
     "html-entities": "2.3.3",
-    "madwizard": ">=1.9.1",
+    "madwizard": "^2.0.4",
     "monaco-editor": "0.34.1",
     "monaco-editor-webpack-plugin": "7.0.1",
     "react-markdown": "8.0.3",