├── .flowconfig ├── .gitignore ├── README.md ├── dist ├── browser-module │ ├── my-lib.js │ └── my-lib.js.flow └── node-module │ ├── index.js │ └── index.js.flow ├── package.json ├── rollup.config.js └── src ├── browser-module └── index.js └── node-module └── index.js /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | 3 | [include] 4 | 5 | [libs] 6 | 7 | [lints] 8 | 9 | [options] 10 | 11 | [strict] 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # dist-flow-example 2 | 3 | This is just an example that shows how to distribute flow types for modules 4 | which use `babel` and/or `rollup`. In this example, we have `src/browser-module` 5 | and `src/node-module` to demonstrate each. The `rollup` example _could_ use the 6 | `flow gen-flow-files` command except it suffers from 7 | [this issue](https://github.com/facebook/flow/issues/3281#issuecomment-344009783). 8 | So instead, you can forward all exports in a file with the same name with 9 | `.flow`. See the output in the `dist` directory and the scripts in the 10 | `package.json`. 11 | 12 | I created this for [this blog post](https://blog.kentcdodds.com/3952ad38b357) 13 | where I talk about doing this for my project `paypal-scripts`. 14 | -------------------------------------------------------------------------------- /dist/browser-module/my-lib.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 4 | 5 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 6 | 7 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 8 | 9 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 10 | 11 | var Comp = function (_React$Component) { 12 | _inherits(Comp, _React$Component); 13 | 14 | function Comp() { 15 | var _ref; 16 | 17 | var _temp, _this, _ret; 18 | 19 | _classCallCheck(this, Comp); 20 | 21 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { 22 | args[_key] = arguments[_key]; 23 | } 24 | 25 | return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Comp.__proto__ || Object.getPrototypeOf(Comp)).call.apply(_ref, [this].concat(args))), _this), _this.state = _this.props.initialState, _this.setState = _this.setState.bind(_this), _temp), _possibleConstructorReturn(_this, _ret); 26 | } 27 | 28 | _createClass(Comp, [{ 29 | key: 'render', 30 | value: function render() { 31 | var state = this.state, 32 | setState = this.setState; 33 | 34 | return this.props.render({ state: state, setState: setState }); 35 | } 36 | }]); 37 | 38 | return Comp; 39 | }(React.Component); 40 | 41 | Comp.defaultProps = { 42 | initialState: {}, 43 | render: function render() { 44 | return null; 45 | } 46 | }; 47 | 48 | export default Comp; 49 | -------------------------------------------------------------------------------- /dist/browser-module/my-lib.js.flow: -------------------------------------------------------------------------------- 1 | // @flow 2 | export * from '../../src/browser-module/index.js'; 3 | export { default } from '../../src/browser-module/index.js'; 4 | -------------------------------------------------------------------------------- /dist/node-module/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | function sum(...args) { 7 | return args.length === 0 ? 0 : args.length < 2 ? args[0] : args.reduce((s, a) => a + s); 8 | } 9 | function multiply(...args) { 10 | return args.length === 0 ? 0 : args.length < 2 ? args[0] : args.reduce((s, a) => a * s); 11 | } 12 | function divide(...args) { 13 | return args.length === 0 ? 0 : args.length < 2 ? args[0] : args.reduce((s, a) => s / a); 14 | } 15 | function subtract(...args) { 16 | return args.length === 0 ? 0 : args.length < 2 ? args[0] : args.reduce((s, a) => s - a); 17 | } 18 | 19 | exports.sum = sum; 20 | exports.multiply = multiply; 21 | exports.divide = divide; 22 | exports.subtract = subtract; -------------------------------------------------------------------------------- /dist/node-module/index.js.flow: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | declare export function divide(...args: Array): number | number | number; 4 | declare export function multiply(...args: Array): number | number | number; 5 | declare export function subtract(...args: Array): number | number | number; 6 | declare export function sum(...args: Array): number | number | number; 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dist-flow-example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "devDependencies": { 7 | "babel-cli": "^6.26.0", 8 | "babel-core": "^6.26.0", 9 | "babel-plugin-transform-class-properties": "^6.24.1", 10 | "babel-preset-env": "^1.6.1", 11 | "babel-preset-flow": "^6.23.0", 12 | "flow-bin": "^0.59.0", 13 | "rimraf": "^2.6.2", 14 | "rollup": "^0.52.0", 15 | "rollup-plugin-babel": "^3.0.2" 16 | }, 17 | "files": ["dist", "src", "!__mocks__", "!__tests__"], 18 | "scripts": { 19 | "prebuild": "rimraf dist && mkdir dist", 20 | "build": "npm run build:node && npm run build:browser", 21 | "build:node": 22 | "babel src/node-module --out-dir dist/node-module --copy-files --ignore __tests__,__mocks__", 23 | "postbuild:node": 24 | "flow gen-flow-files src/node-module --out-dir dist/node-module", 25 | "build:browser": "rollup --config", 26 | "postbuild:browser": 27 | "echo \"// @flow\nexport * from '../../src/browser-module/index.js';\nexport { default } from '../../src/browser-module/index.js';\" > ./dist/browser-module/my-lib.js.flow" 28 | }, 29 | "keywords": [], 30 | "author": "Kent C. Dodds (http://kentcdodds.com/)", 31 | "license": "MIT", 32 | "babel": { 33 | "presets": [ 34 | [ 35 | "env", 36 | { 37 | "targets": { 38 | "node": "current" 39 | } 40 | } 41 | ], 42 | "flow" 43 | ] 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | const rollupBabel = require('rollup-plugin-babel') 2 | 3 | module.exports = { 4 | input: './src/browser-module/index.js', 5 | output: { 6 | file: './dist/browser-module/my-lib.js', 7 | format: 'es', 8 | }, 9 | exports: 'named', 10 | external: ['react'], 11 | plugins: [ 12 | rollupBabel({ 13 | babelrc: false, 14 | presets: [ 15 | [ 16 | 'env', 17 | { 18 | targets: { 19 | browsers: ['ie 10', 'ios 7'], 20 | }, 21 | modules: false, 22 | }, 23 | ], 24 | 'flow', 25 | ], 26 | plugins: ['transform-class-properties'], 27 | }), 28 | ], 29 | } 30 | -------------------------------------------------------------------------------- /src/browser-module/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | import React from 'react' 3 | import type {Node} from 'react' 4 | 5 | type Props = { 6 | initialState: {}, 7 | render: ({state: {}, setState: Function}) => Node, 8 | } 9 | 10 | type State = {} 11 | 12 | class Comp extends React.Component { 13 | static defaultProps = { 14 | initialState: {}, 15 | render: () => null, 16 | } 17 | state = this.props.initialState 18 | setState = this.setState.bind(this) 19 | render() { 20 | const {state, setState} = this 21 | return this.props.render({state, setState}) 22 | } 23 | } 24 | 25 | export default Comp 26 | -------------------------------------------------------------------------------- /src/node-module/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | function sum(...args: number[]) { 4 | return args.length === 0 5 | ? 0 6 | : args.length < 2 ? args[0] : args.reduce((s, a) => a + s) 7 | } 8 | function multiply(...args: number[]) { 9 | return args.length === 0 10 | ? 0 11 | : args.length < 2 ? args[0] : args.reduce((s, a) => a * s) 12 | } 13 | function divide(...args: number[]) { 14 | return args.length === 0 15 | ? 0 16 | : args.length < 2 ? args[0] : args.reduce((s, a) => s / a) 17 | } 18 | function subtract(...args: number[]) { 19 | return args.length === 0 20 | ? 0 21 | : args.length < 2 ? args[0] : args.reduce((s, a) => s - a) 22 | } 23 | 24 | export {sum, multiply, divide, subtract} 25 | --------------------------------------------------------------------------------