✨ Add Next.js embed library

packages/embeds/react/README.md

@@ -1,7 +1,7 @@
 ## Install
 
 ```bash
-npm install @typebot.io/js @typebot.io/react
+npm install @typebot.io/react
 ```
 
 ## Standard
@@ -38,19 +38,19 @@ This code will automatically trigger the popup window after 3 seconds.
 You can use these commands:
 
 ```js
-import { open } from '@typebot.io/js'
+import { open } from '@typebot.io/react'
 
 open()
 ```
 
 ```js
-import { close } from '@typebot.io/js'
+import { close } from '@typebot.io/react'
 
 close()
 ```
 
 ```js
-import { toggle } from '@typebot.io/js'
+import { toggle } from '@typebot.io/react'
 
 toggle()
 ```
@@ -85,13 +85,13 @@ This code will show the bubble and let a preview message appear after 5 seconds.
 You can use these commands:
 
 ```js
-import { showPreviewMessage } from '@typebot.io/js'
+import { showPreviewMessage } from '@typebot.io/react'
 
 Typebot.showPreviewMessage()
 ```
 
 ```js
-import { hidePreviewMessage } from '@typebot.io/js'
+import { hidePreviewMessage } from '@typebot.io/react'
 
 Typebot.hidePreviewMessage()
 ```
@@ -101,19 +101,19 @@ Typebot.hidePreviewMessage()
 You can use these commands:
 
 ```js
-import { open } from '@typebot.io/js'
+import { open } from '@typebot.io/react'
 
 open()
 ```
 
 ```js
-import { close } from '@typebot.io/js'
+import { close } from '@typebot.io/react'
 
 close()
 ```
 
 ```js
-import { toggle } from '@typebot.io/js'
+import { toggle } from '@typebot.io/react'
 
 toggle()
 ```

packages/embeds/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.80",
-  "description": "React library to display typebots on your website",
+  "version": "0.1.0",
+  "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -21,28 +21,28 @@
   "devDependencies": {
     "@babel/preset-react": "7.22.5",
     "@babel/preset-typescript": "7.22.5",
+    "@rollup/plugin-alias": "^5.0.0",
     "@rollup/plugin-babel": "6.0.3",
     "@rollup/plugin-node-resolve": "15.1.0",
     "@rollup/plugin-terser": "0.4.3",
     "@rollup/plugin-typescript": "11.1.2",
     "@typebot.io/js": "workspace:*",
+    "@typebot.io/lib": "workspace:*",
+    "@typebot.io/prisma": "workspace:*",
+    "@typebot.io/schemas": "workspace:*",
+    "@typebot.io/tsconfig": "workspace:*",
     "@types/node": "20.4.2",
     "@types/react": "18.2.15",
-    "@typebot.io/prisma": "workspace:*",
     "eslint": "8.44.0",
     "eslint-config-custom": "workspace:*",
-    "@typebot.io/schemas": "workspace:*",
     "react": "18.2.0",
     "rollup": "3.26.2",
     "rollup-plugin-typescript-paths": "1.4.0",
-    "@typebot.io/tsconfig": "workspace:*",
     "tslib": "2.6.0",
     "tsx": "3.12.7",
-    "typescript": "5.1.6",
-    "@typebot.io/lib": "workspace:*"
+    "typescript": "5.1.6"
   },
   "peerDependencies": {
-    "@typebot.io/js": "workspace:*",
     "react": "18.x"
   }
 }

packages/embeds/react/rollup.config.js

@@ -3,6 +3,7 @@ import terser from '@rollup/plugin-terser'
 import { babel } from '@rollup/plugin-babel'
 import typescript from '@rollup/plugin-typescript'
 import { typescriptPaths } from 'rollup-plugin-typescript-paths'
+import alias from '@rollup/plugin-alias'
 
 const extensions = ['.ts', '.tsx']
 
@@ -12,8 +13,11 @@ const indexConfig = {
     file: './dist/index.js',
     format: 'es',
   },
-  external: ['react', 'react/jsx-runtime', '@typebot.io/js'],
+  external: ['react', 'react/jsx-runtime'],
   plugins: [
+    alias({
+      entries: [{ find: '@typebot.io/js', replacement: '../../js' }],
+    }),
     resolve({ extensions }),
     babel({
       babelHelpers: 'bundled',

packages/embeds/react/src/Bubble.tsx

@@ -1,5 +1,6 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef } from 'react'
 import type { BubbleProps } from '@typebot.io/js'
+import '@typebot.io/js/dist/web'
 
 type Props = BubbleProps
 
@@ -18,17 +19,6 @@ 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')
-      setIsInitialized(true)
-    })()
-    return () => {
-      ref.current?.remove()
-    }
-  }, [])
 
   const attachBubbleToDom = useCallback((props: Props) => {
     const bubbleElement = document.createElement(
@@ -40,10 +30,9 @@ export const Bubble = (props: Props) => {
   }, [])
 
   useEffect(() => {
-    if (!isInitialized) return
     if (!ref.current) attachBubbleToDom(props)
     injectPropsToElement(ref.current as BubbleElement, props)
-  }, [attachBubbleToDom, isInitialized, props])
+  }, [attachBubbleToDom, props])
 
   const injectPropsToElement = (element: BubbleElement, props: Props) => {
     Object.assign(element, props)
@@ -51,3 +40,5 @@ export const Bubble = (props: Props) => {
 
   return null
 }
+
+export default Bubble

packages/embeds/react/src/Popup.tsx

@@ -1,5 +1,6 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef } from 'react'
 import type { PopupProps } from '@typebot.io/js'
+import '@typebot.io/js/dist/web'
 
 type Props = PopupProps
 
@@ -18,17 +19,6 @@ 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')
-      setIsInitialized(true)
-    })()
-    return () => {
-      ref.current?.remove()
-    }
-  }, [])
 
   const attachPopupToDom = useCallback((props: Props) => {
     const popupElement = document.createElement('typebot-popup') as PopupElement
@@ -38,10 +28,9 @@ export const Popup = (props: Props) => {
   }, [])
 
   useEffect(() => {
-    if (!isInitialized) return
     if (!ref.current) attachPopupToDom(props)
     injectPropsToElement(ref.current as PopupElement, props)
-  }, [attachPopupToDom, isInitialized, props])
+  }, [attachPopupToDom, props])
 
   const injectPropsToElement = (element: PopupElement, props: Props) => {
     Object.assign(element, props)
@@ -49,3 +38,5 @@ export const Popup = (props: Props) => {
 
   return null
 }
+
+export default Popup

packages/embeds/react/src/Standard.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import type { BotProps } from '@typebot.io/js'
+import '@typebot.io/js/dist/web'
 
 type Props = BotProps & {
   style?: React.CSSProperties
@@ -22,12 +23,6 @@ type StandardElement = HTMLElement & Props
 export const Standard = ({ style, className, ...assignableProps }: Props) => {
   const ref = useRef<StandardElement | null>(null)
 
-  useEffect(() => {
-    ;(async () => {
-      await import('@typebot.io/js/dist/web')
-    })()
-  }, [])
-
   useEffect(() => {
     if (!ref.current) return
     Object.assign(ref.current, assignableProps)
@@ -35,3 +30,5 @@ export const Standard = ({ style, className, ...assignableProps }: Props) => {
 
   return <typebot-standard ref={ref} style={style} class={className} />
 }
+
+export default Standard

packages/embeds/react/src/index.ts

@@ -1,3 +1,4 @@
 export { Standard } from './Standard'
 export { Bubble } from './Bubble'
 export { Popup } from './Popup'
+export * from '@typebot.io/js'