@botonic/react 0.31.0-alpha.2 → 0.31.5-alpha.1

package/src/webchat-app.jsx

@@ -1,7 +1,7 @@
 import { HubtypeService, INPUT } from '@botonic/core'
 import merge from 'lodash.merge'
 import React, { createRef } from 'react'
-import { createRoot } from 'react-dom/client'
+import { render, unmountComponentAtNode } from 'react-dom'
 
 import { WEBCHAT } from './constants'
 import { SENDERS, Typing } from './index-types'
@@ -65,7 +65,6 @@ export class WebchatApp {
     this.server = server
     this.webchatRef = createRef()
     this.appId = appId
-    this.reactRoot = null
   }
 
   createRootElement(host) {
@@ -95,9 +94,7 @@ export class WebchatApp {
   }
 
   getReactMountNode(node) {
-    if (!node) {
-      node = this.host
-    }
+    if (!node) node = this.host
     return node.shadowRoot ? node.shadowRoot : node
   }
 
@@ -375,19 +372,18 @@ export class WebchatApp {
 
   destroy() {
     if (this.hubtypeService) this.hubtypeService.destroyPusher()
-    this.reactRoot?.unmount()
+    unmountComponentAtNode(this.host)
     if (this.storage) this.storage.removeItem(this.storageKey)
   }
 
   async render(dest, optionsAtRuntime = {}) {
     onDOMLoaded(async () => {
       const isVisible = await this.resolveWebchatVisibility(optionsAtRuntime)
-      if (isVisible) {
-        const webchatComponent = this.getComponent(dest, optionsAtRuntime)
-        const container = this.getReactMountNode(dest)
-        this.reactRoot = createRoot(container) // createRoot(container!) if you use TypeScript
-        this.reactRoot.render(webchatComponent)
-      }
+      if (isVisible)
+        render(
+          this.getComponent(dest, optionsAtRuntime),
+          this.getReactMountNode(dest)
+        )
     })
   }
 }

package/src/webview-app.tsx

@@ -2,7 +2,7 @@
 import { getString, params2queryString, PROVIDER } from '@botonic/core'
 import axios from 'axios'
 import React from 'react'
-import { createRoot } from 'react-dom/client'
+import { render } from 'react-dom'
 import { BrowserRouter, Route } from 'react-router-dom'
 
 import { CloseWebviewOptions, WebviewRequestContext } from './contexts'
@@ -110,13 +110,11 @@ export class WebviewApp {
   }
 
   render(dest) {
-    const component = (
+    render(
       <BrowserRouter>
         <App webviews={this.webviews} locales={this.locales} />
-      </BrowserRouter>
+      </BrowserRouter>,
+      dest
     )
-    const container = dest
-    const reactRoot = createRoot(container)
-    reactRoot.render(component)
   }
 }