add vue-template-compiler options passing (#976)

* feat(template-compiler): add compilerDirectives option

* docs(en): add compilerDirectives option

* docs(en): add compilerModules option

* docs(ja): translate options

* docs: updates

Author: kazupon

docs/en/SUMMARY.md

@@ -26,6 +26,8 @@
   - [cssSourceMap](options.md#csssourcemap)
   - [esModule](options.md#esmodule)
   - [preserveWhitespace](options.md#preservewhitespace)
+  - [compilerModules](options.md#compilermodules)
+  - [compilerDirectives](options.md#compilerdirectives)
   - [transformToRequire](options.md#transformtorequire)
   - [buble](options.md#buble)
   - [extractCSS](options.md#extractcss)

docs/en/options.md

@@ -137,6 +137,22 @@ module.exports = {
 
   If set to `false`, the whitespaces between HTML tags in templates will be ignored.
 
+### compilerModules
+
+- type: `Array<ModuleOptions>`
+- default: `[]`
+
+  Configure `modules` options for `vue-template-compiler`, In about details, see more [`modules` option](https://github.com/vuejs/vue/blob/dev/packages/vue-template-compiler/README.md#compilercompiletemplate-options) of `vue-template-compiler`.
+
+### compilerDirectives
+
+- type: `{ [tag: string]: Function }`
+- default: `{}` (v13.0.5+)
+
+  > version note: in v12.x, supported in v12.2.3+
+
+  Configure `directives` options for `vue-template-compiler`, In about details, see more [`directives` option](https://github.com/vuejs/vue/blob/dev/packages/vue-template-compiler/README.md#compilercompiletemplate-options) of `vue-template-compiler`.
+
 ### transformToRequire
 
 - type: `{ [tag: string]: string | Array<string> }`

docs/ja/SUMMARY.md

@@ -26,6 +26,8 @@
   - [cssSourceMap](options.md#csssourcemap)
   - [esModule](options.md#esmodule)
   - [preserveWhitespace](options.md#preservewhitespace)
+  - [compilerModules](options.md#compilermodules)
+  - [compilerDirectives](options.md#compilerdirectives)
   - [transformToRequire](options.md#transformtorequire)
   - [buble](options.md#buble)
   - [extractCSS](options.md#extractcss)

docs/ja/options.md

@@ -132,10 +132,26 @@ module.exports = {
 ### preserveWhitespace
 
 - 型: `boolean`
-- デフォルトx: `true`
+- デフォルト: `true`
 
   もし `false` に設定されていたら、テンプレート内の HTML タグ間の空白は無視されます。
 
+### compilerModules
+
+- 型: `Array<ModuleOptions>`
+- デフォルト: `[]`
+
+  `vue-template-compiler` の `modules` オプションを設定します。詳細については `vue-template-compiler` の [`modules` option](https://github.com/vuejs/vue/blob/dev/packages/vue-template-compiler/README.md#compilercompiletemplate-options) を参照してください。
+
+### compilerDirectives
+
+- 型: `{ [tag: string]: Function }`
+- デフォルト: `{}` (v13.0.5 以降)
+
+  > バージョンメモ: v12.x においては、v12.2.3 以降からサポートされます。
+
+  `vue-template-compiler` の `directives` オプションを設定します。詳細については `vue-template-compiler` の [`directives` option](https://github.com/vuejs/vue/blob/dev/packages/vue-template-compiler/README.md#compilercompiletemplate-options) を参照してください。
+
 ### transformToRequire
 
 - 型: `{ [tag: string]: string | Array<string> }`

lib/template-compiler/index.js

@@ -23,6 +23,7 @@ module.exports = function (html) {
   var compilerOptions = {
     preserveWhitespace: options.preserveWhitespace,
     modules: defaultModules.concat(userModules || []),
+    directives: vueOptions.compilerDirectives || options.compilerDirectives || {},
     scopeId: options.hasScoped ? options.id : null,
     comments: options.hasComment
   }

test/fixtures/custom-directive.vue

@@ -0,0 +1,3 @@
+<template>
+  <p v-i18n="keypath"></p>
+</template>

test/test.js

@@ -100,7 +100,7 @@ function mockRender (options, data) {
   }
   function e (text = '') {
     return {
-      text:  text,
+      text: text,
       isComment: true
     }
   }
@@ -899,6 +899,29 @@ describe('vue-loader', function () {
     })
   })
 
+  it('custom compiler directives', done => {
+    test({
+      entry: './test/fixtures/custom-directive.vue',
+      vue: {
+        compilerDirectives: {
+          i18n (el, dir) {
+            if (dir.name === 'i18n' && dir.value) {
+              el.i18n = dir.value
+              if (!el.props) {
+                el.props = []
+              }
+              el.props.push({ name: 'textContent', value: `_s(${JSON.stringify(dir.value)})` })
+            }
+          }
+        }
+      }
+    }, (window, module) => {
+      var vnode = mockRender(module)
+      expect(vnode.data.domProps.textContent).to.equal('keypath')
+      done()
+    })
+  })
+
   it('functional component with styles', done => {
     test({
       entry: './test/fixtures/functional-style.vue'