@modern-js/main-doc 2.64.0 → 2.64.2

Sign up to get free protection for your applications and to get access to all the features.
@@ -2,13 +2,14 @@
2
2
  title: entry.[tj]s
3
3
  sidebar_position: 4
4
4
  ---
5
- # entry.[tj]s
5
+
6
+ # entry.[tj]sx
6
7
 
7
8
  :::info
8
9
  Using this file requires enabling [source.enableCustomEntry](/configure/app/source/enable-custom-entry).
9
10
  :::
10
11
 
11
- Normally, the [`routes/`](/apis/app/hooks/src/routes.html) and [`App.[tj]sx`](/apis/app/hooks/src/app) hook files can meet our needs. When we need to add custom behavior before component rendering or take full control of the webpack packaging entry, we can create `entry.[tj]s` file in the src or entry directory. Here are two cases for discussion:
12
+ Normally, the [`routes/`](/apis/app/hooks/src/routes.html) and [`App.[tj]sx`](/apis/app/hooks/src/app) hook files can meet our needs. When we need to add custom behavior before component rendering or take full control of the webpack packaging entry, we can create `entry.[tj]s` file in the src or entry directory. Here are two cases for discussion
12
13
 
13
14
  ## Add custom behavior before Render
14
15
 
@@ -5,6 +5,10 @@ sidebar_position: 5
5
5
 
6
6
  # entry.server.[tj]sx
7
7
 
8
+ :::info
9
+ Using this file requires enabling [source.enableCustomEntry](/configure/app/source/enable-custom-entry).
10
+ :::
11
+
8
12
  When the project initiates `server.ssr`, Modern.js generates a default Server-Side entry. The sample code is as follows:
9
13
 
10
14
  ```tsx title="entry.server.tsx"
@@ -7,9 +7,7 @@ title: enableCustomEntry
7
7
  - **Type:** `boolean`
8
8
  - **Default:** `false`
9
9
 
10
- This option is used for custom Modern.js entries.
11
-
12
- When this option is enabled, Modern.js will use the `src/entry.[jt]sx` file as the project's entry point. For more details, refer to [Entries](/guides/concept/entries.html).
10
+ This option is used for custom Modern.js entries. When this option is enabled, Modern.js will try to use the `src/entry.[jt]sx` file and `src/entry.server.[jt]sx` as the project's entry point.
13
11
 
14
12
  ## Example
15
13
 
@@ -39,3 +37,32 @@ beforeRender().then(() => {
39
37
  render(<ModernRoot />);
40
38
  });
41
39
  ```
40
+
41
+ :::info
42
+ For more browser entry details, refer to [Entries](/guides/concept/entries.html).
43
+ :::
44
+
45
+
46
+ create `src/entry.server.tsx` file,add custom behavior for rendering responses:
47
+
48
+ ```tsx
49
+ import { renderString, createRequestHandler } from '@edenx/runtime/ssr/server';
50
+ import type { HandleRequest } from '@edenx/runtime/ssr/server';
51
+
52
+ const handleRequest: HandleRequest = async (request, ServerRoot, options) => {
53
+ // do something before rendering
54
+ const body = await renderString(request, <ServerRoot />, options);
55
+
56
+ const newBody = body + '<div>Byte-Dance</div>';
57
+
58
+ return new Response(newBody, {
59
+ headers: {
60
+ 'content-type': 'text/html; charset=UTF-8',
61
+ 'x-custom-header': 'abc',
62
+ },
63
+ });
64
+ };
65
+
66
+ export default createRequestHandler(handleRequest);
67
+ ```
68
+
@@ -2,14 +2,15 @@
2
2
  title: entry.[tj]s
3
3
  sidebar_position: 4
4
4
  ---
5
- # entry.[tj]s
6
5
 
7
- 通常情况下[`routes/`](/apis/app/hooks/src/routes.html) 和 [`App.[tj]sx`](/apis/app/hooks/src/app) 钩子文件已经能满足我们的需求,当我们需要在组件渲染之前添加自定义行为或者完全接管 webpack 打包入口时,可以在 `src` 或者入口目录下放置 `entry.[tj]s`。 下面有分两种情况进行讨论:
6
+ # entry.[tj]sx
8
7
 
9
8
  :::info
10
9
  使用该文件需要开启 [source.enableCustomEntry](/configure/app/source/enable-custom-entry)。
11
10
  :::
12
11
 
12
+ 通常情况下[`routes/`](/apis/app/hooks/src/routes.html) 和 [`App.[tj]sx`](/apis/app/hooks/src/app) 钩子文件已经能满足我们的需求,当我们需要在组件渲染之前添加自定义行为或者完全接管 webpack 打包入口时,可以在 `src` 或者入口目录下放置 `entry.[tj]s`。下面分两种情况进行讨论。
13
+
13
14
  ## 在组件渲染前添加自定义行为
14
15
 
15
16
  在 `src/entry.[tj]s` 中这样实现:
@@ -5,6 +5,10 @@ sidebar_position: 5
5
5
 
6
6
  # entry.server.[tj]sx
7
7
 
