Converted webpack-compilation-hash javascript file to typescript

docs/blog/2020-04-27-building-Serverless-site-faster-with-Gatsby/index.md

@@ -14,6 +14,7 @@ Since 2015 Serverless has been providing a platform to unify all the tools softw
 Any new front-end technologies had to mesh well with the existing site’s architecture. “The Serverless site has a blog and a documentation section, both of which pull Markdown files from GitHub repositories,” says Narayan. “We needed a way to pull those Markdown files while still maintaining a very fluent experience for the content contributors.”
 
 ## Ready to (re)launch with Gatsby 🚀
+
 Previous experience with Gatsby led Codebrahma to choose the React-based framework for the Serverless relaunch. “We had initially explored Gatsby for the rebrand of our own website and another client’s e-commerce site,” says Narayan. “We saw how Gatsby enhances the React ecosystem with its own extensive plug-in ecosystem.”
 
 For the Serverless project, the Codebrahma team recognized that Gatsby could easily support the existing site architecture. “Gatsby is very well suited for pulling Markdown into a blog or documentation section — it has a very nice Markdown plug-in,” says Narayan. “We felt Gatsby was a perfect fit.”
@@ -23,18 +24,21 @@ Prefetching capabilities were another key reason for adopting Gatsby. “The lon
 The Codebrahma developers proposed using Gatsby for the relaunch, and the Serverless team agreed it was the right choice. “The Serverless team learned more about Gatsby and saw some of the social media buzz about how Gatsby was hot tech,” says Narayan. “The only minor concern was about adopting such bleeding-edge technology. But we explained that because Gatsby is built on React, we wouldn’t be tied down to a single platform. Serverless recognized that there was a lot of upside and very little downside, so it was a good bet to take.”
 
 ## Two months to launch
+
 There was pressure to complete the project quickly, with a sharp ten week deadline. Fortunately, a two-person team of front end developers from Codebrahma was able to get up to speed on Gatsby quickly. “The Gatsby documentation is phenomenal,” says Narayan. “To ramp up, all we really had to do was to read all the documentation — and a lot of it was good React practices. It was a smooth ride.”
 
 ![Screen shot of redesigned Serverless.com landing page](./codebrahma_Serverless.jpg)
 
 The Gatsby framework itself substantially accelerated development of the new site. **“On our own, it might have taken us three and a half months to launch the site. Gatsby reduced that time to two months,”** says Narayan. “We didn’t have to worry about building prefetch capabilities, trying to find open source plug-ins, or doing the server-side rendering. Gatsby had the capabilities we needed right out of the box.”
 
 ## Accelerating page loads 10x
+
 The performance benefits of relaunching with Gatsby were apparent right away. “We immediately saw a 2x boost in site performance with a 10x increase in page load speeds,” says Narayan. “Since content is prefetched, pages load in tens of milliseconds instead of hundreds of milliseconds.”
 
 Better performance and faster page loads are keeping Serverless users engaged and helping the company drive customer conversion through forms on the site. “We’ve definitely seen a decrease in the bounce rate and an increase in the conversion rate,” says Narayan. “Gatsby is enabling Serverless to create better awareness about the company’s technology and helping generate new customer leads.”
 
 ## Going forward with Gatsby
+
 The impressive success of the Serverless site convinced Narayan to look first to Gatsby for future projects. “Gatsby is a particularly great fit for sites such as e-commerce portals with hundreds of products,” says Narayan.
 
 > “Gatsby will work really well — and it will increase your conversion rates.”

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

@@ -2,6 +2,7 @@ const reduxNodes = require(`./nodes`)
 const lokiNodes = require(`../../db/loki/nodes`).reducer
 import { redirectsReducer } from "./redirects"
 import { staticQueryComponentsReducer } from "./static-query-components"
+import { webpackCompilationHashReducer } from "./webpack-compilation-hash"
 import { reducer as logReducer } from "gatsby-cli/lib/reporter/redux/reducer"
 
 const backend = process.env.GATSBY_DB_NODES || `redux`
@@ -61,7 +62,7 @@ module.exports = {
   jobs: require(`./jobs`),
   jobsV2: require(`./jobsv2`),
   webpack: require(`./webpack`),
-  webpackCompilationHash: require(`./webpack-compilation-hash`),
+  webpackCompilationHash: webpackCompilationHashReducer,
   redirects: redirectsReducer,
   babelrc: require(`./babelrc`),
   schemaCustomization: require(`./schema-customization`),

packages/gatsby/src/redux/reducers/webpack-compilation-hash.ts

@@ -0,0 +1,13 @@
+import { ActionsUnion, IGatsbyState } from "../types"
+
+export const webpackCompilationHashReducer = (
+  state: IGatsbyState["webpackCompilationHash"] = ``,
+  action: ActionsUnion
+): IGatsbyState["webpackCompilationHash"] => {
+  switch (action.type) {
+    case `SET_WEBPACK_COMPILATION_HASH`:
+      return action.payload
+    default:
+      return state
+  }
+}

packages/gatsby/src/redux/types.ts

@@ -224,6 +224,7 @@ export type ActionsUnion =
   | ICreateFieldExtension
   | IPrintTypeDefinitions
   | IRemoveStaticQuery
+  | ISetWebpackCompilationHashAction
 
 export interface ICreatePageDependencyAction {
   type: `CREATE_COMPONENT_DEPENDENCY`
@@ -377,3 +378,8 @@ export interface IRemoveStaticQuery {
   type: `REMOVE_STATIC_QUERY`
   payload: IGatsbyStaticQueryComponents["id"]
 }
+
+export interface ISetWebpackCompilationHashAction {
+  type: `SET_WEBPACK_COMPILATION_HASH`
+  payload: IGatsbyState["webpackCompilationHash"]
+}