feat: upgrade to gatsby v4 (#149)

gatsbyjs · Dec 3, 2021 · ca08c16 · ca08c16
1 parent 692499e
commit ca08c16
Show file tree

Hide file tree

Showing 24 changed files with 5,717 additions and 8,574 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,19 +1,22 @@
 module.exports = {
-  parser: `babel-eslint`,
+  parser: `@babel/eslint-parser`,
   extends: [
     `google`,
     `eslint:recommended`,
-    `plugin:flowtype/recommended`,
     `plugin:react/recommended`,
     `prettier`,
   ],
-  plugins: [`flowtype`, `prettier`, `react`, `filenames`],
+  plugins: [`prettier`, `react`, `filenames`],
   parserOptions: {
     ecmaVersion: 2016,
     sourceType: `module`,
     ecmaFeatures: {
       jsx: true,
     },
+    babelOptions: {
+      presets: [`@babel/preset-react`],
+    },
+    requireConfigFile: false,
   },
   env: {
     browser: true,

diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml
@@ -2,7 +2,7 @@ name: End-to-end tests
 on: [push]
 jobs:
   cypress-run:
-    runs-on: ubuntu-16.04
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v2

diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged
diff --git a/package.json b/package.json
@@ -16,12 +16,8 @@
     "ssat:gatsby-starter-theme:dev": "start-server-and-test gatsby-starter-theme:cy:dev http://localhost:8000 cy:open",
     "ssat:gatsby-starter-theme:serve": "start-server-and-test gatsby-starter-theme:serve http://localhost:9000 cy:run",
     "e2e:dev": "concurrently --kill-others 'yarn ssat:gatsby-starter-theme:dev'",
-    "e2e:ci": "yarn gatsby-starter-theme:cy:build && yarn ssat:gatsby-starter-theme:serve"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
+    "e2e:ci": "yarn gatsby-starter-theme:cy:build && yarn ssat:gatsby-starter-theme:serve",
+    "prepare": "husky install"
   },
   "lint-staged": {
     "*.{js,jsx}": [
@@ -40,24 +36,26 @@
     "starters/*"
   ],
   "devDependencies": {
-    "babel-eslint": "^10.1.0",
-    "@testing-library/cypress": "^6.0.0",
-    "concurrently": "^5.2.0",
-    "cross-env": "^7.0.2",
-    "cypress": "^7.0.1",
-    "eslint": "^7.23.0",
+    "@babel/eslint-parser": "^7.16.3",
+    "@testing-library/cypress": "^8.0.2",
+    "concurrently": "^6.4.0",
+    "cross-env": "^7.0.3",
+    "cypress": "^9.1.0",
+    "eslint": "^7.0.0",
     "eslint-config-google": "^0.14.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-cypress": "^2.11.2",
+    "eslint-config-prettier": "^7.0.0",
+    "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-filenames": "^1.3.2",
-    "eslint-plugin-flowtype": "^5.6.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.23.2",
-    "gatsby-cypress": "^1.2.0",
-    "husky": "^4.2.5",
-    "lerna": "^3.22.1",
-    "lint-staged": "^10.5.4",
-    "prettier": "^2.2.1",
-    "start-server-and-test": "^1.12.1"
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.27.1",
+    "gatsby-cypress": "^2.3.0",
+    "husky": "^7.0.4",
+    "lerna": "^4.0.0",
+    "lint-staged": "^12.1.2",
+    "prettier": "^2.5.0",
+    "start-server-and-test": "^1.14.0"
+  },
+  "dependencies": {
+    "@babel/preset-react": "^7.16.0"
   }
 }
diff --git a/packages/gatsby-theme-blog-core/gatsby-node.js b/packages/gatsby-theme-blog-core/gatsby-node.js
@@ -29,22 +29,18 @@ exports.onPreBootstrap = ({ store }, themeOptions) => {
   })
 }
 
