🧑‍💻 Fix type resolution for @typebot.io/react and nextjs

Closes #968

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -22,9 +22,9 @@
     "@rollup/plugin-terser": "0.4.3",
     "@rollup/plugin-typescript": "11.1.2",
     "@typebot.io/js": "workspace:*",
-    "@typebot.io/react": "workspace:*",
     "@typebot.io/lib": "workspace:*",
     "@typebot.io/prisma": "workspace:*",
+    "@typebot.io/react": "workspace:*",
     "@typebot.io/schemas": "workspace:*",
     "@typebot.io/tsconfig": "workspace:*",
     "@types/node": "20.4.2",
@@ -33,6 +33,7 @@
     "eslint-config-custom": "workspace:*",
     "react": "18.2.0",
     "rollup": "3.26.2",
+    "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-typescript-paths": "1.4.0",
     "tslib": "2.6.0",
     "tsx": "3.12.7",

packages/embeds/nextjs/rollup.config.js

@@ -4,6 +4,7 @@ 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'
+import { dts } from 'rollup-plugin-dts'
 
 const extensions = ['.ts', '.tsx']
 
@@ -33,6 +34,23 @@ const indexConfig = {
   ],
 }
 
-const configs = [indexConfig]
+const typesConfig = {
+  input: './src/index.ts',
+  output: [{ file: './dist/index.d.ts', format: 'es' }],
+  plugins: [
+    alias({
+      entries: [
+        { find: '@typebot.io/js', replacement: '../../js' },
+        {
+          find: '@/types',
+          replacement: '../types',
+        },
+      ],
+    }),
+    dts(),
+  ],
+}
+
+const configs = [indexConfig, typesConfig]
 
 export default configs

packages/embeds/nextjs/src/index.ts

@@ -1,16 +1,29 @@
+import type {
+  BotProps,
+  PopupProps,
+  BubbleProps,
+} from '@typebot.io/js/dist/index'
 import dynamic from 'next/dynamic'
 
-export const Standard = dynamic(
-  () => import('@typebot.io/react/src/Standard'),
-  { ssr: false }
+export const Standard: React.ComponentType<
+  BotProps & {
+    style?: React.CSSProperties
+    className?: string
+  }
+> = dynamic(() => import('@typebot.io/react/src/Standard'), { ssr: false })
+
+export const Popup: React.ComponentType<PopupProps> = dynamic(
+  () => import('@typebot.io/react/src/Popup'),
+  {
+    ssr: false,
+  }
 )
 
-export const Popup = dynamic(() => import('@typebot.io/react/src/Popup'), {
-  ssr: false,
-})
-
-export const Bubble = dynamic(() => import('@typebot.io/react/src/Bubble'), {
-  ssr: false,
-})
+export const Bubble: React.ComponentType<BubbleProps> = dynamic(
+  () => import('@typebot.io/react/src/Bubble'),
+  {
+    ssr: false,
+  }
+)
 
 export * from '@typebot.io/js'

packages/embeds/nextjs/tsconfig.json

@@ -6,9 +6,6 @@
     "paths": {
       "@/*": ["src/*"]
     },
-    "declaration": true,
-    "declarationMap": true,
-    "outDir": "dist",
-    "emitDeclarationOnly": true
+    "outDir": "dist"
   }
 }

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -37,6 +37,7 @@
     "eslint-config-custom": "workspace:*",
     "react": "18.2.0",
     "rollup": "3.26.2",
+    "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-typescript-paths": "1.4.0",
     "tslib": "2.6.0",
     "tsx": "3.12.7",

packages/embeds/react/rollup.config.js

@@ -4,6 +4,7 @@ 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'
+import { dts } from 'rollup-plugin-dts'
 
 const extensions = ['.ts', '.tsx']
 
@@ -31,6 +32,23 @@ const indexConfig = {
   ],
 }
 
-const configs = [indexConfig]
+const typesConfig = {
+  input: './src/index.ts',
+  output: [{ file: './dist/index.d.ts', format: 'es' }],
+  plugins: [
+    alias({
+      entries: [
+        { find: '@typebot.io/js', replacement: '../../js' },
+        {
+          find: '@/types',
+          replacement: '../types',
+        },
+      ],
+    }),
+    dts(),
+  ],
+}
+
+const configs = [indexConfig, typesConfig]
 
 export default configs

packages/embeds/react/tsconfig.json

@@ -6,9 +6,6 @@
     "paths": {
       "@/*": ["src/*"]
     },
-    "declaration": true,
-    "declarationMap": true,
-    "outDir": "dist",
-    "emitDeclarationOnly": true
+    "outDir": "dist"
   }
 }