feat(theme): update gatsby to v3 (#479)

* chore: add peer dep @babel/core to deps

* refactor: rename __experimentalThemes to plugins

* feat: update theme to depend on gatsby v3

* feat(docs): update to gatsby v3

* refactor(theme): use path-browserify as fallback in browser

* feat(theme): update deps for gatsby v3

* chore: add changeset

* chore: change styled-components dep range for compat

* chore: change styled-components dep range for compat

* chore: change styled-components dep range for compat

* chore: change styled-components dep range for compat

* Update react and react-dom versions, yarn resolutions.

* feat(theme): update deps for gatsby v3

* Bump theme version to 5.0.0 due to peerDependencies changes.

* Fix conflict markers in theme/package.json.

* Revert version number, let release tracking PR update it.

---------

Co-authored-by: Mike Perrotti <[email protected]>
Co-authored-by: Josep Martins <[email protected]>
Co-authored-by: Jeremy Neal <[email protected]>

Author: 4 people

.changeset/honest-bags-tell.md

@@ -0,0 +1,5 @@
+---
+'@primer/gatsby-theme-doctocat': major
+---
+
+Update gatsby to v3

docs/gatsby-config.js

@@ -5,7 +5,7 @@ module.exports = {
     description: 'A Gatsby theme for creating Primer documentation sites',
   },
   pathPrefix: '/doctocat',
-  __experimentalThemes: [
+  plugins: [
     {
       resolve: '@primer/gatsby-theme-doctocat',
       options: {

docs/package.json

@@ -12,9 +12,9 @@
   "dependencies": {
     "@primer/gatsby-theme-doctocat": "*",
     "@primer/react": "^35.2.2",
-    "gatsby": "^2.32.13",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "gatsby": "^3.14.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "repository": "primer/doctocat"
 }

docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js

@@ -1,4 +1,5 @@
 import * as primerComponents from '@primer/react'
 import * as doctocatComponents from '@primer/gatsby-theme-doctocat'
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default {...primerComponents, ...doctocatComponents}

theme/package.json

@@ -9,6 +9,10 @@
     "lint:fix": "yarn lint -- --fix"
   },
   "prettier": "@github/prettier-config",
+  "resolutions": {
+    "graphql": "^15.4.0",
+    "graphql-compose": "^7.25.0"
+  },
   "devDependencies": {
     "@github/prettier-config": "^0.0.4",
     "eslint": "^8.0.1",
@@ -17,17 +21,18 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-primer-react": "0.7.4",
     "eslint-plugin-react": "^7.26.1",
-    "gatsby": "^2.32.13",
+    "gatsby": "^3.14.6",
     "prettier": "^2.4.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "peerDependencies": {
-    "gatsby": "2.x",
-    "react": "^16.9.x",
-    "react-dom": "^16.9.x"
+    "gatsby": "3.x",
+    "react": "^18.x",
+    "react-dom": "^18.x"
   },
   "dependencies": {
+    "@babel/core": "^7.19.1",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
     "@mdx-js/mdx": "^1.0.21",
@@ -40,28 +45,30 @@
     "@testing-library/react": "^9.1.3",
     "axios": "^0.21.2",
     "babel-jest": "^24.9.0",
+    "babel-plugin-styled-components": "^2.0.7",
     "copy-to-clipboard": "^3.2.0",
     "date-fns": "^2.28.0",
     "details-element-polyfill": "^2.4.0",
     "downshift": "^3.2.10",
     "find-up": "^6.3.0",
     "framer-motion": "^1.4.2",
     "fuse.js": "^3.4.5",
-    "gatsby-plugin-catch-links": "^2.1.2",
-    "gatsby-plugin-manifest": "^2.2.1",
+    "gatsby-plugin-catch-links": "^3.14.0",
+    "gatsby-plugin-manifest": "^3.14.0",
     "gatsby-plugin-mdx": "^1.0.13",
-    "gatsby-plugin-page-creator": "^2.1.1",
-    "gatsby-plugin-react-helmet": "^3.1.0",
-    "gatsby-plugin-remove-trailing-slashes": "^2.1.2",
-    "gatsby-plugin-styled-components": "^3.1.0",
-    "gatsby-source-filesystem": "^2.1.0",
-    "gatsby-transformer-yaml": "^2.2.0",
+    "gatsby-plugin-page-creator": "^3.14.0",
+    "gatsby-plugin-react-helmet": "^4.14.0",
+    "gatsby-plugin-remove-trailing-slashes": "^3.14.0",
+    "gatsby-plugin-styled-components": "^4.14.0",
+    "gatsby-source-filesystem": "^3.14.0",
+    "gatsby-transformer-yaml": "^3.14.0",
     "get-pkg-repo": "^4.1.0",
     "github-slugger": "^1.2.1",
     "html-react-parser": "^1.4.0",
     "jest": "^24.9.0",
     "lodash.debounce": "4.0.8",
     "lodash.uniqby": "^4.7.0",
+    "path-browserify": "^1.0.1",
     "pkg-up": "^3.1.0",
     "pluralize": "^8.0.0",
     "preval.macro": "^3.0.0",
@@ -75,7 +82,7 @@
     "react-measure": "^2.3.0",
     "read-pkg-up": "^6.0.0",
     "sentence-case": "^2.1.1",
-    "styled-components": "^4.3.2",
+    "styled-components": "^5.3.5",
     "styled-system": "^5.0.18",
     "worker-loader": "^3.0.2"
   }

theme/src/use-search.js

@@ -1,5 +1,5 @@
 import {graphql, useStaticQuery} from 'gatsby'
-import path from 'path'
+import path from 'path-browserify'
 import React from 'react'
 import SearchWorker from 'worker-loader!./search.worker.js'