chore: pnpm version 9, dependencies upgrades and esbuild 20.x (#1958)

* feat: esbuild and pnpm v9 chore: configure new builds for rainbowkit and update esbuild package with pnpm 9.x chore: revert changes and add new changes for new esbuild builds chore: cleanup chore: edit package.json build file revert: removing prepare revert: remove prepare from scripts refactor: tsconfig.json chore: refactor chore: rename build.ts - * chore: upgrade to pnpm v9.1 * chore: tweak contentlayer build script addition --------- Co-authored-by: Daniel Sinclair <d@niel.nyc>
rainbow-me · May 7, 2024 · a6b8dd4 · a6b8dd4
1 parent acd2d95
commit a6b8dd4
Show file tree

Hide file tree

Showing 12 changed files with 18,044 additions and 15,351 deletions.
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
@@ -12,7 +12,7 @@ It's never a fun experience to have your pull request declined after investing a
 
 ## Prerequisites
 
-This project uses [`pnpm`](https://pnpm.io) as a package manager. The required `pnpm` version to get started is `8.15.5`.
+This project uses [`pnpm`](https://pnpm.io) as a package manager. The required `pnpm` version to get started is `9.1.0`.
 
 ## Development environment
 

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -3,7 +3,7 @@ name: CI
 on: [pull_request, push]
 
 env:
-  pnpm: 8
+  pnpm: 9
   WALLETCONNECT_PROJECT_ID: YOUR_PROJECT_ID
   ALCHEMY_ID: YOUR_ALCHEMY_ID
 

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -6,7 +6,7 @@ on:
       - main
 
 env:
-  pnpm: 8
+  pnpm: 9
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 

diff --git a/package.json b/package.json
@@ -53,10 +53,10 @@
     "@types/node": "^18.19.3",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
-    "@vanilla-extract/esbuild-plugin": "^2.3.1",
-    "@vanilla-extract/vite-plugin": "^3.9.3",
+    "@vanilla-extract/esbuild-plugin": "^2.3.5",
+    "@vanilla-extract/vite-plugin": "^4.0.9",
     "autoprefixer": "^10.4.16",
-    "esbuild": "^0.14.39",
+    "esbuild": "^0.20.2",
     "esbuild-plugin-replace": "^1.4.0",
     "ethers": "^5.6.8",
     "eventemitter3": "^5.0.1",
@@ -75,7 +75,7 @@
     "vitest": "^0.33.0",
     "wagmi": "^2.5.11"
   },
-  "packageManager": "pnpm@8.15.5",
+  "packageManager": "pnpm@9.1.0",
   "pnpm": {
     "onlyBuiltDependencies": [
       "esbuild"

diff --git a/packages/create-rainbowkit/build.js b/packages/create-rainbowkit/build.js
@@ -2,34 +2,47 @@ import * as esbuild from 'esbuild';
 
 const isWatching = process.argv.includes('--watch');
 
-esbuild
-  .build({
-    bundle: true,
-    entryPoints: ['./src/cli.ts'],
-    format: 'esm',
-    outdir: 'dist',
-    platform: 'node',
-    plugins: [
-      {
-        name: 'make-all-packages-external',
-        setup(build) {
-          const filter = /^[^./]|^\.[^./]|^\.\.[^/]/; // Must not start with "/" or "./" or "../"
-          build.onResolve({ filter }, (args) => ({
-            external: true,
-            path: args.path,
-          }));
-        },
+const mainBuildOptions = {
+  bundle: true,
+  entryPoints: ['./src/cli.ts'],
+  format: 'esm',
+  outdir: 'dist',
+  platform: 'node',
+  plugins: [
+    {
+      name: 'make-all-packages-external',
+      setup(build) {
+        const filter = /^[^./]|^\.[^./]|^\.\.[^/]/; // Must not start with "/" or "./" or "../"
+        build.onResolve({ filter }, (args) => ({
+          external: true,
+          path: args.path,
+        }));
+        build.onEnd((result) => {
+          if (result.errors.length) {
+            console.error('❌ main build failed', result.errors);
+          } else console.log('✅ main build succeeded');
+        });
       },
-    ],
-    watch: isWatching
-      ? {
-          onRebuild(error, result) {
-            if (error) console.error('watch build failed:', error);
-            else console.log('watch build succeeded:', result);
-          },
-        }
-      : undefined,
-  })
+    },
+  ],
+};
+
+const build = async () => {
+  // Build and watch for new changes if --watch flag is passed
+  if (isWatching) {
+    const [mainContext] = await Promise.all([
+      esbuild.context(mainBuildOptions),
+    ]);
+
+    await mainContext.watch();
+    return;
+  }
+
+  // Only build once
+  await esbuild.build(mainBuildOptions);
+};
+
+build()
   .then(() => {
     if (isWatching) {
       console.log('watching...');

diff --git a/packages/rainbow-button/build.js b/packages/rainbow-button/build.js
@@ -2,57 +2,73 @@ import * as esbuild from 'esbuild';
 
 const isWatching = process.argv.includes('--watch');
 
-const mainBuild = esbuild
-  .build({
-    banner: {
-      js: '"use client";', // Required for Next 13 App Router
-    },
-    bundle: true,
-    entryPoints: ['src/index.ts'],
-    format: 'esm',
-    outdir: 'dist',
-    plugins: [
-      {
-        name: 'make-all-packages-external',
-        setup(build) {
-          const filter = /^[^./]|^\.[^./]|^\.\.[^/]/; // Must not start with "/" or "./" or "../"
-          build.onResolve({ filter }, (args) => ({
-            external: true,
-            path: args.path,
-          }));
-        },
+const mainBuildOptions = {
+  banner: {
+    js: '"use client";', // Required for Next 13 App Router
+  },
+  bundle: true,
+  entryPoints: ['src/index.ts'],
+  format: 'esm',
+  outdir: 'dist',
+  plugins: [
+    {
+      name: 'make-all-packages-external',
+      setup(build) {
+        const filter = /^[^./]|^\.[^./]|^\.\.[^/]/; // Must not start with "/" or "./" or "../"
+
+        build.onResolve({ filter }, (args) => ({
+          external: true,
+          path: args.path,
+        }));
+
+        build.onEnd((result) => {
+          if (result.errors.length) {
+            console.error('❌ main build failed', result.errors);
+          } else console.log('✅ main build succeeded');
+        });
       },
-    ],
-    watch: isWatching
-      ? {
-          onRebuild(error, result) {
-            if (error) console.error('watch build failed:', error);
-            else console.log('watch build succeeded:', result);
-          },
-        }
-      : undefined,
-  })
-  .then(() => {
-    if (isWatching) {
-      console.log('watching...');
-    }
-  })
-  .catch(() => process.exit(1));
+    },
+  ],
+};
 
-const packageBuild = esbuild.build({
+const stylesBuildOptions = {
   entryPoints: ['../rainbowkit/dist/index.css'],
   outdir: 'dist',
-  watch: isWatching
-    ? {
-        onRebuild(error, result) {
-          if (error) console.error('styling bundling failed:', error);
-          else console.log('styling bundling succeeded:', result);
-        },
-      }
-    : undefined,
-});
-
-Promise.all([mainBuild, packageBuild])
+  plugins: [
+    {
+      name: 'log-results', // Log the result of the build
+      setup(build) {
+        build.onEnd((result) => {
+          if (result.errors.length) {
+            console.error('❌ styling build failed', result.errors);
+          } else console.log('✅ styling build succeeded');
+        });
+      },
+    },
+  ],
+};
+
+const build = async () => {
+  // Build and watch for new changes if --watch flag is passed
+  if (isWatching) {
+    const [mainContext, walletsContext] = await Promise.all([
+      esbuild.context(mainBuildOptions),
+      esbuild.context(stylesBuildOptions),
+    ]);
+
+    await mainContext.watch();
+    await walletsContext.watch();
+    return;
+  }
+
+  // Only build once
+  await Promise.all([
+    esbuild.build(mainBuildOptions),
+    esbuild.build(stylesBuildOptions),
+  ]);
+};
+
+build()
   .then(() => {
     if (isWatching) {
       console.log('watching...');

diff --git a/packages/rainbowkit-siwe-next-auth/build.js b/packages/rainbowkit-siwe-next-auth/build.js
@@ -2,36 +2,49 @@ import * as esbuild from 'esbuild';
 
 const isWatching = process.argv.includes('--watch');
 
-esbuild
-  .build({
-    banner: {
-      js: '"use client";', // Required for Next 13 App Router
-    },
-    bundle: true,
-    entryPoints: ['src/index.ts'],
-    format: 'esm',
-    outdir: 'dist',
-    plugins: [
-      {
-        name: 'make-all-packages-external',
-        setup(build) {
-          const filter = /^[^./]|^\.[^./]|^\.\.[^/]/; // Must not start with "/" or "./" or "../"
-          build.onResolve({ filter }, (args) => ({
-            external: true,
-            path: args.path,
-          }));
-        },
+const mainBuildOptions = {
+  banner: {
+    js: '"use client";', // Required for Next 13 App Router
+  },
+  bundle: true,
+  entryPoints: ['src/index.ts'],
+  format: 'esm',
+  outdir: 'dist',
+  plugins: [
+    {
+      name: 'make-all-packages-external',
+      setup(build) {
+        const filter = /^[^./]|^\.[^./]|^\.\.[^/]/; // Must not start with "/" or "./" or "../"
+        build.onResolve({ filter }, (args) => ({
+          external: true,
+          path: args.path,
+        }));
+        build.onEnd((result) => {
+          if (result.errors.length) {
+            console.error('❌ main build failed', result.errors);
+          } else console.log('✅ main build succeeded');
+        });
       },
-    ],
-    watch: isWatching
-      ? {
-          onRebuild(error, result) {
-            if (error) console.error('watch build failed:', error);
-            else console.log('watch build succeeded:', result);
-          },
-        }
-      : undefined,
-  })
+    },
+  ],
+};
+
+const build = async () => {
+  // Build and watch for new changes if --watch flag is passed
+  if (isWatching) {
+    const [mainContext] = await Promise.all([
+      esbuild.context(mainBuildOptions),
+    ]);
+
+    await mainContext.watch();
+    return;
+  }
+
+  // Only build once
+  await esbuild.build(mainBuildOptions);
+};
+
+build()
   .then(() => {
     if (isWatching) {
       console.log('watching...');

diff --git a/packages/rainbowkit-siwe-next-auth/package.json b/packages/rainbowkit-siwe-next-auth/package.json
@@ -36,12 +36,12 @@
   },
   "devDependencies": {
     "@rainbow-me/rainbowkit": "workspace:*",
-    "siwe": "^2.1.4",
-    "ethers": "^5.6.8"
+    "ethers": "^5.6.8",
+    "siwe": "^2.1.4"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/rainbow-me/rainbowkit.git",
     "directory": "packages/rainbowkit-siwe-next-auth"
   }
-}
+}