packages(ui): build step using rollup + tsc

.changeset/hungry-toys-care.md

@@ -0,0 +1,63 @@
+---
+"flowbite-react": minor
+---
+
+## Rework build process using `rollup` and `tsc`
+
+### Summary
+
+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.
+
+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.
+
+### Changes
+
+- added `rollup` + `esbuild` for transpiling files
+  - all files in the `cjs` directory now have `.cjs` extension
+  - all files in the `esm` directory now have `.mjs` extension
+  - declaration file types (`*.d.ts`) have been moved from `dist/esm` to `dist/types`
+- changed the build output dir from `lib` to `dist`
+- created a facade layer for easier management of the `content` path as well as the `plugin`
+- 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`
+
+### Breaking changes
+
+`tailwind.config.js` `content` path:
+
+old: `"node_modules/flowbite-react/lib/esm/**/*.js"`
+
+new: `"node_modules/flowbite-react/dist/esm/**/*.mjs"` - (`flowbite.content()` returns it)
+
+Before
+
+```js {5,9}
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    // ...
+    "node_modules/flowbite-react/lib/esm/**/*.js",
+  ],
+  plugins: [
+    // ...
+    require("flowbite/plugin"),
+  ],
+};
+```
+
+After
+
+```js {1,7,11}
+const flowbite = require("flowbite-react/tailwind");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    // ...
+    flowbite.content(),
+  ],
+  plugins: [
+    // ...
+    flowbite.plugin(),
+  ],
+};
+```

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

@@ -13,32 +13,7 @@ Learn how to get started with Flowbite React and start leveraging the interactiv
 
 ### Setup Tailwind CSS
 
-Install Tailwind CSS:
-
-```bash
-npm i autoprefixer postcss tailwindcss
-npx tailwindcss init -p
-```
-
-Point Tailwind CSS to files you have `className=".."` in:
-
-```javascript
-module.exports = {
-  content: ["./src/**/*.{js,jsx,ts,tsx}" /* src folder, for example */],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};
-```
-
-Add Tailwind CSS to a CSS file:
-
-```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-```
+Install Tailwind CSS by following the [official installation guide](https://tailwindcss.com/docs/installation).
 
 ### Install Flowbite React
 
@@ -48,18 +23,20 @@ Add Tailwind CSS to a CSS file:
 npm i flowbite-react
 ```
 
-2. Add the Flowbite plugin to `tailwind.config.js`, and include content from `flowbite-react`:
+2. Add the Flowbite React `content` path and `plugin` to `tailwind.config.js`:
+
+```js {1,7,11}
+const flowbite = require("flowbite-react/tailwind");
 
-```js {5,9}
 /** @type {import('tailwindcss').Config} */
-export default {
+module.exports = {
   content: [
     // ...
-    "node_modules/flowbite-react/lib/esm/**/*.js",
+    flowbite.content(),
   ],
   plugins: [
     // ...
-    require("flowbite/plugin"),
+    flowbite.plugin(),
   ],
 };
 ```

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

@@ -57,18 +57,20 @@ npx astro add tailwind
 npm i flowbite-react
 ```
 
-2. Add the Flowbite plugin to `tailwind.config.mjs` and include content from `flowbite-react`:
+2. Add the Flowbite React `content` path and `plugin` to `tailwind.config.mjs`:
+
+```js {1,7,11}
+import flowbite from "flowbite-react/tailwind";
 
-```js {5,9}
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
     // ...
-    "node_modules/flowbite-react/lib/esm/**/*.js",
+    flowbite.content(),
   ],
   plugins: [
     // ...
-    require("flowbite/plugin"),
+    flowbite.plugin(),
   ],
 };
 ```

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

@@ -74,18 +74,20 @@ module.exports = {
 npm i flowbite-react
 ```
 
-2. Add the Flowbite plugin to `tailwind.config.js` and include content from `flowbite-react`:
+2. Add the Flowbite React `content` path and `plugin` to `tailwind.config.js`:
+
+```js {1,7,11}
+const flowbite = require("flowbite-react/tailwind");
 
-```js {5,9}
 /** @type {import('tailwindcss').Config} */
-export default {
+module.exports = {
   content: [
     // ...
-    "node_modules/flowbite-react/lib/esm/**/*.js",
+    flowbite.content(),
   ],
   plugins: [
     // ...
-    require("flowbite/plugin"),
+    flowbite.plugin(),
   ],
 };
 ```

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

@@ -41,18 +41,20 @@ npm init gatsby
 npm i flowbite-react
 ```
 
-2. Add the Flowbite plugin to `tailwind.config.js` and include content from `flowbite-react`:
+2. Add the Flowbite React `content` path and `plugin` to `tailwind.config.js`:
+
+```js {1,7,11}
+import flowbite from "flowbite-react/tailwind";
 
-```js {5,9}
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
     // ...
-    "node_modules/flowbite-react/lib/esm/**/*.js",
+    flowbite.content(),
   ],
   plugins: [
     // ...
-    require("flowbite/plugin"),
+    flowbite.plugin(),
   ],
 };
 ```

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

@@ -41,18 +41,20 @@ laravel new flowbite-react-laravel --breeze --stack=react
 npm i flowbite-react
 ```
 
