Merge pull request #648 from raheeliftikhar5/sdk-rerendering-fix

Fix apps re-rendering issue with SDK

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);
 }