Merge pull request #290 from vuejs/feature/script-setu

feat: support <script setup>

Author: lmiller1990

e2e/__projects__/basic/components/ScriptSetup.vue

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

e2e/__projects__/basic/package.json

@@ -8,12 +8,12 @@
     "test": "jest --no-cache --coverage test.js"
   },
   "dependencies": {
-    "vue": "3.0.0-alpha.10"
+    "vue": "^3.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",
     "@babel/preset-env": "^7.2.3",
-    "@vue/compiler-sfc": "3.0.0-alpha.10",
+    "@vue/compiler-sfc": "^3.0.0",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-vue-jsx": "^3.7.0",

e2e/__projects__/basic/test.js

@@ -15,6 +15,7 @@ import FunctionalSFCParent from './components/FunctionalSFCParent.vue'
 import NoScript from './components/NoScript.vue'
 import PugRelative from './components/PugRelativeExtends.vue'
 import { randomExport } from './components/NamedExport.vue'
+import ScriptSetup from './components/ScriptSetup.vue'
 
 // TODO: JSX for Vue 3? TSX?
 import Jsx from './components/Jsx.vue'
@@ -32,6 +33,11 @@ function mount(Component, props, slots) {
   createApp(Parent).mount(el)
 }
 
+test('supports <script setup>', () => {
+  mount(ScriptSetup)
+  expect(document.body.outerHTML).toContain('Count: 5')
+})
+
 test('processes .vue files', () => {
   mount(Basic)
   expect(document.querySelector('h1').textContent).toBe(

e2e/__projects__/basic/yarn.lock

@@ -1,9 +1,5 @@
-// const namespace = require('./constants').vueOptionsNamespace
-
-// const splitRE = /\r?\n/g
-
 module.exports = function generateCode(
-  scriptResult,
+  { scriptResult, scriptSetupResult },
   templateResult,
   stylesResult,
   customBlocksResult,
@@ -15,6 +11,10 @@ module.exports = function generateCode(
     output += `${scriptResult.code};\n`
   }
 
+  if (scriptSetupResult) {
+    output += `${scriptSetupResult.code};\n`
+  }
+
   if (templateResult) {
     output += `${templateResult.code};\n`
   }
@@ -27,79 +27,5 @@ module.exports = function generateCode(
 
   return {
     code: output
-    // renderFnStartLine,
-    // renderFnEndLine
   }
-  // let output = ''
-  // let renderFnStartLine
-  // let renderFnEndLine
-
-  // if (scriptResult) {
-  //   output += `${scriptResult.code};\n`
-  // } else {
-  //   output +=
-  //     `Object.defineProperty(exports, "__esModule", {\n` +
-  //     `  value: true\n` +
-  //     `});\n` +
-  //     'module.exports.default = {};\n'
-  // }
-
-  // output +=
-  //   `var ${namespace} = typeof exports.default === 'function' ` +
-  //   `? exports.default.options ` +
-  //   `: exports.default\n`
-
-  // if (templateResult) {
-  //   renderFnStartLine = output.split(splitRE).length
-  //   templateResult.code = templateResult.code.replace(
-  //     'var _c = _vm._self._c || _h',
-  //     '/* istanbul ignore next */\nvar _c = _vm._self._c || _h'
-  //   )
-  //   output += `${templateResult.code}\n`
-
-  //   renderFnEndLine = output.split(splitRE).length
-
-  //   output +=
-  //     `__options__.render = render\n` +
-  //     `${namespace}.staticRenderFns = staticRenderFns\n`
-
-  //   if (isFunctional) {
-  //     output += `${namespace}.functional = true\n`
-  //     output += `${namespace}._compiled = true\n`
-  //   }
-  // }
-
-  // if (stylesResult) {
-  //   const styleStr = stylesResult
-  //     .map(
-  //       ({ code, moduleName }) =>
-  //         `if(!this['${moduleName}']) {\n` +
-  //         `  this['${moduleName}'] = {};\n` +
-  //         `}\n` +
-  //         `this['${moduleName}'] = Object.assign(\n` +
-  //         `this['${moduleName}'], ${code});\n`
-  //     )
-  //     .join('')
-  //   if (isFunctional) {
-  //     output +=
-  //       `;(function() {\n` +
-  //       `  var originalRender = ${namespace}.render\n` +
-  //       `  var styleFn = function () { ${styleStr} }\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 = ${namespace}.beforeCreate\n` +
-  //       `  var styleFn = function () { ${styleStr} }\n` +
-  //       `  ${namespace}.beforeCreate = beforeCreate ? [].concat(beforeCreate, styleFn) : [styleFn]\n` +
-  //       `})()\n`
-  //   }
-  // }
-
-  // if (customBlocksResult) {
-  //   output += `;\n ${customBlocksResult}`
 }

lib/generate-code.js

@@ -1,4 +1,4 @@
-const { parse, compileTemplate } = require('@vue/compiler-sfc')
+const { parse, compileTemplate, compileScript } = require('@vue/compiler-sfc')
 const { transform } = require('@babel/core')
 const convertSourceMap = require('convert-source-map')
 const babelTransformer = require('babel-jest')
@@ -49,7 +49,25 @@ function processScript(scriptPart, filePath, config) {
   return result
 }
 
-function processTemplate(template, filename, config) {
+function processScriptSetup(descriptor, filePath, config) {
+  if (!descriptor.scriptSetup) {
+    return null
+  }
+  const content = compileScript(descriptor)
+  const vueJestConfig = getVueJestConfig(config)
+  const transformer = resolveTransformer(
+    descriptor.scriptSetup.lang,
+    vueJestConfig
+  )
+
+  const result = transformer.process(content.content, filePath, config)
+  result.code = stripInlineSourceMap(result.code)
+  return result
+}
+
+function processTemplate(descriptor, filename, config) {
+  const { template, scriptSetup } = descriptor
+
   if (!template) {
     return null
   }
@@ -60,11 +78,21 @@ function processTemplate(template, filename, config) {
     template.content = loadSrc(template.src, filename)
   }
 
+  let bindings
+  if (scriptSetup) {
+    const scriptSetupResult = compileScript(descriptor)
+    bindings = scriptSetupResult.bindings
+  }
+
   const result = compileTemplate({
     source: template.content,
     filename,
     preprocessLang: template.lang,
-    preprocessOptions: vueJestConfig[template.lang]
+    preprocessOptions: vueJestConfig[template.lang],
+    compilerOptions: {
+      bindingMetadata: bindings,
+      mode: 'module'
+    }
   })
 
   logResultErrors(result)
@@ -104,8 +132,9 @@ function processStyle(styles, filename, config) {
 module.exports = function(src, filename, config) {
   const { descriptor } = parse(src)
 
-  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,
@@ -122,7 +151,7 @@ module.exports = function(src, filename, config) {
   const templateLine = src.slice(0, templateStart).split(splitRE).length
 
   const output = generateCode(
-    scriptResult,
+    { scriptResult, scriptSetupResult },
     templateResult,
     stylesResult,
     customBlocksResult,

lib/process.js

@@ -1,6 +1,6 @@
 {
   "name": "vue-jest",
-  "version": "5.0.0-alpha.3",
+  "version": "5.0.0-alpha.4",
   "description": "Jest Vue transform",
   "main": "lib/index.js",
   "files": [
@@ -31,8 +31,7 @@
   "devDependencies": {
     "@babel/core": "^7.2.2",
     "@babel/preset-env": "^7.2.3",
-    "@vue/compiler-sfc": "3.0.0-alpha.10",
-    "@vue/test-utils": "^1.0.0-beta.25",
+    "@vue/compiler-sfc": "^3.0.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^24.9.0",
     "coffeescript": "^2.3.2",
@@ -58,7 +57,7 @@
     "semantic-release": "^15.13.2",
     "stylus": "^0.54.5",
     "typescript": "^3.2.2",
-    "vue": "3.0.0-alpha.10"
+    "vue": "^3.0.0"
   },
   "peerDependencies": {
     "@babel/core": "7.x",