├── .gitignore ├── README.md ├── demo.png ├── index.js ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Flow Babel Webpack Plugin 2 | 3 | A concise tool that glues together [`Flow`](https://flowtype.org/) and [`Webpack`](https://webpack.github.io/), with the help of [`Babel`](https://babeljs.io/). 4 | 5 | It provides you with flow typecheck status in webpack build reports. 6 | 7 | --- 8 | 9 | ### Usage 10 | 11 | Since JS and `Flow` syntax vary slightly, you will need to get rid of the type annotations. 12 | 13 | This is where [`transform-flow-comments`](https://babeljs.io/docs/plugins/transform-flow-comments/) comes in. It converts flow type annotations into comments that `Flow` [understands](https://flowtype.org/blog/2015/02/20/Flow-Comments.html). 14 | 15 | You need to follow a few simple steps. 16 | 17 | #### 1. Install dependencies 18 | 19 | ```sh 20 | # Install Babel and Webpack and save as devDependencies 21 | npm i -D babel-core babel-loader webpack 22 | 23 | # Install FBWP 24 | npm i -D flow-babel-webpack-plugin 25 | ``` 26 | 27 | #### 2. Setup babel and flow 28 | ```sh 29 | # setup .flowconfig 30 | ./node_modules/.bin/flow init 31 | 32 | # or if you have global `flow` 33 | flow init 34 | 35 | # .babelrc file 36 | { 37 | "plugins" : [ 38 | "transform-flow-comments" 39 | ] 40 | } 41 | ``` 42 | 43 | #### 3. Setup webpack config 44 | 45 | ```js 46 | // webpack.config.js file 47 | 48 | var FlowBabelWebpackPlugin = require('flow-babel-webpack-plugin'); 49 | 50 | module.exports = { 51 | entry: './index', 52 | 53 | output: { 54 | filename: 'build.js', 55 | }, 56 | 57 | module: { 58 | loaders: [ 59 | { 60 | test: /\.js$/, 61 | loader: 'babel', 62 | }, 63 | ], 64 | }, 65 | 66 | plugins: [ 67 | new FlowBabelWebpackPlugin(), 68 | ], 69 | } 70 | ``` 71 | 72 | #### And that's it! 73 | 74 | From now on, when you run webpack, you will recieve flow status reports alongside your webpack build log. 75 | 76 | Something like this. 77 | ![](/demo.png) 78 | 79 | #### Options 80 | 81 | It should work pretty well with the defaults, but there are some options available: 82 | 83 | ##### warn 84 | 85 | If you'd prefer to treat Flow issues as webpack warnings instead of errors, you can enable this option. 86 | 87 | ```js 88 | plugins: [ 89 | new FlowBabelWebpackPlugin({ 90 | warn: true, 91 | }), 92 | ], 93 | ``` 94 | 95 | ##### formatter 96 | 97 | You can provide your own error message formatting function in order to customize the output. 98 | 99 | For example: 100 | ```js 101 | plugins: [ 102 | new FlowBabelWebpackPlugin({ 103 | formatter: function (errorCode, errorDetails) { 104 | return 'A Flow error was detected: ' + errorCode + '\n\n' + errorDetails; 105 | }, 106 | }), 107 | ], 108 | ``` 109 | 110 | --- 111 | 112 | ### What's next? 113 | 114 | Nothing much, really. All I wanted was to display flow reports alongside webpack's - nothing fance. 115 | 116 | I might add something more to it, if I find it really useful. Some options are: 117 | 118 | * IO redirection for further logging or processing 119 | * External file checks, i.e., files that lie outside of project's root folder 120 | 121 | If you have something in mind, or something you want, feel free to [ask](https://github.com/zhirzh/flow-babel-webpack-plugin/issues). 122 | -------------------------------------------------------------------------------- /demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhirzh/flow-babel-webpack-plugin/be6da533d93e0e1174ffad615b3e36fd46e13158/demo.png -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var spawnSync = require('child_process').spawnSync; 2 | var flow = require('flow-bin'); 3 | var merge = require('lodash.merge'); 4 | 5 | var store = { 6 | error: null, 7 | flowOptions: [ 8 | 'status', 9 | '--color=always', 10 | ], 11 | options: { 12 | warn: false, 13 | 14 | formatter: function (errorCode, errorDetails) { 15 | return 'Flow: ' + errorCode + '\n\n' + errorDetails; 16 | }, 17 | }, 18 | }; 19 | 20 | 21 | function flowErrorCode(status) { 22 | var error; 23 | switch (status) { 24 | /* 25 | case 0: 26 | error = null; 27 | break; 28 | */ 29 | case 1: 30 | error = 'Server Initializing'; 31 | break; 32 | case 2: 33 | error = 'Type Error'; 34 | break; 35 | case 3: 36 | error = 'Out of Time'; 37 | break; 38 | case 4: 39 | error = 'Kill Error'; 40 | break; 41 | case 6: 42 | error = 'No Server Running'; 43 | break; 44 | case 7: 45 | error = 'Out of Retries'; 46 | break; 47 | case 8: 48 | error = 'Invalid Flowconfig'; 49 | break; 50 | case 9: 51 | error = 'Build Id Mismatch'; 52 | break; 53 | case 10: 54 | error = 'Input Error'; 55 | break; 56 | case 11: 57 | error = 'Lock Stolen'; 58 | break; 59 | case 12: 60 | error = 'Could Not Find Flowconfig'; 61 | break; 62 | case 13: 63 | error = 'Server Out of Date'; 64 | break; 65 | case 14: 66 | error = 'Server Client Directory Mismatch'; 67 | break; 68 | case 15: 69 | error = 'Out of Shared Memory'; 70 | break; 71 | } 72 | 73 | return error; 74 | } 75 | 76 | 77 | function checkFlowStatus(compiler, next) { 78 | var res = spawnSync(flow, store.flowOptions); 79 | var status = res.status; 80 | 81 | if (status !== 0) { 82 | var errorCode = flowErrorCode(status); 83 | var errorDetails = res.stdout.toString() + res.stderr.toString(); 84 | 85 | store.error = new Error(store.options.formatter(errorCode, errorDetails)); 86 | } 87 | 88 | next(); 89 | } 90 | 91 | 92 | function pushError(compilation) { 93 | if (store.error) { 94 | if (store.options.warn) { 95 | compilation.warnings.push(store.error); 96 | } else { 97 | compilation.errors.push(store.error); 98 | } 99 | 100 | store.error = null; 101 | } 102 | } 103 | 104 | 105 | function FlowFlowPlugin(options) { 106 | store.options = merge(store.options, options); 107 | } 108 | 109 | FlowFlowPlugin.prototype.apply = function(compiler) { 110 | compiler.plugin('run', checkFlowStatus); 111 | compiler.plugin('watch-run', checkFlowStatus); 112 | 113 | compiler.plugin('compilation', pushError); 114 | }; 115 | 116 | module.exports = FlowFlowPlugin; 117 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flow-babel-webpack-plugin", 3 | "version": "1.1.1", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "babel-plugin-syntax-flow": { 8 | "version": "6.18.0", 9 | "resolved": "https://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz", 10 | "integrity": "sha1-TDqyCiryaqIM0lmVw5jE63AxDI0=" 11 | }, 12 | "babel-plugin-transform-flow-comments": { 13 | "version": "6.22.0", 14 | "resolved": "https://registry.npmjs.org/babel-plugin-transform-flow-comments/-/babel-plugin-transform-flow-comments-6.22.0.tgz", 15 | "integrity": "sha1-jZSREy8rSKvQZW+Wwg87vW/BdSk=", 16 | "requires": { 17 | "babel-plugin-syntax-flow": "6.18.0", 18 | "babel-runtime": "6.23.0" 19 | } 20 | }, 21 | "babel-runtime": { 22 | "version": "6.23.0", 23 | "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.23.0.tgz", 24 | "integrity": "sha1-CpSJ8UTecO+zzkMArM2zKeL8VDs=", 25 | "requires": { 26 | "core-js": "2.4.1", 27 | "regenerator-runtime": "0.10.5" 28 | } 29 | }, 30 | "core-js": { 31 | "version": "2.4.1", 32 | "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.4.1.tgz", 33 | "integrity": "sha1-TekR5mew6ukSTjQlS1OupvxhjT4=" 34 | }, 35 | "flow-bin": { 36 | "version": "0.49.1", 37 | "resolved": "https://registry.npmjs.org/flow-bin/-/flow-bin-0.49.1.tgz", 38 | "integrity": "sha1-yeRWsxc6dTWk/68olWNSxju44+k=" 39 | }, 40 | "lodash.merge": { 41 | "version": "4.6.0", 42 | "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.0.tgz", 43 | "integrity": "sha1-aYhLoUSsM/5plzemCG3v+t0PicU=" 44 | }, 45 | "regenerator-runtime": { 46 | "version": "0.10.5", 47 | "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz", 48 | "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=" 49 | } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flow-babel-webpack-plugin", 3 | "version": "1.1.1", 4 | "description": "A concise tool that glues together Flow and Webpack, with the help of Babel.", 5 | "main": "index.js", 6 | "dependencies": { 7 | "babel-plugin-transform-flow-comments": "^6.17.0", 8 | "flow-bin": ">=0.44.2 <1", 9 | "lodash.merge": "^4.6.0" 10 | }, 11 | "devDependencies": {}, 12 | "scripts": { 13 | "test": "echo \"Error: no test specified\" && exit 1" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/zhirzh/flow-babel-webpack-plugin.git" 18 | }, 19 | "keywords": [ 20 | "flow", 21 | "flowtype", 22 | "babel", 23 | "webpack" 24 | ], 25 | "author": "Shirsh Zibbu ", 26 | "license": "ISC", 27 | "bugs": { 28 | "url": "https://github.com/zhirzh/flow-babel-webpack-plugin/issues" 29 | }, 30 | "homepage": "https://github.com/zhirzh/flow-babel-webpack-plugin#readme" 31 | } 32 | --------------------------------------------------------------------------------