Pass prod error messages directly to constructor

Updates the `invariant` transform to pass an error message string
directly to the Error constructor, instead of mutating the
message property.

Turns this code:

```js
invariant(condition, 'A %s message that contains %s', adj, noun);
```

into this:

```js
if (!condition) {
  if (__DEV__) {
    throw Error(`A ${adj} message that contains ${noun}`);
  } else {
    throw Error(formatProdErrorMessage(ERR_CODE, adj, noun));
  }
}
```

Author: acdlite

packages/shared/__tests__/ReactErrorProd-test.internal.js

@@ -8,7 +8,7 @@
  */
 'use strict';
 
-let ReactErrorProd;
+let formatProdErrorMessage;
 
 describe('ReactErrorProd', () => {
   let globalErrorMock;
@@ -25,7 +25,7 @@ describe('ReactErrorProd', () => {
       expect(typeof global.Error).toBe('function');
     }
     jest.resetModules();
-    ReactErrorProd = require('shared/ReactErrorProd').default;
+    formatProdErrorMessage = require('shared/formatProdErrorMessage').default;
   });
 
   afterEach(() => {
@@ -35,27 +35,21 @@ describe('ReactErrorProd', () => {
   });
 
   it('should throw with the correct number of `%s`s in the URL', () => {
-    expect(function() {
-      throw ReactErrorProd(Error(124), 'foo', 'bar');
-    }).toThrowError(
+    expect(formatProdErrorMessage(124, 'foo', 'bar')).toEqual(
       'Minified React error #124; visit ' +
         'https://reactjs.org/docs/error-decoder.html?invariant=124&args[]=foo&args[]=bar' +
         ' for the full message or use the non-minified dev environment' +
         ' for full errors and additional helpful warnings.',
     );
 
-    expect(function() {
-      throw ReactErrorProd(Error(20));
-    }).toThrowError(
+    expect(formatProdErrorMessage(20)).toEqual(
       'Minified React error #20; visit ' +
         'https://reactjs.org/docs/error-decoder.html?invariant=20' +
         ' for the full message or use the non-minified dev environment' +
         ' for full errors and additional helpful warnings.',
     );
 
-    expect(function() {
-      throw ReactErrorProd(Error(77), '<div>', '&?bar');
-    }).toThrowError(
+    expect(formatProdErrorMessage(77, '<div>', '&?bar')).toEqual(
       'Minified React error #77; visit ' +
         'https://reactjs.org/docs/error-decoder.html?invariant=77&args[]=%3Cdiv%3E&args[]=%26%3Fbar' +
         ' for the full message or use the non-minified dev environment' +

packages/shared/ReactErrorProd.js renamed to packages/shared/formatProdErrorMessage.js

@@ -7,20 +7,19 @@
  */
 
 // Do not require this module directly! Use normal `invariant` calls with
-// template literal strings. The messages will be converted to ReactError during
-// build, and in production they will be minified.
+// template literal strings. The messages will be replaced with error codes
+// during build.
 
-function ReactErrorProd(error) {
-  const code = error.message;
+function formatProdErrorMessage(code) {
   let url = 'https://reactjs.org/docs/error-decoder.html?invariant=' + code;
   for (let i = 1; i < arguments.length; i++) {
     url += '&args[]=' + encodeURIComponent(arguments[i]);
   }
-  error.message =
+  return (
     `Minified React error #${code}; visit ${url} for the full message or ` +
     'use the non-minified dev environment for full errors and additional ' +
-    'helpful warnings. ';
-  return error;
+    'helpful warnings.'
+  );
 }
 
-export default ReactErrorProd;
+export default formatProdErrorMessage;

scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap

@@ -23,40 +23,40 @@ exports[`error transform should handle escaped characters 1`] = `
 `;
 
 exports[`error transform should replace simple invariant calls 1`] = `
-"import _ReactErrorProd from \\"shared/ReactErrorProd\\";
+"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
 import invariant from 'shared/invariant';
 
 if (!condition) {
   if (__DEV__) {
     throw Error(\\"Do not override existing functions.\\");
   } else {
-    throw _ReactErrorProd(Error(16));
+    throw Error(_formatProdErrorMessage(16));
   }
 }"
 `;
 
 exports[`error transform should support invariant calls with a concatenated template string and args 1`] = `
-"import _ReactErrorProd from \\"shared/ReactErrorProd\\";
+"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
 import invariant from 'shared/invariant';
 
 if (!condition) {
   if (__DEV__) {
     throw Error(\\"Expected a component class, got \\" + Foo + \\".\\" + Bar);
   } else {
-    throw _ReactErrorProd(Error(18), Foo, Bar);
+    throw Error(_formatProdErrorMessage(18, Foo, Bar));
   }
 }"
 `;
 
 exports[`error transform should support invariant calls with args 1`] = `
-"import _ReactErrorProd from \\"shared/ReactErrorProd\\";
+"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
 import invariant from 'shared/invariant';
 
 if (!condition) {
   if (__DEV__) {
     throw Error(\\"Expected \\" + foo + \\" target to be an array; got \\" + bar);
   } else {
-    throw _ReactErrorProd(Error(7), foo, bar);
+    throw Error(_formatProdErrorMessage(7, foo, bar));
   }
 }"
 `;

scripts/error-codes/transform-error-messages.js

@@ -32,7 +32,7 @@ module.exports = function(babel) {
           //   if (__DEV__) {
           //     throw Error(`A ${adj} message that contains ${noun}`);
           //   } else {
-          //     throw ReactErrorProd(Error(ERR_CODE), adj, noun);
+          //     throw Error(formatProdErrorMessage(ERR_CODE, adj, noun));
           //   }
           // }
           //
@@ -111,20 +111,20 @@ module.exports = function(babel) {
           prodErrorId = parseInt(prodErrorId, 10);
 
           // Import ReactErrorProd
-          const reactErrorProdIdentfier = helperModuleImports.addDefault(
+          const formatProdErrorMessageIdentifier = helperModuleImports.addDefault(
             path,
-            'shared/ReactErrorProd',
-            {nameHint: 'ReactErrorProd'}
+            'shared/formatProdErrorMessage',
+            {nameHint: 'formatProdErrorMessage'}
           );
 
           // Outputs:
-          //   throw ReactErrorProd(Error(ERR_CODE), adj, noun);
+          //   throw Error(formatProdErrorMessage(ERR_CODE, adj, noun));
           const prodThrow = t.throwStatement(
-            t.callExpression(reactErrorProdIdentfier, [
-              t.callExpression(t.identifier('Error'), [
+            t.callExpression(t.identifier('Error'), [
+              t.callExpression(formatProdErrorMessageIdentifier, [
                 t.numericLiteral(prodErrorId),
+                ...errorMsgExpressions,
               ]),
-              ...errorMsgExpressions,
             ])
           );
 
@@ -133,7 +133,7 @@ module.exports = function(babel) {
           //     if (__DEV__) {
           //       throw ReactError(Error(`A ${adj} message that contains ${noun}`));
           //     } else {
-          //       throw ReactErrorProd(Error(ERR_CODE), adj, noun);
+          //       throw Error(formatProdErrorMessage(ERR_CODE, adj, noun));
           //     }
           //   }
           parentStatementPath.replaceWith(