From d19c210ef6de3a4cc36e33bb9b168c2d1aca5067 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Fri, 19 Jan 2024 15:58:53 +0500
Subject: [PATCH] fix rerendering apps in sdk

---
 client/packages/lowcoder-sdk/index.tsx                   | 5 ++++-
 client/packages/lowcoder-sdk/package.json                | 2 +-
 client/packages/lowcoder/src/appView/AppViewInstance.tsx | 7 +++----
 client/packages/lowcoder/src/appView/bootstrapAt.tsx     | 3 ++-
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/client/packages/lowcoder-sdk/index.tsx b/client/packages/lowcoder-sdk/index.tsx
index 4ff48c510..54fc1bb97 100644
--- a/client/packages/lowcoder-sdk/index.tsx
+++ b/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();
diff --git a/client/packages/lowcoder-sdk/package.json b/client/packages/lowcoder-sdk/package.json
index 88b06a648..36583cdcf 100644
--- a/client/packages/lowcoder-sdk/package.json
+++ b/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",
diff --git a/client/packages/lowcoder/src/appView/AppViewInstance.tsx b/client/packages/lowcoder/src/appView/AppViewInstance.tsx
index b9e8457be..4163ddfff 100644
--- 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 { 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}
diff --git a/client/packages/lowcoder/src/appView/bootstrapAt.tsx b/client/packages/lowcoder/src/appView/bootstrapAt.tsx
index b4fccbd54..b7dba8e9d 100644
--- a/client/packages/lowcoder/src/appView/bootstrapAt.tsx
+++ b/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);
 }