From e62c37d91da021080db032ab94a2ad1a44584d71 Mon Sep 17 00:00:00 2001 From: Victor Zhou Date: Mon, 8 Apr 2019 11:53:56 -0400 Subject: [PATCH] Integrate Flow typing --- .flowconfig | 12 +++++++++++ README.md | 1 + gatsby-config.js | 3 ++- package.json | 34 +++++++++++++++++-------------- src/components/Sidebar/Sidebar.js | 15 +++++++++++--- src/flow/CSSModuleStub.js | 6 ++++++ src/templates/index-template.js | 8 +++++++- tests/jest-preprocess.js | 5 +++-- yarn.lock | 29 ++++++++++++++++++++++++++ 9 files changed, 91 insertions(+), 22 deletions(-) create mode 100644 .flowconfig create mode 100644 src/flow/CSSModuleStub.js diff --git a/.flowconfig b/.flowconfig new file mode 100644 index 0000000..4b5438f --- /dev/null +++ b/.flowconfig @@ -0,0 +1,12 @@ +[ignore] + +[include] + +[libs] + +[lints] + +[options] +module.name_mapper.extension='scss' -> '/src/flow/CSSModuleStub.js' + +[strict] diff --git a/README.md b/README.md index 3ddc834..ab65ef0 100644 --- a/README.md +++ b/README.md @@ -34,6 +34,7 @@ + [Netlify CMS](https://www.netlifycms.org) support. + Google Analytics. + Disqus Comments. ++ [Flow](https://flow.org/) static type checking. ## Quick Start diff --git a/gatsby-config.js b/gatsby-config.js index 790cac8..f452400 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -185,6 +185,7 @@ module.exports = { camelCase: false, } } - } + }, + 'gatsby-plugin-flow', ] }; diff --git a/package.json b/package.json index dc3f1bb..5792b25 100644 --- a/package.json +++ b/package.json @@ -8,9 +8,10 @@ "build": "yarn run clean && gatsby build", "deploy": "yarn run clean && gatsby build --prefix-paths && gh-pages -d public", "clean": "rimraf .cache public", + "flow": "flow", "lint:js": "eslint --cache --ext .js,.jsx --ignore-pattern public .", "lint:scss": "stylelint \"src/**/*.scss\"", - "lint": "concurrently \"yarn run lint:js\" \"yarn run lint:scss\"", + "lint": "concurrently \"yarn run lint:js\" \"yarn run lint:scss\" \"yarn flow\"", "test": "jest --config ./tests/jest-config.js", "test:coverage": "jest --coverage --config ./tests/jest-config.js", "test:watch": "jest --watch --config ./tests/jest-config.js" @@ -44,6 +45,7 @@ "gatsby-link": "^2.0.16", "gatsby-plugin-catch-links": "^2.0.13", "gatsby-plugin-feed": "^2.1.0", + "gatsby-plugin-flow": "^1.0.4", "gatsby-plugin-google-gtag": "^1.0.16", "gatsby-plugin-manifest": "^2.0.26", "gatsby-plugin-netlify": "^2.0.13", @@ -78,34 +80,36 @@ "react-helmet": "^5.2.0" }, "devDependencies": { - "@babel/plugin-proposal-optional-chaining": "7.0.0", + "@babel/core": "7.0.0", "@babel/plugin-proposal-class-properties": "7.0.0", + "@babel/plugin-proposal-optional-chaining": "7.0.0", + "@babel/plugin-transform-flow-strip-types": "^7.4.0", "@babel/preset-env": "7.0.0", "@babel/preset-react": "7.0.0", - "@babel/core": "7.0.0", + "autoprefixer": "9.5.1", "babel-core": "7.0.0-bridge.0", + "babel-eslint": "10.0.1", "babel-jest": "23.6.0", - "identity-obj-proxy": "3.0.0", - "react-test-renderer": "16.8.6", - "jest": "23.6.0", - "jest-cli": "23.6.0", - "rimraf": "2.6.3", + "browserslist": "4.5.4", "concurrently": "4.1.0", - "stylelint": "9.10.1", - "stylelint-scss": "3.5.4", - "stylelint-config-recommended-scss": "3.2.0", "eslint": "5.16.0", "eslint-config-airbnb-base": "13.1.0", - "eslint-plugin-jsx-a11y": "6.2.1", "eslint-plugin-import": "2.16.0", "eslint-plugin-jest": "22.4.1", + "eslint-plugin-jsx-a11y": "6.2.1", "eslint-plugin-react": "7.12.4", "eslint-watch": "5.0.1", - "babel-eslint": "10.0.1", + "flow-bin": "^0.96.0", "gh-pages": "2.0.1", + "identity-obj-proxy": "3.0.0", + "jest": "23.6.0", + "jest-cli": "23.6.0", "lost": "8.3.1", "postcss-pxtorem": "4.0.1", - "autoprefixer": "9.5.1", - "browserslist": "4.5.4" + "react-test-renderer": "16.8.6", + "rimraf": "2.6.3", + "stylelint": "9.10.1", + "stylelint-config-recommended-scss": "3.2.0", + "stylelint-scss": "3.5.4" } } diff --git a/src/components/Sidebar/Sidebar.js b/src/components/Sidebar/Sidebar.js index aa7fda4..a210b29 100644 --- a/src/components/Sidebar/Sidebar.js +++ b/src/components/Sidebar/Sidebar.js @@ -1,3 +1,4 @@ +// @flow import React from 'react'; import { graphql, StaticQuery } from 'gatsby'; import Author from './Author'; @@ -6,7 +7,15 @@ import Copyright from './Copyright'; import Menu from './Menu'; import styles from './Sidebar.module.scss'; -export const PureSidebar = ({ data, isIndex }) => { +type Props = { + +isIndex: ?boolean, +}; + +type PureProps = Props & { + +data: Object, +}; + +export const PureSidebar = ({ data, isIndex }: PureProps) => { const { author, copyright, @@ -25,7 +34,7 @@ export const PureSidebar = ({ data, isIndex }) => { ); }; -export const Sidebar = (props) => ( +export const Sidebar = (props: Props) => ( ( name photo bio - contacts { + contacts { twitter telegram github diff --git a/src/flow/CSSModuleStub.js b/src/flow/CSSModuleStub.js new file mode 100644 index 0000000..0df60af --- /dev/null +++ b/src/flow/CSSModuleStub.js @@ -0,0 +1,6 @@ +// @flow +type CSSModule = { + [key: string]: string, +}; +const emptyCSSModule: CSSModule = {}; +export default emptyCSSModule; diff --git a/src/templates/index-template.js b/src/templates/index-template.js index ff5bbc2..eb84268 100644 --- a/src/templates/index-template.js +++ b/src/templates/index-template.js @@ -1,3 +1,4 @@ +// @flow import React from 'react'; import { graphql } from 'gatsby'; import Layout from '../components/Layout'; @@ -6,7 +7,12 @@ import Feed from '../components/Feed'; import Page from '../components/Page'; import Pagination from '../components/Pagination'; -const IndexTemplate = ({ data, pageContext }) => { +type Props = { + +data: Object, + +pageContext: Object, +}; + +const IndexTemplate = ({ data, pageContext }: Props) => { const { title: siteTitle, subtitle: siteSubtitle diff --git a/tests/jest-preprocess.js b/tests/jest-preprocess.js index 3d1a566..9cd07d3 100644 --- a/tests/jest-preprocess.js +++ b/tests/jest-preprocess.js @@ -4,8 +4,9 @@ const babelOptions = { presets: ['@babel/react', '@babel/env'], plugins: [ '@babel/plugin-proposal-optional-chaining', - '@babel/plugin-proposal-class-properties' + '@babel/plugin-proposal-class-properties', + '@babel/plugin-transform-flow-strip-types', ], }; -module.exports = require('babel-jest').createTransformer(babelOptions); \ No newline at end of file +module.exports = require('babel-jest').createTransformer(babelOptions); diff --git a/yarn.lock b/yarn.lock index b505977..7862425 100644 --- a/yarn.lock +++ b/yarn.lock @@ -586,6 +586,14 @@ "@babel/helper-plugin-utils" "^7.0.0" "@babel/plugin-syntax-flow" "^7.2.0" +"@babel/plugin-transform-flow-strip-types@^7.4.0": + version "7.4.0" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.4.0.tgz#f3c59eecff68c99b9c96eaafe4fe9d1fa8947138" + integrity sha512-C4ZVNejHnfB22vI2TYN4RUp2oCmq6cSEAg4RygSvYZUECRqUu9O4PMEMNJ4wsemaRGg27BbgYctG4BZh+AgIHw== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-syntax-flow" "^7.2.0" + "@babel/plugin-transform-for-of@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.0.0.tgz#f2ba4eadb83bd17dc3c7e9b30f4707365e1c3e39" @@ -906,6 +914,14 @@ js-levenshtein "^1.1.3" semver "^5.3.0" +"@babel/preset-flow@^7.0.0-rc.1": + version "7.0.0" + resolved "https://registry.yarnpkg.com/@babel/preset-flow/-/preset-flow-7.0.0.tgz#afd764835d9535ec63d8c7d4caf1c06457263da2" + integrity sha512-bJOHrYOPqJZCkPVbG1Lot2r5OSsB+iUOaxiHdlOeB1yPWS6evswVHwvkDLZ54WTaTRIk89ds0iHmGZSnxlPejQ== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/plugin-transform-flow-strip-types" "^7.0.0" + "@babel/preset-react@7.0.0", "@babel/preset-react@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.0.0.tgz#e86b4b3d99433c7b3e9e91747e2653958bc6b3c0" @@ -5801,6 +5817,11 @@ flatten@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782" +flow-bin@^0.96.0: + version "0.96.0" + resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.96.0.tgz#3b0379d97304dc1879ae6db627cd2d6819998661" + integrity sha512-OSxERs0EdhVxEVCst/HmlT/RcnXsQQIRqcfK9J9wC8/93JQj+xQz4RtlsmYe1PSRYaozuDLyPS5pIA81Zwzaww== + flush-write-stream@^1.0.0: version "1.0.3" resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.0.3.tgz#c5d586ef38af6097650b49bc41b55fabb19f35bd" @@ -6028,6 +6049,14 @@ gatsby-plugin-feed@^2.1.0: lodash.merge "^4.6.0" rss "^1.2.2" +gatsby-plugin-flow@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/gatsby-plugin-flow/-/gatsby-plugin-flow-1.0.4.tgz#13a93a734115fb595fc725c319c47a007841d94d" + integrity sha512-HUFDiZIBEU6ZM6gOytKdX0FtgpZyw3vycZwGdY4Y6rtins9iXrfNmnh0pMyb8jVmCWUlxSPu+LMt14sm1QVDOg== + dependencies: + "@babel/preset-flow" "^7.0.0-rc.1" + "@babel/runtime" "^7.0.0" + gatsby-plugin-google-gtag@^1.0.16: version "1.0.16" resolved "https://registry.yarnpkg.com/gatsby-plugin-google-gtag/-/gatsby-plugin-google-gtag-1.0.16.tgz#547cd1302277e99fc7397dbf9d36d7e7a647657c"