feat(pug): add support for pug template lang

Author: eddyerburgh

jest-vue.js

@@ -19,7 +19,7 @@ function processScript (scriptPart) {
 module.exports = {
   process (src, path) {
     var parts = vueCompiler.parseComponent(src, { pad: true })
-    const renderFunctions = compileTemplate(parts.template.content)
+    const renderFunctions = compileTemplate(parts.template)
 
     const result = processScript(parts.script)
 

lib/compilers/pug-compiler.js

@@ -0,0 +1,13 @@
+var ensureRequire = require('../ensure-require.js')
+
+module.exports = function (raw) {
+  var html;
+  ensureRequire('pug', 'pug')
+  var jade = require('pug')
+  try {
+    var html = jade.compile(raw)()
+  } catch (err) {
+    throw Error(err)
+  }
+  return html
+}

lib/ensure-require.js

@@ -0,0 +1,38 @@
+module.exports = function (name, deps) {
+  var i, len
+  var missing = []
+  if (typeof deps === 'string') {
+    deps = [deps]
+  }
+  for (i = 0, len = deps.length; i < len; i++) {
+    var mis
+    var req = deps[i]
+    if (typeof req === 'string') {
+      mis = req
+    } else {
+      mis = req[1]
+      req = req[0]
+    }
+    try {
+      // hack for babel-runtime because it does not expose "main" field
+      if (req === 'babel-runtime') {
+        req = 'babel-runtime/core-js'
+      }
+      require.resolve(req)
+    } catch (e) {
+      missing.push(mis)
+    }
+  }
+  if (missing.length > 0) {
+    var message = 'You are trying to use "' + name + '". '
+    var npmInstall = 'npm install --save-dev ' + missing.join(' ')
+    if (missing.length > 1) {
+      var last = missing.pop()
+      message += missing.join(', ') + ' and ' + last + ' are '
+    } else {
+      message += missing[0] + ' is '
+    }
+    message += 'missing.\n\nTo install run:\n' + npmInstall
+    throw new Error(message)
+  }
+}

lib/template-compiler.js

@@ -1,9 +1,19 @@
 var chalk = require('chalk')
 var vueCompiler = require('vue-template-compiler')
 var transpile = require('vue-template-es2015-compiler')
+var compilePug = require('./compilers/pug-compiler')
 
-module.exports = function compileTemplate (template, compiler) {
-  var compiled = vueCompiler.compile(template)
+function getTemplateContent(templatePart) {
+  if(templatePart.lang === 'pug') {
+    return compilePug(templatePart.content)
+  }
+  return templatePart.content
+}
+
+module.exports = function compileTemplate (templatePart, compiler) {
+  var templateContent = getTemplateContent(templatePart)
+
+  var compiled = vueCompiler.compile(templateContent)
   if (compiled.errors.length) {
     compiled.errors.forEach(function (msg) {
       console.error('\n' + chalk.red(msg) + '\n')

package.json

@@ -24,9 +24,11 @@
     "eslint-plugin-vue": "^2.1.0",
     "eslint-plugin-vue-libs": "^1.2.0",
     "jest": "^20.0.4",
+    "pug": "^2.0.0-rc.3",
     "vue": "^2.4.2",
     "vue-template-compiler": "^2.4.2",
-    "vue-template-es2015-compiler": "^1.5.3"
+    "vue-template-es2015-compiler": "^1.5.3",
+    "vue-test-utils": "git+https://github.com/vuejs/vue-test-utils.git"
   },
   "peerDependencies": {
     "vue": "^2.x",

test/pug.spec.js

@@ -0,0 +1,8 @@
+import { shallow } from 'vue-test-utils'
+import Pug from './resources/Pug.vue'
+
+test('processes .vue file with pug template', () => {
+  const wrapper = shallow(Pug)
+  expect(wrapper.is('div')).toBe(true)
+  expect(wrapper.hasClass('pug')).toBe(true)
+})

test/resources/Pug.vue

@@ -0,0 +1,9 @@
+<template lang="pug">
+  .pug
+</template>
+
+<script>
+    export default {
+        name: 'pug'
+    };
+</script>