Update syntax-decorators options (#7938)

* Add decoratorsBeforeExport to the syntax plugin
* Require legacy: true, like in the transform plugin

packages/babel-core/test/fixtures/option-manager/presets/es2015_default_function.js

@@ -12,6 +12,11 @@ Object.defineProperty(exports, "__esModule", {
 
 exports.default = function () {
   return {
-    plugins: [require('../../../../../babel-plugin-syntax-decorators')]
+    plugins: [
+      [
+        require('../../../../../babel-plugin-syntax-decorators'),
+        { legacy: true }
+      ],
+    ]
   };
 };

packages/babel-core/test/fixtures/option-manager/presets/es2015_default_object.js

@@ -9,6 +9,11 @@
 exports.__esModule = true;
 module.exports = function() {
   return {
-    plugins: [require('../../../../../babel-plugin-syntax-decorators')]
+    plugins: [
+      [
+        require('../../../../../babel-plugin-syntax-decorators'),
+        { legacy: true }
+      ],
+    ]
   };
 };

packages/babel-core/test/fixtures/option-manager/presets/es5_function.js

@@ -1,7 +1,10 @@
 module.exports = function () {
   return {
     plugins: [
-      require('../../../../../babel-plugin-syntax-decorators'),
+      [
+        require('../../../../../babel-plugin-syntax-decorators'),
+        { legacy: true }
+      ],
     ]
   };
 };

packages/babel-core/test/fixtures/option-manager/presets/es5_object.js

@@ -1,7 +1,10 @@
 module.exports = function() {
   return {
     plugins: [
-      require('../../../../../babel-plugin-syntax-decorators'),
+      [
+        require('../../../../../babel-plugin-syntax-decorators'),
+        { legacy: true }
+      ],
     ]
   };
 };

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

@@ -41,3 +41,20 @@ require("@babel/core").transform("code", {
 `boolean`, defaults to `false`.
 
 Use the legacy (stage 1) decorators syntax.
+
+### `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)

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

@@ -8,9 +8,35 @@ export default declare((api, options) => {
     throw new Error("'legacy' must be a boolean.");
   }
 
+  if (legacy !== true) {
+    throw new Error(
+      "The new decorators proposal is not supported yet." +
+        ' You must pass the `"legacy": true` option to' +
+        " @babel/plugin-syntax-decorators",
+    );
+  }
+
+  let { decoratorsBeforeExport } = 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.");
+    }
+  } else if (!legacy) {
+    decoratorsBeforeExport = true;
+  }
+
   return {
     manipulateOptions(opts, parserOpts) {
-      parserOpts.plugins.push(legacy ? "decorators-legacy" : "decorators");
+      parserOpts.plugins.push(
+        legacy
+          ? "decorators-legacy"
+          : ["decorators", { decoratorsBeforeExport }],
+      );
     },
   };
 });

packages/babel-plugin-syntax-decorators/test/index.js

@@ -0,0 +1,71 @@
+import { parse } from "@babel/core";
+import syntaxDecorators from "../lib";
+
+function makeParser(code, options) {
+  return () =>
+    parse(code, {
+      babelrc: false,
+      configFile: false,
+      plugins: [[syntaxDecorators, options]],
+    });
+}
+
+describe("'legacy' option", function() {
+  test("must be boolean", function() {
+    expect(makeParser("", { legacy: "legacy" })).toThrow();
+  });
+
+  test.skip("'legacy': false", function() {
+    expect(makeParser("({ @dec fn() {} })", { legacy: false })).toThrow();
+  });
+
+  test("'legacy': true", function() {
+    expect(makeParser("({ @dec fn() {} })", { legacy: true })).not.toThrow();
+  });
+
+  test.skip("defaults to 'false'", function() {
+    expect(makeParser("({ @dec fn() {} })", {})).toThrow();
+  });
+
+  test("it must be true", function() {
+    expect(makeParser("", { legacy: false })).toThrow();
+  });
+});
+
+describe("'decoratorsBeforeExport' option", function() {
+  test.skip("must be boolean", function() {
+    expect(makeParser("", { decoratorsBeforeExport: "before" })).toThrow();
+  });
+
+  test("is incompatible with legacy", function() {
+    expect(
+      makeParser("", { decoratorsBeforeExport: false, legacy: true }),
+    ).toThrow();
+  });
+
+  const BEFORE = "@dec export class Foo {}";
+  const AFTER = "export @dec class Foo {}";
+
+  // These are skipped
+  run(BEFORE, undefined, false);
+  run(AFTER, undefined, true);
+  run(BEFORE, true, false);
+  run(AFTER, true, true);
+  run(BEFORE, false, true);
+  run(AFTER, false, false);
+
+  function run(code, before, throws) {
+    const name =
+      (before === undefined ? "default" : before) +
+      " - decorators " +
+      (code === BEFORE ? "before" : "after") +
+      "export";
+
+    test.skip(name, function() {
+      const expectTheParser = expect(
+        makeParser(code, { decoratorsBeforeExport: before }),
+      );
+      throws ? expectTheParser.toThrow() : expectTheParser.not.toThrow();
+    });
+  }
+});