torifat / flowtype-loader

Flow loader for webpack

flowtype-loader

Flow loader for webpack

Install

$ npm install --save-dev flowtype-loader

OR, for lazy people like me:

$ npm i -D flowtype-loader

Usage

In your webpack 2.X configuration:

var FlowtypePlugin = require('flowtype-loader/plugin');

module.exports = {
  // ...
  module: {
    rules: [
      {test: /\.js$/, loader: 'flowtype-loader', enforce: 'pre', exclude: /node_modules/},
    ]
  },
  plugins: [
    new FlowtypePlugin()
    // new FlowtypePlugin({cwd: '/path/'})
    // new FlowtypePlugin({failOnError: true})
  ]
  // ...
}

If you are using webpack 1.x:

var FlowtypePlugin = require('flowtype-loader/plugin');

module.exports = {
  // ...
  module: {
    preLoaders: [
      {test: /\.js$/, loader: "flowtype", exclude: /node_modules/}
    ]
  },
  plugins: [
    new FlowtypePlugin()
    // new FlowtypePlugin({cwd: '/path/'})
    // new FlowtypePlugin({failOnError: true})
  ]
  // ...
}

flowtype-loader's Issues

UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: spawn EACCES

I have an error

UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: spawn EACCES

when try to start app on my vagrant (debian jessie x64). If I disable flowtype-plugin the error is gone.

how`bout move FLOW-BIN into DEPENDENCIES instead of DEVDEPENDENCIES in package.json?

then makes flow-bin to be installed automatically

improvement bundling speed?

I am using webpack-dev-server and this loader together.
Excepting speed, It works nicely.
How to improve bundling speed with this loader?

NPM package not working

Though it has latest version 0.2.0, it doesn't contain plugin.js as stated in readme file.
Directly using this library via git+http works,

"flowtype-loader": "git+http://github.com/torifat/flowtype-loader",

Thanks for this handy loader.

Webpack3 support

Now webpack3 is officially released.
Is there any plan to support it?

Watch files for flow type errors

I use npm run start to launch the webpack devserver. It watches my src/ folder for changes and throws compilation errors as well as linter errors.

Now I want flow type errors to appear as part of the above

AFAIK flowtype-loader only checks for flow status when I compile for the first time - not for subsequent compilations

I'm generally new to the whole webpack + flow thingy so forgive me if this can be achieved already.

Why no annotated files？ /*@flow*/ is checked?

compatibility with vue 2.0

I try to combine vue and flow together in my project.

There is a webpack vue plugin: vue-loader，I use it to process .vue file. (A .vue file contents scripts/styles/templates which I use in project).

Vue-loader has an option which I can configure a customize pre loader my self. like this:

module.exports = {
  entry: './src/index.js',
  ...
  module: {
    loaders: [
      { test: /\.js$/, loader: 'flowtype-loader', enforce: 'pre', exclude: /node_modules/ },
      {
        test: /\.vue$/,
        loaders: 'vue-loader',
        options: {
          preLoaders: {
            js: 'flowtype-loader'
          },
        }
      },
    ]
  },
  plugins: [
    new FlowtypePlugin(),
  ],
}

and one of my .vue file like this:

<script>// @flow
  function square(n: number): number {
    return n * n;
  }
  square("2");
</script>

<template>
some html template
</template>

<style lang="scss">
some scss
</style>

When I did this. no error throws out.

I dig into flowtype-loader source code and figure out why. flowtype-loader receive a resourcePath instead of string source. This .vue file start with <script>, not // @flow. Therefore, flow server skip this file.

So, can flowtype-loader pass string source to flow server? Maybe offer an option so that developer can control using string code or file path by themselves.

flowtype-loader doesn't catch type errors in downstream modules

Take this example:

File foo.js

// @flow
export function f() {}

File bar.js:

// @flow
import { f } from './foo'
f()

This type checks. Now if I change foo.js to be:

// @flow
export function f(x: number) {}

webpack recompiles and claims all is well, even though we introduced a type error! Running flow on the command line will catch it:

$ flow
src/components/bar.js:3
  3: f()
     ^^^ function call
  3: f()
     ^^^ undefined (too few arguments, expected default/rest parameters). This type is incompatible with
  2: export function f(x: number) {}
                          ^^^^^^ number. See: src/components/foo.js:2

Now if we just touch bar.js flowtype-loader will notice the problem too, but not before.

It seems that when a file is changed, flowtype-loader restricts its typechecking to just that file, ignoring dependent modules where an error may have been introduced by the change. Is flowtype-loader using some kind of exclusion filter when it runs flow to restrict scope to the changed file? It seems like since the Flow service is already doing all the work to efficiently recompile everything in an incremental fashion, no such filter is necessary or desirable.