feat: support for extending pug templates using relative paths (#83)

Author: sandst1

lib/compilers/pug-compiler.js

@@ -1,13 +1,16 @@
 var ensureRequire = require('../ensure-require.js')
 const throwError = require('../throw-error')
 
-module.exports = function (raw, config) {
+module.exports = function (templatePart, config) {
   const options = (config && config['pug']) || {}
+  if (templatePart.filename) {
+    options.filename = templatePart.filename
+  }
   var html
   ensureRequire('pug', 'pug')
   var jade = require('pug')
   try {
-    html = jade.compile(raw, options)()
+    html = jade.compile(templatePart.content, options)()
   } catch (err) {
     throwError(err)
   }

lib/process.js

@@ -68,8 +68,10 @@ module.exports = function (src, filePath, jestConfig) {
     ': defaultExport)\n'
 
   if (parts.template) {
+    parts.template.filename = filePath
     if (parts.template.src) {
-      parts.template.content = fs.readFileSync(join(filePath, '..', parts.template.src), 'utf8')
+      parts.template.filename = join(filePath, '..', parts.template.src)
+      parts.template.content = fs.readFileSync(parts.template.filename, 'utf8')
     }
 
     const renderFunctions = compileTemplate(parts.template, config)

lib/template-compiler.js

@@ -8,7 +8,7 @@ const throwError = require('./throw-error')
 
 function getTemplateContent (templatePart, config) {
   if (templatePart.lang === 'pug') {
-    return compilePug(templatePart.content, config)
+    return compilePug(templatePart, config)
   }
   if (templatePart.lang === 'jade') {
     return compileJade(templatePart.content)

test/pug.spec.js

@@ -26,3 +26,11 @@ test('supports global pug options and extends templates correctly from .pug file
   expect(compiled.code).toContain('pug-base')
   expect(compiled.code).toContain('pug-extended')
 })
+
+test('supports relative paths when extending templates from .pug files', () => {
+  const filePath = resolve(__dirname, './resources/PugRelativeExtends.vue')
+  const fileString = readFileSync(filePath, { encoding: 'utf8' })
+  const compiled = jestVue.process(fileString, filePath)
+  expect(compiled.code).toContain('pug-relative-base')
+  expect(compiled.code).toContain('pug-extended')
+})

test/relative/PugRelativeBase.pug

@@ -0,0 +1,2 @@
+div(class='pug-relative-base')
+  block component

test/resources/PugRelativeExtends.vue

@@ -0,0 +1,11 @@
+<template lang="pug">
+  extends ../relative/PugRelativeBase.pug
+  block component
+    div(class="pug-extended")
+</template>
+
+<script>
+    export default {
+        name: 'pug'
+    }
+</script>