build: update rollup to latest (#6187)

* chore: upgrade rollup. WIP.

* chore: tidying

* chore: add optional rollup linux package

* chore: fix type

---------

Co-authored-by: John Jenkins <john.jenkins@nanoporetech.com>

Author: johnjenkins

package-lock.json

@@ -128,11 +128,12 @@
   },
   "devDependencies": {
     "@ionic/prettier-config": "^4.0.0",
-    "@rollup/plugin-commonjs": "21.1.0",
+    "@jridgewell/source-map": "^0.3.6",
+    "@rollup/plugin-commonjs": "28.0.2",
     "@rollup/plugin-json": "6.1.0",
-    "@rollup/plugin-node-resolve": "9.0.0",
-    "@rollup/plugin-replace": "5.0.7",
-    "@rollup/pluginutils": "5.1.3",
+    "@rollup/plugin-node-resolve": "16.0.0",
+    "@rollup/plugin-replace": "6.0.2",
+    "@rollup/pluginutils": "5.1.4",
     "@types/eslint": "^8.4.6",
     "@types/exit": "^0.1.31",
     "@types/fs-extra": "^11.0.0",
@@ -179,21 +180,24 @@
     "node-fetch": "3.3.2",
     "open": "^9.0.0",
     "open-in-editor": "2.2.0",
-    "parse5": "7.1.2",
+    "parse5": "7.2.1",
     "pixelmatch": "5.3.0",
     "postcss": "^8.2.8",
     "prettier": "3.3.1",
     "prompts": "2.4.2",
     "puppeteer": "^24.1.0",
     "rimraf": "^6.0.1",
-    "rollup": "2.56.3",
+    "rollup": "4.34.9",
     "semver": "^7.3.7",
-    "terser": "5.31.1",
+    "terser": "5.37.0",
     "tsx": "^4.19.2",
     "typescript": "~5.5.4",
     "webpack": "^5.75.0",
     "ws": "8.17.1"
   },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "4.34.9"
+  },
   "engines": {
     "node": ">=16.0.0",
     "npm": ">=7.10.0"

package.json

@@ -60,7 +60,6 @@ export async function bundleParse5(opts: BuildOptions): Promise<[contents: strin
     format: 'iife',
     name: 'PARSE5',
     footer: ['export const parse = PARSE5.parse;', 'export const parseFragment = PARSE5.parseFragment;'].join('\n'),
-    preferConst: true,
     strict: false,
   });
 

scripts/esbuild/utils/parse5.ts

