Add flow typechecking as a webpack plugin #1152

rricard · 2016-12-04T18:26:46Z

This will only run if a @flow annotation is seen in an user's file:

At the first @flow file found:
- Write a .flowconfig if none exists
- Run flow-typed install
- Add some custom flow-typed installs (implicit jest behind react-scripts for instance)
When a file with an @flow comment changes during a compilation:
- Run a flow check
- If there are some type errors in flow: show warnings
- If flow itself crashes: show error
Refactor

Followup goals:

Return-code-based success of the command (instead of looking for "No Errors!"
Detect if a global flow installation exists, if yes, check its version, if not equal to CRA's version, show a warning that compilation may be slowed down

Ensure the first flow status run was done after complete init (especially flow-typed)
Add flow-typed dir to .gitignore during the first run
Add to end-to-end testing

Followup of a discussion in #72

gaearon · 2016-12-04T21:34:09Z

Neat! Going to look later this week. Want to make a GIF 😄 ?

rricard · 2016-12-04T21:35:10Z

@gaearon Not done yet, will do a gif when I'm completely happy about it!

rricard · 2016-12-04T21:36:08Z

Btw, for now, the code is pretty awful callback hell-spaghetti, I have to admit I got used to promises, almost forgot about working like this!

gaearon · 2016-12-04T21:38:16Z

We depend on Node >= 4 so you should be able to use Promises if you want to.

rricard · 2016-12-04T21:40:09Z

@gaearon Issue is, webpack and vanilla Node API doesn't really expose Promises. I usually use some form of promisifier to handle Node API... I don't want to add more deps than useful.

rricard · 2016-12-04T22:00:50Z

Okay, I checked, there are arrow functions elsewhere in this codebase, I'm going to need that as well!

rricard · 2016-12-05T00:21:25Z

@gaearon It's way better now! I'm more satisfied with it... But I want to see what your review will show... Maybe one problem we may have here is that the flow check is global and not per-file. I can work on that maybe a bit later but I see one issue in not having the global output, we'd lose warnings in test files so I have to give it a few more thoughts before doing that.

Thanks and good luck for the review!

gaearon · 2016-12-05T00:38:50Z

One thing to keep in mind is the scenario where changing file A adds or removes an error from file B. Does this work now?

rricard · 2016-12-05T00:40:38Z

@gaearon As long as A is covered by flow, typechecking project-wide will be recomputed, so we'll see issues being propagated to B if this is the case.

gaearon · 2016-12-05T12:20:42Z

packages/react-dev-utils/FlowTypecheckPlugin.js

+      .then(newOutput => {
+        flowOutput = newOutput;
+        // Output a warning if flow failed
+        if (flowOutput.indexOf('No errors!') < 0) {


Does Flow have IDE-friendly mode outputting JSON or something else parseable so that you don't need to search strings? How does Nuclide Flow integration work?

I can output JSON with flow status --json. Drawback is, I have to redo the output that is already nice and colored. However, I agree comparing with "No errors!" is bad. Maybe I should use the standard error code, which represents a better feedback.

I see, makes sense!

Concerning Nuclide, they use a non documented package that handles the process lifecycle that is, by the way, pretty cool. However, as said before, it is not documented and may be pretty unstable, the advantage here is that we only depend on flow-bin.

Yea, definitely want to go with a lighter way to do it for now.

Return code-based solution works super well!

rricard · 2016-12-05T17:09:59Z

@gaearon Well, I think it's quite complete now, I heavily tested it and covered many edge cases... I'll see how we can add this to the e2e test process... and after that, I think we're good for a final review!

rricard · 2016-12-05T18:01:10Z

Well the addition to the e2e tests pass locally, just waiting for the CI!

gabelevi

This is fantastic! Thanks for building this!

Small note: an empty .flowconfig file should be sufficient! I think the README is just a little out of date. Nowadays, if you run create-react-app and just do

flow init && flow check

you should get 0 errors :)

gabelevi · 2016-12-05T20:08:46Z

packages/react-scripts/config/webpack.config.dev.js

+        '<PROJECT_ROOT>/node_modules/fbjs/.*',
+        '',
+        '[libs]',
+        './flow-typed'


This shouldn't be necessary - Flow automatically treats the <PROJECT_ROOT>/flow-typed directory as a lib directory :)

I ignored that, and this is pretty cool, that'll go as well!

Arr, I still see issues as of flow 0.36.0, here's my output on a jest test:

src/App.test.js:6 6: it('renders without crashing', () => { ^^ identifier `it`. Could not resolve name

Wait, lemme retry 😉

Nah, sorry, I'll have to let that for now...

However, modifying that file doesn't seem to trigger a rebuild.

Likely because it's not part of webpack flow (it's a test after all). So it looks like this integration is a bit limited by not working with test files. Not sure if it's easily fixable or not.

So, yea, unfortunately, for now, we don't have any way to trigger on App.test.js alone. You have to add it toApp.js. However, once you change App.js, a rebuild will be retriggered including the test. In this case, it's random, sometimes flow-typed is correctly seen, sometimes not.

@gaearon By the way, linting in test files will not run as well... I think we need to find a way to run eslint+flow during the test watching... I don't exactly know just yet how to do that but I can always take a look...

@rricard I agree, it would be nice to figure out a way to do this. As a separate action item :-)

@gabelevi don't ask me why, it now works every time with an empty .flowconfig

gabelevi · 2016-12-05T20:10:50Z

packages/react-scripts/config/webpack.config.dev.js

+    new FlowTypecheckPlugin({
+      flowconfig: [
+        '[ignore]',
+        '<PROJECT_ROOT>/node_modules/fbjs/.*',


After facebook/fbjs#182 (which was in fbjs 0.8.5) this shouldn't be necessary! And from testing out create-react-app right now, it seems to install 0.8.6 :)

This is good news, I'll get that out.

gabelevi · 2016-12-05T20:12:34Z

packages/react-scripts/template/README.md


-```js
-node_modules/fbjs/lib/Deferred.js.flow:60


Yeah this might be a little out of date

gaearon · 2016-12-05T20:26:39Z

@gabelevi Thank you for checking in!

gabelevi · 2016-12-05T20:29:15Z

😁 😁 😁 Super excited for this! 😁 😁 😁

rricard · 2016-12-05T21:56:58Z

@gaearon created an issue about those unchecked tests: #1169

rricard · 2016-12-08T17:19:42Z

@gaearon made a PR to check the tests, via a webpack plugin, once again! => #1209

SimenB · 2016-12-08T18:16:55Z

Thoughts on extracting all of these awesome webpack plugins into separate packages? I know I can just depend on react-dev-utils, but that seems kinda weird.

EDIT: Not related to this PR at all, of course... Can open a separate issue if you guys are interested

gaearon · 2016-12-08T18:39:10Z

For now we don't want to add more packages because people will have expectations of a stable release cycle. Instead it is likely we'll need to iterate on them quite a bit before they settle down. We're also not quite ready to make them "proper" because people will start asking for configuration options, come with issues specific to those packages etc. If/when this gets really stable I'd be up for extracting it from react-dev-utils. But not very soon.

rricard · 2017-04-24T18:15:36Z

This is pretty neat! I see that this PR is in good hands!

Timer · 2017-04-24T18:43:33Z

@rricard we decided to chop the flow-typed integration for now, we only want integration with flow to be skin deep (that of an IDE, e.g. VSCode).

This PR should be good to go barring shutting down the flow server when the process exits (which I'm not even sure if that's a huge deal).

rricard · 2017-04-26T23:48:10Z

@Timer good call, flow-typed has always been the annoying part of this PR. I'm not sure it's a good idea to add it in a followup PR. At least not until flow-typed/flow-typed#526 is properly addressed.

Timer · 2017-04-27T02:12:33Z

That, and until all of definitelytyped definitions make their way in (imo).

gaearon · 2017-05-08T16:28:52Z

What is missing here?

gaearon · 2017-05-08T16:29:21Z

This PR should be good to go barring shutting down the flow server when the process exits (which I'm not even sure if that's a huge deal).

I'm fine with keeping the server alive.

Timer · 2017-05-08T17:20:52Z

Only thing missing is disabling this feature for Windows users.
Also, I think it'd be nice if we explicitly use the global flow and not our local when available.

trygveaa · 2017-05-08T18:14:56Z

Also, I think it'd be nice if we explicitly use the global flow and not our local when available.

I'm not sure if that's a good idea. Different projects may use different versions of flow, so the global version may not be correct for the project.

This PR should be good to go barring shutting down the flow server when the process exits (which I'm not even sure if that's a huge deal).

The server might not have been started by this, and even if it was, flow might still be used by other processes, so I don't think it should be shut down.

gaearon · 2017-05-08T18:29:55Z

Only thing missing is disabling this feature for Windows users.

Is this feature slow for Windows users or Flow itself?
We could introduce two stages:

Compiled successfully (Flow checks are still running)
Compiled successfully / with errors / whatever

Timer · 2017-05-08T19:19:37Z

@gaearon flow itself is slow on windows, but I had my VSCode's "Run flow while editing" option ticked, which made my system virtually unusable.
This might not be as exaggerated if this was disabled.

I don't want to disable it because the "feature" is slow, just because it can freeze up your system for periods of time if you have certain options turned on in your editor.

I'll have to do some more testing to see what the best path is going forward, however, I'm windows-machine-less right now.

gaearon · 2017-05-10T10:20:28Z

packages/react-dev-utils/FlowTypecheckPlugin.js

+        ) {
+          return;
+        }
+        const contents = loaderContext.fs.readFileSync(module.resource, 'utf8');


Is this not slowing down the build? Seems suspicious to read every file if Webpack also does it by itself.

loaderContext.fs.readFileSync is webpack's memory file system, not the real filesystem.
We're basically doing cache[key].

gaearon · 2017-05-15T22:30:02Z

After some discussion we're pushing this back to 0.11.

In particular, it doesn't seem right to wait for Flow to declare the build to be complete.
Instead, @Timer plans to investigate using the new Flow push API that Nuclide is using.

In the UI, we will probably show Flow check and Webpack compilation as two separate "panes" that don't wait for each other.

rricard · 2017-06-06T12:05:53Z

@gaearon @Timer I'm back, I'd love to sync with you if you need help on finishing that. I can particularly help to investigate the push API.

mkozhukharenko · 2017-12-13T07:28:38Z

any updates?

TryingToImprove · 2017-12-13T08:23:38Z

packages/react-scripts/config/webpack.config.dev.js

@@ -16,6 +16,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
+var FlowTypecheckPlugin = require('react-dev-utils/FlowTypecheckPlugin');


All the other imports uses const, so this not also? :)

gaearon · 2018-01-09T12:07:35Z

Really sorry about this—it has gotten stale and I think we won't be pursuing this further ourselves. The Flow team is not focused on supported integrations right now so we'd always have to be playing catch-up.

That said if you're interested in reviving this on top of an API used by Nuclide, and solve the wait-before-build problem then we can revisit this.

Thanks a lot for prototyping it!

facebook-github-bot added the CLA Signed label Dec 4, 2016

rricard changed the title ~~[In progress] Add flow typechecking as a webpack plugin~~ Add flow typechecking as a webpack plugin Dec 5, 2016

gaearon reviewed Dec 5, 2016

View reviewed changes

gaearon added this to the 0.9.0 milestone Dec 5, 2016

rricard force-pushed the integrate-flow branch from a41b5b6 to 8b79f87 Compare December 5, 2016 18:05

gabelevi reviewed Dec 5, 2016

View reviewed changes

rricard mentioned this pull request Dec 5, 2016

ESLint checks (and the upcoming Flow integration) is missing in tests #1169

Closed

rricard mentioned this pull request Dec 7, 2016

Add instructions to use flow-typed #1067

Closed

ggregoire mentioned this pull request Dec 8, 2016

Flow errors about react-native and fbjs styled-components/styled-components#255

Closed

rricard force-pushed the integrate-flow branch from d5011d9 to 80bc2cb Compare December 8, 2016 13:56

rricard mentioned this pull request Dec 8, 2016

Track and compile tests in webpack #1209

Closed

rricard force-pushed the integrate-flow branch 2 times, most recently from 6fe3848 to 46829e3 Compare December 8, 2016 17:23

Fix linter errors

dab6f9d

Timer added 4 commits April 24, 2017 16:26

Use default perm check

1cb808e

Handle already running server since it exits with a non-zero

e94387c

Reduce nesting

45e6c29

Simulate a mutex for startFlow

fb4735c

Timer added 2 commits May 3, 2017 23:32

Fix unhandled rejection

800af94

Upgrade flow

ad625f1

Timer mentioned this pull request May 5, 2017

1.0.0 Roadmap #2089

Closed

32 tasks

gaearon reviewed May 10, 2017

View reviewed changes

gaearon modified the milestones: 0.11.0, 0.10.0 May 15, 2017

gaearon assigned Timer May 15, 2017

Timer mentioned this pull request Nov 27, 2017

Generate a starter .flowconfig file on project creation #3506

Closed

TryingToImprove reviewed Dec 13, 2017

View reviewed changes

gaearon closed this Jan 9, 2018

lock bot locked and limited conversation to collaborators Jan 20, 2019


		```js
		node_modules/fbjs/lib/Deferred.js.flow:60

Add flow typechecking as a webpack plugin #1152

Add flow typechecking as a webpack plugin #1152

Conversation

rricard commented Dec 4, 2016 • edited Loading

gaearon commented Dec 4, 2016

rricard commented Dec 4, 2016

rricard commented Dec 4, 2016

gaearon commented Dec 4, 2016

rricard commented Dec 4, 2016

rricard commented Dec 4, 2016 • edited Loading

rricard commented Dec 5, 2016 • edited Loading

gaearon commented Dec 5, 2016

rricard commented Dec 5, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rricard Dec 5, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rricard commented Dec 5, 2016

rricard commented Dec 5, 2016

gabelevi left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon commented Dec 5, 2016

gabelevi commented Dec 5, 2016

rricard commented Dec 5, 2016

rricard commented Dec 8, 2016 • edited Loading

SimenB commented Dec 8, 2016 • edited Loading

gaearon commented Dec 8, 2016

rricard commented Apr 24, 2017

Timer commented Apr 24, 2017

rricard commented Apr 26, 2017

Timer commented Apr 27, 2017

gaearon commented May 8, 2017

gaearon commented May 8, 2017

Timer commented May 8, 2017

trygveaa commented May 8, 2017 • edited Loading

gaearon commented May 8, 2017

Timer commented May 8, 2017 • edited Loading

Choose a reason for hiding this comment

Timer May 10, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon commented May 15, 2017

rricard commented Jun 6, 2017

mkozhukharenko commented Dec 13, 2017

Choose a reason for hiding this comment

gaearon commented Jan 9, 2018

rricard commented Dec 4, 2016 •

edited

Loading

rricard commented Dec 4, 2016 •

edited

Loading

rricard commented Dec 5, 2016 •

edited

Loading

rricard Dec 5, 2016 •

edited

Loading

gabelevi left a comment •

edited

Loading

rricard commented Dec 8, 2016 •

edited

Loading

SimenB commented Dec 8, 2016 •

edited

Loading

trygveaa commented May 8, 2017 •

edited

Loading

Timer commented May 8, 2017 •

edited

Loading

Timer May 10, 2017 •

edited

Loading