Skip to content

Commit bf1bdb0

Browse files
SutuSebastiancoderabbitai[bot]
SutuSebastian
and
coderabbitai[bot]
authored
packages(ui): build step using rollup + tsc (#1344)
* refactor: packages(ui) - use `rollup` to build and transpile + tsc for dts files [WIP] * chore: packages(ui) - remove `rollup-plugin-delete` replace with local plugin using `rimraf` * fix: packages(ui) - build step generateDts overriding the rest * fix: packages(ui) - rework tsconfig files chore: apps(web) - update `tailwind.config` to use `.mjs` * feat: packages(ui) - create tailwind plugin for easier management of the `content` and `plugins` values for `tailwind.config.js` - change build output folder from `lib` to `dist` - chore: apps(web): use new plugi in `tailwind.config` * feat: packages(ui) - remove tailwind plugin and replace it with `tailwind` file which exports getters for `content` and `plugin` chore: apps(web): use new `flowbite-react/tailwind` in `tailwind.config` * chore: remove comments * chore: remove unused package * chore: remove rollup external leftover path * chore: add `trustedDependencies` for `postinstall` script to work in CI env * chore: get rid of `postinstall` lifecycle script and configure turborepo to handle the sequence of `apps/web` build and dev scripts * fix: turborepo `packages/ui` script dependencies * chore: rollup config - remove redundant array structure * chore: simplify turbo configs + fix `packages/ui` outputs path * chore: update docs introduction and installation guides to new config * fix: docs redwood guide tailwind config path * chore: remove comment * fix: docs redwood guide tailwind config path typo * chore: add changeset * Update .changeset/hungry-toys-care.md Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update .changeset/hungry-toys-care.md Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update .changeset/hungry-toys-care.md Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update .changeset/hungry-toys-care.md Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * chore: bump version minor --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
1 parent 65e7c89 commit bf1bdb0

23 files changed

+319
-118
lines changed

‎.changeset/hungry-toys-care.md

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
---
2+
"flowbite-react": minor
3+
---
4+
5+
## Rework build process using `rollup` and `tsc`
6+
7+
### Summary
8+
9+
In order to bring more performance to the build process of `flowbite-react` package, we have to consider transpiling the files using other tools rather than `tsc`, which is very slow.
10+
11+
After evaluating various tools including `tsup`, `tshy`, and `bun build`, we chose `rollup` with the `esbuild` plugin for transpiling due to its performance and flexibility. We continue to use `tsc` solely for generating `*.d.ts` declaration files.
12+
13+
### Changes
14+
15+
- added `rollup` + `esbuild` for transpiling files
16+
- all files in the `cjs` directory now have `.cjs` extension
17+
- all files in the `esm` directory now have `.mjs` extension
18+
- declaration file types (`*.d.ts`) have been moved from `dist/esm` to `dist/types`
19+
- changed the build output dir from `lib` to `dist`
20+
- created a facade layer for easier management of the `content` path as well as the `plugin`
21+
- fixed turbo repo dependency tree configs in order for `apps/web` to properly pipe and require the build output of `packages/ui` in certain script steps such as `build` and `dev`
22+
23+
### Breaking changes
24+
25+
`tailwind.config.js` `content` path:
26+
27+
old: `"node_modules/flowbite-react/lib/esm/**/*.js"`
28+
29+
new: `"node_modules/flowbite-react/dist/esm/**/*.mjs"` - (`flowbite.content()` returns it)
30+
31+
Before
32+
33+
```js {5,9}
34+
/** @type {import('tailwindcss').Config} */
35+
module.exports = {
36+
content: [
37+
// ...
38+
"node_modules/flowbite-react/lib/esm/**/*.js",
39+
],
40+
plugins: [
41+
// ...
42+
require("flowbite/plugin"),
43+
],
44+
};
45+
```
46+
47+
After
48+
49+
```js {1,7,11}
50+
const flowbite = require("flowbite-react/tailwind");
51+
52+
/** @type {import('tailwindcss').Config} */
53+
module.exports = {
54+
content: [
55+
// ...
56+
flowbite.content(),
57+
],
58+
plugins: [
59+
// ...
60+
flowbite.plugin(),
61+
],
62+
};
63+
```

‎apps/web/content/docs/getting-started/introduction.mdx

+8-31
Original file line numberDiff line numberDiff line change
@@ -13,32 +13,7 @@ Learn how to get started with Flowbite React and start leveraging the interactiv
1313

1414
### Setup Tailwind CSS
1515

16-
Install Tailwind CSS:
17-
18-
```bash
19-
npm i autoprefixer postcss tailwindcss
20-
npx tailwindcss init -p
21-
```
22-
23-
Point Tailwind CSS to files you have `className=".."` in:
24-
25-
```javascript
26-
module.exports = {
27-
content: ["./src/**/*.{js,jsx,ts,tsx}" /* src folder, for example */],
28-
theme: {
29-
extend: {},
30-
},
31-
plugins: [],
32-
};
33-
```
34-
35-
Add Tailwind CSS to a CSS file:
36-
37-
```css
38-
@tailwind base;
39-
@tailwind components;
40-
@tailwind utilities;
41-
```
16+
Install Tailwind CSS by following the [official installation guide](https://tailwindcss.com/docs/installation).
4217

4318
### Install Flowbite React
4419

@@ -48,18 +23,20 @@ Add Tailwind CSS to a CSS file:
4823
npm i flowbite-react
4924
```
5025

51-
2. Add the Flowbite plugin to `tailwind.config.js`, and include content from `flowbite-react`:
26+
2. Add the Flowbite React `content` path and `plugin` to `tailwind.config.js`:
27+
28+
```js {1,7,11}
29+
const flowbite = require("flowbite-react/tailwind");
5230

53-
```js {5,9}
5431
/** @type {import('tailwindcss').Config} */
55-
export default {
32+
module.exports = {
5633
content: [
5734
// ...
58-
"node_modules/flowbite-react/lib/esm/**/*.js",
35+
flowbite.content(),
5936
],
6037
plugins: [
6138
// ...
62-
require("flowbite/plugin"),
39+
flowbite.plugin(),
6340
],
6441
};
6542
```

‎apps/web/content/docs/guides/astro.mdx

+6-4
Original file line numberDiff line numberDiff line change
@@ -57,18 +57,20 @@ npx astro add tailwind
5757
npm i flowbite-react
5858
```
5959

60-
2. Add the Flowbite plugin to `tailwind.config.mjs` and include content from `flowbite-react`:
60+
2. Add the Flowbite React `content` path and `plugin` to `tailwind.config.mjs`:
61+
62+
```js {1,7,11}
63+
import flowbite from "flowbite-react/tailwind";
6164

62-
```js {5,9}
6365
/** @type {import('tailwindcss').Config} */
6466
export default {
6567
content: [
6668
// ...
67-
"node_modules/flowbite-react/lib/esm/**/*.js",
69+
flowbite.content(),
6870
],
6971
plugins: [
7072
// ...
71-
require("flowbite/plugin"),
73+
flowbite.plugin(),
7274
],
7375
};
7476
```

‎apps/web/content/docs/guides/create-react-app.mdx

+7-5
Original file line numberDiff line numberDiff line change
@@ -74,18 +74,20 @@ module.exports = {
7474
npm i flowbite-react
7575
```
7676

77-
2. Add the Flowbite plugin to `tailwind.config.js` and include content from `flowbite-react`:
77+
2. Add the Flowbite React `content` path and `plugin` to `tailwind.config.js`:
78+
79+
```js {1,7,11}
80+
const flowbite = require("flowbite-react/tailwind");
7881

79-
```js {5,9}
8082
/** @type {import('tailwindcss').Config} */
81-
export default {
83+
module.exports = {
8284
content: [
8385
// ...
84-
"node_modules/flowbite-react/lib/esm/**/*.js",
86+
flowbite.content(),
8587
],
8688
plugins: [
8789
// ...
88-
require("flowbite/plugin"),
90+
flowbite.plugin(),
8991
],
9092
};
9193
```

‎apps/web/content/docs/guides/gatsby.mdx

+6-4
Original file line numberDiff line numberDiff line change
@@ -41,18 +41,20 @@ npm init gatsby
4141
npm i flowbite-react
4242
```
4343

44-
2. Add the Flowbite plugin to `tailwind.config.js` and include content from `flowbite-react`:
44+
2. Add the Flowbite React `content` path and `plugin` to `tailwind.config.js`:
45+
46+
```js {1,7,11}
47+
import flowbite from "flowbite-react/tailwind";
4548

46-
```js {5,9}
4749
/** @type {import('tailwindcss').Config} */
4850
export default {
4951
content: [
5052
// ...
51-
"node_modules/flowbite-react/lib/esm/**/*.js",
53+
flowbite.content(),
5254
],
5355
plugins: [
5456
// ...
55-
require("flowbite/plugin"),
57+
flowbite.plugin(),
5658
],
5759
};
5860
```

‎apps/web/content/docs/guides/laravel.mdx

+6-4
Original file line numberDiff line numberDiff line change
@@ -41,18 +41,20 @@ laravel new flowbite-react-laravel --breeze --stack=react
4141
npm i flowbite-react
4242
```
4343

44-
2. Add the Flowbite plugin to `tailwind.config.js` and include content from `flowbite-react`:
44+
2. Add the Flowbite React `content` path and `plugin` to `tailwind.config.js`:
45+
46+
```js {1,7,11}
47+
import flowbite from "flowbite-react/tailwind";
4548

46-
```js {5,9}
4749
/** @type {import('tailwindcss').Config} */
4850
export default {
4951
content: [
5052
// ...
51-
"node_modules/flowbite-react/lib/esm/**/*.js",
53+
flowbite.content(),
5254
],
5355
plugins: [
5456
// ...
55-
require("flowbite/plugin"),
57+
flowbite.plugin(),
5658
],
5759
};
5860
```

‎apps/web/content/docs/guides/next-js.mdx

+13-9
Original file line numberDiff line numberDiff line change
@@ -45,18 +45,20 @@ npm i flowbite-react
4545

4646
### Configure Tailwind CSS
4747

48-
Open `tailwind.config.js` and update `content` and `plugins` to include Flowbite React:
48+
Open `tailwind.config.ts` and update `content` and `plugins` to include Flowbite React:
49+
50+
```js {1,7,11}
51+
import flowbite from "flowbite-react/tailwind";
4952

50-
```js {5,9}
5153
/** @type {import('tailwindcss').Config} */
5254
export default {
5355
content: [
5456
// ...
55-
"node_modules/flowbite-react/lib/esm/**/*.js",
57+
flowbite.content(),
5658
],
5759
plugins: [
5860
// ...
59-
require("flowbite/plugin"),
61+
flowbite.plugin(),
6062
],
6163
};
6264
```
@@ -115,18 +117,20 @@ module.exports = {
115117
npm i flowbite-react
116118
```
117119

118-
2. Add the Flowbite plugin to `tailwind.config.js` and include content from `flowbite-react`:
120+
2. Add the Flowbite React `content` path and `plugin` to `tailwind.config.js`:
121+
122+
```js {1,7,11}
123+
const flowbite = require("flowbite-react/tailwind");
119124

120-
```js {5,9}
121125
/** @type {import('tailwindcss').Config} */
122-
export default {
126+
module.exports = {
123127
content: [
124128
// ...
125-
"node_modules/flowbite-react/lib/esm/**/*.js",
129+
flowbite.content(),
126130
],
127131
plugins: [
128132
// ...
129-
require("flowbite/plugin"),
133+
flowbite.plugin(),
130134
],
131135
};
132136
```

‎apps/web/content/docs/guides/parcel.mdx

+7-5
Original file line numberDiff line numberDiff line change
@@ -199,18 +199,20 @@ module.exports = {
199199
npm i flowbite-react
200200
```
201201

202-
2. Add the Flowbite plugin to `tailwind.config.js` and include content from `flowbite-react`:
202+
2. Add the Flowbite React `content` path and `plugin` to `tailwind.config.js`:
203+
204+
```js {1,7,11}
205+
const flowbite = require("flowbite-react/tailwind");
203206

204-
```js {5,9}
205207
/** @type {import('tailwindcss').Config} */
206-
export default {
208+
module.exports = {
207209
content: [
208210
// ...
209-
"node_modules/flowbite-react/lib/esm/**/*.js",
211+
flowbite.content(),
210212
],
211213
plugins: [
212214
// ...
213-
require("flowbite/plugin"),
215+
flowbite.plugin(),
214216
],
215217
};
216218
```

‎apps/web/content/docs/guides/redwood-js.mdx

+6-4
Original file line numberDiff line numberDiff line change
@@ -53,18 +53,20 @@ yarn rw setup ui tailwindcss
5353
yarn workspace web add flowbite-react
5454
```
5555

56-
2. Add the Flowbite plugin to `tailwind.config.js` and include content from `flowbite-react`:
56+
2. Add the Flowbite React `content` path and `plugin` to `web/config/tailwind.config.js`:
57+
58+
```js {1,7,11}
59+
const flowbite = require("flowbite-react/tailwind");
5760

58-
```js {5,9}
5961
/** @type {import('tailwindcss').Config} */
6062
module.exports = {
6163
content: [
6264
// ...
63-
"../node_modules/flowbite-react/lib/esm/**/*.js",
65+
flowbite.content({ base: "../" }),
6466
],
6567
plugins: [
6668
// ...
67-
require("flowbite/plugin"),
69+
flowbite.plugin(),
6870
],
6971
};
7072
```

‎apps/web/content/docs/guides/remix.mdx

+4-4
Original file line numberDiff line numberDiff line change
@@ -86,21 +86,21 @@ export const links: LinksFunction = () => [
8686
npm i flowbite-react
8787
```
8888

89-
2. Add the Flowbite plugin to `tailwind.config.ts` and include content from `flowbite-react`:
89+
2. Add the Flowbite React `content` path and `plugin` to `tailwind.config.ts`:
9090

9191
```ts {1,8,12}
92-
import flowbite from "flowbite/plugin";
92+
import flowbite from "flowbite-react/tailwind";
9393

9494
import type { Config } from "tailwindcss";
9595

9696
export default {
9797
content: [
9898
// ...
99-
"node_modules/flowbite-react/lib/esm/**/*.js",
99+
flowbite.content(),
100100
],
101101
plugins: [
102102
// ...
103-
flowbite,
103+
flowbite.plugin(),
104104
],
105105
} satisfies Config;
106106
```

‎apps/web/content/docs/guides/vite.mdx

+7-5
Original file line numberDiff line numberDiff line change
@@ -74,18 +74,20 @@ module.exports = {
7474
npm i flowbite-react
7575
```
7676

77-
2. Add the Flowbite plugin to `tailwind.config.js` and include content from `flowbite-react`:
77+
2. Add the Flowbite React `content` path and `plugin` to `tailwind.config.js`:
78+
79+
```js {1,7,11}
80+
const flowbite = require("flowbite-react/tailwind");
7881

79-
```js {5,9}
8082
/** @type {import('tailwindcss').Config} */
81-
export default {
83+
module.exports = {
8284
content: [
8385
// ...
84-
"node_modules/flowbite-react/lib/esm/**/*.js",
86+
flowbite.content(),
8587
],
8688
plugins: [
8789
// ...
88-
require("flowbite/plugin"),
90+
flowbite.plugin(),
8991
],
9092
};
9193
```

0 commit comments

Comments
 (0)