chore(gatsby): Migrate utils/page-data to TypeScript

packages/gatsby/src/commands/build-utils.ts

@@ -5,7 +5,7 @@ import {
   remove as removePageHtmlFile,
   getPageHtmlFilePath,
 } from "../utils/page-html"
-import { remove as removePageDataFile, fixedPagePath } from "../utils/page-data"
+import { removePageData, fixedPagePath } from "../utils/page-data"
 import { IGatsbyState } from "../redux/types"
 
 const checkFolderIsEmpty = (path: string): boolean =>
@@ -82,11 +82,11 @@ export const removePageFiles = async (
     removePageHtmlFile({ publicDir }, pagePath)
   )
 
-  const removePageData = pageKeys.map(pagePath =>
-    removePageDataFile({ publicDir }, pagePath)
+  const removePageDataList = pageKeys.map(pagePath =>
+    removePageData(publicDir, pagePath)
   )
 
-  return Promise.all([...removePages, ...removePageData]).then(() => {
+  return Promise.all([...removePages, ...removePageDataList]).then(() => {
     // Sort removed pageKeys by nested directories and remove if empty.
     sortedPageKeysByNestedLevel(pageKeys).forEach(pagePath => {
       checkAndRemoveEmptyDir(publicDir, pagePath)

packages/gatsby/src/query/query-runner.ts

@@ -7,7 +7,7 @@ import crypto from "crypto"
 import path from "path"
 import { store } from "../redux"
 import { boundActionCreators } from "../redux/actions"
-import pageDataUtil from "../utils/page-data"
+import { writePageData } from "../utils/page-data"
 import { getCodeFrame } from "./graphql-errors"
 import errorParser from "./error-parser"
 
@@ -160,7 +160,14 @@ export const queryRunner = async (
       const publicDir = path.join(program.directory, `public`)
       const { pages } = store.getState()
       const page = pages.get(queryJob.id)
-      await pageDataUtil.write({ publicDir }, page, result)
+
+      if (!page) {
+        throw new Error(
+          `A page was not found for the queryJob. This is likely an internal bug to Gatsby and you should create an issue to report it.`
+        )
+      }
+
+      await writePageData(publicDir, page, result)
     } else {
       // The babel plugin is hard-coded to load static queries from
       // public/static/d/

packages/gatsby/src/utils/page-data.ts

@@ -0,0 +1,78 @@
+import fs from "fs-extra"
+import { ExecutionResult } from "graphql"
+import path from "path"
+import { IGatsbyPage } from "../redux/types"
+import { store } from "../redux"
+
+interface IPageData {
+  componentChunkName: IGatsbyPage["componentChunkName"]
+  matchPath?: IGatsbyPage["matchPath"]
+  path: IGatsbyPage["path"]
+}
+
+interface IPageDataWithQueryResult extends IPageData {
+  result: ExecutionResult
+}
+
+export function fixedPagePath(pagePath: string): string {
+  return pagePath === `/` ? `index` : pagePath
+}
+
+export function getFilePath(publicDir: string, pagePath: string): string {
+  return path.join(
+    publicDir,
+    `page-data`,
+    fixedPagePath(pagePath),
+    `page-data.json`
+  )
+}
+
+export async function readPageData(
+  publicDir: string,
+  pagePath: string
+): Promise<IPageDataWithQueryResult> {
+  const filePath = getFilePath(publicDir, pagePath)
+  const rawPageData = await fs.readFile(filePath, `utf-8`)
+
+  return JSON.parse(rawPageData)
+}
+
+export async function removePageData(
+  publicDir: string,
+  pagePath: string
+): Promise<void> {
+  const filePath = getFilePath(publicDir, pagePath)
+
+  if (fs.existsSync(filePath)) {
+    return await fs.remove(filePath)
+  }
+
+  return Promise.resolve()
+}
+
+export async function writePageData(
+  publicDir: string,
+  { componentChunkName, matchPath, path }: IPageData,
+  result: IPageDataWithQueryResult["result"]
+): Promise<void> {
+  const filePath = getFilePath(publicDir, path)
+  const body = {
+    componentChunkName,
+    path,
+    matchPath,
+    result,
+  }
+  const bodyStr = JSON.stringify(body)
+  // transform asset size to kB (from bytes) to fit 64 bit to numbers
+  const pageDataSize = Buffer.byteLength(bodyStr) / 1000
+
+  store.dispatch({
+    type: `ADD_PAGE_DATA_STATS`,
+    payload: {
+      filePath,
+      size: pageDataSize,
+    },
+  })
+
+  await fs.outputFile(filePath, bodyStr)
+}

packages/gatsby/src/utils/websocket-manager.ts

@@ -4,7 +4,7 @@ import { store } from "../redux"
 import { Server as HTTPSServer } from "https"
 import { Server as HTTPServer } from "http"
 import fs from "fs"
-import pageDataUtil from "../utils/page-data"
+import { readPageData } from "../utils/page-data"
 import telemetry from "gatsby-telemetry"
 import url from "url"
 import { createHash } from "crypto"
@@ -35,7 +35,7 @@ const getCachedPageData = async (
   const publicDir = path.join(program.directory, `public`)
   if (pages.has(denormalizePagePath(pagePath)) || pages.has(pagePath)) {
     try {
-      const pageData = await pageDataUtil.read({ publicDir }, pagePath)
+      const pageData = await readPageData(publicDir, pagePath)
 
       return {
         result: pageData.result,

packages/gatsby/src/utils/worker/child.ts

@@ -1,3 +1,3 @@
 // Note: this doesn't check for conflicts between module exports
-export { getFilePath } from "./page-data"
+export { getFilePath } from "../page-data"
 export { renderHTML } from "./render-html"

scripts/check-ts.js

@@ -36,6 +36,10 @@ let packagesWithTs = packages
         ignore: `**/node_modules/**`,
       }).length
   )
+  // TEMPORARILY NOT CHECKING GATSBY-ADMIN
+  // Gatsby admin is filled with type bugs, and i'm not sure the best way to solve it
+  // because they are coming from theme-ui.
+  .filter(path => !path.includes(`gatsby-admin`))
 
 if (filterPackage) {
   packagesWithTs = packagesWithTs.filter(project =>

yarn.lock

@@ -3127,7 +3127,7 @@
     "@emotion/serialize" "^0.11.15"
     "@emotion/utils" "0.11.3"
 
-"@emotion/styled@*", "@emotion/styled@^10.0.0", "@emotion/styled@^10.0.27":
+"@emotion/styled@^10.0.0", "@emotion/styled@^10.0.27":
   version "10.0.27"
   resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.27.tgz#12cb67e91f7ad7431e1875b1d83a94b814133eaf"
   integrity sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==
@@ -5106,7 +5106,7 @@
   dependencies:
     object-assign "^4.1.1"
 
-"@styled-system/css@^5.0.0", "@styled-system/css@^5.1.5":
+"@styled-system/css@^5.1.5":
   version "5.1.5"
   resolved "https://registry.yarnpkg.com/@styled-system/css/-/css-5.1.5.tgz#0460d5f3ff962fa649ea128ef58d9584f403bbbc"
   integrity sha512-XkORZdS5kypzcBotAMPBoeckDs9aSZVkvrAlq5K3xP8IMAUek+x2O4NtwoSgkYkWWzVBu6DGdFZLR790QWGG+A==
@@ -5146,7 +5146,7 @@
   dependencies:
     "@styled-system/core" "^5.1.2"
 
-"@styled-system/should-forward-prop@^5.0.0", "@styled-system/should-forward-prop@^5.1.2":
+"@styled-system/should-forward-prop@^5.1.2":
   version "5.1.5"
   resolved "https://registry.yarnpkg.com/@styled-system/should-forward-prop/-/should-forward-prop-5.1.5.tgz#c392008c6ae14a6eb78bf1932733594f7f7e5c76"
   integrity sha512-+rPRomgCGYnUIaFabDoOgpSDc4UUJ1KsmlnzcEp0tu5lFrBQKgZclSo18Z1URhaZm7a6agGtS5Xif7tuC2s52Q==
@@ -5216,7 +5216,7 @@
     "@theme-ui/css" "^0.4.0-highlight.0"
     deepmerge "^4.2.2"
 
-"@theme-ui/components@>= 0.4.0-alpha.0", "@theme-ui/components@^0.4.0-alpha.3":
+"@theme-ui/components@^0.4.0-alpha.3":
   version "0.4.0-highlight.0"
   resolved "https://registry.yarnpkg.com/@theme-ui/components/-/components-0.4.0-highlight.0.tgz#e4eafd517e347b3c8f380906f504103e215ca222"
   integrity sha512-dwVKGcXf29m4nehEKwaX/Vbl5fi/xhMNqHIYo1hnYmInKdUOnKDJOyxiiu4iNdmjTuXmpjj9WxBap1WHM07hkQ==
@@ -5237,7 +5237,7 @@
     "@theme-ui/css" "^0.4.0-highlight.0"
     deepmerge "^4.2.2"
 
-"@theme-ui/css@>= 0.4.0-alpha.0", "@theme-ui/css@^0.4.0-alpha.2", "@theme-ui/css@^0.4.0-highlight.0":
+"@theme-ui/css@^0.4.0-alpha.2", "@theme-ui/css@^0.4.0-highlight.0":
   version "0.4.0-highlight.0"
   resolved "https://registry.yarnpkg.com/@theme-ui/css/-/css-0.4.0-highlight.0.tgz#ee239d61ce7c7e076ffb49a7c5fcd5b9f1bbfb48"
   integrity sha512-0O9ERm3l4arXip9EmaVl83I84l0ZhEj1ZUrKHrNbjiW2/rhIdEWUQOdYcWdBCb8/nr5NwRMOJQ4rdqiUj7S5IQ==
@@ -5664,15 +5664,6 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
-"@types/reflexbox@^4.0.0":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@types/reflexbox/-/reflexbox-4.0.1.tgz#dfe91aace3c931766507cfd1cce65498a4d052a0"
-  integrity sha512-Ucw4Fh13EYJdWS8zsyP6HJz8ooDL3LFwGT63J9Pu9hMqNRTO21yFaXH6BDUtNjD1zNyOxpv6Oe1+7Z90iiLFtQ==
-  dependencies:
-    "@emotion/styled" "*"
-    "@types/react" "*"
-    "@types/styled-system" "*"
-
 "@types/resolve@0.0.8":
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
@@ -5734,13 +5725,6 @@
   resolved "https://registry.yarnpkg.com/@types/string-similarity/-/string-similarity-3.0.0.tgz#12b655f1aab0156049657a4e9287caf3e6718d93"
   integrity sha512-vhHkPKxl0cudrbxr5Dog1HVgUGXtmyYP95qy1da/h5gFEzIqDMN/+SjJAS7/6DEAdeI+AJQX8zrdWXL3wP4FRA==
 
-"@types/styled-system@*":
-  version "5.1.9"
-  resolved "https://registry.yarnpkg.com/@types/styled-system/-/styled-system-5.1.9.tgz#8baac8f6eca9e0bd5768c175ca5ce1f2d6f61ade"
-  integrity sha512-QlWv6tmQV8dqk8s+LSLb9QAtmuQEnfv4f8lKKZkMgDqRFVmxJDBwEw0u4zhpxp56u0hdR+TCIk9dGfOw3TkCoQ==
-  dependencies:
-    csstype "^2.6.9"
-
 "@types/tapable@*":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.4.tgz#b4ffc7dc97b498c969b360a41eee247f82616370"
@@ -9692,16 +9676,6 @@ create-ecdh@^4.0.0:
     bn.js "^4.1.0"
     elliptic "^6.0.0"
 
-create-emotion@^10.0.27:
-  version "10.0.27"
-  resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-10.0.27.tgz#cb4fa2db750f6ca6f9a001a33fbf1f6c46789503"
-  integrity sha512-fIK73w82HPPn/RsAij7+Zt8eCE8SptcJ3WoRMfxMtjteYxud8GDTKKld7MYwAX2TVhrw29uR1N/bVGxeStHILg==
-  dependencies:
-    "@emotion/cache" "^10.0.27"
-    "@emotion/serialize" "^0.11.15"
-    "@emotion/sheet" "0.9.4"
-    "@emotion/utils" "0.11.3"
-
 create-error-class@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/create-error-class/-/create-error-class-3.0.2.tgz#06be7abef947a3f14a30fd610671d401bca8b7b6"
@@ -10094,7 +10068,7 @@ cssstyle@^2.2.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@2.6.10, csstype@^2.2.0, csstype@^2.5.7, csstype@^2.6.10, csstype@^2.6.9:
+csstype@2.6.10, csstype@^2.2.0, csstype@^2.5.7, csstype@^2.6.10:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
   integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==
@@ -11163,14 +11137,6 @@ emojis-list@^3.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
   integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
-emotion@^10.0.27:
-  version "10.0.27"
-  resolved "https://registry.yarnpkg.com/emotion/-/emotion-10.0.27.tgz#f9ca5df98630980a23c819a56262560562e5d75e"
-  integrity sha512-2xdDzdWWzue8R8lu4G76uWX5WhyQuzATon9LmNeCy/2BHVC6dsEpfhN1a0qhELgtDVdjyEA6J8Y/VlI5ZnaH0g==
-  dependencies:
-    babel-plugin-emotion "^10.0.27"
-    create-emotion "^10.0.27"
-
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@@ -22339,17 +22305,6 @@ redux@^4.0.5:
     loose-envify "^1.4.0"
     symbol-observable "^1.2.0"
 
-reflexbox@^4.0.6:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/reflexbox/-/reflexbox-4.0.6.tgz#fc756d2cc1ca493baf9b96bb27dd640ad8154cf1"
-  integrity sha512-UNUL4YoJEXAPjRKHuty1tuOk+LV1nDJ2KYViDcH7lYm5yU3AQ+EKNXxPU3E14bQNK/pE09b1hYl+ZKdA94tWLQ==
-  dependencies:
-    "@emotion/core" "^10.0.0"
-    "@emotion/styled" "^10.0.0"
-    "@styled-system/css" "^5.0.0"
-    "@styled-system/should-forward-prop" "^5.0.0"
-    styled-system "^5.0.0"
-
 regenerate-unicode-properties@^8.0.2:
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.0.2.tgz#7b38faa296252376d363558cfbda90c9ce709662"
@@ -25231,6 +25186,13 @@ strict-ui@^0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/strict-ui/-/strict-ui-0.1.3.tgz#3e73ef91b58ca86e24dac464dceddbbb5a2acadd"
   integrity sha512-bbvWCY89TXb9Bkv7M0CWeFIJ8LXRvAxCqDkG3E87UGGuKAKShQzuziebnNEHgdgxQwvr/OJUxL/PJUIp+A0hwA==
+  dependencies:
+    "@theme-ui/components" ">= 0.4.0-alpha.0"
+    "@theme-ui/css" ">= 0.4.0-alpha.0"
+    "@types/reflexbox" "^4.0.0"
+    emotion "^10.0.27"
+    reflexbox "^4.0.6"
+    theme-ui ">= 0.4.0-alpha.0"
 
 strict-uri-encode@^1.0.0:
   version "1.1.0"
@@ -25569,7 +25531,7 @@ style-to-object@^0.2.1:
   dependencies:
     inline-style-parser "0.1.1"
 
-styled-system@^5.0.0, styled-system@^5.1.5:
+styled-system@^5.1.5:
   version "5.1.5"
   resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-5.1.5.tgz#e362d73e1dbb5641a2fd749a6eba1263dc85075e"
   integrity sha512-7VoD0o2R3RKzOzPK0jYrVnS8iJdfkKsQJNiLRDjikOpQVqQHns/DXWaPZOH4tIKkhAT7I6wIsy9FWTWh2X3q+A==
@@ -26084,7 +26046,7 @@ text-table@0.2.0, text-table@^0.2.0, text-table@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
 
-theme-ui@0.4.0-alpha.3, "theme-ui@>= 0.4.0-alpha.0", theme-ui@^0.2.49, theme-ui@^0.2.52, theme-ui@^0.4.0-alpha.3:
+theme-ui@0.4.0-alpha.3, theme-ui@^0.2.49, theme-ui@^0.2.52, theme-ui@^0.4.0-alpha.3:
   version "0.4.0-alpha.3"
   resolved "https://registry.yarnpkg.com/theme-ui/-/theme-ui-0.4.0-alpha.3.tgz#6114a4ea9d8ec3d5866de240667d7187b35631e9"
   integrity sha512-kxJ6BWCtbO/uyUJ760mep4VCyklyKpCWDD6KiCoMH9G0ib6X+jLkuSAt13CSQzqgBlGzind94kOL/KR1TcPSSw==