feat(bundling): upgrade rollup to v4

nrwl · Apr 17, 2024 · 4a9a870 · 4a9a870
1 parent 701c513
commit 4a9a870
Show file tree

Hide file tree

Showing 8 changed files with 563 additions and 647 deletions.
diff --git a/package.json b/package.json
@@ -87,12 +87,12 @@
     "@reduxjs/toolkit": "1.9.0",
     "@remix-run/dev": "^2.8.1",
     "@remix-run/node": "^2.8.1",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^20.0.0",
-    "@rollup/plugin-image": "^2.1.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.4",
-    "@rollup/plugin-url": "^7.0.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-url": "^8.0.2",
     "@schematics/angular": "~17.3.0",
     "@side/jest-runtime": "^1.1.0",
     "@storybook/addon-essentials": "7.5.3",
@@ -102,7 +102,7 @@
     "@storybook/react-webpack5": "7.5.3",
     "@storybook/types": "^7.1.1",
     "@supabase/supabase-js": "^2.26.0",
-    "@svgr/rollup": "^8.0.1",
+    "@svgr/rollup": "^8.1.0",
     "@svgr/webpack": "^8.0.1",
     "@swc-node/register": "1.8.0",
     "@swc/cli": "0.1.62",
@@ -256,11 +256,10 @@
     "react-textarea-autosize": "^8.5.3",
     "regenerator-runtime": "0.13.7",
     "resolve.exports": "1.1.0",
-    "rollup": "^2.56.2",
-    "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.1",
-    "rollup-plugin-typescript2": "0.36.0",
+    "rollup": "^4.14.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
     "rxjs": "^7.8.0",
     "sass": "1.55.0",
     "sass-loader": "^12.2.0",

