feat: support <script setup> in Vue 2.7

e2e/2.x/babel-in-package/package.json

@@ -8,8 +8,8 @@
   },
   "dependencies": {
     "source-map": "0.5.6",
-    "vue": "^2.5.21",
-    "vue-template-compiler": "^2.5.21"
+    "vue": "^2.7.7",
+    "vue-template-compiler": "^2.7.7"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",

e2e/2.x/basic/components/ScriptSetup.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <button @click="increase">Count: {{ num }}</button>
+    <Basic />
+    <span>{{ msg }}</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import Basic from './Basic.vue'
+
+const num = ref(5)
+const greet = () => console.log('greet')
+const increase = () => {
+  greet()
+  num.value++
+}
+const msg = 'hello world'
+</script>

e2e/2.x/basic/package.json

@@ -7,8 +7,8 @@
     "test": "jest --no-cache --coverage test.js"
   },
   "dependencies": {
-    "vue": "^2.5.21",
-    "vue-template-compiler": "^2.5.21"
+    "vue": "^2.7.7",
+    "vue-template-compiler": "^2.7.7"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",

e2e/2.x/basic/test.js

@@ -20,6 +20,7 @@ import PugRelative from './components/PugRelativeExtends.vue'
 import Jsx from './components/Jsx.vue'
 import Constructor from './components/Constructor.vue'
 import { compileStyle } from '@vue/component-compiler-utils'
+import ScriptSetup from './components/ScriptSetup'
 jest.mock('@vue/component-compiler-utils', () => ({
   ...jest.requireActual('@vue/component-compiler-utils'),
   compileStyle: jest.fn(() => ({ errors: [], code: '' }))
@@ -156,6 +157,12 @@ test('processes SFC with no template', () => {
   expect(wrapper.element.tagName).toBe('SECTION')
 })
 
+test('processes SFC with <script setup>', () => {
+  const wrapper = mount(ScriptSetup)
+  expect(wrapper.html()).toContain('Count: 5')
+  expect(wrapper.html()).toContain('Welcome to Your Vue.js App')
+})
+
 test('should pass properly "styleOptions" into "preprocessOptions"', () => {
   const filePath = resolve(__dirname, './components/Basic.vue')
   const fileString = readFileSync(filePath, { encoding: 'utf8' })

e2e/2.x/custom-transformers/package.json

@@ -7,8 +7,8 @@
     "test": "jest --no-cache --coverage test.js"
   },
   "dependencies": {
-    "vue": "^2.5.21",
-    "vue-template-compiler": "^2.5.21"
+    "vue": "^2.7.7",
+    "vue-template-compiler": "^2.7.7"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",

e2e/2.x/sass-importer/entry/package.json

@@ -7,8 +7,8 @@
     "test": "jest --no-cache --coverage test.js"
   },
   "dependencies": {
-    "vue": "^2.5.21",
-    "vue-template-compiler": "^2.5.21",
+    "vue": "^2.7.7",
+    "vue-template-compiler": "^2.7.7",
     "vue2-sass-importer-lib": "file:../lib",
     "vue2-sass-importer-sass-lib": "file:../sass-lib-v2"
   },

e2e/2.x/sass-importer/lib/package.json

@@ -14,6 +14,6 @@
     "vue2-sass-importer-sass-lib": "file:../sass-lib-v1"
   },
   "peerDependencies": {
-    "vue": "^2.5.21"
+    "vue": "^2.7.7"
   }
 }

e2e/2.x/style/package.json

@@ -7,8 +7,8 @@
     "test": "node setup.js && jest --no-cache test.js"
   },
   "dependencies": {
-    "vue": "^2.5.21",
-    "vue-template-compiler": "^2.5.21"
+    "vue": "^2.7.7",
+    "vue-template-compiler": "^2.7.7"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",

packages/vue2-jest/lib/generate-code.js

@@ -4,6 +4,7 @@ const splitRE = /\r?\n/g
 
 module.exports = function generateCode(
   scriptResult,
+  scriptSetupResult,
   templateResult,
   stylesResult,
   customBlocksResult,
@@ -13,8 +14,9 @@ module.exports = function generateCode(
   let renderFnStartLine
   let renderFnEndLine
 
-  if (scriptResult) {
-    output += `${scriptResult.code};\n`
+  const finalScriptResult = scriptResult || scriptSetupResult
+  if (finalScriptResult) {
+    output += `${finalScriptResult.code};\n`
   } else {
     output +=
       `Object.defineProperty(exports, "__esModule", {\n` +

packages/vue2-jest/lib/generate-source-map.js

@@ -4,6 +4,7 @@ const splitRE = /\r?\n/g
 
 module.exports = function generateSourceMap(
   scriptResult,
+  scriptSetupResult,
   src,
   filename,
   renderFnStartLine,
@@ -20,10 +21,13 @@ module.exports = function generateSourceMap(
   const srcContent = scriptFromExternalSrc ? scriptResult.externalSrc : src
 
   map.setSourceContent(file, srcContent)
-  if (scriptResult) {
+
+  const finalScriptResult = scriptResult || scriptSetupResult
+  if (finalScriptResult) {
     let inputMapConsumer =
-      scriptResult.map && new sourceMap.SourceMapConsumer(scriptResult.map)
-    scriptResult.code.split(splitRE).forEach(function(line, index) {
+      finalScriptResult.map &&
+      new sourceMap.SourceMapConsumer(finalScriptResult.map)
+    finalScriptResult.code.split(splitRE).forEach(function(line, index) {
       let ln = index + 1
       let originalLine = inputMapConsumer
         ? inputMapConsumer.originalPositionFor({ line: ln, column: 0 }).line

packages/vue2-jest/lib/map-lines.js

@@ -0,0 +1,55 @@
+const { SourceMapGenerator, SourceMapConsumer } = require('source-map')
+
+// based on @vue/compiler-sfc mapLines
+module.exports = function mapLines(oldMap, newMap) {
+  if (!oldMap) return newMap
+  if (!newMap) return oldMap
+
+  const oldMapConsumer = new SourceMapConsumer(oldMap)
+  const newMapConsumer = new SourceMapConsumer(newMap)
+  const mergedMapGenerator = new SourceMapGenerator()
+
+  newMapConsumer.eachMapping(m => {
+    if (m.originalLine == null) {
+      return
+    }
+
+    const origPosInOldMap = oldMapConsumer.originalPositionFor({
+      line: m.originalLine,
+      column: m.originalColumn
+    })
+
+    if (origPosInOldMap.source == null) {
+      return
+    }
+
+    mergedMapGenerator.addMapping({
+      generated: {
+        line: m.generatedLine,
+        column: m.generatedColumn
+      },
+      original: {
+        line: origPosInOldMap.line, // map line
+        // use current column, since the oldMap produced by @vue/compiler-sfc
+        // does not
+        column: m.originalColumn
+      },
+      source: origPosInOldMap.source,
+      name: origPosInOldMap.name
+    })
+  })
+
+  // source-map's type definition is incomplete
+  const generator = mergedMapGenerator
+  oldMapConsumer.sources.forEach(sourceFile => {
+    generator._sources.add(sourceFile)
+    const sourceContent = oldMapConsumer.sourceContentFor(sourceFile)
+    if (sourceContent != null) {
+      mergedMapGenerator.setSourceContent(sourceFile, sourceContent)
+    }
+  })
+
+  generator._sourceRoot = oldMap.sourceRoot
+  generator._file = oldMap.file
+  return generator.toJSON()
+}

packages/vue2-jest/lib/process.js

@@ -11,8 +11,9 @@ const stripInlineSourceMap = require('./utils').stripInlineSourceMap
 const getCustomTransformer = require('./utils').getCustomTransformer
 const loadSrc = require('./utils').loadSrc
 const babelTransformer = require('babel-jest').default
-const compilerUtils = require('@vue/component-compiler-utils')
+const { parse, compileTemplate, compileScript } = require('@vue/compiler-sfc')
 const generateCode = require('./generate-code')
+const mapLines = require('./map-lines')
 
 function resolveTransformer(lang = 'js', vueJestConfig) {
   const transformer = getCustomTransformer(vueJestConfig['transform'], lang)
@@ -45,7 +46,31 @@ function processScript(scriptPart, filePath, config) {
   return result
 }
 
-function processTemplate(template, filename, config) {
+function processScriptSetup(descriptor, filePath, config) {
+  if (!descriptor.scriptSetup) {
+    return null
+  }
+  const vueJestConfig = getVueJestConfig(config)
+  const content = compileScript(descriptor, {
+    id: filePath,
+    ...vueJestConfig.compilerOptions
+  })
+  const contentMap = mapLines(descriptor.scriptSetup.map, content.map)
+
+  const transformer = resolveTransformer(
+    descriptor.scriptSetup.lang,
+    vueJestConfig
+  )
+
+  const result = transformer.process(content.content, filePath, config)
+  result.map = mapLines(contentMap, result.map)
+
+  return result
+}
+
+function processTemplate(descriptor, filename, config) {
+  const { template, scriptSetup } = descriptor
+
   if (!template) {
     return null
   }
@@ -56,14 +81,24 @@ function processTemplate(template, filename, config) {
     template.content = loadSrc(template.src, filename)
   }
 
+  let bindings
+  if (scriptSetup) {
+    const scriptSetupResult = compileScript(descriptor, {
+      id: filename,
+      ...vueJestConfig.compilerOptions
+    })
+    bindings = scriptSetupResult.bindings
+  }
+
   const userTemplateCompilerOptions = vueJestConfig.templateCompiler || {}
-  const result = compilerUtils.compileTemplate({
+  const result = compileTemplate({
     source: template.content,
     compiler: VueTemplateCompiler,
     filename: filename,
     isFunctional: template.attrs.functional,
     preprocessLang: template.lang,
     preprocessOptions: vueJestConfig[template.lang],
+    bindings,
     ...userTemplateCompilerOptions,
     compilerOptions: {
       optimize: false,
@@ -92,14 +127,15 @@ function processStyle(styles, filename, config) {
 }
 
 module.exports = function(src, filename, config) {
-  const descriptor = compilerUtils.parse({
+  const descriptor = parse({
     source: src,
     compiler: VueTemplateCompiler,
     filename
   })
 
-  const templateResult = processTemplate(descriptor.template, filename, config)
+  const templateResult = processTemplate(descriptor, filename, config)
   const scriptResult = processScript(descriptor.script, filename, config)
+  const scriptSetupResult = processScriptSetup(descriptor, filename, config)
   const stylesResult = processStyle(descriptor.styles, filename, config)
   const customBlocksResult = processCustomBlocks(
     descriptor.customBlocks,
@@ -120,6 +156,7 @@ module.exports = function(src, filename, config) {
 
   const output = generateCode(
     scriptResult,
+    scriptSetupResult,
     templateResult,
     stylesResult,
     customBlocksResult,
@@ -128,6 +165,7 @@ module.exports = function(src, filename, config) {
 
   const map = generateSourceMap(
     scriptResult,
+    scriptSetupResult,
     src,
     filename,
     output.renderFnStartLine,

packages/vue2-jest/package.json

@@ -34,8 +34,8 @@
     "semantic-release": "^15.13.2",
     "ts-jest": "^28.0.1",
     "typescript": "^4.6.4",
-    "vue": "^2.4.2",
-    "vue-template-compiler": "^2.4.2"
+    "vue": "^2.7.7",
+    "vue-template-compiler": "^2.7.7"
   },
   "peerDependencies": {
     "@babel/core": "7.x",