🧑‍💻 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(
+export const Standard: React.ComponentType<
-  () => import('@typebot.io/react/src/Standard'),
+  BotProps & {
-  { ssr: false }
+    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'), {
+export const Bubble: React.ComponentType<BubbleProps> = dynamic(
-  ssr: false,
+  () => import('@typebot.io/react/src/Bubble'),
-})
+  {
-
+    ssr: false,
-export const Bubble = 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,
+    "outDir": "dist"
-    "declarationMap": true,
-    "outDir": "dist",
-    "emitDeclarationOnly": true
   }
 }

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,
+    "outDir": "dist"
-    "declarationMap": true,
-    "outDir": "dist",
-    "emitDeclarationOnly": true
   }
 }

pnpm-lock.yaml

@@ -1051,6 +1051,9 @@ importers:
       rollup:
         specifier: 3.26.2
         version: 3.26.2
+      rollup-plugin-dts:
+        specifier: ^6.1.0
+        version: 6.1.0(rollup@3.26.2)(typescript@5.1.6)
       rollup-plugin-typescript-paths:
         specifier: 1.4.0
         version: 1.4.0(typescript@5.1.6)
@@ -1124,6 +1127,9 @@ importers:
       rollup:
         specifier: 3.26.2
         version: 3.26.2
+      rollup-plugin-dts:
+        specifier: ^6.1.0
+        version: 6.1.0(rollup@3.26.2)(typescript@5.1.6)
       rollup-plugin-typescript-paths:
         specifier: 1.4.0
         version: 1.4.0(typescript@5.1.6)
@@ -1807,6 +1813,7 @@ packages:
   /@babel/highlight@7.22.20:
     resolution: {integrity: sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==}
     engines: {node: '>=6.9.0'}
+    requiresBuild: true
     dependencies:
       '@babel/helper-validator-identifier': 7.22.20
       chalk: 2.4.2
@@ -12493,6 +12500,7 @@ packages:
 
   /color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
+    requiresBuild: true
     dependencies:
       color-name: 1.1.3
 
@@ -12504,6 +12512,7 @@ packages:
 
   /color-name@1.1.3:
     resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
+    requiresBuild: true
 
   /color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
@@ -15540,6 +15549,7 @@ packages:
   /has-flag@3.0.0:
     resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
     engines: {node: '>=4'}
+    requiresBuild: true
 
   /has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
@@ -17676,7 +17686,6 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: false
 
   /make-dir@2.1.0:
     resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
@@ -21016,6 +21025,20 @@ packages:
     dependencies:
       glob: 7.2.3
 
+  /rollup-plugin-dts@6.1.0(rollup@3.26.2)(typescript@5.1.6):
+    resolution: {integrity: sha512-ijSCPICkRMDKDLBK9torss07+8dl9UpY9z1N/zTeA1cIqdzMlpkV3MOOC7zukyvQfDyxa1s3Dl2+DeiP/G6DOw==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      rollup: ^3.29.4 || ^4
+      typescript: ^4.5 || ^5.0
+    dependencies:
+      magic-string: 0.30.4
+      rollup: 3.26.2
+      typescript: 5.1.6
+    optionalDependencies:
+      '@babel/code-frame': 7.22.13
+    dev: true
+
   /rollup-plugin-postcss@4.0.2(postcss@8.4.26):
     resolution: {integrity: sha512-05EaY6zvZdmvPUDi3uCcAQoESDcYnv8ogJJQRp6V5kZ6J6P7uAVJlrTZcaaA20wTH527YTnKfkAoPxWI/jPp4w==}
     engines: {node: '>=10'}