🏗️ Use tsup for bot and typebot-js packages

packages/bot-engine/package.json

@@ -2,12 +2,12 @@
   "name": "bot-engine",
   "license": "AGPL-3.0-or-later",
   "version": "0.1.0",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "pnpm rollup -c",
-    "dev": "pnpm rollup -c --watch",
+    "build": "tsup",
+    "dev": "tsup --watch",
     "lint": "eslint --fix -c ./.eslintrc.js \"./src/**/*.ts*\""
   },
   "dependencies": {
@@ -22,10 +22,6 @@
     "resize-observer": "1.0.4"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "23.0.0",
-    "@rollup/plugin-json": "4.1.0",
-    "@rollup/plugin-node-resolve": "14.1.0",
-    "@rollup/plugin-typescript": "8.5.0",
     "@types/node": "18.8.3",
     "@types/qs": "6.9.7",
     "@types/react": "18.0.21",
@@ -35,6 +31,7 @@
     "@typescript-eslint/eslint-plugin": "5.39.0",
     "@typescript-eslint/parser": "5.39.0",
     "autoprefixer": "10.4.12",
+    "baptistearno-tsup": "^0.1.0",
     "db": "workspace:*",
     "eslint": "8.25.0",
     "eslint-config-next": "12.3.1",
@@ -46,13 +43,7 @@
     "prettier": "2.7.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "rollup": "2.79.1",
-    "rollup-plugin-dts": "4.2.2",
-    "rollup-plugin-peer-deps-external": "2.2.4",
-    "rollup-plugin-postcss": "4.0.2",
-    "rollup-plugin-terser": "7.0.2",
     "tailwindcss": "3.1.8",
-    "tslib": "2.4.0",
     "typescript": "4.8.4",
     "utils": "workspace:*"
   },

packages/bot-engine/rollup.config.js

@@ -1,52 +0,0 @@
-import resolve from '@rollup/plugin-node-resolve'
-import commonjs from '@rollup/plugin-commonjs'
-import typescript from '@rollup/plugin-typescript'
-import json from '@rollup/plugin-json'
-import dts from 'rollup-plugin-dts'
-import postcss from 'rollup-plugin-postcss'
-import { terser } from 'rollup-plugin-terser'
-import peerDepsExternal from 'rollup-plugin-peer-deps-external'
-
-const packageJson = require('./package.json')
-
-export default [
-  {
-    input: 'src/index.ts',
-    output: [
-      {
-        file: packageJson.main,
-        format: 'cjs',
-        sourcemap: true,
-        inlineDynamicImports: true,
-      },
-      {
-        file: packageJson.module,
-        format: 'esm',
-        sourcemap: true,
-        inlineDynamicImports: true,
-      },
-    ],
-    plugins: [
-      peerDepsExternal(),
-      resolve({ preferBuiltins: true }),
-      json(),
-      commonjs(),
-      typescript({ tsconfig: './tsconfig.json' }),
-      postcss({
-        config: {
-          path: './postcss.config.js',
-        },
-        extract: false,
-        minimize: false,
-        inject: false,
-      }),
-      terser(),
-    ],
-  },
-  {
-    input: 'dist/esm/src/index.d.ts',
-    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
-    plugins: [dts()],
-    external: [/\.css$/],
-  },
-]

packages/bot-engine/src/assets/phone.css

