[v3] remove nextra/data export, move useData to nextra/hooks, RemoteContent to nextra/components (#2467)

Author: Dimitri POSTOLOV

.changeset/pretty-colts-float.md

@@ -0,0 +1,5 @@
+---
+'nextra': patch
+---
+
+remove `nextra/data` export, move `useData` to `nextra/hooks`, `RemoteContent` to `nextra/components`

docs/pages/docs/guide/built-ins/cards.mdx

@@ -1,6 +1,5 @@
 import { CardsIcon, OneIcon, WarningIcon } from '@components/icons'
-import { Cards } from 'nextra/components'
-import { RemoteContent } from 'nextra/data'
+import { Cards, RemoteContent } from 'nextra/components'
 import { buildDynamicMDX } from 'nextra/remote'
 
 export async function getStaticProps() {

docs/pages/docs/guide/ssg.mdx

@@ -1,4 +1,4 @@
-import { useData } from 'nextra/data'
+import { useData } from 'nextra/hooks'
 
 # Next.js SSG
 
@@ -44,7 +44,7 @@ enabled, it will be kept up to date.
 Here's the MDX code for the example above:
 
 ```mdx filename="MDX"
-import { useData } from 'nextra/data'
+import { useData } from 'nextra/hooks'
 
 export function getStaticProps() {
   return fetch('https://api.github.com/repos/shuding/nextra')

examples/docs/src/pages/features/ssg.mdx

@@ -7,7 +7,7 @@ can also be cached by a CDN to maximize the performance.
 
 This is supported by Nextra too. Here's an example:
 
-import { useData } from 'nextra/data'
+import { useData } from 'nextra/hooks'
 
 export const getStaticProps = ({ params }) => {
   return fetch(`https://api.github.com/repos/shuding/nextra`)
@@ -44,7 +44,7 @@ enabled, it will be kept up to date.
 Here's the MDX code for the example above:
 
 ```js filename="ssg.mdx"
-import { useData } from 'nextra/data'
+import { useData } from 'nextra/hooks'
 
 export const getStaticProps = ({ params }) => {
   return fetch(`https://api.github.com/repos/shuding/nextra`)

examples/swr-site/pages/en/docs/change-log.mdx

@@ -1,6 +1,6 @@
 # Change Log
 
-import { useData } from 'nextra/data'
+import { useData } from 'nextra/hooks'
 
 export const ReleasesRenderer = () => {
   const releases = useData()

examples/swr-site/pages/en/remote/[slug].mdx.bak

@@ -1,4 +1,4 @@
-import { RemoteContent } from 'nextra/data'
+import { RemoteContent } from 'nextra/components'
 import { buildDynamicMDX, buildDynamicMeta } from 'nextra/remote'
 
 export const getStaticProps = async ({ params }) => {

examples/swr-site/pages/en/remote/graphql-eslint/[[...slug]].mdx

@@ -1,5 +1,4 @@
-import { Callout, Tabs } from 'nextra/components'
-import { RemoteContent } from 'nextra/data'
+import { Callout, RemoteContent, Tabs } from 'nextra/components'
 import { buildDynamicMDX, buildDynamicMeta } from 'nextra/remote'
 import json from '../../../../nextra-remote-filepaths/graphql-eslint.json'
 

examples/swr-site/pages/en/remote/graphql-yoga/[[...slug]].mdx

@@ -1,5 +1,4 @@
-import { Callout, Tabs } from 'nextra/components'
-import { RemoteContent } from 'nextra/data'
+import { Callout, RemoteContent, Tabs } from 'nextra/components'
 import { buildDynamicMDX, buildDynamicMeta } from 'nextra/remote'
 import json from '../../../../nextra-remote-filepaths/graphql-yoga.json'
 

examples/swr-site/pages/es/docs/change-log.mdx

@@ -1,5 +1,5 @@
 import Markdown from 'markdown-to-jsx'
-import { useData } from 'nextra/data'
+import { useData } from 'nextra/hooks'
 
 export function getStaticProps() {
   return (

examples/swr-site/pages/ru/docs/change-log.mdx

@@ -1,5 +1,5 @@
 import Markdown from 'markdown-to-jsx'
-import { useData } from 'nextra/data'
+import { useData } from 'nextra/hooks'
 
 export const getStaticProps = () => {
   return (

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

@@ -1,6 +1,6 @@
 import type { GetStaticPaths, GetStaticProps } from 'next'
 import Head from 'next/head'
-import { useData } from 'nextra/data'
+import { useData } from 'nextra/hooks'
 import { getStaticTags } from './utils/get-tags'
 
 const NEXTRA_INTERNAL = Symbol.for('__nextra_internal__')

packages/nextra/package.json

@@ -77,9 +77,6 @@
       "context": [
         "./dist/client/context.d.ts"
       ],
-      "data": [
-        "./dist/client/data.d.ts"
-      ],
       "icons": [
         "./dist/client/icons/index.d.ts"
       ],
@@ -140,7 +137,7 @@
     "remark-gfm": "^3.0.1",
     "remark-math": "^6.0.0",
     "remark-reading-time": "^2.0.1",
-    "shiki": "npm:shikiji@0.6.8",
+    "shiki": "npm:shikiji@0.6.10",
     "slash": "^5.1.0",
     "title": "^3.5.3",
     "unist-util-remove": "^4.0.0",

packages/nextra/src/client/components/index.ts

@@ -1,16 +1,16 @@
 export { Button } from './button.js'
 export { Callout } from './callout.js'
-export { CopyToClipboard } from './copy-to-clipboard.js'
+export { Cards } from './cards.js'
 export { Code } from './code.js'
+export { CopyToClipboard } from './copy-to-clipboard.js'
+export { FileTree } from './file-tree.js'
 export { Pre } from './pre.js'
+export { RemoteContent } from './remote-content.js'
 export { Steps } from './steps.js'
+export { Table } from './table.js'
 export { Tabs } from './tabs.js'
 export { Td } from './td.js'
-export { Table } from './table.js'
 export { Th } from './th.js'
 export { Tr } from './tr.js'
-export { Cards } from './cards.js'
-export { FileTree } from './file-tree.js'
 export { Mermaid } from '@theguild/remark-mermaid/mermaid'
-export { RemoteContent } from '../data.js'
 export { MathJax, MathJaxContext } from 'better-react-mathjax'

packages/nextra/src/client/data.tsx renamed to packages/nextra/src/client/components/remote-content.tsx

@@ -1,16 +1,7 @@
-import { createContext, useContext } from 'react'
-import { jsxRuntime } from './jsx-runtime.cjs'
-import type { Components } from './mdx'
-import { useMDXComponents } from './mdx.js'
-
-const SSGContext = createContext<Record<string, any>>({})
-
-export const useData = (key = 'ssg') => useContext(SSGContext)[key]
-
-// Make sure nextra/data remains functional, but we now recommend this new API.
-
-export const DataProvider = SSGContext.Provider
-SSGContext.displayName = 'SSG'
+import { useData } from '../hooks/index.js'
+import { jsxRuntime } from '../jsx-runtime.cjs'
+import type { Components } from '../mdx.js'
+import { useMDXComponents } from '../mdx.js'
 
 function evaluate(compiledSource: string, scope: Record<string, unknown> = {}) {
   // if we're ready to render, we can assemble the component tree and let React do its thing
@@ -19,7 +10,7 @@ function evaluate(compiledSource: string, scope: Record<string, unknown> = {}) {
   const keys = Object.keys(scope)
   const values = Object.values(scope)
   // now we eval the source code using a function constructor
-  // in order for this to work we need to have React, the mdx createElement,
+  // in order for this to work we need to have React, the mdx `createElement`,
   // and all our components in scope for the function, which is the case here
   // we pass the names (via keys) in as the function's args, and execute the
   // function with the actual values.
@@ -43,7 +34,7 @@ export function RemoteContent({
    * Pass-through variables for use in the MDX content
    */
   scope?: Record<string, unknown>
-} = {}) {
+}) {
   const compiledSource = useData('__nextra_dynamic_mdx')
   if (!compiledSource) {
     throw new Error(

packages/nextra/src/client/hooks/index.ts

@@ -1,3 +1,4 @@
-export * from './use-mounted.js'
-export * from './use-fs-route.js'
-export * from './use-router.js'
+export { useData } from './use-data.js'
+export { useMounted } from './use-mounted.js'
+export { useFSRoute } from './use-fs-route.js'
+export { useRouter } from './use-router.js'

packages/nextra/src/client/hooks/use-data.ts

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react'
+
+const SSGContext = createContext<Record<string, any>>({})
+
+export const useData = (key = 'ssg') => useContext(SSGContext)[key]
+
+// Make sure nextra/hooks remains functional, but we now recommend this new API.
+
+export const DataProvider = SSGContext.Provider
+SSGContext.displayName = 'SSG'

packages/nextra/src/client/mdx.ts

@@ -1,7 +1,4 @@
-import {
-  MDXContext,
-  useMDXComponents as originalUseMDXComponents
-} from '@mdx-js/react'
+import { useMDXComponents as originalUseMDXComponents } from '@mdx-js/react'
 import type { Components } from '@mdx-js/react/lib'
 import Image, { type ImageProps } from 'next/image'
 import { createElement } from 'react'
@@ -24,5 +21,3 @@ export const useMDXComponents: typeof originalUseMDXComponents = components => {
 export { MDXProvider } from '@mdx-js/react'
 
 export type { Components }
-
-MDXContext.displayName = 'MDX'

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

@@ -12,8 +12,8 @@ import type {
   PageOpts
 } from '../types'
 import { findFolder } from '../utils.js'
-import { DataProvider } from './data.js'
 import { useRouter } from './hooks/index.js'
+import { DataProvider } from './hooks/use-data.js'
 import { useMDXComponents } from './mdx.js'
 
 export function HOC_MDXWrapper(

packages/nextra/src/server/compile.ts

@@ -6,14 +6,12 @@ import { remarkMermaid } from '@theguild/remark-mermaid'
 import { remarkNpm2Yarn } from '@theguild/remark-npm2yarn'
 import type { Program } from 'estree'
 import rehypeKatex from 'rehype-katex'
-import type { Options as RehypePrettyCodeOptions } from 'rehype-pretty-code'
 import rehypePrettyCode from 'rehype-pretty-code'
 import rehypeRaw from 'rehype-raw'
 import remarkFrontmatter from 'remark-frontmatter'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 import remarkReadingTime from 'remark-reading-time'
-import { bundledLanguages, getHighlighter } from 'shiki'
 import type { Pluggable, Plugin } from 'unified'
 import type {
   FrontMatter,
@@ -23,7 +21,6 @@ import type {
   StructurizedData
 } from '../types'
 import {
-  CODE_BLOCK_FILENAME_REGEX,
   CWD,
   DEFAULT_LOCALE,
   ERROR_ROUTES,
@@ -34,6 +31,7 @@ import {
   recmaRewriteJsx
 } from './recma-plugins/index.js'
 import {
+  DEFAULT_REHYPE_PRETTY_CODE_OPTIONS,
   rehypeAttachCodeMeta,
   rehypeBetterReactMathjax,
   rehypeExtractTocContent,
@@ -53,45 +51,6 @@ import {
 } from './remark-plugins/index.js'
 import { logger, truthy } from './utils.js'
 
-export const DEFAULT_REHYPE_PRETTY_CODE_OPTIONS: RehypePrettyCodeOptions = {
-  keepBackground: false,
-  grid: false,
-  onVisitLine(node) {
-    // Prevent lines from collapsing in `display: grid` mode, and
-    // allow empty lines to be copy/pasted
-    if (node.children.length === 0) {
-      node.children.push({ type: 'text', value: ' ' })
-    }
-    delete node.properties['data-line']
-  },
-  filterMetaString: meta => meta.replace(CODE_BLOCK_FILENAME_REGEX, ''),
-  async getHighlighter(_opts) {
-    const DEFAULT_OPTS = {
-      themes: {
-        light: 'github-light',
-        dark: 'github-dark'
-      },
-      defaultColor: false
-    } as const
-
-    const highlighter = await getHighlighter({
-      themes: Object.values(DEFAULT_OPTS.themes),
-      langs: Object.keys(bundledLanguages)
-    })
-
-    const originalCodeToHtml = highlighter.codeToHtml
-
-    return Object.assign(highlighter, {
-      codeToHtml(code: string, lang: string) {
-        return originalCodeToHtml(code, { lang, ...DEFAULT_OPTS })
-      },
-      ansiToHtml(code: string) {
-        return this.codeToHtml(code, 'ansi')
-      }
-    })
-  }
-}
-
 const cachedCompilerForFormat: Record<
   Exclude<ProcessorOptions['format'], undefined | null>,
   Processor

packages/nextra/src/server/constants.ts

@@ -38,8 +38,6 @@ export const MARKDOWN_EXTENSIONS = ['md', 'mdx'] as const
 
 export const EXTERNAL_URL_REGEX = /^https?:\/\//
 
-export const CODE_BLOCK_FILENAME_REGEX = /filename="([^"]+)"/
-
 export const DEFAULT_LOCALES = ['']
 
 // Experimental, need to deep dive why bundle becomes bigger and there is full

packages/nextra/src/server/rehype-plugins/__tests__/rehype-icon.test.ts

@@ -2,8 +2,8 @@ import { compile } from '@mdx-js/mdx'
 import type { VFile } from '@mdx-js/mdx/lib/compile'
 import rehypePrettyCode from 'rehype-pretty-code'
 import { clean } from '../../../../__test__/test-utils.js'
-import { DEFAULT_REHYPE_PRETTY_CODE_OPTIONS } from '../../compile.js'
 import {
+  DEFAULT_REHYPE_PRETTY_CODE_OPTIONS,
   rehypeAttachCodeMeta,
   rehypeIcon,
   rehypeParseCodeMeta

packages/nextra/src/server/rehype-plugins/index.ts

@@ -1,4 +1,8 @@
-export { rehypeParseCodeMeta, rehypeAttachCodeMeta } from './rehype.js'
+export {
+  rehypeParseCodeMeta,
+  rehypeAttachCodeMeta,
+  DEFAULT_REHYPE_PRETTY_CODE_OPTIONS
+} from './rehype.js'
 export { rehypeBetterReactMathjax } from './rehype-better-react-mathjax.js'
 export { rehypeExtractTocContent } from './rehype-extract-toc-content.js'
 export { rehypeIcon } from './rehype-icon.js'

packages/nextra/src/server/rehype-plugins/rehype.ts

@@ -1,13 +1,55 @@
 import type { Element } from 'hast'
+import type { Options as RehypePrettyCodeOptions } from 'rehype-pretty-code'
+import { bundledLanguages, getHighlighter } from 'shiki'
 import type { Plugin } from 'unified'
 import { visit } from 'unist-util-visit'
-import { CODE_BLOCK_FILENAME_REGEX } from '../constants.js'
 
 type PreElement = Element & {
   __filename?: string
   __hasCopyCode?: boolean
 }
 
+const CODE_BLOCK_FILENAME_REGEX = /filename="([^"]+)"/
+
+export const DEFAULT_REHYPE_PRETTY_CODE_OPTIONS: RehypePrettyCodeOptions = {
+  keepBackground: false,
+  grid: false,
+  onVisitLine(node) {
+    // Prevent lines from collapsing in `display: grid` mode, and
+    // allow empty lines to be copy/pasted
+    if (node.children.length === 0) {
+      node.children.push({ type: 'text', value: ' ' })
+    }
+    delete node.properties['data-line']
+  },
+  filterMetaString: meta => meta.replace(CODE_BLOCK_FILENAME_REGEX, ''),
+  async getHighlighter(_opts) {
+    const DEFAULT_OPTS = {
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark'
+      },
+      defaultColor: false
+    } as const
+
+    const highlighter = await getHighlighter({
+      themes: Object.values(DEFAULT_OPTS.themes),
+      langs: Object.keys(bundledLanguages)
+    })
+
+    const originalCodeToHtml = highlighter.codeToHtml
+
+    return Object.assign(highlighter, {
+      codeToHtml(code: string, lang: string) {
+        return originalCodeToHtml(code, { lang, ...DEFAULT_OPTS })
+      },
+      ansiToHtml(code: string) {
+        return this.codeToHtml(code, 'ansi')
+      }
+    })
+  }
+}
+
 export const rehypeParseCodeMeta: Plugin<
   [{ defaultShowCopyCode?: boolean }],
   any

packages/nextra/src/server/remark-plugins/__tests__/rehype-extract-toc-content.test.ts

@@ -355,7 +355,7 @@ export const frontMatter = {
   describe('Remote MDX', () => {
     it("with outputFormat: 'program'", async () => {
       const rawMdx = `
-import { RemoteContent } from 'nextra/data'
+import { RemoteContent } from 'nextra/components'
 
 ## hello
 
@@ -372,7 +372,7 @@ import { RemoteContent } from 'nextra/data'
         import { useMDXComponents as _provideComponents } from 'nextra/mdx'
         const title = '[[...slug]]'
         const frontMatter = {}
-        import { RemoteContent } from 'nextra/data'
+        import { RemoteContent } from 'nextra/components'
         export function useTOC(props) {
           return [
             {