feature #301 Added support for the handlebars-loader (ogiammetta)

This PR was merged into the master branch.

Discussion
----------

Added support for the handlebars-loader

First PR on GitHub, any feedback is appreciated! :)

Commits
-------

3aafa2e Added support for the handlebars-loader

Author: weaverryan

fixtures/js/handlebars.js

@@ -0,0 +1,5 @@
+var template = require('../templates/template.hbs');
+
+document.getElementById('app').innerHTML = template({
+    title: 'Welcome to Your Handlebars App'
+});

fixtures/templates/template.hbs

@@ -0,0 +1 @@
+<h1>{{ title }}</h1>

index.js

@@ -719,6 +719,27 @@ class Encore {
         return this;
     }
 
+    /**
+     * Call this if you plan on loading Handlebars files.
+     *
+     *     Encore.enableHandlebarsLoader();
+     *
+     * Or pass options to the loader
+     *
+     *     Encore.enableHandlebarsLoader(function(options) {
+     *         // https://github.com/pcardune/handlebars-loader
+     *         // options.debug = true;
+     *     });
+     *
+     * @param {function} callback
+     * @returns {Encore}
+     */
+    enableHandlebarsLoader(callback = () => {}) {
+        webpackConfig.enableHandlebarsLoader(callback);
+
+        return this;
+    }
+
     /**
      * Call this if you wish to disable the default
      * images loader.

lib/WebpackConfig.js

@@ -65,6 +65,7 @@ class WebpackConfig {
         this.useCoffeeScriptLoader = false;
         this.useForkedTypeScriptTypeChecking = false;
         this.useWebpackNotifier = false;
+        this.useHandlebarsLoader = false;
 
         // Features/Loaders options
         this.sassOptions = {
@@ -87,6 +88,7 @@ class WebpackConfig {
         this.vueLoaderOptionsCallback = () => {};
         this.tsConfigurationCallback = () => {};
         this.coffeeScriptConfigurationCallback = () => {};
+        this.handlebarsConfigurationCallback = () => {};
 
         // Plugins options
         this.cleanWebpackPluginPaths = ['**/*'];
@@ -446,6 +448,16 @@ class WebpackConfig {
         this.notifierPluginOptionsCallback = notifierPluginOptionsCallback;
     }
 
+    enableHandlebarsLoader(callback = () => {}) {
+        this.useHandlebarsLoader = true;
+
+        if (typeof callback !== 'function') {
+            throw new Error('Argument 1 to enableHandlebarsLoader() must be a callback function.');
+        }
+
+        this.handlebarsConfigurationCallback = callback;
+    }
+
     disableImagesLoader() {
         this.useImagesLoader = false;
     }

lib/config-generator.js

@@ -21,6 +21,7 @@ const babelLoaderUtil = require('./loaders/babel');
 const tsLoaderUtil = require('./loaders/typescript');
 const coffeeScriptLoaderUtil = require('./loaders/coffee-script');
 const vueLoaderUtil = require('./loaders/vue');
+const handlebarsLoaderUtil = require('./loaders/handlebars');
 // plugins utils
 const extractTextPluginUtil = require('./plugins/extract-text');
 const deleteUnusedEntriesPluginUtil = require('./plugins/delete-unused-entries');
@@ -242,6 +243,13 @@ class ConfigGenerator {
             });
         }
 
+        if (this.webpackConfig.useHandlebarsLoader) {
+            rules.push({
+                test: /\.(handlebars|hbs)$/,
+                use: handlebarsLoaderUtil.getLoaders(this.webpackConfig)
+            });
+        }
+
         this.webpackConfig.loaders.forEach((loader) => {
             rules.push(loader);
         });

lib/features.js

@@ -77,6 +77,11 @@ const features = {
         method: 'configureUrlLoader()',
         packages: ['url-loader'],
         description: 'use the url-loader'
+    },
+    handlebars: {
+        method: 'enableHandlebarsLoader()',
+        packages: ['handlebars', 'handlebars-loader'],
+        description: 'load Handlebars files'
     }
 };
 

lib/loaders/handlebars.js

@@ -0,0 +1,32 @@
+/*
+ * This file is part of the Symfony Webpack Encore package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+'use strict';
+
+const loaderFeatures = require('../features');
+const applyOptionsCallback = require('../utils/apply-options-callback');
+
+/**
+ * @param {WebpackConfig} webpackConfig
+ * @return {Array} of loaders to use for Handlebars
+ */
+module.exports = {
+    getLoaders(webpackConfig) {
+        loaderFeatures.ensurePackagesExist('handlebars');
+
+        const options = {};
+
+        return [
+            {
+                loader: 'handlebars-loader',
+                options: applyOptionsCallback(webpackConfig.handlebarsConfigurationCallback, options)
+            }
+        ];
+    }
+};

package.json

@@ -62,6 +62,8 @@
     "eslint-plugin-header": "^1.0.0",
     "eslint-plugin-node": "^4.2.2",
     "fork-ts-checker-webpack-plugin": "^0.2.7",
