chore(gatsby): Begin typing the redux code (#20457)

* chore(gatsby): Begin typing the redux code * fix tests * undo file resets * move files for git history; * fix a test * some changes to try to address test failures * try to fix this.. * fix imports for es6 code exports * fix more tests * Fix types and async code * undo * isolate different tests * activate all of CI again
gatsbyjs · Jan 15, 2020 · 42da5af · 42da5af
1 parent 7d4d212
commit 42da5af
Show file tree

Hide file tree

Showing 13 changed files with 235 additions and 72 deletions.
diff --git a/jest-transformer.js b/jest-transformer.js
@@ -1,2 +1,11 @@
 const babelPreset = require(`babel-preset-gatsby-package`)()
-module.exports = require(`babel-jest`).createTransformer(babelPreset)
+module.exports = require(`babel-jest`).createTransformer({
+  ...babelPreset,
+  overrides: [
+    ...(babelPreset.overrides || []),
+    {
+      test: `**/*.ts`,
+      plugins: [[`@babel/plugin-transform-typescript`, { isTSX: true }]],
+    },
+  ],
+})
diff --git a/jest.config.js b/jest.config.js
@@ -35,7 +35,7 @@ module.exports = {
   ],
   transform: {
     "^.+\\.js$": `<rootDir>/jest-transformer.js`,
-    "^.+\\.tsx?$": `<rootDir>/node_modules/ts-jest/preprocessor.js`,
+    "^.+\\.tsx?$": `<rootDir>/jest-transformer.js`,
   },
   moduleNameMapper: {
     "^highlight.js$": `<rootDir>/node_modules/highlight.js/lib/index.js`,
@@ -52,7 +52,9 @@ module.exports = {
     },
   },
   collectCoverageFrom: coverageDirs,
-  reporters: [`default`].concat(useCoverage ? `jest-junit` : []),
+  reporters: process.env.CI
+    ? [[`jest-silent-reporter`, { useDots: true }]]
+    : [`default`].concat(useCoverage ? `jest-junit` : []),
   testEnvironment: `jest-environment-jsdom-fourteen`,
   moduleFileExtensions: [`js`, `jsx`, `ts`, `tsx`, `json`],
 }
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "@babel/runtime": "^7.7.7",
     "@lerna/prompt": "3.18.5",
     "@types/express": "^4.17.2",
+    "@types/fs-extra": "^8.0.1",
     "@types/got": "^9.6.9",
     "@types/jest": "^24.0.23",
     "@types/node": "^12.12.11",
@@ -37,6 +38,7 @@
     "jest-environment-jsdom-fourteen": "^0.1.0",
     "jest-junit": "^6.4.0",
     "jest-serializer-path": "^0.1.15",
+    "jest-silent-reporter": "^0.1.2",
     "joi": "^14.3.1",
     "js-yaml": "^3.13.1",
     "lerna": "^3.19.0",

diff --git a/packages/gatsby-plugin-sitemap/src/__tests__/gatsby-node.js b/packages/gatsby-plugin-sitemap/src/__tests__/gatsby-node.js
@@ -5,7 +5,7 @@ const path = require(`path`)
 const sitemap = require(`sitemap`)
 
 const { onPostBuild } = require(`../gatsby-node`)
