feat: support rspress@2.0.0-beta.21

packages/tester/package.json

@@ -11,7 +11,7 @@
     "preview": "rspress preview"
   },
   "dependencies": {
-    "rspress": "^2.0.0-beta.18",
+    "rspress": "^2.0.0-beta.21",
     "@callstack/rspress-theme": "workspace:*"
   },
   "devDependencies": {

packages/theme/README.md

@@ -45,7 +45,7 @@ The theme uses **Alliance No. 2** as the header font family. This is a licensed
 3. **Link the styles in your Rspress config** by adding the `globalStyles` option:
 
 ```ts
-import { defineConfig } from '@rspress/shared';
+import { defineConfig } from 'rspress/core';
 import { pluginCallstackTheme } from '@callstack/rspress-theme/plugin';
 
 export default defineConfig({
@@ -63,7 +63,7 @@ To use the `rspress-theme` package, you need to add the plugin to the Rspress co
 In your `rspress.config.ts` file, import `pluginCallstackTheme` from `@callstack/rspress-theme/plugin` and add it to the plugins array:
 
 ```ts
-import { defineConfig } from '@rspress/shared';
+import { defineConfig } from 'rspress/core';
 import { pluginCallstackTheme } from '@callstack/rspress-theme/plugin';
 
 export default defineConfig({

packages/theme/package.json

@@ -46,7 +46,8 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "react": "^19.0.0"
+    "react": "^19.0.0",
+    "rspress": "^2.0.0-beta.21"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.52.8",
@@ -55,10 +56,10 @@
     "@rsbuild/plugin-sass": "^1.3.3",
     "@rsbuild/plugin-svgr": "^1.2.1",
     "@rslib/core": "^0.10.5",
-    "@rspress/shared": "^2.0.0-beta.18",
     "@types/node": "^22",
     "@types/react": "^19",
     "react": "^19",
+    "rspress": "^2.0.0-beta.21",
     "typescript": "^5.8.3"
   }
 }

packages/theme/rslib.config.ts

@@ -27,7 +27,7 @@ const themeConfig: LibConfig = {
   },
   output: {
     distPath: { root: './dist' },
-    externals: ['@runtime', '@theme', '@shared'],
+    externals: ['@theme'],
     target: 'web',
   },
   plugins: [pluginImageCompress(), pluginReact(), pluginSass(), pluginSvgr()],

packages/theme/src/plugin/index.ts

@@ -1,6 +1,6 @@
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-import type { RspressPlugin, UserConfig } from '@rspress/shared';
+import type { RspressPlugin, UserConfig } from 'rspress/core';
 
 const dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -49,14 +49,5 @@ export function pluginCallstackTheme(): RspressPlugin {
     },
     // inject style overrides
     globalStyles: path.join(path.dirname(dirname), 'styles/styles.css'),
-    // add aliases for runtime and shared
-    builderConfig: {
-      resolve: {
-        alias: {
-          '@runtime': '@rspress/core/runtime',
-          '@shared': '@rspress/shared',
-        },
-      },
-    },
   };
 }

packages/theme/src/theme/components/announcement/index.tsx

@@ -1,5 +1,5 @@
-import { NoSSR } from '@runtime';
 import { useState } from 'react';
+import { NoSSR } from 'rspress/runtime';
 import IconClose from './close.svg?react';
 import styles from './index.module.scss';
 

packages/theme/src/theme/components/button/index.ts

@@ -1,6 +1,6 @@
-import { useDark } from '@runtime';
 import { Link } from '@theme';
 import * as React from 'react';
+import { useDark } from 'rspress/runtime';
 import IconArrowBarRight from './arrow-bar-right.svg?react';
 import IconCorner from './corner-down-right.svg?react';
 import styles from './index.module.scss';

packages/theme/src/theme/components/home-feature/index.tsx