8
+ :::info
9
+ 使用该文件需要开启 [source.enableCustomEntry](/configure/app/source/enable-custom-entry)。
10
+ :::
11
+
8
12
  当项目开启 `server.ssr` 时,Modern.js 生成一个默认的 Server-Side 入口。示例代码如下:
9
13
 
10
14
  ```tsx title="entry.server.tsx"
@@ -28,7 +32,7 @@ export default createRequestHandler(handleRequest);
28
32
 
29
33
  ## 添加自定义行为
30
34
 
31
- 如果用户需自定义 Server-Side Rendering 入口,可以在 `src/entry.server.ts`、`src/{entryName}/entry.server.ts` 中自定义 server 入口
35
+ 如果用户需自定义 Server-Side Rendering 入口,可以在 `src/entry.server.ts`、`src/{entryName}/entry.server.ts` 中自定义 server 入口。
32
36
 
33
37
  ```tsx title="src/entry.server.tsx"
34
38
  import { renderString, createRequestHandler } from '@edenx/runtime/ssr/server';
@@ -7,9 +7,7 @@ title: enableCustomEntry
7
7
  - **类型:** `boolean`
8
8
  - **默认值:** `false`
9
9
 
10
- 该选项用于使用 Modern.js 自定义入口场景。
11
-
12
- 开启此选项后,Modern.js 将使用 `src/entry.[jt]sx` 文件作为项目的入口, 具体使用姿势可参考[页面入口](/guides/concept/entries.html)。
10
+ 该选项用于使用 Modern.js 自定义入口场景。开启此选项后,Modern.js 将尝试使用 `src/entry.[jt]sx` 与 `src/entry.server.[jt]sx` 文件作为项目的入口。
13
11
 
14
12
  ## 示例
15
13
 
@@ -23,7 +21,7 @@ export default defineConfig({
23
21
  });
24
22
  ```
25
23
 
26
- 创建 `src/entry.tsx` 文件:
24
+ 创建 `src/entry.tsx` 文件,在渲染前执行某些行为:
27
25
 
28
26
  ```tsx
29
27
  import { createRoot } from '@modern-js/runtime/react';
@@ -39,3 +37,31 @@ beforeRender().then(() => {
39
37
  render(<ModernRoot />);
40
38
  });
41
39
  ```
40
+
41
+ :::info
42
+ 更多浏览器端入口相关内容可参考[页面入口](/guides/concept/entries.html)。
43
+ :::
44
+
45
+ 创建 `src/entry.server.tsx` 文件,为渲染响应添加自定义行为:
46
+
47
+ ```tsx
48
+ import { renderString, createRequestHandler } from '@edenx/runtime/ssr/server';
49
+ import type { HandleRequest } from '@edenx/runtime/ssr/server';
50
+
51
+ const handleRequest: HandleRequest = async (request, ServerRoot, options) => {
52
+ // do something before rendering
53
+ const body = await renderString(request, <ServerRoot />, options);
54
+
55
+ const newBody = body + '<div>Byte-Dance</div>';
56
+
57
+ return new Response(newBody, {
58
+ headers: {
59
+ 'content-type': 'text/html; charset=UTF-8',
60
+ 'x-custom-header': 'abc',
61
+ },
62
+ });
63
+ };
64
+
65
+ export default createRequestHandler(handleRequest);
66
+ ```
67
+
package/package.json CHANGED
@@ -15,17 +15,17 @@
15
15
  "modern",
16
16
  "modern.js"
17
17
  ],
18
- "version": "2.64.0",
18
+ "version": "2.64.2",
19
19
  "publishConfig": {
20
20
  "registry": "https://registry.npmjs.org/",
21
21
  "access": "public",
22
22
  "provenance": true
23
23
  },
24
24
  "dependencies": {
25
- "@modern-js/sandpack-react": "2.64.0"
25
+ "@modern-js/sandpack-react": "2.64.2"
26
26
  },
27
27
  "devDependencies": {
28
- "@rspress/shared": "1.40.0",
28
+ "@rspress/shared": "1.40.2",
29
29
  "@types/fs-extra": "9.0.13",
30
30
  "@types/node": "^16",
31
31
  "classnames": "^2",
@@ -33,7 +33,7 @@
33
33
  "fs-extra": "^10",
34
34
  "react": "^18.3.1",
35
35
  "react-dom": "^18.3.1",
36
- "rspress": "1.40.0",
36
+ "rspress": "1.41.0",
37
37
  "ts-node": "^10.9.1",
38
38
  "typescript": "^5"
39
39
  },
package/rspress.config.ts CHANGED
@@ -1,9 +1,6 @@
1
1
  import path from 'path';
2
- import type { NavItem } from '@rspress/shared';
3
2
  import { defineConfig } from 'rspress/config';
4
3
 
5
- const { version } = require('./package.json');
6
-
7
4
  const docPath = path.join(__dirname, 'docs');
8
5
 
9
6
  export default defineConfig({
@@ -17,6 +14,9 @@ export default defineConfig({
17
14
  checkDeadLinks: true,
18
15
  experimentalMdxRs: true,
19
16
  },
17
+ search: {
18
+ codeBlocks: true,
19
+ },
20
20
  head: [
21
21
  `
22
22
  <script>