Add support for Flow syntax

[kabriel]

This issue is a:

• [ ] Bug report
• [X] Feature request
• [ ] Question / support request
• [ ] Other

Would be great to have support for Flow, or a guide on how to add it to my project directly.

[insin]

It looks like Flow no longer requires the weird stub file config it needed last time I looked at it (🎉) , so the create-react-app instructions should work for React apps, as the Babel preset for React currently includes Flow plugins:

1. Run npm install --save-dev flow-bin.
2. Add "flow": "flow" to the scripts section of your package.json. 2.5. Run npm run flow -- init to create a .flowconfig
3. Add // @flow to any files you want to type check (for example, to src/App.js).

---

The latest release of Babel now includes a separate flow preset - we could also add new babel.flow config to enable use of this preset for all project types.

---

We could add a question or flag to the project creation process which would enable adding the extra bit of babel config in nwb.config.js, adding a flow script to package.json when generating it and installing the flow binary.

---

I was also thinking about what an nwb-flow plugin module could do (handle the flow preset dependency and the flow binary dependency, trigger addition of the new bit of Babel config) but I'm not sure if it's worth it.

[kabriel]

Thanks so much for the quick reply! Going to try this out.

[tnrich]

@insin , any movement on this? Is flow useable with nwb currently?

[DrummerHead]

@tnrich I just integrated flow using the instructions above and it "just works"

[eMarek]

Am I the only one who is getting these errors after running npm run flow?

Error: node_modules/nwb/templates/react-component/_package.json:5
  5:   "main": "lib/index.js",{{esModulesPackageConfig}}
                              ^ Unexpected token {

Error: node_modules/nwb/templates/web-module/_package.json:5
  5:   "main": "lib/index.js",{{esModulesPackageConfig}}
                              ^ Unexpected token {

I can not figure it out why flow goes into node_modules and runs checking there.

[ggregoire]

@eMarek same. I added the following to my .flowconfig:

[ignore]
.*/node_modules/nwb/.*

[eMarek]

Not sure why I didn't think about this solution. It works. Thank you!

[bebbi]

And if you add flow for a web-module check this: https://github.com/insin/nwb/issues/461

[sberney]

There's a webpack flow plugin out there that I would rather use. It's very inconvenient to run "yarn flow" manually every so often. With the webpack plugin (nwb uses webpack) it's not required to constantly re-run.