Don't report lint error if coercion is safe

This commit extends the safe-string-coercion internal ESLint rule to
auto-detect code where coercion can't fail or is correctly preceded
by a DEV check. In those cases, the rule now won't report.

Changes:
* Don't report if the coercion is wrapped in an `if (typeof...) {}`
  block that ensures that the coercion won't throw
* Don't report if there's a valid coercion check call in the
  statement immediately before the coercion. The check call must be in
  the following format:
    if (__DEV__) {
      checkXxxxxStringCoercion(value);
    };
* Renames rule option for clarity. New name: `isProductionUserAppCode`
* Removes now-unnecessary `eslint-disable*` comments
* Improve messages returned from ESLint when the DEV check is required,
  but is missing or invalid. If invalid, message tells what's wrong.

Author: justingrant

.eslintrc.js

@@ -110,7 +110,7 @@ module.exports = {
     'react-internal/no-primitive-constructors': ERROR,
     'react-internal/safe-string-coercion': [
       ERROR,
-      {disallowStringConstructor: true},
+      {isProductionUserAppCode: true},
     ],
     'react-internal/no-to-warn-dev-within-to-throw': ERROR,
     'react-internal/invariant-args': ERROR,
@@ -181,7 +181,7 @@ module.exports = {
         'react-internal/warning-args': OFF,
         'react-internal/safe-string-coercion': [
           ERROR,
-          {disallowStringConstructor: false},
+          {isProductionUserAppCode: false},
         ],
 
         // Disable accessibility checks

packages/react-devtools-core/src/editor.js

@@ -63,7 +63,6 @@ function getArgumentsForLineNumber(
     case 'rmate':
     case 'mate':
     case 'mine':
-      // eslint-disable-next-line react-internal/safe-string-coercion
       return ['--line', lineNumber + '', filePath];
     case 'code':
       return ['-g', filePath + ':' + lineNumber];

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

@@ -32,7 +32,6 @@ chrome.runtime.onConnect.addListener(function(port) {
 });
 
 function isNumeric(str: string): boolean {
-  // eslint-disable-next-line react-internal/safe-string-coercion
   return +str + '' === str;
 }
 

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

@@ -89,7 +89,6 @@ function createPanelIfReactLoaded() {
 
       function initBridgeAndStore() {
         const port = chrome.runtime.connect({
-          // eslint-disable-next-line react-internal/safe-string-coercion
           name: '' + tabId,
         });
         // Looks like `port.onDisconnect` does not trigger on in-tab navigation like new URL or back/forward navigation,

packages/react-dom/src/client/DOMPropertyOperations.js

@@ -41,6 +41,9 @@ export function getValueForProperty(
       const {propertyName} = propertyInfo;
       return (node: any)[propertyName];
     } else {
+      // This check protects multiple uses of `expected`, which is why the
+      // react-internal/safe-string-coercion rule is disabled in several spots
+      // below.
       if (__DEV__) {
         checkAttributeStringCoercion(expected, name);
       }
@@ -130,7 +133,6 @@ export function getValueForAttribute(
     if (__DEV__) {
       checkAttributeStringCoercion(expected, name);
     }
-    // eslint-disable-next-line react-internal/safe-string-coercion
     if (value === '' + (expected: any)) {
       return expected;
     }
@@ -170,7 +172,6 @@ export function setValueForProperty(
         }
         node.setAttribute(
           attributeName,
-          // eslint-disable-next-line react-internal/safe-string-coercion
           enableTrustedTypesIntegration ? (value: any) : '' + (value: any),
         );
       }
@@ -210,7 +211,6 @@ export function setValueForProperty(
         if (__DEV__) {
           checkAttributeStringCoercion(value, attributeName);
         }
-        // eslint-disable-next-line react-internal/safe-string-coercion
         attributeValue = '' + (value: any);
       }
       if (propertyInfo.sanitizeURL) {

packages/react-dom/src/client/ReactDOMComponent.js

@@ -144,7 +144,6 @@ if (__DEV__) {
       checkHtmlStringCoercion(markup);
     }
     const markupString =
-      // eslint-disable-next-line react-internal/safe-string-coercion
       typeof markup === 'string' ? markup : '' + (markup: any);
     return markupString
       .replace(NORMALIZE_NEWLINES_REGEX, '\n')
@@ -308,7 +307,6 @@ function setInitialDOMProperties(
           setTextContent(domElement, nextProp);
         }
       } else if (typeof nextProp === 'number') {
-        // eslint-disable-next-line react-internal/safe-string-coercion
         setTextContent(domElement, '' + nextProp);
       }
     } else if (
@@ -754,7 +752,6 @@ export function diffProperties(
       }
     } else if (propKey === CHILDREN) {
       if (typeof nextProp === 'string' || typeof nextProp === 'number') {
-        // eslint-disable-next-line react-internal/safe-string-coercion
         (updatePayload = updatePayload || []).push(propKey, '' + nextProp);
       }
     } else if (
@@ -988,12 +985,10 @@ export function diffHydratedProperties(
           updatePayload = [CHILDREN, nextProp];
         }
       } else if (typeof nextProp === 'number') {
-        // eslint-disable-next-line react-internal/safe-string-coercion
         if (domElement.textContent !== '' + nextProp) {
           if (__DEV__ && !suppressHydrationWarning) {
             warnForTextDifference(domElement.textContent, nextProp);
           }
-          // eslint-disable-next-line react-internal/safe-string-coercion
           updatePayload = [CHILDREN, '' + nextProp];
         }
       }

packages/react-dom/src/client/ReactDOMHostConfig.js

@@ -275,7 +275,6 @@ export function createInstance(
       typeof props.children === 'string' ||
       typeof props.children === 'number'
     ) {
-      // eslint-disable-next-line react-internal/safe-string-coercion
       const string = '' + props.children;
       const ownAncestorInfo = updatedAncestorInfo(
         hostContextDev.ancestorInfo,
@@ -331,7 +330,6 @@ export function prepareUpdate(
       (typeof newProps.children === 'string' ||
         typeof newProps.children === 'number')
     ) {
-      // eslint-disable-next-line react-internal/safe-string-coercion
       const string = '' + newProps.children;
       const ownAncestorInfo = updatedAncestorInfo(
         hostContextDev.ancestorInfo,

packages/react-dom/src/client/ReactDOMInput.js

@@ -370,7 +370,6 @@ function updateNamedCousins(rootNode, props) {
       checkAttributeStringCoercion(name, 'name');
     }
     const group = queryRoot.querySelectorAll(
-      // eslint-disable-next-line react-internal/safe-string-coercion
       'input[name=' + JSON.stringify('' + name) + '][type="radio"]',
     );
 

packages/react-dom/src/client/ToStringValue.js

@@ -21,6 +21,7 @@ export opaque type ToStringValue =
 // around this limitation, we use an opaque type that can only be obtained by
 // passing the value through getToStringValue first.
 export function toString(value: ToStringValue): string {
+  // The coercion safety check is performed in getToStringValue().
   // eslint-disable-next-line react-internal/safe-string-coercion
   return '' + (value: any);
 }

packages/react-dom/src/client/inputValueTracking.js

@@ -60,7 +60,6 @@ function trackValueOnNode(node: any): ?ValueTracker {
   if (__DEV__) {
     checkFormFieldValueStringCoercion(node[valueField]);
   }
-  // eslint-disable-next-line react-internal/safe-string-coercion
   let currentValue = '' + node[valueField];
 
   // if someone has already defined a value or Safari, then bail
@@ -85,7 +84,6 @@ function trackValueOnNode(node: any): ?ValueTracker {
       if (__DEV__) {
         checkFormFieldValueStringCoercion(value);
       }
-      // eslint-disable-next-line react-internal/safe-string-coercion
       currentValue = '' + value;
       set.call(this, value);
     },
@@ -106,7 +104,6 @@ function trackValueOnNode(node: any): ?ValueTracker {
       if (__DEV__) {
         checkFormFieldValueStringCoercion(value);
       }
-      // eslint-disable-next-line react-internal/safe-string-coercion
       currentValue = '' + value;
     },
     stopTracking() {