Vue: improve parsing custom blocks with `angular-html-parser@1.5.0` #8153

sosukesuzuki · 2020-04-25T06:44:02Z

<!-- Input -->
<custom lang="javascript">
const foo =    "</";
</custom>

<!-- Prettier stable -->
SyntaxError: Unexpected character """ (2:19)
[error]   1 | <custom lang="javascript">
[error] > 2 | const foo =    "</";
[error]     |                   ^
[error]   3 | </custom>

<!-- Prettier master -->
<custom lang="javascript">
const foo = "</";
</custom>

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✨

tests/html_vue/template-lang.vue

fisker · 2020-04-25T07:26:17Z

I think we support this before. stable

fisker · 2020-04-25T07:29:44Z

src/language-html/parser-html.js

@@ -288,6 +339,11 @@ module.exports = {
    vue: createParser({
      recognizeSelfClosing: true,
      isTagNameCaseSensitive: true,
+      getTagContentType: (tagname) => {
+        if (tagname !== "template") {


Suggested change

if (tagname !== "template") {

if (tagname.toLowerCase() !== "template") {

I'm not sure if this is necessary. I haven't seen template tag written with upper case. I also can't find any such mention in the specification or in the source code of the sfc-compiler.

sosukesuzuki · 2020-04-25T07:35:00Z

@fisker

I think we support this before. stable

Does it need to be supported by the vue parser? It is supported by the HTML parser(Playground), I think which is sufficient. (We don't have a vue parser tests for it.)

fisker · 2020-04-25T07:36:30Z

I don't know, but people can use --vue to parse .html to support v-if.

thorn0 · 2020-04-26T10:17:31Z

I'm not a Vue user, but the name of "single file components" implies that there are "multiple file components" that have their templates in separate files. I skimmed through the Vue docs, found some mentions of "in-DOM templates", but there doesn't seem to be a separate page about this.

sosukesuzuki · 2020-04-27T02:08:30Z

I forgot about directives. I cannot find about vue app written in only one html file in documentations, but the below code works fine. It would be good that Prettier support this. I'll fix.

<html>
  <body>
    <div id="example">
      <p v-if="hello === 'Hello World!'">{{ hello }}</p>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
        new Vue({
            el: '#example',
            data: { hello: 'Hello World!' }
        })
    </script>
  </body>
</html>

fisker · 2020-04-27T02:33:20Z

src/language-html/parser-html.js

@@ -340,7 +340,7 @@ module.exports = {
      recognizeSelfClosing: true,
      isTagNameCaseSensitive: true,
      getTagContentType: (tagname) => {
-        if (tagname !== "template") {
+        if (tagname !== "template" && tagname !== "html") {


I'm not sure about template, but I'm sure about html, it can be uppercase :)

stable prettier does not support it...(Playground). We should open new issue.

parser=vue

Input:

<!DOCTYPE html><HTML> <body> <div v-if="foo === 'foo'"> </div> <script> new Vue({el: '#app'}) </script> </body> </HTML>

Output:

<!DOCTYPE html >><HTML> <body> <div v-if="foo === 'foo'"> </div> <script> new Vue({el: '#app'}) </script> </body> </HTML>

I don't use angular, angular does not support it too

Playground

fisker · 2020-04-28T06:01:46Z

@sosukesuzuki NOOOO

sosukesuzuki · 2020-04-28T06:08:42Z

ooops, I'll fix..

fisker · 2020-04-28T12:09:54Z

@sosukesuzuki see prettier/angular-html-parser#11 (comment)

fisker · 2020-05-13T15:10:57Z

I saw the ci running, then I test those two links. thought it's my problem. The commits are missing on your fork too https://github.com/sosukesuzuki/prettier/commits/8106

thorn0 · 2020-05-13T15:16:14Z

I successfully fetched them from the fork. Looks like GitHub's UI is out of sync.

fisker · 2020-05-13T15:20:36Z

fisker · 2020-05-13T15:22:04Z

All issues addressed?

sosukesuzuki · 2020-05-13T15:39:06Z

Yes all issues were probably fixed. Can we merge this? Should I fix commits history?
(I've pushed these commits from the new machine so maybe something was wrong with my Git config. I'll look into this.)

fisker · 2020-05-13T15:42:48Z

I'm good.

fisker · 2020-05-13T15:52:56Z

I didn't bring this case here #8162 (comment), but you should know.

I try to throw SyntaxError in ~~#8280~~ #8281, but this PR keeps it as it is , I think it's better.

thorn0 · 2020-05-13T15:54:19Z

I reported this situation to GitHub. The commits still aren't visible on the UI. Not sure what happens if we do a merge.

BTW, a question on SO relevant to this PR: https://stackoverflow.com/q/61742084/76173

fisker · 2020-05-13T16:04:39Z

I use this script(and textarea) template before, for browsers don't support template. I don't think we should format it as html , if it can format as html why not put in a hidden <div>?

fisker · 2020-05-13T16:06:18Z

Try close and reopen ?

sosukesuzuki · 2020-05-13T16:18:56Z

src/language-html/parser-html.js

@@ -65,6 +141,7 @@ function ngHtmlParser(
    } else if (node instanceof Text) {
      node.type = "text";
    } else {
+      console.log(node);


oops, I'll remove this

thorn0 · 2020-05-13T16:22:48Z

@fisker Prettier formats script type="text/markdown". Why not format script type="text/html"?

sosukesuzuki · 2020-05-13T16:33:29Z

@fisker

I try to throw SyntaxError in ~~#8280~~ #8281, but this PR keeps it as it is , I think it's better.

I think so too but the behavior is happened by stable Prettier. So we can fix this in other PR.

sosukesuzuki · 2020-05-14T11:14:35Z

I think we should open new issues for #8153 (comment) and #8153 (comment) , should not fix in this PR.

fisker · 2020-05-14T11:44:30Z

src/language-html/parser-html.js

+      const getSameLocationNode = (node) => {
+        const result = getSecondParse();
+        return result.rootNodes.find((_node) => {
+          if (!_node || !_node.startSourceSpan) {
+            return false;
+          }
+          if (
+            node.startSourceSpan.start.offset ===
+            _node.startSourceSpan.start.offset
+          ) {
+            return true;
+          }
+          return false;
+        });
+      };


Suggested change

const getSameLocationNode = (node) => {

const result = getSecondParse();

return result.rootNodes.find((_node) => {

if (!_node || !_node.startSourceSpan) {

return false;

}

if (

node.startSourceSpan.start.offset ===

_node.startSourceSpan.start.offset

) {

return true;

}

return false;

});

};

const getSameLocationNode = (node) =>

getSecondParse().rootNodes.find(

({ startSourceSpan }) =>

startSourceSpan &&

startSourceSpan.start.offset === node.startSourceSpan.start.offset

);

node can't be false, right?

fisker · 2020-05-14T11:45:32Z

src/language-html/parser-html.js

+      const getSecondParse = () =>
+        secondParseResult
+          ? secondParseResult
+          : (secondParseResult = doSecondParse());


Suggested change

const getSecondParse = () =>

secondParseResult

? secondParseResult

: (secondParseResult = doSecondParse());

const getSecondParse = () =>

secondParseResult || (secondParseResult = doSecondParse());

fisker · 2020-05-14T11:47:45Z

src/language-html/parser-html.js

+          const replaceNode = getSameLocationNode(node);
+          if (replaceNode) {
+            rootNodes[i] = replaceNode;
+          }


Suggested change

const replaceNode = getSameLocationNode(node);

if (replaceNode) {

rootNodes[i] = replaceNode;

}

rootNodes[i] = getSameLocationNode(node) || rootNodes[i];

fisker · 2020-05-14T11:49:28Z

src/language-html/parser-html.js

+          tagName !== "html" &&
+          !hasParent &&
+          (tagName !== "template" ||
+            attrs.find((attr) => attr.name === "lang" && attr.value !== "html"))


Suggested change

attrs.find((attr) => attr.name === "lang" && attr.value !== "html"))

attrs.some(({name, value}) => name === "lang" && value !== "html"))

sosukesuzuki · 2020-05-14T13:53:38Z

@fisker Thank you for your review! I fixed all reviewed points.

fisker · 2020-05-14T14:09:07Z

Great job!

sosukesuzuki added 6 commits April 25, 2020 11:56

Parse twice for vue

d88b35d

Remove 'html' from vueRootElementsSet

c2c4ad5

Add link for Vue SFC spec

400ebfc

Modify to don't format pug code

2d971f8

Add changelog

3e7893d

Fix typo

16e1b21

fisker reviewed Apr 25, 2020

View reviewed changes

tests/html_vue/template-lang.vue Outdated Show resolved Hide resolved

sosukesuzuki marked this pull request as ready for review April 25, 2020 07:27

fisker reviewed Apr 25, 2020

View reviewed changes

fisker mentioned this pull request Apr 25, 2020

Vue: ugly formatting for one line template in Vue SFC #8151

Closed

Change lang, pug => unknown in tests

3e10f12

Support top-level html

9cbbb94

fisker reviewed Apr 27, 2020

View reviewed changes

sosukesuzuki requested review from thorn0 and fisker April 28, 2020 04:47

This comment has been minimized.

Sign in to view

fisker mentioned this pull request Apr 28, 2020

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

Closed

sosukesuzuki added 2 commits April 29, 2020 17:19

Fix multiple template formatting

1428941

Tiny fix

a36c3dd

fisker approved these changes May 13, 2020

View reviewed changes

sosukesuzuki commented May 13, 2020

View reviewed changes

fisker reviewed May 14, 2020

View reviewed changes

sosukesuzuki added 3 commits May 14, 2020 22:22

Fix reviewed points

2de7b2a

Merge branch 'master' into 8106

3807ffc

Fix by lint

4068f8d

fisker merged commit 531b7ca into prettier:master May 14, 2020

sosukesuzuki deleted the 8106 branch May 14, 2020 14:14

This was referenced May 16, 2020

Vue: Support Vue DOM template formatting #8326

Merged

Vue: Support X-Template style DOM template #8344

Closed

fisker mentioned this pull request May 25, 2020

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

Closed

github-actions bot locked as resolved and limited conversation to collaborators May 15, 2021

	if (tagname !== "template") {
	if (tagname.toLowerCase() !== "template") {

	attrs.find((attr) => attr.name === "lang" && attr.value !== "html"))
	attrs.some(({name, value}) => name === "lang" && value !== "html"))

Vue: improve parsing custom blocks with angular-html-parser@1.5.0 #8153

Vue: improve parsing custom blocks with angular-html-parser@1.5.0 #8153

Conversation

sosukesuzuki commented Apr 25, 2020 • edited by fisker

fisker commented Apr 25, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sosukesuzuki commented Apr 25, 2020

fisker commented Apr 25, 2020

thorn0 commented Apr 26, 2020

sosukesuzuki commented Apr 27, 2020

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

fisker commented Apr 28, 2020

sosukesuzuki commented Apr 28, 2020

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

fisker commented Apr 28, 2020

fisker commented May 13, 2020

thorn0 commented May 13, 2020 • edited

fisker commented May 13, 2020

fisker commented May 13, 2020

sosukesuzuki commented May 13, 2020

fisker commented May 13, 2020

fisker commented May 13, 2020 • edited

thorn0 commented May 13, 2020

fisker commented May 13, 2020

fisker commented May 13, 2020

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

thorn0 commented May 13, 2020

sosukesuzuki commented May 13, 2020

sosukesuzuki commented May 14, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fisker May 14, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sosukesuzuki commented May 14, 2020

fisker commented May 14, 2020

Vue: improve parsing custom blocks with `angular-html-parser@1.5.0` #8153

Vue: improve parsing custom blocks with `angular-html-parser@1.5.0` #8153

sosukesuzuki commented Apr 25, 2020 •

edited by fisker

fisker commented Apr 25, 2020 •

edited

thorn0 commented May 13, 2020 •

edited

fisker commented May 13, 2020 •

edited

fisker May 14, 2020 •

edited