Skip to content

Conversation

walaura
Copy link
Contributor

@walaura walaura commented Dec 6, 2019

Part 1.5 of #16753

This PR removes the __DEV__ wrapping part of wrap-warning-with-env-check and replaces it with a functionally identical eslint plugin (no-production-logging).The babel rule gets renamed to lift-warning-conditional-argument because that's what it does! In its current stage this will fail builds since we still got all the unwrapped calls in the actual codebase.

The plugin supports &&statements like if( __DEV__ && React.suspenseIsEnabled) but fails any top level ||s. Have a look at the tests and code because I might have some unchecked assumptions about static code analysis here (and about how we strip out the __DEV__ checks at compile time lol) but i think this covers the cases we wanna cover.

Caveats

The generated development builds will include an extra block around the checks, from this original code

if(suspenseEnabled){
  warning(2===2, 'example warning');
  ...
}

eslint (in this branch) will make the editor rewrite it to

if(suspenseEnabled){
  if(__DEV__){
    warning(2===2, 'example warning');
  }
  ...
}

Which babel will transform (using ternaries) to

if(suspenseEnabled){
  if(__DEV__){
    2===2 ? warning(false, 'example warning') : void 0;
  }
  ...
}

And then rollup will rewrite __DEV__ to true (for a dev bundle)

if(suspenseEnabled){
  if(true){
    2===2 ? warning(false, 'example warning') : void 0;
  }
  ...
}

And finally, commonjs remove the useless if (this seems like a happy side effect rather than something we are doing on purpose for the dev builds - as for prod we run the closure compiler). However it will keep the block scope:

if(suspenseEnabled){
  {
    2===2 ? warning(false, 'example warning') : void 0;
  }
  ...
}

This makes sense to me, this block scope is pretty absurd but we can't remove blocks automatically (at least not naively) because in some cases it can affect the scope of variables.

We didn't have this before because babel would transform everything using ternaries, which don't start a block scope. Since we are moving the DEV check to the userland now I don't think we want people writing this manually:

if(suspenseEnabled){
    __DEV__ ? 2===2 ? warning(false, 'example warning') : void 0 : void 0;
  ...
}

Next steps

How do we merge this? The way I see it we can either

  • Set the rule to warn, progressively fix the warnings. Don't like this because we don't have any rules set to warn? I might be wrong here? help??
  • Prepare an eslint fix on this PR and apply it before merging. The builds will become green.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Dec 6, 2019

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 21158df:

