upgrade react, react-dom, @types/react, @types/react-dom and fixes

lowcoder-org · FalkWolsky · Dec 27, 2023 · Dec 20, 2023 · Dec 20, 2023 · Dec 20, 2023
commit ea12bc543aacfe3e409367af716fc279e3bce2a4
diff --git a/client/package.json b/client/package.json
@@ -63,7 +63,7 @@
   },
   "packageManager": "yarn@3.6.4",
   "resolutions": {
-    "@types/react": "^17",
+    "@types/react": "^18",
     "moment": "2.29.2",
     "canvas": "https://registry.yarnpkg.com/@favware/skip-dependency/-/skip-dependency-1.2.1.tgz",
     "react-virtualized@^9.22.3": "patch:react-virtualized@npm%3A9.22.3#./.yarn/patches/react-virtualized-npm-9.22.3-0fff3cbf64.patch",

diff --git a/client/packages/lowcoder-cli-template-typescript/index.tsx b/client/packages/lowcoder-cli-template-typescript/index.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { CompIDE } from "lowcoder-sdk";
 import { name, version, lowcoder } from "./package.json";
 import compMap from "./src/index";
@@ -16,4 +16,6 @@ function CompDevApp() {
   );
 }
 
-ReactDOM.render(<CompDevApp />, document.querySelector("#root"));
+const container = document.querySelector("#root");
+const root = createRoot(container!);
+root.render(<CompDevApp />);
diff --git a/client/packages/lowcoder-cli/package.json b/client/packages/lowcoder-cli/package.json
@@ -29,8 +29,8 @@
     "commander": "^9.4.1",
     "cross-spawn": "^7.0.3",
     "fs-extra": "^10.1.0",
-    "react": "^17",
-    "react-dom": "^17",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-json-view": "^1.21.3",
     "rollup-plugin-external-globals": "^0.7.1",
     "vite": "^4.3.9",

diff --git a/client/packages/lowcoder-comps/index.tsx b/client/packages/lowcoder-comps/index.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { CompIDE } from "lowcoder-sdk";
 import { name, version, lowcoder } from "./package.json";
 import compMap from "./src/index";
@@ -16,4 +16,6 @@ function CompDevApp() {
   );
 }
 
-ReactDOM.render(<CompDevApp />, document.querySelector("#root"));
+const container = document.querySelector("#root");
+const root = createRoot(container!);
+root.render(<CompDevApp />);
diff --git a/client/packages/lowcoder-comps/package.json b/client/packages/lowcoder-comps/package.json
@@ -11,16 +11,16 @@
     "@fullcalendar/moment": "^6.1.6",
     "@fullcalendar/react": "^6.1.6",
     "@fullcalendar/timegrid": "^6.1.6",
-    "@types/react": "17",
-    "@types/react-dom": "17",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
     "big.js": "^6.2.1",
     "echarts-extension-gmap": "^1.6.0",
     "echarts-wordcloud": "^2.1.0",
     "lowcoder-cli": "workspace:^",
     "lowcoder-sdk": "workspace:^",
     "mermaid": "^10.6.1",
