Add "decoratorsBeforeExport" option to @babel/generator (#7948)

* Add "decoratorsBeforeExport" option to @babel/generator

* Docs

packages/babel-generator/src/generators/classes.js

@@ -2,8 +2,9 @@ import * as t from "@babel/types";
 
 export function ClassDeclaration(node: Object, parent: Object) {
   if (
-    !t.isExportDefaultDeclaration(parent) &&
-    !t.isExportNamedDeclaration(parent)
+    !this.format.decoratorsBeforeExport ||
+    (!t.isExportDefaultDeclaration(parent) &&
+      !t.isExportNamedDeclaration(parent))
   ) {
     this.printJoin(node.decorators, node);
   }

packages/babel-generator/src/generators/modules.js

@@ -57,7 +57,10 @@ export function ExportAllDeclaration(node: Object) {
 }
 
 export function ExportNamedDeclaration(node: Object) {
-  if (t.isClassDeclaration(node.declaration)) {
+  if (
+    this.format.decoratorsBeforeExport &&
+    t.isClassDeclaration(node.declaration)
+  ) {
     this.printJoin(node.declaration.decorators, node);
   }
 
@@ -67,7 +70,10 @@ export function ExportNamedDeclaration(node: Object) {
 }
 
 export function ExportDefaultDeclaration(node: Object) {
-  if (t.isClassDeclaration(node.declaration)) {
+  if (
+    this.format.decoratorsBeforeExport &&
+    t.isClassDeclaration(node.declaration)
+  ) {
     this.printJoin(node.declaration.decorators, node);
   }
 

packages/babel-generator/src/index.js

@@ -52,6 +52,10 @@ function normalizeOptions(code, opts): Format {
       style: "  ",
       base: 0,
     },
+    decoratorsBeforeExport:
+      opts.decoratorsBeforeExport === undefined
+        ? true
+        : opts.decoratorsBeforeExport,
   };
 
   if (format.minified) {

packages/babel-generator/src/printer.js

@@ -25,6 +25,7 @@ export type Format = {
     style: string,
     base: number,
   },
+  decoratorsBeforeExport: boolean,
 };
 
 export default class Printer {

packages/babel-generator/test/fixtures/decoratorsBeforeExport/false-to-false/input.js

@@ -0,0 +1,3 @@
+export default @dec class Foo {}
+
+export @dec class Bar {}

packages/babel-generator/test/fixtures/decoratorsBeforeExport/false-to-false/options.json

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    ["decorators", { "decoratorsBeforeExport": false }]
+  ],
+  "decoratorsBeforeExport": false
+}

packages/babel-generator/test/fixtures/decoratorsBeforeExport/false-to-false/output.js

@@ -0,0 +1,4 @@
+export default @dec
+class Foo {}
+export @dec
+class Bar {}

packages/babel-generator/test/fixtures/decoratorsBeforeExport/false-to-true/input.js

@@ -0,0 +1,3 @@
+export default @dec class Foo {}
+
+export @dec class Bar {}

packages/babel-generator/test/fixtures/decoratorsBeforeExport/false-to-true/options.json

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    ["decorators", { "decoratorsBeforeExport": false }]
+  ],
+  "decoratorsBeforeExport": true
+}

packages/babel-generator/test/fixtures/decoratorsBeforeExport/false-to-true/output.js

@@ -0,0 +1,4 @@
+@dec
+export default class Foo {}
+@dec
+export class Bar {}

packages/babel-generator/test/fixtures/decoratorsBeforeExport/true-to-false/input.js

@@ -0,0 +1,5 @@
+@dec
+export default class Foo {}
+
+@dec
+export class Bar {}

packages/babel-generator/test/fixtures/decoratorsBeforeExport/true-to-false/options.json

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    ["decorators", { "decoratorsBeforeExport": true }]
+  ],
+  "decoratorsBeforeExport": false
+}

packages/babel-generator/test/fixtures/decoratorsBeforeExport/true-to-false/output.js

@@ -0,0 +1,4 @@
+export default @dec
+class Foo {}
+export @dec
+class Bar {}

packages/babel-generator/test/fixtures/decoratorsBeforeExport/true-to-true/input.js

@@ -0,0 +1,5 @@
+@dec
+export default class Foo {}
+
+@dec
+export class Bar {}

packages/babel-generator/test/fixtures/decoratorsBeforeExport/true-to-true/options.json

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    ["decorators", { "decoratorsBeforeExport": true }]
+  ],
+  "decoratorsBeforeExport": true
+}

packages/babel-generator/test/fixtures/decoratorsBeforeExport/true-to-true/output.js

@@ -0,0 +1,4 @@
+@dec
+export default class Foo {}
+@dec
+export class Bar {}

packages/babel-plugin-proposal-decorators/README.md

@@ -78,6 +78,23 @@ require("@babel/core").transform("code", {
 
 ## Options
 
+### `decoratorsBeforeExport`
+
+`boolean`, defaults to `true`.
+
+```js
+// decoratorsBeforeExport: true
+@decorator
+export class Foo {}
+
+// decoratorsBeforeExport: false
+export @decorator class Bar {}
+```
+
+This option was added to help tc39 collect feedback from the community by allowing experimentation with both possible syntaxes.
+
+For more information, check out: [tc39/proposal-decorators#69](https://github.com/tc39/proposal-decorators/issues/69).
+
 ### `legacy`
 
 `boolean`, defaults to `false`.

packages/babel-plugin-proposal-decorators/src/index.js

@@ -6,7 +6,7 @@ import legacyVisitor from "./transformer-legacy";
 export default declare((api, options) => {
   api.assertVersion(7);
 
-  const { legacy = false } = options;
+  const { legacy = false, decoratorsBeforeExport } = options;
   if (typeof legacy !== "boolean") {
     throw new Error("'legacy' must be a boolean.");
   }
@@ -19,9 +19,24 @@ export default declare((api, options) => {
     );
   }
 
+  if (decoratorsBeforeExport !== undefined) {
+    if (legacy) {
+      throw new Error(
+        "'decoratorsBeforeExport' can't be used with legacy decorators.",
+      );
+    }
+    if (typeof decoratorsBeforeExport !== "boolean") {
+      throw new Error("'decoratorsBeforeExport' must be a boolean.");
+    }
+  }
+
   return {
     inherits: syntaxDecorators,
 
+    manipulateOptions({ generatorOpts }) {
+      generatorOpts.decoratorsBeforeExport = decoratorsBeforeExport;
+    },
+
     visitor: legacy ? legacyVisitor : visitor,
   };
 });