Skip to content

Commit 4af0c9e

Browse files
ZhenXiongQianZhenXiongQian
authored
fix: comment out of template,script and style (#110)
1 parent 6befac1 commit 4af0c9e

File tree

3 files changed

+137
-51
lines changed

3 files changed

+137
-51
lines changed

‎src/sfcUtils.ts

+65-51
Original file line numberDiff line numberDiff line change
@@ -80,18 +80,25 @@ export function stringify(sfcDescriptor: SFCDescriptor) {
8080
newlinesBefore = block.startOfOpenTag - prevBlock.endOfCloseTag
8181
}
8282

83-
return (
84-
sfcCode +
85-
'\n'.repeat(newlinesBefore) +
86-
block.openTag +
87-
block.content +
88-
block.closeTag
89-
)
83+
if (block.openTag === '') {
84+
return sfcCode + '\n'.repeat(newlinesBefore) + block.loc.source
85+
} else {
86+
return (
87+
sfcCode +
88+
'\n'.repeat(newlinesBefore) +
89+
block.openTag +
90+
block.content +
91+
block.closeTag
92+
)
93+
}
9094
}, '')
9195
)
9296
}
9397

9498
function makeOpenTag(block: SFCBlock) {
99+
if (!block.attrs) {
100+
return ''
101+
}
95102
let source = '<' + block.type
96103

97104
source += Object.keys(block.attrs)
@@ -112,6 +119,9 @@ function makeOpenTag(block: SFCBlock) {
112119
}
113120

114121
function makeCloseTag(block: SFCBlock) {
122+
if (!block.attrs) {
123+
return ''
124+
}
115125
return `</${block.type}>\n`
116126
}
117127

@@ -121,6 +131,7 @@ function makeCloseTag(block: SFCBlock) {
121131

122132
export interface TemplateCompiler {
123133
compile(template: string, options: CompilerOptions): CodegenResult
134+
124135
parse(template: string, options: ParserOptions): RootNode
125136
}
126137

@@ -241,53 +252,56 @@ export function parse(
241252
})
242253

243254
ast.children.forEach(node => {
244-
if (node.type !== NodeTypes.ELEMENT) {
245-
return
246-
}
247-
if (!node.children.length && !hasSrc(node) && node.tag !== 'template') {
248-
return
249-
}
250-
switch (node.tag) {
251-
case 'template':
252-
if (!descriptor.template) {
253-
const templateBlock = (descriptor.template = createBlock(
254-
node,
255-
source,
256-
false
257-
) as SFCTemplateBlock)
258-
templateBlock.ast = node
259-
} else {
260-
errors.push(createDuplicateBlockError(node))
261-
}
262-
break
263-
case 'script':
264-
const scriptBlock = createBlock(node, source, pad) as SFCScriptBlock
265-
const isSetup = !!scriptBlock.attrs.setup
266-
if (isSetup && !descriptor.scriptSetup) {
267-
descriptor.scriptSetup = scriptBlock
255+
if (node.type == NodeTypes.ELEMENT) {
256+
if (!node.children.length && !hasSrc(node) && node.tag !== 'template') {
257+
return
258+
}
259+
switch (node.tag) {
260+
case 'template':
261+
if (!descriptor.template) {
262+
const templateBlock = (descriptor.template = createBlock(
263+
node,
264+
source,
265+
false
266+
) as SFCTemplateBlock)
267+
templateBlock.ast = node
268+
} else {
269+
errors.push(createDuplicateBlockError(node))
270+
}
268271
break
269-
}
270-
if (!isSetup && !descriptor.script) {
271-
descriptor.script = scriptBlock
272+
case 'script':
273+
const scriptBlock = createBlock(node, source, pad) as SFCScriptBlock
274+
const isSetup = !!scriptBlock.attrs.setup
275+
if (isSetup && !descriptor.scriptSetup) {
276+
descriptor.scriptSetup = scriptBlock
277+
break
278+
}
279+
if (!isSetup && !descriptor.script) {
280+
descriptor.script = scriptBlock
281+
break
282+
}
283+
errors.push(createDuplicateBlockError(node, isSetup))
272284
break
273-
}
274-
errors.push(createDuplicateBlockError(node, isSetup))
275-
break
276-
case 'style':
277-
const styleBlock = createBlock(node, source, pad) as SFCStyleBlock
278-
if (styleBlock.attrs.vars) {
279-
errors.push(
280-
new SyntaxError(
281-
`<style vars> has been replaced by a new proposal: ` +
282-
`https://github.com/vuejs/rfcs/pull/231`
285+
case 'style':
286+
const styleBlock = createBlock(node, source, pad) as SFCStyleBlock
287+
if (styleBlock.attrs.vars) {
288+
errors.push(
289+
new SyntaxError(
290+
`<style vars> has been replaced by a new proposal: ` +
291+
`https://github.com/vuejs/rfcs/pull/231`
292+
)
283293
)
284-
)
285-
}
286-
descriptor.styles.push(styleBlock)
287-
break
288-
default:
289-
descriptor.customBlocks.push(createBlock(node, source, pad))
290-
break
294+
}
295+
descriptor.styles.push(styleBlock)
296+
break
297+
default:
298+
descriptor.customBlocks.push(createBlock(node, source, pad))
299+
break
300+
}
301+
} else if (node.type == NodeTypes.COMMENT) {
302+
// @ts-ignore
303+
descriptor.customBlocks.push(node)
304+
// descriptor.customBlocks.push(createBlock(node, source, pad))
291305
}
292306
})
293307

‎vue-transformations/__testfixtures__/popconfirm-rename-event/popconfirm-rename-event.input.vue

+36
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1+
<!-- Add "scoped" attribute to limit CSS to this component only -->
12
<template>
3+
<!-- Add "scoped" attribute to limit CSS to this component only -->
4+
25
<el-popconfirm @onConfirm="del()" @onCancel="del()" :onConfirm="tt" onCancel="tt"
36
title="Are you sure to delete this?"
47
>
@@ -7,3 +10,36 @@
710
</template>
811
</el-popconfirm>
912
</template>
13+
<!-- Add "scoped" attribute to limit CSS to this component only -->
14+
<!-- Add "scoped" attribute to limit CSS to this component only -->
15+
16+
<!-- Add "scoped" attribute to limit CSS to this component only -->
17+
18+
<script>
19+
<!-- Add "scoped" attribute to limit CSS to this component only -->
20+
21+
export default {
22+
name: 'HelloWorld',
23+
props: {
24+
msg: String
25+
}
26+
}
27+
</script>
28+
29+
<!-- Add "scoped" attribute to limit CSS to this component only -->
30+
<style scoped>
31+
h3 {
32+
margin: 40px 0 0;
33+
}
34+
ul {
35+
list-style-type: none;
36+
padding: 0;
37+
}
38+
li {
39+
display: inline-block;
40+
margin: 0 10px;
41+
}
42+
a {
43+
color: #42b983;
44+
}
45+
</style>

‎vue-transformations/__testfixtures__/popconfirm-rename-event/popconfirm-rename-event.output.vue

+36
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1+
<!-- Add "scoped" attribute to limit CSS to this component only -->
12
<template>
3+
<!-- Add "scoped" attribute to limit CSS to this component only -->
4+
25
<el-popconfirm @confirm="del()" @cancel="del()" :onConfirm="tt" onCancel="tt"
36
title="Are you sure to delete this?"
47
>
@@ -7,3 +10,36 @@
710
</template>
811
</el-popconfirm>
912
</template>
13+
<!-- Add "scoped" attribute to limit CSS to this component only -->
14+
<!-- Add "scoped" attribute to limit CSS to this component only -->
15+
16+
<!-- Add "scoped" attribute to limit CSS to this component only -->
17+
18+
<script>
19+
<!-- Add "scoped" attribute to limit CSS to this component only -->
20+
21+
export default {
22+
name: 'HelloWorld',
23+
props: {
24+
msg: String
25+
}
26+
}
27+
</script>
28+
29+
<!-- Add "scoped" attribute to limit CSS to this component only -->
30+
<style scoped>
31+
h3 {
32+
margin: 40px 0 0;
33+
}
34+
ul {
35+
list-style-type: none;
36+
padding: 0;
37+
}
38+
li {
39+
display: inline-block;
40+
margin: 0 10px;
41+
}
42+
a {
43+
color: #42b983;
44+
}
45+
</style>

0 commit comments

Comments
 (0)