packages(ui): build step using rollup + tsc (themesberg#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>

Author: SutuSebastian

.eslintrc.cjs

@@ -40,7 +40,7 @@ module.exports = {
       classRegex: "^(class(Name)|theme)?$",
     },
   },
-  ignorePatterns: ["lib"],
+  ignorePatterns: ["dist"],
   rules: {
     "no-undef": "off",
     "react/prop-types": "off",

.gitignore

@@ -1,2 +1,2 @@
 coverage
-lib
+dist

package.json

@@ -21,31 +21,32 @@
   "license": "MIT",
   "exports": {
     ".": {
-      "types": "./lib/types/index.d.ts",
-      "import": "./lib/esm/index.js",
-      "require": "./lib/cjs/index.js"
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs"
     },
     "./components/*": {
-      "types": "./lib/types/components/*/index.d.ts",
-      "import": "./lib/esm/components/*/index.js",
-      "require": "./lib/cjs/components/*/index.js"
+      "types": "./dist/types/components/*/index.d.ts",
+      "import": "./dist/esm/components/*/index.mjs",
+      "require": "./dist/cjs/components/*/index.cjs"
+    },
+    "./tailwind": {
+      "types": "./dist/types/tailwind.d.ts",
+      "import": "./dist/esm/tailwind.mjs",
+      "require": "./dist/cjs/tailwind.cjs"
     },
     "./package.json": "./package.json"
   },
-  "main": "lib/cjs/index.js",
-  "module": "lib/esm/index.js",
-  "types": "lib/types/index.d.ts",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.mjs",
+  "types": "dist/types/index.d.ts",
   "files": [
-    "lib"
+    "dist"
   ],
   "scripts": {
-    "build": "rimraf lib && bun build:fast",
-    "build:cjs": "tsc -p tsconfig.build.json --module CommonJS --outDir lib/cjs",
-    "build:esm": "tsc -p tsconfig.build.json --module ESNext --outDir lib/esm",
-    "build:fast": "bun build:cjs && bun build:esm && bun build:types",
-    "build:types": "tsc -p tsconfig.build.json --declaration --emitDeclarationOnly --outDir lib/types",
-    "clean": "rimraf .turbo coverage lib node_modules tsconfig.tsbuildinfo",
-    "dev": "bun build:fast --watch",
+    "build": "bun --bun rollup -c",
+    "clean": "rimraf .turbo coverage dist node_modules tsconfig.tsbuildinfo",
+    "dev": "bun run build --watch",
     "format": "prettier . --write",
     "format:check": "prettier . --check",
     "lint": "eslint .",
@@ -78,8 +79,11 @@
     "eslint-plugin-react": "7.34.1",
     "eslint-plugin-storybook": "0.8.0",
     "eslint-plugin-vitest": "0.4.1",
+    "fast-glob": "3.3.2",
     "jsdom": "24.0.0",
-    "mime": "^4.0.1",
+    "rollup": "4.13.2",
+    "rollup-plugin-esbuild": "6.1.1",
+    "rollup-plugin-use-client": "1.4.0",
     "typescript": "5.4.3",
     "vitest": "1.4.0"
   },

rollup.config.mjs

@@ -0,0 +1,76 @@
+import { $ } from "bun";
+import glob from "fast-glob";
+import { rimraf } from "rimraf";
+import esbuild from "rollup-plugin-esbuild";
+import { rollupPluginUseClient } from "rollup-plugin-use-client";
+import packageJson from "./package.json";
+
+const componentEntries = await glob("src/components/**/index.ts");
+const entries = ["src/index.ts", "src/tailwind.ts", ...componentEntries];
+const external = [
+  "flowbite/plugin",
+  "react-icons/fa",
+  "react-icons/hi",
+  "react/jsx-runtime",
+  ...Object.keys({
+    ...packageJson.dependencies,
+    ...packageJson.peerDependencies,
+  }),
+];
+const outputDir = "dist";
+
+/**
+ * @type {import('rollup').RollupOptions}
+ */
+export default {
+  input: entries,
+  output: [
+    {
+      format: "es",
+      dir: `${outputDir}/esm`,
+      entryFileNames: "[name].mjs",
+      preserveModules: true,
+      sourcemap: true,
+    },
+    {
+      format: "cjs",
+      dir: `${outputDir}/cjs`,
+      entryFileNames: "[name].cjs",
+      preserveModules: true,
+      sourcemap: true,
+    },
+  ],
+  external,
+  plugins: [
+    cleanOutputDir(),
+    esbuild({
+      sourceMap: false,
+    }),
+    rollupPluginUseClient(),
+    generateDts(),
+  ],
+  onwarn(warning, warn) {
+    if (warning.code === "MODULE_LEVEL_DIRECTIVE") {
+      return;
+    }
+    warn(warning);
+  },
+};
+
+function cleanOutputDir() {
+  return {
+    name: "clean-output-dir",
+    async buildStart() {
+      await rimraf(outputDir);
+    },
+  };
+}
+
+function generateDts() {
+  return {
+    name: "generate-dts",
+    async closeBundle() {
+      await $`tsc -p tsconfig.build.json --outDir ${outputDir}/types`;
+    },
+  };
+}

src/tailwind.ts

@@ -0,0 +1,44 @@
+import flowbitePlugin from "flowbite/plugin";
+
+interface Content {
+  /**
+   * Path to `node_modules` where `flowbite-react` is installed
+   *
+   * ===============================================
+   *
+   * For monorepo setup where `flowbite-react` is installed in the root `node_modules` but used in `apps/web` directory
+   * @example
+   * ```
+   * // tailwind.config.(js|cjs|mjs) file
+   *
+   * // cjs
+   * const flowbite = require("flowbite-react/tailwind");
+   * // esm
+   * import flowbite from "flowbite-react/tailwind";
+   *
+   * {
+   *   content: [
+   *     // ...
+   *     flowbite.content({ base: "../../" })
+   *   ],
+   *   plugins: [
+   *     // ...
+   *     flowbite.plugin()
+   *   ]
+   * }
+   * ```
+   *
+   * @default "./"
+   */
+  base?: string;
+}
+
+export function content({ base = "./" }: Content = {}) {
+  const path = "node_modules/flowbite-react/dist/esm/**/*.mjs";
+
+  return `${base}${path}`;
+}
+
+export function plugin() {
+  return flowbitePlugin;
+}

tsconfig.build.json

@@ -1,10 +1,9 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "incremental": false,
-    "sourceMap": true,
-    "jsx": "react-jsx"
+    "declaration": true,
+    "emitDeclarationOnly": true
   },
   "include": ["src"],
-  "exclude": ["lib", "**/*.spec.ts", "**/*.spec.tsx", "**/*.stories.tsx"]
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.stories.tsx"]
 }

tsconfig.json

@@ -1,24 +1,30 @@
 {
   "compilerOptions": {
-    "allowJs": true,
+    /* Language and Environment */
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "jsx": "react-jsx",
+
+    /* Modules */
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "resolveJsonModule": true,
+
+    /* Interop Constraints */
+    "isolatedModules": true,
+    "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
-    "incremental": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "noEmit": false,
+
+    /* Type Checking */
+    "strict": true,
     "noImplicitAny": true,
-    "noImplicitThis": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "target": "ESNext"
+    "noFallthroughCasesInSwitch": true,
+
+    /* Completeness */
+    "skipLibCheck": true
   },
-  "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["lib"]
+  "include": ["**/*.ts", "**/*.tsx"]
 }

turbo.json

@@ -2,7 +2,7 @@
   "extends": ["//"],
   "pipeline": {
     "build": {
-      "outputs": ["lib/**"]
+      "outputs": ["dist/**"]
     }
   }
 }