Changing vue options to be a callback

Author: weaverryan

index.js

@@ -347,11 +347,19 @@ module.exports = {
      *
      * https://github.com/vuejs/vue-loader
      *
-     * @param {object} vueLoaderOptions: https://vue-loader.vuejs.org/en/configurations/advanced.html
+     *     Encore.enableVueLoader();
+     *
+     *     // or configure the vue-loader options
+     *     // https://vue-loader.vuejs.org/en/configurations/advanced.html
+     *     Encore.enableVueLoader(function(options) {
+     *          options.preLoaders = { ... }
+     *     });
+     *
+     * @param {function} vueLoaderOptionsCallback
      * @returns {exports}
      */
-    enableVueLoader(vueLoaderOptions = {}) {
-        webpackConfig.enableVueLoader(vueLoaderOptions);
+    enableVueLoader(vueLoaderOptionsCallback = () => {}) {
+        webpackConfig.enableVueLoader(vueLoaderOptionsCallback);
 
         return this;
     },

lib/WebpackConfig.js

@@ -51,7 +51,7 @@ class WebpackConfig {
         this.babelConfigurationCallback = function() {};
         this.useReact = false;
         this.useVueLoader = false;
-        this.vueLoaderOptions = {};
+        this.vueLoaderOptionsCallback = () => {};
         this.loaders = [];
     }
 
@@ -224,9 +224,14 @@ class WebpackConfig {
         this.useReact = true;
     }
 
-    enableVueLoader(vueLoaderOptions = {}) {
+    enableVueLoader(vueLoaderOptionsCallback = () => {}) {
         this.useVueLoader = true;
-        this.vueLoaderOptions = vueLoaderOptions;
+
+        if (typeof vueLoaderOptionsCallback !== 'function') {
+            throw new Error('Argument 1 to enableVueLoader() must be a callback function.');
+        }
+
+        this.vueLoaderOptionsCallback = vueLoaderOptionsCallback;
     }
 
     cleanupOutputBeforeBuild() {

lib/config-generator.js

@@ -155,7 +155,7 @@ class ConfigGenerator {
         if (this.webpackConfig.useVueLoader) {
             rules.push({
                 test: /\.vue$/,
-                use: vueLoaderUtil.getLoaders(this.webpackConfig, this.webpackConfig.vueLoaderOptions)
+                use: vueLoaderUtil.getLoaders(this.webpackConfig, this.webpackConfig.vueLoaderOptionsCallback)
             });
         }
 

lib/loaders/vue.js

@@ -18,10 +18,11 @@ const extractText = require('./extract-text');
 
 /**
  * @param {WebpackConfig} webpackConfig
+ * @param {function} vueLoaderOptionsCallback
  * @return {Array} of loaders to use for Vue files
  */
 module.exports = {
-    getLoaders(webpackConfig, vueLoaderOptions) {
+    getLoaders(webpackConfig, vueLoaderOptionsCallback) {
         loaderFeatures.ensureLoaderPackagesExist('vue');
 
         /*
@@ -116,12 +117,16 @@ module.exports = {
             };
         }
 
+        let options = {
+            loaders: loaders
+        };
+        // allow the options to be mutated via a callback
+        vueLoaderOptionsCallback(options);
+
         return [
             {
                 loader: 'vue-loader',
-                options: Object.assign({
-                    loaders: loaders
-                }, vueLoaderOptions)
+                options: options
             }
         ];
     }

test/WebpackConfig.js

@@ -301,10 +301,13 @@ describe('WebpackConfig object', () => {
 
         it('Pass config', () => {
             const config = createConfig();
-            config.enableVueLoader({ preLoaders: { foo: 'foo-loader' } });
+            const callback = (options) => {
+                options.preLoaders = {foo: 'foo-loader'};
+            };
+            config.enableVueLoader(callback);
 
             expect(config.useVueLoader).to.be.true;
-            expect(config.vueLoaderOptions.preLoaders.foo).to.equal('foo-loader');
+            expect(config.vueLoaderOptionsCallback).to.equal(callback);
         });
     });
 

test/loaders/vue.js

@@ -31,7 +31,7 @@ describe('loaders/vue', () => {
         // enable postcss, then really prove that its loader does not show up below
         config.enablePostCssLoader();
 
-        const actualLoaders = vueLoader.getLoaders(config, {});
+        const actualLoaders = vueLoader.getLoaders(config, () => {});
         expect(actualLoaders).to.have.lengthOf(1);
         expect(Object.keys(actualLoaders[0].options.loaders)).to.have.lengthOf(5);
 
@@ -46,7 +46,9 @@ describe('loaders/vue', () => {
 
         const actualLoaders = vueLoader.getLoaders(
             config,
-            { postLoaders: { foo: 'foo-loader' } }
+            (options) => {
+                options.postLoaders = { foo: 'foo-loader' };
+            }
         );
 
         expect(actualLoaders).to.have.lengthOf(1);