feat: support rolldown as an experimental engine (#688)

Author: XGHeaven

.changeset/giant-seahorses-call.md

@@ -0,0 +1,5 @@
+---
+'@ice/pkg': minor
+---
+
+feat: support rolldown as an experimental engine

packages/pkg/package.json

@@ -67,6 +67,7 @@
     "picocolors": "^1.0.0",
     "postcss": "^8.4.31",
     "postcss-plugin-rpx2vw": "^1.0.0",
+    "rolldown": "^0.15.1",
     "rollup": "^4.0.0",
     "rollup-plugin-styler": "^1.8.0",
     "rollup-plugin-visualizer": "^5.12.0",

packages/pkg/src/engine/rolldown/options.ts

@@ -0,0 +1,99 @@
+import { RolldownOptions, Plugin, OutputOptions } from 'rolldown';
+import { Context, StylesRollupPluginOptions, TaskRunnerContext, PackageJson } from '../../types.js';
+import { getExternalsAndGlobals, getRollupOutputs } from '../rollup/options.js';
+import { assertTaskBundleConfig } from '../../helpers/taskConfig.js';
+import path from 'node:path';
+import getDefaultDefineValues from '../../helpers/getDefaultDefineValues.js';
+import styles from 'rollup-plugin-styler';
+import image from '@rollup/plugin-image';
+import autoprefixer from 'autoprefixer';
+import PostcssPluginRpxToVw from 'postcss-plugin-rpx2vw';
+import { visualizer } from 'rollup-plugin-visualizer';
+import { JSX_RUNTIME_SOURCE } from '../../constants.js';
+import { RollupOptions } from 'rollup';
+
+export function getRolldownOptions(context: Context, taskRunnerContext: TaskRunnerContext): RolldownOptions {
+  const { pkg, commandArgs, command, rootDir } = context;
+  const { buildTask } = taskRunnerContext;
+  const { name: taskName, config: taskConfig } = buildTask;
+
+  assertTaskBundleConfig(taskConfig);
+
+  const options: RolldownOptions = {};
+
+  const [external, globals] = getExternalsAndGlobals(taskConfig, pkg as PackageJson);
+
+  options.input = taskConfig.entry;
+  options.external = external;
+  // TODO: should warning if output is multiple
+  options.output = getRollupOutputs({
+    globals,
+    bundleTaskConfig: taskConfig,
+    pkg: pkg as PackageJson,
+    mode: taskRunnerContext.mode,
+    command,
+  })[0] as OutputOptions;
+
+  const alias: Record<string, string> = {};
+  if (taskConfig.alias) {
+    for (const key of Object.keys(taskConfig.alias)) {
+      // Add full path for relative path alias
+      alias[key] = taskConfig.alias[key].startsWith('.')
+        ? path.resolve(rootDir, taskConfig.alias[key])
+        : taskConfig.alias[key];
+    }
+  }
+
+  const plugins: Plugin[] = [];
+
+  options.resolve = {
+    alias,
+  };
+  options.define = {
+    ...getDefaultDefineValues(taskRunnerContext.mode),
+    // User define can override above.
+    ...taskConfig.define,
+  };
+
+  options.jsx = {
+    mode: taskConfig.jsxRuntime ?? 'automatic',
+    jsxImportSource: JSX_RUNTIME_SOURCE,
+  };
+
+  const cssMinify = taskConfig.cssMinify!(taskRunnerContext.mode, command);
+  const defaultStylesOptions: StylesRollupPluginOptions = {
+    plugins: [autoprefixer(), PostcssPluginRpxToVw],
+    mode: 'extract',
+    autoModules: true,
+    minimize: typeof cssMinify === 'boolean' ? cssMinify : cssMinify.options,
+    sourceMap: taskConfig.sourcemap,
+  };
+
+  plugins.push(
+    styles(
+      (taskConfig.modifyStylesOptions ?? [(options) => options]).reduce<StylesRollupPluginOptions>(
+        (prevStylesOptions, modifyStylesOptions) => modifyStylesOptions(prevStylesOptions),
+        defaultStylesOptions,
+      ),
+    ) as unknown as Plugin<any>,
+    image() as unknown as Plugin<any>,
+  );
+
+  if (commandArgs.analyzer) {
+    plugins.push(
+      visualizer({
+        title: `Rollup Visualizer(${taskName})`,
+        open: true,
+        filename: `${taskName}-stats.html`,
+      }) as unknown as Plugin,
+    );
+  }
+
+  options.plugins = plugins;
+
+  return (taskConfig.modifyRollupOptions ?? [(options) => options]).reduce(
+    (prevOptions, modifyRollupOptions) =>
+      modifyRollupOptions(prevOptions as unknown as RollupOptions) as RolldownOptions,
+    options,
+  );
+}

packages/pkg/src/engine/rollup/options.ts

@@ -168,7 +168,14 @@ interface GetRollupOutputsOptions {
   mode: NodeEnvMode;
   command: Context['command'];
 }
-function getRollupOutputs({ globals, bundleTaskConfig, pkg, mode, command }: GetRollupOutputsOptions): OutputOptions[] {
+
+export function getRollupOutputs({
+  globals,
+  bundleTaskConfig,
+  pkg,
+  mode,
+  command,
+}: GetRollupOutputsOptions): OutputOptions[] {
   const { outputDir, vendorName = 'vendor' } = bundleTaskConfig;
 
   const outputFormats = bundleTaskConfig.formats ?? [];

packages/pkg/src/helpers/taskConfig.ts

@@ -7,3 +7,9 @@ export function assertTaskBuildableConfig(
     throw new Error('Only accept bundle or transform task.');
   }
 }
+
+export function assertTaskBundleConfig(taskConfig: TaskConfig): asserts taskConfig is BundleTaskConfig {
+  if (taskConfig.type !== 'bundle') {
+    throw new Error('Only accept bundle task.');
+  }
+}

packages/pkg/src/tasks/bundle.ts

@@ -18,6 +18,7 @@ import type { FSWatcher } from 'chokidar';
 import type { RslibConfig, rsbuild } from '@rslib/core';
 import { getRollupOptions } from '../engine/rollup/options.js';
 import { Runner } from '../helpers/runner.js';
+import { RolldownOptions } from 'rolldown';
 import { noop } from 'es-toolkit';
 import { consola } from 'consola';
 
@@ -28,6 +29,7 @@ export function createBundleTask(taskRunningContext: TaskRunnerContext) {
 export class BundleRunner extends Runner<OutputResult> {
   private rollupOptions?: RollupOptions;
   private rslibConfig?: RslibConfig;
+  private rolldownOptions?: RolldownOptions;
   private engine: EngineType;
   private watcher: Watcher | null = null;
   private result: Error | OutputResult | null = null;
@@ -45,6 +47,8 @@ export class BundleRunner extends Runner<OutputResult> {
         return this.handleRollupBuild(changedFiles);
       case 'rslib':
         return this.handleRslibBuild(changedFiles);
+      case 'rolldown':
+        return this.handleRolldownBuild(changedFiles);
       default:
         throw new Error(`Unsupported engine: ${this.engine}`);
     }
@@ -193,6 +197,23 @@ export class BundleRunner extends Runner<OutputResult> {
       outputFiles: stats?.assets as any,
     } as OutputResult;
   }
+
+  private async handleRolldownBuild(changedFiles: WatchChangedFile[]): Promise<OutputResult> {
+    const { context } = this;
+    const { build } = await import('rolldown');
+    if (!this.rolldownOptions) {
+      const { getRolldownOptions } = await import('../engine/rolldown/options.js');
+      this.rolldownOptions = getRolldownOptions(context.buildContext, context);
+    }
+    const bundle = await build(this.rolldownOptions);
+
+    return {
+      taskName: context.buildTask.name,
+      // TODO: correct type and value
+      outputs: bundle.output as any,
+      outputFiles: bundle.output as any,
+    };
+  }
 }
 
 // Fork from https://github.com/rollup/rollup/blob/v2.79.1/src/watch/WatchEmitter.ts
@@ -312,7 +333,7 @@ async function rawBuild(rollupOptions: RollupOptions, taskRunnerContext: TaskRun
 
   const bundle = await rollup.rollup(rollupOptions);
 
-  const buildResult = await writeFiles((rollupOutputOptions as OutputOptions[]).filter(Boolean), bundle.write);
+  const buildResult = await writeFiles((rollupOutputOptions as OutputOptions[]).filter(Boolean), bundle.write.bind(bundle));
 
   await bundle.close();
 

packages/pkg/src/types.ts

@@ -312,7 +312,11 @@ interface _TaskConfig {
    */
   define?: PlainObject;
   /**
-   * Define which bundler engine to use
+   * Define which bundler engine to use.
+   * - 'rollup'
+   * - 'rslib' common used for mf build
+   * - 'rolldown' experimental
+   * @default 'rollup'
    */
   engine?: EngineType;
   /**
@@ -361,7 +365,7 @@ interface _TaskConfig {
   pkg?: PkgResolvedConfig;
 }
 
-export type EngineType = 'rollup' | 'rslib';
+export type EngineType = 'rollup' | 'rslib' | 'rolldown';
 
 export interface BundleTaskConfig extends _TaskConfig, Omit<BundleUserConfig, 'minify' | 'formats'> {
   type: 'bundle';