Skip to content

Commit

Permalink
👷 Build js embed lib with tsup
Browse files Browse the repository at this point in the history
  • Loading branch information
baptisteArno committed Oct 19, 2024
1 parent bce9141 commit c6e8594
Show file tree
Hide file tree
Showing 25 changed files with 1,031 additions and 1,610 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,6 @@ test.describe("Send email block", () => {
page.locator(`button >> text=${env.SMTP_USERNAME}`),
).toBeVisible();

await page.fill(
'[placeholder="[email protected], [email protected]"]',
"[email protected], [email protected]",
);
await expect(page.locator("span >> [email protected]")).toBeVisible();
await expect(page.locator("span >> [email protected]")).toBeVisible();

await page.fill(
'[placeholder="[email protected], [email protected]"]',
"[email protected], [email protected]",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/deploy/web/libraries/next-js.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/deploy/web/libraries/react.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ title: React
## Install

```bash
npm install @typebot.io/js @typebot.io/react
npm install @typebot.io/react
```

## Standard
Expand Down
2 changes: 1 addition & 1 deletion apps/landing-page/src/app/blog/react-chatbot/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
Binary file modified bun.lockb
Binary file not shown.
3 changes: 1 addition & 2 deletions packages/deprecated/bot-engine/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
54 changes: 27 additions & 27 deletions packages/embeds/js/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/[email protected]/dist/web.js'
import Typebot from "https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/dist/web.js";
Typebot.initStandard({
typebot: 'my-typebot',
})
typebot: "my-typebot",
});
</script>

<typebot-standard style="width: 100%; height: 600px; "></typebot-standard>
Expand All @@ -54,13 +54,13 @@ Here is an example:

```html
<script type="module">
import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/dist/web.js'
import Typebot from "https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/dist/web.js";
Typebot.initPopup({
typebot: 'my-typebot',
apiHost: 'http://localhost:3001',
typebot: "my-typebot",
apiHost: "http://localhost:3001",
autoShowDelay: 3000,
})
});
</script>
```

Expand All @@ -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:
Expand All @@ -96,21 +96,21 @@ Here is an example:

```html
<script type="module">
import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/dist/web.js'
import Typebot from "https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/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://avatars.githubusercontent.com/u/16015833?v=4',
avatarUrl: "https://avatars.githubusercontent.com/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>
```

Expand All @@ -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:
Expand All @@ -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).
Expand Down
55 changes: 20 additions & 35 deletions packages/embeds/js/package.json
Original file line number Diff line number Diff line change
@@ -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:*",
Expand All @@ -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"
Expand Down
3 changes: 3 additions & 0 deletions packages/embeds/js/postcss.config.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
module.exports = {
plugins: [require("tailwindcss")(), require("autoprefixer")()],
};
80 changes: 0 additions & 80 deletions packages/embeds/js/rollup.config.js

This file was deleted.

1 change: 0 additions & 1 deletion packages/embeds/js/src/register.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Loading

0 comments on commit c6e8594

Please sign in to comment.