@@ -1,3 +1,150 @@
+/* CSS variables. */
+:root {
+  --PhoneInput-color--focus: #03b2cb;
+  --PhoneInputInternationalIconPhone-opacity: 0.8;
+  --PhoneInputInternationalIconGlobe-opacity: 0.65;
+  --PhoneInputCountrySelect-marginRight: 0.35em;
+  --PhoneInputCountrySelectArrow-width: 0.3em;
+  --PhoneInputCountrySelectArrow-marginLeft: var(
+    --PhoneInputCountrySelect-marginRight
+  );
+  --PhoneInputCountrySelectArrow-borderWidth: 1px;
+  --PhoneInputCountrySelectArrow-opacity: 0.45;
+  --PhoneInputCountrySelectArrow-color: currentColor;
+  --PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);
+  --PhoneInputCountrySelectArrow-transform: rotate(45deg);
+  --PhoneInputCountryFlag-aspectRatio: 1.5;
+  --PhoneInputCountryFlag-height: 1em;
+  --PhoneInputCountryFlag-borderWidth: 1px;
+  --PhoneInputCountryFlag-borderColor: rgba(0, 0, 0, 0.5);
+  --PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);
+  --PhoneInputCountryFlag-backgroundColor--loading: rgba(0, 0, 0, 0.1);
+}
+
+.PhoneInput {
+  /* This is done to stretch the contents of this component. */
+  display: flex;
+  align-items: center;
+}
+
+.PhoneInputInput {
+  /* The phone number input stretches to fill all empty space */
+  flex: 1;
+  /* The phone number input should shrink
+	   to make room for the extension input */
+  min-width: 0;
+}
+
+.PhoneInputCountryIcon {
+  width: calc(
+    var(--PhoneInputCountryFlag-height) *
+      var(--PhoneInputCountryFlag-aspectRatio)
+  );
+  height: var(--PhoneInputCountryFlag-height);
+}
+
+.PhoneInputCountryIcon--square {
+  width: var(--PhoneInputCountryFlag-height);
+}
+
+.PhoneInputCountryIcon--border {
+  /* Removed `background-color` because when an `<img/>` was still loading
+	   it would show a dark gray rectangle. */
+  /* For some reason the `<img/>` is not stretched to 100% width and height
+	   and sometime there can be seen white pixels of the background at top and bottom. */
+  background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);
+  /* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */
+  /* For some reason the `<img/>` is not stretched to 100% width and height
+	   and sometime there can be seen white pixels of the background at top and bottom,
+	   so an additional "inset" border is added. */
+  box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth)
+      var(--PhoneInputCountryFlag-borderColor),
+    inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth)
+      var(--PhoneInputCountryFlag-borderColor);
+}
+
+.PhoneInputCountryIconImg {
+  /* Fixes weird vertical space above the flag icon. */
+  /* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */
+  display: block;
+  /* 3rd party <SVG/> flag icons won't stretch if they have `width` and `height`.
+	   Also, if an <SVG/> icon's aspect ratio was different, it wouldn't fit too. */
+  width: 100%;
+  height: 100%;
+}
+
+.PhoneInputInternationalIconPhone {
+  opacity: var(--PhoneInputInternationalIconPhone-opacity);
+}
+
+.PhoneInputInternationalIconGlobe {
+  opacity: var(--PhoneInputInternationalIconGlobe-opacity);
+}
+
+/* Styling native country `<select/>`. */
+
+.PhoneInputCountry {
+  position: relative;
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  margin-right: var(--PhoneInputCountrySelect-marginRight);
+}
+
+.PhoneInputCountrySelect {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 1;
+  border: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.PhoneInputCountrySelect[disabled],
+.PhoneInputCountrySelect[readonly] {
+  cursor: default;
+}
+
+.PhoneInputCountrySelectArrow {
+  display: block;
+  content: '';
+  width: var(--PhoneInputCountrySelectArrow-width);
+  height: var(--PhoneInputCountrySelectArrow-width);
+  margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);
+  border-style: solid;
+  border-color: var(--PhoneInputCountrySelectArrow-color);
+  border-top-width: 0;
+  border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);
+  border-left-width: 0;
+  border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);
+  transform: var(--PhoneInputCountrySelectArrow-transform);
+  opacity: var(--PhoneInputCountrySelectArrow-opacity);
+}
+
+.PhoneInputCountrySelect:focus
+  + .PhoneInputCountryIcon
+  + .PhoneInputCountrySelectArrow {
+  opacity: 1;
+  color: var(--PhoneInputCountrySelectArrow-color--focus);
+}
+
+.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {
+  box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth)
+      var(--PhoneInputCountryFlag-borderColor--focus),
+    inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth)
+      var(--PhoneInputCountryFlag-borderColor--focus);
+}
+
+.PhoneInputCountrySelect:focus
+  + .PhoneInputCountryIcon
+  .PhoneInputInternationalIconGlobe {
+  opacity: 1;
+  color: var(--PhoneInputCountrySelectArrow-color--focus);
+}
+
 .PhoneInputInput {
   padding: 1rem 0.5rem;
   outline: none !important;

packages/bot-engine/src/components/TypebotViewer.tsx

@@ -1,14 +1,8 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 import React, { CSSProperties, useMemo } from 'react'
 import { TypebotContext } from '../contexts/TypebotContext'
 import Frame from 'react-frame-component'
-//@ts-ignore
 import styles from '../assets/style.css'
-//@ts-ignore
-import phoneNumberInputStyle from 'react-phone-number-input/style.css'
-//@ts-ignore
 import importantStyles from '../assets/importantStyles.css'
-//@ts-ignore
 import phoneSyle from '../assets/phone.css'
 import { ConversationContainer } from './ConversationContainer'
 import { AnswersContext } from '../contexts/AnswersContext'
@@ -79,7 +73,6 @@ export const TypebotViewer = ({
       id="typebot-iframe"
       head={
         <style>
-          {phoneNumberInputStyle}
           {phoneSyle}
           {styles}
           {typebot.theme?.customCss}

packages/bot-engine/src/components/global.d.ts

@@ -0,0 +1 @@
+declare module '*.css'

packages/bot-engine/tsup.config.js

@@ -0,0 +1,12 @@
+import { defineConfig } from 'baptistearno-tsup'
+
+export default defineConfig((options) => ({
+  entry: ['src/index.ts'],
+  sourcemap: true,
+  minify: !options.watch,
+  dts: true,
+  format: ['esm', 'cjs'],
+  loader: {
+    '.css': 'text',
+  },
+}))