Comments (32)
I have implemented a basic version of the flow webpack plugin, that fails the build on errors. You can find it at my fork, which isn't merged upstream yet.
from flow.
a flow pre-loader might be nice, like jshint-loader
from flow.
@jedwards1211 As far as I can tell that plugin won't fail the webpack build if there are flow errors? Is there a plugin that can do that? I thought that would be the whole point of a webpack plugin for flow :D
from flow.
That's what I in intended when I opened this.
from flow.
@breandr Check out babel-plugin-typecheck. I feel that's a better alternative than flowcheck right now.
from flow.
It's at least possible to create a webpack plugin that execs flow status
every time something is recompiled...I'll probably do that at some point if no one else does
from flow.
This is a good question! Looks pretty easy to fix...jsx-loader just needs support a stripTypes flag in addition to the harmony tag. I'll send a PR to https://github.com/petehunt/jsx-loader
from flow.
That's part of it, but the other part would be having Flow run when I make changes to my code. If I were to adopt Flow, I'd want it to integrate into my existing workflow, which is centered around Webpack.
from flow.
The main Flow workflow has Flow running as a daemon in the background. It watches for code changes and notices errors, which it reports to you when you call flow
(aka flow status
).
If you wanted Flow as a prepublish hook or a test-ish thing, there is flow check
which, instead of running as a daemon, runs in the foreground and does a full check from scratch.
from flow.
Created petehunt/jsx-loader#31 for the jsx-loader support
from flow.
that was fast
from flow.
jsx-loader was pushed 2 hours ago. Closing this out.
from flow.
@appsforartists Did you manage to find a good solution for this? flowcheck-loader works up to a point but fails with some advanced features (stage 1 decorators etc.).
from flow.
@appsforartists I figured out a workaround. You can try something like loaders: ['react-hot', 'babel', 'flowcheck', 'babel?stage=0&blacklist=flow']
. See gcanti/flowcheck#19 for further discussion.
from flow.
Any update on a flow pre-loader?
from flow.
I just dump babel results to disk before my packager gets started, in a build directory. There's really no need for these preloaders and adapters.
from flow.
@bebraw Plus I'm guessing that flowcheck would slow down my app at least as much as React PropType checks (which come out at the top of my profiling results and make some mouse drag interactions laggy due to the complexity of my app). So I'd rather just stick with compile-time checks right now.
from flow.
@jedwards1211 Flow is surprisingly fast in daemon mode actually. But yeah, even something like babel-plugin-typecheck is quite nice even if it's not exactly the same.
from flow.
@bebraw yes Flow is fast, but it has nothing to do with flowcheck does it? As far as I understand flowcheck just runs JS code injected into your app to validate at runtime, rather than interacting with a Flow daemon in any way. It's the runtime validation I'd expect to be slow, not the compile-time checks that Flow does.
from flow.
@jedwards1211 Correct. The runtime checks are pretty much equal to what you get with propTypes
as far as I understand. It just generates some runtime asserts there. So it's nowhere near the same, but far better than nothing.
from flow.
any flowtype webpack integration to see flow status results in webpack output ?
from flow.
@jedwards1211 That's the sort of thing I came here looking for. At the moment I'm using eslint-loader for webpack to lint my code every time I change something. It would be awesome to integrate flowtype into that process, and see the output of flow status
whenever webpack detects a change.
from flow.
Oh wait, I just found flow-status-webpack-plugin
: npm | github
from flow.
It figures someone would have done that by now -- thanks for pointing that out!
from flow.
@camjackson heh...I tried it but I don't always see the flow status output, and there is no github or issues link in that npm package, which is the only thing its author has published to npm. The code is simple enough, the problem is that it only outputs status if it got to run flow start
itself, so I'm just going to manually fork it and make it run flow status
regardless.
from flow.
@jedwards1211 Yeah it's annoying when npm doesn't link to github. I managed to find it though if you want to open an issue: https://github.com/diegodurli/flow-status-webpack-plugin
from flow.
@camjackson I did and made a fork; warning!! I would recommend using my fork until my PR gets merged, mainly because the FlowStatusPlugin
constructor in the public package has the surprising side effect of restarting the flow server.
from flow.
@moljac024 right, it doesn't fail the build, which would be helpful.
As an aside, these days instead of using that plugin I just use a separate watch script (though I haven't figured out how to get it to preserve formatting and font weight):
#!/bin/bash
which wr || npm i -g wr
flow status
wr --exec "clear && printf '\e[3J'; flow status" src test
from flow.
Another option I was thinking about is to expose webpack's cache as FUSE filesystem and let flow check files from there.
from flow.
Meanwhile I decided to implement a true [pre]-loader that calls flow check-contents
individually for each file matched and aborts on error.
$ npm install --save-dev flow-bin flow-bin-loader
module.exports = {
// ...
module: {
preLoaders: [
// ...
{
test: /\.js$/,
loader: 'flow-bin',
exclude: /node_modules/,
},
// ...
]
},
// ...
}
The implementation is straightforward enough to fit here:
const spawn = require('child_process').spawn;
module.exports = function(source, map) {
const cb = this.async();
const flow = spawn(require('flow-bin'), ['check-contents']);
let stdout = '';
flow.stdout.on('data', (data) => {
stdout += data;
});
flow.on('close', (code) => {
if(code)
console.log(stdout.replace(/^-(:[0-9]+.*)/, `${this.resourcePath}$1`));
cb(code ? code : null, source, map);
});
flow.stdin.write(source)
flow.stdin.end();
};
from flow.
Still no loader available for flow with webpack ?
from flow.
@bboysathish did you try https://www.npmjs.com/package/flow-bin-loader?
from flow.
Related Issues (20)
- [flow-remove-types] doesn't remove some types HOT 1
- flow_parser.js file increased from 0.7M to 2.7M in v0.210 HOT 4
- `Omit` does not work well with unions HOT 3
- ☂️ Known unsoundness issues
- Partial type does not accept plain empty object literal as a default HOT 5
- Cannot return class type as T: Cannot return `root(...)` because a call signature declaring the expected parameter / return type is missing in `SomeModel` [1] but exists in function type [2].Flow(prop-missing) HOT 2
- Does not narrow down type after undefined/falsy check HOT 1
- Recursive/deep Partial HOT 2
- Bugs in negated `instanceof` expressions HOT 1
- [Question]: How to fix flowgen test after flow update HOT 3
- [Discussion]: Any plans to make Flow more interpopble with TS ecosystem? HOT 5
- Higher order type parameter support HOT 1
- Readme links to 404
- Strange index signature error if you use $Keys<O> instead of the equivalent literal union inside $ReadOnlyArray HOT 1
- [homebrew] automation script needs update HOT 2
- "Unxepcted identifier, expected the token ;" when using await inside of ES module HOT 3
- Can't iterate through chars in a string HOT 4
- Flow does not catch invalid switch statements HOT 1
- Conditional type only works if I inline it HOT 5
- Object with null prototype does not extend interface {} HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flow.