👷 Build js embed lib with tsup

baptisteArno · Oct 19, 2024 · c6e8594 · c6e8594
1 parent bce9141
commit c6e8594
Show file tree

Hide file tree

Showing 25 changed files with 1,031 additions and 1,610 deletions.
diff --git a/apps/builder/src/features/blocks/integrations/sendEmail/sendEmail.spec.ts b/apps/builder/src/features/blocks/integrations/sendEmail/sendEmail.spec.ts
@@ -44,13 +44,6 @@ test.describe("Send email block", () => {
       page.locator(`button >> text=${env.SMTP_USERNAME}`),
     ).toBeVisible();
 
-    await page.fill(
-      '[placeholder="email1@gmail.com, email2@gmail.com"]',
-      "email1@gmail.com, email2@gmail.com",
-    );
-    await expect(page.locator("span >> text=email1@gmail.com")).toBeVisible();
-    await expect(page.locator("span >> text=email2@gmail.com")).toBeVisible();
-
     await page.fill(
       '[placeholder="email1@gmail.com, email2@gmail.com"]',
       "email1@gmail.com, email2@gmail.com",

diff --git a/...lder/src/features/publish/components/embeds/modals/Nextjs/InstallNextjsPackageSnippet.tsx b/...lder/src/features/publish/components/embeds/modals/Nextjs/InstallNextjsPackageSnippet.tsx
@@ -3,7 +3,7 @@ import { CodeEditor } from "@/components/inputs/CodeEditor";
 export const InstallNextjsPackageSnippet = () => {
   return (
     <CodeEditor
-      value={`npm install @typebot.io/js @typebot.io/nextjs`}
+      value={`npm install @typebot.io/nextjs`}
       isReadOnly
       lang="shell"
     />

diff --git a/...uilder/src/features/publish/components/embeds/modals/React/InstallReactPackageSnippet.tsx b/...uilder/src/features/publish/components/embeds/modals/React/InstallReactPackageSnippet.tsx
@@ -3,7 +3,7 @@ import { CodeEditor } from "@/components/inputs/CodeEditor";
 export const InstallReactPackageSnippet = () => {
   return (
     <CodeEditor
-      value={`npm install @typebot.io/js @typebot.io/react`}
+      value={`npm install @typebot.io/react`}
       isReadOnly
       lang="shell"
     />

diff --git a/apps/docs/deploy/web/libraries/next-js.mdx b/apps/docs/deploy/web/libraries/next-js.mdx
@@ -7,7 +7,7 @@ This lib is a convenient wrapper around the [Typebot React](./react) library. It
 ## Install
 
 ```bash
-npm install @typebot.io/js @typebot.io/nextjs
+npm install @typebot.io/nextjs
 ```
 
 ## Usage

diff --git a/apps/docs/deploy/web/libraries/react.mdx b/apps/docs/deploy/web/libraries/react.mdx
@@ -5,7 +5,7 @@ title: React
 ## Install
 
 ```bash
-npm install @typebot.io/js @typebot.io/react
+npm install @typebot.io/react
 ```
 
 ## Standard

diff --git a/apps/landing-page/src/app/blog/react-chatbot/page.mdx b/apps/landing-page/src/app/blog/react-chatbot/page.mdx
@@ -120,7 +120,7 @@ Typebot is an open-source platform that makes it easy to create chatbots for Rea
 4. In your React project, install **Typebot libraries**:
 
 ```bash
-npm install @typebot.io/js @typebot.io/react
+npm install @typebot.io/react
 ```
 
 5. Create a new component in your React app:

diff --git a/bun.lockb b/bun.lockb
diff --git a/packages/deprecated/bot-engine/package.json b/packages/deprecated/bot-engine/package.json
@@ -57,7 +57,6 @@
   },
   "peerDependencies": {
     "@typebot.io/prisma": "workspace:*",
-    "react": "18.0.0",
-    "react-dom": "18.0.0"
+    "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   }
 }
diff --git a/packages/embeds/js/README.md b/packages/embeds/js/README.md
@@ -34,11 +34,11 @@ There, you can change the container dimensions. Here is a code example:
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3/dist/web.js'
+  import Typebot from "https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3/dist/web.js";
 
   Typebot.initStandard({
-    typebot: 'my-typebot',
-  })
+    typebot: "my-typebot",
+  });
 </script>
 
 <typebot-standard style="width: 100%; height: 600px; "></typebot-standard>
@@ -54,13 +54,13 @@ Here is an example:
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3/dist/web.js'
+  import Typebot from "https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3/dist/web.js";
 
   Typebot.initPopup({
-    typebot: 'my-typebot',
-    apiHost: 'http://localhost:3001',
+    typebot: "my-typebot",
+    apiHost: "http://localhost:3001",
     autoShowDelay: 3000,
-  })
+  });
 </script>
 ```
 
@@ -71,15 +71,15 @@ This code will automatically trigger the popup window after 3 seconds.
 You can use these commands:
 
 ```js
-Typebot.open()
+Typebot.open();
 ```
 
 ```js
-Typebot.close()
+Typebot.close();
 ```
 
 ```js
-Typebot.toggle()
+Typebot.toggle();
 ```
 
 You can bind these commands on a button element, for example:
@@ -96,21 +96,21 @@ Here is an example:
 
 ```html
 <script type="module">
-  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3/dist/web.js'
+  import Typebot from "https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3/dist/web.js";
 
   Typebot.initBubble({
-    typebot: 'my-typebot',
+    typebot: "my-typebot",
     previewMessage: {
-      message: 'I have a question for you!',
+      message: "I have a question for you!",
       autoShowDelay: 5000,
-      avatarUrl: 'https://github.com/avatars/u/16015833?v=4',
+      avatarUrl: "https://github.com/avatars/u/16015833?v=4",
     },
     theme: {
-      button: { backgroundColor: '#0042DA', iconColor: '#FFFFFF' },
-      previewMessage: { backgroundColor: '#ffffff', textColor: 'black' },
-      chatWindow: { backgroundColor: '#ffffff' },
+      button: { backgroundColor: "#0042DA", iconColor: "#FFFFFF" },
+      previewMessage: { backgroundColor: "#ffffff", textColor: "black" },
+      chatWindow: { backgroundColor: "#ffffff" },
     },
-  })
+  });
 </script>
 ```
 
@@ -121,27 +121,27 @@ This code will show the bubble and let a preview message appear after 5 seconds.
 You can use these commands:
 
 ```js
