Add support for the new decorators proposal #7976

nicolo-ribaudo · 2018-05-18T13:05:41Z

Repl: https://babeljs.io/repl/build/8579/ (need to turn on the stage-2 preset)

Repo: https://github.com/tc39/proposal-decorators

Q	A
Fixed Issues?	Closes #7542, closes #6107, fixes #7773
Patch: Bug Fix?
Major: Breaking Change?
Minor: New Feature?	🎉
Tests Added + Pass?	Yes
Documentation PR
Any Dependency Changes?
License	MIT

Support for private elements is still missing, but I will work on it after that this PR and #7842 are merged.

This PR should be merged after #7938 and #7948, since I will add some tests for them in this PR.

cc @littledan

Hi possible reviewers 🙂
Since this PR is quite big, it would be very helpful if you could review even just a part of it:

TODO:

Revert [REVERT BEFORE MERGING] commits

babel-bot · 2018-05-18T13:16:37Z

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/9044/

nicolo-ribaudo · 2018-05-22T15:58:10Z

packages/babel-plugin-proposal-decorators/package.json

-    "@babel/helper-plugin-test-runner": "7.0.0-beta.47"
+    "@babel/helper-plugin-test-runner": "7.0.0-beta.47",
+    "@babel/helper-replace-supers": "7.0.0-beta.47",
+    "@babel/helper-split-export-declaration": "7.0.0-beta.47"


Reminder to myself - this should be a dependency.

jsg2021 · 2018-06-01T15:32:04Z

packages/babel-preset-stage-2/src/index.js

