Fix computed properties being inserted after the class, thus making them unavailable for instance methods & properties (#7147)

packages/babel-plugin-proposal-class-properties/src/index.js

@@ -145,7 +145,7 @@ export default function(api, options) {
           }
         }
 
-        const nodes = computedNodes.concat(staticNodes);
+        const afterNodes = [...staticNodes];
 
         if (instanceBody.length) {
           if (!constructor) {
@@ -183,7 +183,7 @@ export default function(api, options) {
               "initialiseProps",
             );
 
-            nodes.push(
+            afterNodes.push(
               t.variableDeclaration("var", [
                 t.variableDeclarator(
                   initialisePropsRef,
@@ -223,7 +223,7 @@ export default function(api, options) {
           prop.remove();
         }
 
-        if (!nodes.length) return;
+        if (computedNodes.length === 0 && afterNodes.length === 0) return;
 
         if (path.isClassExpression()) {
           path.scope.push({ id: ref });
@@ -233,7 +233,8 @@ export default function(api, options) {
           path.node.id = ref;
         }
 
-        path.insertAfter(nodes);
+        path.insertBefore(computedNodes);
+        path.insertAfter(afterNodes);
       },
     },
   };

packages/babel-plugin-proposal-class-properties/test/fixtures/general/computed-initialization-order/exec.js

@@ -1,18 +1,38 @@
-const actual = [];
+const actualOrder = [];
 
-const track = i => actual.push(i);
+const track = i => {
+  actualOrder.push(i);
+  return i;
+};
 
 class MyClass {
   static [track(1)] = track(10);
-  [track(2)] = track(0);
-  get [track(3)]() {}
-  set [track(4)](value) {}
-  [track(5)] = track(0);
+  [track(2)] = track(13);
+  get [track(3)]() {
+    return "foo";
+  }
+  set [track(4)](value) {
+    this.bar = value;
+  }
+  [track(5)] = track(14);
   static [track(6)] = track(11);
   static [track(7)] = track(12);
   [track(8)]() {}
-  [track(9)] = track(0);
+  [track(9)] = track(15);
 }
 
-const expected = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-assert.deepEqual(actual, expected);
+const inst = new MyClass();
+
+const expectedOrder = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
+assert.deepEqual(actualOrder, expectedOrder);
+
+assert.equal(MyClass[1], 10);
+assert.equal(inst[2], 13);
+assert.equal(inst[3], "foo");
+inst[4] = "baz";
+assert.equal(inst.bar, "baz");
+assert.equal(inst[5], 14);
+assert.equal(MyClass[6], 11);
+assert.equal(MyClass[7], 12);
+assert.ok(typeof inst[8] === "function");
+assert.equal(inst[9], 15);

packages/babel-plugin-proposal-class-properties/test/fixtures/general/computed/expected.js

@@ -4,6 +4,23 @@ var bar = () => {};
 
 var four = 4;
 
+var _one = one();
+
+var _ref = 2 * four + seven;
+
+var _undefined = undefined;
+
+var _computed = computed();
+
+var _computed2 = computed();
+
+var _ref2 = "test" + one;
+
+var _ref3 = /regex/;
+var _bar = bar;
+var _baz = baz;
+var _ref4 = `template${expression}`;
+
 var MyClass =
 /*#__PURE__*/
 function () {
@@ -85,22 +102,6 @@ function () {
   return MyClass;
 }();
 
-var _one = one();
-
-var _ref = 2 * four + seven;
-
-var _undefined = undefined;
-
-var _computed = computed();
-
-var _computed2 = computed();
-
-var _ref2 = "test" + one;
-
-var _ref3 = /regex/;
-var _bar = bar;
-var _baz = baz;
-var _ref4 = `template${expression}`;
 Object.defineProperty(MyClass, _one, {
   configurable: true,
   enumerable: true,

packages/babel-plugin-proposal-class-properties/test/fixtures/general/instance-computed/expected.js

@@ -1,4 +1,6 @@
 function test(x) {
+  var _x = x;
+
   var F = function F() {
     babelHelpers.classCallCheck(this, F);
     Object.defineProperty(this, _x, {
@@ -9,7 +11,6 @@ function test(x) {
     });
   };
 
-  var _x = x;
   x = 'deadbeef';
   assert.strictEqual(new F().foo, 1);
   x = 'wrong';

packages/babel-plugin-proposal-class-properties/test/fixtures/loose/instance-computed/expected.js

@@ -1,10 +1,11 @@
 function test(x) {
+  var _x = x;
+
   var F = function F() {
     babelHelpers.classCallCheck(this, F);
     this[_x] = 1;
   };
 
-  var _x = x;
   x = 'deadbeef';
   assert.strictEqual(new F().foo, 1);
   x = 'wrong';