Drop microbundle for tsup (#3580)

* chore(dev-deps): remove vercel/node

* chore(dev-deps): drop microbundle, use tsup

* ci: perf, do not run prisma when not needed

* fix: tailwind class order

* fix: tailwind class order

Author: belgattitude

.github/workflows/ci-monorepo-integrity.yml

@@ -35,6 +35,8 @@ jobs:
 
       - name: 📥 Monorepo install
         uses: ./.github/actions/yarn-nm-install
+        with:
+          skip-prisma-postinstall-generate: true
 
       - name: 👬🏽 Check for duplicate dependencies in lock file
         run: yarn dedupe --check

apps/nextjs-app/src/components/banner/Banner.tsx

@@ -24,7 +24,7 @@ export const Banner: FC<Props> = () => {
           <div className="order-3 mt-2 w-full shrink-0 sm:order-2 sm:mt-0 sm:w-auto">
             <a
               href="@/components/banner/Banner#"
-              className="flex items-center justify-center rounded-md border border-transparent bg-white py-2 px-4 text-sm font-medium text-indigo-600 shadow-sm hover:bg-indigo-50"
+              className="flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-2 text-sm font-medium text-indigo-600 shadow-sm hover:bg-indigo-50"
             >
               Learn more
             </a>

apps/nextjs-app/src/components/banner/__tests__/__snapshots__/Banner.test.tsx.snap

@@ -47,7 +47,7 @@ exports[`should match snapshot 1`] = `
         className="order-3 mt-2 w-full shrink-0 sm:order-2 sm:mt-0 sm:w-auto"
       >
         <a
-          className="flex items-center justify-center rounded-md border border-transparent bg-white py-2 px-4 text-sm font-medium text-indigo-600 shadow-sm hover:bg-indigo-50"
+          className="flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-2 text-sm font-medium text-indigo-600 shadow-sm hover:bg-indigo-50"
           href="@/components/banner/Banner#"
         >
           Learn more

apps/nextjs-app/src/features/auth/components/LoginForm.tsx

@@ -91,7 +91,7 @@ export const LoginForm: FC<Props> = (_props) => {
         type="submit"
         disabled={isSubmitting}
         className={clsx(
-          'inline-flex justify-center rounded-md border border-transparent py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2',
+          'inline-flex justify-center rounded-md border border-transparent px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2',
           isSubmitting ? 'bg-indigo-100' : 'bg-indigo-600'
         )}
       >

apps/nextjs-app/src/features/demo/components/PoemCard.tsx

@@ -18,24 +18,24 @@ export const PoemCard: FC<Props> = (props) => {
   const image = img ?? defaultImg;
   return (
     <div className="max-w-sm overflow-hidden rounded shadow-lg">
-      <div className="aspect-w-16 aspect-h-9 h-56 lg:aspect-none">
+      <div className="aspect-h-9 aspect-w-16 h-56 lg:aspect-none">
         <img
           className="h-full w-full object-cover object-center lg:h-full lg:w-full"
           src={image ?? ''}
           alt={title}
         />
       </div>
-      <article className="prose py-4 px-6">
+      <article className="prose px-6 py-4">
         <div className="mb-2 text-xl font-bold">{title}</div>
         <p className="text-indigo-600">By {author}</p>
-        <p className="text-base text-gray-700 line-clamp-4">{content}</p>
+        <p className="line-clamp-4 text-base text-gray-700">{content}</p>
       </article>
-      <div className="px-6 pt-4 pb-2">
+      <div className="px-6 pb-2 pt-4">
         {keywords.map((keyword) => {
           return (
             <span
               key={keyword}
-              className="mr-2 mb-2 inline-block rounded-full bg-gray-200 py-1 px-3 text-sm font-semibold text-gray-700"
+              className="mb-2 mr-2 inline-block rounded-full bg-gray-200 px-3 py-1 text-sm font-semibold text-gray-700"
             >
               #{keyword}
             </span>

apps/nextjs-app/src/features/home/blocks/cta/CtaBlock.tsx

@@ -6,7 +6,7 @@ type Props = {
 export const CtaBlock: FC<Props> = () => {
   return (
     <div className="bg-gray-50">
-      <div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
+      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:flex lg:items-center lg:justify-between lg:px-8 lg:py-16">
         <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
           <span className="block">Ready to dive in?</span>
           <span className="block text-indigo-600">
@@ -17,15 +17,15 @@ export const CtaBlock: FC<Props> = () => {
           <div className="inline-flex rounded-md shadow">
             <a
               href="#"
-              className="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 py-3 px-5 text-base font-medium text-white hover:bg-indigo-700"
+              className="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white hover:bg-indigo-700"
             >
               Get started
             </a>
           </div>
           <div className="ml-3 inline-flex rounded-md shadow">
             <a
               href="#"
-              className="inline-flex items-center justify-center rounded-md border border-transparent bg-white py-3 px-5 text-base font-medium text-indigo-600 hover:bg-indigo-50"
+              className="inline-flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600 hover:bg-indigo-50"
             >
               Learn more
             </a>

apps/nextjs-app/src/features/home/blocks/features/FeaturesBlock.tsx

@@ -77,7 +77,7 @@ export const FeaturesBlock: FC<Props> = () => {
                       {feature.name}
                     </p>
                   </dt>
-                  <dd className="mt-2 ml-16 text-base text-gray-500">
+                  <dd className="ml-16 mt-2 text-base text-gray-500">
                     {feature.description}
                   </dd>
                 </div>

apps/nextjs-app/src/features/home/blocks/hero/HeroBlock.tsx

@@ -11,7 +11,7 @@ export const HeroBlock: FC<Props> = () => {
 
   return (
     <section className="body-font text-gray-600">
-      <div className="container mx-auto flex flex-col items-center py-24 px-5 md:flex-row">
+      <div className="container mx-auto flex flex-col items-center px-5 py-24 md:flex-row">
         <div className="mb-16 flex flex-col items-center text-center md:mb-0 md:w-1/2 md:items-start md:pr-16 md:text-left lg:grow lg:pr-24">
           <h1 className="title-font mb-4 text-3xl font-medium text-gray-900 sm:text-4xl">
             Before they sold out&nbsp;
@@ -25,10 +25,10 @@ export const HeroBlock: FC<Props> = () => {
             hexagon try-hard chambray.
           </p>
           <div className="flex justify-center">
-            <button className="inline-flex rounded border-0 bg-indigo-500 py-2 px-6 text-lg text-white hover:bg-indigo-600 focus:outline-none">
+            <button className="inline-flex rounded border-0 bg-indigo-500 px-6 py-2 text-lg text-white hover:bg-indigo-600 focus:outline-none">
               Button
             </button>
-            <button className="ml-4 inline-flex rounded border-0 bg-gray-100 py-2 px-6 text-lg text-gray-700 hover:bg-gray-200 focus:outline-none">
+            <button className="ml-4 inline-flex rounded border-0 bg-gray-100 px-6 py-2 text-lg text-gray-700 hover:bg-gray-200 focus:outline-none">
               Button
             </button>
           </div>

apps/nextjs-app/src/features/system/pages/ErrorPage.tsx

@@ -24,7 +24,7 @@ export const ErrorPage: FC<Props> = (props) => {
             Something went wrong. Please try again later.
           </p>
         </div>
-        <div className="absolute right-0 bottom-0 m-5 rounded-lg border-2 border-solid border-indigo-400 p-5 text-left text-sm text-gray-700">
+        <div className="absolute bottom-0 right-0 m-5 rounded-lg border-2 border-solid border-indigo-400 p-5 text-left text-sm text-gray-700">
           <p data-testid="error-status-code">Code: {statusCode}</p>
           <p>Message: {message}</p>
           <p>Error id: {errorId}</p>

apps/remix-app/package.json

@@ -41,7 +41,6 @@
     "@remix-run/react": "1.14.3",
     "@remix-run/serve": "1.14.3",
     "@remix-run/vercel": "1.14.3",
-    "@vercel/node": "2.10.2",
     "@your-org/common-i18n": "workspace:^",
     "@your-org/core-lib": "workspace:^",
     "@your-org/ui-lib": "workspace:^",

packages/core-lib/package.json

@@ -18,10 +18,9 @@
     "directory": "packages/core-lib"
   },
   "scripts": {
-    "build": "rimraf ./dist && cross-env NODE_ENV=production microbundle --tsconfig ./tsconfig.build.json --jsx React.createElement --jsxFragment React.Fragment -f cjs,es --no-compress",
-    "build-react17jsx": "microbundle --tsconfig ./tsconfig.build.json --jsx jsx --jsxImportSource react --globals react/jsx-runtime=jsx --compress",
+    "build": "tsup",
     "clean": "rimraf ./dist ./coverage ./tsconfig.tsbuildinfo",
-    "dev": "microbundle watch",
+    "dev": "tsup --watch",
     "fix-all-files": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs --fix",
     "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs --cache --cache-location ../../.cache/eslint/core-lib.eslintcache",
     "test": "run-s test-unit",
@@ -49,13 +48,13 @@
     "eslint": "8.37.0",
     "jest": "29.5.0",
     "jest-environment-jsdom": "29.5.0",
-    "microbundle": "0.15.1",
     "npm-run-all": "4.1.5",
     "prettier": "2.8.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rimraf": "4.4.1",
     "ts-jest": "29.0.5",
+    "tsup": "6.7.0",
     "typescript": "5.0.2",
     "vite": "4.2.1",
     "vite-tsconfig-paths": "4.0.7",

packages/core-lib/tsconfig.build.json

@@ -2,12 +2,15 @@
   "$schema": "https://json.schemastore.org/tsconfig",
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "rootDir": "./src",
     "target": "esnext",
     "module": "esnext",
     "jsx": "react-jsx",
-    "jsxFactory": "",
-    "jsxFragmentFactory": ""
+    "incremental": false // dts with tsup requires rootDir if incremental (which does not work well aliases)
   },
-  "exclude": ["dist", "**/__tests__/*"]
+  "exclude": [
+    "**/*.stories.tsx",
+    "**/*.stories.ts",
+    "**/*.stories.mdx",
+    ".storybook/**"
+  ]
 }

packages/core-lib/tsup.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig((options) => ({
+  entry: ['src/index.ts'],
+  splitting: true,
+  treeshake: true,
+  clean: true,
+  dts: true,
+  format: ['esm'],
+  platform: 'browser',
+  target: ['es2017', 'chrome70', 'edge18', 'firefox70', 'node14'],
+  tsconfig: new URL('./tsconfig.build.json', import.meta.url).pathname,
+  sourcemap: !options.watch,
+  minify: !options.watch,
+}));