Replace the usePreactCompat boolean by an object in Encore.enablePreactPreset()

Author: Lyrkan

index.js

@@ -394,16 +394,15 @@ const publicApi = {
      *     Encore.enablePreactPreset()
      *
      * If you wish to also use preact-compat (https://github.com/developit/preact-compat)
-     * call that method with its first parameter set
-     * to true:
+     * you can enable it by setting the "preactCompat" option to true:
      *
-     *     Encore.enablePreactPreset(true)
+     *     Encore.enablePreactPreset({ preactCompat: true })
      *
-     * @param {boolean} usePreactCompat
+     * @param {object} options
      * @returns {exports}
      */
-    enablePreactPreset(usePreactCompat = false) {
-        webpackConfig.enablePreactPreset(usePreactCompat);
+    enablePreactPreset(options = {}) {
+        webpackConfig.enablePreactPreset(options);
 
         return this;
     },

lib/WebpackConfig.js

@@ -54,7 +54,9 @@ class WebpackConfig {
         this.babelConfigurationCallback = function() {};
         this.useReact = false;
         this.usePreact = false;
-        this.usePreactCompat = false;
+        this.preactOptions = {
+            preactCompat: false
+        };
         this.useVueLoader = false;
         this.vueLoaderOptionsCallback = () => {};
         this.loaders = [];
@@ -249,9 +251,16 @@ class WebpackConfig {
         this.useReact = true;
     }
 
-    enablePreactPreset(usePreactCompat = false) {
+    enablePreactPreset(options = {}) {
         this.usePreact = true;
-        this.usePreactCompat = usePreactCompat;
+
+        for (const optionKey of Object.keys(options)) {
+            if (!(optionKey in this.preactOptions)) {
+                throw new Error(`Invalid option "${optionKey}" passed to enablePreactPreset(). Valid keys are ${Object.keys(this.preactOptions).join(', ')}`);
+            }
+
+            this.preactOptions[optionKey] = options[optionKey];
+        }
     }
 
     enableTypeScriptLoader(callback = () => {}) {

lib/config-generator.js

@@ -81,7 +81,7 @@ class ConfigGenerator {
             config.resolve.alias['vue$'] = 'vue/dist/vue.esm.js';
         }
 
-        if (this.webpackConfig.usePreact && this.webpackConfig.usePreactCompat) {
+        if (this.webpackConfig.usePreact && this.webpackConfig.preactOptions.preactCompat) {
             config.resolve.alias['react'] = 'preact-compat';
             config.resolve.alias['react-dom'] = 'preact-compat';
         }

lib/loaders/babel.js

@@ -53,7 +53,7 @@ module.exports = {
             if (webpackConfig.usePreact) {
                 loaderFeatures.ensurePackagesExist('preact');
 
-                if (webpackConfig.usePreactCompat) {
+                if (webpackConfig.preactOptions.preactCompat) {
                     // If preact-compat is enabled tell babel to
                     // transform JSX into React.createElement calls.
                     babelConfig.plugins.push(['transform-react-jsx']);

test/WebpackConfig.js

@@ -370,15 +370,26 @@ describe('WebpackConfig object', () => {
             config.enablePreactPreset();
 
             expect(config.usePreact).to.be.true;
-            expect(config.usePreactCompat).to.be.false;
+            expect(config.preactOptions.preactCompat).to.be.false;
         });
 
         it('With preact-compat', () => {
             const config = createConfig();
-            config.enablePreactPreset(true);
+            config.enablePreactPreset({
+                preactCompat: true
+            });
 
             expect(config.usePreact).to.be.true;
-            expect(config.usePreactCompat).to.be.true;
+            expect(config.preactOptions.preactCompat).to.be.true;
+        });
+
+        it('With an invalid option', () => {
+            const config = createConfig();
+            expect(() => {
+                config.enablePreactPreset({
+                    foo: true
+                });
+            }).to.throw('Invalid option "foo"');
         });
     });
 

test/config-generator.js

@@ -544,11 +544,11 @@ describe('The config-generator function', () => {
         });
 
         describe('With preact-compat', () => {
-            it('enablePreactPreset(true) adds aliases to use preact-compat', () => {
+            it('enablePreactPreset({ preactCompat: true }) adds aliases to use preact-compat', () => {
                 const config = createConfig();
                 config.outputPath = '/tmp/public/build';
                 config.setPublicPath('/build/');
-                config.enablePreactPreset(true);
+                config.enablePreactPreset({ preactCompat: true });
 
                 const actualConfig = configGenerator(config);
                 expect(actualConfig.resolve.alias).to.include.keys('react', 'react-dom');

test/functional.js

@@ -651,7 +651,7 @@ module.exports = {
             const config = createWebpackConfig('www/build', 'dev');
             config.setPublicPath('/build');
             config.addEntry('main', './js/CoolReactComponent.jsx');
-            config.enablePreactPreset(true);
+            config.enablePreactPreset({ preactCompat: true });
 
             testSetup.runWebpack(config, (webpackAssert) => {
                 // check that babel transformed the JSX

test/loaders/babel.js

@@ -86,7 +86,7 @@ describe('loaders/babel', () => {
 
     it('getLoaders() with preact and preact-compat', () => {
         const config = createConfig();
-        config.enablePreactPreset(true);
+        config.enablePreactPreset({ preactCompat: true });
 
         config.configureBabel(function(babelConfig) {
             babelConfig.plugins.push('foo');