Merge pull request #645 from lowcoder-org/dev

Dev -> Main with small last fixes for Release 2.3.0

Author: FalkWolsky

client/packages/lowcoder-sdk/index.tsx

@@ -1,5 +1,6 @@
 import { useRef } from "react";
 import ReactDOM, { flushSync } from "react-dom";
+import { createRoot } from "react-dom/client";
 import { AppViewInstance, bootstrapAppAt, LowcoderAppView } from "./src/index";
 
 const url = new URL(location.href);
@@ -70,7 +71,9 @@ async function bootstrap() {
   });
 
   // React
-  ReactDOM.render(<ReactDemoApp />, document.querySelector("#app2"));
+  const container = document.querySelector("#app2");
+  const root = createRoot(container!);
+  root.render(<ReactDemoApp />);
 }
 
 bootstrap();

client/packages/lowcoder-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-sdk",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "type": "module",
   "files": [
     "src",

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 { createRoot } from "react-dom/client";
+import { Root } from "react-dom/client";
 import { StyleSheetManager } from "styled-components";
 import { ModuleDSL, ModuleDSLIoInput } from "types/dsl";
 import { AppView } from "./AppView";
@@ -40,7 +40,7 @@ export class AppViewInstance<I = any, O = any> {
     webUrl: "https://app.lowcoder.cloud",
   };
 
-  constructor(private appId: string, private node: Element, options: AppViewInstanceOptions = {}) {
+  constructor(private appId: string, private node: Element, private root: Root, options: AppViewInstanceOptions = {}) {
     Object.assign(this.options, options);
     if (this.options.baseUrl) {
       sdkConfig.baseURL = this.options.baseUrl;
@@ -137,8 +137,7 @@ export class AppViewInstance<I = any, O = any> {
 
   private async render() {
     const data = await this.dataPromise;
-    const root = createRoot(this.node);
-    root.render(
+    this.root.render(
       <StyleSheetManager target={this.node as HTMLElement}>
         <AppView
           appId={this.appId}

client/packages/lowcoder/src/appView/bootstrapAt.tsx

@@ -1,5 +1,6 @@
 import { loadComps } from "comps";
 import { AppViewInstance, AppViewInstanceOptions } from "./AppViewInstance";
+import { createRoot } from "react-dom/client";
 
 loadComps();
 
@@ -12,5 +13,5 @@ export async function bootstrapAppAt<I>(
     console.error("node must be not null.");
     return;
   }
-  return new AppViewInstance(appId, node, options);
+  return new AppViewInstance(appId, node, createRoot(node), options);
 }

client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx

@@ -12,7 +12,6 @@ import { EventData, EventTypeEnum } from "./types";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { EditorContext } from "comps/editorState";
-import * as ReactDOMClient from 'react-dom/client';
 
 // TODO: eventually to embedd in container so we have styling?
 // TODO: support different starter templates for different frameworks (react, ANT, Flutter, Angular, etc)
@@ -60,8 +59,7 @@ const defaultCode = `
   );
   
   const ConnectedComponent = ${trans("customComp.sdkGlobalVarName")}.connect(MyCustomComponent);
-  const container = document.getElementById('root');
-  const root = ReactDOMClient.createRoot(container);
+  const root = ReactDOM.createRoot(document.getElementById("root"));
   root.render(<ConnectedComponent />);
   
   </script>

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -2573,7 +2573,7 @@ export const en = {
     "selectBackground": "Selected Background"
   },
   "componentDocExtra": {
-    "table": "Additional Documentation for Table Component"
+    table,
   },
   "idSource": {
     "title": "OAuth Providers",