-
Notifications
You must be signed in to change notification settings - Fork 301
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[docs] add app archetype flow docs (#816)
* add app archetype flow docs * add links to docs * add flow faq * include gist contents * add code blocks type & polish text
- Loading branch information
Showing
4 changed files
with
190 additions
and
79 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,11 @@ | ||
| # Electrode React Application Archetype | ||
|
|
||
| The application archetype is a pair of npm modules that provide common patterns and configurations for developing a universal React application. With the application generator, you can quickly create and start developing a React application. The defaults generally are well suited for many applications, but it is possible to customize some features and enable more advanced features for your specific needs. | ||
| The application archetype is a pair of npm modules that provide common patterns and configurations for developing a universal React application. With the application generator, you can quickly create and start developing a React application. The defaults generally are well suited for many applications, but it is possible to customize some features and enable more advanced features for your specific needs. | ||
|
|
||
| - [Customize Config](/chapter1/intermediate/app-archetype/customize-config.md) | ||
| - [Eslint Config](/chapter1/intermediate/app-archetype/eslint.md) | ||
| - [Webpack Config](/chapter1/intermediate/app-archetype/webpack-config.md) | ||
| - [Environment Variables](/chapter1/intermediate/app-archetype/env-vars.md) | ||
| - [Extract Styles](/chapter1/intermediate/app-archetype/extract-styles.md) | ||
| - [Unit Tests](/chapter1/intermediate/app-archetype/unit-tests.md) | ||
| - [Customize Config](/chapter1/intermediate/app-archetype/customize-config.md) | ||
| - [Eslint Config](/chapter1/intermediate/app-archetype/eslint.md) | ||
| - [Webpack Config](/chapter1/intermediate/app-archetype/webpack-config.md) | ||
| - [Environment Variables](/chapter1/intermediate/app-archetype/env-vars.md) | ||
| - [Extract Styles](/chapter1/intermediate/app-archetype/extract-styles.md) | ||
| - [Unit Tests](/chapter1/intermediate/app-archetype/unit-tests.md) | ||
| - [Flow](/chapter1/intermediate/app-archetype/flow.md) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| # Flow FAQs | ||
|
|
||
| The following is a list of Frequently Asked Questions you may encounter when integrating with Flow. We put questions together to solve them in a more scalable way. | ||
|
|
||
| ### How to add type to handlerFunction? | ||
|
|
||
| Issue Description: | ||
|
|
||
| Cannot assign this.handlerFunction.bind(...) to this.handlerFunction because property handlerFunction is not writable. | ||
|
|
||
| Resolution: | ||
|
|
||
| Update `this.handlerFunction = this.handlerFunction.bind(this);` | ||
|
|
||
| to `(this:any).handlerFunction = this.handlerFunction.bind(this);` | ||
|
|
||
| ### How to add type to EventTarget? | ||
|
|
||
| ```javascript | ||
| declare type ElementEventTemplate<E> = { | ||
| target: E | ||
| } & Event; | ||
|
|
||
| declare type InputEvent = ElementEventTemplate<HTMLInputElement>; | ||
| ``` | ||
|
|
||
| ### How to add type to function callbacks? | ||
|
|
||
| ```javascript | ||
| function method(callback: (error: Error | null, value: string | null) => void) { | ||
| // ... | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| # Flow | ||
|
|
||
| [`Flow`](https://flow.org/en/) is a static type checker for Javascript and widely used by front-end developers nowadays. It helps us to code faster, smarter and more confidently. Since Electrode 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 application. | ||
|
|
||
| ### Flow with babel | ||
|
|
||
| The Electrode app archetype adds [`babel-preset-flow`](https://babeljs.io/docs/en/babel-preset-flow/), which contains a [`babel-plugin-transform-flow-strip-types`](https://babeljs.io/docs/en/babel-plugin-transform-flow-strip-types/) plugin for stripping `Flow` types away so that the program can run. It also adds [`flow-bin`](https://github.com/flowtype/flow-bin) to run `Flow` and check if the type is valid. | ||
|
|
||
| ### Flow with eslint | ||
|
|
||
| The Electrode app archetype uses the [`eslint-plugin-flowtype`](https://github.com/gajus/eslint-plugin-flowtype) plugin as the linting rules for ESLint `Flow` type. The rules are enabled via the `.eslintrc-react*` files located in the `electrode-archetype-react-app-dev` configuration folder. | ||
|
|
||
| ### Flow with Electrode app | ||
|
|
||
| ##### - configuration | ||
|
|
||
| When we initiate `Flow` in our app, it creates `.flowconfig` file at the root level of your application. The `.flowconfig` file contains several sections: | ||
|
|
||
| ```markdown | ||
| [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](https://flow.org/en/docs/config/) for more information. | ||
|
|
||
| ##### - Integrate existing App with Flow | ||
|
|
||
| - prepare the code | ||
|
|
||
| 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 to configure `Flow` for your app. | ||
|
|
||
| `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. | ||
|
|
||
| - check the code | ||
|
|
||
| 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`. | ||
|
|
||
| - flow FAQs | ||
|
|
||
| You may experience similar issues when integrating with `Flow`, please check [here](/chapter1/intermediate/app-archetype/flow-faq.md) for solutions. | ||
|
|
||
| ##### - Generate a new App with Flow | ||
|
|
||
| A new Electrode React App can be generated by running with `electrode-ignite`: | ||
|
|
||
| ```bash | ||
| ignite generate-app | ||
| ``` | ||
|
|
||
| To enable `Flow`, you can reply `yes` to the following question: | ||
|
|
||
| ```bash | ||
| Would you like to generate .flowconfig for flow usage? | ||
| ``` | ||
|
|
||
| To know more about `electrode-ignite`, please read [here.](/chapter1/quick-start/start-with-ignite.md) | ||
|
|
||
| ### References | ||
|
|
||
| - [Use Flow with Babel](https://medium.freecodecamp.org/using-flow-with-babel-c04fdca8d14d) | ||
| - [Flow installation](https://flow.org/en/docs/install/) |