feat: add support for custom blocks inside of the vue-jest global config

Author: JessicaSachs

lib/constants.js

@@ -0,0 +1,8 @@
+module.exports = {
+  vueOptionsNamespace: '__options__',
+  defaultVueJestConfig: {
+    transform: {
+      i18n: require('./transformers/i18n')
+    }
+  }
+}

lib/generate-code.js

@@ -1,10 +1,12 @@
+const namespace = require('./constants').vueOptionsNamespace
+
 const splitRE = /\r?\n/g
 
 module.exports = function generateCode(
   scriptResult,
   templateResult,
   stylesResult,
-  i18nResult,
+  customBlocksResult,
   isFunctional
 ) {
   let output = ''
@@ -22,7 +24,7 @@ module.exports = function generateCode(
   }
 
   output +=
-    `var __options__ = typeof exports.default === 'function' ` +
+    `var ${namespace} = typeof exports.default === 'function' ` +
     `? exports.default.options ` +
     `: exports.default\n`
 
@@ -38,11 +40,11 @@ module.exports = function generateCode(
 
     output +=
       `__options__.render = render\n` +
-      `__options__.staticRenderFns = staticRenderFns\n`
+      `${namespace}.staticRenderFns = staticRenderFns\n`
 
     if (isFunctional) {
-      output += '__options__.functional = true\n'
-      output += '__options__._compiled = true\n'
+      output += `${namespace}.functional = true\n`
+      output += `${namespace}._compiled = true\n`
     }
   }
 
@@ -60,25 +62,25 @@ module.exports = function generateCode(
     if (isFunctional) {
       output +=
         `;(function() {\n` +
-        `  var originalRender = __options__.render\n` +
+        `  var originalRender = ${namespace}.render\n` +
         `  var styleFn = function () { ${styleStr} }\n` +
-        `  __options__.render = function renderWithStyleInjection (h, context) {\n` +
+        `  ${namespace}.render = function renderWithStyleInjection (h, context) {\n` +
         `    styleFn.call(context)\n` +
         `    return originalRender(h, context)\n` +
         `  }\n` +
         `})()\n`
     } else {
       output +=
         `;(function() {\n` +
-        `  var beforeCreate = __options__.beforeCreate\n` +
+        `  var beforeCreate = ${namespace}.beforeCreate\n` +
         `  var styleFn = function () { ${styleStr} }\n` +
-        `  __options__.beforeCreate = beforeCreate ? [].concat(beforeCreate, styleFn) : [styleFn]\n` +
+        `  ${namespace}.beforeCreate = beforeCreate ? [].concat(beforeCreate, styleFn) : [styleFn]\n` +
         `})()\n`
     }
   }
 
-  if (i18nResult) {
-    output += `;\n ${i18nResult}`
+  if (customBlocksResult) {
+    output += `;\n ${customBlocksResult}`
   }
   return {
     code: output,

lib/process-custom-blocks.js

@@ -0,0 +1,41 @@
+const { getVueJestConfig, getCustomTransformer } = require('./utils')
+const vueOptionsNamespace = require('./constants').vueOptionsNamespace
+
+function applyTransformer(
+  transformer,
+  blocks,
+  vueOptionsNamespace,
+  filename,
+  config
+) {
+  return transformer.process(blocks, vueOptionsNamespace, filename, config)
+}
+
+function groupByType(acc, block) {
+  acc[block.type] = acc[block.type] || []
+  acc[block.type].push(block)
+  return acc
+}
+
+module.exports = function(allBlocks, filename, config) {
+  const blocksByType = allBlocks.reduce(groupByType, {})
+  const code = []
+  for (const [type, blocks] of Object.entries(blocksByType)) {
+    const transformer = getCustomTransformer(
+      getVueJestConfig(config).transform,
+      type
+    )
+    if (transformer) {
+      const codeStr = applyTransformer(
+        transformer,
+        blocks,
+        vueOptionsNamespace,
+        filename,
+        config
+      )
+      code.push(codeStr)
+    }
+  }
+
+  return code.length ? code.join('\n') : ''
+}

lib/process.js

@@ -2,10 +2,10 @@ const splitRE = /\r?\n/g
 
 const VueTemplateCompiler = require('vue-template-compiler')
 const generateSourceMap = require('./generate-source-map')
-const typescriptTransformer = require('./typescript-transformer')
-const coffeescriptTransformer = require('./coffee-transformer')
+const typescriptTransformer = require('./transformers/typescript')
+const coffeescriptTransformer = require('./transformers/coffee')
 const _processStyle = require('./process-style')
-const processI18n = require('./process-i18n')
+const processCustomBlocks = require('./process-custom-blocks')
 const getVueJestConfig = require('./utils').getVueJestConfig
 const logResultErrors = require('./utils').logResultErrors
 const stripInlineSourceMap = require('./utils').stripInlineSourceMap
@@ -100,7 +100,11 @@ module.exports = function(src, filename, config) {
   const templateResult = processTemplate(descriptor.template, filename, config)
   const scriptResult = processScript(descriptor.script, filename, config)
   const stylesResult = processStyle(descriptor.styles, filename, config)
-  const i18nResult = processI18n(descriptor.customBlocks, filename, config)
+  const customBlocksResult = processCustomBlocks(
+    descriptor.customBlocks,
+    filename,
+    config
+  )
 
   const isFunctional =
     descriptor.template &&
@@ -114,7 +118,7 @@ module.exports = function(src, filename, config) {
     scriptResult,
     templateResult,
     stylesResult,
-    i18nResult,
+    customBlocksResult,
     isFunctional
   )
 

lib/coffee-transformer.js renamed to lib/transformers/coffee.js

@@ -1,6 +1,6 @@
-const ensureRequire = require('./ensure-require.js')
-const throwError = require('./utils').throwError
-const getBabelOptions = require('./utils').getBabelOptions
+const ensureRequire = require('../ensure-require.js')
+const throwError = require('../utils').throwError
+const getBabelOptions = require('../utils').getBabelOptions
 
 module.exports = {
   process(src, filename, config) {

lib/process-i18n.js renamed to lib/transformers/i18n.js

@@ -3,7 +3,6 @@ const yaml = require('js-yaml')
 const fs = require('fs')
 const path = require('path')
 
-const VUE_OPTIONS = '__options__'
 const VUE_I18N_OPTION = '__i18n'
 
 function convert(source, lang) {
@@ -39,22 +38,24 @@ function parseLanguageAndContent(block, filename) {
   }
 }
 
-module.exports = function(blocks, filename) {
-  const base = `${VUE_OPTIONS}.${VUE_I18N_OPTION} = []`
-  const codes = blocks.map(block => {
-    if (block.type === 'i18n') {
-      const value = parseLanguageAndContent(block, filename)
-        .replace(/\u2028/g, '\\u2028')
-        .replace(/\u2029/g, '\\u2029')
-        .replace(/\\/g, '\\\\')
-      return `${VUE_OPTIONS}.${VUE_I18N_OPTION}.push('${value.replace(
-        /\u0027/g,
-        '\\u0027'
-      )}')`
-    } else {
-      return ''
-    }
-  })
-
-  return codes.length ? [base].concat(codes).join('\n') : ''
+module.exports = {
+  process(blocks, vueOptionsNamespace, filename) {
+    const base = `${vueOptionsNamespace}.${VUE_I18N_OPTION} = []`
+    const codes = blocks.map(block => {
+      if (block.type === 'i18n') {
+        const value = parseLanguageAndContent(block, filename)
+          .replace(/\u2028/g, '\\u2028')
+          .replace(/\u2029/g, '\\u2029')
+          .replace(/\\/g, '\\\\')
+        return `${vueOptionsNamespace}.${VUE_I18N_OPTION}.push('${value.replace(
+          /\u0027/g,
+          '\\u0027'
+        )}')`
+      } else {
+        return ''
+      }
+    })
+
+    return codes.length ? [base].concat(codes).join('\n') : ''
+  }
 }

lib/typescript-transformer.js renamed to lib/transformers/typescript.js

@@ -1,10 +1,12 @@
-const ensureRequire = require('./ensure-require')
+const ensureRequire = require('../ensure-require')
 const babelJest = require('babel-jest')
-const getBabelOptions = require('./utils').getBabelOptions
-const getTsJestConfig = require('./utils').getTsJestConfig
-const stripInlineSourceMap = require('./utils').stripInlineSourceMap
-const getCustomTransformer = require('./utils').getCustomTransformer
-const getVueJestConfig = require('./utils').getVueJestConfig
+const {
+  getBabelOptions,
+  getTsJestConfig,
+  stripInlineSourceMap,
+  getCustomTransformer,
+  getVueJestConfig
+} = require('../utils')
 
 module.exports = {
   process(scriptContent, filePath, config) {

lib/utils.js

@@ -1,3 +1,4 @@
+const constants = require('./constants')
 const loadPartialConfig = require('@babel/core').loadPartialConfig
 const chalk = require('chalk')
 const path = require('path')
@@ -83,19 +84,32 @@ const getCustomTransformer = function getCustomTransformer(
   transform = {},
   lang
 ) {
-  let transformerPath = fetchTransformer(lang, transform)
-  if (transformerPath) {
-    const transformer = require(resolvePath(transformerPath))
-
-    if (!isValidTransformer(transformer)) {
-      throwError(
-        `transformer must contain at least one process, preprocess, or ` +
-          `postprocess method`
-      )
-    }
-    return transformer
+  transform = { ...constants.defaultVueJestConfig.transform, ...transform }
+
+  const transformerPath = fetchTransformer(lang, transform)
+
+  if (!transformerPath) {
+    return null
   }
-  return null
+
+  let transformer
+  if (
+    typeof transformerPath === 'string' &&
+    require(resolvePath(transformerPath))
+  ) {
+    transformer = require(resolvePath(transformerPath))
+  } else if (typeof transformerPath === 'object') {
+    transformer = transformerPath
+  }
+
+  if (!isValidTransformer(transformer)) {
+    throwError(
+      `transformer must contain at least one process, preprocess, or ` +
+        `postprocess method`
+    )
+  }
+
+  return transformer
 }
 
 const throwError = function error(msg) {