From 1a2b8b7d0571bbab3cd1a61985a5dcede32bb45b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= Date: Wed, 23 Oct 2024 14:47:14 +0200 Subject: [PATCH] fix(core): Use proper swc loader options (#10605) --- .../docusaurus-bundler/src/importFaster.ts | 18 +++-- .../src/loaders/jsLoader.ts | 48 ++++++++------ .../docusaurus-bundler/src/minification.ts | 5 +- packages/docusaurus-faster/src/index.ts | 65 ++++++++++--------- 4 files changed, 78 insertions(+), 58 deletions(-) diff --git a/packages/docusaurus-bundler/src/importFaster.ts b/packages/docusaurus-bundler/src/importFaster.ts index d5943a8820..6731777a3d 100644 --- a/packages/docusaurus-bundler/src/importFaster.ts +++ b/packages/docusaurus-bundler/src/importFaster.ts @@ -5,7 +5,6 @@ * LICENSE file in the root directory of this source tree. */ -import type {ConfigureWebpackUtils} from '@docusaurus/types'; import type { MinimizerOptions as JsMinimizerOptions, CustomOptions, @@ -34,11 +33,16 @@ export async function importRspack(): Promise { return faster.rspack; } -export async function importSwcJsLoaderFactory(): Promise< - ConfigureWebpackUtils['getJSLoader'] +export async function importSwcLoader(): Promise { + const faster = await ensureFaster(); + return faster.swcLoader; +} + +export async function importGetSwcLoaderOptions(): Promise< + FasterModule['getSwcLoaderOptions'] > { const faster = await ensureFaster(); - return faster.getSwcJsLoaderFactory; + return faster.getSwcLoaderOptions; } export async function importSwcJsMinimizerOptions(): Promise< @@ -55,9 +59,11 @@ export async function importSwcHtmlMinifier(): Promise< return faster.getSwcHtmlMinifier(); } -export async function importBrowserslistQueries(): Promise { +export async function importGetBrowserslistQueries(): Promise< + FasterModule['getBrowserslistQueries'] +> { const faster = await ensureFaster(); - return faster.getBrowserslistQueries(); + return faster.getBrowserslistQueries; } export async function importLightningCssMinimizerOptions(): Promise< diff --git a/packages/docusaurus-bundler/src/loaders/jsLoader.ts b/packages/docusaurus-bundler/src/loaders/jsLoader.ts index 1714558dbe..b7ed104475 100644 --- a/packages/docusaurus-bundler/src/loaders/jsLoader.ts +++ b/packages/docusaurus-bundler/src/loaders/jsLoader.ts @@ -6,7 +6,7 @@ */ import {getBabelOptions} from '@docusaurus/babel'; -import {importSwcJsLoaderFactory} from '../importFaster'; +import {importSwcLoader, importGetSwcLoaderOptions} from '../importFaster'; import {getCurrentBundler} from '../currentBundler'; import type {ConfigureWebpackUtils, DocusaurusConfig} from '@docusaurus/types'; @@ -20,24 +20,32 @@ const BabelJsLoaderFactory: ConfigureWebpackUtils['getJSLoader'] = ({ }; }; -const RspackJsLoaderFactory: ConfigureWebpackUtils['getJSLoader'] = () => { - return { - loader: 'builtin:swc-loader', - options: { - jsc: { - parser: { - syntax: 'typescript', - tsx: true, - }, - transform: { - react: { - runtime: 'automatic', - }, - }, - }, - }, +async function createSwcLoaderFactory(): Promise< + ConfigureWebpackUtils['getJSLoader'] +> { + const loader = await importSwcLoader(); + const getOptions = await importGetSwcLoaderOptions(); + return ({isServer}) => { + return { + loader, + options: getOptions({isServer}), + }; }; -}; +} + +// Same as swcLoader, except we use the built-in SWC loader +async function createRspackLoaderFactory(): Promise< + ConfigureWebpackUtils['getJSLoader'] +> { + const loader = 'builtin:swc-loader'; + const getOptions = await importGetSwcLoaderOptions(); + return ({isServer}) => { + return { + loader, + options: getOptions({isServer}), + }; + }; +} // Confusing: function that creates a function that creates actual js loaders // This is done on purpose because the js loader factory is a public API @@ -61,7 +69,7 @@ export async function createJsLoaderFactory({ 'When using Rspack bundler, it is required to enable swcJsLoader too', ); } - return RspackJsLoaderFactory; + return createRspackLoaderFactory(); } const jsLoader = siteConfig.webpack?.jsLoader ?? 'babel'; if ( @@ -76,7 +84,7 @@ export async function createJsLoaderFactory({ return ({isServer}) => jsLoader(isServer); } if (siteConfig.future?.experimental_faster.swcJsLoader) { - return importSwcJsLoaderFactory(); + return createSwcLoaderFactory(); } if (jsLoader === 'babel') { return BabelJsLoaderFactory; diff --git a/packages/docusaurus-bundler/src/minification.ts b/packages/docusaurus-bundler/src/minification.ts index b1d77c03a0..0c4d2d8dde 100644 --- a/packages/docusaurus-bundler/src/minification.ts +++ b/packages/docusaurus-bundler/src/minification.ts @@ -10,7 +10,7 @@ import CssMinimizerPlugin from 'css-minimizer-webpack-plugin'; import { importSwcJsMinimizerOptions, importLightningCssMinimizerOptions, - importBrowserslistQueries, + importGetBrowserslistQueries, } from './importFaster'; import {getCurrentBundlerAsRspack} from './currentBundler'; import type {CustomOptions, CssNanoOptions} from 'css-minimizer-webpack-plugin'; @@ -141,7 +141,8 @@ async function getRspackMinimizers({ currentBundler, }: MinimizersConfig): Promise { const rspack = getCurrentBundlerAsRspack({currentBundler}); - const browserslistQueries = await importBrowserslistQueries(); + const getBrowserslistQueries = await importGetBrowserslistQueries(); + const browserslistQueries = getBrowserslistQueries({isServer: false}); const swcJsMinimizerOptions = await importSwcJsMinimizerOptions(); return [ // See https://rspack.dev/plugins/rspack/swc-js-minimizer-rspack-plugin diff --git a/packages/docusaurus-faster/src/index.ts b/packages/docusaurus-faster/src/index.ts index fd8435536b..35669c4fae 100644 --- a/packages/docusaurus-faster/src/index.ts +++ b/packages/docusaurus-faster/src/index.ts @@ -9,8 +9,32 @@ import Rspack from '@rspack/core'; import * as lightningcss from 'lightningcss'; import browserslist from 'browserslist'; import {minify as swcHtmlMinifier} from '@swc/html'; -import type {RuleSetRule} from 'webpack'; -import type {JsMinifyOptions} from '@swc/core'; +import type {JsMinifyOptions, Options as SwcOptions} from '@swc/core'; + +export const swcLoader = require.resolve('swc-loader'); + +export const getSwcLoaderOptions = ({ + isServer, +}: { + isServer: boolean; +}): SwcOptions => { + return { + env: { + targets: getBrowserslistQueries({isServer}), + }, + jsc: { + parser: { + syntax: 'typescript', + tsx: true, + }, + transform: { + react: { + runtime: 'automatic', + }, + }, + }, + }; +}; export const rspack = Rspack; @@ -18,33 +42,6 @@ export function getSwcHtmlMinifier(): typeof swcHtmlMinifier { return swcHtmlMinifier; } -export function getSwcJsLoaderFactory({ - isServer, -}: { - isServer: boolean; -}): RuleSetRule { - return { - loader: require.resolve('swc-loader'), - options: { - jsc: { - parser: { - syntax: 'typescript', - tsx: true, - }, - transform: { - react: { - runtime: 'automatic', - }, - }, - target: 'es2017', - }, - module: { - type: isServer ? 'commonjs' : 'es6', - }, - }, - }; -} - // Note: these options are similar to what we use in core // They should rather be kept in sync for now to avoid any unexpected behavior // The goal of faster minifier is not to fine-tune options but only to be faster @@ -68,7 +65,15 @@ export function getSwcJsMinimizerOptions(): JsMinifyOptions { // We need this because of Rspack built-in LightningCSS integration // See https://github.com/orgs/browserslist/discussions/846 -export function getBrowserslistQueries(): string[] { +export function getBrowserslistQueries({ + isServer, +}: { + isServer: boolean; +}): string[] { + if (isServer) { + return [`node ${process.versions.node}`]; + } + const queries = browserslist.loadConfig({path: process.cwd()}) ?? [ ...browserslist.defaults, ];