support pre/post loaders for custom blocks (#744)

Author: kazupon

lib/loader.js

@@ -174,7 +174,7 @@ module.exports = function (content) {
 
   function getLoaderString (type, part, index, scoped) {
     var loader = getRawLoaderString(type, part, index, scoped)
-    var lang = part.lang || defaultLang[type]
+    var lang = getLangString(type, part)
     if (preLoaders[lang]) {
       loader = loader + ensureBang(preLoaders[lang])
     }
@@ -184,6 +184,14 @@ module.exports = function (content) {
     return loader
   }
 
+  function getLangString (type, part) {
+    if (type === 'script' || type === 'template' || type === 'styles') {
+      return part.lang || defaultLang[type]
+    } else {
+      return type
+    }
+  }
+
   function getRawLoaderString (type, part, index, scoped) {
     var lang = part.lang || defaultLang[type]
     var loader = loaders[lang]

package.json

@@ -61,6 +61,7 @@
     "extract-text-webpack-plugin": "^2.0.0-rc.0",
     "file-loader": "^0.10.0",
     "inject-loader": "^2.0.0",
+    "js-yaml": "^3.8.2",
     "jsdom": "^9.2.1",
     "marked": "^0.3.6",
     "memory-fs": "^0.4.1",

test/fixtures/custom-blocks.vue

@@ -0,0 +1,15 @@
+<i18n lang="yaml">
+en:
+  hello: "hello world"
+ja:
+  hello: "こんにちは、世界"
+</i18n>
+
+<blog>## foo</blog>
+
+<template>
+  <div>
+    <h1>{{ msg }}</h1>
+    <p v-html="blog"></p>
+  </div>
+</template>

test/mock-loaders/blog.js

@@ -0,0 +1,8 @@
+function normalize (code) {
+  return code.split(/\r?\n/).map(function (line) { return line }).join('')
+}
+
+module.exports = function (source) {
+  var code = "module.exports = function (Component) { Component.options.__blog = '" + source + "' }"
+  return normalize(code)
+}

test/mock-loaders/i18n.js

@@ -0,0 +1,6 @@
+module.exports = function (source) {
+  var value = typeof source === 'string' ? JSON.parse(source) : source
+  var jsonString = JSON.stringify(value).replace(/\u2028/g, '\\u2028').replace(/\u2029/g, '\\u2029')
+  var code = 'module.exports = function (Component) { Component.options.__i18n = ' + JSON.stringify(jsonString) + ' }'
+  this.callback(null, code)
+}

test/mock-loaders/yaml.js

@@ -0,0 +1,7 @@
+var yaml = require('js-yaml')
+
+module.exports = function (source) {
+  this.cacheable && this.cacheable()
+  var res = yaml.safeLoad(source)
+  return JSON.stringify(res)
+}

test/test.js

@@ -716,6 +716,32 @@ describe('vue-loader', function () {
     })
   })
 
+  it('pre/post loaders for custom blocks', done => {
+    test({
+      entry: './test/fixtures/custom-blocks.vue',
+      vue: {
+        preLoaders: {
+          i18n: require.resolve('./mock-loaders/yaml')
+        },
+        loaders: {
+          i18n: require.resolve('./mock-loaders/i18n'),
+          blog: 'marked'
+        },
+        postLoaders: {
+          blog: require.resolve('./mock-loaders/blog')
+        }
+      }
+    }, (window, module) => {
+      var vnode = mockRender(module, {
+        msg: JSON.parse(module.__i18n).en.hello,
+        blog: module.__blog
+      })
+      expect(vnode.children[0].children[0]).to.equal('hello world')
+      expect(vnode.children[2].data.domProps.innerHTML).to.equal('<h2 id="foo">foo</h2>')
+      done()
+    })
+  })
+
   it('custom compiler modules', done => {
     test({
       entry: './test/fixtures/custom-module.vue',