Skip to content

Commit 4530039

Browse files
NikhilVermaNikhilVerma
authored
Fix source maps for vue2-jest (#486)
* Fix source maps for vue2-jest * Remove duplicate append * Fix snapshot paths to match github CI
1 parent f6f9838 commit 4530039

File tree

7 files changed

+117
-156
lines changed

7 files changed

+117
-156
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,4 @@ pids
2727
package-lock.json
2828
/e2e/**/yarn.lock
2929

30+
.vscode

‎e2e/2.x/basic/__snapshots__/test.js.snap

+52-27
Original file line numberDiff line numberDiff line change
@@ -2,35 +2,48 @@
22

33
exports[`generates source maps for .vue files 1`] = `
44
Object {
5-
"mappings": ";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAHA;AAKA;AAPA;AASA;AACA;AACA;AACA;AAFA;AAIA;AACA;AACA;AACA;AACA;AAHA;AAjBA;;;;AAvBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA",
6-
"names": Array [],
5+
"file": "/home/runner/work/vue-jest/vue-jest/e2e/2.x/basic/components/Basic.vue",
6+
"mappings": ";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;eAEe;AACbA,MAAI,EAAE,OADO;AAEbC,UAAQ,EAAE;AACRC,kBAAc,EAAE,SAASA,cAAT,GAA0B;AACxC,aAAO;AACLC,WAAG,EAAE,KAAKC,OADL;AAELC,YAAI,EAAE,CAAC,KAAKD,OAFP;AAGLE,cAAM,EAAE,KAAKF;AAHR,OAAP;AAKD;AAPO,GAFG;AAWbG,MAAI,EAAE,SAASA,IAAT,GAAgB;AACpB,WAAO;AACLC,SAAG,EAAE,4BADA;AAELJ,aAAO,EAAE;AAFJ,KAAP;AAID,GAhBY;AAiBbK,SAAO,EAAE;AACPC,eAAW,EAAE,SAASA,WAAT,GAAuB;AAClC,WAAKN,OAAL,GAAe,CAAC,KAAKA,OAArB;AACD;AAHM;AAjBI,C",
7+
"names": Array [
8+
"name",
9+
"computed",
10+
"headingClasses",
11+
"red",
12+
"isCrazy",
13+
"blue",
14+
"shadow",
15+
"data",
16+
"msg",
17+
"methods",
18+
"toggleClass",
19+
],
720
"sources": Array [
821
"Basic.vue",
922
],
1023
"sourcesContent": Array [
11-
"<template>
12-
<div class=\\"hello\\">
13-
<h1 :class=\\"headingClasses\\">{{ msg }}</h1>
14-
</div>
15-
</template>
16-
17-
<style module=\\"css\\">
18-
.testA {
19-
background-color: red;
20-
}
21-
</style>
22-
<style module>
23-
.testB {
24-
background-color: blue;
25-
}
26-
</style>
27-
<style>
28-
.testC {
29-
background-color: blue;
30-
}
31-
</style>
24+
"//
25+
//
26+
//
27+
//
28+
//
29+
//
30+
//
31+
//
32+
//
33+
//
34+
//
35+
//
36+
//
37+
//
38+
//
39+
//
40+
//
41+
//
42+
//
43+
//
44+
//
45+
//
3246
33-
<script>
3447
export default {
3548
name: 'basic',
3649
computed: {
@@ -54,7 +67,6 @@ export default {
5467
}
5568
}
5669
}
57-
</script>
5870
",
5971
],
6072
"version": 3,
@@ -63,8 +75,21 @@ export default {
6375

6476
exports[`generates source maps using src attributes 1`] = `
6577
Object {
66-
"mappings": ";;;;;;;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAHA;AAKA;AAPA;AASA;AACA;AACA;AACA;AAFA;AAIA;AACA;AACA;AACA;AACA;AAHA;AAjBA",
67-
"names": Array [],
78+
"file": "/home/runner/work/vue-jest/vue-jest/e2e/2.x/basic/components/SourceMapsSrc.vue",
79+
"mappings": ";;;;;;eAAe;AACbA,MAAI,EAAE,OADO;AAEbC,UAAQ,EAAE;AACRC,kBAAc,EAAE,SAASA,cAAT,GAA0B;AACxC,aAAO;AACLC,WAAG,EAAE,KAAKC,OADL;AAELC,YAAI,EAAE,CAAC,KAAKD,OAFP;AAGLE,cAAM,EAAE,KAAKF;AAHR,OAAP;AAKD;AAPO,GAFG;AAWbG,MAAI,EAAE,SAASA,IAAT,GAAgB;AACpB,WAAO;AACLC,SAAG,EAAE,4BADA;AAELJ,aAAO,EAAE;AAFJ,KAAP;AAID,GAhBY;AAiBbK,SAAO,EAAE;AACPC,eAAW,EAAE,SAASA,WAAT,GAAuB;AAClC,WAAKN,OAAL,GAAe,CAAC,KAAKA,OAArB;AACD;AAHM;AAjBI,C",
80+
"names": Array [
81+
"name",
82+
"computed",
83+
"headingClasses",
84+
"red",
85+
"isCrazy",
86+
"blue",
87+
"shadow",
88+
"data",
89+
"msg",
90+
"methods",
91+
"toggleClass",
92+
],
6893
"sources": Array [
6994
"SourceMapsSrc.vue",
7095
],

‎e2e/2.x/basic/test.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ test('generates source maps for .vue files', () => {
5252
config
5353
})
5454

55-
expect(map).toMatchSnapshot()
55+
expect(JSON.parse(map)).toMatchSnapshot()
5656
})
5757

