@modern-js/main-doc 0.0.0-nightly-20240602170627 → 0.0.0-nightly-20240603170646

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.
@@ -12,7 +12,7 @@ UnstableMiddleware will replace [Middleware](/apis/app/runtime/web-server/middle
12
12
  ```ts title="server/index.ts"
13
13
  import { UnstableMiddleware } from '@modern-js/runtime/server';
14
14
 
15
- export const unstableMiddlewares: UnstableMiddleware[] = [];
15
+ export const unstableMiddleware: UnstableMiddleware[] = [];
16
16
  ```
17
17
 
18
18
  ## Types
@@ -74,7 +74,7 @@ const time: UnstableMiddleware = async (c, next) => {
74
74
  console.log(`${end - start}`);
75
75
  };
76
76
 
77
- export const unstableMiddlewares: UnstableMiddleware = [time];
77
+ export const unstableMiddleware: UnstableMiddleware[] = [time];
78
78
  ```
79
79
 
80
80
  ### Injecting Server Data for DataLoader Consumption
@@ -101,7 +101,7 @@ const setPayload: UnstableMiddleware = async (
101
101
  await next();
102
102
  };
103
103
 
104
- export const unstableMiddlewares: UnstableMiddleware = [setPayload];
104
+ export const unstableMiddleware: UnstableMiddleware[] = [setPayload];
105
105
  ```
106
106
 
107
107
  ```ts title="src/routes/page.data.ts"
@@ -130,5 +130,31 @@ const auth: UnstableMiddleware = async (c, next) => {
130
130
  await next();
131
131
  };
132
132
 
133
- export const unstableMiddlewares: UnstableMiddleware = [auth];
133
+ export const unstableMiddleware: UnstableMiddleware[] = [auth];
134
+ ```
135
+
136
+ ### Modify Response
137
+
138
+ ```ts
139
+ import { UnstableMiddleware } from '@modern-js/runtime/server';
140
+
141
+ const modifier: UnstableMiddleware = async (c, next) => {
142
+ await next();
143
+
144
+ const { response } = c;
145
+
146
+ const text = await response.text();
147
+
148
+ const newText = text.replace('<html>', `<html lang="${language}">`);
149
+
150
+ const newheaders = response.headers;
151
+ newheaders.set('x-custom-value', 'modern');
152
+
153
+ c.response = c.body(newText, {
154
+ status: response.status,
155
+ headers: newheaders,
156
+ });
157
+ };
158
+
159
+ export const unstableMiddleware: UnstableMiddleware[] = [modifier];
134
160
  ```
@@ -90,7 +90,9 @@ Modern.js provides a set of APIs by default for projects to use:
90
90
  import { Middleware } from '@modern-js/runtime/server';
91
91
 
92
92
  export const middleware: Middleware = (context, next) => {
93
- const { source: { req, res } } = context;
93
+ const {
94
+ source: { req, res },
95
+ } = context;
94
96
  console.log(req.url);
95
97
  next();
96
98
  };
@@ -108,7 +110,7 @@ Projects should follow these best practices when using Middleware:
108
110
 
109
111
  **In general, in CSR projects, using Hook can basically meet all the needs of simple scenarios. In SSR projects, Middleware can be used for more complex Node extensions.**
110
112
 
111
- ### UnstableMiddleware
113
+ ### Unstable Middleware
112
114
 
113
115
  Modern.js will provide new Middleware to add pre-processing middleware to the Web Server, supporting the execution of custom logic before and after handling the page.
114
116
 
@@ -11,7 +11,7 @@ title: Unstable Middleware
11
11
  ```ts title="server/index.ts"
12
12
  import { UnstableMiddleware } from '@modern-js/runtime/server';
13
13
 
14
- export const unstableMiddlewares: UnstableMiddleware = [];
14
+ export const unstableMiddleware: UnstableMiddleware[] = [];
15
15
  ```
16
16
 
17
17
  ## 类型
@@ -73,7 +73,7 @@ const time: UnstableMiddleware = async (c, next) => {
73
73
  console.log(`${end - start}`);
74
74
  };
75
75
 
76
- export const unstableMiddlewares: UnstableMiddleware = [time];
76
+ export const unstableMiddleware: UnstableMiddleware[] = [time];
77
77
  ```
78
78
 
79
79
  ### 注入服务端数据,供页面 dataLoader 消费
@@ -100,7 +100,7 @@ const setPayload: UnstableMiddleware = async (
100
100
  await next();
101
101
  };
102
102
 
103
- export const unstableMiddlewares: UnstableMiddleware = [setPayload];
103
+ export const unstableMiddleware: UnstableMiddleware[] = [setPayload];
104
104
  ```
105
105
 
106
106
  ```ts title="src/routes/page.data.ts"
@@ -129,5 +129,31 @@ const auth: UnstableMiddleware = async (c, next) => {
129
129
  await next();
130
130
  };
131
131
 
132
- export const unstableMiddlewares: UnstableMiddleware = [auth];
132
+ export const unstableMiddleware: UnstableMiddleware[] = [auth];
133
+ ```
134
+
135
+ ### 修改响应体
136
+
137
+ ```ts
138
+ import { UnstableMiddleware } from '@modern-js/runtime/server';
139
+
140
+ const modifier: UnstableMiddleware = async (c, next) => {
141
+ await next();
142
+
143
+ const { response } = c;
144
+
145
+ const text = await response.text();
146
+
147
+ const newText = text.replace('<html>', `<html lang="${language}">`);
148
+
149
+ const newheaders = response.headers;
150
+ newheaders.set('x-custom-value', 'modern');
151
+
152
+ c.response = c.body(newText, {
153
+ status: response.status,
154
+ headers: newheaders,
155
+ });
156
+ };
157
+
158
+ export const unstableMiddleware: UnstableMiddleware[] = [modifier];
133
159
  ```
@@ -108,7 +108,7 @@ export const middleware: Middleware = (context, next) => {
108
108
 
109
109
  **总的来说,CSR 项目中,使用 Hook 基本能满足简单场景的所有需求。SSR 项目中,可以使用 Middleware 做更复杂的 Node 扩展。**
110
110
 
111
- ### UnstableMiddleware
111
+ ### Unstable Middleware
112
112
 
113
113
  Modern.js 将提供新 Middleware 为 Web Server 添加前置中间件,支持在处理页面的前后执行自定义逻辑。
114
114
 
package/package.json CHANGED
@@ -15,17 +15,17 @@
15
15
  "modern",
16
16
  "modern.js"
17
17
  ],
18
- "version": "0.0.0-nightly-20240602170627",
18
+ "version": "0.0.0-nightly-20240603170646",
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": "0.0.0-nightly-20240602170627"
25
+ "@modern-js/sandpack-react": "0.0.0-nightly-20240603170646"
26
26
  },
27
27
  "peerDependencies": {
28
- "@modern-js/builder-doc": "0.0.0-nightly-20240602170627"
28
+ "@modern-js/builder-doc": "0.0.0-nightly-20240603170646"
29
29
  },
30
30
  "devDependencies": {
31
31
  "classnames": "^2",
@@ -39,8 +39,8 @@
39
39
  "@rspress/shared": "1.18.2",
40
40
  "@types/node": "^16",
41
41
  "@types/fs-extra": "9.0.13",
42
- "@modern-js/doc-plugin-auto-sidebar": "0.0.0-nightly-20240602170627",
43
- "@modern-js/builder-doc": "0.0.0-nightly-20240602170627"
42
+ "@modern-js/builder-doc": "0.0.0-nightly-20240603170646",
43
+ "@modern-js/doc-plugin-auto-sidebar": "0.0.0-nightly-20240603170646"
44
44
  },
45
45
  "scripts": {
46
46
  "dev": "rspress dev",