@@ -30,7 +30,6 @@ export async function bundleTerser(opts: BuildOptions): Promise<[content: string
 
   const { output } = await rollupBuild.generate({
     format: 'es',
-    preferConst: true,
     strict: false,
   });
 

scripts/esbuild/utils/terser.ts

@@ -30,7 +30,10 @@ export const generateRollupOutput = async (
       return {
         type: 'chunk',
         fileName: chunk.fileName,
-        map: chunk.map,
+        map: {
+          ...chunk.map,
+          sourcesContent: chunk.map?.sourcesContent || [],
+        },
         code: chunk.code,
         moduleFormat: options.format,
         entryKey: chunk.name,

src/compiler/app-core/bundle-app-core.ts

@@ -7,7 +7,6 @@ import { PluginContext, rollup, RollupOptions, TreeshakingOptions } from 'rollup
 
 import type * as d from '../../declarations';
 import { lazyComponentPlugin } from '../output-targets/dist-lazy/lazy-component-plugin';
-import { createCustomResolverAsync } from '../sys/resolve/resolve-module-async';
 import { appDataPlugin } from './app-data-plugin';
 import type { BundleOptions } from './bundle-interface';
 import { coreResolvePlugin } from './core-resolve-plugin';
@@ -58,25 +57,24 @@ export const getRollupOptions = (
   buildCtx: d.BuildCtx,
   bundleOpts: BundleOptions,
 ): RollupOptions => {
-  const customResolveOptions = createCustomResolverAsync(config.sys, compilerCtx.fs, [
-    '.tsx',
-    '.ts',
-    '.js',
-    '.mjs',
-    '.json',
-    '.d.ts',
-  ]);
   const nodeResolvePlugin = rollupNodeResolvePlugin({
     mainFields: ['collection:main', 'jsnext:main', 'es2017', 'es2015', 'module', 'main'],
-    customResolveOptions,
     browser: true,
     rootDir: config.rootDir,
     ...(config.nodeResolve as any),
+    extensions: ['.tsx', '.ts', '.js', '.mjs', '.json', '.d.ts'],
   });
 
-  const orgNodeResolveId = nodeResolvePlugin.resolveId;
-  const orgNodeResolveId2 = (nodeResolvePlugin.resolveId = async function (importee: string, importer: string) {
+  // @ts-expect-error - this is required now.
+  nodeResolvePlugin.resolve = async function () {
+    // Investigate if we can use this to leverage Stencil's in-memory fs
+  };
+  // @ts-expect-error - handler is defined
+  const orgNodeResolveId = nodeResolvePlugin.resolveId.handler;
+  // @ts-expect-error - handler is defined
+  const orgNodeResolveId2 = (nodeResolvePlugin.resolveId.handler = async function (importee: string, importer: string) {
     const [realImportee, query] = importee.split('?');
+    // @ts-ignore
     const resolved = await orgNodeResolveId.call(
       nodeResolvePlugin as unknown as PluginContext,
       realImportee,

src/compiler/bundle/bundle-output.ts

@@ -186,7 +186,6 @@ const buildWorker = async (
       footer: '})();',
       intro: getWorkerIntro(workerMsgId, config.devMode),
       esModule: false,
-      preferConst: true,
       externalLiveBindings: false,
     });
     const entryPoint = output.output[0];

src/compiler/bundle/worker-plugin.ts

@@ -123,7 +123,6 @@ export const bundleCustomElements = async (
         chunkFileNames: outputTarget.externalRuntime || !config.hashFileNames ? '[name].js' : 'p-[hash].js',
         entryFileNames: '[name].js',
         hoistTransitiveImports: false,
-        preferConst: true,
       });
 
       // the output target should have been validated at this point - as a result, we expect this field

src/compiler/output-targets/dist-custom-elements/index.ts

@@ -62,7 +62,6 @@ export const generateHydrateApp = async (
       external: ['stream'],
 
       input,
-      inlineDynamicImports: true,
       plugins: [
         {
           name: 'hydrateAppPlugin',
@@ -125,7 +124,6 @@ const generateHydrateFactory = async (config: d.ValidatedConfig, compilerCtx: d.
           strict: false,
           intro: HYDRATE_FACTORY_INTRO,
           outro: HYDRATE_FACTORY_OUTRO,
-          preferConst: false,
           inlineDynamicImports: true,
         });
 

src/compiler/output-targets/dist-hydrate-script/generate-hydrate-app.ts

@@ -21,7 +21,6 @@ export const generateCjs = async (
       format: 'cjs',
       entryFileNames: '[name].cjs.js',
       assetFileNames: '[name]-[hash][extname]',
-      preferConst: true,
       sourcemap: config.sourceMap,
     };
     const results = await generateRollupOutput(rollupBuild, esmOpts, config, buildCtx.entryModules);

src/compiler/output-targets/dist-lazy/generate-cjs.ts

@@ -21,7 +21,6 @@ export const generateEsmBrowser = async (
       entryFileNames: '[name].esm.js',
       chunkFileNames: config.hashFileNames ? 'p-[hash].js' : '[name]-[hash].js',
       assetFileNames: config.hashFileNames ? 'p-[hash][extname]' : '[name]-[hash][extname]',
-      preferConst: true,
       sourcemap: config.sourceMap,
     };
 

src/compiler/output-targets/dist-lazy/generate-esm-browser.ts

@@ -21,7 +21,6 @@ export const generateEsm = async (
       format: 'es',
       entryFileNames: '[name].js',
       assetFileNames: '[name]-[hash][extname]',
-      preferConst: true,
       sourcemap: config.sourceMap,
     };
     const outputTargetType = esmOutputs[0].type;

src/compiler/output-targets/dist-lazy/generate-esm.ts

@@ -22,7 +22,6 @@ export const generateSystem = async (
       entryFileNames: config.hashFileNames ? 'p-[hash].system.js' : '[name].system.js',
       chunkFileNames: config.hashFileNames ? 'p-[hash].system.js' : '[name]-[hash].system.js',
       assetFileNames: config.hashFileNames ? 'p-[hash][extname]' : '[name]-[hash][extname]',
-      preferConst: true,
       sourcemap: config.sourceMap,
     };
     const results = await generateRollupOutput(rollupBuild, esmOpts, config, buildCtx.entryModules);

src/compiler/output-targets/dist-lazy/generate-system.ts

@@ -46,7 +46,7 @@ export const resolveModuleIdAsync = (
 export const createCustomResolverAsync = (
   sys: d.CompilerSystem,
   inMemoryFs: InMemoryFileSystem,
-  exts: string[],
+  exts?: string[],
 ): any => {
   return {
     async isFile(filePath: string, cb: (err: any, isFile: boolean) => void) {

src/compiler/sys/resolve/resolve-module-async.ts

@@ -1334,7 +1334,7 @@ export interface ResolveModuleIdOptions {
   moduleId: string;
   containingFile?: string;
   exts?: string[];
-  packageFilter?: (pkg: any) => void;
+  packageFilter?: (pkg: any, pkgFile: string) => any;
 }
 
 export interface ResolveModuleIdResults {

src/declarations/stencil-public-compiler.ts

@@ -210,7 +210,7 @@ export class AppRoot {
    * @param entity the error that was caught
    * @returns `true` if the `entity` parameter is of type `RollupLogProps`, `false` otherwise
    */
-  private isRollupLogProps(entity: unknown): entity is RollupTypes.RollupLogProps {
+  private isRollupLogProps(entity: unknown): entity is RollupTypes.RollupLog {
     return this.isObjectWithMessage(entity) && typeof entity.message === 'string';
   }
 

test/browser-compile/src/components/app-root/app-root.tsx

@@ -27,10 +27,14 @@ export class ScopedSlotAssignedMethods {
   render() {
     return (
       <div>
-        <slot ref={(s: HTMLSlotElement) => (this.fbSlot = s)}>
+        <slot
+          ref={(slot) => {
+            this.fbSlot = slot as HTMLSlotElement;
+          }}
+        >
           <slot name="nested-slot">Fallback content</slot>
         </slot>
-        <slot name="plain-slot" ref={(s: HTMLSlotElement) => (this.plainSlot = s)} />
+        <slot name="plain-slot" ref={(s) => (this.plainSlot = s as HTMLSlotElement)} />
       </div>
     );
   }

test/wdio/scoped-slot-assigned-methods/cmp.tsx

@@ -7,8 +7,11 @@ import { Component, h, Prop } from '@stencil/core';
 export class ScopedSlotChange {
   @Prop({ mutable: true }) slotEventCatch: { event: Event; assignedNodes: Node[] }[] = [];
 
-  private handleSlotchange = (e) => {
-    this.slotEventCatch.push({ event: e, assignedNodes: e.target.assignedNodes() });
+  private handleSlotchange = (e: Event) => {
+    this.slotEventCatch.push({
+      event: e,
+      assignedNodes: (e as Event & { target: HTMLSlotElement }).target.assignedNodes(),
+    });
   };
 
   render() {