Fix evaluation order with object spread

packages/babel-plugin-proposal-object-rest-spread/src/index.js

@@ -541,6 +541,9 @@ export default declare((api, opts) => {
       ObjectExpression(path, file) {
         if (!hasSpread(path.node)) return;
 
+        const { scope } = path;
+
+        // a non-SpreadElement and SpreadElement striped array
         const args = [];
         let props = [];
 
@@ -579,8 +582,48 @@ export default declare((api, opts) => {
             helper = file.addHelper("objectSpread");
           }
         }
+        // We cannot call _objectSpread with more than two elements directly, since any element could cause side effects. For
+        // example:
+        //      var k = { a: 1, b: 2 };
+        //      var o = { a: 3, ...k, b: k.a++ };
+        //      // expected: { a: 1, b: 1 }
+        // If we translate the above to `_objectSpread({ a: 3 }, k, { b: k.a++ })`, the `k.a++` will evaluate before
+        // `k` is spread and we end up with `{ a: 2, b: 1 }`.
+        // adapted from https://github.com/microsoft/TypeScript/blob/eb105efdcd6db8a73f5b983bf329cb7a5eee55e1/src/compiler/transformers/es2018.ts#L272
+        const chunks = [];
+        let currentChunk = [];
+        for (let i = 0; i < args.length; i++) {
+          currentChunk.push(args[i]);
+          // prevent current chunk from pollution
+          if (i < args.length - 1 && !scope.isPure(args[i + 1])) {
+            chunks.push(currentChunk);
+            currentChunk = [];
+          }
+        }
+
+        if (currentChunk.length) {
+          chunks.push(currentChunk);
+          currentChunk = [];
+        }
+
+        let exp = t.callExpression(helper, chunks[0]);
+        let nthArg = chunks[0].length;
+        for (let i = 1; i < chunks.length; i++) {
+          // reference: packages/babel-helpers/src/helpers.js#objectSpread2
+          if (nthArg % 2) {
+            exp = t.callExpression(helper, [exp, ...chunks[i]]);
+          } else {
+            exp = t.callExpression(helper, [
+              exp,
+              t.objectExpression([]),
+              ...chunks[i],
+            ]);
+          }
+
+          nthArg += chunks[i].length;
+        }
 
-        path.replaceWith(t.callExpression(helper, args));
+        path.replaceWith(exp);
       },
     },
   };

packages/babel-plugin-proposal-object-rest-spread/test/fixtures/object-spread/assignment/output.js

@@ -4,10 +4,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-z = _objectSpread({
+z = _objectSpread(_objectSpread({
   x
-}, y);
+}), y);
 z = {
   x,
-  w: _objectSpread({}, y)
+  w: _objectSpread(_objectSpread({}), y)
 };

packages/babel-plugin-proposal-object-rest-spread/test/fixtures/object-spread/expression/output.js

@@ -4,15 +4,15 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-_objectSpread({
+_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
   x
-}, y, {
+}), y), {}, {
   a
-}, b, {
+}), b), {}, {
   c
 });
 
-_objectSpread({}, Object.prototype);
+_objectSpread(_objectSpread({}), Object.prototype);
 
 _objectSpread({}, {
   foo: 'bar'
@@ -24,7 +24,7 @@ _objectSpread({}, {
   bar: 'baz'
 });
 
-_objectSpread({}, {
+_objectSpread(_objectSpread({}), {
   get foo() {
     return 'foo';
   }

packages/babel-plugin-proposal-object-rest-spread/test/fixtures/object-spread/loose-mode-builtins/output.js

@@ -1,7 +1,7 @@
-z = Object.assign({
+z = Object.assign(Object.assign({
   x
-}, y);
+}), y);
 z = {
   x,
-  w: Object.assign({}, y)
+  w: Object.assign(Object.assign({}), y)
 };

packages/babel-plugin-proposal-object-rest-spread/test/fixtures/object-spread/loose-mode/output.js

@@ -2,12 +2,12 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-z = _extends({
+z = _extends(_extends({
   x
-}, y);
+}), y);
 z = {
   x,
-  w: _extends({}, y)
+  w: _extends(_extends({}), y)
 };
 
 const rest = _objectWithoutPropertiesLoose(z, ["q"]);

packages/babel-plugin-proposal-object-rest-spread/test/fixtures/object-spread/side-effect/exec.js

@@ -0,0 +1,4 @@
+var k = { a: 1, b: 2 };
+var o = { a: 3, ...k, b: k.a++ };
+
+expect(o).toEqual({a: 1, b: 1});

packages/babel-plugin-proposal-object-rest-spread/test/fixtures/object-spread/side-effect/input.js

@@ -0,0 +1,16 @@
+var k = { a: 1, b: 2 };
+var o = { a: 3, ...k, b: k.a++ };
+
+var pureA = {};
+var pureB = {};
+var pureC = {};
+var pureD = {};
+var pureE = {};
+
+function impureFunc() {
+  console.log('hello')
+}
+
+var output = { ...pureA, get foo() {}, get bar() {}, ...pureB, ...pureC, ...impureFunc(), ...pureD, pureD }
+
+var simpleOutput = { ...pureA, test: '1', ...pureB,  }

packages/babel-plugin-proposal-object-rest-spread/test/fixtures/object-spread/side-effect/output.js

@@ -0,0 +1,39 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var k = {
+  a: 1,
+  b: 2
+};
+
+var o = _objectSpread(_objectSpread({
+  a: 3
+}, k), {}, {
+  b: k.a++
+});
+
+var pureA = {};
+var pureB = {};
+var pureC = {};
+var pureD = {};
+var pureE = {};
+
+function impureFunc() {
+  console.log('hello');
+}
+
+var output = _objectSpread(_objectSpread(_objectSpread({}, pureA), {}, {
+  get foo() {},
+
+  get bar() {}
+
+}, pureB, {}, pureC, {}), impureFunc(), {}, pureD, {
+  pureD
+});
+
+var simpleOutput = _objectSpread({}, pureA, {
+  test: '1'
+}, pureB);