npm - @modern-js/main-doc - Versions diffs - 2.67.5 → 2.67.6 - Mend

@modern-js/main-doc 2.67.5 → 2.67.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (181) hide show

package/package.json CHANGED Viewed

@@ -15,17 +15,20 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.67.5",
+  "version": "2.67.6",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "dependencies": {
     "mermaid": "^11.4.1",
-    "@modern-js/sandpack-react": "2.67.5"
+    "@modern-js/sandpack-react": "2.67.6"
   },
   "devDependencies": {
-    "@rspress/shared": "1.43.11",
+    "@rsbuild/plugin-sass": "1.3.1",
+    "@shikijs/transformers": "^3.4.2",
+    "@rspress/shared": "2.0.0-beta.6",
+    "@rspress/plugin-llms": "2.0.0-beta.6",
     "@types/fs-extra": "9.0.13",
     "@types/node": "^16",
     "classnames": "^2.5.1",
@@ -33,7 +36,7 @@
     "fs-extra": "^10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "rspress": "1.43.11",
+    "rspress": "2.0.0-beta.6",
     "ts-node": "^10.9.1",
     "typescript": "^5"
   },

package/rspress.config.ts CHANGED Viewed

@@ -1,10 +1,16 @@
 import path from 'path';
+import { pluginSass } from '@rsbuild/plugin-sass';
+import { pluginLlms } from '@rspress/plugin-llms';
+import { transformerNotationHighlight } from '@shikijs/transformers';
 import { defineConfig } from 'rspress/config';
 const docPath = path.join(__dirname, 'docs');
 export default defineConfig({
   root: docPath,
+  title: 'Modern.js',
+  description:
+    'The Modern.js framework is a progressive web framework based on React. At ByteDance, we use Modern.js to build upper-level frameworks that have supported the development of thousands of web applications.',
   base: '/',
   logo: 'https://lf-cdn-tos.bytescm.com/obj/static/webinfra/modern-js-website/assets/images/images/modernjs-logo.svg',
   icon: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico',
@@ -12,8 +18,11 @@ export default defineConfig({
   themeDir: path.join(__dirname, 'src'),
   markdown: {
     checkDeadLinks: true,
-    experimentalMdxRs: true,
+    shiki: {
+      transformers: [transformerNotationHighlight()],
+    },
   },
+  plugins: [pluginLlms()],
   search: {
     codeBlocks: true,
   },
@@ -58,6 +67,11 @@ export default defineConfig({
       text: 'Edit this page on GitHub',
     },
     socialLinks: [
+      {
+        icon: 'discord',
+        mode: 'link',
+        content: 'https://discord.gg/qPCqYg38De',
+      },
       {
         icon: 'github',
         mode: 'link',
@@ -91,5 +105,6 @@ export default defineConfig({
         '@site': require('path').resolve(__dirname),
       },
     },
+    plugins: [pluginSass()],
   },
 });

package/src/components/RsbuildLink/index.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useLang } from 'rspress/runtime';
-const RsbuildLInk = ({ configName }: { configName: string }) => {
+const RsbuildLink = ({ configName }: { configName: string }) => {
   const lang = useLang();
   const href = `https://rsbuild.dev/${lang === 'zh' ? 'zh/' : ''}config/${configName
     .split('.')
@@ -16,4 +16,4 @@ const RsbuildLInk = ({ configName }: { configName: string }) => {
   );
 };
-export default RsbuildLInk;
+export default RsbuildLink;

package/src/index.ts CHANGED Viewed

@@ -1,9 +1,5 @@
-import Theme from 'rspress/theme';
 import HomeLayout from './pages';
-export default {
-  ...Theme,
-  HomeLayout,
-};
+export { HomeLayout };
 export * from 'rspress/theme';

package/src/pages/index.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { useEffect } from 'react';
-import { Helmet, useLocation } from 'rspress/runtime';
+import { Head, useLocation } from 'rspress/runtime';
 import ContentCard from '../components/ContentCard';
 import { FeatureLayout } from '../components/FeatureLayout';
 import Footer from '../components/Footer';
@@ -94,7 +94,7 @@ export default function Home() {
   return (
     <div>
-      <Helmet>
+      <Head>
         <html className="dark" />
         <script>window.MODERN_THEME = 'dark';</script>
         <style type="text/css">{`
@@ -102,7 +102,7 @@ export default function Home() {
             display: none!important;
           }
         `}</style>
-      </Helmet>
+      </Head>
       <HomepageHeader />
       <main className={styles['homepage-main']}>
         <FeatureLayout>

package/docs/en/apis/app/hooks/api/middleware.mdx DELETED Viewed

@@ -1,11 +0,0 @@
----
-title: _app.[tj]s
-sidebar_position: 2
----
-# _app.[tj]s
-This file can add pre-middleware to BFF functions. For detailed information, refer to [Extend BFF Server](/guides/advanced-features/bff/extend-server).
-:::note
-For specific examples, please refer to [hook](/apis/app/runtime/bff/hook).
-:::

package/docs/en/apis/app/runtime/bff/hook.mdx DELETED Viewed

@@ -1,44 +0,0 @@
----
-title: hook
----
-# hook
-Used to add framework middleware under BFF function mode, the middleware will execute before BFF function.
-## Usage
-according to the framework extend plugin, export from the corresponding namespace:
-```ts
-import { hook } from '@modern-js/runtime/{namespace}';
-```
-## Function Signature
-```ts
-type HookOptions = {
-  addMiddleware: string | function;
-};
-function hook(options: HookOptions): void;
-```
-### Input
-- `options`: a range of hooks provided by Modern.js.
-  - `addMiddleware`: add middlewares for BFF.
-## Example
-middleware for different frameworks should be different(an example is when using the koa framework):
-```ts title=api/_app.ts
-import { hook } from '@modern-js/runtime/koa';
-export default hook(({ addMiddleware }) => {
-  addMiddleware(async (ctx, next) => {
-    ctx.req.query.id = 'koa';
-    await next();
-  });
-});
-```

package/docs/en/apis/app/runtime/bff/use-context.mdx DELETED Viewed

@@ -1,38 +0,0 @@
----
-title: useContext
----
-# useContext
-Used to get the request context in the BFF function.
-## Usage
-according to the framework extend plugin, export from the corresponding namespace:
-```ts
-import { useContext } from '@modern-js/runtime/{namespace}';
-```
-## Function Signature
-`function useContext(): any`
-## Example
-Developers can get more request information through `context`, such as browser UA(an example is when using the koa framework):
-```ts
-import { useContext } from '@modern-js/runtime/koa';
-export async function get() {
-  const ctx = useContext();
-  return ctx.req.headers['user-agent'];
-}
-```
-:::caution
-only in BFF function, `useContext` API can be used.
-:::
-Although the `useContext` API is supported in any framework extend plugin, the types of return values are different.

package/docs/en/configure/app/bff/enable-handle-web.mdx DELETED Viewed

@@ -1,24 +0,0 @@
----
-title: enableHandleWeb
----
-# bff.enableHandleWeb
-- **Type:** `boolean`
-- **Default:** `false`
-import EnableBFFCaution from "@site-docs-en/components/enable-bff-caution";
-<EnableBFFCaution />
-By default, the BFF service can only handle requests for BFF APIs.
-When this value is set to `true`, page request will also pass through BFF, and the default logic for page rendering built in Modern.js will run as the last middleware of the BFF service.
-```ts title="modern.config.ts"
-export default defineConfig({
-  bff: {
-    enableHandleWeb: true,
-  },
-});
-```

package/docs/en/guides/advanced-features/custom-server.mdx DELETED Viewed

@@ -1,218 +0,0 @@
----
-sidebar_position: 16
----
-# Custom Server
-Modern.js encapsulates most server-side capabilities required by projects, typically eliminating the need for server-side development. However, in certain scenarios such as user authentication, request preprocessing, or adding page skeletons, custom server-side logic may still be necessary.
-## Custom Server Capabilities
-Create the `server/modern.server.ts` file in the project directory, and you can add the following configurations to extend the Server:
-- **Middleware**
-- **Render Middleware**
-- **Server Plugin**
-In the **Plugin**, you can define **Middleware** and **RenderMiddleware**. The middleware loading process is illustrated in the following diagram:
-<img
-  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/10eh7nuhpenuhog/server-md-wf.png"
-  style={{ width: '100%', maxWidth: '540px' }}
-/>
-### Basic Configuration
-```ts title="server/modern.server.ts"
-import { defineServerConfig } from '@modern-js/server-runtime';
-export default defineServerConfig({
-  middlewares: [],
-  renderMiddlewares: [],
-  plugins: [],
-});
-```
-### Type Definition
-`defineServerConfig` type definition is as follows:
-```ts
-import type { MiddlewareHandler } from 'hono';
-type MiddlewareOrder = 'pre' | 'post' | 'default';
-type MiddlewareObj = {
-    name: string;
-    path?: string;
-    method?: 'options' | 'get' | 'post' | 'put' | 'delete' | 'patch' | 'all';
-    handler: MiddlewareHandler | MiddlewareHandler[];
-    before?: Array<MiddlewareObj['name']>;
-    order?: MiddlewareOrder;
-};
-type ServerConfig = {
-    middlewares?: MiddlewareObj[];
-    renderMiddlewares?: MiddlewareObj[];
-    plugins?: (ServerPlugin | ServerPluginLegacy)[];
-}
-```
-### Middleware
-Middleware supports executing custom logic before and after the **request handling** and **page routing** processes in Modern.js services.
-That is, if custom logic needs to handle both API routes and affect page routes, then Middleware is the obvious choice. If you only need to handle BFF API routes, this can be achieved by configuring the `path` to the BFF's `prefix`.
-:::note
-In the BFF scenario, BFF routing will only go through Middleware when the [runtime framework](/guides/advanced-features/bff/frameworks.html) is Hono.
-:::
-#### Using Posture
-```ts title="server/modern.server.ts"
-import { defineServerConfig, type MiddlewareHandler } from '@modern-js/server-runtime';
-import { getMonitors } from '@modern-js/runtime';
-export const handler: MiddlewareHandler = async (c, next) => {
-  const monitors = getMonitors();
-  const start = Date.now();
-  await next();
-  const end = Date.now();
-  // Report Duration
-  monitors.timing('request_timing', end - start);
-};
-export default defineServerConfig({
-  middlewares: [
-    {
-      name: 'request-timing',
-      handler,
-    },
-  ],
-});
-```
-:::warning
-You must execute the `next` function to proceed with the subsequent Middleware.
-:::
-### RenderMiddleware
-If you only need to handle the logic before and after page rendering, modern.js also provides rendering middleware.
-#### Using Posture
-```ts title="server/modern.server.ts"
-import { defineServerConfig, type MiddlewareHandler } from '@modern-js/server-runtime';
-// Inject render performance metrics
-const renderTiming: MiddlewareHandler = async (c, next) => {
-  const start = Date.now();
-  await next();
-  const end = Date.now();
-  c.res.headers.set('server-timing', `render; dur=${end - start}`);
-};
-// Modify the Response Body
-const modifyResBody: MiddlewareHandler = async (c, next) => {
-  await next();
-  const { res } = c;
-  const text = await res.text();
-  const newText = text.replace('<body>', '<body> <h3>bytedance</h3>');
-  c.res = c.body(newText, {
-    status: res.status,
-    headers: res.headers,
-  });
-};
-export default defineServerConfig({
-  renderMiddlewares: [
-    {
-      name: 'render-timing',
-      handler: renderTiming,
-    },
-    {
-      name: 'modify-res-body',
-      handler: modifyResBody,
-    },
-  ],
-});
-```
-### Plugin
-Modern.js supports adding the aforementioned middleware and rendering middleware for the Server in custom plugins.
-#### Using Posture
-```ts title="server/plugins/server.ts"
-import type { ServerPluginLegacy } from '@modern-js/server-runtime';
-export default (): ServerPluginLegacy => ({
-  name: 'serverPlugin',
-  setup(api) {
-    return {
-      prepare(serverConfig) {
-        const { middlewares, renderMiddlewares } = api.useAppContext();
-        // Inject server-side data for page dataLoader consumption
-        middlewares?.push({
-          name: 'server-plugin-middleware',
-          handler: async (c, next) => {
-            c.set('message', 'hi modern.js');
-            await next();
-            // ...
-          },
-        });
-        // redirect
-        renderMiddlewares?.push({
-          name: 'server-plugin-render-middleware',
-          handler: async (c, next) => {
-            const user = getUser(c.req);
-            if (!user) {
-              return c.redirect('/login');
-            }
-            await next();
-          },
-        });
-        return serverConfig;
-      },
-    };
-  },
-});
-```
-```ts title="server/modern.server.ts"
-import { defineServerConfig } from '@modern-js/server-runtime';
-import serverPlugin from './plugins/serverPlugin';
-export default defineServerConfig({
-  plugins: [serverPlugin()],
-});
-```
-```ts title="src/routes/page.data.ts"
-import { useHonoContext } from '@modern-js/server-runtime';
-import { defer } from '@modern-js/runtime/router';
-export default () => {
-  const ctx = useHonoContext();
-  // Consuming Data Injected by the Server-Side
-  const message = ctx.get('message');
-  // ...
-};
-```

package/docs/zh/apis/app/hooks/api/middleware.mdx DELETED Viewed

@@ -1,11 +0,0 @@
----
-title: _app.[tj]s
-sidebar_position: 2
----
-# _app.[tj]s
-该文件可以为 BFF 函数添加前置中间件，详细内容参考 [扩展 BFF Server](/guides/advanced-features/bff/extend-server)。
-:::note
-具体示例请参考 [hook](/apis/app/runtime/bff/hook)。
-:::

package/docs/zh/apis/app/runtime/bff/hook.mdx DELETED Viewed

@@ -1,44 +0,0 @@
----
-title: hook
----
-# hook
-用于在 BFF 函数写法下添加框架中间件，添加的中间件的执行会在 BFF 函数定义的路由之前。
-## 使用姿势
-根据使用的框架拓展插件，从对应的命名空间中导出：
-```ts
-import { hook } from '@modern-js/runtime/{namespace}';
-```
-## 函数签名
-```ts
-type HookOptions = {
-  addMiddleware: string | function;
-};
-function hook(options: HookOptions): void;
-```
-### 参数
-- `options`: Modern.js 提供的一系列钩子。
-  - `addMiddleware`: 添加 BFF 中间件的钩子。
-## 示例
-使用不同的框架，应添加不同框架的中间件（示例为使用 koa 框架时）：
-```ts title=api/_app.ts
-import { hook } from '@modern-js/runtime/koa';
-export default hook(({ addMiddleware }) => {
-  addMiddleware(async (ctx, next) => {
-    ctx.req.query.id = 'koa';
-    await next();
-  });
-});
-```

package/docs/zh/apis/app/runtime/bff/use-context.mdx DELETED Viewed

@@ -1,38 +0,0 @@
----
-title: useContext
----
-# useContext
-用于在一体化 BFF 函数中获取请求上下文。
-## 使用姿势
-根据使用的框架拓展插件，从对应的命名空间中导出：
-```ts
-import { useContext } from '@modern-js/runtime/{namespace}';
-```
-## 函数签名
-`function useContext(): any`
-## 示例
-开发者可以通过 `context` 获取更多的请求信息，例如获取请求 UA（示例为使用 koa 框架时）：
-```ts
-import { useContext } from '@modern-js/runtime/koa';
-export async function get() {
-  const ctx = useContext();
-  return ctx.req.headers['user-agent'];
-}
-```
-:::caution 注意
-只有在一体化 BFF 函数中，你才可以使用 `useContext` API 。
-:::
-使用不同的运行时框架时，虽然均支持 `useContext` API，但它们的返回值的类型是不同的。

package/docs/zh/configure/app/bff/enable-handle-web.mdx DELETED Viewed

@@ -1,24 +0,0 @@
----
-title: enableHandleWeb
----
-# bff.enableHandleWeb
-- **类型：** `boolean`
-- **默认值：** `false`
-import EnableBFFCaution from "@site-docs/components/enable-bff-caution";
-<EnableBFFCaution />
-默认情况下，BFF 服务只能处理 BFF API 的请求。
-当该值设置为 `true` 时，页面请求流量也会经过 BFF，并且 Modern.js 内置的页面渲染的逻辑默认会作为 BFF 服务的最后一个中间件运行。
-```ts title="modern.config.ts"
-export default defineConfig({
-  bff: {
-    enableHandleWeb: true,
-  },
-});
-```