[v3] more major updates (#2251)

.changeset/mighty-cars-hear.md

@@ -0,0 +1,11 @@
+---
+'nextra': major
+---
+
+- set `"engines.node": ">=18"`
+
+- remove `Tab` export, use `Tabs.Tab` instead
+
+- remove `Card` export, use `Cards.Card` instead
+
+- disallow import md/mdx files that are outside of the working directory, use symlinks instead

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 { useSSG } from 'nextra/ssg'
+import { useSSG } from 'nextra/data'
 
 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 { useSSG } from 'nextra/ssg'
+import { useSSG } from 'nextra/data'
 
 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 { useSSG } from 'nextra/ssg'
+import { useSSG } from 'nextra/data'
 
 export const ReleasesRenderer = () => {
   const releases = useSSG()

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

@@ -1,4 +1,4 @@
-import { Callout, Tab, Tabs } from 'nextra/components'
+import { Callout, Tabs } from 'nextra/components'
 import { RemoteContent } from 'nextra/data'
 import { buildDynamicMDX, buildDynamicMeta } from 'nextra/remote'
 import json from '../../../../nextra-remote-filepaths/graphql-eslint.json'
@@ -29,4 +29,4 @@ export const getStaticPaths = () => ({
   }))
 })
 
-<RemoteContent components={{ Callout, $Tab: Tab, $Tabs: Tabs }} />
+<RemoteContent components={{ Callout, $Tabs: Tabs }} />

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

@@ -1,4 +1,4 @@
-import { Callout, Tab, Tabs } from 'nextra/components'
+import { Callout, Tabs } from 'nextra/components'
 import { RemoteContent } from 'nextra/data'
 import { buildDynamicMDX, buildDynamicMeta } from 'nextra/remote'
 import json from '../../../../nextra-remote-filepaths/graphql-yoga.json'
@@ -29,4 +29,11 @@ export const getStaticPaths = () => ({
   }))
 })
 
-<RemoteContent components={{ Callout, PackageCmd: () => null, Tab, Tabs }} />
+<RemoteContent
+  components={{
+    Callout,
+    PackageCmd: () => null,
+    Tab: Tabs.Tab,
+    Tabs
+  }}
+/>

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

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

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

@@ -1,5 +1,5 @@
 import Markdown from 'markdown-to-jsx'
-import { useSSG } from 'nextra/ssg'
+import { useSSG } from 'nextra/data'
 
 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 { useSSG } from 'nextra/ssg'
+import { useSSG } from 'nextra/data'
 import { getStaticTags } from './utils/get-tags'
 
 const NEXTRA_INTERNAL = Symbol.for('__nextra_internal__')

packages/nextra/package.json