diff --git a/packages/react/plugins/bundle-rollup.ts b/packages/react/plugins/bundle-rollup.ts
@@ -38,7 +38,7 @@ function getRollupOptions(options: rollup.RollupOptions) {
       url({
         limit: 10000, // 10kB
       }),
-      ...options.plugins,
+      ...(Array.isArray(options.plugins) ? options.plugins : []),
     ];
   } catch {
     // Ignored for React Native

diff --git a/packages/react/src/utils/versions.ts b/packages/react/src/utils/versions.ts
@@ -61,8 +61,8 @@ export const lessVersion = '3.12.2';
 export const sassVersion = '^1.55.0';
 
 // rollup plugins (if needed)
-export const rollupPluginUrlVersion = '^7.0.0';
-export const svgrRollupVersion = '^8.0.1';
+export const rollupPluginUrlVersion = '^8.0.2';
+export const svgrRollupVersion = '^8.1.0';
 
 export const swcPluginStyledJsxVersion = '^1.5.67';
 export const swcPluginEmotionVersion = '^2.5.67';

diff --git a/packages/rollup/package.json b/packages/rollup/package.json
@@ -29,20 +29,19 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^20.0.0",
-    "@rollup/plugin-image": "^2.1.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.4",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "autoprefixer": "^10.4.9",
     "babel-plugin-transform-async-to-promises": "^0.8.15",
     "chalk": "^4.1.0",
     "postcss": "^8.4.14",
-    "rollup": "^2.56.2",
-    "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.1",
-    "rollup-plugin-typescript2": "0.36.0",
+    "rollup": "^4.14.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
     "tslib": "^2.3.0",
     "@nx/devkit": "file:../devkit",
     "@nx/js": "file:../js"

diff --git a/packages/rollup/src/executors/rollup/rollup.impl.ts b/packages/rollup/src/executors/rollup/rollup.impl.ts
@@ -1,6 +1,5 @@
 import * as ts from 'typescript';
 import * as rollup from 'rollup';
-import * as peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import { getBabelInputPlugin } from '@rollup/plugin-babel';
 import { dirname, join, parse, resolve } from 'path';
 import * as autoprefixer from 'autoprefixer';
@@ -161,7 +160,6 @@ export async function createRollupOptions(
   npmDeps: string[]
 ): Promise<rollup.RollupOptions | rollup.RollupOptions[]> {
   const useBabel = options.compiler === 'babel';
-  const useTsc = options.compiler === 'tsc';
   const useSwc = options.compiler === 'swc';
 
   const tsConfigPath = joinPathFragments(context.root, options.tsConfig);
@@ -214,9 +212,6 @@ export async function createRollupOptions(
       main: options.main,
       projectRoot: options.projectRoot,
     }),
-    peerDepsExternal({
-      packageJsonPath: options.project,
-    }),
     postcss({
       inject: true,
       extract: options.extractCss,
@@ -306,7 +301,10 @@ export async function createRollupOptions(
         ...finalConfig,
         ...config,
         plugins: [
-          ...(finalConfig.plugins?.length > 0 ? finalConfig.plugins : []),
+          ...(Array.isArray(finalConfig.plugins) &&
+          finalConfig.plugins?.length > 0
+            ? finalConfig.plugins
+            : []),
           ...(config.plugins?.length > 0 ? config.plugins : []),
         ],
       };

diff --git a/packages/rollup/src/plugins/plugin.spec.ts b/packages/rollup/src/plugins/plugin.spec.ts
@@ -38,22 +38,23 @@ describe('@nx/rollup/plugin', () => {
       tempFs.createFileSync(
         'rollup.config.js',
         `
-const config = {
+const config = [{
   input: 'src/index.js',
-  output: [
-    {
-      file: 'dist/bundle.js',
-      format: 'cjs',
-      sourcemap: true
-    },
-    {
-      file: 'dist/bundle.es.js',
-      format: 'es',
-      sourcemap: true
-    }
-  ],
+  output: {
+    file: 'dist/bundle.js',
+    format: 'cjs',
+    sourcemap: true
+  },
   plugins: [],
-};
+}, {
+  input: 'src/index.js',
+  output: {
+    file: 'dist/bundle.js',
+    format: 'cjs',
+    sourcemap: true
+  },
+  plugins: [],
+}];
 
 module.exports = config;
       `
@@ -82,6 +83,7 @@ module.exports = config;
       expect(nodes).toMatchSnapshot();
     });
   });
+
   describe('non-root project', () => {
     const tempFs = new TempFs('test');
 

diff --git a/packages/rollup/src/plugins/plugin.ts b/packages/rollup/src/plugins/plugin.ts
@@ -15,7 +15,7 @@ import { calculateHashForCreateNodes } from '@nx/devkit/src/utils/calculate-hash
 import { getLockFileName } from '@nx/js';
 import { getNamedInputs } from '@nx/devkit/src/utils/get-named-inputs';
 import { type RollupOptions } from 'rollup';
-import * as loadConfigFile from 'rollup/dist/loadConfigFile';
+import { loadConfigFile } from '@nx/devkit/src/utils/config-utils';
 
 const cachePath = join(projectGraphCacheDirectory, 'rollup.hash');
 const targetsCache = existsSync(cachePath) ? readTargetsCache() : {};
@@ -89,11 +89,9 @@ async function buildRollupTarget(
   context: CreateNodesContext
 ): Promise<Record<string, TargetConfiguration>> {
   const namedInputs = getNamedInputs(projectRoot, context);
-  const rollupConfig = (
-    (await loadConfigFile(
-      joinPathFragments(context.workspaceRoot, configFilePath)
-    )) as { options: RollupOptions[] }
-  ).options;
+  const rollupConfig = (await loadConfigFile(
+    joinPathFragments(context.workspaceRoot, configFilePath)
+  )) as RollupOptions;
   const outputs = getOutputs(rollupConfig, projectRoot);
 
   const targets: Record<string, TargetConfiguration> = {};
@@ -113,10 +111,13 @@ async function buildRollupTarget(
 }
 
 function getOutputs(
-  rollupConfigs: RollupOptions[],
+  oneOrMoreRollupConfigs: RollupOptions,
   projectRoot: string
 ): string[] {
   const outputs = new Set<string>();
+  const rollupConfigs = Array.isArray(oneOrMoreRollupConfigs)
+    ? oneOrMoreRollupConfigs
+    : [oneOrMoreRollupConfigs];
   for (const rollupConfig of rollupConfigs) {
     if (rollupConfig.output) {
       const rollupConfigOutputs = [];