blsmedia/bot
2
0
Fork 0
Code Activity

🏗️ Use tsup for bot and typebot-js packages

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-10-10 08:28:11 +02:00
committed by Baptiste Arnaud
parent 0b58f4e976
commit 84163c6585
27 changed files with 474 additions and 739 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
apps/builder/components/Seo.tsx
View File

@ -10,24 +10,28 @@ export const Seo = ({
description?: string description?: string
currentUrl?: string currentUrl?: string
imagePreviewUrl?: string imagePreviewUrl?: string
}) => ( }) => {
<Head> const formattedTitle = `${title} | Typebot`
<title>Typebot | {title}</title>
<meta name="title" content={title} />
<meta property="og:title" content={title} />
<meta property="twitter:title" content={title} />
<meta property="twitter:url" content={currentUrl} /> return (
<meta property="og:url" content={currentUrl} /> <Head>
<title>{formattedTitle}</title>
<meta name="title" content={title} />
<meta property="og:title" content={title} />
<meta property="twitter:title" content={title} />
<meta name="description" content={description} /> <meta property="twitter:url" content={currentUrl} />
<meta property="twitter:description" content={description} /> <meta property="og:url" content={currentUrl} />
<meta property="og:description" content={description} />
<meta property="og:image" content={imagePreviewUrl} /> <meta name="description" content={description} />
<meta property="twitter:image" content={imagePreviewUrl} /> <meta property="twitter:description" content={description} />
<meta property="og:description" content={description} />
<meta property="og:type" content="website" /> <meta property="og:image" content={imagePreviewUrl} />
<meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content={imagePreviewUrl} />
</Head>
) <meta property="og:type" content="website" />
<meta property="twitter:card" content="summary_large_image" />
</Head>
)
}

13
apps/builder/components/dashboard/DashboardHeader.tsx
View File

@ -55,7 +55,7 @@ export const DashboardHeader = () => {
<NextChakraLink <NextChakraLink
className="w-24" className="w-24"
href="/typebots" href="/typebots"
data-testid="authenticated" data-testid="typebot-logo"
> >
<TypebotLogo w="30px" /> <TypebotLogo w="30px" />
</NextChakraLink> </NextChakraLink>
@ -92,12 +92,11 @@ export const DashboardHeader = () => {
</SkeletonCircle> </SkeletonCircle>
{workspace && ( {workspace && (
<> <>
<Text noOfLines={1} maxW="200px"> <Text noOfLines={1} maxW="200px">
{workspace.name} {workspace.name}
</Text> </Text>
<PlanTag plan={workspace.plan}/> <PlanTag plan={workspace.plan} />
</> </>
)} )}
<ChevronLeftIcon transform="rotate(-90deg)" /> <ChevronLeftIcon transform="rotate(-90deg)" />
</HStack> </HStack>
@ -117,7 +116,7 @@ export const DashboardHeader = () => {
defaultIcon={HardDriveIcon} defaultIcon={HardDriveIcon}
/> />
<Text>{workspace.name}</Text> <Text>{workspace.name}</Text>
<PlanTag plan={workspace.plan}/> <PlanTag plan={workspace.plan} />
</HStack> </HStack>
</MenuItem> </MenuItem>
))} ))}

2
apps/builder/components/settings/SettingsSideMenu.tsx
View File