+    "handlebars": "^4.0.11",
+    "handlebars-loader": "^1.7.0",
     "http-server": "^0.9.0",
     "less": "^2.7.2",
     "less-loader": "^4.0.2",

test/WebpackConfig.js

@@ -685,6 +685,28 @@ describe('WebpackConfig object', () => {
         });
     });
 
+    describe('enableHandlebarsLoader', () => {
+
+        it('Call with no config', () => {
+            const config = createConfig();
+            config.enableHandlebarsLoader();
+
+            expect(config.useHandlebarsLoader).to.be.true;
+        });
+
+        it('Pass config', () => {
+            const config = createConfig();
+            const callback = (options) => {
+                options.debug = true;
+            };
+            config.enableHandlebarsLoader(callback);
+
+            expect(config.useHandlebarsLoader).to.be.true;
+            expect(config.handlebarsConfigurationCallback).to.equal(callback);
+        });
+
+    });
+
     describe('addPlugin', () => {
         it('extends the current registered plugins', () => {
             const config = createConfig();

test/config-generator.js

@@ -354,6 +354,32 @@ describe('The config-generator function', () => {
         });
     });
 
+    describe('enableHandlebarsLoader() adds the handlebars-loader', () => {
+
+        it('without enableHandlebarsLoader()', () => {
+            const config = createConfig();
+            config.outputPath = '/tmp/output/public-path';
+            config.publicPath = '/public-path';
+            config.addEntry('main', './main');
+            const actualConfig = configGenerator(config);
+
+            expect(JSON.stringify(actualConfig.module.rules)).to.not.contain('handlebars-loader');
+        });
+
+        it('enableHandlebarsLoader()', () => {
+            const config = createConfig();
+            config.outputPath = '/tmp/output/public-path';
+            config.publicPath = '/public-path';
+            config.addEntry('main', './main');
+            config.enableHandlebarsLoader();
+
+            const actualConfig = configGenerator(config);
+
+            expect(JSON.stringify(actualConfig.module.rules)).to.contain('handlebars-loader');
+        });
+
+    });
+
     describe('addLoader() adds a custom loader', () => {
         it('addLoader()', () => {
             const config = createConfig();

test/functional.js

@@ -862,6 +862,32 @@ module.exports = {
             });
         });
 
+        it('When configured, Handlebars is compiled', (done) => {
+            const config = createWebpackConfig('www/build', 'dev');
+            config.setPublicPath('/build');
+            config.addEntry('main', ['./js/handlebars.js']);
+            const testCallback = () => {};
+            config.enableHandlebarsLoader(testCallback);
+
+            testSetup.runWebpack(config, () => {
+                expect(config.outputPath).to.be.a.directory().with.deep.files([
+                    'main.js',
+                    'manifest.json'
+                ]);
+
+                testSetup.requestTestPage(
+                    path.join(config.getContext(), 'www'),
+                    [
+                        'build/main.js'
+                    ],
+                    (browser) => {
+                        browser.assert.text('#app h1', 'Welcome to Your Handlebars App');
+                        done();
+                    }
+                );
+            });
+        });
+
         it('The output directory is cleaned between builds', (done) => {
             const config = createWebpackConfig('www/build', 'dev');
             config.setPublicPath('/build');

test/index.js

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

test/loaders/handlebars.js

@@ -0,0 +1,59 @@
+/*
+ * This file is part of the Symfony Webpack Encore package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+'use strict';
+
+const expect = require('chai').expect;
+const WebpackConfig = require('../../lib/WebpackConfig');
+const RuntimeConfig = require('../../lib/config/RuntimeConfig');
+const handlebarsLoader = require('../../lib/loaders/handlebars');
+
+function createConfig() {
+    const runtimeConfig = new RuntimeConfig();
+    runtimeConfig.context = __dirname;
+    runtimeConfig.babelRcFileExists = false;
+
+    return new WebpackConfig(runtimeConfig);
+}
+
+describe('loaders/handlebars', () => {
+    it('getLoaders() basic usage', () => {
+        const config = createConfig();
+        config.enableHandlebarsLoader();
+
+        const actualLoaders = handlebarsLoader.getLoaders(config);
+        expect(actualLoaders).to.have.lengthOf(1);
+        expect(actualLoaders[0].options).to.be.empty;
+    });
+
+    it('getLoaders() with options callback', () => {
+        const config = createConfig();
+        config.enableHandlebarsLoader((options) => {
+            options.debug = true;
+        });
+
+        const actualLoaders = handlebarsLoader.getLoaders(config);
+        expect(actualLoaders).to.have.lengthOf(1);
+        expect(actualLoaders[0].options.debug).to.be.true;
+    });
+
+    it('getLoaders() with options callback that returns an object', () => {
+        const config = createConfig();
+        config.enableHandlebarsLoader((options) => {
+            options.debug = true;
+
+            // This should override the original config
+            return { foo: true };
+        });
+
+        const actualLoaders = handlebarsLoader.getLoaders(config);
+        expect(actualLoaders).to.have.lengthOf(1);
+        expect(actualLoaders[0].options).to.deep.equal({ foo: true });
+    });
+});