-const mdxResolverPassthrough = (fieldName) => async (
-  source,
-  args,
-  context,
-  info
-) => {
-  const type = info.schema.getType(`Mdx`)
-  const mdxNode = context.nodeModel.getNodeById({
-    id: source.parent,
-  })
-  const resolver = type.getFields()[fieldName].resolve
-  const result = await resolver(mdxNode, args, context, {
-    fieldName,
-  })
-  return result
-}
+const mdxResolverPassthrough =
+  (fieldName) => async (source, args, context, info) => {
+    const type = info.schema.getType(`Mdx`)
+    const mdxNode = context.nodeModel.getNodeById({
+      id: source.parent,
+    })
+    const resolver = type.getFields()[fieldName].resolve
+    const result = await resolver(mdxNode, args, context, {
+      fieldName,
+    })
+    return result
+  }
 
 exports.createSchemaCustomization = ({ actions, schema }, themeOptions) => {
   const { excerptLength } = withDefaults(themeOptions)
@@ -272,7 +268,7 @@ exports.createPages = async ({ graphql, actions, reporter }, themeOptions) => {
 
   const result = await graphql(
     `
-      query($limit: Int!, $filter: BlogPostFilterInput) {
+      query ($limit: Int!, $filter: BlogPostFilterInput) {
         allBlogPost(
           sort: { fields: [date, title], order: DESC }
           filter: $filter

diff --git a/packages/gatsby-theme-blog-core/package.json b/packages/gatsby-theme-blog-core/package.json
@@ -13,24 +13,24 @@
   "homepage": "https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-blog-core#readme",
   "peerDependencies": {
     "@mdx-js/react": "^1.6.22",
-    "gatsby": "^3.0.0",
+    "gatsby": "^4.0.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },
   "dependencies": {
     "@mdx-js/mdx": "^1.6.22",
-    "gatsby-core-utils": "^2.2.0",
-    "gatsby-plugin-image": "^1.2.1",
-    "gatsby-plugin-mdx": "^2.2.0",
-    "gatsby-plugin-sharp": "^3.2.1",
-    "gatsby-remark-copy-linked-files": "^3.2.0",
-    "gatsby-remark-images": "^4.2.0",
-    "gatsby-remark-smartypants": "^3.2.0",
-    "gatsby-source-filesystem": "^3.2.0",
-    "gatsby-transformer-sharp": "^3.2.0",
+    "gatsby-core-utils": "^3.3.0",
+    "gatsby-plugin-image": "^2.3.0",
+    "gatsby-plugin-mdx": "^3.3.0",
+    "gatsby-plugin-sharp": "^4.3.0",
+    "gatsby-remark-copy-linked-files": "^5.3.0",
+    "gatsby-remark-images": "^6.3.0",
+    "gatsby-remark-smartypants": "^5.3.0",
+    "gatsby-source-filesystem": "^4.3.0",
+    "gatsby-transformer-sharp": "^4.3.0",
     "remark-slug": "^5.1.2"
   },
   "engines": {
-    "node": ">=12.13.0"
+    "node": ">=14.15.0"
   }
 }
diff --git a/packages/gatsby-theme-blog-darkmode/package.json b/packages/gatsby-theme-blog-darkmode/package.json
@@ -18,15 +18,15 @@
   },
   "homepage": "https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-blog-darkmode#readme",
   "dependencies": {
-    "@reach/skip-nav": "^0.15.0",
+    "@reach/skip-nav": "^0.16.0",
     "react-switch": "^6.0.0"
   },
   "peerDependencies": {
-    "gatsby": "^3.0.0",
+    "gatsby": "^4.0.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },
   "engines": {
-    "node": ">=12.13.0"
+    "node": ">=14.15.0"
   }
 }
diff --git a/packages/gatsby-theme-blog/package.json b/packages/gatsby-theme-blog/package.json
@@ -18,25 +18,25 @@
   },
   "homepage": "https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-blog#readme",
   "dependencies": {
-    "@reach/skip-nav": "^0.15.0",
+    "@reach/skip-nav": "^0.16.0",
     "@theme-ui/prism": "0.6.2",
-    "gatsby-plugin-emotion": "^6.2.0",
-    "gatsby-plugin-feed": "^3.2.0",
-    "gatsby-plugin-react-helmet": "^4.2.0",
+    "gatsby-plugin-emotion": "^7.3.0",
+    "gatsby-plugin-feed": "^4.3.0",
+    "gatsby-plugin-react-helmet": "^5.3.0",
     "gatsby-plugin-theme-ui": "0.7.0",
-    "gatsby-plugin-twitter": "^3.2.0",
+    "gatsby-plugin-twitter": "^4.3.0",
     "gatsby-theme-blog-core": "^3.0.0",
     "gatsby-theme-ui-preset": "^2.0.0",
     "mdx-utils": "0.2.0",
     "react-helmet": "^6.1.0",
     "theme-ui": "0.7.0"
   },
   "peerDependencies": {
-    "gatsby": "^3.0.0",
+    "gatsby": "^4.0.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },
   "engines": {
-    "node": ">=12.13.0"
+    "node": ">=14.15.0"
   }
 }
diff --git a/packages/gatsby-theme-blog/src/gatsby-plugin-theme-ui/components.js b/packages/gatsby-theme-blog/src/gatsby-plugin-theme-ui/components.js
@@ -20,33 +20,34 @@ const LinkIcon = (props) => (
   </svg>
 )
 
-const heading = (Tag) => (props) => (
-  <Tag
-    {...props}
-    css={css({
-      a: {
-        visibility: `hidden`,
-      },
-      ":hover a": {
-        visibility: `visible`,
-      },
-      pointerEvents: `painted`,
-    })}
-  >
-    <a
-      href={`#${props.id}`}
+const heading = (Tag) => (props) =>
+  (
+    <Tag
+      {...props}
       css={css({
-        ml: `-20px`,
-        pr: `4px`,
-        color: `primary`,
+        a: {
+          visibility: `hidden`,
+        },
+        ":hover a": {
+          visibility: `visible`,
+        },
+        pointerEvents: `painted`,
       })}
-      aria-label={props.children}
     >
-      <LinkIcon />
-    </a>
-    {props.children}
-  </Tag>
-)
+      <a
+        href={`#${props.id}`}
+        css={css({
+          ml: `-20px`,
+          pr: `4px`,
+          color: `primary`,
+        })}
+        aria-label={props.children}
+      >
+        <LinkIcon />
+      </a>
+      {props.children}
+    </Tag>
+  )
 
 const headings = {
   h1: heading(`h1`),

diff --git a/packages/gatsby-theme-i18n-lingui/package.json b/packages/gatsby-theme-i18n-lingui/package.json
@@ -6,13 +6,13 @@
   "description": "A Gatsby theme for providing localization support via Lingui. This theme sets up Lingui's context provider so that you can access your translations on every page. Works best together with gatsby-theme-i18n.",
   "license": "MIT",
   "devDependencies": {
-    "@lingui/core": "^3.8.9",
-    "@lingui/react": "^3.8.9"
+    "@lingui/core": "^3.13.0",
+    "@lingui/react": "^3.13.0"
   },
   "peerDependencies": {
     "@lingui/core": "^3.8.9",
     "@lingui/react": "^3.8.9",
-    "gatsby": "^3.0.0",
+    "gatsby": "^4.0.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },
@@ -30,6 +30,6 @@
   },
   "homepage": "https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-i18n-lingui#readme",
   "engines": {
-    "node": ">=12.13.0"
+    "node": ">=14.15.0"
   }
 }
diff --git a/packages/gatsby-theme-i18n-react-i18next/package.json b/packages/gatsby-theme-i18n-react-i18next/package.json
@@ -6,11 +6,11 @@
   "description": "A Gatsby theme for providing localization support via react-i18next. This theme sets up react-i18next's context provider so that you can access your translations on every page. Works best together with gatsby-theme-i18n.",
   "license": "MIT",
   "devDependencies": {
-    "i18next": "^20.2.1",
-    "react-i18next": "^11.8.12"
+    "i18next": "^20.6.1",
+    "react-i18next": "^11.14.3"
   },
   "peerDependencies": {
-    "gatsby": "^3.0.0",
+    "gatsby": "^4.0.0",
     "i18next": "^20.2.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
@@ -30,6 +30,6 @@
   },
   "homepage": "https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-i18n-react-i18next#readme",
   "engines": {
-    "node": ">=12.13.0"
+    "node": ">=14.15.0"
   }
 }
diff --git a/packages/gatsby-theme-i18n-react-intl/package.json b/packages/gatsby-theme-i18n-react-intl/package.json
@@ -6,10 +6,10 @@
   "description": "A Gatsby theme for providing localization support via react-intl. This theme sets up react-intl's context provider so that you can access your translations on every page. Works best together with gatsby-theme-i18n.",
   "license": "MIT",
   "devDependencies": {
-    "react-intl": "^5.15.7"
+    "react-intl": "^5.23.0"
   },
   "peerDependencies": {
-    "gatsby": "^3.0.0",
+    "gatsby": "^4.0.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-intl": "^5.15.7"
@@ -28,6 +28,6 @@
   },
   "homepage": "https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-i18n-react-intl#readme",
   "engines": {
-    "node": ">=12.13.0"
+    "node": ">=14.15.0"
   }
 }
