Replace rollup by tsup as building tool

apps/www/next.config.mjs

@@ -5,6 +5,7 @@ const nextConfig = {
   // Enable React strict mode.
   // https://nextjs.org/docs/api-reference/next.config.js/react-strict-mod
   reactStrictMode: true,
+  transpilePackages: ['@udecode/*'],
 
   // Configure domains to allow for optimized image loading.
   // https://nextjs.org/docs/basic-features/image-optimization#domains

config/tsup.config.cjs

@@ -0,0 +1,43 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { defineConfig } from 'tsup';
+
+const cwd = process.cwd();
+
+const INPUT_FILE_PATH = path.join(cwd, 'src/index.ts');
+const INPUT_FILE = fs.existsSync(INPUT_FILE_PATH)
+  ? INPUT_FILE_PATH
+  : path.join(cwd, 'src/index.tsx');
+
+// export default defineConfig({
+//   entry: [INPUT_FILE],
+//   silent: true,
+//   format: ['cjs', 'esm'],
+//   outExtension: (ctx) => {
+//     return { js: `.${ctx.format === 'esm' ? 'es' : ctx.format}.js` };
+//   },
+//   outDir: 'dist',
+// });
+
+const { dependencies = {}, peerDependencies = {} } = JSON.parse(
+  fs.readFileSync(path.join(cwd, 'package.json'), 'utf8')
+);
+
+export default defineConfig({
+  clean: true,
+  outDir: 'dist',
+  sourcemap: true,
+  format: ['esm', 'cjs'],
+  entry: [INPUT_FILE],
+  external: [
+    ...Object.keys(dependencies),
+    ...Object.keys(peerDependencies),
+    'react-textarea-autosize',
+  ],
+  outExtension: (ctx) => {
+    return { js: `.${ctx.format === 'esm' ? 'es' : ctx.format}.js` };
+  },
+  env: {
+    NODE_ENV: 'production',
+  },
+});

package.json

@@ -11,7 +11,7 @@
     "check:install": "yarn dlx @yarnpkg/[email protected] --configFileName config/.ncurc.yml packages",
     "deps:check": "yarn dlx npm-check-updates@latest --configFileName config/.ncurc.yml --deep --mergeConfig",
     "deps:update": "deps:check -u",
-    "dev": "turbo --filter=www dev",
+    "dev": "concurrently \"turbo --filter=www dev\" \"node ./turborepo-watch.mjs\"",
     "dev:cli": "yarn workspace @udecode/plate-ui dev",
     "docs:build": "cd docs && yarn && yarn build",
     "docs:start": "cd docs && yarn && yarn start",
@@ -52,12 +52,13 @@
     "nuke:node_modules": "rimraf '**/node_modules'",
     "p:brl": "cd $INIT_CWD && barrelsby -d $INIT_CWD/src -D -l all -q -e '.*(fixture|template|spec|__tests__).*'",
     "p:brl:below": "cd $INIT_CWD && barrelsby -d $INIT_CWD/src -D -l below -q -e '.*(fixture|template|spec|__tests__).*'",
-    "p:build": "cd $INIT_CWD && yarn p:rollup && tsc",
-    "p:build:watch": "cd $INIT_CWD && concurrently \"yarn p:rollup -w\" \"yarn p:typecheck -w\"",
+    "p:build": "cd \"$INIT_CWD\" && yarn p:tsup && tsc",
+    "p:build:watch": "cd \"$INIT_CWD\" && concurrently \"yarn p:tsup --watch\" \"yarn p:typecheck -w\"",
     "p:clean": "cd $INIT_CWD && rimraf dist && jest --clear-cache",
     "p:lint": "eslint $INIT_CWD/src --color",
     "p:lint:fix": "eslint $INIT_CWD/src --color --fix",
     "p:rollup": "cd $INIT_CWD && rollup -c=${PROJECT_CWD}/config/rollup.config.cjs",
+    "p:tsup": "cd \"$INIT_CWD\" && tsup --config \"${PROJECT_CWD}\"/config/tsup.config.cjs",
     "p:test": "cd $INIT_CWD && jest --config=${PROJECT_CWD}/jest.config.cjs --passWithNoTests $INIT_CWD ",
     "p:typecheck": "cd $INIT_CWD && tsc --noEmit --emitDeclarationOnly false",
     "postinstall": "patch-package",
@@ -176,6 +177,7 @@
     "slate-test-utils": "1.3.2",
     "tailwindcss": "^3.3.2",
     "ts-jest": "^29.1.1",
+    "tsup": "7.2.0",
     "turbo": "^1.10.7",
     "typescript": "5.1.6"
   },

turborepo-watch.mjs

@@ -0,0 +1,44 @@
+/* eslint-disable no-console */
+import { spawn } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+
+/** SETUP */
+const projectRootDirectory = process.cwd();
+const packagesDirectory = path.join(projectRootDirectory, 'packages');
+
+// Only watch changes under src/ to stop infinite loops.
+const srcDirectoryRegex = /^[^/]+\/src\/.*\.(?:js|ts|tsx|jsx)$/;
+
+function runBuildPackage(packageName) {
+  const commandToRun = `turbo run build --filter=./packages/${packageName}`;
+  const command = spawn(commandToRun, [], {
+    shell: true,
+    stdio: 'inherit',
+  });
+  command.on('error', (err) => {
+    console.error(`Error running command: ${err}`);
+  });
+}
+
+/** SCRIPT START */
+console.log(
+  '👀 Watching packages/<package-name>/src/*.(js|ts|tsx|jsx) files to rebuild.'
+);
+
+fs.watch(packagesDirectory, { recursive: true }, (eventType, filename) => {
+  if (
+    (eventType === 'change' || eventType === 'rename') &&
+    filename &&
+    srcDirectoryRegex.test(filename)
+  ) {
+    const parts = filename.split('/');
+    if (parts.length >= 2) {
+      const packageName = parts[0]; // Extract package name from the path
+      console.log(
+        `Detected ${eventType} in ${filename}. Running command for package ${packageName}:`
+      );
+      runBuildPackage(packageName);
+    }
+  }
+});