From 4d70b20ee931b1f04818a90ef4e13c7a1e94d53e Mon Sep 17 00:00:00 2001
From: Matthew Evans <mevans@benevity.com>
Date: Mon, 28 May 2018 16:25:44 -0600
Subject: [PATCH] Allow post loaders for template blocks

This also sets a default 'lang="html"' query for template blocks.
---
 docs/migrating.md               |  4 ++++
 docs/options.md                 |  7 +++++++
 lib/index.js                    |  2 +-
 lib/loaders/pitcher.js          |  1 +
 lib/loaders/stylePostLoader.js  |  2 +-
 lib/plugin.js                   |  5 ++++-
 test/fixtures/template-post.js  |  3 +++
 test/fixtures/template-post.vue |  5 +++++
 test/template.spec.js           | 14 ++++++++++++++
 9 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 test/fixtures/template-post.js
 create mode 100644 test/fixtures/template-post.vue

diff --git a/docs/migrating.md b/docs/migrating.md
index 73586d5de..f2d281a37 100644
--- a/docs/migrating.md
+++ b/docs/migrating.md
@@ -251,6 +251,10 @@ The following options have been deprecated and should be configured using normal
 - `extractCSS`
 - `template`
 
+:::tip
+Template render functions cannot be post-processed by Webpack Rules because the `enforce: 'post'` option is not preserved for Vue Loader to interact with. `templatePostLoaders` now exists to accommodate these use cases.
+:::
+
 The following options have been deprecated and should be configured using the new `compilerOptions` option:
 
 - `preserveWhitespace` (use `compilerOptions.preserveWhitespace`)
diff --git a/docs/options.md b/docs/options.md
index c10180561..70b0e2c69 100644
--- a/docs/options.md
+++ b/docs/options.md
@@ -81,3 +81,10 @@ Compiled the component for usage inside Shadow DOM. In this mode, the styles of
 - default: `undefined`
 
 When both options are specified, enables file-system-based template compilation caching (requires `cache-loader` to be installed in the same project).
+
+## templatePostLoaders
+
+- type: `Array<string>`
+- default: `[]`
+
+Attach an array of loaders to post-process a template's render function. This option only exists because Webpack's `enforce: 'post'` option is not preserved and cannot be used to determine whether loaders defined as Rules within a Webpack configuration should be attached after the `template-compiler`.
\ No newline at end of file
diff --git a/lib/index.js b/lib/index.js
index 6225a2aa7..e82e145e5 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -85,7 +85,7 @@ module.exports = function (source) {
     const src = descriptor.template.src || resourcePath
     const idQuery = `&id=${id}`
     const scopedQuery = hasScoped ? `&scoped=true` : ``
-    const attrsQuery = attrsToQuery(descriptor.template.attrs)
+    const attrsQuery = attrsToQuery(descriptor.template.attrs, 'html')
     const query = `?vue&type=template${idQuery}${scopedQuery}${attrsQuery}`
     const request = templateRequest = stringifyRequest(src + query)
     templateImport = `import { render, staticRenderFns } from ${request}`
diff --git a/lib/loaders/pitcher.js b/lib/loaders/pitcher.js
index 9ed4ceece..bd32e0a62 100644
--- a/lib/loaders/pitcher.js
+++ b/lib/loaders/pitcher.js
@@ -79,6 +79,7 @@ module.exports.pitch = function (remainingRequest) {
       : []
     const request = genRequest([
       ...cacheLoader,
+      ...options.templatePostLoaders,
       templateLoaderPath + `??vue-loader-options`,
       ...loaders
     ])
diff --git a/lib/loaders/stylePostLoader.js b/lib/loaders/stylePostLoader.js
index de8d09eba..8e1e6d5e7 100644
--- a/lib/loaders/stylePostLoader.js
+++ b/lib/loaders/stylePostLoader.js
@@ -2,7 +2,7 @@ const qs = require('querystring')
 const { compileStyle } = require('@vue/component-compiler-utils')
 
 // This is a post loader that handles scoped CSS transforms.
-// Injected right before css-loader by the global pitcher (../pitch.js)
+// Injected right before css-loader by the global pitcher (./pitcher.js)
 // for any <style scoped> selection requests initiated from within vue files.
 module.exports = function (source, inMap) {
   const query = qs.parse(this.resourceQuery.slice(1))
diff --git a/lib/plugin.js b/lib/plugin.js
index e1d18a3db..cb75b3337 100644
--- a/lib/plugin.js
+++ b/lib/plugin.js
@@ -86,7 +86,10 @@ class VueLoaderPlugin {
       },
       options: {
         cacheDirectory: vueLoaderUse.options.cacheDirectory,
-        cacheIdentifier: vueLoaderUse.options.cacheIdentifier
+        cacheIdentifier: vueLoaderUse.options.cacheIdentifier,
+        // added because we don't have access to webpack's enforce: 'post' option.
+        // useful to post-process the render function.
+        templatePostLoaders: vueLoaderUse.options.templatePostLoaders || []
       }
     }
 
diff --git a/test/fixtures/template-post.js b/test/fixtures/template-post.js
new file mode 100644
index 000000000..dda4502e5
--- /dev/null
+++ b/test/fixtures/template-post.js
@@ -0,0 +1,3 @@
+import Comp1 from './template-post.vue'
+
+window.exports = Comp1
diff --git a/test/fixtures/template-post.vue b/test/fixtures/template-post.vue
new file mode 100644
index 000000000..e36382b4c
--- /dev/null
+++ b/test/fixtures/template-post.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>Hello from Component A!</h1>
+  </div>
+</template>
diff --git a/test/template.spec.js b/test/template.spec.js
index 1fdfb1a53..dbe9c5926 100644
--- a/test/template.spec.js
+++ b/test/template.spec.js
@@ -292,3 +292,17 @@ test('separate loader configuration for template lang and js imports', done => {
     done()
   })
 })
+
+test('render function post loaders', done => {
+  mockBundleAndRun({
+    entry: './test/fixtures/template-post.js',
+    vue: {
+      templatePostLoaders: [
+        path.resolve(__dirname, './mock-loaders/js')
+      ]
+    }
+  }, ({ exports }) => {
+    expect(exports.staticRenderFns[0].toString()).toContain('Changed!')
+    done()
+  })
+})