@@ -1,6 +1,9 @@
-import type { Feature, FrontMatterMeta } from '@rspress/shared';
-import { normalizeHrefInRuntime, withBase } from '@runtime';
-import { isExternalUrl } from '@shared';
+import {
+  isExternalUrl,
+  normalizeHrefInRuntime,
+  withBase,
+} from 'rspress/runtime';
+import type { Feature, FrontMatterMeta } from '../../types';
 import { renderHtmlOrText } from '../../utils';
 import styles from './index.module.scss';
 

packages/theme/src/theme/components/home-footer/index.tsx

@@ -1,5 +1,5 @@
-import { usePageData } from '@runtime';
 import { Link, SocialLinks } from '@theme';
+import { usePageData } from 'rspress/runtime';
 import CKLogoDark from './ck-logo-dark.svg?react';
 import CKLogoLight from './ck-logo-light.svg?react';
 import styles from './index.module.scss';

packages/theme/src/theme/components/home-hero/index.tsx

@@ -1,6 +1,10 @@
-import type { FrontMatterMeta } from '@rspress/shared';
-import { normalizeHrefInRuntime, normalizeImagePath, withBase } from '@runtime';
-import { isExternalUrl } from '@shared';
+import {
+  isExternalUrl,
+  normalizeHrefInRuntime,
+  normalizeImagePath,
+  withBase,
+} from 'rspress/runtime';
+import type { FrontMatterMeta, Hero } from '../../types';
 import { renderHtmlOrText } from '../../utils';
 import { Button } from '../button';
 import styles from './index.module.scss';
@@ -11,7 +15,7 @@ const DEFAULT_HERO = {
   tagline: '',
   actions: [],
   image: undefined,
-} satisfies FrontMatterMeta['hero'];
+} satisfies Hero;
 
 interface HomeHeroProps {
   frontmatter: FrontMatterMeta;
@@ -24,7 +28,6 @@ function HomeHero({
   beforeHeroActions,
   afterHeroActions,
   frontmatter,
-  routePath,
 }: HomeHeroProps) {
   const hero = frontmatter.hero ?? DEFAULT_HERO;
   const imageSrc =
@@ -67,7 +70,7 @@ function HomeHero({
           {hero.actions.map((action) => {
             const link = isExternalUrl(action.link)
               ? action.link
-              : normalizeHrefInRuntime(withBase(action.link, routePath));
+              : normalizeHrefInRuntime(withBase(action.link));
 
             return (
               <Button

packages/theme/src/theme/components/version-badge/index.tsx

@@ -1,5 +1,5 @@
-import { usePageData } from '@runtime';
 import { Badge } from '@theme';
+import { usePageData } from 'rspress/runtime';
 
 interface VersionBadgeProps {
   version?: string;

packages/theme/src/theme/global.d.ts

@@ -23,5 +23,3 @@ declare module '*.avif' {
 
 // rspress aliases
 declare module '@theme';
-declare module '@runtime';
-declare module '@shared';

packages/theme/src/theme/types.ts

@@ -0,0 +1,48 @@
+export interface Hero {
+  name: string;
+  text: string;
+  tagline: string;
+  image?: {
+    src: string | { dark: string; light: string };
+    alt: string;
+    /**
+     * `srcset` and `sizes` are attributes of `<img>` tag. Please refer to https://mdn.io/srcset for the usage.
+     * When the value is an array, rspress will join array members with commas.
+     **/
+    sizes?: string | string[];
+    srcset?: string | string[];
+  };
+  actions: {
+    text: string;
+    link: string;
+    theme: 'brand' | 'alt';
+  }[];
+}
+
+export interface Feature {
+  icon: string;
+  title: string;
+  details: string;
+  span?: number;
+  link?: string;
+}
+
+export type PageType = 'home' | 'doc' | 'custom' | '404' | 'blank';
+
+export interface FrontMatterMeta {
+  title?: string;
+  description?: string;
+  overview?: boolean;
+  pageType?: PageType;
+  features?: Feature[];
+  hero?: Hero;
+  sidebar?: boolean;
+  outline?: boolean;
+  lineNumbers?: boolean;
+  overviewHeaders?: number[];
+  titleSuffix?: string;
+  head?: [string, Record<string, string>][];
+  context?: string;
+  footer?: boolean;
+  [key: string]: unknown;
+}