-Typebot.showPreviewMessage()
+Typebot.showPreviewMessage();
 ```
 
 ```js
-Typebot.hidePreviewMessage()
+Typebot.hidePreviewMessage();
 ```
 
 ### Open or close the typebot
 
 You can use these commands:
 
 ```js
-Typebot.open()
+Typebot.open();
 ```
 
 ```js
-Typebot.close()
+Typebot.close();
 ```
 
 ```js
-Typebot.toggle()
+Typebot.toggle();
 ```
 
 You can bind these commands on a button element, for example:
@@ -156,12 +156,12 @@ You can prefill the bot variable values in your embed code by adding the `prefil
 
 ```js
 Typebot.initStandard({
-  typebot: 'my-typebot',
+  typebot: "my-typebot",
   prefilledVariables: {
-    'Current URL': 'https://my-site/account',
-    'User name': 'John Doe',
+    "Current URL": "https://my-site/account",
+    "User name": "John Doe",
   },
-})
+});
 ```
 
 It will prefill the `Current URL` variable with "https://my-site/account" and the `User name` variable with "John Doe". More info about variables: [here](/editor/variables).

diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
@@ -1,30 +1,33 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.3.21",
+  "version": "0.3.22",
   "description": "Javascript library to display typebots on your website",
   "license": "FSL-1.1-ALv2",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./web": {
-      "types": "./dist/web.d.ts",
-      "default": "./dist/web.js"
-    }
+    ".": "./dist/index.js",
+    "./web": "./dist/web.js"
   },
   "scripts": {
-    "dev": "rollup --watch --config rollup.config.js",
-    "build": "rollup --config rollup.config.js"
+    "dev": "tsup --watch",
+    "build": "tsup"
   },
   "dependencies": {
-    "@ai-sdk/ui-utils": "0.0.36",
-    "@ark-ui/solid": "3.9.0",
+    "@ai-sdk/ui-utils": "0.0.46",
+    "@ark-ui/solid": "4.2.1",
     "@fix-webm-duration/fix": "1.0.1",
     "@stripe/stripe-js": "1.54.1",
+    "clsx": "2.0.0",
+    "dompurify": "3.0.6",
+    "ky": "1.2.4",
+    "marked": "9.0.3",
+    "solid-element": "1.9.0",
+    "solid-js": "1.9.2",
+    "partysocket": "1.0.2"
+  },
+  "devDependencies": {
     "@typebot.io/blocks-bubbles": "workspace:*",
     "@typebot.io/blocks-inputs": "workspace:*",
     "@typebot.io/blocks-logic": "workspace:*",
@@ -34,32 +37,14 @@
     "@typebot.io/rich-text": "workspace:*",
     "@typebot.io/settings": "workspace:*",
     "@typebot.io/theme": "workspace:*",
-    "@typebot.io/zendesk-block": "workspace:*",
-    "clsx": "2.0.0",
-    "dompurify": "3.0.6",
-    "ky": "1.2.4",
-    "marked": "9.0.3",
-    "solid-element": "1.7.1",
-    "solid-js": "1.7.8",
-    "partysocket": "1.0.2"
-  },
-  "devDependencies": {
-    "@babel/preset-typescript": "7.24.7",
-    "@rollup/plugin-babel": "6.0.4",
-    "@rollup/plugin-commonjs": "26.0.1",
-    "@rollup/plugin-node-resolve": "15.2.3",
-    "@rollup/plugin-replace": "5.0.7",
-    "@rollup/plugin-terser": "0.4.4",
-    "@rollup/plugin-typescript": "12.1.0",
     "@typebot.io/tsconfig": "workspace:*",
+    "@typebot.io/zendesk-block": "workspace:*",
     "@types/dompurify": "3.0.3",
     "autoprefixer": "10.4.14",
-    "babel-preset-solid": "1.8.22",
+    "esbuild-plugin-solid": "^0.6.0",
     "postcss": "8.4.26",
-    "rollup": "4.22.4",
-    "rollup-plugin-postcss": "4.0.2",
-    "rollup-plugin-typescript-paths": "1.5.0",
-    "tailwindcss": "3.3.3"
+    "tailwindcss": "3.3.3",
+    "tsup": "8.3.0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/embeds/js/postcss.config.cjs b/packages/embeds/js/postcss.config.cjs
@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require("tailwindcss")(), require("autoprefixer")()],
+};
diff --git a/packages/embeds/js/rollup.config.js b/packages/embeds/js/rollup.config.js
diff --git a/packages/embeds/js/src/register.ts b/packages/embeds/js/src/register.ts
@@ -10,7 +10,6 @@ import { Standard } from "./features/standard/components/Standard";
 
 export const registerWebComponents = () => {
   if (typeof window === "undefined") return;
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   //@ts-ignore
   customElement("typebot-standard", defaultBotProps, Standard);
   customElement("typebot-bubble", defaultBubbleProps, Bubble);