feat: react 18 (#592)

chore: use single version

.changeset/eight-baboons-march.md

@@ -0,0 +1,7 @@
+---
+'nextra': patch
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+---
+
+upgrade to react 18

.github/workflows/ci.yml

@@ -52,3 +52,6 @@ jobs:
 
       - name: Build
         run: pnpm build
+
+      - name: Type Check
+        run: pnpm run types:check

.github/workflows/release.yml

@@ -49,6 +49,9 @@ jobs:
       - name: Build
         run: pnpm build
 
+      - name: Type Check
+        run: pnpm run types:check
+
       - name: Create Release Pull Request or Publish to npm
         uses: changesets/action@v1
         with:

examples/blog/package.json

@@ -12,8 +12,10 @@
     "clean": "rimraf .next .turbo"
   },
   "dependencies": {
-    "gray-matter": "^4.0.2",
+    "react": "*",
+    "react-dom": "*",
+    "next": "*",
     "nextra": "workspace:*",
     "nextra-theme-blog": "workspace:*"
   }
-}
+}

examples/docs/package.json

@@ -12,8 +12,9 @@
     "clean": "rimraf .next .turbo"
   },
   "dependencies": {
-    "prism-react-renderer": "^1.1.1",
-    "prismjs": "^1.22.0",
+    "react": "*",
+    "react-dom": "*",
+    "next": "*",
     "nextra": "workspace:*",
     "nextra-theme-docs": "workspace:*"
   }

examples/docs/src/pages/themes/docs/configuration.mdx

