test: support loader for templates

Author: yyx990803

lib/pitch.js

@@ -9,34 +9,37 @@ module.exports = code => code
 // from within vue files and transform it into appropriate requests
 module.exports.pitch = function (remainingRequest) {
   const query = qs.parse(this.resourceQuery.slice(1))
-  if (query.vue != null) {
-    // Inject style-post-loader before css-loader for scoped CSS and trimming
-    if (query.type === `style`) {
-      const cssLoaderIndex = this.loaders.findIndex(l => /\/css-loader/.test(l.request))
-      if (cssLoaderIndex) {
-        const afterLoaders = this.loaders.slice(1, cssLoaderIndex + 1).map(l => l.request)
-        const beforeLoaders = this.loaders.slice(cssLoaderIndex + 1).map(l => l.request)
-        const request = '-!' + [
-          ...afterLoaders,
-          stylePostLoaderPath,
-          ...beforeLoaders,
-          this.resourcePath + this.resourceQuery
-        ].join('!')
-        // use cjs to ensure exports from (vue-)style-loader/css-loader are intact
-        return `module.exports = require(${loaderUtils.stringifyRequest(this, request)})`
-      }
-    }
 
-    // for templates: inject the template compiler
-    if (query.type === `template`) {
-      const beforeLoaders = this.loaders.slice(1).map(l => l.request)
+  if (query.vue == null) {
+    return
+  }
+
+  // Inject style-post-loader before css-loader for scoped CSS and trimming
+  if (query.type === `style`) {
+    const cssLoaderIndex = this.loaders.findIndex(l => /\/css-loader/.test(l.request))
+    if (cssLoaderIndex) {
+      const afterLoaders = this.loaders.slice(1, cssLoaderIndex + 1).map(l => l.request)
+      const beforeLoaders = this.loaders.slice(cssLoaderIndex + 1).map(l => l.request)
       const request = '-!' + [
-        templateLoaderPath + `??vue-loader-options`,
+        ...afterLoaders,
+        stylePostLoaderPath,
         ...beforeLoaders,
         this.resourcePath + this.resourceQuery
       ].join('!')
-      // the template compiler uses esm exports
-      return `export * from ${loaderUtils.stringifyRequest(this, request)}`
+      // use cjs to ensure exports from (vue-)style-loader/css-loader are intact
+      return `module.exports = require(${loaderUtils.stringifyRequest(this, request)})`
     }
   }
+
+  // for templates: inject the template compiler
+  if (query.type === `template`) {
+    const beforeLoaders = this.loaders.slice(1).map(l => l.request)
+    const request = '-!' + [
+      templateLoaderPath + `??vue-loader-options`,
+      ...beforeLoaders,
+      this.resourcePath + this.resourceQuery
+    ].join('!')
+    // the template compiler uses esm exports
+    return `export * from ${loaderUtils.stringifyRequest(this, request)}`
+  }
 }

lib/template-loader/index.js

@@ -29,7 +29,7 @@ module.exports = function (template) {
     query
   ))
 
-  if (query.lang) {
+  if (query.lang && consolidate[query.lang]) {
     preprocess(
       template,
       options,
@@ -46,12 +46,6 @@ module.exports = function (template) {
 }
 
 function preprocess (rawTemplate, options, loaderContext, lang, cb) {
-  if (!consolidate[lang]) {
-    return cb(
-      new Error(`Template engine "${lang}" is not supported by vue-loader.`)
-    )
-  }
-
   const engineOptions = Object.assign({
     filename: loaderContext.resourcePath
   }, options.template)

package.json

@@ -59,6 +59,7 @@
     "jest": "^22.4.2",
     "jsdom": "^11.6.2",
     "lint-staged": "^7.0.0",
+    "markdown-loader": "^2.0.2",
     "mini-css-extract-plugin": "^0.2.0",
     "node-sass": "^4.7.2",
     "normalize-newline": "^3.0.0",

test/template.spec.js

@@ -171,21 +171,28 @@ test('functional template', done => {
   })
 })
 
-// TODO
-// test('customizing template loaders', done => {
-//   mockBundleAndRun({
-//     entry: 'markdown.vue'
-//   }, ({ window, module }) => {
-//     const vnode = mockRender(module, {
-//       msg: 'hi'
-//     })
-//     // <h2 id="-msg-">{{msg}}</h2>
-//     expect(vnode.tag).toBe('h2')
-//     expect(vnode.data.attrs.id).toBe('-msg-')
-//     expect(vnode.children[0].text).toBe('hi')
-//     done()
-//   })
-// })
+test('customizing template loaders', done => {
+  mockBundleAndRun({
+    entry: 'markdown.vue',
+    module: {
+      rules: [
+        {
+          test: /\.md$/,
+          loader: 'markdown-loader'
+        }
+      ]
+    }
+  }, ({ window, module }) => {
+    const vnode = mockRender(module, {
+      msg: 'hi'
+    })
+    // <h2 id="-msg-">{{msg}}</h2>
+    expect(vnode.tag).toBe('h2')
+    expect(vnode.data.attrs.id).toBe('-msg-')
+    expect(vnode.children[0].text).toBe('hi')
+    done()
+  })
+})
 
 test('custom compiler modules', done => {
   mockBundleAndRun({

yarn.lock

@@ -4896,6 +4896,17 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+markdown-loader@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/markdown-loader/-/markdown-loader-2.0.2.tgz#1cdcf11307658cd611046d7db34c2fe80542af7c"
+  dependencies:
+    loader-utils "^1.1.0"
+    marked "^0.3.9"
+
+marked@^0.3.9:
+  version "0.3.17"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.17.tgz#607f06668b3c6b1246b28f13da76116ac1aa2d2b"
+
 math-expression-evaluator@^1.2.14:
   version "1.2.17"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"