Allow post loaders for template blocks

This also sets a default 'lang="html"' query for template blocks.

Author: defnorep

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`)

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`.

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}`

lib/loaders/pitcher.js

@@ -79,6 +79,7 @@ module.exports.pitch = function (remainingRequest) {
       : []
     const request = genRequest([
       ...cacheLoader,
+      ...options.templatePostLoaders,
       templateLoaderPath + `??vue-loader-options`,
       ...loaders
     ])

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))

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 || []
       }
     }
 

test/fixtures/template-post.js

@@ -0,0 +1,3 @@
+import Comp1 from './template-post.vue'
+
+window.exports = Comp1

test/fixtures/template-post.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>Hello from Component A!</h1>
+  </div>
+</template>

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()
+  })
+})