Use String(value) for coercion in non-prod files

This commit switches non-production code from `'' + value` (which
throws for Temporal objects and symbols) to instead use `String(value)`
which won't throw for these or other future plus-phobic types.

"Non-produciton code" includes anything not bundled into user apps:
* Tests and test utilities. Note that I didn't change legacy React
  test fixtures because I assumed it was good for those files to
  act just like old React, including coercion behavior.
* Build scripts
* Dev tools package - In addition to switching to `String`, I also
  removed special-case code for coercing symbols which is now
  unnecessary.

Author: justingrant

dangerfile.js

@@ -102,8 +102,8 @@ function row(result) {
   let headSha;
   let baseSha;
   try {
-    headSha = (readFileSync(HEAD_DIR + '/COMMIT_SHA') + '').trim();
-    baseSha = (readFileSync(BASE_DIR + '/COMMIT_SHA') + '').trim();
+    headSha = String(readFileSync(HEAD_DIR + '/COMMIT_SHA')).trim();
+    baseSha = String(readFileSync(BASE_DIR + '/COMMIT_SHA')).trim();
   } catch {
     warn(
       "Failed to read build artifacts. It's possible a build configuration " +

fixtures/dom/src/components/fixtures/error-handling/index.js

@@ -41,7 +41,7 @@ class ErrorBoundary extends React.Component {
       if (this.state.error) {
         return <p>Captured an error: {this.state.error.message}</p>;
       } else {
-        return <p>Captured an error: {'' + this.state.error}</p>;
+        return <p>Captured an error: {String(this.state.error)}</p>;
       }
     }
     if (this.state.shouldThrow) {

packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js

@@ -615,7 +615,7 @@ describe('ReactHooksInspectionIntegration', () => {
     expect(tree[0].id).toEqual(0);
     expect(tree[0].isStateEditable).toEqual(false);
     expect(tree[0].name).toEqual('OpaqueIdentifier');
-    expect((tree[0].value + '').startsWith('c_')).toBe(true);
+    expect(String(tree[0].value).startsWith('c_')).toBe(true);
 
     expect(tree[1]).toEqual({
       id: 1,
@@ -646,7 +646,7 @@ describe('ReactHooksInspectionIntegration', () => {
     expect(tree[0].id).toEqual(0);
     expect(tree[0].isStateEditable).toEqual(false);
     expect(tree[0].name).toEqual('OpaqueIdentifier');
-    expect((tree[0].value + '').startsWith('c_')).toBe(true);
+    expect(String(tree[0].value).startsWith('c_')).toBe(true);
 
     expect(tree[1]).toEqual({
       id: 1,

packages/react-devtools-extensions/src/main.js

@@ -94,7 +94,7 @@ function createPanelIfReactLoaded() {
 
       function initBridgeAndStore() {
         const port = chrome.runtime.connect({
-          name: '' + tabId,
+          name: String(tabId),
         });
         // Looks like `port.onDisconnect` does not trigger on in-tab navigation like new URL or back/forward navigation,
         // so it makes no sense to handle it here.

packages/react-devtools-shared/src/backend/legacy/renderer.js

@@ -63,7 +63,7 @@ function getData(internalInstance: InternalInstance) {
   // != used deliberately here to catch undefined and null
   if (internalInstance._currentElement != null) {
     if (internalInstance._currentElement.key) {
-      key = '' + internalInstance._currentElement.key;
+      key = String(internalInstance._currentElement.key);
     }
 
     const elementType = internalInstance._currentElement.type;

packages/react-devtools-shared/src/backend/renderer.js

@@ -1847,7 +1847,7 @@ export function attach(
 
       // This check is a guard to handle a React element that has been modified
       // in such a way as to bypass the default stringification of the "key" property.
-      const keyString = key === null ? null : '' + key;
+      const keyString = key === null ? null : String(key);
       const keyStringID = getStringID(keyString);
 
       pushOperation(TREE_OPERATION_ADD);

packages/react-devtools-shared/src/backend/utils.js

@@ -166,11 +166,7 @@ export function format(
 ): string {
   const args = inputArgs.slice();
 
-  // Symbols cannot be concatenated with Strings.
-  let formatted: string =
-    typeof maybeMessage === 'symbol'
-      ? maybeMessage.toString()
-      : '' + maybeMessage;
+  let formatted: string = String(maybeMessage);
 
   // If the first argument is a string, check for substitutions.
   if (typeof maybeMessage === 'string') {
@@ -203,17 +199,14 @@ export function format(
   // Arguments that remain after formatting.
   if (args.length) {
     for (let i = 0; i < args.length; i++) {
-      const arg = args[i];
-
-      // Symbols cannot be concatenated with Strings.
-      formatted += ' ' + (typeof arg === 'symbol' ? arg.toString() : arg);
+      formatted += ' ' + String(args[i]);
     }
   }
 
   // Update escaped %% values.
   formatted = formatted.replace(/%{2,2}/g, '%');
 
-  return '' + formatted;
+  return String(formatted);
 }
 
 export function isSynchronousXHRSupported(): boolean {

packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js

@@ -46,7 +46,7 @@ export default class ErrorBoundary extends Component<Props, State> {
       error !== null &&
       error.hasOwnProperty('message')
         ? error.message
-        : '' + error;
+        : String(error);
 
     const callStack =
       typeof error === 'object' &&

packages/react-devtools-shared/src/devtools/views/utils.js

@@ -19,8 +19,8 @@ export function alphaSortEntries(
 ): number {
   const a = entryA[0];
   const b = entryB[0];
-  if ('' + +a === a) {
-    if ('' + +b !== b) {
+  if (String(+a) === a) {
+    if (String(+b) !== b) {
       return -1;
     }
     return +a < +b ? -1 : 1;

packages/react-devtools-shared/src/hook.js

@@ -180,10 +180,7 @@ export function installHook(target: any): DevToolsHook | null {
     const args = inputArgs.slice();
 
     // Symbols cannot be concatenated with Strings.
-    let formatted: string =
-      typeof maybeMessage === 'symbol'
-        ? maybeMessage.toString()
-        : '' + maybeMessage;
+    let formatted = String(maybeMessage);
 
     // If the first argument is a string, check for substitutions.
     if (typeof maybeMessage === 'string') {
@@ -216,17 +213,14 @@ export function installHook(target: any): DevToolsHook | null {
     // Arguments that remain after formatting.
     if (args.length) {
       for (let i = 0; i < args.length; i++) {
-        const arg = args[i];
-
-        // Symbols cannot be concatenated with Strings.
-        formatted += ' ' + (typeof arg === 'symbol' ? arg.toString() : arg);
+        formatted += ' ' + String(args[i]);
       }
     }
 
     // Update escaped %% values.
     formatted = formatted.replace(/%{2,2}/g, '%');
 
-    return '' + formatted;
+    return String(formatted);
   }
 
   let unpatchFn = null;