Babel: support moduleAttributes (#8436)

changelog_unreleased/javascript/pr-8436.md

@@ -0,0 +1,17 @@
+#### Support ES Module Attributes and JSON modules ([#8436](https://github.com/prettier/prettier/pull/8436) by [@fisker](https://github.com/fisker))
+
+Support Stage-1 proposal [ES Module Attributes and JSON modules](https://github.com/tc39/proposal-module-attributes).
+
+<!-- prettier-ignore -->
+```js
+// Input
+import foo from "foo.json" with type: "json";
+
+// Prettier stable
+SyntaxError: Unexpected token, expected ";" (1:28)
+> 1 | import foo from "foo.json" with type: "json";
+    |                            ^
+
+// Prettier master
+import foo from "foo.json" with type: "json";
+```

src/language-js/parser-babel.js

@@ -31,8 +31,9 @@ function babelOptions({ sourceType, extraPlugins = [] }) {
       "classPrivateMethods",
       "v8intrinsic",
       "partialApplication",
-      "privateIn",
       ["decorators", { decoratorsBeforeExport: false }],
+      "privateIn",
+      ["moduleAttributes", { version: "may-2020" }],
       ...extraPlugins,
     ],
   };
@@ -129,7 +130,16 @@ function rethrowSomeRecoveredErrors(ast) {
     for (const error of ast.errors) {
       if (
         typeof error.message === "string" &&
-        error.message.startsWith("Did not expect a type annotation here.")
+        (error.message.startsWith(
+          // UnexpectedTypeAnnotation
+          // https://github.com/babel/babel/blob/2f31ecf85d85cb100fa08d4d9a09de0fe4a117e4/packages/babel-parser/src/plugins/typescript/index.js#L88
+          "Did not expect a type annotation here."
+        ) ||
+          error.message.startsWith(
+            // ModuleAttributeDifferentFromType
+            // https://github.com/babel/babel/blob/bda759ac3dce548f021ca24e9182b6e6f7c218e3/packages/babel-parser/src/parser/location.js#L99
+            "The only accepted module attribute is `type`"
+          ))
       ) {
         throw error;
       }

src/language-js/printer-estree.js

@@ -1022,11 +1022,16 @@ function printPathNoParens(path, options, print, args) {
         parts.push(" ", path.call(print, "source"));
       }
 
+      if (Array.isArray(n.attributes) && n.attributes.length !== 0) {
+        parts.push(" with ", concat(path.map(print, "attributes")));
+      }
+
       parts.push(semi);
 
       return concat(parts);
     }
-
+    case "ImportAttribute":
+      return concat([path.call(print, "key"), ": ", path.call(print, "value")]);
     case "Import":
       return "import";
     case "TSModuleBlock":

tests/html/script/__snapshots__/jsfmt.spec.js.snap

@@ -117,6 +117,20 @@ async function foo() {
 ================================================================================
 `;
 
+exports[`module-attributes.html format 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script src="foo.wasm" type="module" withtype="webassembly"></script>
+
+=====================================output=====================================
+<script src="foo.wasm" type="module" withtype="webassembly"></script>
+
+================================================================================
+`;
+
 exports[`script.html format 1`] = `
 ====================================options=====================================
 parsers: ["html"]

tests/html/script/module-attributes.html

@@ -0,0 +1 @@
+<script src="foo.wasm" type="module" withtype="webassembly"></script>

tests/js/babel-plugins/__snapshots__/jsfmt.spec.js.snap

@@ -720,6 +720,34 @@ obj.a.b &&= c;
 ================================================================================
 `;
 
+exports[`module-attributes-dynamic.js format 1`] = `
+====================================options=====================================
+parsers: ["babel", "babel-ts", "babel-flow"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+import("foo.json", { with: { type: "json" } })
+
+=====================================output=====================================
+import("foo.json", { with: { type: "json" } });
+
+================================================================================
+`;
+
+exports[`module-attributes-static.js format 1`] = `
+====================================options=====================================
+parsers: ["babel", "babel-ts", "babel-flow"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+import foo from "foo.json" with type: "json";
+
+=====================================output=====================================
+import foo from "foo.json" with type: "json";
+
+================================================================================
+`;
+
 exports[`nullish-coalescing-operator.js format 1`] = `
 ====================================options=====================================
 parsers: ["babel", "babel-ts", "babel-flow"]

tests/js/babel-plugins/module-attributes-dynamic.js

@@ -0,0 +1 @@
+import("foo.json", { with: { type: "json" } })

tests/js/babel-plugins/module-attributes-static.js

@@ -0,0 +1 @@
+import foo from "foo.json" with type: "json";

tests/js/module-attributes/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`module-attributes-dynamic.js format 1`] = `
+====================================options=====================================
+parsers: ["babel"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+import("foo.json", { with: { type: "json" } })
+
+=====================================output=====================================
+import("foo.json", { with: { type: "json" } });
+
+================================================================================
+`;
+
+exports[`module-attributes-static.js format 1`] = `
+====================================options=====================================
+parsers: ["babel"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+import foo from "foo.json" with type: "json";
+
+=====================================output=====================================
+import foo from "foo.json" with type: "json";
+
+================================================================================
+`;

tests/js/module-attributes/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, ["babel"]);

tests/js/module-attributes/module-attributes-dynamic.js

@@ -0,0 +1 @@
+import("foo.json", { with: { type: "json" } })

tests/js/module-attributes/module-attributes-static.js

@@ -0,0 +1 @@
+import foo from "foo.json" with type: "json";

tests/misc/errors/flow/__snapshots__/jsfmt.spec.js.snap

@@ -6,3 +6,17 @@ exports[`dynamic-import.js error test 1`] = `
     |                        ^
   2 | "
 `;
+
+exports[`module-attributes-dynamic.js error test 1`] = `
+"Unexpected token \`,\`, expected the token \`)\` (1:18)
+> 1 | import(\\"foo.json\\", { with: { type: \\"json\\" } })
+    |                  ^
+  2 | "
+`;
+
+exports[`module-attributes-static.js error test 1`] = `
+"Unexpected token \`with\`, expected the token \`;\` (1:28)
+> 1 | import foo from \\"foo.json\\" with type: \\"json\\";
+    |                            ^^^^
+  2 | "
+`;

tests/misc/errors/flow/module-attributes-dynamic.js

@@ -0,0 +1 @@
+import("foo.json", { with: { type: "json" } })

tests/misc/errors/flow/module-attributes-static.js

@@ -0,0 +1 @@
+import foo from "foo.json" with type: "json";

tests/misc/errors/js/__snapshots__/jsfmt.spec.js.snap

@@ -11,6 +11,13 @@ exports[`html-like-comments.js error test 1`] = `
   6 | "
 `;
 
+exports[`module-attributes.js error test 1`] = `
+"The only accepted module attribute is \`type\` (1:33)
+> 1 | import foo from \\"foo.json\\" with foo: \\"json\\";
+    |                                 ^
+  2 | "
+`;
+
 exports[`partial-template-strings.js error test 1`] = `
 "Unexpected token (6:42)
   4 | 

tests/misc/errors/js/module-attributes.js

@@ -0,0 +1 @@
+import foo from "foo.json" with foo: "json";

tests/misc/errors/typescript/__snapshots__/jsfmt.spec.js.snap

@@ -16,6 +16,20 @@ exports[`invalid-jsx-1.ts error test 1`] = `
   4 | "
 `;
 
+exports[`module-attributes-dynamic.ts error test 1`] = `
+"Dynamic import must have one specifier as an argument. (1:8)
+> 1 | import(\\"foo.json\\", { with: { type: \\"json\\" } })
+    |        ^
+  2 | "
+`;
+
+exports[`module-attributes-static.ts error test 1`] = `
+"';' expected. (1:28)
+> 1 | import foo from \\"foo.json\\" with type: \\"json\\";
+    |                            ^
+  2 | "
+`;
+
 exports[`snippet: #0 error test 1`] = `
 "Unexpected token. Did you mean \`{'}'}\` or \`}\`? (1:15)
 > 1 | let x1 = <div>}</div>;

tests/misc/errors/typescript/module-attributes-dynamic.ts

@@ -0,0 +1 @@
+import("foo.json", { with: { type: "json" } })

tests/misc/errors/typescript/module-attributes-static.ts

@@ -0,0 +1 @@
+import foo from "foo.json" with type: "json";