From e4125fb698cd361086918a5acd4f21727126c001 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Fri, 11 Oct 2024 01:11:08 +0200 Subject: [PATCH] cli: refactor rspack conditionals Signed-off-by: Patrik Oldsberg --- .../cli/src/commands/build/buildFrontend.ts | 6 ++--- packages/cli/src/commands/build/command.ts | 8 +++--- packages/cli/src/lib/bundler/bundle.ts | 8 +++--- packages/cli/src/lib/bundler/config.ts | 26 ++++++++----------- packages/cli/src/lib/bundler/optimization.ts | 14 ++++------ packages/cli/src/lib/bundler/server.ts | 10 ++++--- packages/cli/src/lib/bundler/transforms.ts | 20 +++++--------- packages/cli/src/lib/bundler/types.ts | 6 ++--- 8 files changed, 44 insertions(+), 54 deletions(-) diff --git a/packages/cli/src/commands/build/buildFrontend.ts b/packages/cli/src/commands/build/buildFrontend.ts index 5cb6d3b526..59f3225738 100644 --- a/packages/cli/src/commands/build/buildFrontend.ts +++ b/packages/cli/src/commands/build/buildFrontend.ts @@ -25,11 +25,11 @@ interface BuildAppOptions { writeStats: boolean; configPaths: string[]; isModuleFederationRemote?: true; - useRspack?: boolean; + rspack?: typeof import('@rspack/core').rspack; } export async function buildFrontend(options: BuildAppOptions) { - const { targetDir, writeStats, configPaths, useRspack } = options; + const { targetDir, writeStats, configPaths, rspack } = options; const { name } = await fs.readJson(resolvePath(targetDir, 'package.json')); await buildBundle({ @@ -45,6 +45,6 @@ export async function buildFrontend(options: BuildAppOptions) { args: configPaths, fromPackage: name, })), - useRspack, + rspack, }); } diff --git a/packages/cli/src/commands/build/command.ts b/packages/cli/src/commands/build/command.ts index 4f99ec6a00..dd3e422d2b 100644 --- a/packages/cli/src/commands/build/command.ts +++ b/packages/cli/src/commands/build/command.ts @@ -25,7 +25,9 @@ import { isValidUrl } from '../../lib/urls'; import chalk from 'chalk'; export async function command(opts: OptionValues): Promise { - const useRspack = !!process.env.EXPERIMENTAL_RSPACK; + const rspack = process.env.EXPERIMENTAL_RSPACK + ? (require('@rspack/core') as typeof import('@rspack/core').rspack) + : undefined; const role = await findRoleFromCommand(opts); @@ -42,7 +44,7 @@ export async function command(opts: OptionValues): Promise { targetDir: paths.targetDir, configPaths, writeStats: Boolean(opts.stats), - useRspack, + rspack, }); } return buildBackend({ @@ -65,7 +67,7 @@ export async function command(opts: OptionValues): Promise { configPaths: [], writeStats: Boolean(opts.stats), isModuleFederationRemote: true, - useRspack, + rspack, }); } diff --git a/packages/cli/src/lib/bundler/bundle.ts b/packages/cli/src/lib/bundler/bundle.ts index 0a36f54053..cb0322eb2c 100644 --- a/packages/cli/src/lib/bundler/bundle.ts +++ b/packages/cli/src/lib/bundler/bundle.ts @@ -38,7 +38,7 @@ function applyContextToError(error: string, moduleName: string): string { } export async function buildBundle(options: BuildOptions) { - const { statsJsonEnabled, schema: configSchema, useRspack } = options; + const { statsJsonEnabled, schema: configSchema, rspack } = options; const paths = resolveBundlingPaths(options); const publicPaths = await resolveOptionalBundlingPaths({ @@ -119,7 +119,7 @@ export async function buildBundle(options: BuildOptions) { ); } - const { stats } = await build(configs, isCi, useRspack); + const { stats } = await build(configs, isCi, rspack); if (!stats) { throw new Error('No stats returned'); @@ -155,9 +155,9 @@ export async function buildBundle(options: BuildOptions) { async function build( configs: webpack.Configuration[], isCi: boolean, - useRspack?: boolean, + rspack?: typeof import('@rspack/core').rspack, ) { - const bundler: typeof webpack = useRspack ? require('@rspack/core') : webpack; + const bundler = (rspack ?? webpack) as typeof webpack; const stats = await new Promise( (resolve, reject) => { diff --git a/packages/cli/src/lib/bundler/config.ts b/packages/cli/src/lib/bundler/config.ts index 958104a68f..9714ca683e 100644 --- a/packages/cli/src/lib/bundler/config.ts +++ b/packages/cli/src/lib/bundler/config.ts @@ -132,7 +132,7 @@ export async function createConfig( frontendConfig, moduleFederation, publicSubPath = '', - useRspack, + rspack, } = options; const { plugins, loaders } = transforms(options); @@ -153,7 +153,7 @@ export async function createConfig( options.moduleFederation, ); - if (useRspack) { + if (rspack) { const RspackReactRefreshPlugin = require('@rspack/plugin-react-refresh'); plugins.push(new RspackReactRefreshPlugin()); } else { @@ -181,10 +181,7 @@ export async function createConfig( ); } - const rspack = useRspack - ? (require('@rspack/core') as typeof import('@rspack/core').rspack) - : undefined; - const bundler = useRspack ? (rspack as unknown as typeof webpack) : webpack; + const bundler = rspack ? (rspack as unknown as typeof webpack) : webpack; // TODO(blam): process is no longer auto polyfilled by webpack in v5. // we use the provide plugin to provide this polyfill, but lets look @@ -215,8 +212,8 @@ export async function createConfig( if (options.moduleFederation) { const isRemote = options.moduleFederation?.mode === 'remote'; - const AdaptedModuleFederationPlugin = useRspack - ? (rspack!.container + const AdaptedModuleFederationPlugin = rspack + ? (rspack.container .ModuleFederationPlugin as unknown as typeof ModuleFederationPlugin) : ModuleFederationPlugin; @@ -285,7 +282,7 @@ export async function createConfig( plugins.push( new bundler.DefinePlugin({ 'process.env.BUILD_INFO': JSON.stringify(buildInfo), - 'process.env.APP_CONFIG': useRspack + 'process.env.APP_CONFIG': rspack ? // FIXME: see also https://github.com/web-infra-dev/rspack/issues/5606 JSON.stringify(options.getFrontendAppConfigs()) : bundler.DefinePlugin.runtimeValue( @@ -301,7 +298,7 @@ export async function createConfig( // These files are required by the transpiled code when using React Refresh. // They need to be excluded to the module scope plugin which ensures that files // that exist in the package are required. - const reactRefreshFiles = useRspack + const reactRefreshFiles = rspack ? [] : [ require.resolve( @@ -341,7 +338,7 @@ export async function createConfig( // the module is part of `react` or `react-dom`, and `config.mode` otherwise. plugins.push( new bundler.DefinePlugin({ - 'process.env.NODE_ENV': useRspack + 'process.env.NODE_ENV': rspack ? // FIXME: see also https://github.com/web-infra-dev/rspack/issues/5606 JSON.stringify(mode) : webpack.DefinePlugin.runtimeValue(({ module }) => { @@ -391,7 +388,7 @@ export async function createConfig( util: require.resolve('util/'), }, // FIXME: see also https://github.com/web-infra-dev/rspack/issues/3408 - ...(!useRspack && { + ...(!rspack && { plugins: [ new LinkedPackageResolvePlugin(paths.rootNodeModules, externalPkgs), new ModuleScopePlugin( @@ -424,9 +421,8 @@ export async function createConfig( : {}), }, experiments: { - lazyCompilation: - !useRspack && yn(process.env.EXPERIMENTAL_LAZY_COMPILATION), - ...(useRspack && { + lazyCompilation: !rspack && yn(process.env.EXPERIMENTAL_LAZY_COMPILATION), + ...(rspack && { // We're still using `style-loader` for custom `insert` option css: false, }), diff --git a/packages/cli/src/lib/bundler/optimization.ts b/packages/cli/src/lib/bundler/optimization.ts index 4c569e5ccf..9f61043910 100644 --- a/packages/cli/src/lib/bundler/optimization.ts +++ b/packages/cli/src/lib/bundler/optimization.ts @@ -22,14 +22,10 @@ const { EsbuildPlugin } = require('esbuild-loader'); export const optimization = ( options: BundlingOptions, ): WebpackOptionsNormalized['optimization'] => { - const { isDev, useRspack } = options; + const { isDev, rspack } = options; - const rspack = useRspack - ? (require('@rspack/core') as typeof import('@rspack/core').rspack) - : undefined; - - const MinifyPlugin = useRspack - ? rspack!.SwcJsMinimizerRspackPlugin + const MinifyPlugin = rspack + ? rspack.SwcJsMinimizerRspackPlugin : EsbuildPlugin; return { @@ -46,7 +42,7 @@ export const optimization = ( format: undefined, include: 'remoteEntry.js', }), - useRspack && new rspack!.LightningCssMinimizerRspackPlugin(), + rspack && new rspack.LightningCssMinimizerRspackPlugin(), ], runtimeChunk: 'single', splitChunks: { @@ -78,7 +74,7 @@ export const optimization = ( priority: 10, minSize: 100000, minChunks: 1, - ...(!useRspack && { + ...(!rspack && { maxAsyncRequests: Infinity, maxInitialRequests: Infinity, }), diff --git a/packages/cli/src/lib/bundler/server.ts b/packages/cli/src/lib/bundler/server.ts index 25d3cbe321..ebde70ce66 100644 --- a/packages/cli/src/lib/bundler/server.ts +++ b/packages/cli/src/lib/bundler/server.ts @@ -106,7 +106,9 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be }, }); - const useRspack = !!process.env.EXPERIMENTAL_RSPACK; + const rspack = process.env.EXPERIMENTAL_RSPACK + ? (require('@rspack/core') as typeof import('@rspack/core').rspack) + : undefined; const commonConfigOptions = { ...options, @@ -114,7 +116,7 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be isDev: true, baseUrl: url, frontendConfig, - useRspack, + rspack, getFrontendAppConfigs: () => { return latestFrontendAppConfigs; }, @@ -166,8 +168,8 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be root: paths.targetPath, }); } else { - const bundler = useRspack ? require('@rspack/core') : webpack; - const DevServer: typeof WebpackDevServer = useRspack + const bundler = (rspack ?? webpack) as typeof webpack; + const DevServer: typeof WebpackDevServer = rspack ? require('@rspack/dev-server').RspackDevServer : WebpackDevServer; diff --git a/packages/cli/src/lib/bundler/transforms.ts b/packages/cli/src/lib/bundler/transforms.ts index a6a49895ef..8e2e1e1f66 100644 --- a/packages/cli/src/lib/bundler/transforms.ts +++ b/packages/cli/src/lib/bundler/transforms.ts @@ -26,14 +26,14 @@ type Transforms = { type TransformOptions = { isDev: boolean; isBackend?: boolean; - useRspack?: boolean; + rspack?: typeof import('@rspack/core').rspack; }; export const transforms = (options: TransformOptions): Transforms => { - const { isDev, isBackend, useRspack } = options; + const { isDev, isBackend, rspack } = options; - const CssExtractRspackPlugin: typeof MiniCssExtractPlugin = useRspack - ? require('@rspack/core').CssExtractRspackPlugin + const CssExtractRspackPlugin: typeof MiniCssExtractPlugin = rspack + ? (rspack.CssExtractRspackPlugin as unknown as typeof MiniCssExtractPlugin) : MiniCssExtractPlugin; // This ensures that styles inserted from the style-loader and any @@ -59,9 +59,7 @@ export const transforms = (options: TransformOptions): Transforms => { exclude: /node_modules/, use: [ { - loader: useRspack - ? 'builtin:swc-loader' - : require.resolve('swc-loader'), + loader: rspack ? 'builtin:swc-loader' : require.resolve('swc-loader'), options: { jsc: { target: 'es2022', @@ -89,9 +87,7 @@ export const transforms = (options: TransformOptions): Transforms => { exclude: /node_modules/, use: [ { - loader: useRspack - ? 'builtin:swc-loader' - : require.resolve('swc-loader'), + loader: rspack ? 'builtin:swc-loader' : require.resolve('swc-loader'), options: { jsc: { target: 'es2022', @@ -124,9 +120,7 @@ export const transforms = (options: TransformOptions): Transforms => { test: [/\.icon\.svg$/], use: [ { - loader: useRspack - ? 'builtin:swc-loader' - : require.resolve('swc-loader'), + loader: rspack ? 'builtin:swc-loader' : require.resolve('swc-loader'), options: { jsc: { target: 'es2022', diff --git a/packages/cli/src/lib/bundler/types.ts b/packages/cli/src/lib/bundler/types.ts index 8b48976f9b..d7ea69a1d4 100644 --- a/packages/cli/src/lib/bundler/types.ts +++ b/packages/cli/src/lib/bundler/types.ts @@ -37,7 +37,7 @@ export type BundlingOptions = { // Mode that the app is running in, 'protected' or 'public', default is 'public' appMode?: string; moduleFederation?: ModuleFederationOptions; - useRspack?: boolean; + rspack?: typeof import('@rspack/core').rspack; }; export type ServeOptions = BundlingPathsOptions & { @@ -58,7 +58,7 @@ export type BuildOptions = BundlingPathsOptions & { frontendAppConfigs: AppConfig[]; fullConfig: Config; moduleFederation?: ModuleFederationOptions; - useRspack?: boolean; + rspack?: typeof import('@rspack/core').rspack; }; export type BackendBundlingOptions = { @@ -68,7 +68,7 @@ export type BackendBundlingOptions = { inspectEnabled: boolean; inspectBrkEnabled: boolean; require?: string; - useRspack?: boolean; + rspack?: typeof import('@rspack/core').rspack; }; export type BackendServeOptions = BundlingPathsOptions & {