[v3] fix reload of nextra layout on route change, reported by sound.x…

…yz (#2626)

* aa

* prettier

* adjust prefer-const rule extended by @typescript-eslint/eslint-recommended config

update eslint plugins

.changeset/sharp-mugs-warn.md

@@ -0,0 +1,5 @@
+---
+'nextra': patch
+---
+
+fix reload of nextra layout on route change, reported by sound.xyz

.eslintrc.cjs

@@ -59,6 +59,7 @@ module.exports = {
         'prefer-arrow-callback': ['error', { allowNamedFunctions: true }],
         'unicorn/prefer-at': 'error',
         'sonarjs/no-small-switch': 'error',
+        'prefer-const': ['error', { destructuring: 'all' }],
         // todo: enable
         '@typescript-eslint/no-explicit-any': 'off',
         '@typescript-eslint/no-non-null-assertion': 'off',

package.json

@@ -25,17 +25,17 @@
     "@ianvs/prettier-plugin-sort-imports": "4.1.1",
     "@next/eslint-plugin-next": "13.5.6",
     "@rollup/plugin-alias": "^5.0.0",
-    "@typescript-eslint/eslint-plugin": "6.9.0",
-    "@typescript-eslint/parser": "6.9.0",
-    "eslint": "8.52.0",
-    "eslint-config-prettier": "9.0.0",
-    "eslint-plugin-import": "2.29.0",
+    "@typescript-eslint/eslint-plugin": "6.18.1",
+    "@typescript-eslint/parser": "6.18.1",
+    "eslint": "8.56.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-import": "2.29.1",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-sonarjs": "^0.21.0",
-    "eslint-plugin-tailwindcss": "3.13.0",
+    "eslint-plugin-sonarjs": "^0.23.0",
+    "eslint-plugin-tailwindcss": "3.13.1",
     "eslint-plugin-typescript-sort-keys": "3.1.0",
-    "eslint-plugin-unicorn": "48.0.1",
+    "eslint-plugin-unicorn": "50.0.1",
     "prettier": "3.0.3",
     "prettier-plugin-pkg": "0.18.0",
     "prettier-plugin-tailwindcss": "0.5.6",

packages/nextra/src/client/setup-page.tsx

@@ -6,10 +6,10 @@
 import type { ReactElement, ReactNode } from 'react'
 import { NEXTRA_INTERNAL } from '../constants.js'
 import type {
-  Heading,
   NextraInternalGlobal,
   NextraMDXContent,
-  PageOpts
+  PageOpts,
+  UseTOC
 } from '../types'
 import { findFolder } from '../utils.js'
 import { useRouter } from './hooks/index.js'
@@ -33,58 +33,58 @@ export function HOC_MDXWrapper(
   __nextra_internal__.pageMap = pageOpts.pageMap
   __nextra_internal__.context[route] = {
     Content: MDXContent,
-    pageOpts
+    pageOpts,
+    useTOC
   }
-  return function NextraLayout({
-    __nextra_pageMap = [],
-    __nextra_dynamic_opts,
-    ...props
-  }: any): ReactElement {
-    const __nextra_internal__ = (globalThis as NextraInternalGlobal)[
-      NEXTRA_INTERNAL
-    ]
-    const { Layout, themeConfig } = __nextra_internal__
-    const { route, locale } = useRouter()
+  return NextraLayout
+}
 
-    const pageContext = __nextra_internal__.context[route]
+function NextraLayout({
+  __nextra_pageMap = [],
+  __nextra_dynamic_opts,
+  ...props
+}: any): ReactElement {
+  const __nextra_internal__ = (globalThis as NextraInternalGlobal)[
+    NEXTRA_INTERNAL
+  ]
+  const { Layout, themeConfig } = __nextra_internal__
+  const { route, locale } = useRouter()
 
-    if (!pageContext) {
-      throw new Error(
-        `No content found for the "${route}" route. Please report it as a bug.`
-      )
-    }
+  const pageContext = __nextra_internal__.context[route]
 
-    let { pageOpts } = pageContext
+  if (!pageContext) {
+    throw new Error(
+      `No content found for the "${route}" route. Please report it as a bug.`
+    )
+  }
 
-    for (const { route, children } of __nextra_pageMap) {
-      const paths = route.split('/').slice(locale ? 2 : 1)
-      const folder = findFolder(pageOpts.pageMap, paths)
-      folder.children = children
-    }
+  let { pageOpts, useTOC, Content } = pageContext
 
-    if (__nextra_dynamic_opts) {
-      const { title, frontMatter } = __nextra_dynamic_opts
-      pageOpts = {
-        ...pageOpts,
-        title,
-        frontMatter
-      }
-    }
+  for (const { route, children } of __nextra_pageMap) {
+    const paths = route.split('/').slice(locale ? 2 : 1)
+    const folder = findFolder(pageOpts.pageMap, paths)
+    folder.children = children
+  }
 
-    return (
-      <Layout themeConfig={themeConfig} pageOpts={pageOpts} pageProps={props}>
-        <DataProvider value={props}>
-          <MDXWrapper useTOC={useTOC}>
-            {/* @ts-expect-error */}
-            <pageContext.Content />
-          </MDXWrapper>
-        </DataProvider>
-      </Layout>
-    )
+  if (__nextra_dynamic_opts) {
+    const { title, frontMatter } = __nextra_dynamic_opts
+    pageOpts = {
+      ...pageOpts,
+      title,
+      frontMatter
+    }
   }
-}
 
-type UseTOC = (props: Record<string, any>) => Heading[]
+  return (
+    <Layout themeConfig={themeConfig} pageOpts={pageOpts} pageProps={props}>
+      <DataProvider value={props}>
+        <MDXWrapper useTOC={useTOC}>
+          <Content {...props} />
+        </MDXWrapper>
+      </DataProvider>
+    </Layout>
+  )
+}
 
 function MDXWrapper({
   children,

packages/nextra/src/server/loader.ts

@@ -222,18 +222,11 @@ import { pageMap } from '${slash(pageMapPath)}'
 ${isAppFileFromNodeModules ? cssImports : ''}
 ${finalResult}
 
-const hoc = HOC_MDXWrapper(
+export default HOC_MDXWrapper(
   MDXLayout,
   '${route}',
   ${stringifiedPageOpts},pageMap,frontMatter,title},
   typeof RemoteContent === 'undefined' ? useTOC : RemoteContent.useTOC
-)
-
-// Exporting Capitalized function make hot works
-export default function HOC(props) {
-  return hoc(props)
-}
-`
-
+)`
   return rawJs
 }

packages/nextra/src/types.ts

@@ -105,11 +105,20 @@ export type NextraMDXContent = FC<{
   children: ReactNode
 }>
 
+export type UseTOC = (props: Record<string, any>) => Heading[]
+
 export type NextraInternalGlobal = typeof globalThis & {
   [NEXTRA_INTERNAL]: {
     pageMap: PageMapItem[]
     route: string
-    context: Record<string, { Content: NextraMDXContent; pageOpts: PageOpts }>
+    context: Record<
+      string,
+      {
+        Content: NextraMDXContent
+        pageOpts: PageOpts
+        useTOC: UseTOC
+      }
+    >
     Layout: FC<NextraThemeLayoutProps>
     themeConfig?: ThemeConfig
   }