@@ -67,7 +67,7 @@ export default {
 
 Changes the icon that is shown in the top right.
 
-**Type:** `ReactNode | React.FC<{ locale?: string }>{:ts}`
+**Type:** `ReactNode | React.FC<{ locale: string }>{:ts}`
 
 **Default:** GitHub icon
 
@@ -166,7 +166,7 @@ export default {
 
 Specifies if a search box should be shown in the top right.
 
-**Type:** `string | ((props: { locale?: string }) => string){:ts}`
+**Type:** `string | ((props: { locale: string }) => string){:ts}`
 
 **Example:**
 
@@ -261,7 +261,7 @@ export default {
 
 The text that is shown on the left of the footer.
 
-**Type:** `ReactNode | React.FC<{ locale?: string }>{:ts}`
+**Type:** `ReactNode | React.FC<PropsWithChildren<{ locale: string }>>{:ts}`
 
 **Example:**
 
@@ -278,7 +278,7 @@ export default {
 
 The components that should be shown on the link that leads to the editable page on the repository.
 
-**Type:** `ReactNode | React.FC<{ locale?: string }>{:ts}`
+**Type:** `ReactNode | React.FC<PropsWithChildren<{ locale: string }>>{:ts}`
 
 **Default:** `Edit this page`
 
@@ -297,7 +297,7 @@ export default {
 
 The components that should be shown on the link that leads to the issues or discussions of the repository.
 
-**Type:** `ReactNode | React.FC<{ locale?: string }>{:ts}`
+**Type:** `ReactNode | React.FC<PropsWithChildren<{ locale: string }>>{:ts}`
 
 **Default:** ``
 
@@ -335,7 +335,7 @@ export default {
 
 The logo in the top left.
 
-**Type:** `ReactNode | React.FC<{ locale?: string }>{:ts}`
+**Type:** `ReactNode | React.FC<PropsWithChildren<{ locale: string }>>{:ts}`
 
 **Example:**
 
@@ -359,7 +359,7 @@ export default {
 
 The head that should be inserted into the html document.
 
-**Type:** `ReactNode | React.FC<{ locale?: string; config: DocsThemeConfig; title: string; meta: Record<string, any> }>{:ts}`
+**Type:** `ReactNode | React.FC<PropsWithChildren<{ locale: string; config: DocsThemeConfig; title: string; meta: Record<string, any> }>>{:ts}`
 
 **Example:**
 
@@ -464,7 +464,7 @@ export default {
 
 The banner content that will display at top of the page.
 
-**Type:** `ReactNode | React.FC<{ locale?: string }>{:ts}`
+**Type:** `ReactNode | React.FC<PropsWithChildren<{ locale: string }>>{:ts}`
 
 **Example:**
 
@@ -500,7 +500,7 @@ export default {
 
 The component that is used to display timestamp of the last commit of current page.
 
-**Type:** `string | React.FC<{ locale?: string; timestamp: Date }>{:ts}`
+**Type:** `string | React.FC<PropsWithChildren<{ locale: string; timestamp: Date }>>{:ts}`
 
 **Example:**
 
@@ -517,7 +517,7 @@ export default {
 
 The extra content that is displayed under the table of contents.
 
-**Type:** `ReactNode | React.FC<unknown>{:ts}`
+**Type:** `ReactNode | React.FC<PropsWithChildren<unknown>>{:ts}`
 
 **Example:**
 

examples/swr-site/package.json

@@ -12,19 +12,21 @@
   "author": "Shu Ding",
   "license": "Apache-2.0",
   "dependencies": {
+    "react": "*",
+    "react-dom": "*",
+    "next": "*",
     "@reach/skip-nav": "^0.16.0",
     "focus-visible": "^5.1.0",
     "intersection-observer": "^0.10.0",
     "markdown-to-jsx": "^6.11.4",
-    "next": "^12.2.2",
     "nextra": "workspace:*",
     "nextra-theme-docs": "workspace:*",
     "react-intersection-observer": "^8.26.2"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.7",
-    "postcss": "^8.4.14",
-    "tailwindcss": "^3.1.4"
+    "autoprefixer": "*",
+    "postcss": "*",
+    "tailwindcss": "*"
   },
   "prettier": {
     "embeddedLanguageFormatting": "off",

package.json

@@ -4,6 +4,7 @@
     "dev": "turbo run dev",
     "build": "turbo run build:tailwind build --filter=\"nextra*\"",
     "types": "turbo run types",
+    "types:check": "turbo run types:check",
     "dev:core": "turbo run dev --filter=\"nextra\"",
     "dev:theme-blog": "turbo run dev --filter=\"blog\" --include-dependencies",
     "dev:theme-docs": "turbo run dev --filter=\"swr-site\" --include-dependencies",
@@ -18,27 +19,14 @@
     "format": "turbo run format"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.23.2",
-    "@edge-runtime/vm": "1.1.0-beta.11",
-    "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
-    "@tailwindcss/typography": "^0.5.2",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
-    "autoprefixer": "^10.4.7",
-    "concurrently": "^7.0.0",
-    "cssnano": "^4.1.11",
-    "next": "^12.2.2",
-    "postcss": "^8.4.14",
-    "postcss-cli": "^8.3.1",
-    "prettier": "^2.5.1",
-    "prettier-plugin-tailwindcss": "^0.1.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "@changesets/cli": "^2.24.1",
+    "@edge-runtime/vm": "1.1.0-beta.19",
+    "prettier": "^2.7.1",
+    "prettier-plugin-tailwindcss": "^0.1.13",
     "rimraf": "^3.0.2",
-    "tailwindcss": "^3.1.5",
     "turbo": "^1.3.4",
     "typescript": "^4.7.4",
-    "vitest": "^0.18.1"
+    "vitest": "^0.19.1"
   },
   "prettier": {
     "semi": false,
@@ -49,5 +37,26 @@
   "packageManager": "pnpm@7.3.0",
   "workspaces": [
     "packages/*"
-  ]
-}
+  ],
+  "pnpm": {
+    "overrides": {
+      "react": "^18.2.0",
+      "react-dom": "^18.2.0",
+      "@mdx-js/react": "^2.1.2",
+      "next-themes": "^0.2.0-beta.2",
+      "next": "^12.2.3",
+      "@types/react": "^18.0.15",
+      "@types/react-dom": "^18.0.6",
+      "postcss": "^8.4.14",
+      "postcss-cli": "^8.3.1",
+      "autoprefixer": "^10.4.7",
+      "cssnano": "^5.1.12",
+      "tailwindcss": "^3.1.6",
+      "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
+      "@tailwindcss/typography": "^0.5.4",
+      "tsup": "^6.2.0",
+      "concurrently": "^7.3.0",
+      "cross-env": "^7.0.3"
+    }
+  }
+}

packages/nextra-theme-blog/package.json

@@ -23,6 +23,7 @@
     "build": "tsup",
     "build:tailwind": "cross-env NODE_ENV=production pnpm postcss src/styles.css -o style.css --verbose",
     "types": "tsup --dts-only",
+    "types:check": "tsc --noEmit",
     "dev": "concurrently \"pnpm dev:layout\" \"pnpm dev:tailwind\"",
     "dev:layout": "tsup --watch",
     "dev:tailwind": "cross-env TAILWIND_MODE=watch pnpm postcss src/styles.css -o style.css --watch",
@@ -32,7 +33,7 @@
   },
   "dependencies": {
     "@mdx-js/react": "^2.1.2",
-    "next-themes": "^0.2.0",
+    "next-themes": "^0.2.0-beta.2",
     "react-cusdis": "^2.1.3"
   },
   "peerDependencies": {
@@ -41,10 +42,22 @@
     "react-dom": ">=16.13.1"
   },
   "devDependencies": {
-    "cross-env": "^7.0.2",
     "nextra": "workspace:*",
-    "@types/react": "^17.0.39",
-    "tsup": "^6.1.3"
+    "next": "*",
+    "react": "*",
+    "react-dom": "*",
+    "concurrently": "*",
+    "cross-env": "*",
+    "@types/react": "*",
+    "@types/react-dom": "*",
+    "tsup": "*",
+    "postcss": "*",
+    "postcss-cli": "*",
+    "autoprefixer": "*",
+    "cssnano": "*",
+    "tailwindcss": "*",
+    "@tailwindcss/nesting": "*",
+    "@tailwindcss/typography": "*"
   },
   "prettier": {
     "semi": false,

packages/nextra-theme-blog/src/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, ReactNode } from 'react'
 import Head from 'next/head'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
@@ -191,8 +191,8 @@ const createLayout = (opts: PageOpt, _config: NextraBlogTheme) => {
     _config
   )
 
-  const Page = ({ children }: { children: React.ReactChildren }) => children
-  const Layout = (page: React.ReactChildren) => (
+  const Page = ({ children }: { children: ReactNode }) => children
+  const Layout = (page: ReactNode) => (
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
       <BlogLayout config={config} contentNodes={page} opts={opts} />
     </ThemeProvider>

packages/nextra-theme-blog/tailwind.config.js

@@ -1,6 +1,6 @@
 const colors = require('tailwindcss/colors')
 module.exports = {
-  content: ['./src/**/*.{js,tsx}'],
+  content: ['./src/**/*.{js,tsx,jsx}'],
   theme: {
     colors: {
       transparent: 'transparent',

packages/nextra-theme-docs/package.json

@@ -57,6 +57,7 @@
     "build": "tsup",
     "build:tailwind": "cross-env NODE_ENV=production pnpm postcss src/styles.css -o style.css --verbose",
     "types": "tsup --dts-only",
+    "types:check": "tsc --noEmit",
     "dev:layout": "tsup --watch",
     "dev:tailwind": "cross-env TAILWIND_MODE=watch pnpm postcss src/styles.css -o style.css --watch",
     "prepublishOnly": "pnpm build",
@@ -65,16 +66,16 @@
     "format": "prettier --write ."
   },
   "dependencies": {
-    "@headlessui/react": "^1.6.5",
     "@mdx-js/react": "^2.1.2",
+    "next-themes": "^0.2.0-beta.2",
+    "@headlessui/react": "^1.6.5",
     "@reach/skip-nav": "^0.17.0",
     "classnames": "^2.3.1",
     "flexsearch": "^0.7.21",
     "focus-visible": "^5.2.0",
     "github-slugger": "^1.4.0",
     "intersection-observer": "^0.12.2",
     "match-sorter": "^4.2.0",
-    "next-themes": "^0.2.0-beta.2",
     "parse-git-url": "^1.0.1",
     "scroll-into-view-if-needed": "^2.2.29",
     "title": "^3.4.2"
@@ -85,12 +86,23 @@
     "react-dom": ">=16.13.1"
   },
   "devDependencies": {
-    "@types/flexsearch": "^0.7.2",
-    "@types/react": "^17.0.39",
-    "autoprefixer": "^10.2.6",
-    "cross-env": "^7.0.2",
+    "next": "*",
+    "react": "*",
+    "react-dom": "*",
     "nextra": "workspace:*",
-    "tsup": "^6.1.3"
+    "@types/flexsearch": "^0.7.3",
+    "concurrently": "*",
+    "cross-env": "*",
+    "@types/react": "*",
+    "@types/react-dom": "*",
+    "tsup": "*",
+    "postcss": "*",
+    "postcss-cli": "*",
+    "autoprefixer": "*",
+    "cssnano": "*",
+    "tailwindcss": "*",
+    "@tailwindcss/nesting": "*",
+    "@tailwindcss/typography": "*"
   },
   "prettier": {
     "semi": false,

packages/nextra-theme-docs/src/bleed.tsx

@@ -1,11 +1,11 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import cn from 'classnames'
 
 interface BleedProps {
   full: boolean
 }
 
-const Bleed: React.FC<BleedProps> = ({ full, children }) => {
+const Bleed: React.FC<PropsWithChildren<BleedProps>> = ({ full, children }) => {
   return (
     <div
       className={cn('bleed relative -mx-6 mt-6 md:-mx-8 2xl:-mx-24', { full })}

packages/nextra-theme-docs/src/callout.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 
 const themes = {
   default:
@@ -17,7 +17,7 @@ interface CalloutProps {
   emoji: string
 }
 
-const Callout: React.FC<CalloutProps> = ({
+const Callout: React.FC<PropsWithChildren<CalloutProps>> = ({
   children,
   type = 'default',
   emoji = '💡'