🐛 Improve bot libs mount in prod env

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/react/src/Bubble.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import type { BubbleProps } from '@typebot.io/js'
 
 type Props = BubbleProps
@@ -18,33 +18,32 @@ type BubbleElement = HTMLElement & Props
 
 export const Bubble = (props: Props) => {
   const ref = useRef<BubbleElement | null>(null)
+  const [isInitialized, setIsInitialized] = useState(false)
 
   useEffect(() => {
     ;(async () => {
       await import('@typebot.io/js/dist/web')
-      initBubble()
+      setIsInitialized(true)
     })()
-    return () => {
-      ref.current?.remove()
-    }
   }, [])
 
-  useEffect(() => {
-    updateProps(ref.current, props)
-  }, [props])
-
-  const updateProps = (element: BubbleElement | null, props: Props) => {
-    if (!element) return
-    Object.assign(element, props)
-  }
-
-  const initBubble = async () => {
+  const attachBubbleToDom = useCallback((props: Props) => {
     const bubbleElement = document.createElement(
       'typebot-bubble'
     ) as BubbleElement
-    if (ref.current) return
     ref.current = bubbleElement
+    injectPropsToElement(ref.current, props)
     document.body.append(ref.current)
+  }, [])
+
+  useEffect(() => {
+    if (!isInitialized) return
+    if (!ref.current) attachBubbleToDom(props)
+    injectPropsToElement(ref.current as BubbleElement, props)
+  }, [attachBubbleToDom, isInitialized, props])
+
+  const injectPropsToElement = (element: BubbleElement, props: Props) => {
+    Object.assign(element, props)
   }
 
   return null

packages/react/src/Popup.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import type { PopupProps } from '@typebot.io/js'
 
 type Props = PopupProps
@@ -18,31 +18,33 @@ type PopupElement = HTMLElement & Props
 
 export const Popup = (props: Props) => {
   const ref = useRef<PopupElement | null>(null)
+  const [isInitialized, setIsInitialized] = useState(false)
 
   useEffect(() => {
     ;(async () => {
       await import('@typebot.io/js/dist/web')
-      initPopup()
+      setIsInitialized(true)
     })()
     return () => {
       ref.current?.remove()
     }
   }, [])
 
-  useEffect(() => {
-    updateProps(ref.current, props)
-  }, [props])
-
-  const updateProps = (element: PopupElement | null, props: Props) => {
-    if (!element) return
-    Object.assign(element, props)
-  }
-
-  const initPopup = async () => {
+  const attachPopupToDom = useCallback((props: Props) => {
     const popupElement = document.createElement('typebot-popup') as PopupElement
-    if (ref.current) return
     ref.current = popupElement
+    injectPropsToElement(ref.current, props)
     document.body.append(ref.current)
+  }, [])
+
+  useEffect(() => {
+    if (!isInitialized) return
+    if (!ref.current) attachPopupToDom(props)
+    injectPropsToElement(ref.current as PopupElement, props)
+  }, [attachPopupToDom, isInitialized, props])
+
+  const injectPropsToElement = (element: PopupElement, props: Props) => {
+    Object.assign(element, props)
   }
 
   return null