feat: use @vue/component-compiler-utils (#51)

* feat: use @vue/component-compiler-utils to compile template

BREAKING CHANGE: renamed transformToRequire with transformAssetUrls

* feat: use @vue/component-compiler-utils to transform css

* docs: update complex example

* docs: rename transformToRequire with transformAssetUrls

README.md

@@ -31,7 +31,7 @@ module.exports = {
 
 ### Asset Transforms
 
-To transform asset paths in your templates to `require` expressions that webpack can handle, configure the `transformToRequire` option. For example, if you would like webpack to process the image files in the `src` attribute of `<img>` elements:
+To transform asset paths in your templates to `require` expressions that webpack can handle, configure the `transformAssetUrls` option. For example, if you would like webpack to process the image files in the `src` attribute of `<img>` elements:
 
 ```js
 module.exports = {
@@ -41,7 +41,7 @@ module.exports = {
         test: /\.html$/,
         loader: 'vue-template-loader',
         options: {
-          transformToRequire: {
+          transformAssetUrls: {
             // The key should be an element name
             // The value should be an attribute name or an array of attribute names
             img: 'src'

examples/complex/webpack.config.js

@@ -1,6 +1,6 @@
 const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 module.exports = {
   context: path.resolve(__dirname),
@@ -26,7 +26,7 @@ module.exports = {
             loader: '../../', // vue-template-loader
             options: {
               scoped: true,
-              transformToRequire: {
+              transformAssetUrls: {
                 img: 'src'
               }
             }
@@ -44,15 +44,15 @@ module.exports = {
       {
         enforce: 'post',
         test: /\.s?css$/,
-        loader: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: {
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
             loader: 'css-loader',
             options: {
               sourceMap: true
             }
           }
-        })
+        ]
       },
       {
         test: /\.png/,
@@ -64,6 +64,8 @@ module.exports = {
     new HtmlWebpackPlugin({
       template: './index.html'
     }),
-    new ExtractTextPlugin('style.css')
+    new MiniCssExtractPlugin({
+      filename: 'style.css'
+    })
   ]
 }

lib/modules/template-compiler.js

@@ -1,17 +1,18 @@
 const assert = require('assert')
 const compiler = require('vue-template-compiler')
-const transpile = require('vue-template-es2015-compiler')
+const { compileTemplate } = require('@vue/component-compiler-utils')
 const SourceMapGenerator = require('source-map').SourceMapGenerator
 
 const empty =
-  `var render = ${toFunction('')}\n` +
+  'var render = function(){}\n' +
   'var staticRenderFns = []'
 
 module.exports = function compile (template, options = {}) {
-  const compiled = compiler.compile(template, {
-    modules: [{
-      postTransformNode: el => transformAsset(el, options.transformToRequire || {})
-    }]
+  const compiled = compileTemplate({
+    source: template,
+    filename: options.filename,
+    compiler,
+    transformAssetUrls: options.transformAssetUrls
   })
 
   if (compiled.errors.length > 0) {
@@ -21,14 +22,9 @@ module.exports = function compile (template, options = {}) {
     }
   }
 
-  const transpiled = transpile(
-    `var render = ${toFunction(compiled.render)}\n` +
-    `var staticRenderFns = [${compiled.staticRenderFns.map(toFunction).join(',')}]`
-  )
-
   const result = {
     errors: [],
-    code: transpiled
+    code: compiled.code
   }
 
   if (options.sourceMap) {
@@ -52,45 +48,3 @@ module.exports = function compile (template, options = {}) {
 
   return result
 }
-
-function transformAsset (el, transformToRequire) {
-  if (!el.attrs) return
-
-  Object.keys(transformToRequire).forEach(targetTag => {
-    if (el.tag !== targetTag) return
-
-    let targetAttrs = transformToRequire[targetTag]
-    el.attrs.forEach(attr => {
-      if (typeof targetAttrs === 'string') {
-        targetAttrs = [targetAttrs]
-      }
-
-      targetAttrs.forEach(targetName => {
-        if (attr.name !== targetName) return
-        rewriteAsset(attr)
-      })
-    })
-  })
-}
-
-function rewriteAsset (attr) {
-  let value = attr.value
-
-  const isStatic = value[0] === '"'
-    && value[value.length - 1] === '"'
-  if (!isStatic) {
-    return
-  }
-
-  const first = value[1]
-  if (first === '.' || first === '~') {
-    if (first === '~') {
-      value = '"' + value.slice(2)
-    }
-    attr.value = `require(${value})`
-  }
-}
-
-function toFunction (code) {
-  return `function(){${code}}`
-}

lib/scoped-style-loader.js

@@ -1,20 +1,27 @@
 const assert = require('assert')
 const loaderUtils = require('loader-utils')
-const addScopedId = require('./modules/add-scoped-id')
+const { compileStyleAsync } = require('@vue/component-compiler-utils')
 
 module.exports = function (rawStyle, prevMap) {
-  this.cacheable()
   const cb = this.async()
   const { id } = loaderUtils.getOptions(this)
 
   assert(id)
 
-  addScopedId(id, rawStyle, {
-    sourceMap: this.sourceMap,
-    fileName: this.resourcePath,
-    prevMap
+  compileStyleAsync({
+    source: rawStyle,
+    filename: this.resourcePath,
+    id: 'data-v-' + id,
+    map: prevMap,
+    scoped: true
   }).then(
-    result => cb(null, result.css, result.map),
+    result => {
+      if (result.errors.length > 0) {
+        cb(result.errors.join('\n'))
+        return
+      }
+      cb(null, result.code, result.map)
+    },
     err => cb(err)
   )
 }

lib/template-loader.js

@@ -10,7 +10,6 @@ const genId = require('./modules/gen-id')
 const Builder = require('./builder/builder')
 
 module.exports = function (content) {
-  this.cacheable()
   const isServer = this.target === 'node'
   const id = genId(this.resourcePath, process.cwd())