createElement changes for 17.0.2

packages/react/src/ReactElement.js

@@ -349,17 +349,22 @@ export function createElement(type, config, children) {
   let propName;
 
   // Reserved names are extracted
-  const props = {};
+  let props = {};
 
   let key = null;
   let ref = null;
   let self = null;
   let source = null;
 
+  let allowPropsToReferenceConfig = true;
+
+  // Children can be more than one argument, and those are transferred onto
+  // the newly allocated props object.
+  const childrenLength = arguments.length - 2;
+
   if (config != null) {
     if (hasValidRef(config)) {
       ref = config.ref;
-
       if (__DEV__) {
         warnIfStringRefCannotBeAutoConverted(config);
       }
@@ -370,20 +375,31 @@ export function createElement(type, config, children) {
 
     self = config.__self === undefined ? null : config.__self;
     source = config.__source === undefined ? null : config.__source;
-    // Remaining properties are added to a new props object
-    for (propName in config) {
-      if (
-        hasOwnProperty.call(config, propName) &&
-        !RESERVED_PROPS.hasOwnProperty(propName)
-      ) {
-        props[propName] = config[propName];
+
+    for (propName in RESERVED_PROPS) {
+      if (hasOwnProperty.call(config, propName)) {
+        allowPropsToReferenceConfig = false;
       }
     }
+
+    if (type && type.defaultProps) {
+      allowPropsToReferenceConfig = false;
+    }
+
+    if (childrenLength > 0) {
+      allowPropsToReferenceConfig = false;
+    }
+
+    if (allowPropsToReferenceConfig) {
+      props = config;
+    } else {
+      // Remaining properties are added to a new props object
+      // eslint-disable-next-line no-unused-vars
+      const {key: _key, ref: _ref, __self, __source, ...rest} = config;
+      props = rest;
+    }
   }
 
-  // Children can be more than one argument, and those are transferred onto
-  // the newly allocated props object.
-  const childrenLength = arguments.length - 2;
   if (childrenLength === 1) {
     props.children = children;
   } else if (childrenLength > 1) {

packages/react/src/__tests__/ReactElement-test.js

@@ -146,6 +146,7 @@ describe('ReactElement', () => {
     const element = React.createElement(ComponentClass, config);
     expect(element.props.foo).toBe(1);
     config.foo = 2;
+
     expect(element.props.foo).toBe(1);
   });
 
@@ -384,25 +385,16 @@ describe('ReactElement', () => {
       render() {
         const el = <div className="moo" />;
 
-        if (__DEV__) {
-          expect(function() {
-            el.props.className = 'quack';
-          }).toThrow();
-          expect(el.props.className).toBe('moo');
-        } else {
+        expect(function () {
           el.props.className = 'quack';
-          expect(el.props.className).toBe('quack');
-        }
+        }).toThrow();
+        expect(el.props.className).toBe('moo');
 
         return el;
       }
     }
     const outer = ReactTestUtils.renderIntoDocument(<Outer color="orange" />);
-    if (__DEV__) {
-      expect(ReactDOM.findDOMNode(outer).className).toBe('moo');
-    } else {
-      expect(ReactDOM.findDOMNode(outer).className).toBe('quack');
-    }
+    expect(ReactDOM.findDOMNode(outer).className).toBe('moo');
   });
 
   it('throws when adding a prop (in dev) after element creation', () => {
@@ -411,27 +403,18 @@ describe('ReactElement', () => {
       render() {
         const el = <div>{this.props.sound}</div>;
 
-        if (__DEV__) {
-          expect(function() {
-            el.props.className = 'quack';
-          }).toThrow();
-          expect(el.props.className).toBe(undefined);
-        } else {
+        expect(function () {
           el.props.className = 'quack';
-          expect(el.props.className).toBe('quack');
-        }
+        }).toThrow();
+        expect(el.props.className).toBe(undefined);
 
         return el;
       }
     }
     Outer.defaultProps = {sound: 'meow'};
     const outer = ReactDOM.render(<Outer />, container);
     expect(ReactDOM.findDOMNode(outer).textContent).toBe('meow');
-    if (__DEV__) {
-      expect(ReactDOM.findDOMNode(outer).className).toBe('');
-    } else {
-      expect(ReactDOM.findDOMNode(outer).className).toBe('quack');
-    }
+    expect(ReactDOM.findDOMNode(outer).className).toBe('');
   });
 
   it('does not warn for NaN props', () => {

scripts/rollup/build.js

@@ -100,8 +100,8 @@ const errorCodeOpts = {
 
 const closureOptions = {
   compilation_level: 'SIMPLE',
-  language_in: 'ECMASCRIPT_2015',
-  language_out: 'ECMASCRIPT5_STRICT',
+  language_in: 'ECMASCRIPT_2018',
+  language_out: 'ECMASCRIPT_2018',
   env: 'CUSTOM',
   warning_level: 'QUIET',
   apply_input_source_maps: false,
@@ -118,19 +118,11 @@ const babelPlugins = [
   ['@babel/plugin-proposal-class-properties', {loose: true}],
   'syntax-trailing-function-commas',
   // These use loose mode which avoids embedding a runtime.
-  // TODO: Remove object spread from the source. Prefer Object.assign instead.
-  [
-    '@babel/plugin-proposal-object-rest-spread',
-    {loose: true, useBuiltIns: true},
-  ],
+
   ['@babel/plugin-transform-template-literals', {loose: true}],
   // TODO: Remove for...of from the source. It requires a runtime to be embedded.
   '@babel/plugin-transform-for-of',
-  // TODO: Remove array spread from the source. Prefer .apply instead.
-  ['@babel/plugin-transform-spread', {loose: true, useBuiltIns: true}],
   '@babel/plugin-transform-parameters',
-  // TODO: Remove array destructuring from the source. Requires runtime.
-  ['@babel/plugin-transform-destructuring', {loose: true, useBuiltIns: true}],
 ];
 
 const babelToES5Plugins = [