chore(deps): upgrade to react 18 (#54)

* chore(deps): upgrade to react 18

* dont use preact in prod

* update other deps

components/ScrollObserver.tsx

@@ -1,4 +1,4 @@
-import { createContext, FC, useCallback, useEffect, useState } from 'react'
+import { createContext, ReactNode, useCallback, useEffect, useState } from 'react'
 
 interface ScrollValue {
   scrollY: number
@@ -10,7 +10,11 @@ export const ScrollContext = createContext<ScrollValue>({
   scrollHeight: 0,
 })
 
-export const ScrollObserver: FC = ({ children }) => {
+interface ScrollObserverProps {
+  children: ReactNode
+}
+
+export const ScrollObserver = ({ children }: ScrollObserverProps) => {
   const [scrollY, setScrollY] = useState(0)
   const [scrollHeight, setScrollHeight] = useState(0)
 

lib/mdx.ts

@@ -4,22 +4,11 @@ import matter from 'gray-matter'
 import { bundleMDX } from 'mdx-bundler'
 import path from 'path'
 import readingTime from 'reading-time'
-import rehypeAutolinkHeadings from 'rehype-autolink-headings'
-import rehypeKatex from 'rehype-katex'
-import rehypePrismPlus from 'rehype-prism-plus'
 // Rehype packages
-import rehypeSlug from 'rehype-slug'
-import remarkFootnotes from 'remark-footnotes'
 // Remark packages
-import remarkGfm from 'remark-gfm'
-import remarkMath from 'remark-math'
 import { AuthorFrontMatter } from 'types/AuthorFrontMatter'
 import { PostFrontMatter } from 'types/PostFrontMatter'
 import { Toc } from 'types/Toc'
-import type { Pluggable } from 'unified'
-import remarkCodeTitles from './remark-code-title'
-import remarkImgToJsx from './remark-img-to-jsx'
-import remarkTocHeadings from './remark-toc-headings'
 import getAllFilesRecursively from './utils/files'
 
 const root = process.cwd()
@@ -71,31 +60,10 @@ export async function getFileBySlug<T>(
 
   const toc: Toc = []
 
-  const { frontmatter, code } = await bundleMDX(source, {
+  const { frontmatter, code } = await bundleMDX({
+    source,
     // mdx imports can be automatically source from the components directory
     cwd: path.join(process.cwd(), 'components'),
-    xdmOptions(options) {
-      // this is the recommended way to add custom remark/rehype plugins:
-      // The syntax might look weird, but it protects you in case we add/remove
-      // plugins in the future.
-      options.remarkPlugins = [
-        ...(options.remarkPlugins ?? []),
-        [remarkTocHeadings, { exportRef: toc }],
-        remarkGfm,
-        remarkCodeTitles,
-        [remarkFootnotes, { inlineNotes: true }],
-        remarkMath,
-        remarkImgToJsx,
-      ]
-      options.rehypePlugins = [
-        ...(options.rehypePlugins ?? []),
-        rehypeSlug,
-        rehypeAutolinkHeadings,
-        rehypeKatex,
-        [rehypePrismPlus, { ignoreMissing: true }] as Pluggable,
-      ]
-      return options
-    },
     esbuildOptions: (options) => {
       options.loader = {
         ...options.loader,

next.config.js

@@ -11,7 +11,7 @@ module.exports = withBundleAnalyzer({
   eslint: {
     dirs: ['pages', 'components', 'lib', 'layouts', 'scripts'],
   },
-  webpack: (config, { dev, isServer }) => {
+  webpack: (config) => {
     config.module.rules.push({
       test: /\.(png|jpe?g|gif|mp4)$/i,
       use: [
@@ -30,16 +30,6 @@ module.exports = withBundleAnalyzer({
       use: ['@svgr/webpack'],
     })
 
-    if (!dev && !isServer) {
-      // Replace React with Preact only in client production build
-      Object.assign(config.resolve.alias, {
-        'react/jsx-runtime.js': 'preact/compat/jsx-runtime',
-        react: 'preact/compat',
-        'react-dom/test-utils': 'preact/test-utils',
-        'react-dom': 'preact/compat',
-      })
-    }
-
     return config
   },
 })

package.json

@@ -12,36 +12,28 @@
   },
   "dependencies": {
     "@mailchimp/mailchimp_marketing": "3.0.75",
-    "esbuild": "0.12.29",
+    "esbuild": "0.14.47",
     "framer-motion": "^6.3.13",
     "github-slugger": "1.4.0",
     "gray-matter": "4.0.3",
     "image-size": "1.0.1",
     "logrocket": "3.0.1",
-    "mdx-bundler": "6.0.3",
-    "next": "12.1.6",
+    "mdx-bundler": "9.0.1",
+    "next": "^12.1.6",
     "next-themes": "0.2.0",
-    "preact": "10.8.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-icons": "4.4.0",
     "reading-time": "1.5.0",
-    "rehype-autolink-headings": "6.1.1",
-    "rehype-katex": "6.0.2",
-    "rehype-prism-plus": "1.4.1",
-    "rehype-slug": "5.0.1",
-    "remark-footnotes": "4.0.1",
-    "remark-gfm": "3.0.1",
-    "remark-math": "5.1.1",
-    "swr": "1.3.0",
-    "unist-util-visit": "4.1.0"
+    "swr": "1.3.0"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "12.1.6",
     "@svgr/webpack": "6.2.1",
     "@tailwindcss/forms": "0.5.2",
     "@tailwindcss/typography": "0.5.2",
-    "@types/react": "17.0.47",
+    "@types/node": "18.0.0",
+    "@types/react": "18.0.14",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
     "autoprefixer": "10.4.7",
@@ -50,16 +42,16 @@
     "eslint": "8.18.0",
     "eslint-config-next": "12.1.6",
     "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-jsx-a11y": "6.5.1",
+    "eslint-plugin-jsx-a11y": "6.6.0",
     "eslint-plugin-prettier": "4.0.0",
     "file-loader": "6.2.0",
     "globby": "11.1.0",
     "husky": "8.0.1",
     "inquirer": "9.0.0",
-    "lint-staged": "13.0.2",
+    "lint-staged": "13.0.3",
     "postcss": "8.4.14",
     "prettier": "2.7.1",
-    "tailwindcss": "3.1.2",
+    "tailwindcss": "3.1.4",
     "typescript": "4.7.4"
   },
   "lint-staged": {