From 3705f314b9e51105b37e20a7333c9de125b84bd2 Mon Sep 17 00:00:00 2001 From: sebastien Date: Wed, 23 Oct 2024 13:26:24 +0200 Subject: [PATCH] proper swc loader options --- .../docusaurus-bundler/src/importFaster.ts | 18 ++++-- .../src/loaders/jsLoader.ts | 48 +++++++++------- .../docusaurus-bundler/src/minification.ts | 5 +- packages/docusaurus-faster/src/index.ts | 55 ++++++++++--------- 4 files changed, 73 insertions(+), 53 deletions(-) diff --git a/packages/docusaurus-bundler/src/importFaster.ts b/packages/docusaurus-bundler/src/importFaster.ts index d5943a882085..6731777a3d90 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 1714558dbeb4..b7ed1044751d 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 b1d77c03a077..0c4d2d8ddee5 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 fd8435536b24..35669c4fae4e 100644 --- a/packages/docusaurus-faster/src/index.ts +++ b/packages/docusaurus-faster/src/index.ts @@ -9,40 +9,37 @@ 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 rspack = Rspack; - -export function getSwcHtmlMinifier(): typeof swcHtmlMinifier { - return swcHtmlMinifier; -} +export const swcLoader = require.resolve('swc-loader'); -export function getSwcJsLoaderFactory({ +export const getSwcLoaderOptions = ({ isServer, }: { isServer: boolean; -}): RuleSetRule { +}): SwcOptions => { return { - loader: require.resolve('swc-loader'), - options: { - jsc: { - parser: { - syntax: 'typescript', - tsx: true, - }, - transform: { - react: { - runtime: 'automatic', - }, - }, - target: 'es2017', + env: { + targets: getBrowserslistQueries({isServer}), + }, + jsc: { + parser: { + syntax: 'typescript', + tsx: true, }, - module: { - type: isServer ? 'commonjs' : 'es6', + transform: { + react: { + runtime: 'automatic', + }, }, }, }; +}; + +export const rspack = Rspack; + +export function getSwcHtmlMinifier(): typeof swcHtmlMinifier { + return swcHtmlMinifier; } // Note: these options are similar to what we use in core @@ -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, ];