Skip to content
This repository was archived by the owner on Jan 18, 2022. It is now read-only.

Commit a5928ad

Browse files
znckznck
authored
feat: Provide sourcemap for blocks in .vue file (#215)
* feat: Provide sourcemaps for .vue files * chore: Bump @vue/component-compiler * test: Add inline source URL for generated bundle * chore: Code style fix
1 parent 77a3be7 commit a5928ad

File tree

4 files changed

+64
-27
lines changed

4 files changed

+64
-27
lines changed

‎cookbook/typescript-simple/src/MyComponent.vue

+12-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,18 @@
66
// @ts-ignore
77
import Vue, { VueConstructor } from 'vue'
88
9-
export default Vue.extend<{ name: string }, {/* methods */}, {/* computed */}, {/* props */}>({
9+
export default Vue.extend<
10+
{ name: string },
11+
{
12+
/* methods */
13+
},
14+
{
15+
/* computed */
16+
},
17+
{
18+
/* props */
19+
}
20+
>({
1021
data() {
1122
return { name: 'Jane Doe' }
1223
}

‎src/index.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -175,10 +175,12 @@ export default function VuePlugin(opts: VuePluginOptions = {}): Plugin {
175175
if (!request) return
176176

177177
const element = resolveVuePart(descriptors, request)
178-
179-
return 'code' in element
178+
const code = 'code' in element
180179
? ((element as any).code as string) // .code is set when extract styles is used. { css: false }
181180
: element.content
181+
const map = element.map as any
182+
183+
return { code, map }
182184
},
183185

184186
async transform(source: string, filename: string) {

‎test/setup/index.ts

+26-11
Original file line numberDiff line numberDiff line change
@@ -37,26 +37,41 @@ export async function build(filename, css = false): Promise<string> {
3737
external: ['vue']
3838
})
3939

40-
cache[cacheKey] = (await bundle.generate({
40+
const output = await bundle.generate({
4141
format: 'iife',
4242
name: 'App',
43+
sourcemap: true,
4344
globals: {
4445
vue: 'Vue'
4546
}
46-
})).code + (style ? `\n;(function() {
47-
var s = document.createElement('style');
48-
s.type = 'text/css';
49-
document.head.appendChild(s);
50-
s.appendChild(document.createTextNode(${JSON.stringify(style)}))
51-
})()` : '')
52-
53-
return cache[cacheKey]
47+
})
48+
49+
let outputCode = output.code
50+
51+
if (style) {
52+
outputCode += `\n;(function() {
53+
var s = document.createElement('style');
54+
s.type = 'text/css';
55+
document.head.appendChild(s);
56+
s.appendChild(document.createTextNode(${JSON.stringify(style)}))
57+
})()`
58+
}
59+
60+
outputCode += `\n\n//# sourceMappingURL=data:application/json;base64,${new Buffer(JSON.stringify(output.map)).toString('base64')}\n`
61+
62+
cache[cacheKey] = outputCode
63+
64+
return outputCode
5465
}
5566

5667
const VUE_SOURCE = promised(fs).readFile(
5768
path.resolve(__dirname, '../../node_modules/vue/dist/vue.min.js')
5869
)
5970

71+
function encode(any: any) {
72+
return any.toString().replace(/<\//g, '&lt;\/')
73+
}
74+
6075
export async function open(name: string, browser: Browser, code: string, id: string = '#test'): Promise<Page> {
6176
const page = await browser.newPage()
6277

@@ -69,10 +84,10 @@ export async function open(name: string, browser: Browser, code: string, id: str
6984
<body>
7085
<div id="app"></div>
7186
<script>
72-
${await VUE_SOURCE}
87+
${encode(await VUE_SOURCE)}
7388
</script>
7489
<script>
75-
${await code}
90+
${encode(await code)}
7691
</script>
7792
</body>
7893
</html>`

‎yarn.lock

+22-13
Original file line numberDiff line numberDiff line change
@@ -589,13 +589,14 @@
589589
vue-template-es2015-compiler "^1.6.0"
590590

591591
"@vue/component-compiler@^3.3.2":
592-
version "3.3.3"
593-
resolved "https://registry.yarnpkg.com/@vue/component-compiler/-/component-compiler-3.3.3.tgz#f23b5353515025e81d36448b71422b2510939502"
592+
version "3.4.0"
593+
resolved "https://registry.yarnpkg.com/@vue/component-compiler/-/component-compiler-3.4.0.tgz#3413b02a4ea76354a38db3e0bffd4ecec82b0563"
594594
dependencies:
595595
"@vue/component-compiler-utils" "^1.2.1"
596596
clean-css "^4.1.11"
597597
hash-sum "^1.0.2"
598598
postcss-modules-sync "^1.0.0"
599+
source-map "0.6.*"
599600

600601
"@znck/promised@^1.0.0":
601602
version "1.0.0"
@@ -1374,14 +1375,14 @@ collection-visit@^1.0.0:
13741375
object-visit "^1.0.0"
13751376

13761377
color-convert@^1.9.0:
1377-
version "1.9.1"
1378-
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
1378+
version "1.9.2"
1379+
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.2.tgz#49881b8fba67df12a96bdf3f56c0aab9e7913147"
13791380
dependencies:
1380-
color-name "^1.1.1"
1381+
color-name "1.1.1"
13811382

1382-
color-name@^1.1.1:
1383-
version "1.1.3"
1384-
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
1383+
[email protected]:
1384+
version "1.1.1"
1385+
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.1.tgz#4b1415304cf50028ea81643643bd82ea05803689"
13851386

13861387
[email protected], combined-stream@^1.0.5, combined-stream@~1.0.5:
13871388
version "1.0.6"
@@ -4056,7 +4057,15 @@ postcss@^5.2.5:
40564057
source-map "^0.5.6"
40574058
supports-color "^3.2.3"
40584059

4059-
postcss@^6.0.1, postcss@^6.0.10, postcss@^6.0.20, postcss@^6.0.22, postcss@^6.0.9:
4060+
postcss@^6.0.1:
4061+
version "6.0.23"
4062+
resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
4063+
dependencies:
4064+
chalk "^2.4.1"
4065+
source-map "^0.6.1"
4066+
supports-color "^5.4.0"
4067+
4068+
postcss@^6.0.10, postcss@^6.0.20, postcss@^6.0.22, postcss@^6.0.9:
40604069
version "6.0.22"
40614070
resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.22.tgz#e23b78314905c3b90cbd61702121e7a78848f2a3"
40624071
dependencies:
@@ -4818,16 +4827,16 @@ [email protected], source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, sourc
48184827
version "0.5.7"
48194828
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
48204829

4830+
[email protected].*, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
4831+
version "0.6.1"
4832+
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
4833+
48214834
source-map@^0.4.2, source-map@^0.4.4:
48224835
version "0.4.4"
48234836
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
48244837
dependencies:
48254838
amdefine ">=0.0.4"
48264839

4827-
source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
4828-
version "0.6.1"
4829-
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
4830-
48314840
spdx-correct@^3.0.0:
48324841
version "3.0.0"
48334842
resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.0.0.tgz#05a5b4d7153a195bc92c3c425b69f3b2a9524c82"

0 commit comments

Comments
 (0)