diff --git a/packages/gatsby-theme-i18n/gatsby-node.js b/packages/gatsby-theme-i18n/gatsby-node.js
@@ -136,9 +136,8 @@ exports.onCreateNode = ({ node, actions }, themeOptions) => {
 
 exports.onCreatePage = ({ page, actions }, themeOptions) => {
   const { createPage, deletePage } = actions
-  const { configPath, defaultLang, locales, prefixDefault } = withDefaults(
-    themeOptions
-  )
+  const { configPath, defaultLang, locales, prefixDefault } =
+    withDefaults(themeOptions)
   // Check if originalPath was already set and bail early as otherwise an infinite loop could occur
   // as other plugins like gatsby-plugin-mdx could modify this
   if (page.context.originalPath) {

diff --git a/packages/gatsby-theme-i18n/package.json b/packages/gatsby-theme-i18n/package.json
@@ -7,12 +7,12 @@
   "description": "A Gatsby theme for providing internationalization support to your Gatsby site by taking in a configuration file and creating prefixed, enriched pages for each language.",
   "license": "MIT",
   "devDependencies": {
-    "gatsby-plugin-react-helmet": "^4.2.0",
+    "gatsby-plugin-react-helmet": "^5.3.0",
     "react-helmet": "^6.1.0"
   },
   "peerDependencies": {
-    "gatsby": "^3.0.0",
-    "gatsby-plugin-react-helmet": "^4.2.0",
+    "gatsby": "^4.0.0",
+    "gatsby-plugin-react-helmet": "^5.0.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-helmet": "^6.1.0"
@@ -30,6 +30,6 @@
   },
   "homepage": "https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-i18n#readme",
   "engines": {
-    "node": ">=12.13.0"
+    "node": ">=14.15.0"
   }
 }