Fix 2021-12 decorators application order

packages/babel-plugin-proposal-decorators/src/transformer-2021-12.ts

@@ -1,4 +1,4 @@
-import type { NodePath } from "@babel/traverse";
+import type { NodePath, Scope } from "@babel/traverse";
 import { types as t, template } from "@babel/core";
 import syntaxDecorators from "@babel/plugin-syntax-decorators";
 import ReplaceSupers from "@babel/helper-replace-supers";
@@ -506,13 +506,20 @@ function transformClass(
   let constructorPath: NodePath<t.ClassMethod> | undefined;
   let requiresProtoInit = false;
   let requiresStaticInit = false;
-  let hasComputedProps = false;
   const decoratedPrivateMethods = new Set<string>();
 
   let protoInitLocal: t.Identifier,
     staticInitLocal: t.Identifier,
     classInitLocal: t.Identifier,
     classLocal: t.Identifier;
+  const assignments: t.AssignmentExpression[] = [];
+  const scopeParent: Scope = path.scope.parent;
+
+  const memoiseExpression = (expression: t.Expression, hint: string) => {
+    const localEvaluatedId = scopeParent.generateDeclaredUidIdentifier(hint);
+    assignments.push(t.assignmentExpression("=", localEvaluatedId, expression));
+    return t.cloneNode(localEvaluatedId);
+  };
 
   if (classDecorators) {
     classInitLocal =
@@ -523,6 +530,15 @@ function transformClass(
     classLocal = localId;
 
     path.node.decorators = null;
+
+    for (const classDecorator of classDecorators) {
+      if (!scopeParent.isStatic(classDecorator.expression)) {
+        classDecorator.expression = memoiseExpression(
+          classDecorator.expression,
+          "dec",
+        );
+      }
+    }
   } else {
     if (!path.node.id) {
       path.node.id = path.scope.generateUidIdentifier("Class");
@@ -536,43 +552,50 @@ function transformClass(
         continue;
       }
 
-      let { key } = element.node;
-      const kind = getElementKind(element);
+      const { node } = element;
       const decorators = element.get("decorators");
 
-      const isPrivate = key.type === "PrivateName";
+      const hasDecorators = Array.isArray(decorators) && decorators.length > 0;
+
+      if (hasDecorators) {
+        for (const decoratorPath of decorators) {
+          if (!scopeParent.isStatic(decoratorPath.node.expression)) {
+            decoratorPath.node.expression = memoiseExpression(
+              decoratorPath.node.expression,
+              "dec",
+            );
+          }
+        }
+      }
+
       const isComputed =
         "computed" in element.node && element.node.computed === true;
+      if (isComputed) {
+        if (!scopeParent.isStatic(node.key)) {
+          node.key = memoiseExpression(node.key as t.Expression, "computedKey");
+        }
+      }
+
+      const kind = getElementKind(element);
+      const { key } = node;
+
+      const isPrivate = key.type === "PrivateName";
+
       const isStatic = !!element.node.static;
 
       let name = "computedKey";
 
       if (isPrivate) {
         name = (key as t.PrivateName).id.name;
-      } else if (key.type === "Identifier") {
+      } else if (!isComputed && key.type === "Identifier") {
         name = key.name;
       }
 
       if (element.isClassMethod({ kind: "constructor" })) {
         constructorPath = element;
       }
 
-      if (isComputed) {
-        const keyPath = element.get("key");
-        const localComputedNameId =
-          keyPath.scope.parent.generateDeclaredUidIdentifier(name);
-        keyPath.replaceWith(localComputedNameId);
-
-        elementDecoratorInfo.push({
-          localComputedNameId: t.cloneNode(localComputedNameId),
-          keyNode: t.cloneNode(key as t.Expression),
-        });
-
-        key = localComputedNameId;
-        hasComputedProps = true;
-      }
-
-      if (Array.isArray(decorators) && decorators.length > 0) {
+      if (hasDecorators) {
         let locals: t.Identifier | t.Identifier[];
         let privateMethods: t.FunctionExpression | t.FunctionExpression[];
 
@@ -730,33 +753,7 @@ function transformClass(
     }
   }
 
-  if (hasComputedProps) {
-    const assignments: t.AssignmentExpression[] = [];
-
-    for (const info of elementDecoratorInfo) {
-      if (isDecoratorInfo(info)) {
-        const { decorators } = info;
-        const newDecorators: t.Identifier[] = [];
-
-        for (const decorator of decorators) {
-          const localComputedNameId =
-            path.scope.parent.generateDeclaredUidIdentifier("dec");
-          assignments.push(
-            t.assignmentExpression("=", localComputedNameId, decorator),
-          );
-          newDecorators.push(t.cloneNode(localComputedNameId));
-        }
-
-        info.decorators = newDecorators;
-      } else {
-        assignments.push(
-          t.assignmentExpression("=", info.localComputedNameId, info.keyNode),
-        );
-      }
-    }
-
-    path.insertBefore(assignments);
-  }
+  path.insertBefore(assignments);
 
   const elementDecorations = generateDecorationExprs(elementDecoratorInfo);
   const classDecorations = t.arrayExpression(

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors--to-es2015/private/input.js

@@ -1,3 +1,4 @@
+const dec = () => {}; 
 class Foo {
   @dec
   accessor #a;

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors--to-es2015/private/output.js

@@ -1,5 +1,7 @@
 var _init_a, _get_a, _set_a, _init_b, _get_b, _set_b, _initProto;
 
+const dec = () => {};
+
 var _A = /*#__PURE__*/new WeakMap();
 
 var _a = /*#__PURE__*/new WeakMap();

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors--to-es2015/public/input.js

@@ -1,3 +1,4 @@
+const dec = () => {}; 
 class Foo {
   @dec
   accessor a;

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors--to-es2015/public/output.js

@@ -1,9 +1,8 @@
-var _init_a, _init_b, _computedKey, _init_computedKey, _dec, _dec2, _dec3, _initProto;
+var _init_a, _init_b, _computedKey, _init_computedKey, _initProto;
+
+const dec = () => {};
 
-_dec = dec
-_dec2 = dec
 _computedKey = 'c'
-_dec3 = dec
 
 var _A = /*#__PURE__*/new WeakMap();
 
@@ -54,5 +53,5 @@ class Foo {
 }
 
 (() => {
-  [_init_a, _init_b, _init_computedKey, _initProto] = babelHelpers.applyDecs(Foo, [[_dec, 1, "a"], [_dec2, 1, "b"], [_dec3, 1, _computedKey]], []);
+  [_init_a, _init_b, _init_computedKey, _initProto] = babelHelpers.applyDecs(Foo, [[dec, 1, "a"], [dec, 1, "b"], [dec, 1, _computedKey]], []);
 })();

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors--to-es2015/static-private/input.js

@@ -1,3 +1,4 @@
+const dec = () => {}; 
 class Foo {
   @dec
   static accessor #a;

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors--to-es2015/static-private/output.js

@@ -1,5 +1,7 @@
 var _init_a, _get_a, _set_a, _init_b, _get_b, _set_b, _initStatic;
 
+const dec = () => {};
+
 var _a = /*#__PURE__*/new WeakMap();
 
 var _b = /*#__PURE__*/new WeakMap();

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors--to-es2015/static-public/input.js

@@ -1,3 +1,4 @@
+const dec = () => {}; 
 class Foo {
   @dec
   static accessor a;

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors--to-es2015/static-public/output.js

@@ -1,9 +1,8 @@
-var _init_a, _init_b, _computedKey, _init_computedKey, _dec, _dec2, _dec3, _initStatic;
+var _init_a, _init_b, _computedKey, _init_computedKey, _initStatic;
+
+const dec = () => {};
 
-_dec = dec
-_dec2 = dec
 _computedKey = 'c'
-_dec3 = dec
 
 class Foo {
   static get a() {
@@ -33,7 +32,7 @@ class Foo {
 }
 
 (() => {
-  [_init_a, _init_b, _init_computedKey, _initStatic] = babelHelpers.applyDecs(Foo, [[_dec, 6, "a"], [_dec2, 6, "b"], [_dec3, 6, _computedKey]], []);
+  [_init_a, _init_b, _init_computedKey, _initStatic] = babelHelpers.applyDecs(Foo, [[dec, 6, "a"], [dec, 6, "b"], [dec, 6, _computedKey]], []);
 
   _initStatic(Foo);
 })();

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors--to-es2015/undecorated-private/input.js

@@ -1,3 +1,4 @@
+const dec = () => {}; 
 class Foo {
   accessor #a;
 

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors--to-es2015/undecorated-private/output.js

@@ -1,3 +1,5 @@
+const dec = () => {};
+
 var _A = /*#__PURE__*/new WeakMap();
 
 var _a = /*#__PURE__*/new WeakMap();

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors--to-es2015/undecorated-public/input.js

@@ -1,3 +1,4 @@
+const dec = () => {}; 
 class Foo {
   accessor a;
 

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors--to-es2015/undecorated-public/output.js

@@ -1,3 +1,5 @@
+const dec = () => {};
+
 var _A = /*#__PURE__*/new WeakMap();
 
 var _B = /*#__PURE__*/new WeakMap();

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors--to-es2015/undecorated-static-private/input.js

@@ -1,3 +1,4 @@
+const dec = () => {}; 
 class Foo {
   static accessor #a;
 

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors--to-es2015/undecorated-static-private/output.js

@@ -1,3 +1,5 @@
+const dec = () => {};
+
 class Foo {}
 
 function _get_a() {

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors--to-es2015/undecorated-static-public/input.js

@@ -1,3 +1,4 @@
+const dec = () => {}; 
 class Foo {
   static accessor a;
 

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors--to-es2015/undecorated-static-public/output.js

@@ -1,3 +1,5 @@
+const dec = () => {};
+
 class Foo {
   static get a() {
     return babelHelpers.classStaticPrivateFieldSpecGet(this, Foo, _A);

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors/private/input.js

@@ -1,3 +1,4 @@
+const dec = () => {}; 
 class Foo {
   @dec
   accessor #a;

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors/private/output.js

@@ -1,5 +1,7 @@
 var _init_a, _get_a, _set_a, _init_b, _get_b, _set_b, _initProto;
 
+const dec = () => {};
+
 class Foo {
   static {
     [_init_a, _get_a, _set_a, _init_b, _get_b, _set_b, _initProto] = babelHelpers.applyDecs(this, [[dec, 1, "a", function () {

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors/public/input.js

@@ -1,3 +1,4 @@
+const dec = () => {}; 
 class Foo {
   @dec
   accessor a;

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors/public/output.js

@@ -1,13 +1,12 @@
-var _init_a, _init_b, _computedKey, _init_computedKey, _dec, _dec2, _dec3, _initProto;
+var _init_a, _init_b, _computedKey, _init_computedKey, _initProto;
+
+const dec = () => {};
 
-_dec = dec
-_dec2 = dec
 _computedKey = 'c'
-_dec3 = dec
 
 class Foo {
   static {
-    [_init_a, _init_b, _init_computedKey, _initProto] = babelHelpers.applyDecs(this, [[_dec, 1, "a"], [_dec2, 1, "b"], [_dec3, 1, _computedKey]], []);
+    [_init_a, _init_b, _init_computedKey, _initProto] = babelHelpers.applyDecs(this, [[dec, 1, "a"], [dec, 1, "b"], [dec, 1, _computedKey]], []);
   }
   #A = (_initProto(this), _init_a(this));
 

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors/static-private/input.js

@@ -1,3 +1,4 @@
+const dec = () => {}; 
 class Foo {
   @dec
   static accessor #a;

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors/static-private/output.js

@@ -1,5 +1,7 @@
 var _init_a, _get_a, _set_a, _init_b, _get_b, _set_b, _initStatic;
 
+const dec = () => {};
+
 class Foo {
   static {
     [_init_a, _get_a, _set_a, _init_b, _get_b, _set_b, _initStatic] = babelHelpers.applyDecs(this, [[dec, 6, "a", function () {

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors/static-public/input.js

@@ -1,3 +1,4 @@
+const dec = () => {}; 
 class Foo {
   @dec
   static accessor a;

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors/static-public/output.js

@@ -1,13 +1,12 @@
-var _init_a, _init_b, _computedKey, _init_computedKey, _dec, _dec2, _dec3, _initStatic;
+var _init_a, _init_b, _computedKey, _init_computedKey, _initStatic;
+
+const dec = () => {};
 
-_dec = dec
-_dec2 = dec
 _computedKey = 'c'
-_dec3 = dec
 
 class Foo {
   static {
-    [_init_a, _init_b, _init_computedKey, _initStatic] = babelHelpers.applyDecs(this, [[_dec, 6, "a"], [_dec2, 6, "b"], [_dec3, 6, _computedKey]], []);
+    [_init_a, _init_b, _init_computedKey, _initStatic] = babelHelpers.applyDecs(this, [[dec, 6, "a"], [dec, 6, "b"], [dec, 6, _computedKey]], []);
 
     _initStatic(this);
 

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors/undecorated-private/input.js

@@ -1,3 +1,4 @@
+const dec = () => {}; 
 class Foo {
   accessor #a;
 

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors/undecorated-private/output.js

@@ -1,3 +1,5 @@
+const dec = () => {};
+
 class Foo {
   #A;
 

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors/undecorated-public/input.js

@@ -1,3 +1,4 @@
+const dec = () => {}; 
 class Foo {
   accessor a;
 

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors/undecorated-public/output.js

@@ -1,3 +1,5 @@
+const dec = () => {};
+
 class Foo {
   #A;
 

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors/undecorated-static-private/input.js

@@ -1,3 +1,4 @@
+const dec = () => {}; 
 class Foo {
   static accessor #a;
 

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors/undecorated-static-private/output.js

@@ -1,3 +1,5 @@
+const dec = () => {};
+
 class Foo {
   static #A;
 

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors/undecorated-static-public/input.js

@@ -1,3 +1,4 @@
+const dec = () => {}; 
 class Foo {
   static accessor a;
 

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-accessors/undecorated-static-public/output.js

@@ -1,3 +1,5 @@
+const dec = () => {};
+
 class Foo {
   static #A;
 

packages/babel-plugin-proposal-decorators/test/fixtures/2021-12-assumption-constantSuper/super-in-nested-constructor-expression/input.js

@@ -1,3 +1,4 @@
+const dec = () => {}; 
 @dec
 class Foo extends Bar  {
   constructor() {