@@ -37,7 +37,7 @@ export default declare((api, opts = {}) => {
  return {
    presets: [[presetStage3, { loose, useBuiltIns }]],
    plugins: [
-      [transformDecorators, { legacy: decoratorsLegacy }],
+      [transformDecorators, { legacy: decoratorsLegacy && false }],


this will prevent decoratorsLegacy from ever affecting the value. It will always be false?

Nope, it's just to test decorators in the REPL before that this PR is meged. That is why I labeled the commit as [REVERT BEFORE MERGING] 😛

oh, Ha... I didn't see the commit message :) sorry.

diervo · 2018-06-03T19:28:09Z

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

@@ -28,6 +21,8 @@ export default declare((api, options) => {
    if (typeof decoratorsBeforeExport !== "boolean") {
      throw new Error("'decoratorsBeforeExport' must be a boolean.");
    }
+  } else if (!legacy) {


I don't think we need to the option to toggle between before and after exports no more.
I believe there were very strong blocking arguments towards the exports before.

nicolo-ribaudo · 2018-06-06T11:53:42Z

I added some commits to make the helpers match 1:1 the spec text

littledan

This PR looks great. I don't see any non-trivial errors.

I haven't developed any sort of proper test plan, but you may want to add tests for finisher ordering and enumeration ordering of elements/extras.

littledan · 2018-06-25T10:18:08Z

...l-plugin-proposal-decorators/test/fixtures/element-descriptors/original-static-field/exec.js

+}
+
+expect(el).toEqual({
+  [Symbol.toStringTag]: "Field Descriptor",


This has changed--it's now "Descriptor". tc39/proposal-decorators#96 (ditto for Method Descriptor, etc)

littledan · 2018-07-05T09:39:36Z

packages/babel-helpers/src/helpers.js

@@ -1011,3 +1011,498 @@ helpers.classPrivateFieldSet = () => template.program.ast`
    return value;
  }
 `;
+
+// Don't review me, review babel-helpers/src/helpers/decorators.js :)


decorate.js?

littledan · 2018-07-05T09:59:29Z

packages/babel-helpers/src/helpers/decorate.js

+
+// This is exposed to the user code
+type ElementObjectInput = ElementDescriptor & {
+  [@@toStringTag]?: "Method Descriptor" | "Field Descriptor"


This has changed to just "Descriptor". Same for class descriptors. The change comes up in a few cases below.

littledan · 2018-07-05T10:01:08Z

packages/babel-helpers/src/helpers/decorate.js

+*/
+
+/*::
+// Various combinations with/without extras and with one or manu finishers


Nit: s/manu/many/

littledan · 2018-07-05T10:23:57Z

packages/babel-helpers/src/helpers/decorate.js

+  finishers /*: ClassFinisher[] */,
+) /*: Class<*> */ {
+  for (var i = 0; i < finishers.length; i++) {
+    var newConstructor /*: ?Class<*> */ = (0, finishers[i])(constructor);


I don't understand the purpose of 0, here--is this to avoid function name inference? I don't understand why that would occur. Ditto for a few other similar locations.

This erases the this by separating the [[Get]] from [[Call]]. If finishers[i](constructor) was directly invoked, the finisher would receive the finishers list as the this.

Ah, of course. Thanks for explaining.

littledan · 2018-07-05T19:19:43Z

packages/babel-helpers/src/helpers/decorate.js

+    if (elementsAndFinisher.elements !== undefined) {
+      elements = elementsAndFinisher.elements;
+
+      for (var j = 0; j < elements.length - 1; j++) {


Maybe a good idea to insert a TODO to check if there's a problem caused by this quadratic algorithm, though it seems fine to start.

How else could it be implemented? Creating a Set instead of the array wouldn't work because we need to check some properties on the obejcts, not the objects themselves.

There are only three possible placements, so I think you can implement this as three Sets of keys. (This could be organized as, an object which has a property for each placement, which is a Set.)

littledan · 2018-07-05T19:20:45Z

packages/babel-helpers/src/helpers/decorate.js

+      for (var j = 0; j < newExtras.length; j++) {
+        _addElementPlacement(newExtras[j], placements);
+      }
+      extras = extras.concat(newExtras);


Consider including a TODO to fix this quadratic algorithm (extras will repeatedly be copied).

littledan · 2018-07-05T19:22:01Z

packages/babel-helpers/src/helpers/decorate.js

+
+function _disallowProperty(obj, name) {
+  if (obj[name] !== undefined) {
+    throw new TypeError("Unexpected '" + name + "' property.");


A detailed error message here would be great (may mean that the function takes some extra arguments).

littledan · 2018-07-05T23:27:52Z

packages/babel-plugin-proposal-decorators/test/fixtures/ordering/decorators/exec.js

+  [push(13)]() {}
+}
+
+var numsFrom0to9 = Array.from({ length: 24 }, (_, i) => i);


Variable name?

littledan · 2018-07-05T23:28:11Z

packages/babel-plugin-proposal-decorators/test/fixtures/ordering/decorators/exec.js

+
+function push(x) { log.push(x); return x; }
+
+function logFinisher(a, b) {


This has to do with the execution of the decorator, not the finisher; consider renaming this test and adding other tests to check the ordering of finishers.

adding other tests to check the ordering of finishers

https://github.com/babel/babel/pull/7976/files/ce8a1818c9992377ed26767bd0336b20e6bd5318#diff-3a4ca738a2b3ce6ab485658c51556f68

nicolo-ribaudo · 2018-07-08T14:37:14Z

Thanks for the review Daniel, I will update the PR in the next few days.

hzoo · 2018-07-24T17:17:00Z

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

-    );
-  }
-
+  const { decoratorsBeforeExport } = options;


nit: do we want to just move this destructuring to line 9?

I prefer to keep it there alongside with the decoratorsBeforeExport validation.

hzoo · 2018-07-24T17:27:40Z

packages/babel-plugin-proposal-decorators/test/fixtures/duplicated-keys/options.json

@@ -0,0 +1,4 @@
+{
+  "plugins": ["proposal-decorators", "proposal-class-properties", "external-helpers"],
+  "presets": ["env"]


I think it's ok to not use env in these tests? What do you think?

hzoo

Awesome work! I think we can clean up the test a bit by not running the test of the env preset tho

Curious about sharing the helper functions in src/transformer.js like prop, value since it's probably in @babel/types but really not a big deal, can refactor that stuff later.

littledan

Thanks for fixing the initializer issue. I don't have any further concerns.

littledan · 2018-09-05T22:39:25Z

What is blocking this PR from landing?

jsg2021 · 2018-09-05T23:55:18Z

export placement? stage advancement?

nicolo-ribaudo · 2018-09-06T07:54:28Z

Actually nothing, but since this PR is quite big I'm waiting for more reviews.

pabloalmunia · 2018-09-06T14:28:15Z

I'm read the new code and look very well. Please, go a head with this important contribution ASAP.

@nicolo-ribaudo very good work, congratulations.

existentialism

👏 les do it!

loganfsmyth

Awesome work. I'm leaving some comments, but I don't think any of them are realistically blockers, so if you want to land this and address them in a second PR, that's 100% fine.

loganfsmyth · 2018-09-06T21:51:43Z

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

+    if (!legacy) {
+      throw new Error(
+        "The decorators plugin requires a 'decoratorsBeforeExport' option," +
+          " whose value must be a boolean.",


Can we mention legacy: true in here too so it is more discoverable?

loganfsmyth · 2018-09-06T21:54:22Z

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

+  return false;
+}
+
+function extractDecorators({ node }) {


nitpick: From a naming standpoint, takeDecorators might make it clearer that this also clears the decorators.

loganfsmyth · 2018-09-06T22:04:07Z

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

+  if (node.computed) {
+    return node.key;
+  } else {
+    return t.stringLiteral(node.key.name || String(node.key.value));


I think explicitness here can be a good thing, e.g.

if (node.computed) { return node.key; } else if (t.isIdentifier(node.key)) { return t.stringLiteral(node.key.name); } else { return t.stringLiteral(`${node.key.value}`); }

loganfsmyth · 2018-09-06T22:11:11Z

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

+}
+
+function getElementsDefinitions(path, fId, file) {
+  const superRef = path.node.superClass || t.identifier("Function");


Is Function here right? It looks like ReplaceSupers already defaults to Function.prototype when there is no super class. Is that not right?

loganfsmyth · 2018-09-06T22:13:28Z

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

+}
+
+function value(body, params = []) {
+  return t.objectMethod("method", t.identifier("value"), params, body);


How do you feel about generating an object method vs a property containing a function expression here? I usually prefer to generate ES5 code, but what you have is also fine.

I think that ES5 was a good target for ES2015/ES2016 transforms, but now we can output ES6 since users will either only support browsers which support ES6 or compile it down with preset-env.

We still have to be careful with helpers, they still have to be as ES3-compatible as possible; but generated output should be safe to use the latest ES20xx syntax that was current before it is made stage-4 I think.

loganfsmyth · 2018-09-06T22:33:16Z

packages/babel-plugin-proposal-decorators/test/fixtures/transformation/extends-await/output.js

+      F: A,
+      d: []
+    };
+  }, (await B));


That's a fun edge case. Do we need to worry about

@dec class Foo { [await prop()](){} }

and

class Foo { @(await thing()) method(){} }

too?

Might at least be good to explicitly throw an error about that being unsupported. Same for yield.

Those look like perfectly valid syntax to me (inside an async function) 🤔

Or does being inside a class override the +async?

It's tracked at #8300. I will add a nice error message.

@Kovensky It's just very hard to support (we don't support it in computer keys either), I will revisit it in another PR.

Ah, a problem with our generated function wrapper...

loganfsmyth · 2018-09-06T22:42:11Z

packages/babel-helpers/src/helpers.js

+    superClass /*: ?Class<*> */,
+  ) /*: Class<*> */ {
+    var r = factory(function initialize(O) {
+      _initializeInstanceElements(O, decorated.elements);


I'm trying to think, is it possible for this to get called before decorated is initialized? Something would have to call new on the class, which may not be possible?

Yeah, it isn't possible because the class can't be new-ed before being returned by the factory function.

loganfsmyth · 2018-09-06T22:43:23Z

packages/babel-helpers/src/helpers.js

+
+  // ClassDefinitionEvaluation (Steps 26-*)
+  export default function _decorate(
+    decorators /*: ClassDecorator[] */,


Loving the type annotations by the way, thanks for doing that :D

With #8487 we could probably even type-check them 😛

loganfsmyth · 2018-09-06T22:55:35Z

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

+  insertInitializeInstanceElements(path, initializeId);
+
+  const expr = template.expression.ast`
+      ${file.addHelper("decorate")}(


It might be nice for users to wrap a try/catch here to give users more feedback, e.g.

function addDecorateHelper(file) { try { return file.addHelper("decorate"); } catch (err) { if (err.code === "BABEL_HELPER_UNKNOWN") { err.message += "\n @babel/plugin-transform-decorators in non-legacy mode requires @babel/core version ^7.0.1 and you appear to be using an older version"; } throw err; } }

loganfsmyth · 2018-09-06T23:01:42Z

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

+      ${file.addHelper("decorate")}(
+        ${classDecorators || t.nullLiteral()},
+        function (${initializeId}, ${superClass ? superId : null}) {
+          ${isStrict ? null : t.stringLiteral("use strict")}


This isn't quite the right structure unfortunately, because use strict should be a t.directive, and also because this will insert it into body instead of the directives array. I don't think there's an easy way to create an optional directive with babel-templates at the moment unfortunately. I think we'd have to inject it manually after the template AST is created.

pabloalmunia · 2018-09-18T22:45:43Z

This message is displayed when 'decoratorsBeforeExport' isn't include:

"The decorators plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean. If you want to use the legacy decorators semantics, you can set the 'legacy: true' option."

But the documentation say 'decoratorsBeforeExport: boolean, defaults to false.'

jsg2021 · 2018-09-18T23:35:18Z

I think the docs are wrong. You have to choose a value. The proposed spec hasn’t settled the placement yet.

nicolo-ribaudo added PR: New Feature 🚀 A type of pull request used for our changelog categories Spec: Decorators labels May 18, 2018

nicolo-ribaudo mentioned this pull request May 18, 2018

Update syntax-decorators options #7938

Merged

1 task

nicolo-ribaudo commented May 22, 2018

View reviewed changes

benjamn mentioned this pull request May 24, 2018

Preserve arguments for @callable(...)-style decorators. #8021

Closed

nicolo-ribaudo force-pushed the decorators-transform branch from f6239a6 to 2026871 Compare May 30, 2018 20:51

jsg2021 reviewed Jun 1, 2018

View reviewed changes

nicolo-ribaudo force-pushed the decorators-transform branch from ba46a74 to 8b45686 Compare June 2, 2018 11:16

nicolo-ribaudo added the PR: Needs Review A pull request awaiting more approvals label Jun 2, 2018

babel-bot mentioned this pull request Jun 3, 2018

Decorators (Stage 2) babel/proposals#11

Open

2 tasks

This was referenced Jun 3, 2018

Decorators #7542

Closed

Decorators 2 Transform [WIP] #6107

Closed

nicolo-ribaudo added the Priority: High label Jun 3, 2018

diervo reviewed Jun 3, 2018

View reviewed changes

nicolo-ribaudo mentioned this pull request Jun 4, 2018

Change decoratorsBeforeExport default to false #8113

Merged

nicolo-ribaudo force-pushed the decorators-transform branch from 9e25568 to 6dd4a0f Compare June 4, 2018 20:17

nicolo-ribaudo requested review from jridgewell, loganfsmyth, littledan and diervo June 10, 2018 22:12

nicolo-ribaudo mentioned this pull request Jul 1, 2018

[WIP] Add support for decorators with private properties #8248

Closed

nicolo-ribaudo force-pushed the decorators-transform branch 2 times, most recently from f30514b to ce8a181 Compare July 3, 2018 21:05

nicolo-ribaudo mentioned this pull request Jul 3, 2018

Fix class properties tdz decorator interop #7475

Closed

littledan reviewed Jul 5, 2018

View reviewed changes

xtuc closed this Jul 6, 2018

xtuc reopened this Jul 6, 2018

hzoo reviewed Jul 24, 2018

View reviewed changes

hzoo approved these changes Jul 24, 2018

View reviewed changes

This was referenced Jul 27, 2018

Refactor back to decorators corpusculejs/corpuscule#4

Closed

Refactor to decorators corpusculejs/corpuscule#6

Merged

nicolo-ribaudo force-pushed the decorators-transform branch from b66722a to ba7d327 Compare August 17, 2018 13:38

littledan approved these changes Aug 23, 2018

View reviewed changes

kelset mentioned this pull request Aug 28, 2018

Bundle failure on decorators facebook/react-native#19955

Closed

3 tasks

nicolo-ribaudo mentioned this pull request Aug 30, 2018

Parser decorators plugin option decoratorsBeforeExport no longer defaulting #8562

Closed

existentialism approved these changes Sep 6, 2018

View reviewed changes

Add support for the new decorators proposal

b304993

nicolo-ribaudo force-pushed the decorators-transform branch from ba7d327 to b304993 Compare September 6, 2018 21:01

loganfsmyth approved these changes Sep 6, 2018

View reviewed changes

Logan's review

33ac9a2

nicolo-ribaudo merged commit 9aec4ad into babel:master Sep 7, 2018

nicolo-ribaudo deleted the decorators-transform branch September 7, 2018 13:58

This was referenced Sep 18, 2018

Update 2 dependencies from npm JetBrains/ring-ui#412

Merged

Update 4 dependencies from npm JetBrains/ring-ui#413

Merged

mweststrate mentioned this pull request Sep 24, 2018

Using a decorator breaks the enumerability of non-decorated fields #8760

Closed

This was referenced Sep 24, 2018

Update @babel/core in / from 7.0.0-beta.32 to 7.1.0 sarhan-azizov/Babel#32

Open

Update @babel/preset-env in / from 7.0.0-beta.32 to 7.1.0 sarhan-azizov/Babel#33

Open

dependencies bot mentioned this pull request Oct 1, 2018

Update @babel/preset-env in /modules/frontend from 7.0.0-beta.42 to 7.1.0 project-accelerate/accelerate#248

Open

lock bot added the outdated A closed issue/PR that is archived due to age. Recommended to make a new issue label Oct 4, 2019

lock bot locked as resolved and limited conversation to collaborators Oct 4, 2019


		function push(x) { log.push(x); return x; }

		function logFinisher(a, b) {

Add support for the new decorators proposal #7976

Add support for the new decorators proposal #7976

Conversation

nicolo-ribaudo commented May 18, 2018 • edited

babel-bot commented May 18, 2018 • edited

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

diervo Jun 3, 2018 • edited

Choose a reason for hiding this comment

nicolo-ribaudo commented Jun 6, 2018

littledan left a 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jessidhia Jul 6, 2018 • edited

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

littledan Jul 11, 2018 • edited

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

Choose a reason for hiding this comment

nicolo-ribaudo commented Jul 8, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hzoo left a comment

Choose a reason for hiding this comment

littledan left a comment

Choose a reason for hiding this comment

littledan commented Sep 5, 2018

jsg2021 commented Sep 5, 2018

nicolo-ribaudo commented Sep 6, 2018

pabloalmunia commented Sep 6, 2018

existentialism left a comment

Choose a reason for hiding this comment

loganfsmyth left a 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jessidhia Sep 7, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nicolo-ribaudo Sep 7, 2018 • edited

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pabloalmunia commented Sep 18, 2018

jsg2021 commented Sep 18, 2018

nicolo-ribaudo commented May 18, 2018 •

edited

babel-bot commented May 18, 2018 •

edited

diervo Jun 3, 2018 •

edited

Jessidhia Jul 6, 2018 •

edited

littledan Jul 11, 2018 •

edited

Jessidhia Sep 7, 2018 •

edited

nicolo-ribaudo Sep 7, 2018 •

edited