@ -44,7 +44,7 @@ export const SettingsSideMenu = () => {
<Heading fontSize="xl" textAlign="center"> <Heading fontSize="xl" textAlign="center">
Settings Settings
</Heading> </Heading>
<Accordion allowMultiple allowToggle> <Accordion allowMultiple defaultIndex={[0]}>
<AccordionItem> <AccordionItem>
<AccordionButton py={6}> <AccordionButton py={6}>
<HStack flex="1" pl={2}> <HStack flex="1" pl={2}>

4
apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/WebhookSettings/WebhookSettings.tsx
View File

@ -187,7 +187,7 @@ export const WebhookSettings = ({
items={Object.values(HttpMethod)} items={Object.values(HttpMethod)}
/> />
</HStack> </HStack>
<Accordion allowToggle allowMultiple> <Accordion allowMultiple>
<AccordionItem> <AccordionItem>
<AccordionButton justifyContent="space-between"> <AccordionButton justifyContent="space-between">
Query params Query params
@ -274,7 +274,7 @@ export const WebhookSettings = ({
<CodeEditor isReadOnly lang="json" value={testResponse} /> <CodeEditor isReadOnly lang="json" value={testResponse} />
)} )}
{(testResponse || options?.responseVariableMapping.length > 0) && ( {(testResponse || options?.responseVariableMapping.length > 0) && (
<Accordion allowToggle allowMultiple> <Accordion allowMultiple>
<AccordionItem> <AccordionItem>
<AccordionButton justifyContent="space-between"> <AccordionButton justifyContent="space-between">
Save in variables Save in variables

2
apps/builder/components/theme/ThemeSideMenu.tsx
View File

@ -43,7 +43,7 @@ export const ThemeSideMenu = () => {
<Heading fontSize="xl" textAlign="center"> <Heading fontSize="xl" textAlign="center">
Customize the theme Customize the theme
</Heading> </Heading>
<Accordion allowMultiple allowToggle> <Accordion allowMultiple defaultIndex={[0]}>
<AccordionItem> <AccordionItem>
<AccordionButton py={6}> <AccordionButton py={6}>
<HStack flex="1" pl={2}> <HStack flex="1" pl={2}>

7
apps/builder/next.config.js
View File

@ -1,7 +1,12 @@
/* eslint-disable @typescript-eslint/no-var-requires */ /* eslint-disable @typescript-eslint/no-var-requires */
const { withSentryConfig } = require('@sentry/nextjs') const { withSentryConfig } = require('@sentry/nextjs')
const path = require('path') const path = require('path')
const withTM = require('next-transpile-modules')(['utils', 'models', 'emails']) const withTM = require('next-transpile-modules')([
'utils',
'models',
'emails',
'bot-engine',
])
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
const nextConfig = { const nextConfig = {

1
apps/builder/playwright/tests/settings.spec.ts
View File

@ -21,7 +21,6 @@ test.describe.parallel('Settings page', () => {
await expect( await expect(
typebotViewer(page).locator('a:has-text("Made with Typebot")') typebotViewer(page).locator('a:has-text("Made with Typebot")')
).toHaveAttribute('href', 'https://www.typebot.io/?utm_source=litebadge') ).toHaveAttribute('href', 'https://www.typebot.io/?utm_source=litebadge')
await page.click('button:has-text("General")')
await page.click('text="Typebot.io branding"') await page.click('text="Typebot.io branding"')
await expect( await expect(
typebotViewer(page).locator('a:has-text("Made with Typebot")') typebotViewer(page).locator('a:has-text("Made with Typebot")')

1
apps/builder/playwright/tests/theme.spec.ts
View File

@ -26,7 +26,6 @@ test.describe.parallel('Theme page', () => {
await expect( await expect(
typebotViewer(page).locator('button >> text="Go"') typebotViewer(page).locator('button >> text="Go"')
).toBeVisible() ).toBeVisible()
await page.click('button:has-text("General")')
// Font // Font
await page.fill('input[type="text"]', 'Roboto Slab') await page.fill('input[type="text"]', 'Roboto Slab')

4
apps/builder/playwright/tests/workspaces.spec.ts
View File

@ -81,6 +81,10 @@ test('can update workspace info', async ({ page }) => {
await page.fill('input[placeholder="Search..."]', 'building') await page.fill('input[placeholder="Search..."]', 'building')
await page.click('text="🏦"') await page.click('text="🏦"')
await page.fill('input[value="Pro workspace"]', 'My awesome workspace') await page.fill('input[value="Pro workspace"]', 'My awesome workspace')
await page.getByTestId('typebot-logo').click({ force: true })
await expect(
page.getByRole('button', { name: '🏦 My awesome workspace Pro' })
).toBeVisible()
}) })
test('can manage members', async ({ page }) => { test('can manage members', async ({ page }) => {

7
apps/viewer/next.config.js
View File

@ -1,7 +1,12 @@
/* eslint-disable @typescript-eslint/no-var-requires */ /* eslint-disable @typescript-eslint/no-var-requires */
const { withSentryConfig } = require('@sentry/nextjs') const { withSentryConfig } = require('@sentry/nextjs')
const path = require('path') const path = require('path')
const withTM = require('next-transpile-modules')(['utils', 'models', 'emails']) const withTM = require('next-transpile-modules')([
'utils',
'models',
'emails',
'bot-engine',
])
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
const nextConfig = { const nextConfig = {

3
apps/viewer/package.json
View File

@ -29,6 +29,7 @@
}, },
"devDependencies": { "devDependencies": {
"@babel/preset-env": "7.19.3", "@babel/preset-env": "7.19.3",
"@faire/mjml-react": "2.1.4",
"@playwright/test": "1.27.0", "@playwright/test": "1.27.0",
"@types/cors": "2.8.12", "@types/cors": "2.8.12",
"@types/google-spreadsheet": "3.3.0", "@types/google-spreadsheet": "3.3.0",
@ -42,7 +43,6 @@
"@typescript-eslint/parser": "5.39.0", "@typescript-eslint/parser": "5.39.0",
"dotenv": "16.0.3", "dotenv": "16.0.3",
"emails": "workspace:*", "emails": "workspace:*",
"encoding": "^0.1.13",
"eslint": "8.25.0", "eslint": "8.25.0",
"eslint-config-next": "12.3.1", "eslint-config-next": "12.3.1",
"eslint-plugin-react": "7.31.8", "eslint-plugin-react": "7.31.8",
@ -53,7 +53,6 @@
"node-fetch": "^3.2.10", "node-fetch": "^3.2.10",
"papaparse": "5.3.2", "papaparse": "5.3.2",
"typescript": "4.8.4", "typescript": "4.8.4",
"uglify-js": "3.17.3",
"utils": "workspace:*" "utils": "workspace:*"
} }
} }

19
packages/bot-engine/package.json
View File

@ -2,12 +2,12 @@
"name": "bot-engine", "name": "bot-engine",
"license": "AGPL-3.0-or-later", "license": "AGPL-3.0-or-later",
"version": "0.1.0", "version": "0.1.0",
"main": "dist/cjs/index.js", "main": "dist/index.js",
"module": "dist/esm/index.js", "module": "dist/index.mjs",
"types": "dist/index.d.ts", "types": "dist/index.d.ts",
"scripts": { "scripts": {
"build": "pnpm rollup -c", "build": "tsup",
"dev": "pnpm rollup -c --watch", "dev": "tsup --watch",
"lint": "eslint --fix -c ./.eslintrc.js \"./src/**/*.ts*\"" "lint": "eslint --fix -c ./.eslintrc.js \"./src/**/*.ts*\""
}, },
"dependencies": { "dependencies": {
@ -22,10 +22,6 @@
"resize-observer": "1.0.4" "resize-observer": "1.0.4"
}, },
"devDependencies": { "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/node": "18.8.3",
"@types/qs": "6.9.7", "@types/qs": "6.9.7",
"@types/react": "18.0.21", "@types/react": "18.0.21",
@ -35,6 +31,7 @@
"@typescript-eslint/eslint-plugin": "5.39.0", "@typescript-eslint/eslint-plugin": "5.39.0",
"@typescript-eslint/parser": "5.39.0", "@typescript-eslint/parser": "5.39.0",
"autoprefixer": "10.4.12", "autoprefixer": "10.4.12",
"baptistearno-tsup": "^0.1.0",
"db": "workspace:*", "db": "workspace:*",
"eslint": "8.25.0", "eslint": "8.25.0",
"eslint-config-next": "12.3.1", "eslint-config-next": "12.3.1",
@ -46,13 +43,7 @@
"prettier": "2.7.1", "prettier": "2.7.1",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "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", "tailwindcss": "3.1.8",
"tslib": "2.4.0",
"typescript": "4.8.4", "typescript": "4.8.4",
"utils": "workspace:*" "utils": "workspace:*"
}, },

52
packages/bot-engine/rollup.config.js
View File

@ -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$/],
},
]

147
packages/bot-engine/src/assets/phone.css
View File

@ -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 { .PhoneInputInput {
padding: 1rem 0.5rem; padding: 1rem 0.5rem;
outline: none !important; outline: none !important;

7
packages/bot-engine/src/components/TypebotViewer.tsx
View File

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

1
packages/bot-engine/src/components/global.d.ts vendored Normal file
View File

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

12
packages/bot-engine/tsup.config.js Normal file
View File

@ -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',
},
}))

2
packages/emails/emails/DefaultBotNotificationEmail.tsx
View File

@ -33,7 +33,7 @@ export const DefaultBotNotificationEmail = ({
<Text key={key}> <Text key={key}>
<b>{key}</b>:{' '} <b>{key}</b>:{' '}
{isEmail ? ( {isEmail ? (
<a href={answers[key]}>{answers[key]}</a> <a href={`mailto:${answers[key]}`}>{answers[key]}</a>
) : ( ) : (
answers[key] answers[key]
)} )}

12
packages/scripts/index.ts
View File

@ -8,8 +8,16 @@ require('dotenv').config({
), ),
}) })
const prisma = new PrismaClient() const prisma = new PrismaClient({ log: ['query', 'info', 'warn', 'error'] })
const main = async () => {} const main = async () => {
const workspaces = await prisma.workspace.findMany({
where: {
members: { some: { userId: 'coucou' } },
},
})
console.log(workspaces)
}
main().then() main().then()

1
packages/typebot-js/.npmignore
View File

@ -4,7 +4,6 @@ tests
.eslintignore .eslintignore
.eslintrc.js .eslintrc.js
jest.config.js jest.config.js
rollup.config.js
tsconfig.json tsconfig.json
examples examples
__mocks__ __mocks__

13
packages/typebot-js/examples/chatEmbedExample.html
View File

@ -11,16 +11,12 @@
margin: 0; margin: 0;
} }
</style> </style>
<script src="../dist/index.umd.min.js"></script> <script src="../dist/index.global.js"></script>
</head> </head>
<body> <body>
<script> <script>
const { open } = Typebot.initBubble({ Typebot.initBubble({
url: 'https://typebot.io/typebot-support', url: 'https://typebot.io/typebot-support',
button: {
color: 'green',
iconUrl: 'https://image.flaticon.com/icons/png/512/5138/5138352.png',
},
proactiveMessage: { proactiveMessage: {
avatarUrl: avatarUrl:
'https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80', 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80',
@ -31,7 +27,10 @@
}) })
</script> </script>
<div style="width: 100%; height: 300vh; background-color: aquamarine"> <div style="width: 100%; height: 300vh; background-color: aquamarine">
<button onclick="(()=>{open()})()" style="width: 200px; height: 60px"> <button
onclick="Typebot.getBubbleActions().open()"
style="width: 200px; height: 60px"
>
OPEN CHAT OPEN CHAT
</button> </button>
</div> </div>

18
packages/typebot-js/examples/containerEmbedExample.html
View File

@ -23,17 +23,19 @@
<div id="typebot-container-2" style="width: 1000px; height: 600px"></div> <div id="typebot-container-2" style="width: 1000px; height: 600px"></div>
</div> </div>
<div id="typebot-container-3" style="width: 1000px; height: 600px"></div> <div id="typebot-container-3" style="width: 1000px; height: 600px"></div>
<script src="../dist/index.umd.min.js"></script> <script src="../dist/index.global.js"></script>
<script> <script>
Typebot.initContainer("typebot-container", { publishId: "jamhouse" }); Typebot.initContainer('typebot-container', {
Typebot.initContainer("typebot-container-2", { url: 'https://viewer.typebot.io/lead-generation-copy-c3yiqz1',
publishId: "lead-generation", })
}); Typebot.initContainer('typebot-container-2', {
Typebot.initContainer("typebot-container-3", { url: 'https://viewer.typebot.io/kebab',
publishId: "feedback-form", })
Typebot.initContainer('typebot-container-3', {
url: 'https://viewer.typebot.io/typebot-support',
loadWhenVisible: false, loadWhenVisible: false,
}); })
</script> </script>
</body> </body>
</html> </html>

6
packages/typebot-js/examples/popupEmbedExample.html
View File

@ -13,12 +13,12 @@
</style> </style>
</head> </head>
<body> <body>
<script src="../dist/index.umd.min.js"></script> <script src="../dist/index.global.js"></script>
<script> <script>
const { open } = Typebot.initPopup({ const { open } = Typebot.initPopup({
publishId: "feedback-form", publishId: 'feedback-form',
delay: 1000, delay: 1000,
}); })
</script> </script>
<div style="width: 100%; height: 300vh; background-color: aquamarine"> <div style="width: 100%; height: 300vh; background-color: aquamarine">
<button onclick="(()=>{open()})()">CLICK</button> <button onclick="(()=>{open()})()">CLICK</button>

12
packages/typebot-js/package.json
View File

@ -5,28 +5,24 @@
"unpkg": "dist/index.umd.min.js", "unpkg": "dist/index.umd.min.js",
"license": "AGPL-3.0-or-later", "license": "AGPL-3.0-or-later",
"scripts": { "scripts": {
"dev": "pnpm rollup -c --watch", "dev": "tsup --watch",
"build": "pnpm lint && rollup -c", "build": "tsup",
"lint": "eslint src --ext .ts && eslint tests --ext .ts", "lint": "eslint src --ext .ts && eslint tests --ext .ts",
"test": "pnpm jest" "test": "pnpm jest"
}, },
"devDependencies": { "devDependencies": {
"jest-environment-jsdom": "29.1.2",
"@rollup/plugin-typescript": "8.5.0",
"@types/jest": "29.1.2", "@types/jest": "29.1.2",
"@typescript-eslint/eslint-plugin": "5.39.0", "@typescript-eslint/eslint-plugin": "5.39.0",
"@typescript-eslint/parser": "5.39.0", "@typescript-eslint/parser": "5.39.0",
"baptistearno-tsup": "^0.1.0",
"eslint": "8.25.0", "eslint": "8.25.0",
"eslint-plugin-functional": "4.4.1", "eslint-plugin-functional": "4.4.1",
"eslint-plugin-jest": "27.1.1", "eslint-plugin-jest": "27.1.1",
"eslint-plugin-prettier": "4.2.1", "eslint-plugin-prettier": "4.2.1",
"jest": "29.1.2", "jest": "29.1.2",
"jest-environment-jsdom": "29.1.2",
"prettier": "2.7.1", "prettier": "2.7.1",
"rollup": "2.79.1",
"rollup-plugin-styles": "4.0.0",
"rollup-plugin-terser": "7.0.2",
"ts-jest": "29.0.3", "ts-jest": "29.0.3",
"tslib": "2.4.0",
"typescript": "4.8.4" "typescript": "4.8.4"
} }
} }

26
packages/typebot-js/rollup.config.js
View File

@ -1,26 +0,0 @@
import typescript from "@rollup/plugin-typescript";
import { terser } from "rollup-plugin-terser";
import styles from "rollup-plugin-styles";
export default [
// ES Modules
{
input: "src/index.ts",
output: {
file: "dist/index.js",
format: "cjs",
},
plugins: [typescript({ tsconfig: "./tsconfig.json" }), styles()],
},
// UMD
{
input: "src/index.ts",
output: {
file: "dist/index.umd.min.js",
format: "umd",
name: "Typebot",
},
plugins: [typescript({ tsconfig: "./tsconfig.json" }), terser(), styles()],
},
];

11
packages/typebot-js/tsup.config.js Normal file
View File

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

792
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff