Skip to content

Commit 3172cfe

Browse files
lmiller1990lmiller1990
authored
Merge pull request #290 from vuejs/feature/script-setu
feat: support <script setup>
2 parents bb5be76 + 1100fb2 commit 3172cfe

File tree

8 files changed

+537
-292
lines changed

8 files changed

+537
-292
lines changed

‎e2e/__projects__/basic/components/ScriptSetup.vue

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<button @click="increase">Count: {{ num }}</button>
3+
<span>{{ msg }}</span>
4+
</template>
5+
6+
<script setup="props, { emit }" lang="ts">
7+
import { ref } from 'vue'
8+
export const num = ref(5)
9+
const greet = () => console.log('greet')
10+
export const increase = () => {
11+
greet()
12+
num.value++
13+
}
14+
export const msg = 'hello world'
15+
</script>

‎e2e/__projects__/basic/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@
88
"test": "jest --no-cache --coverage test.js"
99
},
1010
"dependencies": {
11-
"vue": "3.0.0-alpha.10"
11+
"vue": "^3.0.0"
1212
},
1313
"devDependencies": {
1414
"@babel/core": "^7.2.2",
1515
"@babel/preset-env": "^7.2.3",
16-
"@vue/compiler-sfc": "3.0.0-alpha.10",
16+
"@vue/compiler-sfc": "^3.0.0",
1717
"babel-helper-vue-jsx-merge-props": "^2.0.3",
1818
"babel-plugin-syntax-jsx": "^6.18.0",
1919
"babel-plugin-transform-vue-jsx": "^3.7.0",

‎e2e/__projects__/basic/test.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import FunctionalSFCParent from './components/FunctionalSFCParent.vue'
1515
import NoScript from './components/NoScript.vue'
1616
import PugRelative from './components/PugRelativeExtends.vue'
1717
import { randomExport } from './components/NamedExport.vue'
18+
import ScriptSetup from './components/ScriptSetup.vue'
1819

1920
// TODO: JSX for Vue 3? TSX?
2021
import Jsx from './components/Jsx.vue'
@@ -32,6 +33,11 @@ function mount(Component, props, slots) {
3233
createApp(Parent).mount(el)
3334
}
3435

36+
test('supports <script setup>', () => {
37+
mount(ScriptSetup)
38+
expect(document.body.outerHTML).toContain('Count: 5')
39+
})
40+
3541
test('processes .vue files', () => {
3642
mount(Basic)
3743
expect(document.querySelector('h1').textContent).toBe(

‎e2e/__projects__/basic/yarn.lock

Lines changed: 237 additions & 73 deletions
Large diffs are not rendered by default.

‎lib/generate-code.js

Lines changed: 5 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
1-
// const namespace = require('./constants').vueOptionsNamespace
2-
3-
// const splitRE = /\r?\n/g
4-
51
module.exports = function generateCode(
6-
scriptResult,
2+
{ scriptResult, scriptSetupResult },
73
templateResult,
84
stylesResult,
95
customBlocksResult,
@@ -15,6 +11,10 @@ module.exports = function generateCode(
1511
output += `${scriptResult.code};\n`
1612
}
1713

14+
if (scriptSetupResult) {
15+
output += `${scriptSetupResult.code};\n`
16+
}
17+
1818
if (templateResult) {
1919
output += `${templateResult.code};\n`
2020
}
@@ -27,79 +27,5 @@ module.exports = function generateCode(
2727

2828
return {
2929
code: output
30-
// renderFnStartLine,
31-
// renderFnEndLine
3230
}
33-
// let output = ''
34-
// let renderFnStartLine
35-
// let renderFnEndLine
36-
37-
// if (scriptResult) {
38-
// output += `${scriptResult.code};\n`
39-
// } else {
40-
// output +=
41-
// `Object.defineProperty(exports, "__esModule", {\n` +
42-
// ` value: true\n` +
43-
// `});\n` +
44-
// 'module.exports.default = {};\n'
45-
// }
46-
47-
// output +=
48-
// `var ${namespace} = typeof exports.default === 'function' ` +
49-
// `? exports.default.options ` +
50-
// `: exports.default\n`
51-
52-
// if (templateResult) {
53-
// renderFnStartLine = output.split(splitRE).length
54-
// templateResult.code = templateResult.code.replace(
55-
// 'var _c = _vm._self._c || _h',
56-
// '/* istanbul ignore next */\nvar _c = _vm._self._c || _h'
57-
// )
58-
// output += `${templateResult.code}\n`
59-
60-
// renderFnEndLine = output.split(splitRE).length
61-
62-
// output +=
63-
// `__options__.render = render\n` +
64-
// `${namespace}.staticRenderFns = staticRenderFns\n`
65-
66-
// if (isFunctional) {
67-
// output += `${namespace}.functional = true\n`
68-
// output += `${namespace}._compiled = true\n`
69-
// }
70-
// }
71-
72-
// if (stylesResult) {
73-
// const styleStr = stylesResult
74-
// .map(
75-
// ({ code, moduleName }) =>
76-
// `if(!this['${moduleName}']) {\n` +
77-
// ` this['${moduleName}'] = {};\n` +
78-
// `}\n` +
79-
// `this['${moduleName}'] = Object.assign(\n` +
80-
// `this['${moduleName}'], ${code});\n`
81-
// )
82-
// .join('')
83-
// if (isFunctional) {
84-
// output +=
85-
// `;(function() {\n` +
86-
// ` var originalRender = ${namespace}.render\n` +
87-
// ` var styleFn = function () { ${styleStr} }\n` +
88-
// ` ${namespace}.render = function renderWithStyleInjection (h, context) {\n` +
89-
// ` styleFn.call(context)\n` +
90-
// ` return originalRender(h, context)\n` +
91-
// ` }\n` +
92-
// `})()\n`
93-
// } else {
94-
// output +=
95-
// `;(function() {\n` +
96-
// ` var beforeCreate = ${namespace}.beforeCreate\n` +
97-
// ` var styleFn = function () { ${styleStr} }\n` +
98-
// ` ${namespace}.beforeCreate = beforeCreate ? [].concat(beforeCreate, styleFn) : [styleFn]\n` +
99-
// `})()\n`
100-
// }
101-
// }
102-
103-
// if (customBlocksResult) {
104-
// output += `;\n ${customBlocksResult}`
10531
}

‎lib/process.js

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const { parse, compileTemplate } = require('@vue/compiler-sfc')
1+
const { parse, compileTemplate, compileScript } = require('@vue/compiler-sfc')
22
const { transform } = require('@babel/core')
33
const convertSourceMap = require('convert-source-map')
44
const babelTransformer = require('babel-jest')
@@ -49,7 +49,25 @@ function processScript(scriptPart, filePath, config) {
4949
return result
5050
}
5151

52-
function processTemplate(template, filename, config) {
52+
function processScriptSetup(descriptor, filePath, config) {
53+
if (!descriptor.scriptSetup) {
54+
return null
55+
}
56+
const content = compileScript(descriptor)
57+
const vueJestConfig = getVueJestConfig(config)
58+
const transformer = resolveTransformer(
59+
descriptor.scriptSetup.lang,
60+
vueJestConfig
61+
)
62+
63+
const result = transformer.process(content.content, filePath, config)
64+
result.code = stripInlineSourceMap(result.code)
65+
return result
66+
}
67+
68+
function processTemplate(descriptor, filename, config) {
69+
const { template, scriptSetup } = descriptor
70+
5371
if (!template) {
5472
return null
5573
}
@@ -60,11 +78,21 @@ function processTemplate(template, filename, config) {
6078
template.content = loadSrc(template.src, filename)
6179
}
6280

81+
let bindings
82+
if (scriptSetup) {
83+
const scriptSetupResult = compileScript(descriptor)
84+
bindings = scriptSetupResult.bindings
85+
}
86+
6387
const result = compileTemplate({
6488
source: template.content,
6589
filename,
6690
preprocessLang: template.lang,
67-
preprocessOptions: vueJestConfig[template.lang]
91+
preprocessOptions: vueJestConfig[template.lang],
92+
compilerOptions: {
93+
bindingMetadata: bindings,
94+
mode: 'module'
95+
}
6896
})
6997

7098
logResultErrors(result)
@@ -104,8 +132,9 @@ function processStyle(styles, filename, config) {
104132
module.exports = function(src, filename, config) {
105133
const { descriptor } = parse(src)
106134

107-
const templateResult = processTemplate(descriptor.template, filename, config)
135+
const templateResult = processTemplate(descriptor, filename, config)
108136
const scriptResult = processScript(descriptor.script, filename, config)
137+
const scriptSetupResult = processScriptSetup(descriptor, filename, config)
109138
const stylesResult = processStyle(descriptor.styles, filename, config)
110139
const customBlocksResult = processCustomBlocks(
111140
descriptor.customBlocks,
@@ -122,7 +151,7 @@ module.exports = function(src, filename, config) {
122151
const templateLine = src.slice(0, templateStart).split(splitRE).length
123152

124153
const output = generateCode(
125-
scriptResult,
154+
{ scriptResult, scriptSetupResult },
126155
templateResult,
127156
stylesResult,
128157
customBlocksResult,

‎package.json

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-jest",
3-
"version": "5.0.0-alpha.3",
3+
"version": "5.0.0-alpha.4",
44
"description": "Jest Vue transform",
55
"main": "lib/index.js",
66
"files": [
@@ -31,8 +31,7 @@
3131
"devDependencies": {
3232
"@babel/core": "^7.2.2",
3333
"@babel/preset-env": "^7.2.3",
34-
"@vue/compiler-sfc": "3.0.0-alpha.10",
35-
"@vue/test-utils": "^1.0.0-beta.25",
34+
"@vue/compiler-sfc": "^3.0.0",
3635
"babel-core": "^7.0.0-bridge.0",
3736
"babel-jest": "^24.9.0",
3837
"coffeescript": "^2.3.2",
@@ -58,7 +57,7 @@
5857
"semantic-release": "^15.13.2",
5958
"stylus": "^0.54.5",
6059
"typescript": "^3.2.2",
61-
"vue": "3.0.0-alpha.10"
60+
"vue": "^3.0.0"
6261
},
6362
"peerDependencies": {
6463
"@babel/core": "7.x",

0 commit comments

Comments
 (0)