5858
test('generates source maps using src attributes', () => {
@@ -67,7 +67,7 @@ test('generates source maps using src attributes', () => {
6767
config
6868
})
6969

70-
expect(map).toMatchSnapshot()
70+
expect(JSON.parse(map)).toMatchSnapshot()
7171
})
7272

7373
test('processes .vue file using jsx', () => {

‎package.json

+4
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,10 @@
4545
"pre-commit": "lint-staged"
4646
}
4747
},
48+
"prettier": {
49+
"semi": false,
50+
"singleQuote": true
51+
},
4852
"lint-staged": {
4953
"*.{js,json,css,md,vue}": [
5054
"yarn format",

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

+55-41
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,64 @@
11
const namespace = require('./constants').vueOptionsNamespace
2+
const { SourceNode, SourceMapConsumer } = require('source-map')
23

3-
const splitRE = /\r?\n/g
4+
function addToSourceMap(node, result) {
5+
if (result && result.code) {
6+
if (result.map) {
7+
node.add(
8+
SourceNode.fromStringWithSourceMap(
9+
result.code,
10+
new SourceMapConsumer(result.map)
11+
)
12+
)
13+
} else {
14+
node.add(result.code)
15+
}
16+
}
17+
}
418

519
module.exports = function generateCode(
620
scriptResult,
721
templateResult,
822
stylesResult,
923
customBlocksResult,
10-
isFunctional
24+
isFunctional,
25+
filename
1126
) {
12-
let output = ''
13-
let renderFnStartLine
14-
let renderFnEndLine
27+
var node = new SourceNode(null, null)
1528

1629
if (scriptResult) {
17-
output += `${scriptResult.code};\n`
30+
addToSourceMap(node, scriptResult)
1831
} else {
19-
output +=
32+
node.add(
2033
`Object.defineProperty(exports, "__esModule", {\n` +
21-
` value: true\n` +
22-
`});\n` +
23-
'module.exports.default = {};\n'
34+
` value: true\n` +
35+
`});\n` +
36+
'module.exports.default = {};\n'
37+
)
2438
}
2539

26-
output +=
40+
node.add(
2741
`var ${namespace} = typeof exports.default === 'function' ` +
28-
`? exports.default.options ` +
29-
`: exports.default\n`
42+
`? exports.default.options ` +
43+
`: exports.default\n`
44+
)
3045

3146
if (templateResult) {
32-
renderFnStartLine = output.split(splitRE).length
33-
templateResult.code = templateResult.code.replace(
47+
addToSourceMap(node, templateResult)
48+
49+
node.replaceRight(
3450
'var _c = _vm._self._c || _h',
3551
'/* istanbul ignore next */\nvar _c = _vm._self._c || _h'
3652
)
37-
output += `${templateResult.code}\n`
3853

39-
renderFnEndLine = output.split(splitRE).length
40-
41-
output +=
54+
node.add(
4255
`__options__.render = render\n` +
43-
`${namespace}.staticRenderFns = staticRenderFns\n`
56+
`${namespace}.staticRenderFns = staticRenderFns\n`
57+
)
4458

4559
if (isFunctional) {
46-
output += `${namespace}.functional = true\n`
47-
output += `${namespace}._compiled = true\n`
60+
node.add(`${namespace}.functional = true\n`)
61+
node.add(`${namespace}._compiled = true\n`)
4862
}
4963
}
5064

@@ -59,32 +73,32 @@ module.exports = function generateCode(
5973
`this['${moduleName}'], ${code});\n`
6074
)
6175
.join('')
76+
6277
if (isFunctional) {
63-
output +=
78+
node.add(
6479
`;(function() {\n` +
65-
` var originalRender = ${namespace}.render\n` +
66-
` var styleFn = function () { ${styleStr} }\n` +
67-
` ${namespace}.render = function renderWithStyleInjection (h, context) {\n` +
68-
` styleFn.call(context)\n` +
69-
` return originalRender(h, context)\n` +
70-
` }\n` +
71-
`})()\n`
80+
` var originalRender = ${namespace}.render\n` +
81+
` var styleFn = function () { ${styleStr} }\n` +
82+
` ${namespace}.render = function renderWithStyleInjection (h, context) {\n` +
83+
` styleFn.call(context)\n` +
84+
` return originalRender(h, context)\n` +
85+
` }\n` +
86+
`})()\n`
87+
)
7288
} else {
73-
output +=
89+
node.add(
7490
`;(function() {\n` +
75-
` var beforeCreate = ${namespace}.beforeCreate\n` +
76-
` var styleFn = function () { ${styleStr} }\n` +
77-
` ${namespace}.beforeCreate = beforeCreate ? [].concat(beforeCreate, styleFn) : [styleFn]\n` +
78-
`})()\n`
91+
` var beforeCreate = ${namespace}.beforeCreate\n` +
92+
` var styleFn = function () { ${styleStr} }\n` +
93+
` ${namespace}.beforeCreate = beforeCreate ? [].concat(beforeCreate, styleFn) : [styleFn]\n` +
94+
`})()\n`
95+
)
7996
}
8097
}
8198

8299
if (customBlocksResult) {
83-
output += `;\n ${customBlocksResult}`
84-
}
85-
return {
86-
code: output,
87-
renderFnStartLine,
88-
renderFnEndLine
100+
node.add(`;\n ${customBlocksResult}`)
89101
}
102+
103+
return node.toStringWithSourceMap({ file: filename })
90104
}

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

-69
This file was deleted.

‎packages/vue2-jest/lib/process.js

+3-17
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
const splitRE = /\r?\n/g
2-
31
const VueTemplateCompiler = require('vue-template-compiler')
4-
const generateSourceMap = require('./generate-source-map')
52
const coffeescriptTransformer = require('./transformers/coffee')
63
const _processStyle = require('./process-style')
74
const processCustomBlocks = require('./process-custom-blocks')
@@ -115,28 +112,17 @@ module.exports = function(src, filename, config) {
115112
descriptor.script.content &&
116113
/functional:\s*true/.test(descriptor.script.content))
117114

118-
const templateStart = descriptor.template && descriptor.template.start
119-
const templateLine = src.slice(0, templateStart).split(splitRE).length
120-
121115
const output = generateCode(
122116
scriptResult,
123117
templateResult,
124118
stylesResult,
125119
customBlocksResult,
126-
isFunctional
120+
isFunctional,
121+
filename
127122
)
128123

129-
const map = generateSourceMap(
130-
scriptResult,
131-
src,
132-
filename,
133-
output.renderFnStartLine,
134-
output.renderFnEndLine,
135-
templateLine
136-
).toJSON()
137-
138124
return {
139125
code: output.code,
140-
map
126+
map: output.map.toString()
141127
}
142128
}

0 commit comments

Comments
 (0)