Skip to content

Fix source maps for vue2-jest #486

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 15, 2022
Merged

Fix source maps for vue2-jest #486

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4ed1e83
Fix source maps for vue2-jest
NikhilVerma Jul 22, 2022
db1a8ba
Remove duplicate append
NikhilVerma Jul 22, 2022
41b2156
Fix snapshot paths to match github CI
NikhilVerma Aug 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,4 @@ pids
package-lock.json
/e2e/**/yarn.lock

.vscode
79 changes: 52 additions & 27 deletions e2e/2.x/basic/__snapshots__/test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,48 @@

exports[`generates source maps for .vue files 1`] = `
Object {
"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",
"names": Array [],
"file": "/home/runner/work/vue-jest/vue-jest/e2e/2.x/basic/components/Basic.vue",
"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",
"names": Array [
"name",
"computed",
"headingClasses",
"red",
"isCrazy",
"blue",
"shadow",
"data",
"msg",
"methods",
"toggleClass",
],
"sources": Array [
"Basic.vue",
],
"sourcesContent": Array [
"<template>
<div class=\\"hello\\">
<h1 :class=\\"headingClasses\\">{{ msg }}</h1>
</div>
</template>

<style module=\\"css\\">
.testA {
background-color: red;
}
</style>
<style module>
.testB {
background-color: blue;
}
</style>
<style>
.testC {
background-color: blue;
}
</style>
"//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//

<script>
export default {
name: 'basic',
computed: {
Expand All @@ -54,7 +67,6 @@ export default {
}
}
}
</script>
",
],
"version": 3,
Expand All @@ -63,8 +75,21 @@ export default {

exports[`generates source maps using src attributes 1`] = `
Object {
"mappings": ";;;;;;;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAHA;AAKA;AAPA;AASA;AACA;AACA;AACA;AAFA;AAIA;AACA;AACA;AACA;AACA;AAHA;AAjBA",
"names": Array [],
"file": "/home/runner/work/vue-jest/vue-jest/e2e/2.x/basic/components/SourceMapsSrc.vue",
"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",
"names": Array [
"name",
"computed",
"headingClasses",
"red",
"isCrazy",
"blue",
"shadow",
"data",
"msg",
"methods",
"toggleClass",
],
"sources": Array [
"SourceMapsSrc.vue",
],
Expand Down
4 changes: 2 additions & 2 deletions e2e/2.x/basic/test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ test('generates source maps for .vue files', () => {
config
})

expect(map).toMatchSnapshot()
expect(JSON.parse(map)).toMatchSnapshot()
})

test('generates source maps using src attributes', () => {
Expand All @@ -67,7 +67,7 @@ test('generates source maps using src attributes', () => {
config
})

expect(map).toMatchSnapshot()
expect(JSON.parse(map)).toMatchSnapshot()
})

test('processes .vue file using jsx', () => {
Expand Down
4 changes: 4 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,10 @@
"pre-commit": "lint-staged"
}
},
"prettier": {
"semi": false,
"singleQuote": true
},
"lint-staged": {
"*.{js,json,css,md,vue}": [
"yarn format",
Expand Down
96 changes: 55 additions & 41 deletions packages/vue2-jest/lib/generate-code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,64 @@
const namespace = require('./constants').vueOptionsNamespace
const { SourceNode, SourceMapConsumer } = require('source-map')

const splitRE = /\r?\n/g
function addToSourceMap(node, result) {
if (result && result.code) {
if (result.map) {
node.add(
SourceNode.fromStringWithSourceMap(
result.code,
new SourceMapConsumer(result.map)
)
)
} else {
node.add(result.code)
}
}
}

module.exports = function generateCode(
scriptResult,
templateResult,
stylesResult,
customBlocksResult,
isFunctional
isFunctional,
filename
) {
let output = ''
let renderFnStartLine
let renderFnEndLine
var node = new SourceNode(null, null)

if (scriptResult) {
output += `${scriptResult.code};\n`
addToSourceMap(node, scriptResult)
} else {
output +=
node.add(
`Object.defineProperty(exports, "__esModule", {\n` +
` value: true\n` +
`});\n` +
'module.exports.default = {};\n'
` value: true\n` +
`});\n` +
'module.exports.default = {};\n'
)
}

output +=
node.add(
`var ${namespace} = typeof exports.default === 'function' ` +
`? exports.default.options ` +
`: exports.default\n`
`? exports.default.options ` +
`: exports.default\n`
)

if (templateResult) {
renderFnStartLine = output.split(splitRE).length
templateResult.code = templateResult.code.replace(
addToSourceMap(node, templateResult)

node.replaceRight(
'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 +=
node.add(
`__options__.render = render\n` +
`${namespace}.staticRenderFns = staticRenderFns\n`
`${namespace}.staticRenderFns = staticRenderFns\n`
)

if (isFunctional) {
output += `${namespace}.functional = true\n`
output += `${namespace}._compiled = true\n`
node.add(`${namespace}.functional = true\n`)
node.add(`${namespace}._compiled = true\n`)
}
}

Expand All @@ -59,32 +73,32 @@ module.exports = function generateCode(
`this['${moduleName}'], ${code});\n`
)
.join('')

if (isFunctional) {
output +=
node.add(
`;(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`
` 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 +=
node.add(
`;(function() {\n` +
` var beforeCreate = ${namespace}.beforeCreate\n` +
` var styleFn = function () { ${styleStr} }\n` +
` ${namespace}.beforeCreate = beforeCreate ? [].concat(beforeCreate, styleFn) : [styleFn]\n` +
`})()\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}`
}
return {
code: output,
renderFnStartLine,
renderFnEndLine
node.add(`;\n ${customBlocksResult}`)
}

return node.toStringWithSourceMap({ file: filename })
}
69 changes: 0 additions & 69 deletions packages/vue2-jest/lib/generate-source-map.js
View file
Open in desktop

This file was deleted.

20 changes: 3 additions & 17 deletions packages/vue2-jest/lib/process.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
const splitRE = /\r?\n/g

const VueTemplateCompiler = require('vue-template-compiler')
const generateSourceMap = require('./generate-source-map')
const coffeescriptTransformer = require('./transformers/coffee')
const _processStyle = require('./process-style')
const processCustomBlocks = require('./process-custom-blocks')
Expand Down Expand Up @@ -115,28 +112,17 @@ module.exports = function(src, filename, config) {
descriptor.script.content &&
/functional:\s*true/.test(descriptor.script.content))

const templateStart = descriptor.template && descriptor.template.start
const templateLine = src.slice(0, templateStart).split(splitRE).length

const output = generateCode(
scriptResult,
templateResult,
stylesResult,
customBlocksResult,
isFunctional
isFunctional,
filename
)

const map = generateSourceMap(
scriptResult,
src,
filename,
output.renderFnStartLine,
output.renderFnEndLine,
templateLine
).toJSON()

return {
code: output.code,
map
map: output.map.toString()
}
}