Replace Object.assign with the spread operator in reps.

Author: nchevobbe

packages/devtools-reps/src/reps/array.js

@@ -78,13 +78,17 @@ function arrayIterator(props, array, max) {
     let item;
 
     try {
-      item = ItemRep(Object.assign({}, props, config, {
+      item = ItemRep({
+        ...props,
+        ...config,
         object: array[i],
-      }));
+      });
     } catch (exc) {
-      item = ItemRep(Object.assign({}, props, config, {
+      item = ItemRep({
+        ...props,
+        ...config,
         object: exc,
-      }));
+      });
     }
     items.push(item);
   }
@@ -118,10 +122,11 @@ function ItemRep(props) {
   } = props;
   return (
     span({},
-      Rep(Object.assign({}, props, {
+      Rep({
+        ...props,
         object: object,
         mode: mode
-      })),
+      }),
       delim
     )
   );

packages/devtools-reps/src/reps/event.js

@@ -27,16 +27,18 @@ Event.propTypes = {
 };
 
 function Event(props) {
-  // Use `Object.assign` to keep `props` without changes because:
-  // 1. JSON.stringify/JSON.parse is slow.
-  // 2. Immutable.js is planned for the future.
-  let gripProps = Object.assign({}, props, {
-    title: getTitle(props)
-  });
-  gripProps.object = Object.assign({}, props.object);
-  gripProps.object.preview = Object.assign({}, props.object.preview);
+  let gripProps = {
+    ...props,
+    title: getTitle(props),
+    object: {
+      ...props.object,
+      preview: {
+        ...props.object.preview,
+        ownProperties: {},
+      },
+    }
+  };
 
-  gripProps.object.preview.ownProperties = {};
   if (gripProps.object.preview.target) {
     Object.assign(gripProps.object.preview.ownProperties, {
       target: gripProps.object.preview.target

packages/devtools-reps/src/reps/grip-array.js

@@ -203,12 +203,13 @@ function arrayIterator(props, grip, max) {
     }
 
     if (res.length < max) {
-      res.push(Rep(Object.assign({}, props, {
+      res.push(Rep({
+        ...props,
         object,
         mode: MODE.TINY,
         // Do not propagate title to array items reps
         title: undefined,
-      })));
+      }));
     }
 
     return res;

packages/devtools-reps/src/reps/grip-map-entry.js

@@ -36,13 +36,14 @@ function GripMapEntry(props) {
 
   return span({
     className: "objectBox objectBox-map-entry"
-  }, PropRep(Object.assign({}, props, {
+  }, PropRep({
+    ...props,
     name: key,
     object: value,
     equal: " \u2192 ",
     title: null,
     suppressQuotes: false,
-  })));
+  }));
 }
 
 function supportsObject(grip, noGrip = false) {

packages/devtools-reps/src/reps/grip.js

@@ -179,15 +179,16 @@ function propIterator(props, object, max) {
     const length = max - indexes.length;
 
     const symbolsProps = ownSymbols.slice(0, length).map(symbolItem => {
-      return PropRep(Object.assign({}, props, {
+      return PropRep({
+        ...props,
         mode: MODE.TINY,
         name: symbolItem,
         object: symbolItem.descriptor.value,
         equal: ": ",
         defaultRep: Grip,
         title: null,
         suppressQuotes,
-      }));
+      });
     });
 
     propsArray.push(...symbolsProps);
@@ -232,15 +233,16 @@ function getProps(componentProps, properties, indexes, suppressQuotes) {
     let name = propertiesKeys[i];
     let value = getPropValue(properties[name]);
 
-    return PropRep(Object.assign({}, componentProps, {
+    return PropRep({
+      ...componentProps,
       mode: MODE.TINY,
       name,
       object: value,
       equal: ": ",
       defaultRep: Grip,
       title: null,
       suppressQuotes,
-    }));
+    });
   });
 }
 

packages/devtools-reps/src/reps/object.js

@@ -96,13 +96,14 @@ function propIterator(props, object, max) {
   const propertiesNames = Object.keys(object);
 
   const pushPropRep = (name, value) => {
-    elements.push(PropRep(Object.assign({}, props, {
+    elements.push(PropRep({
+      ...props,
       key: name,
       mode: MODE.TINY,
       name,
       object: value,
       equal: ": ",
-    })));
+    }));
     propertiesNumber++;
 
     if (propertiesNumber < propertiesNames.length) {

packages/devtools-reps/src/reps/promise.js

@@ -84,13 +84,14 @@ function getProps(props, promiseState) {
 
   return keys.reduce((res, key, i) => {
     let object = promiseState[key];
-    res = res.concat(PropRep(Object.assign({}, props, {
+    res = res.concat(PropRep({
+      ...props,
       mode: MODE.TINY,
       name: `<${key}>`,
       object,
       equal: ": ",
       suppressQuotes: true,
-    })));
+    }));
 
     // Interleave commas between elements
     if (i !== keys.length - 1) {

packages/devtools-reps/src/reps/prop-rep.js

@@ -63,20 +63,21 @@ function PropRep(props) {
     }
     key = span({"className": "nodeName"}, name);
   } else {
-    key = Rep(Object.assign({}, props, {
+    key = Rep({
+      ...props,
       className: "nodeName",
       object: name,
       mode: mode || MODE.TINY,
       defaultRep: Grip,
-    }));
+    });
   }
 
   return [
     key,
     span({
       "className": "objectEqual"
     }, equal),
-    Rep(Object.assign({}, props)),
+    Rep({...props}),
   ];
 }
 

packages/devtools-reps/src/reps/stubs/grip.js

@@ -71,7 +71,8 @@ stubs.set("testMoreThanMaxProps", {
   "preview": {
     "kind": "Object",
     "ownProperties": Array.from({length: longModeMaxLength})
-      .reduce((res, item, index) => Object.assign(res, {
+      .reduce((res, item, index) => ({
+        ...res,
         ["p" + index]: {
           "configurable": true,
           "enumerable": true,

packages/devtools-reps/src/shared/images/Svg.js

@@ -26,8 +26,11 @@ function Svg(name, props) {
   if (name === "subSettings") {
     className = "";
   }
-  props = Object.assign({}, props, { className, src: svg[name] });
-  return React.createElement(InlineSVG, props);
+  return React.createElement(InlineSVG, {
+    ...props,
+    className,
+    src: svg[name]
+  });
 }
 
 module.exports = Svg;