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 <fabien@symfony.com>
+ *
+ * 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();