chore: rollup 4 upgrade (#2175)

package.json

@@ -71,9 +71,12 @@
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-logical-assignment-operators": "^7.25.9",
     "@babel/plugin-transform-modules-commonjs": "^7.25.9",
+    "@babel/plugin-transform-nullish-coalescing-operator": "^7.25.9",
+    "@babel/plugin-transform-numeric-separator": "^7.25.9",
+    "@babel/plugin-transform-optional-chaining": "^7.25.9",
     "@babel/plugin-transform-runtime": "^7.25.9",
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.25.9",
@@ -84,10 +87,10 @@
     "@eslint/js": "^9.15.0",
     "@playwright/test": "^1.45.2",
     "@react-three/fiber": "^8.0.8",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^19.0.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-terser": "^0.4.4",
     "@storybook/addon-actions": "^8.4.4",
     "@storybook/addon-controls": "^8.4.4",
     "@storybook/addon-essentials": "^8.4.4",
@@ -117,10 +120,9 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "rimraf": "^6.0.1",
-    "rollup": "^2.79.2",
-    "rollup-plugin-glslify": "^1.3.0",
+    "rollup": "^4.24.3",
+    "rollup-plugin-glslify": "^1.3.1",
     "rollup-plugin-multi-input": "^1.5.0",
-    "rollup-plugin-terser": "^7.0.2",
     "semantic-release": "^24.2.0",
     "serve": "^14.2.4",
     "storybook": "^8.4.4",

rollup.config.js → rollup.config.mjs

@@ -1,16 +1,16 @@
 import path from 'path'
-import babel from '@rollup/plugin-babel'
-import resolve from '@rollup/plugin-node-resolve'
+import { babel } from '@rollup/plugin-babel'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
 import json from '@rollup/plugin-json'
 import glslify from 'rollup-plugin-glslify'
 import multiInput from 'rollup-plugin-multi-input'
-import { terser } from 'rollup-plugin-terser'
+import terser from '@rollup/plugin-terser'
 
 const root = process.platform === 'win32' ? path.resolve('/') : '/'
 const external = (id) => !id.startsWith('.') && !id.startsWith(root)
 const extensions = ['.js', '.jsx', '.ts', '.tsx', '.json']
 
-const getBabelOptions = ({ useESModules }) => ({
+const getBabelOptions = ({ useESModules }, targets = '> 1%, not dead, not ie 11, not op_mini all') => ({
   babelrc: false,
   extensions,
   exclude: '**/node_modules/**',
@@ -20,24 +20,24 @@ const getBabelOptions = ({ useESModules }) => ({
       '@babel/preset-env',
       {
         include: [
-          '@babel/plugin-proposal-class-properties',
-          '@babel/plugin-proposal-optional-chaining',
-          '@babel/plugin-proposal-nullish-coalescing-operator',
-          '@babel/plugin-proposal-numeric-separator',
-          '@babel/plugin-proposal-logical-assignment-operators',
+          '@babel/plugin-transform-class-properties',
+          '@babel/plugin-transform-optional-chaining',
+          '@babel/plugin-transform-nullish-coalescing-operator',
+          '@babel/plugin-transform-numeric-separator',
+          '@babel/plugin-transform-logical-assignment-operators',
         ],
         bugfixes: true,
         loose: true,
         modules: false,
-        targets: '> 1%, not dead, not ie 11, not op_mini all',
+        targets,
       },
     ],
     '@babel/preset-react',
     '@babel/preset-typescript',
   ],
   plugins: [
-    '@babel/plugin-proposal-nullish-coalescing-operator',
-    ['@babel/transform-runtime', { regenerator: false, useESModules }],
+    '@babel/plugin-transform-nullish-coalescing-operator',
+    ['@babel/plugin-transform-runtime', { regenerator: false, useESModules }],
   ],
 })
 
@@ -51,20 +51,19 @@ export default [
       json(),
       glslify(),
       babel(getBabelOptions({ useESModules: true }, '>1%, not dead, not ie 11, not op_mini all')),
-      resolve({ extensions }),
+      nodeResolve({ extensions }),
     ],
   },
   {
     input: `./src/index.ts`,
-    output: { dir: `dist`, format: 'esm' },
+    output: { dir: `dist`, format: 'esm', preserveModules: true },
     external,
     plugins: [
       json(),
       glslify(),
       babel(getBabelOptions({ useESModules: true }, '>1%, not dead, not ie 11, not op_mini all')),
-      resolve({ extensions }),
+      nodeResolve({ extensions }),
     ],
-    preserveModules: true,
   },
   {
     input: ['src/**/*.ts', 'src/**/*.tsx', '!src/index.ts'],
@@ -77,14 +76,20 @@ export default [
       json(),
       glslify(),
       babel(getBabelOptions({ useESModules: false })),
-      resolve({ extensions }),
+      nodeResolve({ extensions }),
       terser(),
     ],
   },
   {
     input: `./src/index.ts`,
     output: { file: `dist/index.cjs.js`, format: 'cjs' },
     external,
-    plugins: [json(), glslify(), babel(getBabelOptions({ useESModules: false })), resolve({ extensions }), terser()],
+    plugins: [
+      json(),
+      glslify(),
+      babel(getBabelOptions({ useESModules: false })),
+      nodeResolve({ extensions }),
+      terser(),
+    ],
   },
 ]