Add Preact preset (with preact-compat support)

Author: Lyrkan

index.js

@@ -387,6 +387,27 @@ const publicApi = {
         return this;
     },
 
+    /**
+     * If enabled, a Preact preset will be applied to
+     * the generated Webpack configuration.
+     *
+     *     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:
+     *
+     *     Encore.enablePreactPreset(true)
+     *
+     * @param {boolean} usePreactCompat
+     * @returns {exports}
+     */
+    enablePreactPreset(usePreactCompat = false) {
+        webpackConfig.enablePreactPreset(usePreactCompat);
+
+        return this;
+    },
+
     /**
      * Call this if you plan on loading TypeScript files.
      *

lib/WebpackConfig.js

@@ -53,6 +53,8 @@ class WebpackConfig {
         this.providedVariables = {};
         this.babelConfigurationCallback = function() {};
         this.useReact = false;
+        this.usePreact = false;
+        this.usePreactCompat = false;
         this.useVueLoader = false;
         this.vueLoaderOptionsCallback = () => {};
         this.loaders = [];
@@ -247,6 +249,11 @@ class WebpackConfig {
         this.useReact = true;
     }
 
+    enablePreactPreset(usePreactCompat = false) {
+        this.usePreact = true;
+        this.usePreactCompat = usePreactCompat;
+    }
+
     enableTypeScriptLoader(callback = () => {}) {
         this.useTypeScriptLoader = true;
 

lib/config-generator.js

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

lib/features.js

@@ -36,6 +36,11 @@ const features = {
         packages: ['babel-preset-react'],
         description: 'process React JS files'
     },
+    preact: {
+        method: 'enablePreactPreset()',
+        packages: ['babel-plugin-transform-react-jsx'],
+        description: 'process Preact JS files'
+    },
     typescript: {
         method: 'enableTypeScriptLoader()',
         packages: ['typescript', 'ts-loader'],

lib/loaders/babel.js

@@ -50,6 +50,23 @@ module.exports = {
                 babelConfig.presets.push('react');
             }
 
+            if (webpackConfig.usePreact) {
+                loaderFeatures.ensurePackagesExist('preact');
+
+                if (webpackConfig.usePreactCompat) {
+                    // If preact-compat is enabled tell babel to
+                    // transform JSX into React.createElement calls.
+                    babelConfig.plugins.push(['transform-react-jsx']);
+                } else {
+                    // If preact-compat is disabled tell babel to
+                    // transform JSX into Preact h() calls.
+                    babelConfig.plugins.push([
+                        'transform-react-jsx',
+                        { 'pragma': 'h' }
+                    ]);
+                }
+            }
+
             // allow for babel config to be controlled
             webpackConfig.babelConfigurationCallback.apply(
                 // use babelConfig as the this variable

package.json

@@ -49,6 +49,7 @@
   },
   "devDependencies": {
     "autoprefixer": "^6.7.7",
+    "babel-plugin-transform-react-jsx": "^6.24.1",
     "babel-preset-react": "^6.23.0",
     "chai": "^3.5.0",
     "chai-fs": "^1.0.0",
@@ -63,6 +64,8 @@
     "node-sass": "^4.5.3",
     "nsp": "^2.6.3",
     "postcss-loader": "^1.3.3",
+    "preact": "^8.2.1",
+    "preact-compat": "^3.17.0",
     "sass-loader": "^6.0.3",
     "sinon": "^2.3.4",
     "ts-loader": "^2.1.0",

test/WebpackConfig.js

@@ -364,6 +364,24 @@ describe('WebpackConfig object', () => {
         });
     });
 
+    describe('enablePreactPreset', () => {
+        it('Without preact-compat', () => {
+            const config = createConfig();
+            config.enablePreactPreset();
+
+            expect(config.usePreact).to.be.true;
+            expect(config.usePreactCompat).to.be.false;
+        });
+
+        it('With preact-compat', () => {
+            const config = createConfig();
+            config.enablePreactPreset(true);
+
+            expect(config.usePreact).to.be.true;
+            expect(config.usePreactCompat).to.be.true;
+        });
+    });
+
     describe('enableTypeScriptLoader', () => {
         it('Calling method sets it', () => {
             const config = createConfig();

test/config-generator.js

@@ -529,4 +529,32 @@ describe('The config-generator function', () => {
             expect(fontsRule.options.name).to.equal('[name].bar.[ext]');
         });
     });
+
+    describe('Test preact preset', () => {
+        describe('Without preact-compat', () => {
+            it('enablePreactPreset() does not add aliases to use preact-compat', () => {
+                const config = createConfig();
+                config.outputPath = '/tmp/public/build';
+                config.setPublicPath('/build/');
+                config.enablePreactPreset();
+
+                const actualConfig = configGenerator(config);
+                expect(actualConfig.resolve.alias).to.not.include.keys('react', 'react-dom');
+            });
+        });
+
+        describe('With preact-compat', () => {
+            it('enablePreactPreset(true) adds aliases to use preact-compat', () => {
+                const config = createConfig();
+                config.outputPath = '/tmp/public/build';
+                config.setPublicPath('/build/');
+                config.enablePreactPreset(true);
+
+                const actualConfig = configGenerator(config);
+                expect(actualConfig.resolve.alias).to.include.keys('react', 'react-dom');
+                expect(actualConfig.resolve.alias['react']).to.equal('preact-compat');
+                expect(actualConfig.resolve.alias['react-dom']).to.equal('preact-compat');
+            });
+        });
+    });
 });

test/functional.js

@@ -630,6 +630,40 @@ module.exports = {
             });
         });
 
+        it('When enabled, preact JSX is transformed without preact-compat!', (done) => {
+            const config = createWebpackConfig('www/build', 'dev');
+            config.setPublicPath('/build');
+            config.addEntry('main', './js/CoolReactComponent.jsx');
+            config.enablePreactPreset();
+
+            testSetup.runWebpack(config, (webpackAssert) => {
+                // check that babel transformed the JSX
+                webpackAssert.assertOutputFileContains(
+                    'main.js',
+                    'var hiGuys = h('
+                );
+
+                done();
+            });
+        });
+
+        it('When enabled, preact JSX is transformed with preact-compat!', (done) => {
+            const config = createWebpackConfig('www/build', 'dev');
+            config.setPublicPath('/build');
+            config.addEntry('main', './js/CoolReactComponent.jsx');
+            config.enablePreactPreset(true);
+
+            testSetup.runWebpack(config, (webpackAssert) => {
+                // check that babel transformed the JSX
+                webpackAssert.assertOutputFileContains(
+                    'main.js',
+                    'React.createElement'
+                );
+
+                done();
+            });
+        });
+
         it('When configured, TypeScript is compiled!', (done) => {
             const config = createWebpackConfig('www/build', 'dev');
             config.setPublicPath('/build');

test/index.js

@@ -179,6 +179,15 @@ describe('Public API', () => {
 
     });
 
+    describe('enablePreactPreset', () => {
+
+        it('must return the API object', () => {
+            const returnedValue = api.enablePreactPreset();
+            expect(returnedValue).to.equal(api);
+        });
+
+    });
+
     describe('enableTypeScriptLoader', () => {
 
         it('must return the API object', () => {

test/loaders/babel.js

@@ -65,4 +65,40 @@ describe('loaders/babel', () => {
         // foo is also still there, not overridden
         expect(actualLoaders[0].options.presets).to.include('foo');
     });
+
+    it('getLoaders() with preact', () => {
+        const config = createConfig();
+        config.enablePreactPreset();
+
+        config.configureBabel(function(babelConfig) {
+            babelConfig.plugins.push('foo');
+        });
+
+        const actualLoaders = babelLoader.getLoaders(config);
+
+        // transform-react-jsx & foo
+        expect(actualLoaders[0].options.plugins).to.have.lengthOf(2);
+        expect(actualLoaders[0].options.plugins).to.deep.include.members([
+            ['transform-react-jsx', { pragma: 'h' }],
+            'foo'
+        ]);
+    });
+
+    it('getLoaders() with preact and preact-compat', () => {
+        const config = createConfig();
+        config.enablePreactPreset(true);
+
+        config.configureBabel(function(babelConfig) {
+            babelConfig.plugins.push('foo');
+        });
+
+        const actualLoaders = babelLoader.getLoaders(config);
+
+        // transform-react-jsx & foo
+        expect(actualLoaders[0].options.plugins).to.have.lengthOf(2);
+        expect(actualLoaders[0].options.plugins).to.deep.include.members([
+            ['transform-react-jsx'],
+            'foo'
+        ]);
+    });
 });