-2. Add the Flowbite plugin to `tailwind.config.js` and include content from `flowbite-react`:
+2. Add the Flowbite React `content` path and `plugin` to `tailwind.config.js`:
+
+```js {1,7,11}
+import flowbite from "flowbite-react/tailwind";
 
-```js {5,9}
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
     // ...
-    "node_modules/flowbite-react/lib/esm/**/*.js",
+    flowbite.content(),
   ],
   plugins: [
     // ...
-    require("flowbite/plugin"),
+    flowbite.plugin(),
   ],
 };
 ```

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

@@ -45,18 +45,20 @@ npm i flowbite-react
 
 ### Configure Tailwind CSS
 
-Open `tailwind.config.js` and update `content` and `plugins` to include Flowbite React:
+Open `tailwind.config.ts` and update `content` and `plugins` to include Flowbite React:
+
+```js {1,7,11}
+import flowbite from "flowbite-react/tailwind";
 
-```js {5,9}
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
     // ...
-    "node_modules/flowbite-react/lib/esm/**/*.js",
+    flowbite.content(),
   ],
   plugins: [
     // ...
-    require("flowbite/plugin"),
+    flowbite.plugin(),
   ],
 };
 ```
@@ -115,18 +117,20 @@ module.exports = {
 npm i flowbite-react
 ```
 
-2. Add the Flowbite plugin to `tailwind.config.js` and include content from `flowbite-react`:
+2. Add the Flowbite React `content` path and `plugin` to `tailwind.config.js`:
+
+```js {1,7,11}
+const flowbite = require("flowbite-react/tailwind");
 
-```js {5,9}
 /** @type {import('tailwindcss').Config} */
-export default {
+module.exports = {
   content: [
     // ...
-    "node_modules/flowbite-react/lib/esm/**/*.js",
+    flowbite.content(),
   ],
   plugins: [
     // ...
-    require("flowbite/plugin"),
+    flowbite.plugin(),
   ],
 };
 ```

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

@@ -199,18 +199,20 @@ module.exports = {
 npm i flowbite-react
 ```
 
-2. Add the Flowbite plugin to `tailwind.config.js` and include content from `flowbite-react`:
+2. Add the Flowbite React `content` path and `plugin` to `tailwind.config.js`:
+
+```js {1,7,11}
+const flowbite = require("flowbite-react/tailwind");
 
-```js {5,9}
 /** @type {import('tailwindcss').Config} */
-export default {
+module.exports = {
   content: [
     // ...
-    "node_modules/flowbite-react/lib/esm/**/*.js",
+    flowbite.content(),
   ],
   plugins: [
     // ...
-    require("flowbite/plugin"),
+    flowbite.plugin(),
   ],
 };
 ```

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

@@ -53,18 +53,20 @@ yarn rw setup ui tailwindcss
 yarn workspace web add flowbite-react
 ```
 
-2. Add the Flowbite plugin to `tailwind.config.js` and include content from `flowbite-react`:
+2. Add the Flowbite React `content` path and `plugin` to `web/config/tailwind.config.js`:
+
+```js {1,7,11}
+const flowbite = require("flowbite-react/tailwind");
 
-```js {5,9}
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     // ...
-    "../node_modules/flowbite-react/lib/esm/**/*.js",
+    flowbite.content({ base: "../" }),
   ],
   plugins: [
     // ...
-    require("flowbite/plugin"),
+    flowbite.plugin(),
   ],
 };
 ```

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

@@ -86,21 +86,21 @@ export const links: LinksFunction = () => [
 npm i flowbite-react
 ```
 
-2. Add the Flowbite plugin to `tailwind.config.ts` and include content from `flowbite-react`:
+2. Add the Flowbite React `content` path and `plugin` to `tailwind.config.ts`:
 
 ```ts {1,8,12}
-import flowbite from "flowbite/plugin";
+import flowbite from "flowbite-react/tailwind";
 
 import type { Config } from "tailwindcss";
 
 export default {
   content: [
     // ...
-    "node_modules/flowbite-react/lib/esm/**/*.js",
+    flowbite.content(),
   ],
   plugins: [
     // ...
-    flowbite,
+    flowbite.plugin(),
   ],
 } satisfies Config;
 ```

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

@@ -74,18 +74,20 @@ module.exports = {
 npm i flowbite-react
 ```
 
-2. Add the Flowbite plugin to `tailwind.config.js` and include content from `flowbite-react`:
+2. Add the Flowbite React `content` path and `plugin` to `tailwind.config.js`:
+
+```js {1,7,11}
+const flowbite = require("flowbite-react/tailwind");
 
-```js {5,9}
 /** @type {import('tailwindcss').Config} */
-export default {
+module.exports = {
   content: [
     // ...
-    "node_modules/flowbite-react/lib/esm/**/*.js",
+    flowbite.content(),
   ],
   plugins: [
     // ...
-    require("flowbite/plugin"),
+    flowbite.plugin(),
   ],
 };
 ```