-const internals = require(`../internals`)
+import * as internals from "../internals"
 const pathPrefix = ``
 
 beforeEach(() => {

diff --git a/packages/gatsby/src/query/query-compiler.js b/packages/gatsby/src/query/query-compiler.js
@@ -28,7 +28,7 @@ const {
 
 const getGatsbyDependents = require(`../utils/gatsby-dependents`)
 const { store } = require(`../redux`)
-const { actions } = require(`../redux/actions/internal`)
+import * as actions from "../redux/actions/internal"
 const { default: FileParser } = require(`./file-parser`)
 const {
   graphqlError,

diff --git a/packages/gatsby/src/redux/actions/add-page-dependency.js b/packages/gatsby/src/redux/actions/add-page-dependency.js
@@ -1,5 +1,5 @@
 const { store } = require(`../`)
-const { actions } = require(`./internal.js`)
+import * as actions from "./internal"
 
 function createPageDependency({ path, nodeId, connection }) {
   const state = store.getState()

diff --git a/packages/gatsby/src/redux/actions/index.js b/packages/gatsby/src/redux/actions/index.js
@@ -1,7 +1,7 @@
 const { bindActionCreators } = require(`redux`)
 const { store } = require(`..`)
 
-const { actions: internalActions } = require(`./internal`)
+import * as internalActions from "./internal"
 const { actions: publicActions } = require(`./public`)
 const {
   actions: restrictedActions,

diff --git a/...ages/gatsby/src/redux/actions/internal.js → ...ages/gatsby/src/redux/actions/internal.ts b/...ages/gatsby/src/redux/actions/internal.js → ...ages/gatsby/src/redux/actions/internal.ts
@@ -1,7 +1,18 @@
-// @flow
-import type { Plugin } from "./types"
+import {
+  ProgramStatus,
+  ICreatePageDependencyAction,
+  IDeleteComponentDependenciesAction,
+  IReplaceComponentQueryAction,
+  IReplaceStaticQueryAction,
+  IQueryExtractedAction,
+  IQueryExtractionGraphQLErrorAction,
+  IQueryExtractedBabelSuccessAction,
+  IQueryExtractionBabelErrorAction,
+  ISetProgramStatusAction,
+  IPageQueryRunAction,
+} from "../types"
 
-const actions = {}
+// import type { Plugin } from "./types"
 
 /**
  * Create a dependency between a page and data. Probably for
@@ -12,14 +23,14 @@ const actions = {}
  * @param {string} $0.connection A connection type
  * @private
  */
-actions.createPageDependency = (
+export const createPageDependency = (
   {
     path,
     nodeId,
     connection,
-  }: { path: string, nodeId: string, connection: string },
-  plugin: string = ``
-) => {
+  }: { path: string; nodeId: string; connection: string },
+  plugin = ``
+): ICreatePageDependencyAction => {
   return {
     type: `CREATE_COMPONENT_DEPENDENCY`,
     plugin,
@@ -37,7 +48,9 @@ actions.createPageDependency = (
  * @param {Array} paths the paths to delete.
  * @private
  */
-actions.deleteComponentsDependencies = (paths: string[]) => {
+export const deleteComponentsDependencies = (
+  paths: string[]
+): IDeleteComponentDependenciesAction => {
   return {
     type: `DELETE_COMPONENTS_DEPENDENCIES`,
     payload: {
@@ -51,13 +64,13 @@ actions.deleteComponentsDependencies = (paths: string[]) => {
  * this to store the query with its component.
  * @private
  */
-actions.replaceComponentQuery = ({
+export const replaceComponentQuery = ({
   query,
   componentPath,
 }: {
-  query: string,
-  componentPath: string,
-}) => {
+  query: string
+  componentPath: string
+}): IReplaceComponentQueryAction => {
   return {
     type: `REPLACE_COMPONENT_QUERY`,
     payload: {
@@ -72,7 +85,10 @@ actions.replaceComponentQuery = ({
  * components, it calls this to store the query with its component.
  * @private
  */
-actions.replaceStaticQuery = (args: any, plugin?: ?Plugin = null) => {
+export const replaceStaticQuery = (
+  args: any,
+  plugin: Plugin | null | undefined = null
+): IReplaceStaticQueryAction => {
   return {
     type: `REPLACE_STATIC_QUERY`,
     plugin,
@@ -91,11 +107,11 @@ actions.replaceStaticQuery = (args: any, plugin?: ?Plugin = null) => {
  * @param {query} $0.query The GraphQL query that was extracted from the component.
  * @private
  */
-actions.queryExtracted = (
-  { componentPath, query },
+export const queryExtracted = (
+  { componentPath, query }: { componentPath: string; query: string },
   plugin: Plugin,
   traceId?: string
-) => {
+): IQueryExtractedAction => {
   return {
     type: `QUERY_EXTRACTED`,
     plugin,
@@ -114,11 +130,11 @@ actions.queryExtracted = (
  * @param {error} $0.error The GraphQL query that was extracted from the component.
  * @private
  */
-actions.queryExtractionGraphQLError = (
-  { componentPath, error },
+export const queryExtractionGraphQLError = (
+  { componentPath, error }: { componentPath: string; error: string },
   plugin: Plugin,
   traceId?: string
-) => {
+): IQueryExtractionGraphQLErrorAction => {
   return {
     type: `QUERY_EXTRACTION_GRAPHQL_ERROR`,
     plugin,
@@ -137,11 +153,11 @@ actions.queryExtractionGraphQLError = (
  * its query read.
  * @private
  */
-actions.queryExtractedBabelSuccess = (
+export const queryExtractedBabelSuccess = (
   { componentPath },
   plugin: Plugin,
   traceId?: string
-) => {
+): IQueryExtractedBabelSuccessAction => {
   return {
     type: `QUERY_EXTRACTION_BABEL_SUCCESS`,
     plugin,
@@ -160,11 +176,11 @@ actions.queryExtractedBabelSuccess = (
  * @param {error} $0.error The Babel error object
  * @private
  */
-actions.queryExtractionBabelError = (
-  { componentPath, error },
+export const queryExtractionBabelError = (
+  { componentPath, error }: { componentPath: string; error: Error },
   plugin: Plugin,
   traceId?: string
-) => {
+): IQueryExtractionBabelErrorAction => {
   return {
     type: `QUERY_EXTRACTION_BABEL_ERROR`,
     plugin,
@@ -179,7 +195,11 @@ actions.queryExtractionBabelError = (
  * @param {string} Program status
  * @private
  */
-actions.setProgramStatus = (status, plugin: Plugin, traceId?: string) => {
+export const setProgramStatus = (
+  status: ProgramStatus,
+  plugin: Plugin,
+  traceId?: string
+): ISetProgramStatusAction => {
   return {
     type: `SET_PROGRAM_STATUS`,
     plugin,
@@ -194,17 +214,15 @@ actions.setProgramStatus = (status, plugin: Plugin, traceId?: string) => {
  * @param {string} Path to the page component that changed.
  * @private
  */
-actions.pageQueryRun = (
+export const pageQueryRun = (
   { path, componentPath, isPage },
   plugin: Plugin,
   traceId?: string
-) => {
+): IPageQueryRunAction => {
   return {
     type: `PAGE_QUERY_RUN`,
     plugin,
     traceId,
     payload: { path, componentPath, isPage },
   }
 }
-
-module.exports = { actions }
diff --git a/packages/gatsby/src/redux/index.js → packages/gatsby/src/redux/index.ts b/packages/gatsby/src/redux/index.js → packages/gatsby/src/redux/index.ts
@@ -1,16 +1,23 @@
-const Redux = require(`redux`)
-const _ = require(`lodash`)
+import {
+  applyMiddleware,
+  combineReducers,
+  createStore,
+  Store,
+  Middleware,
+} from "redux"
+import _ from "lodash"
 
-const mitt = require(`mitt`)
-const thunk = require(`redux-thunk`).default
-const reducers = require(`./reducers`)
-const { writeToCache, readFromCache } = require(`./persist`)
+import mitt from "mitt"
+import thunk from "redux-thunk"
+import reducers from "./reducers"
+import { writeToCache, readFromCache } from "./persist"
+import { IReduxState, ActionsUnion } from "./types"
 
 // Create event emitter for actions
-const emitter = mitt()
+export const emitter = mitt()
 
 // Read old node data from cache.
-const readState = () => {
+export const readState = (): IReduxState => {
   try {
     const state = readFromCache()
     if (state.nodes) {
@@ -32,26 +39,30 @@ const readState = () => {
   } catch (e) {
     // ignore errors.
   }
-  return {}
+  // BUG: Would this not cause downstream bugs? seems likely. Why wouldn't we just
+  // throw and kill the program?
+  return {} as IReduxState
 }
 
 /**
  * Redux middleware handling array of actions
  */
-const multi = ({ dispatch }) => next => action =>
+const multi: Middleware = ({ dispatch }) => next => (
+  action: ActionsUnion
+): ActionsUnion | ActionsUnion[] =>
   Array.isArray(action) ? action.filter(Boolean).map(dispatch) : next(action)
 
-const configureStore = initialState =>
-  Redux.createStore(
-    Redux.combineReducers({ ...reducers }),
+export const configureStore = (initialState: IReduxState): Store<IReduxState> =>
+  createStore(
+    combineReducers({ ...reducers }),
     initialState,
-    Redux.applyMiddleware(thunk, multi)
+    applyMiddleware(thunk, multi)
   )
 
-const store = configureStore(readState())
+export const store = configureStore(readState())
 
 // Persist state.
-const saveState = () => {
+export const saveState = (): void => {
   const state = store.getState()
   const pickedState = _.pick(state, [
     `nodes`,
@@ -70,11 +81,3 @@ store.subscribe(() => {
   const lastAction = store.getState().lastAction
   emitter.emit(lastAction.type, lastAction)
 })
-
-module.exports = {
-  emitter,
-  store,
-  configureStore,
-  readState,
-  saveState,
-}
diff --git a/packages/gatsby/src/redux/persist.js b/packages/gatsby/src/redux/persist.js
diff --git a/packages/gatsby/src/redux/persist.ts b/packages/gatsby/src/redux/persist.ts
@@ -0,0 +1,12 @@
+import v8 from "v8"
+import { readFileSync, writeFileSync } from "fs-extra"
+import { IReduxState } from "./types"
+
+const file = (): string => `${process.cwd()}/.cache/redux.state`
+
+export const readFromCache = (): IReduxState =>
+  v8.deserialize(readFileSync(file()))
+
+export const writeToCache = (contents: IReduxState): void => {
+  writeFileSync(file(), v8.serialize(contents))
+}