Format Vue SFC root blocks #8465

fisker · 2020-06-01T04:47:34Z

To play with it,

mkdir prettier-vue-pug-test
cd prettier-vue-pug-test
yarn init -y
yarn add fisker/prettier#vue-embed @prettier/plugin-pug
code test.vue
npx prettier test.vue --plugin-search-dir=.

--plugin-search-dir won't need when we fix #8474

Fixes #6298

I’ve added tests to confirm my change works.
(If changing the API or CLI) I’ve documented the changes I’ve made (in the docs/ directory)
(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✨

# Conflicts: # src/language-html/printer-html.js

Shinigami92 · 2020-06-01T12:00:37Z

First local test seems to work

OS: Windows 10
Used Terminal: cmd

Blank lines above and below the code could be on my side
(especially the blank line below)

Shinigami92 · 2020-06-01T12:08:54Z

With logs enabled and using yarn link "@prettier/plugin-pug":

D:\Shinigami\Documents\Projects\prettier-vue-pug-test>npx prettier test.vue --plugin-search-dir=.
test.vue[parsers:pug:preprocess]: { text: '\n  div.text( color =   "primary",  disabled    )\n' }
[parsers:pug:parse]: { text: '\n  div.text( color =   "primary",  disabled    )\n' }
[printers:pug-ast:embed]: {
  "stack": [
    [
      {
        "type": "indent",
        "loc": {
          "start": {
            "line": 2,
            "column": 1
          },
          "end": {
            "line": 2,
            "column": 3
          }
        },
        "val": 2
      },
      {
        "type": "tag",
        "loc": {
          "start": {
            "line": 2,
            "column": 3
          },
          "end": {
            "line": 2,
            "column": 6
          }
        },
        "val": "div"
      },
      {
        "type": "class",
        "loc": {
          "start": {
            "line": 2,
            "column": 6
          },
          "end": {
            "line": 2,
            "column": 11
          }
        },
        "val": "text"
      },
      {
        "type": "start-attributes",
        "loc": {
          "start": {
            "line": 2,
            "column": 11
          },
          "end": {
            "line": 2,
            "column": 12
          }
        }
      },
      {
        "type": "attribute",
        "loc": {
          "start": {
            "line": 2,
            "column": 13
          },
          "end": {
            "line": 2,
            "column": 32
          }
        },
        "name": "color",
        "val": "\"primary\"",
        "mustEscape": true
      },
      {
        "type": "attribute",
        "loc": {
          "start": {
            "line": 2,
            "column": 35
          },
          "end": {
            "line": 2,
            "column": 43
          }
        },
        "name": "disabled",
        "val": true,
        "mustEscape": true
      },
      {
        "type": "end-attributes",
        "loc": {
          "start": {
            "line": 2,
            "column": 47
          },
          "end": {
            "line": 2,
            "column": 48
          }
        }
      },
      {
        "type": "outdent",
        "loc": {
          "start": {
            "line": 3,
            "column": 1
          },
          "end": {
            "line": 3,
            "column": 1
          }
        }
      },
      {
        "type": "eos",
        "loc": {
          "start": {
            "line": 3,
            "column": 1
          },
          "end": {
            "line": 3,
            "column": 1
          }
        }
      }
    ]
  ]
}
[printers:pug-ast:print]:
  .text(color="primary", disabled)

<template lang="pug">

  .text(color="primary", disabled)

</template>

<script>
export default {
  name: "Hello",
};
</script>

Thats the first time my plugin receiving something from vue <template lang="pug"> 🎉

sosukesuzuki

Overall looks good.

I have one question, should we respect vue-indent-script-and-style ?

Prettier pr-8465
Playground link

--parser vue
--vue-indent-script-and-style

Input:

<script lang="json">
{
  "foo": "bar"
}
</script>

<custom lang="json">
{
  "foo": "bar"
}
</custom>

Output:

<script lang="json">
  {
    "foo": "bar"
  }
</script>

<custom lang="json">
{
  "foo": "bar"
}
</custom>

fisker · 2020-06-04T07:38:30Z

I'm not sure about that, vue-indent-script-and-style mean to indent <script> and <style>, should we apply to those blocks ? They are not <script> 😄

There might be another problem(but I'm not sure), plugins will format these blocks, what if this language/plugin indent sensitive? Maybe python? or does pug care?

thorn0 · 2020-06-04T07:41:26Z

tests_config/run_spec.js

@@ -56,8 +56,11 @@ const isTestDirectory = (dirname, name) =>
  dirname.startsWith(path.join(__dirname, "../tests", name));

 global.run_spec = (fixtures, parsers, options) => {
-  // Can't test plugins on standalone
+  // Can't test plugins on standalone, a empty test to pass


You can test them if you pass them as objects, not strings.

I've tried this before... I forgot. Can't work, maybe because there are functions?

Okay. Let's keep it this way. I might look at this later.

Are you talking about a empty test to pass? This not work too, snapshots don't match.

I ignored it in jest.config.js for now.

No, about passing the plugin as an object. It should work. If it doesn't, something isn't right.

Shinigami92 · 2020-06-04T07:48:21Z

I'm not sure about that, vue-indent-script-and-style mean to indent <script> and <style>, should we apply to those blocks ? They are not <script> 😄

There might be another problem(but I'm not sure), plugins will format these blocks, what if this language/plugin indent sensitive? Maybe python? or does pug care?

In any case, it makes sense for HTML or XML-based languages

<template>
  <div>
    <p>some content</p>
  </div>
</template>

But for non XML based languages like pug? 🤷‍♂️

<template lang="pug">
div
  p some content
</template>

IMO makes no sense for such languages

fisker · 2020-06-04T08:06:48Z

src/language-html/printer-html.js

+
+        let doc;
+        try {
+          doc = textToDoc(getNodeContent(node, options), { parser });


This text pass to parser need discuss too,

<custom lang="pug"> div </custom>

What we should pass to plugin?

"\n div\n" (current)

" div" (trim leading and trailing empty lines)

" div\n" (trim trailing empty lines)

~~"div" (this should not consider)~~

I would prefer the exact behavior as currently with the embedded markdown

Which is?

if same

```pug div ```

Seems removed one line on each side, means extra blank lines kept. https://github.com/prettier/prettier/blob/master/src/language-markdown/utils.js#L220

Beside the fact that my plugin has a bug

embedded markdown

```pug div ```

currently formats to (bug)

```pug | div ```

but should format to

```pug div ```

@fisker Please update your @prettier/plugin-pug to v1.4.4
I fixed the bug

This reverts commit 4ca5990.

Shinigami92 · 2020-06-08T07:38:30Z

lang="uppercase-rocks" 😂
I like that 👍

fisker · 2020-06-08T08:11:54Z

lang="uppercase-rocks" 😂
I like that 👍

NO NO NO, YOU LIKE THAT!

Shinigami92 · 2020-06-08T08:31:50Z

lang="uppercase-rocks" 😂
I like that 👍

NO NO NO, YOU LIKE THAT!

OH MY GOD, IT TOOK ME SO LONG TO UNDERSTAND THIS JOKE XD

fisker · 2020-06-12T12:26:16Z

If no objection about vue-indent-script-and-style, approve?

@prettier/core

sosukesuzuki

Good job

thorn0 · 2020-06-15T08:59:17Z

Changelog?

fisker · 2020-06-17T02:49:25Z

Shared a changelog with #8023

fisker · 2020-06-17T09:50:13Z

I forgot discuss this with you guys, now we have extra \n for pug

<template lang="pug">
.text(color="primary", disabled="true")

</template>

First, plugins prints own \n? Why not add this in core.format()? @thorn0 Do you know the reason?

With builtin embed languages, we use stripTrailingHardline to remove the \n, but @prettier/plugin-pug returns a string. Should we keep it? or remove it? or ask plugins (in this case @prettier/plugin-pug) to remove it?

In this case, I think I should remove the \n if it's a string. But we should improve this in future.

@thorn0 @Shinigami92 @sosukesuzuki Thoughts?

Shinigami92 · 2020-06-17T10:11:05Z

I think this can be managed on my (plugin) side. So when the embed function is called, I could remove it at the end.

But why is markdown already working? 🤔

fisker · 2020-06-17T10:23:33Z

Interesting, I had a quick look, seems markdown did not insert a hardline after the code, it use the \n return from textToDoc,

prettier/src/language-markdown/embed.js

Line 36 in e54d4fc

replaceNewlinesWithLiterallines(doc),

But, I don't think that's the right way, if a plugin didn't add final_newline, it will be

```foo
text```

?

thorn0 · 2020-06-17T10:24:22Z

@fisker It's unlikely there is a good reason for that. Just history I guess. Overall, 3rd party plugins should behave the same way the builtin plugins do, and we need to document these requirements. However, in this case, we need to decide first if we want to change this behavior for the builtin plugins and move the addition of the final new line to the core. I think this change would make sense.

fisker · 2020-06-17T10:29:58Z

I'm going to remove this \n manually if it's a string, and move this discussion to a new issue. Let's decide there, sounds good?

thorn0 · 2020-06-17T10:30:59Z

@fisker Good

fisker · 2020-06-17T11:10:37Z

#8582

fisker · 2020-06-18T01:04:34Z

@thorn0 You might want look into this #8465 (comment)

fisker added 6 commits May 26, 2020 09:29

Refactor printPreserveContent

528478a

Format Vue SFC root blocks

9597a18

Merge branch 'master' into vue-embed

1a71bd1

# Conflicts: # src/language-html/printer-html.js

embeddedLanguageFormatting: off

335807a

Fix empty textToDoc result

d95e472

Simplify

54a6ef2

fisker force-pushed the vue-embed branch from 80a75fe to 54a6ef2 Compare June 1, 2020 09:05

fisker added 2 commits June 1, 2020 17:10

Fix shouldPreserveContent

7e1d876

Comments

1fda282

fisker force-pushed the vue-embed branch from ac691a3 to 1fda282 Compare June 1, 2020 09:28

fisker added 2 commits June 1, 2020 17:39

Skip standalone test

4c3baf6

Add empty test

90d27ee

fisker mentioned this pull request Jun 1, 2020

Pug plugin doesn't work for the .vue files #6298

Closed

fisker added 2 commits June 1, 2020 19:25

Skip tests in jest.config.js

7402895

Move to element case

6991828

fisker force-pushed the vue-embed branch from 484942b to 6991828 Compare June 1, 2020 11:35

Fix comments

4147d3b

fisker marked this pull request as ready for review June 1, 2020 15:34

fisker requested a review from sosukesuzuki June 2, 2020 02:50

sosukesuzuki reviewed Jun 4, 2020

View reviewed changes

thorn0 reviewed Jun 4, 2020

View reviewed changes

Test on standalone

4ca5990

fisker commented Jun 4, 2020

View reviewed changes

Revert "Test on standalone"

cd6a80a

This reverts commit 4ca5990.

Shinigami92 mentioned this pull request Jun 4, 2020

Bug: Top Level tag should not be converted to piped text prettier/plugin-pug#97

Closed

Use htmlTrimPreserveIndentation

bebd2d1

Merge branch 'master' into vue-embed

fe7bb87

Use same logic as script

66ae6c2

sosukesuzuki approved these changes Jun 15, 2020

View reviewed changes

Add changelog

36c768b

fisker force-pushed the vue-embed branch from 6f7a3a5 to 36c768b Compare June 17, 2020 02:13

thorn0 approved these changes Jun 17, 2020

View reviewed changes

Remove \n

90544a8

fisker force-pushed the vue-embed branch from 4642f46 to 90544a8 Compare June 17, 2020 10:43

fisker merged commit 8999cc7 into prettier:master Jun 17, 2020

fisker deleted the vue-embed branch June 17, 2020 11:18

fisker mentioned this pull request Jun 17, 2020

Move final new line insertion to core #8582

Closed

fisker mentioned this pull request Jun 19, 2020

Improve multiparser handle finalNewLine and frontMatter #8595

Merged

1 task

Shinigami92 mentioned this pull request Jul 15, 2020

Any chance to get it work with vue single components? prettier/plugin-pug#5

Closed

github-actions bot locked as resolved and limited conversation to collaborators Jun 19, 2021

Uh oh!

Format Vue SFC root blocks #8465

Format Vue SFC root blocks #8465

Uh oh!

Conversation

fisker commented Jun 1, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Shinigami92 commented Jun 1, 2020

Uh oh!

Shinigami92 commented Jun 1, 2020

Uh oh!

sosukesuzuki left a comment

Choose a reason for hiding this comment

Uh oh!

fisker commented Jun 4, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Shinigami92 commented Jun 4, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fisker Jun 4, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Shinigami92 commented Jun 8, 2020

Uh oh!

fisker commented Jun 8, 2020

Uh oh!

Shinigami92 commented Jun 8, 2020

Uh oh!

fisker commented Jun 12, 2020

Uh oh!

sosukesuzuki left a comment

Choose a reason for hiding this comment

Uh oh!

thorn0 commented Jun 15, 2020

Uh oh!

fisker commented Jun 17, 2020

Uh oh!

fisker commented Jun 17, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Shinigami92 commented Jun 17, 2020

Uh oh!

fisker commented Jun 17, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thorn0 commented Jun 17, 2020

Uh oh!

fisker commented Jun 17, 2020

Uh oh!

thorn0 commented Jun 17, 2020

Uh oh!

fisker commented Jun 17, 2020

Uh oh!

fisker commented Jun 18, 2020

Uh oh!

Uh oh!

fisker commented Jun 1, 2020 •

edited

Loading

fisker commented Jun 4, 2020 •

edited

Loading

Shinigami92 commented Jun 4, 2020 •

edited

Loading

fisker Jun 4, 2020 •

edited

Loading

fisker commented Jun 17, 2020 •

edited

Loading

fisker commented Jun 17, 2020 •

edited

Loading