Working with Flow

Last updated 7 months ago

Flow is a static type checker for Javascript and is widely used by front-end developers nowadays. It helps us to code faster, smarter and more confidently. Since Electrode Archetype has already got Babel in place, we need to set up Flow with babel: use babel to compile the code and integrate Flow into Electrode app/component.

Flow with babel

The Electrode Archetype adds babel-preset-flow, which contains a babel-plugin-transform-flow-strip-types plugin for stripping Flow types away so that the program can run. It also adds flow-bin to run Flow and check if the type is valid.

Flow with eslint

The Electrode Archetype uses the eslint-plugin-flowtype plugin as the linting rules for ESLint Flow type. The rules are enabled via the .eslintrc-* files located inside the electrode-archetype-react-(app|component)-dev configuration folder.

Flow configuration

When we initiate Flow in our app, it creates a .flowconfig file at the root level of your application.

When we initiate Flowin our component, based on its lerna structure, it creates a .flowconfig file inside the packages/[component] folder, which is the root level of your component.

The .flowconfig file contains several sections:

[ignore]
ignore files matching the specified regular expressions when type checking your code.
[include]
include the specified files or directories.
[libs]
include the specified library definitions when type checking your code.

Checkout here for more information.

Integrate with Flow

Integrate existing app with Flow

Please be sure your electrode-archetype-react-app* version is 5.3.0 or later.

To initialize the Flow, you can run clap initflow. This will generate a default .flowconfig file at the root level to configure Flow for your app.

Integrate existing component with Flow

Please be sure your electrode-archetype-react-component* version is 5.3.0 or later.

To initialize the Flow, you can run clap initflow under the packages/[component] directory. This will generate a default .flowconfig file at the component level to configure Flow for your component.

How to run flow

Flow will only be checked when the user has flow code. To mark the flow files, you can place

// @flow

or

/* @flow */

before any code in the Javascript files.

This flag is in the form of a normal JavaScript comment annotated with @flow. The Flow background process gathers all the files with this flag and uses the type information available from all of these files to ensure consistency and error free programming.

If you want to run the Flow Background Process, you can start the process that allows Flow to check your code incrementally and with great speed by flow status.

To stop the background process, run flow stop.

You can also type flow to accomplish the same effect as status is the default flag to the flow binary. At any point that you want to check for errors, just run flow.

Generate new app/component with Flow

A new Electrode React App can be generated by running with electrode-ignite:

ignite generate-app

A new Electrode React Component can also be generated by running with electrode-ignite:

ignite generate-component

To enable Flow, you can reply yes to the prompt question when generating an app/component by electrode-ignite:

Would you like to generate .flowconfig for flow usage?

This will generate a default .flowconfig file for your app/component. To know more about electrode-ignite, please read here.

Flow FAQs

You may experience similar issues when integrating with Flow, please check here for solutions.

References