-    "react": "17",
-    "react-dom": "17",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "4.8.4"
   },
   "lowcoder": {

diff --git a/client/packages/lowcoder-core/lib/index.d.ts b/client/packages/lowcoder-core/lib/index.d.ts
@@ -664,7 +664,7 @@ declare class Translator<Messages extends object> {
     readonly language: string;
     constructor(fileData: object, filterLocales?: string, locales?: string[]);
     trans(key: NestedKey<Messages> | GlobalMessageKey, variables?: Record<string, VariableValue>): string;
-    transToNode(key: NestedKey<Messages> | GlobalMessageKey, variables?: Record<string, VariableValue>): {};
+    transToNode(key: NestedKey<Messages> | GlobalMessageKey, variables?: Record<string, VariableValue>): ReactNode;
     private getMessage;
 }
 declare function getI18nObjects<I18nObjects>(fileData: object, filterLocales?: string): I18nObjects;

diff --git a/client/packages/lowcoder-design/src/components/CustomModal.tsx b/client/packages/lowcoder-design/src/components/CustomModal.tsx
@@ -218,24 +218,26 @@ function CustomModalRender(props: CustomModalProps & ModalFuncProps) {
   return (
     <Draggable handle=".handle" disabled={!props.draggable}>
       <ModalWrapper width={props.width}>
-        <ModalHeaderWrapper className="handle" $draggable={props.draggable}>
-          <ModalHeader
-            title={props.title}
-            onCancel={props.onCancel}
-            showBackLink={props.showBackLink}
-            onBack={props.onBack}
-          />
-        </ModalHeaderWrapper>
+        <>
+          <ModalHeaderWrapper className="handle" $draggable={props.draggable}>
+            <ModalHeader
+              title={props.title}
+              onCancel={props.onCancel}
+              showBackLink={props.showBackLink}
+              onBack={props.onBack}
+            />
+          </ModalHeaderWrapper>
 
-        <div style={{ padding: "0 16px", ...props.styles?.body }}>{props.children}</div>
+          <div style={{ padding: "0 16px", ...props.styles?.body }}>{props.children}</div>
 
-        {props.footer === null || props.footer ? (
-          props.footer
-        ) : (
-          <ModalFooterWrapper>
-            <ModalFooter {...props} />
-          </ModalFooterWrapper>
-        )}
+          {props.footer === null || props.footer ? (
+            props.footer
+          ) : (
+            <ModalFooterWrapper>
+              <ModalFooter {...props} />
+            </ModalFooterWrapper>
+          )}
+        </>
       </ModalWrapper>
     </Draggable>
   );

diff --git a/client/packages/lowcoder-design/src/components/toolTip.tsx b/client/packages/lowcoder-design/src/components/toolTip.tsx
@@ -180,7 +180,7 @@ function ToolTipLabel(
   return (
     <AntdTooltip
       color="#2c2c2c"
-      title={title && <TooltipTitleWrapper>{title}</TooltipTitleWrapper>}
+      title={title && <TooltipTitleWrapper><>{title}</></TooltipTitleWrapper>}
       overlayInnerStyle={{ maxWidth: "232px", whiteSpace: "break-spaces" }}
       arrow={{
         pointAtCenter: true

diff --git a/client/packages/lowcoder-plugin-demo/index.tsx b/client/packages/lowcoder-plugin-demo/index.tsx
@@ -1,4 +1,4 @@
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { CompIDE } from "lowcoder-sdk";
 import { name, version, lowcoder } from "./package.json";
 import compMap from "./src/index";
@@ -16,4 +16,6 @@ function CompDevApp() {
   );
 }
 
-ReactDOM.render(<CompDevApp />, document.querySelector("#root"));
+const container = document.querySelector("#root");
+const root = createRoot(container!);
+root.render(<CompDevApp />);
diff --git a/client/packages/lowcoder-plugin-demo/package.json b/client/packages/lowcoder-plugin-demo/package.json
@@ -6,8 +6,8 @@
   "dependencies": {
     "lowcoder-core": "^0.0.1",
     "lowcoder-design": "^0.0.1",
-    "react": "17",
-    "react-dom": "17"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.com"
@@ -30,8 +30,8 @@
     "build": "lowcoder-cli build"
   },
   "devDependencies": {
-    "@types/react": "17",
-    "@types/react-dom": "17",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
     "lowcoder-cli": "workspace:^",
     "lowcoder-sdk": "workspace:^",
     "typescript": "4.8.4",

diff --git a/client/packages/lowcoder-sdk/package.json b/client/packages/lowcoder-sdk/package.json
@@ -48,8 +48,8 @@
     "vite-tsconfig-paths": "^3.6.0"
   },
   "peerDependencies": {
-    "react": ">=17",
-    "react-dom": ">=17"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "keywords": [
     "lowcoder"

diff --git a/client/packages/lowcoder/package.json b/client/packages/lowcoder/package.json
@@ -30,8 +30,8 @@
     "@rjsf/validator-ajv8": "^5.10.0",
     "@types/lodash": "^4.14.194",
     "@types/node": "^16.7.13",
-    "@types/react": "^17.0.20",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
     "@types/react-signature-canvas": "^1.0.2",
     "@types/react-test-renderer": "^18.0.0",
     "@types/react-virtualized": "^9.21.21",
@@ -63,10 +63,10 @@
     "papaparse": "^5.3.2",
     "qrcode.react": "^3.1.0",
     "rc-trigger": "^5.3.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-colorful": "^5.5.1",
     "react-documents": "^1.2.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-draggable": "^4.4.4",
     "react-grid-layout": "^1.3.0",
     "react-helmet": "^6.1.0",

diff --git a/client/packages/lowcoder/src/app.tsx b/client/packages/lowcoder/src/app.tsx
@@ -21,7 +21,7 @@ import {
   USER_AUTH_URL,
 } from "constants/routesURL";
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { Helmet } from "react-helmet";
 import { connect, Provider } from "react-redux";
 import { Redirect, Route, Router, Switch } from "react-router-dom";
@@ -187,10 +187,11 @@ const AppIndexWithProps = connect(mapStateToProps, mapDispatchToProps)(AppIndex)
 export function bootstrap() {
   initApp();
   loadComps();
-  ReactDOM.render(
+  const container = document.getElementById("root");
+  const root = createRoot(container!);
+  root.render(
     <Provider store={reduxStore}>
       <AppIndexWithProps />
-    </Provider>,
-    document.getElementById("root")
+    </Provider>
   );
 }
diff --git a/client/packages/lowcoder/src/appView/AppViewInstance.tsx b/client/packages/lowcoder/src/appView/AppViewInstance.tsx
@@ -4,7 +4,7 @@ import { RootComp } from "comps/comps/rootComp";
 import { setGlobalSettings } from "comps/utils/globalSettings";
 import { sdkConfig } from "constants/sdkConfig";
 import _ from "lodash";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { StyleSheetManager } from "styled-components";
 import { ModuleDSL, ModuleDSLIoInput } from "types/dsl";
 import { AppView } from "./AppView";
@@ -137,7 +137,8 @@ export class AppViewInstance<I = any, O = any> {
 
   private async render() {
     const data = await this.dataPromise;
-    ReactDOM.render(
+    const root = createRoot(this.node);
+    root.render(
       <StyleSheetManager target={this.node as HTMLElement}>
         <AppView
           appId={this.appId}
@@ -147,8 +148,7 @@ export class AppViewInstance<I = any, O = any> {
           onCompChange={(comp) => this.handleCompChange(comp)}
           onModuleEventTriggered={(eventName) => this.emit("moduleEventTriggered", [eventName])}
         />
-      </StyleSheetManager>,
-      this.node
+      </StyleSheetManager>
     );
   }
 

diff --git a/client/packages/lowcoder/src/base/codeEditor/extensions/iconExtension.tsx b/client/packages/lowcoder/src/base/codeEditor/extensions/iconExtension.tsx
@@ -8,7 +8,7 @@ import {
   WidgetType,
 } from "@codemirror/view";
 import { useIcon } from "lowcoder-design";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import styled from "styled-components";
 
 const IconContainer = styled.div`
@@ -47,7 +47,8 @@ class IconWidget extends WidgetType {
 
   toDOM() {
     let wrap = document.createElement("span");
-    ReactDOM.render(<IconElement value={this.value} />, wrap);
+    const root = createRoot(wrap);
+    root.render(<IconElement value={this.value} />);
     return wrap;
   }
 

diff --git a/client/packages/lowcoder/src/comps/comps/containerBase/containerCompBuilder.tsx b/client/packages/lowcoder/src/comps/comps/containerBase/containerCompBuilder.tsx
@@ -12,6 +12,7 @@ import { NameGenerator } from "comps/utils";
 import { IContainer } from "./iContainer";
 import { SimpleContainerComp } from "./simpleContainerComp";
 import { CompTree, oldContainerParamsToNew } from "./utils";
+import { ReactNode } from "react";
 
 // type UiChildren<ChildrenCompMap extends Record<string, Comp<unknown>>> = ChildrenCompMap;
 
@@ -56,7 +57,7 @@ export class ContainerCompBuilder<
     }
     const newChildrenMap = containerChildren(this.childrenMap);
     const TmpComp = new UICompBuilder(newChildrenMap, (props, dispatch) => {
-      return this.viewFn(props as any, dispatch);
+      return this.viewFn(props as any, dispatch) as ReactNode;
     })
       .setPropertyViewFn(this.propertyViewFn as any)
       .build();

diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx
@@ -356,7 +356,9 @@ export function InnerGrid(props: ViewPropsWithSelect) {
 
   const dispatchPositionParamsTimerRef = useRef(0);
   const onResize = useCallback(
-    (width, height) => {
+    (width?: number, height?: number) => {
+      if(!width || !height) return;
+
       if (width !== positionParams.containerWidth) {
         const newPositionParams: PositionParams = {
           margin: [0, 0],
@@ -426,7 +428,10 @@ export function InnerGrid(props: ViewPropsWithSelect) {
   }, [props.items]);
 
   const clickItem = useCallback(
-    (e, name) => selectItem(e, name, canAddSelect, containerSelectNames, setSelectedNames),
+    (
+      e: React.MouseEvent<HTMLDivElement,
+      globalThis.MouseEvent>, name: string
+    ) => selectItem(e, name, canAddSelect, containerSelectNames, setSelectedNames),
     [canAddSelect, containerSelectNames, setSelectedNames]
   );
 

diff --git a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
@@ -60,7 +60,8 @@ const defaultCode = `
 
   const ConnectedComponent = ${trans("customComp.sdkGlobalVarName")}.connect(MyCustomComponent);
 
-  const root = ReactDOM.createRoot(document.getElementById("root"));
+  const container = document.getElementById("root");
+  const root = createRoot(container);
   root.render(<ConnectedComponent />);
 
   </script>

diff --git a/client/packages/lowcoder/src/comps/comps/formComp/createForm.tsx b/client/packages/lowcoder/src/comps/comps/formComp/createForm.tsx
@@ -421,7 +421,10 @@ const CustomEditText = (props: {
 
 const DragHandle = SortableHandle(() => <StyledDragIcon />);
 
-const SortableItem = SortableElement((props: { item: RowItem; form: FormInstance }) => {
+const SortableItem = SortableElement<{
+  item: RowItem,
+  form: FormInstance,
+}>((props: { item: RowItem; form: FormInstance }) => {
   const { item, form } = props;
   const { columnName, columnType, compItems } = item;
   const disabled = !Form.useWatch(["columns", columnName, "enabled"], form);
@@ -474,12 +477,22 @@ const SortableItem = SortableElement((props: { item: RowItem; form: FormInstance
   );
 });
 
-const SortableBody = SortableContainer((props: { items: RowItem[]; form: FormInstance }) => {
+const SortableBody = SortableContainer<{
+  items: RowItem[],
+  form: FormInstance,
+}>((props: { items: RowItem[]; form: FormInstance }) => {
   return (
     <DataBody>
       {props.items.map((t, index) => {
         // Use the column name as the key here to ensure that the useState is correct when dragging
-        return <SortableItem key={t.columnName} index={index} item={t} form={props.form} />;
+        return (
+          <SortableItem
+            key={t.columnName}
+            index={index}
+            item={t}
+            form={props.form} 
+          />
+        );
       })}
     </DataBody>
   );

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/selectionControl.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/selectionControl.tsx
@@ -83,7 +83,7 @@ export const SelectionControl = (function () {
         selectedRowKeys: props.selectedRowKeys,
         preserveSelectedRowKeys: true,
         onChange: (selectedRowKeys) => {
-          dispatch(changeChildAction("selectedRowKeys", selectedRowKeys, false));
+          dispatch(changeChildAction("selectedRowKeys", selectedRowKeys as string[], false));
           onEvent("rowSelectChange");
         },
         // click checkbox also trigger row click event