Support babel data-type="module" (#8394)

* Support babel `data-type="module"` * Update changelog
prettier · May 25, 2020 · 3606c2e · 3606c2e
1 parent 82a3198
commit 3606c2e
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 16 deletions.
diff --git a/changelog_unreleased/html/pr-8173.md b/changelog_unreleased/html/pr-8173.md
@@ -1,4 +1,9 @@
-#### Support legacy HTML-like comments script blocks ([#8173](https://github.com/prettier/prettier/pull/8173) by [@fisker](https://github.com/fisker))
+#### Support legacy HTML-like comments script blocks ([#8173](https://github.com/prettier/prettier/pull/8173) by [@fisker](https://github.com/fisker), [#8394](https://github.com/prettier/prettier/pull/8394) by [@fisker](https://github.com/fisker))
+
+Previously we parse html `<script>` blocks as "module"([ECMAScript Module grammar](https://babeljs.io/docs/en/options#sourcetype)), this is why we can't parse comments starts with `<!--`(aka [HTML-like comments](https://tc39.es/ecma262/#sec-html-like-comments)), now we parse `<script>` blocks as "script", unless this `<script>`
+
+1. `type="module"`
+2. `type="text/babel"` and `data-type="module"`, [will be introduced in babel@v7.10.0](https://github.com/babel/babel/pull/11466)
 
 <!-- prettier-ignore -->
 ```html
@@ -10,7 +15,7 @@ alert("hello" +    ' world!')
 
 <!-- Prettier stable -->
 SyntaxError: Unexpected token (2:1)
-  1 | 
+  1 |
 > 2 | <!--
     | ^
   3 | alert("hello" +    ' world!')

diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
@@ -72,24 +72,25 @@ function embed(path, print, textToDoc, options) {
             parser === "markdown"
               ? dedentString(node.value.replace(/^[^\S\n]*?\n/, ""))
               : node.value;
+          const textToDocOptions = { parser };
+          if (options.parser === "html" && parser === "babel") {
+            let sourceType = "script";
+            const { attrMap } = node.parent;
+            if (
+              attrMap &&
+              (attrMap.type === "module" ||
+                (attrMap.type === "text/babel" &&
+                  attrMap["data-type"] === "module"))
+            ) {
+              sourceType = "module";
+            }
+            textToDocOptions.__babelSourceType = sourceType;
+          }
           return builders.concat([
             concat([
               breakParent,
               printOpeningTagPrefix(node, options),
-              stripTrailingHardline(
-                textToDoc(
-                  value,
-                  options.parser === "html" && parser === "babel"
-                    ? {
-                        parser,
-                        __babelSourceType:
-                          node.attrMap && node.attrMap.type === "module"
-                            ? "module"
-                            : "script",
-                      }
-                    : { parser }
-                )
-              ),
+              stripTrailingHardline(textToDoc(value, textToDocOptions)),
               printClosingTagSuffix(node, options),
             ]),
           ]);

diff --git a/tests/html/script/__snapshots__/jsfmt.spec.js.snap b/tests/html/script/__snapshots__/jsfmt.spec.js.snap
@@ -1,5 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`babel.html format 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script type="text/babel" data-presets="react" data-type="module">
+import { h, 
+         render } from 'https://unpkg.com/preact?module';
+render(
+<h1>Hello World!</h1>,
+         document.body
+);
+</script>
+
+<script type="text/babel">
+<!--
+alert(1)
+-->
+</script>
+
+=====================================output=====================================
+<script type="text/babel" data-presets="react" data-type="module">
+  import { h, render } from "https://unpkg.com/preact?module";
+  render(<h1>Hello World!</h1>, document.body);
+</script>
+
+<script type="text/babel">
+  <!--
+  alert(1);
+  -->
+</script>
+
+================================================================================
+`;
+
 exports[`legacy.html format 1`] = `
 ====================================options=====================================
 parsers: ["html"]

diff --git a/tests/html/script/babel.html b/tests/html/script/babel.html
@@ -0,0 +1,14 @@
+<script type="text/babel" data-presets="react" data-type="module">
+import { h, 
+         render } from 'https://unpkg.com/preact?module';
+render(
+<h1>Hello World!</h1>,
+         document.body
+);
+</script>
+
+<script type="text/babel">
+<!--
+alert(1)
+-->
+</script>