Vue: Support custom blocks #8023

sosukesuzuki · 2020-04-11T14:04:59Z

This improves formatting custom blocks in Vue SFC.(see #5448 and #5458)

If there is lang attribute, the value of lang is passed to parser option.(If the value of lang is unknown, no formatting is done)

<!-- Input -->
<custom lang="babel">
const foo =
    'foo'
</custom>

<!-- Output -->
<custom lang="babel">
const foo = "foo";
</custom>

real world custom blocks examples:

How do you think?

I’ve added tests to confirm my change works.
(If the change is user-facing) I’ve added my changes to changelog_unreleased/*/pr-XXXX.md file following changelog_unreleased/TEMPLATE.md.
I’ve read the contributing guidelines.

✨Try the playground for this PR✨

fisker · 2020-04-11T14:08:18Z

I guess we still can't parse this

<custom lang="babel">
const foo = "</";
</custom>

sosukesuzuki · 2020-04-11T14:10:09Z

@fisker Yes, I think we should fix the problem in other way like #7975

fisker · 2020-04-11T15:23:52Z

@sosukesuzuki
I think we should add logic here,

prettier/src/language-html/utils.js

Line 364 in 5569e33

function inferScriptParser(node) {

maybe also both lang and type? I don't think people would like to write lang="json-stringify", should be lang="json" or type="application/json".

fisker · 2020-04-12T02:40:39Z

src/language-html/printer-html.js

+          for (let i = 0; i < parsers.length && !printed; i++) {
+            const parser = parsers[i];
+            try {
+              printed = textToDoc(node.value, { parser });


I don't like the idea guessing languages, people even complaining about auto format with known language.

I don't like this too, but in the real world custom blocks are often used without attributes.

In that way, why don't we ignore it. Want format? Tell me what it is.

I think formatting for custom blocks is needed. For example, eslint-plugin-gridsome and eslint-plugin-prettier-vue use Prettier to format custom blocks.
Could you tell me what is the reason for ignoring it?

I'm not saying disable formatting custom blocks.
I'm worried about wrong results.

We should ignore

<docs></docs>

But format

<docs lang="markdown"></docs>

Maybe with some exception like <page-query> known as graphql block, just like <script> in html we assume that's javascript

I understood. What do you think about adding options for custom blocks like eslint-plugin-prettier-vue? (I'm reluctant to add options)

I'll remove guessing languages for now. At least for this PR, it only supports custom blocks using the lang / type attribute.

👍 , I guess we can use --embedded-language-formatting later?

sounds good.

alexander-akait · 2020-04-12T15:46:58Z

src/document/doc-utils.js

 function stripTrailingHardline(doc) {
  // HACK remove ending hardline, original PR: #1984
  if (doc.type === "concat" && doc.parts.length !== 0) {
-    const lastPart = doc.parts[doc.parts.length - 1];
+    const parts = getInnerParts(doc);
+    const lastPart = parts[parts.length - 1];
    if (lastPart.type === "concat") {
      if (
        lastPart.parts.length === 2 &&
        lastPart.parts[0].hard &&
        lastPart.parts[1].type === "break-parent"
      ) {
-        return { type: "concat", parts: doc.parts.slice(0, -1) };
+        return { type: "concat", parts: parts.slice(0, -1) };


Potential breaking change for plugins

I think we can implement the withInnerParts argument (and maybe put todo to change it on default for prettier@3)

/cc @thorn0

Are doc-utils considered part of the public plugin API?

src/language-html/utils.js

alexander-akait

Looks good, but want some feedback from @thorn0 about changes in doc-utils

src/language-html/printer-html.js

fisker · 2020-04-13T12:07:29Z

Just want let you know, I tried use @vue/component-compiler-utils to parse .vue today, can't get comments at root and can't keep attribute orders, no info in the SFCDescriptor . fisker#347

src/document/doc-utils.js

thorn0 · 2020-04-13T12:50:42Z

Prettier pr-8023
Playground link

--parser vue

Input:

<custom lang="zzz">
const foo = "foo";
  const foo = "foo";</custom>

Output:

<custom lang="zzz"> const foo = "foo";
  const foo = "foo";>

thorn0

Vue: Support custom blocks #8023 (comment)
lang="babel" should not be recognized. lang="javascript" should. babel is not a language, it's Prettier's implementation detail. Check how the language recognition is implemented for code blocks in Markdown.
--vue-indent-script-and-style shouldn't affect custom block whose language wasn't recognized.

fisker · 2020-04-13T13:16:16Z

Prettier pr-8023
Playground link

--parser vue

Input:

<custom lang="json">{
  "a": 1
}</custom>

<custom lang="json">{
  "a": 1
}
</custom>

Output:

<custom lang="json"
{
  "a": 1
}
>

<custom lang="json"
{
  "a": 1
}
</custom>

thorn0

Blocks with unknown languages must be preserved as is.
Prettier pr-8023
Playground link
```
 --parser vue
```
Input:
```
 <custom lang="zzz">123</custom>
```
Output:
```
 <custom lang="zzz">
 123
 </custom>
```
Please merge master or rebase to see how this will work with --embedded-language-formatting=off.

sosukesuzuki · 2020-04-14T01:38:48Z

I'm busy this week, so I'll continue working on it over the weekend.

sosukesuzuki · 2020-04-15T00:31:39Z

I worked on this because it wasn't as busy as I thought it would be.

thorn0 · 2020-04-15T22:20:47Z

What about this point? Why can that code be parsed in <script>...</script> but not in custom blocks? Can we parse custom blocks the same way we parse script tags?

sosukesuzuki · 2020-04-15T22:54:51Z

@thorn0 Probably, we cannot fix it from Prettier side. angular-html-parser seems to parse <script>... </script> in a different way from <custom>...</custom>.

This reverts commit f65c7cd.

sosukesuzuki force-pushed the support-custom-block branch from a2a451e to 5dc4bb7 Compare April 11, 2020 19:33

fisker reviewed Apr 12, 2020

View reviewed changes

alexander-akait reviewed Apr 12, 2020

View reviewed changes

sosukesuzuki force-pushed the support-custom-block branch from c241784 to 6ca2f96 Compare April 12, 2020 16:04

fisker reviewed Apr 12, 2020

View reviewed changes

src/language-html/utils.js Outdated Show resolved Hide resolved

fisker approved these changes Apr 13, 2020

View reviewed changes

sosukesuzuki requested review from thorn0 and alexander-akait April 13, 2020 11:41

alexander-akait approved these changes Apr 13, 2020

View reviewed changes

thorn0 reviewed Apr 13, 2020

View reviewed changes

src/language-html/printer-html.js Outdated Show resolved Hide resolved

thorn0 reviewed Apr 13, 2020

View reviewed changes

src/document/doc-utils.js Outdated Show resolved Hide resolved

This comment has been minimized.

Sign in to view

thorn0 requested changes Apr 13, 2020

View reviewed changes

sosukesuzuki requested review from thorn0 and fisker April 13, 2020 18:13

thorn0 requested changes Apr 13, 2020

View reviewed changes

sosukesuzuki force-pushed the support-custom-block branch from 7d5e818 to afc96f6 Compare April 15, 2020 00:24

This comment has been minimized.

Sign in to view

sosukesuzuki force-pushed the support-custom-block branch from 85d4cec to ba61e74 Compare April 15, 2020 22:58

sosukesuzuki and others added 18 commits April 16, 2020 09:40

Implement withInnerParts arg for stripTrailingHardline

d3e6e8e

Rename isVueCustomBlock

4573adc

Set verbose: true

5b31ffc

Use getParserName

2711662

Ignore vueIndentScriptAndStyle

fb01d9c

tmp

eb286d4

Fix formatting

0eadc15

Add tests

ac99f02

Fix by lint

0a413d3

Revert "Set verbose: true"

c188dd3

This reverts commit f65c7cd.

loop with i--

ad14ae1

Modify to preserve unknown langauge

a99e277

Support embeddedLanguageFormatting

4e65f5f

Fix by lint

1119e5e

Fix mistake

43ccaa0

Modify to preserve unknown lang

7967148

Remove unnecesary condition

73e9655

Add error tests

d7be06c

sosukesuzuki force-pushed the support-custom-block branch from 1064458 to d7be06c Compare April 16, 2020 00:46

fisker approved these changes Apr 16, 2020

View reviewed changes

thorn0 approved these changes Apr 16, 2020

View reviewed changes

sosukesuzuki merged commit 915327d into prettier:master Apr 16, 2020

sosukesuzuki deleted the support-custom-block branch April 16, 2020 22:54

sosukesuzuki mentioned this pull request Apr 19, 2020

Add option to parse a content of unknown tags in root as string prettier/angular-html-parser#11

Closed

This was referenced Apr 24, 2020

HTML can't format my html with awesome vbscripts #8147

Closed

Add test for issue 8147 #8148

Merged

tyankatsu0105 mentioned this pull request May 21, 2020

remove format-query-block rule gridsome/eslint-plugin-gridsome#89

Open

fisker mentioned this pull request Jun 17, 2020

Format Vue SFC root blocks #8465

Merged

4 tasks

sosukesuzuki mentioned this pull request Aug 28, 2020

Disable embedded language formatting by default and make it configurable #5588

Open

github-actions bot locked as resolved and limited conversation to collaborators Apr 17, 2021

Vue: Support custom blocks #8023

Vue: Support custom blocks #8023

sosukesuzuki commented Apr 11, 2020 •

edited

fisker commented Apr 11, 2020 •

edited

sosukesuzuki commented Apr 11, 2020

fisker commented Apr 11, 2020 •

edited

fisker Apr 12, 2020

sosukesuzuki Apr 12, 2020

fisker Apr 12, 2020

sosukesuzuki Apr 12, 2020

fisker Apr 12, 2020 •

edited

sosukesuzuki Apr 12, 2020

sosukesuzuki Apr 12, 2020

fisker Apr 12, 2020

sosukesuzuki Apr 12, 2020

alexander-akait Apr 12, 2020

alexander-akait Apr 12, 2020

thorn0 Apr 13, 2020

alexander-akait left a comment

fisker commented Apr 13, 2020 •

edited

thorn0 commented Apr 13, 2020 •

edited

This comment has been minimized.

This comment has been minimized.

thorn0 left a comment •

edited

fisker commented Apr 13, 2020

thorn0 left a comment •

edited

sosukesuzuki commented Apr 14, 2020

sosukesuzuki commented Apr 15, 2020

This comment has been minimized.

thorn0 commented Apr 15, 2020

sosukesuzuki commented Apr 15, 2020 •

edited

Vue: Support custom blocks #8023

Vue: Support custom blocks #8023

Conversation

sosukesuzuki commented Apr 11, 2020 • edited

fisker commented Apr 11, 2020 • edited

sosukesuzuki commented Apr 11, 2020

fisker commented Apr 11, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fisker Apr 12, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexander-akait left a comment

Choose a reason for hiding this comment

fisker commented Apr 13, 2020 • edited

thorn0 commented Apr 13, 2020 • edited

This comment has been minimized.

This comment has been minimized.

thorn0 left a comment • edited

Choose a reason for hiding this comment

fisker commented Apr 13, 2020

thorn0 left a comment • edited

Choose a reason for hiding this comment

sosukesuzuki commented Apr 14, 2020

sosukesuzuki commented Apr 15, 2020

This comment has been minimized.

thorn0 commented Apr 15, 2020

sosukesuzuki commented Apr 15, 2020 • edited

sosukesuzuki commented Apr 11, 2020 •

edited

fisker commented Apr 11, 2020 •

edited

fisker commented Apr 11, 2020 •

edited

fisker Apr 12, 2020 •

edited

fisker commented Apr 13, 2020 •

edited

thorn0 commented Apr 13, 2020 •

edited

thorn0 left a comment •

edited

thorn0 left a comment •

edited

sosukesuzuki commented Apr 15, 2020 •

edited