Change API

packages/docusaurus-types/src/index.d.ts

@@ -63,7 +63,9 @@ export interface DocusaurusConfig {
       }
   )[];
   titleDelimiter?: string;
-  getCustomJSLoader?: (isServer: boolean) => RuleSetRule;
+  webpack?: {
+    jsLoader: 'babel' | ((isServer: boolean) => RuleSetRule);
+  };
 }
 
 /**

packages/docusaurus/src/commands/build.ts

@@ -187,14 +187,14 @@ async function buildLocale({
         configureWebpack.bind(plugin), // The plugin lifecycle may reference `this`.
         clientConfig,
         false,
-        props.siteConfig.getCustomJSLoader,
+        props.siteConfig.webpack?.jsLoader,
       );
 
       serverConfig = applyConfigureWebpack(
         configureWebpack.bind(plugin), // The plugin lifecycle may reference `this`.
         serverConfig,
         true,
-        props.siteConfig.getCustomJSLoader,
+        props.siteConfig.webpack?.jsLoader,
       );
     }
   });

packages/docusaurus/src/commands/start.ts

@@ -153,7 +153,7 @@ export default async function start(
         configureWebpack.bind(plugin), // The plugin lifecycle may reference `this`.
         config,
         false,
-        props.siteConfig.getCustomJSLoader,
+        props.siteConfig.webpack?.jsLoader,
       );
     }
   });

packages/docusaurus/src/server/configValidation.ts

@@ -134,7 +134,11 @@ const ConfigSchema = Joi.object({
   tagline: Joi.string().allow(''),
   titleDelimiter: Joi.string().default('|'),
   noIndex: Joi.bool().default(false),
-  getCustomJSLoader: Joi.function(),
+  webpack: Joi.object({
+    jsLoader: Joi.alternatives()
+      .try(Joi.string().equal('babel'), Joi.function())
+      .optional(),
+  }).optional(),
 });
 
 // TODO move to @docusaurus/utils-validation

packages/docusaurus/src/webpack/__tests__/utils.test.ts

@@ -29,6 +29,15 @@ describe('customize JS loader', () => {
     );
   });
 
+  test('getCustomizableJSLoader accepts loaders with preset', () => {
+    expect(getCustomizableJSLoader('babel')({isServer: true}).loader).toBe(
+      require.resolve('babel-loader'),
+    );
+    expect(getCustomizableJSLoader('babel')({isServer: false}).loader).toBe(
+      require.resolve('babel-loader'),
+    );
+  });
+
   test('getCustomizableJSLoader allows customization', () => {
     const customJSLoader = (isServer: boolean): RuleSetRule => ({
       loader: 'my-fast-js-loader',

packages/docusaurus/src/webpack/base.ts

@@ -197,7 +197,7 @@ export function createBaseConfig(
           test: /\.(j|t)sx?$/,
           exclude: excludeJS,
           use: [
-            getCustomizableJSLoader(siteConfig.getCustomJSLoader)({
+            getCustomizableJSLoader(siteConfig.webpack?.jsLoader)({
               isServer,
               babelOptions: getCustomBabelConfigFilePath(siteDir),
             }),

packages/docusaurus/src/webpack/utils.ts

@@ -151,7 +151,7 @@ function getDefaultBabelLoader({
 }
 
 export const getCustomizableJSLoader = (
-  getCustomJSLoader?: (isServer: boolean) => RuleSetRule,
+  jsLoader: 'babel' | ((isServer: boolean) => RuleSetRule) = 'babel',
 ) => ({
   isServer,
   babelOptions,
@@ -159,9 +159,9 @@ export const getCustomizableJSLoader = (
   isServer: boolean;
   babelOptions?: TransformOptions | string;
 }): RuleSetRule =>
-  getCustomJSLoader
-    ? getCustomJSLoader(isServer)
-    : getDefaultBabelLoader({isServer, babelOptions});
+  jsLoader === 'babel'
+    ? getDefaultBabelLoader({isServer, babelOptions})
+    : jsLoader(isServer);
 
 // TODO remove this before end of 2021?
 const warnBabelLoaderOnce = memoize(function () {
@@ -197,18 +197,19 @@ function getCacheLoaderDeprecated() {
  * @param configureWebpack a webpack config or a function to modify config
  * @param config initial webpack config
  * @param isServer indicates if this is a server webpack configuration
+ * @param jsLoader custom js loader config
  * @returns final/ modified webpack config
  */
 export function applyConfigureWebpack(
   configureWebpack: ConfigureWebpackFn,
   config: Configuration,
   isServer: boolean,
-  getCustomJSLoader?: (isServer: boolean) => RuleSetRule,
+  jsLoader?: 'babel' | ((isServer: boolean) => RuleSetRule),
 ): Configuration {
   // Export some utility functions
   const utils: ConfigureWebpackUtils = {
     getStyleLoaders,
-    getJSLoader: getCustomizableJSLoader(getCustomJSLoader),
+    getJSLoader: getCustomizableJSLoader(jsLoader),
     getBabelLoader: getBabelLoaderDeprecated,
     getCacheLoader: getCacheLoaderDeprecated,
   };