testea/test-repo
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Vue: Consistent slot, support Vue3 (#9609)

Browse Source
This commit is contained in:
fisker Cheung authored and GitHub committed 2020-11-13 09:05:30 +08:00
1 parent d0f813e5d4
commit 28d914b811
11 files changed
+386 -19
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

changelog_unreleased/vue/pr-9609.md
+73
View File
@@ -0,0 +1,73 @@
#### Fix inconsistent formatting for slots, support Vue 3 `script[setup]` and `style[vars]` (#9609 by @fisker)
- [SFC Composition API Syntax Sugar (`<script setup>`)](https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md)
- [SFC State-driven CSS Variables (`<style vars>`)](https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-style-variables.md)
<!-- prettier-ignore -->
```vue
<!-- Input -->
<script setup="props, {emit }"></script>
<style vars="{color }"></style>
<template>
<div>
<div v-slot="{destructuring:{ a:{b}}}"/>
<div v-slot:name="{destructuring:{ a:{b}}}"/>
<div #default="{destructuring:{ a:{b}}}"/>
<slot slot-scope="{destructuring:{ a:{b}}}"/>
</div>
</template>
<!-- Prettier stable -->
<script setup="props, {emit }"></script>
<style vars="{color }"></style>
<template>
<div>
<div v-slot="{ destructuring: { a: { b } } }" />
<div v-slot:name="{ destructuring: { a: { b } } }" />
<div #default="{ destructuring: { a: { b } } }" />
<slot
slot-scope="{
destructuring: {
a: { b },
},
}"
/>
</div>
</template>
<!-- Prettier master -->
<script setup="props, { emit }"></script>
<style vars="{ color }"></style>
<template>
<div>
<div
v-slot="{
destructuring: {
a: { b },
},
}"
/>
<div
v-slot:name="{
destructuring: {
a: { b },
},
}"
/>
<div
#default="{
destructuring: {
a: { b },
},
}"
/>
<slot
slot-scope="{
destructuring: {
a: { b },
},
}"
/>
</div>
</template>
```
src/language-html/printer-html.js
+6 -4
View File
@@ -36,6 +36,8 @@ const {
inferScriptParser,
isVueCustomBlock,
isVueNonHtmlBlock,
isVueSlotAttribute,
isVueSfcBindingsAttribute,
isScriptLikeTag,
isTextLikeNode,
preferHardlineAsLeadingSpaces,
@@ -49,7 +51,7 @@ const { insertPragma } = require("./pragma");
const { locStart, locEnd } = require("./loc");
const {
printVueFor,
printVueSlotScope,
printVueBindings,
isVueEventBindingExpression,
} = require("./syntax-vue");
const { printImgSrcset, printClassNames } = require("./syntax-attribute");
@@ -1078,8 +1080,8 @@ function printEmbeddedAttributeValue(node, originalTextToDoc, options) {
return printVueFor(getValue(), textToDoc);
}
if (node.fullName === "slot-scope") {
return printVueSlotScope(getValue(), textToDoc);
if (isVueSlotAttribute(node) || isVueSfcBindingsAttribute(node, options)) {
return printVueBindings(getValue(), textToDoc);
}
/**
@@ -1097,7 +1099,7 @@ function printEmbeddedAttributeValue(node, originalTextToDoc, options) {
/**
* v-if="jsExpression"
*/
const jsExpressionBindingPatterns = ["^v-", "^#"];
const jsExpressionBindingPatterns = ["^v-"];
if (isKeyMatched(vueEventBindingPatterns)) {
const value = getValue();
src/language-html/syntax-vue.js
+3 -3
View File
@@ -63,12 +63,12 @@ function parseVueFor(value) {
};
}
function printVueSlotScope(value, textToDoc) {
function printVueBindings(value, textToDoc) {
return textToDoc(
`function _(${value}) {}`,
{
parser: "babel",
__isVueSlotScope: true,
__isVueBindings: true,
},
{ stripTrailingHardline: true }
);
@@ -90,5 +90,5 @@ function isVueEventBindingExpression(eventBindingValue) {
module.exports = {
isVueEventBindingExpression,
printVueFor,
printVueSlotScope,
printVueBindings,
};
src/language-html/utils.js
+28
View File
@@ -637,6 +637,32 @@ function isVueNonHtmlBlock(node, options) {
);
}
function isVueSlotAttribute(attribute) {
const attributeName = attribute.fullName;
return (
attributeName.charAt(0) === "#" ||
attributeName === "slot-scope" ||
attributeName === "v-slot" ||
attributeName.startsWith("v-slot:")
);
}
function isVueSfcBindingsAttribute(attribute, options) {
const element = attribute.parent;
if (!isVueSfcBlock(element, options)) {
return false;
}
const tagName = element.fullName;
const attributeName = attribute.fullName;
return (
// https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md
(tagName === "script" && attributeName === "setup") ||
// https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-style-variables.md
(tagName === "style" && attributeName === "vars")
);
}
module.exports = {
HTML_ELEMENT_ATTRIBUTES,
HTML_TAGS,
@@ -660,6 +686,8 @@ module.exports = {
inferScriptParser,
isVueCustomBlock,
isVueNonHtmlBlock,
isVueSlotAttribute,
isVueSfcBindingsAttribute,
isDanglingSpaceSensitiveNode,
isIndentationSensitiveNode,
isLeadingSpaceSensitiveNode,
src/language-js/html-binding.js
+1 -1
View File
@@ -41,7 +41,7 @@ function printHtmlBinding(path, options, print) {
);
}
if (options.__isVueSlotScope) {
if (options.__isVueBindings) {
return path.call(
(functionDeclarationPath) =>
join(concat([",", line]), functionDeclarationPath.map(print, "params")),
tests/vue/vue-3/__snapshots__/jsfmt.spec.js.snap
+109
View File
@@ -0,0 +1,109 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`script-setup.vue format 1`] = `
====================================options=====================================
parsers: ["vue"]
printWidth: 80
| printWidth
=====================================input======================================
<script setup></script>
<script setup=" foo"></script>
<script setup=" {row }"></script>
<script setup="{destructuring:{ a:{b}}}"></script>
<!-- Not script -->
<custom setup=" {row }">Not A script</custom>
<style setup=" {row }"></style>
<!-- Not root block -->
<template>
<script setup=" {row }"></script>
</template>
<!-- Not attribute -->
<script>
<setup>{not:{a:attribute}}</setup>
</script>
=====================================output=====================================
<script setup></script>
<script setup="foo"></script>
<script setup="{ row }"></script>
<script
setup="{
destructuring: {
a: { b },
},
}"
></script>
<!-- Not script -->
<custom setup=" {row }">Not A script</custom>
<style setup=" {row }"></style>
<!-- Not root block -->
<template>
<script setup=" {row }"></script>
</template>
<!-- Not attribute -->
<script>
<setup>{not:{a:attribute}}</setup>
</script>
================================================================================
`;
exports[`style-variables.vue format 1`] = `
====================================options=====================================
parsers: ["vue"]
printWidth: 80
| printWidth
=====================================input======================================
<style vars></style>
<style vars=" foo"></style>
<style vars=" {row }"></style>
<style vars="{destructuring:{ a:{b}}}"></style>
<!-- Not style -->
<custom vars=" {row }">Not A style</custom>
<script vars=" {row }"></script>
<!-- Not root block -->
<template>
<style vars=" {row }"></style>
</template>
<!-- Not attribute -->
<style>
<vars>{not:{a:attribute}}</vars>
</style>
=====================================output=====================================
<style vars></style>
<style vars="foo"></style>
<style vars="{ row }"></style>
<style
vars="{
destructuring: {
a: { b },
},
}"
></style>
<!-- Not style -->
<custom vars=" {row }">Not A style</custom>
<script vars=" {row }"></script>
<!-- Not root block -->
<template>
<style vars=" {row }"></style>
</template>
<!-- Not attribute -->
<style>
<vars>{not:{a:attribute}}</vars>
</style>
================================================================================
`;
tests/vue/vue-3/jsfmt.spec.js
+1
View File
@@ -0,0 +1 @@
run_spec(__dirname, ["vue"]);
tests/vue/vue-3/script-setup.vue
+18
View File
@@ -0,0 +1,18 @@
<script setup></script>
<script setup=" foo"></script>
<script setup=" {row }"></script>
<script setup="{destructuring:{ a:{b}}}"></script>
<!-- Not script -->
<custom setup=" {row }">Not A script</custom>
<style setup=" {row }"></style>
<!-- Not root block -->
<template>
<script setup=" {row }"></script>
</template>
<!-- Not attribute -->
<script>
<setup>{not:{a:attribute}}</setup>
</script>
tests/vue/vue-3/style-variables.vue
+18
View File
@@ -0,0 +1,18 @@
<style vars></style>
<style vars=" foo"></style>
<style vars=" {row }"></style>
<style vars="{destructuring:{ a:{b}}}"></style>
<!-- Not style -->
<custom vars=" {row }">Not A style</custom>
<script vars=" {row }"></script>
<!-- Not root block -->
<template>
<style vars=" {row }"></style>
</template>
<!-- Not attribute -->
<style>
<vars>{not:{a:attribute}}</vars>
</style>
tests/vue/vue/__snapshots__/jsfmt.spec.js.snap
+117 -9
View File
@@ -44,8 +44,18 @@ semi: false
@click=" $emit( 'click' ) "
@click=" $emit( 'click' ) ;"
@click=" $emit( 'click' ) ;if(something){for(let i=j;i<100;i++){}}else{}"
slot-scope="{row}"
slot-scope="{destructuring:{a:{b}}}"
slot-scope=" foo"
slot-scope=" {row }"
slot-scope="{destructuring:{ a:{b}}}"
#default=" foo"
#default=" {row }"
#default="{destructuring:{ a:{b}}}"
v-slot=" foo"
v-slot=" {row }"
v-slot="{destructuring:{ a:{b}}}"
v-slot:name=" foo"
v-slot:name=" {row }"
v-slot:name="{destructuring:{ a:{b}}}"
:class="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
:class="(() => { return 'hello' })()"
:key="index /* hello */ "
@@ -289,12 +299,34 @@ semi: false
} else {
}
"
slot-scope="foo"
slot-scope="{ row }"
slot-scope="{
destructuring: {
a: { b },
},
}"
#default="foo"
#default="{ row }"
#default="{
destructuring: {
a: { b },
},
}"
v-slot="foo"
v-slot="{ row }"
v-slot="{
destructuring: {
a: { b },
},
}"
v-slot:name="foo"
v-slot:name="{ row }"
v-slot:name="{
destructuring: {
a: { b },
},
}"
:class="{
longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true,
}"
@@ -323,7 +355,11 @@ semi: false
@click="a[1];"
@click="a['b'];"
@click="a[null]"
#default="{ foo: { bar: { baz } } }"
#default="{
foo: {
bar: { baz },
},
}"
></div>
</template>
@@ -374,8 +410,18 @@ trailingComma: "none"
@click=" $emit( 'click' ) "
@click=" $emit( 'click' ) ;"
@click=" $emit( 'click' ) ;if(something){for(let i=j;i<100;i++){}}else{}"
slot-scope="{row}"
slot-scope="{destructuring:{a:{b}}}"
slot-scope=" foo"
slot-scope=" {row }"
slot-scope="{destructuring:{ a:{b}}}"
#default=" foo"
#default=" {row }"
#default="{destructuring:{ a:{b}}}"
v-slot=" foo"
v-slot=" {row }"
v-slot="{destructuring:{ a:{b}}}"
v-slot:name=" foo"
v-slot:name=" {row }"
v-slot:name="{destructuring:{ a:{b}}}"
:class="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
:class="(() => { return 'hello' })()"
:key="index /* hello */ "
@@ -619,12 +665,34 @@ trailingComma: "none"
} else {
}
"
slot-scope="foo"
slot-scope="{ row }"
slot-scope="{
destructuring: {
a: { b }
}
}"
#default="foo"
#default="{ row }"
#default="{
destructuring: {
a: { b }
}
}"
v-slot="foo"
v-slot="{ row }"
v-slot="{
destructuring: {
a: { b }
}
}"
v-slot:name="foo"
v-slot:name="{ row }"
v-slot:name="{
destructuring: {
a: { b }
}
}"
:class="{
longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true
}"
@@ -653,7 +721,11 @@ trailingComma: "none"
@click="a[1];"
@click="a['b'];"
@click="a[null]"
#default="{ foo: { bar: { baz } } }"
#default="{
foo: {
bar: { baz }
}
}"
></div>
</template>
@@ -703,8 +775,18 @@ printWidth: 80
@click=" $emit( 'click' ) "
@click=" $emit( 'click' ) ;"
@click=" $emit( 'click' ) ;if(something){for(let i=j;i<100;i++){}}else{}"
slot-scope="{row}"
slot-scope="{destructuring:{a:{b}}}"
slot-scope=" foo"
slot-scope=" {row }"
slot-scope="{destructuring:{ a:{b}}}"
#default=" foo"
#default=" {row }"
#default="{destructuring:{ a:{b}}}"
v-slot=" foo"
v-slot=" {row }"
v-slot="{destructuring:{ a:{b}}}"
v-slot:name=" foo"
v-slot:name=" {row }"
v-slot:name="{destructuring:{ a:{b}}}"
:class="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
:class="(() => { return 'hello' })()"
:key="index /* hello */ "
@@ -948,12 +1030,34 @@ printWidth: 80
} else {
}
"
slot-scope="foo"
slot-scope="{ row }"
slot-scope="{
destructuring: {
a: { b },
},
}"
#default="foo"
#default="{ row }"
#default="{
destructuring: {
a: { b },
},
}"
v-slot="foo"
v-slot="{ row }"
v-slot="{
destructuring: {
a: { b },
},
}"
v-slot:name="foo"
v-slot:name="{ row }"
v-slot:name="{
destructuring: {
a: { b },
},
}"
:class="{
longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true,
}"
@@ -982,7 +1086,11 @@ printWidth: 80
@click="a[1];"
@click="a['b'];"
@click="a[null]"
#default="{ foo: { bar: { baz } } }"
#default="{
foo: {
bar: { baz },
},
}"
></div>
</template>
tests/vue/vue/attributes.vue
+12 -2
View File
@@ -35,8 +35,18 @@
@click=" $emit( 'click' ) "
@click=" $emit( 'click' ) ;"
@click=" $emit( 'click' ) ;if(something){for(let i=j;i<100;i++){}}else{}"
slot-scope="{row}"
slot-scope="{destructuring:{a:{b}}}"
slot-scope=" foo"
slot-scope=" {row }"
slot-scope="{destructuring:{ a:{b}}}"
#default=" foo"
#default=" {row }"
#default="{destructuring:{ a:{b}}}"
v-slot=" foo"
v-slot=" {row }"
v-slot="{destructuring:{ a:{b}}}"
v-slot:name=" foo"
v-slot:name=" {row }"
v-slot:name="{destructuring:{ a:{b}}}"
:class="{ longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true }"
:class="(() => { return 'hello' })()"
:key="index /* hello */ "