chore(gatsby): convert page-component to typescript

packages/gatsby/src/redux/machines/__tests__/page-component.js → packages/gatsby/src/redux/machines/__tests__/page-component.ts

@@ -1,12 +1,13 @@
-const { interpret } = require(`xstate`)
-const machine = require(`../page-component`)
+import { interpret, Interpreter } from "xstate"
+
+import { componentMachine, IContext, IState, IEvent } from "../page-component"
 
 jest.mock(`../../../query`)
 const { enqueueExtractedQueryId, runQueuedQueries } = require(`../../../query`)
 
-const getService = (args = {}) =>
+const getService = (args = {}): Interpreter<IContext, IState, IEvent> =>
   interpret(
-    machine.withContext({
+    componentMachine.withContext({
       componentPath: `/a/path.js`,
       query: ``,
       pages: new Set([`/`]),
@@ -15,7 +16,8 @@ const getService = (args = {}) =>
     })
   ).start()
 
-const sleep = (delay = 50) => new Promise(resolve => setTimeout(resolve, delay))
+const sleep = (delay = 50): Promise<void> =>
+  new Promise(resolve => setTimeout(resolve, delay))
 
 describe(`bootstrap`, () => {
   beforeEach(() => {

packages/gatsby/src/redux/machines/page-component.js → packages/gatsby/src/redux/machines/page-component.ts

@@ -1,17 +1,54 @@
-const {
-  Machine,
-  actions: { assign },
-} = require(`xstate`)
+import { Machine as machine, assign } from "xstate"
 
-module.exports = Machine(
+export interface IContext {
+  isInBootstrap: boolean
+  componentPath: string
+  query: string
+  pages: Set<string>
+}
+
+export interface IState {
+  states: {
+    inactive: {}
+    inactiveWhileBootstrapping: {}
+    queryExtractionGraphQLError: {}
+    queryExtractionBabelError: {}
+    runningPageQueries: {}
+    idle: {}
+  }
+}
+
+type ActionTypes =
+  | "BOOTSTRAP_FINISHED"
+  | "DELETE_PAGE"
+  | "NEW_PAGE_CREATED"
+  | "PAGE_CONTEXT_MODIFIED"
+  | "QUERY_EXTRACTION_GRAPHQL_ERROR"
+  | "QUERY_EXTRACTION_BABEL_ERROR"
+  | "QUERY_EXTRACTION_BABEL_SUCCESS"
+  | "QUERY_CHANGED"
+  | "QUERY_DID_NOT_CHANGE"
+  | "QUERIES_COMPLETE"
+
+export interface IEvent {
+  type: ActionTypes
+  path?: string
+  query?: string
+  page?: { path: string }
+}
+
+const defaultContext: IContext = {
+  isInBootstrap: true,
+  componentPath: ``,
+  query: ``,
+  pages: new Set(``),
+}
+
+export const componentMachine = machine<IContext, IState, IEvent>(
   {
     id: `pageComponents`,
     initial: `inactive`,
-    context: {
-      isInBootstrap: true,
-      componentPath: ``,
-      query: ``,
-    },
+    context: defaultContext,
     on: {
       BOOTSTRAP_FINISHED: {
         actions: `setBootstrapFinished`,
@@ -75,19 +112,19 @@ module.exports = Machine(
   },
   {
     guards: {
-      isBootstrapping: context => context.isInBootstrap,
-      isNotBootstrapping: context => !context.isInBootstrap,
+      isBootstrapping: (context): boolean => context.isInBootstrap,
+      isNotBootstrapping: (context): boolean => !context.isInBootstrap,
     },
     actions: {
-      rerunPageQuery: (_ctx, event) => {
+      rerunPageQuery: (_ctx, event): void => {
         const queryUtil = require(`../../query`)
         // Wait a bit as calling this function immediately triggers
         // an Action call which Redux squawks about.
         setTimeout(() => {
           queryUtil.enqueueExtractedQueryId(event.path)
         }, 0)
       },
-      runPageComponentQueries: (context, event) => {
+      runPageComponentQueries: (context): void => {
         const queryUtil = require(`../../query`)
         // Wait a bit as calling this function immediately triggers
         // an Action call which Redux squawks about.
@@ -96,8 +133,8 @@ module.exports = Machine(
         }, 0)
       },
       setQuery: assign({
-        query: (ctx, event) => {
-          if (typeof event.query !== `undefined` || event.query !== null) {
+        query: (ctx, event): string => {
+          if (typeof event.query !== `undefined` && event.query !== null) {
             return event.query
           } else {
             return ctx.query
@@ -125,11 +162,14 @@ module.exports = Machine(
       }),
       deletePage: assign({
         pages: (ctx, event) => {
-          ctx.pages.delete(event.page.path)
+          if (event.page) {
+            ctx.pages.delete(event.page.path)
+          }
           return ctx.pages
         },
       }),
-      setBootstrapFinished: assign({
+      setBootstrapFinished: assign<IContext>({
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         isInBootstrap: false,
       }),
     },

packages/gatsby/src/redux/reducers/components.js

@@ -1,7 +1,7 @@
 const normalize = require(`normalize-path`)
 const { interpret } = require(`xstate`)
 
-const componentMachine = require(`../machines/page-component`)
+import { componentMachine } from "../machines/page-component"
 
 const services = new Map()
 let programStatus = `BOOTSTRAPPING`