@@ -5,20 +5,16 @@
   "repository": "https://github.com/shuding/nextra",
   "license": "MIT",
   "engines": {
-    "node": ">=16"
+    "node": ">=18"
   },
   "main": "./dist/index.js",
   "exports": {
     "./package.json": "./package.json",
     ".": "./dist/index.js",
     "./catch-all": "./dist/catch-all.js",
     "./data": {
-      "import": "./dist/ssg.js",
-      "types": "./dist/ssg.d.mts"
-    },
-    "./ssg": {
-      "import": "./dist/ssg.js",
-      "types": "./dist/ssg.d.mts"
+      "import": "./dist/data.js",
+      "types": "./dist/data.d.mts"
     },
     "./loader": "./loader.js",
     "./setup-page": {
@@ -72,10 +68,7 @@
         "./dist/context.d.mts"
       ],
       "data": [
-        "./dist/ssg.d.mts"
-      ],
-      "ssg": [
-        "./dist/ssg.d.mts"
+        "./dist/data.d.mts"
       ],
       "icons": [
         "./dist/icons/index.d.mts"
@@ -128,7 +121,7 @@
     "@mdx-js/react": "^2.3.0",
     "@napi-rs/simple-git": "^0.1.9",
     "@theguild/remark-mermaid": "^0.0.4",
-    "@theguild/remark-npm2yarn": "^0.1.1",
+    "@theguild/remark-npm2yarn": "0.2.0-alpha-20230904225308-5ba1c7b",
     "clsx": "^2.0.0",
     "github-slugger": "^2.0.0",
     "graceful-fs": "^4.2.11",

packages/nextra/src/compile.ts

@@ -1,4 +1,3 @@
-import { createRequire } from 'node:module'
 import path from 'node:path'
 import type { ProcessorOptions } from '@mdx-js/mdx'
 import { createProcessor } from '@mdx-js/mdx'
@@ -29,7 +28,6 @@ import {
   remarkLinkRewrite,
   remarkMdxDisableExplicitJsx,
   remarkRemoveImports,
-  remarkReplaceImports,
   remarkStaticImage,
   remarkStructurize
 } from './mdx-plugins'
@@ -46,8 +44,6 @@ globalThis.__nextra_temp_do_not_use = () => {
   import('./__temp__')
 }
 
-const require = createRequire(import.meta.url)
-
 const DEFAULT_REHYPE_PRETTY_CODE_OPTIONS: RehypePrettyCodeOptions = {
   // @ts-expect-error -- TODO: fix type error
   theme,
@@ -153,6 +149,12 @@ export async function compileMdx(
   const isFileOutsideCWD =
     !isPageImport && path.relative(CWD, filePath).startsWith('..')
 
+  if (isFileOutsideCWD) {
+    throw new Error(
+      `Unexpected import of "${filePath}" that is outside of working directory, use symlinks instead`
+    )
+  }
+
   const isRemoteContent = outputFormat === 'function-body'
 
   const compiler =
@@ -193,9 +195,7 @@ export async function compileMdx(
       jsx,
       format,
       outputFormat,
-      providerImportSource: isFileOutsideCWD
-        ? require.resolve('nextra').replace(/index\.js$/, 'mdx.js') // fixes Package subpath './mdx' is not defined by "exports"
-        : 'nextra/mdx',
+      providerImportSource: 'nextra/mdx',
       remarkPlugins: [
         ...(remarkPlugins || []),
         remarkMermaid, // should be before remarkRemoveImports because contains `import { Mermaid } from ...`
@@ -222,7 +222,6 @@ export async function compileMdx(
         staticImage && remarkStaticImage,
         readingTime && remarkReadingTime,
         latex && remarkMath,
-        isFileOutsideCWD && remarkReplaceImports,
         // Remove the markdown file extension from links
         [
           clonedRemarkLinkRewrite,

packages/nextra/src/components/cards.tsx

@@ -25,7 +25,7 @@ const arrowEl = (
   </span>
 )
 
-export function Card({
+function Card({
   children,
   title,
   icon,

packages/nextra/src/components/index.ts

@@ -4,11 +4,11 @@ export { CopyToClipboard } from './copy-to-clipboard'
 export { Code } from './code'
 export { Pre } from './pre'
 export { Steps } from './steps'
-export { Tabs, Tab } from './tabs'
+export { Tabs } from './tabs'
 export { Td } from './td'
 export { Table } from './table'
 export { Th } from './th'
 export { Tr } from './tr'
-export { Cards, Card } from './cards'
+export { Cards } from './cards'
 export { FileTree } from './file-tree'
 export { Mermaid } from '@theguild/remark-mermaid/mermaid'

packages/nextra/src/components/tabs.tsx

@@ -111,10 +111,7 @@ function _Tabs({
   )
 }
 
-export function Tab({
-  children,
-  ...props
-}: ComponentProps<'div'>): ReactElement {
+function Tab({ children, ...props }: ComponentProps<'div'>): ReactElement {
   return (
     <HeadlessTab.Panel {...props} className="nx-rounded nx-pt-6">
       {children}

packages/nextra/src/ssg.tsx → packages/nextra/src/data.tsx

@@ -6,7 +6,7 @@ import { useMDXComponents } from './mdx'
 export const SSGContext = createContext<any>(false)
 export const useSSG = (key = 'ssg') => useContext(SSGContext)?.[key]
 
-// Make sure nextra/ssg remains functional, but we now recommend this new API.
+// Make sure nextra/data remains functional, but we now recommend this new API.
 
 export const DataContext = SSGContext
 export const useData = useSSG

packages/nextra/src/layout.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react'
-import { SSGContext } from './ssg'
+import { SSGContext } from './data'
 import { useInternals } from './use-internals'
 
 export default function Nextra({

packages/nextra/src/mdx-plugins/index.ts

@@ -1,7 +1,6 @@
 export { parseMeta, attachMeta } from './rehype'
 export { remarkCustomHeadingId } from './remark-custom-heading-id'
 export { remarkHeadings } from './remark-headings'
-export { remarkReplaceImports } from './remark-replace-imports'
 export { remarkRemoveImports } from './remark-remove-imports'
 export {
   remarkLinkRewrite,

packages/nextra/src/utils.ts

@@ -90,7 +90,7 @@ export function getDefault<T>(module: T & { default?: T }): T {
 }
 
 export const logger = {
-  info: console.log.bind(null, '- ', '\x1b[36minfo\x1b[0m', '[nextra]'),
-  warn: console.log.bind(null, '- ', '\x1b[33mwarn\x1b[0m', '[nextra]'),
-  error: console.log.bind(null, '- ', '\x1b[31mwarn\x1b[0m', '[nextra]')
+  info: console.log.bind(null, '-', '\x1b[36minfo\x1b[0m', '[nextra]'),
+  warn: console.log.bind(null, '-', '\x1b[33mwarn\x1b[0m', '[nextra]'),
+  error: console.log.bind(null, '-', '\x1b[31mwarn\x1b[0m', '[nextra]')
 }

packages/nextra/tsup.config.ts

@@ -7,7 +7,7 @@ import { defineConfig } from 'tsup'
 
 const CLIENT_ENTRY = [
   'src/{use-internals,setup-page,normalize-pages,mdx,context}.ts',
-  'src/{ssg,layout}.tsx',
+  'src/{data,layout}.tsx',
   'src/{components,hooks,icons}/*.{ts,tsx}'
 ]