Sandbox Source
immutable-sunset-sne0m Configuration

},
/* calls wrapped on an if with && */
{
code: 'if (banana && __DEV__ && potato && kitten) { warning(test) }',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This feels too fragile and easy to get wrong, let's just disallow this.

const RuleTester = require('eslint').RuleTester;
const ruleTester = new RuleTester();

ruleTester.run('no-production-logging', rule, {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's also check lowPriorityWarning (and its WithoutStack variant) in tests

@sizebot
Copy link

sizebot commented Dec 6, 2019

Details of bundled changes.

Comparing: acfe4b2...21158df

react-dom

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-dom-unstable-native-dependencies.production.min.js 0.0% 0.0% 10.46 KB 10.46 KB 3.56 KB 3.57 KB NODE_PROD
react-dom-server.browser.development.js +0.2% +0.1% 136.37 KB 136.58 KB 35.91 KB 35.94 KB NODE_DEV
react-dom.development.js 0.0% 0.0% 955.24 KB 955.64 KB 216.02 KB 216.03 KB UMD_DEV
react-dom-server.browser.production.min.js 0.0% 0.0% 19.85 KB 19.85 KB 7.38 KB 7.38 KB NODE_PROD
react-dom-unstable-fizz.browser.development.js 0.0% +0.1% 3.87 KB 3.87 KB 1.54 KB 1.54 KB UMD_DEV
react-dom-unstable-fizz.browser.production.min.js 0.0% 🔺+0.1% 1.2 KB 1.2 KB 701 B 702 B UMD_PROD
react-dom.profiling.min.js 0.0% 0.0% 119.96 KB 119.96 KB 38.56 KB 38.57 KB UMD_PROFILING
react-dom.development.js 0.0% 0.0% 949.3 KB 949.71 KB 214.44 KB 214.46 KB NODE_DEV
react-dom-unstable-fizz.browser.development.js 0.0% +0.1% 3.7 KB 3.7 KB 1.49 KB 1.49 KB NODE_DEV
react-dom.production.min.js 0.0% 0.0% 116.5 KB 116.5 KB 36.85 KB 36.86 KB NODE_PROD
react-dom-unstable-native-dependencies.development.js -0.1% -0.1% 60.13 KB 60.08 KB 15.79 KB 15.77 KB UMD_DEV
react-dom-unstable-fizz.browser.production.min.js 0.0% 🔺+0.2% 1.04 KB 1.04 KB 633 B 634 B NODE_PROD
react-dom.profiling.min.js 0.0% 0.0% 120.19 KB 120.19 KB 37.84 KB 37.84 KB NODE_PROFILING
react-dom-unstable-native-dependencies.production.min.js 0.0% 0.0% 10.72 KB 10.72 KB 3.66 KB 3.67 KB UMD_PROD
react-dom-unstable-native-dependencies.development.js -0.1% -0.1% 59.8 KB 59.76 KB 15.65 KB 15.64 KB NODE_DEV
react-dom-server.node.development.js +0.2% +0.1% 137.48 KB 137.69 KB 36.13 KB 36.16 KB NODE_DEV
react-dom-test-utils.development.js -0.1% -0.1% 56.2 KB 56.17 KB 15.55 KB 15.54 KB UMD_DEV
react-dom-server.node.production.min.js 0.0% 0.0% 20.26 KB 20.26 KB 7.53 KB 7.53 KB NODE_PROD
react-dom-test-utils.production.min.js 0.0% 0.0% 11.17 KB 11.17 KB 4.14 KB 4.14 KB UMD_PROD
react-dom-test-utils.development.js -0.1% -0.0% 54.47 KB 54.44 KB 15.21 KB 15.21 KB NODE_DEV
react-dom-unstable-fizz.node.development.js 0.0% +0.1% 4.4 KB 4.4 KB 1.64 KB 1.64 KB NODE_DEV
react-dom-test-utils.production.min.js 0.0% 🔺+0.1% 10.94 KB 10.94 KB 4.08 KB 4.08 KB NODE_PROD
react-dom-server.browser.development.js +0.1% +0.1% 140.44 KB 140.64 KB 36.91 KB 36.94 KB UMD_DEV
react-dom-unstable-fizz.node.production.min.js 0.0% 🔺+0.1% 1.2 KB 1.2 KB 688 B 689 B NODE_PROD

react-native-renderer

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
ReactNativeRenderer-dev.js +0.1% 0.0% 750.09 KB 750.55 KB 158.96 KB 158.96 KB RN_FB_DEV
ReactNativeRenderer-profiling.js 0.0% -0.0% 286.22 KB 286.22 KB 49.32 KB 49.32 KB RN_FB_PROFILING
ReactFabric-dev.js +0.1% 0.0% 755.51 KB 756 KB 159.79 KB 159.8 KB RN_FB_DEV
ReactNativeRenderer-dev.js +0.1% -0.0% 749.92 KB 750.38 KB 158.88 KB 158.88 KB RN_OSS_DEV
ReactNativeRenderer-prod.js 0.0% 0.0% 276.9 KB 276.9 KB 47.53 KB 47.53 KB RN_OSS_PROD
ReactFabric-dev.js +0.1% 0.0% 755.33 KB 755.82 KB 159.71 KB 159.72 KB RN_OSS_DEV
ReactFabric-prod.js 0.0% 0.0% 268.6 KB 268.6 KB 46.13 KB 46.13 KB RN_OSS_PROD

Size changes (stable)

Generated by 🚫 dangerJS against 21158df

},
/* calls wrapped on an outer bound */
{
code: 'if (__DEV__) { if (potato) { while (true) { warning(test) } } }',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: let's make this multiline so it's easier to read tests

@sizebot
Copy link

sizebot commented Dec 6, 2019

Details of bundled changes.

Comparing: acfe4b2...21158df

react-native-renderer

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
ReactNativeRenderer-dev.js +0.1% 0.0% 749.93 KB 750.39 KB 158.89 KB 158.89 KB RN_OSS_DEV
ReactNativeRenderer-profiling.js 0.0% -0.0% 286.23 KB 286.23 KB 49.33 KB 49.33 KB RN_FB_PROFILING
ReactFabric-dev.js +0.1% 0.0% 755.34 KB 755.83 KB 159.72 KB 159.73 KB RN_OSS_DEV
ReactFabric-prod.js 0.0% 0.0% 268.61 KB 268.61 KB 46.14 KB 46.14 KB RN_OSS_PROD
ReactFabric-dev.js +0.1% 0.0% 755.52 KB 756.01 KB 159.8 KB 159.81 KB RN_FB_DEV
ReactNativeRenderer-prod.js 0.0% 0.0% 276.91 KB 276.91 KB 47.54 KB 47.54 KB RN_OSS_PROD
ReactNativeRenderer-dev.js +0.1% 0.0% 750.1 KB 750.57 KB 158.97 KB 158.97 KB RN_FB_DEV

react

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react.development.js +0.2% +0.1% 112.99 KB 113.18 KB 28.68 KB 28.71 KB UMD_DEV
react.production.min.js 0.0% 0.0% 12.52 KB 12.52 KB 4.9 KB 4.9 KB UMD_PROD
React-dev.js +0.5% +0.1% 70.49 KB 70.81 KB 18.19 KB 18.21 KB FB_WWW_DEV
React-prod.js 0.0% 0.0% 17.75 KB 17.75 KB 4.62 KB 4.62 KB FB_WWW_PROD
React-profiling.js 0.0% 0.0% 17.75 KB 17.75 KB 4.62 KB 4.62 KB FB_WWW_PROFILING
react.profiling.min.js 0.0% 0.0% 16.05 KB 16.05 KB 6.01 KB 6.01 KB UMD_PROFILING
react.development.js +0.3% +0.1% 72.73 KB 72.93 KB 19.07 KB 19.09 KB NODE_DEV
react.production.min.js 0.0% 0.0% 6.8 KB 6.8 KB 2.81 KB 2.81 KB NODE_PROD

react-dom

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-dom.profiling.min.js 0.0% 0.0% 123.69 KB 123.69 KB 38.81 KB 38.81 KB NODE_PROFILING
react-dom-server.browser.development.js +0.1% +0.1% 140.46 KB 140.67 KB 36.91 KB 36.94 KB UMD_DEV
react-dom-server.browser.production.min.js 0.0% 0.0% 20.39 KB 20.39 KB 7.48 KB 7.48 KB UMD_PROD
react-dom-test-utils.development.js -0.1% -0.0% 56.21 KB 56.18 KB 15.55 KB 15.54 KB UMD_DEV
react-dom-unstable-fizz.browser.development.js 0.0% +0.1% 3.88 KB 3.88 KB 1.55 KB 1.55 KB UMD_DEV
react-dom-test-utils.production.min.js 0.0% 0.0% 11.18 KB 11.18 KB 4.15 KB 4.15 KB UMD_PROD
react-dom-unstable-fizz.browser.production.min.js 0.0% 🔺+0.1% 1.21 KB 1.21 KB 709 B 710 B UMD_PROD
ReactDOMServer-dev.js +0.3% 0.0% 139.78 KB 140.21 KB 35.47 KB 35.48 KB FB_WWW_DEV
react-dom-test-utils.development.js -0.1% -0.0% 54.48 KB 54.45 KB 15.22 KB 15.21 KB NODE_DEV
ReactDOMServer-prod.js 0.0% -0.0% 48.91 KB 48.91 KB 11.18 KB 11.18 KB FB_WWW_PROD
react-dom-unstable-fizz.browser.development.js 0.0% +0.1% 3.71 KB 3.71 KB 1.5 KB 1.5 KB NODE_DEV
react-dom-test-utils.production.min.js 0.0% 🔺+0.1% 10.95 KB 10.95 KB 4.09 KB 4.09 KB NODE_PROD
react-dom-unstable-fizz.browser.production.min.js 0.0% 🔺+0.3% 1.05 KB 1.05 KB 640 B 642 B NODE_PROD
react-dom.development.js 0.0% 0.0% 955.26 KB 955.66 KB 216.05 KB 216.06 KB UMD_DEV
react-dom.production.min.js 0.0% 0.0% 119.74 KB 119.74 KB 38.46 KB 38.46 KB UMD_PROD
react-dom.profiling.min.js 0.0% 0.0% 123.42 KB 123.42 KB 39.56 KB 39.56 KB UMD_PROFILING
ReactDOMUnstableNativeDependencies-dev.js -0.1% -0.1% 58.19 KB 58.11 KB 14.79 KB 14.78 KB FB_WWW_DEV
react-dom.development.js 0.0% 0.0% 949.33 KB 949.73 KB 214.46 KB 214.48 KB NODE_DEV
react-dom-server.node.development.js +0.2% +0.1% 137.5 KB 137.71 KB 36.14 KB 36.17 KB NODE_DEV
react-dom.production.min.js 0.0% 0.0% 119.88 KB 119.88 KB 37.79 KB 37.79 KB NODE_PROD
react-dom-server.node.production.min.js 0.0% 0.0% 20.72 KB 20.72 KB 7.61 KB 7.61 KB NODE_PROD
ReactTestUtils-dev.js -0.1% -0.1% 51.34 KB 51.29 KB 13.94 KB 13.92 KB FB_WWW_DEV
react-dom-server.browser.development.js +0.2% +0.1% 136.39 KB 136.6 KB 35.91 KB 35.94 KB NODE_DEV
react-dom-server.browser.production.min.js 0.0% 0.0% 20.31 KB 20.31 KB 7.46 KB 7.46 KB NODE_PROD
react-dom-unstable-native-dependencies.development.js -0.1% -0.1% 60.14 KB 60.1 KB 15.8 KB 15.78 KB UMD_DEV
react-dom-unstable-native-dependencies.production.min.js 0.0% 0.0% 10.73 KB 10.73 KB 3.67 KB 3.67 KB UMD_PROD
ReactDOM-dev.js +0.1% -0.0% 977.5 KB 978.24 KB 217.03 KB 217.02 KB FB_WWW_DEV
ReactDOM-prod.js -0.1% -0.2% 402.69 KB 402.25 KB 73.25 KB 73.07 KB FB_WWW_PROD
react-dom-unstable-native-dependencies.development.js -0.1% -0.1% 59.82 KB 59.77 KB 15.66 KB 15.65 KB NODE_DEV
react-dom-unstable-fizz.node.development.js 0.0% +0.1% 4.42 KB 4.42 KB 1.65 KB 1.65 KB NODE_DEV
ReactDOM-profiling.js -0.1% -0.2% 404.49 KB 404.04 KB 74.19 KB 74.01 KB FB_WWW_PROFILING
react-dom-unstable-native-dependencies.production.min.js 0.0% 0.0% 10.48 KB 10.48 KB 3.57 KB 3.57 KB NODE_PROD
react-dom-unstable-fizz.node.production.min.js 0.0% 🔺+0.1% 1.21 KB 1.21 KB 696 B 697 B NODE_PROD

ReactDOM: size: 0.0%, gzip: 0.0%

React: size: 0.0%, gzip: 0.0%

Size changes (experimental)

Generated by 🚫 dangerJS against 21158df

}
}

function hasIfInParents(node) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: hasIfDEVInParents

Copy link
Collaborator

@gaearon gaearon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's make the check stricter and ask for __DEV__ specifically, and then fix up the remaining three or four cases

@gaearon gaearon force-pushed the walaura-eslint-plugin branch from a34904e to 1870097 Compare December 6, 2019 17:33
@gaearon gaearon changed the base branch from walaura-eslint-plugin to master December 6, 2019 18:01
Copy link
Collaborator

@gaearon gaearon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Made a few tweaks. Looks good to go.

@gaearon gaearon merged commit b43eec7 into facebook:master Dec 6, 2019
NMinhNguyen referenced this pull request in enzymejs/react-shallow-renderer Jan 29, 2020
* Replace Babel plugin with an ESLint plugin

* Fix ESLint rule violations

* Move shared conditions higher

* Test formatting nits

* Tweak ESLint rule

* Bugfix: inside else branch, 'if' tests are not satisfactory

* Use a stricter check for exactly if (__DEV__)

This makes it easier to see what's going on and matches dominant style in the codebase.

* Fix remaining files after stricter check
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants