Add options configuration callback to Encore.enableReactPreset()

Author: Kocal

CHANGELOG.md

@@ -4,6 +4,10 @@
 
 This is a new major version that contains several backwards-compatibility breaks.
 
+### Features
+
+* #1344 Add options configuration callback to `Encore.enableReactPreset()` (@Kocal)
+
 ### BC Breaks
 
 * #1321 Drop support of Node.js 19 and 21 (@Kocal)

index.js

@@ -1106,10 +1106,19 @@ class Encore {
      *
      * https://babeljs.io/docs/plugins/preset-react/
      *
+     * You can configure the preset by passing a callback:
+     * ```
+     * Encore.enableReactPreset(function(options) {
+     *     // https://babeljs.io/docs/babel-preset-react/#options
+     *     options.development = !Encore.isProduction();
+     * });
+     * ```
+     *
+     * @param {OptionsCallback<object>} callback
      * @returns {Encore}
      */
-    enableReactPreset() {
-        webpackConfig.enableReactPreset();
+    enableReactPreset(callback = () => {}) {
+        webpackConfig.enableReactPreset(callback);
 
         return this;
     }

lib/WebpackConfig.js

@@ -159,6 +159,8 @@ class WebpackConfig {
         /** @type {OptionsCallback<object>} */
         this.babelPresetEnvOptionsCallback = () => {};
         /** @type {OptionsCallback<object>} */
+        this.babelReactPresetOptionsCallback = () => {};
+        /** @type {OptionsCallback<object>} */
         this.cssLoaderConfigurationCallback = () => {};
         /** @type {OptionsCallback<object>} */
         this.styleLoaderConfigurationCallback = () => {};
@@ -793,8 +795,16 @@ class WebpackConfig {
         this.persistentCacheCallback = callback;
     }
 
-    enableReactPreset() {
+    /**
+     * @param {OptionsCallback<object>} callback
+     */
+    enableReactPreset(callback = () => {}) {
+        if (typeof callback !== 'function') {
+            throw new Error('Argument 1 to enableForkedTypeScriptTypesChecking() must be a callback function.');
+        }
+
         this.useReact = true;
+        this.babelReactPresetOptionsCallback = callback;
     }
 
     enablePreactPreset(options = {}) {

lib/loaders/babel.js

@@ -70,10 +70,13 @@ module.exports = {
             if (webpackConfig.useReact) {
                 loaderFeatures.ensurePackagesExistAndAreCorrectVersion('react');
 
-                babelConfig.presets.push([require.resolve('@babel/preset-react'), {
-                    // TODO: To remove when Babel 8, "automatic" will become the default value
-                    runtime: 'automatic',
-                }]);
+                babelConfig.presets.push([
+                    require.resolve('@babel/preset-react'),
+                    applyOptionsCallback(webpackConfig.babelReactPresetOptionsCallback, {
+                        // TODO: To remove when Babel 8, "automatic" will become the default value
+                        runtime: 'automatic',
+                    })
+                ]);
             }
 
             if (webpackConfig.usePreact) {

test/WebpackConfig.js

@@ -982,6 +982,23 @@ describe('WebpackConfig object', () => {
         });
     });
 
+    describe('enableReactPreset', () => {
+        it('Calling method sets it', () => {
+            const config = createConfig();
+            const testCallback = () => {};
+            config.enableReactPreset(testCallback);
+            expect(config.babelReactPresetOptionsCallback).to.equal(testCallback);
+        });
+
+        it('Calling with non-callback throws an error', () => {
+            const config = createConfig();
+
+            expect(() => {
+                config.enableReactPreset('FOO');
+            }).to.throw('must be a callback function');
+        });
+    });
+
     describe('enablePreactPreset', () => {
         it('Without preact-compat', () => {
             const config = createConfig();

test/loaders/babel.js

@@ -94,6 +94,40 @@ describe('loaders/babel', () => {
         expect(actualLoaders[0].options.presets[2]).to.equal('foo');
     });
 
+    it('getLoaders() with react and callback', () => {
+        const config = createConfig();
+        config.enableReactPreset((options) => {
+            options.development = !config.isProduction();
+        });
+
+        config.configureBabel(function(babelConfig) {
+            babelConfig.presets.push('foo');
+        });
+
+        const actualLoaders = babelLoader.getLoaders(config);
+
+        // env, react & foo
+        expect(actualLoaders[0].options.presets).to.have.lengthOf(3);
+        expect(actualLoaders[0].options.presets[0]).to.deep.equal([
+            require.resolve('@babel/preset-env'),
+            {
+                corejs: null,
+                modules: false,
+                targets: {},
+                useBuiltIns: false,
+            },
+        ]);
+        expect(actualLoaders[0].options.presets[1]).to.deep.equal([
+            require.resolve('@babel/preset-react'),
+            {
+                runtime: 'automatic',
+                development: true,
+            }
+        ]);
+        // foo is also still there, not overridden
+        expect(actualLoaders[0].options.presets[2]).to.equal('foo');
+    });
+
     it('getLoaders() with preact', () => {
         const config = createConfig();
         config.enablePreactPreset();