@bleedingdev/modern-js-main-doc 3.9.0-ultramodern.4 → 3.9.0-ultramodern.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.
- package/docs/en/components/hono.mdx +3 -3
- package/docs/en/components/init-app.mdx +1 -5
- package/docs/en/configure/app/bff/effect.mdx +29 -24
- package/docs/en/guides/advanced-features/bff/data-platform.mdx +2 -2
- package/docs/en/guides/advanced-features/bff/frameworks.mdx +33 -21
- package/docs/en/guides/advanced-features/bff/function.mdx +2 -2
- package/docs/en/guides/advanced-features/bff/operators.mdx +17 -17
- package/docs/en/guides/get-started/ultramodern.mdx +5 -86
- package/docs/zh/components/bff-operator-code.mdx +1 -1
- package/docs/zh/components/hono.mdx +3 -3
- package/docs/zh/configure/app/bff/effect.mdx +24 -22
- package/docs/zh/guides/advanced-features/bff/data-platform.mdx +2 -2
- package/docs/zh/guides/advanced-features/bff/frameworks.mdx +31 -20
- package/docs/zh/guides/advanced-features/bff/function.mdx +2 -2
- package/docs/zh/guides/advanced-features/bff/operators.mdx +17 -17
- package/docs/zh/guides/get-started/ultramodern.mdx +9 -72
- package/package.json +3 -3
- package/src/sandbox/csr-auth/src/routes/Auth-tsx.txt +10 -6
- package/src/sandbox/csr-auth/src/routes/page-tsx.txt +1 -0
|
@@ -21,7 +21,7 @@ For more details, refer to [useHonoContext](/apis/app/runtime/bff/use-backend-co
|
|
|
21
21
|
When getting cookies in BFF functions, you need to get the request context through `useHonoContext`, then use `c.req.header('cookie')` to get the Cookie string and parse it manually:
|
|
22
22
|
|
|
23
23
|
```ts title="api/lambda/cookies.ts"
|
|
24
|
-
import { Api, Get } from '@modern-js/plugin-bff/
|
|
24
|
+
import { Api, Get } from '@modern-js/plugin-bff/server';
|
|
25
25
|
import { useHonoContext } from '@modern-js/server-runtime';
|
|
26
26
|
|
|
27
27
|
// Helper function to parse Cookie string
|
|
@@ -64,7 +64,7 @@ The `c.req.cookie()` method does not exist in the current version. You need to u
|
|
|
64
64
|
When using Hono as the runtime framework, you can define interfaces through [Api functions](/guides/advanced-features/bff/operators.html):
|
|
65
65
|
|
|
66
66
|
```ts title="api/lambda/user.ts"
|
|
67
|
-
import { Api, Get, Query } from '@modern-js/plugin-bff/
|
|
67
|
+
import { Api, Get, Query } from '@modern-js/plugin-bff/server';
|
|
68
68
|
import { z } from 'zod';
|
|
69
69
|
|
|
70
70
|
const QuerySchema = z.object({
|
|
@@ -93,7 +93,7 @@ For more details about Api functions and operators, refer to [Creating Extensibl
|
|
|
93
93
|
Hono supports a rich middleware ecosystem, and you can use middleware in BFF functions:
|
|
94
94
|
|
|
95
95
|
```ts title="api/lambda/user.ts"
|
|
96
|
-
import { Api, Get, Middleware } from '@modern-js/plugin-bff/
|
|
96
|
+
import { Api, Get, Middleware } from '@modern-js/plugin-bff/server';
|
|
97
97
|
|
|
98
98
|
export const getUser = Api(
|
|
99
99
|
Get('/user'),
|
|
@@ -71,11 +71,7 @@ Now, the project structure is as follows:
|
|
|
71
71
|
```
|
|
72
72
|
|
|
73
73
|
The default workspace starts shell-only and installs the published BleedingDev
|
|
74
|
-
package aliases
|
|
75
|
-
|
|
76
|
-
```bash
|
|
77
|
-
pnpm dlx @bleedingdev/modern-js-ultramodern-create my-super-app
|
|
78
|
-
```
|
|
74
|
+
package aliases.
|
|
79
75
|
|
|
80
76
|
From a generated SuperApp workspace, add a business MicroVertical in place:
|
|
81
77
|
|
|
@@ -47,21 +47,33 @@ import EnableBFFCaution from "@site-docs-en/components/enable-bff-caution";
|
|
|
47
47
|
|
|
48
48
|
:::caution Install the Effect peers yourself
|
|
49
49
|
`effect` and `@effect/opentelemetry` are **optional exact peer dependencies** of
|
|
50
|
-
`@modern-js/
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
`/effect-server`, `/effect-edge` or `/effect-client`, install the exact cohort:
|
|
50
|
+
`@modern-js/bff-effect`. Install them in the application so its API modules and
|
|
51
|
+
the framework use the same Effect instance. Before setting
|
|
52
|
+
`runtimeFramework: 'effect'` or importing `@modern-js/bff-effect/effect`,
|
|
53
|
+
`/effect-edge` or `/effect-client`, install the exact cohort:
|
|
55
54
|
|
|
56
55
|
```bash
|
|
57
56
|
pnpm add effect@4.0.0-rc.112 @effect/opentelemetry@4.0.0-rc.112
|
|
58
57
|
```
|
|
59
58
|
|
|
60
59
|
The pin is exact because UltraModern ships Effect as one lockstep cohort. Apps
|
|
61
|
-
using only `runtimeFramework: 'hono'` or
|
|
62
|
-
package.
|
|
60
|
+
using only native `runtimeFramework: 'hono'` or
|
|
61
|
+
`@modern-js/bff-effect/data-platform` need neither package.
|
|
63
62
|
:::
|
|
64
63
|
|
|
64
|
+
Use `bffPlugin` from `@modern-js/plugin-bff-build-extensions` to register the
|
|
65
|
+
Effect runtime. It composes the native BFF plugin. Install
|
|
66
|
+
`@modern-js/bff-effect` and `@modern-js/plugin-bff-extensions` from the same
|
|
67
|
+
framework cohort as application production dependencies, so the adapter remains
|
|
68
|
+
available after development dependencies are removed. The build plugin can be a
|
|
69
|
+
development dependency. See the [runtime configuration example](/guides/advanced-features/bff/frameworks).
|
|
70
|
+
|
|
71
|
+
Native `@modern-js/plugin-bff/server` exports Hono APIs. For Node Effect APIs,
|
|
72
|
+
import framework helpers such as `defineEffectBff` from
|
|
73
|
+
`@modern-js/bff-effect/effect` and namespaces from the corresponding `effect/*`
|
|
74
|
+
modules. Worker handlers and worker request context use
|
|
75
|
+
`@modern-js/bff-effect/effect-edge`.
|
|
76
|
+
|
|
65
77
|
Generated UltraModern workspaces use this runtime as the only generated HTTP API
|
|
66
78
|
path. The API contract lives at `shared/api.ts`, the server runtime lives at
|
|
67
79
|
`api/index.ts`, clients live under `src/api/*-client.ts`, and generated checks
|
|
@@ -173,7 +185,6 @@ export default defineConfig({
|
|
|
173
185
|
endpoint: '/_data/batch',
|
|
174
186
|
maxBatchSize: 16,
|
|
175
187
|
maxBatchBytes: 64 * 1024,
|
|
176
|
-
flushIntervalMs: 8,
|
|
177
188
|
maxConcurrency: 4,
|
|
178
189
|
requestTimeoutMs: 10000,
|
|
179
190
|
allowedMethods: ['GET'],
|
|
@@ -207,9 +218,9 @@ export default defineConfig({
|
|
|
207
218
|
});
|
|
208
219
|
```
|
|
209
220
|
|
|
210
|
-
`
|
|
221
|
+
`maxConcurrency` and `requestTimeoutMs` control the server batch gateway. Native `HttpApiClient` calls send individual requests; they do not automatically batch requests.
|
|
211
222
|
|
|
212
|
-
|
|
223
|
+
Import a shared `HttpApi` contract and pass it to `HttpApiClient.make` or `makeEffectHttpApiClient`. The client is fully type-inferred; `defineEffectBff` exposes server handlers and does not contain a client.
|
|
213
224
|
|
|
214
225
|
## Effect cohort
|
|
215
226
|
|
|
@@ -244,7 +255,7 @@ Strict Effect APIs should test the declared `HttpApi` contract, not a raw
|
|
|
244
255
|
request handler. Edge-compatible tests can use the framework helper:
|
|
245
256
|
|
|
246
257
|
```ts
|
|
247
|
-
import { createEffectBffTestHandler } from '@modern-js/
|
|
258
|
+
import { createEffectBffTestHandler } from '@modern-js/bff-effect/effect-edge';
|
|
248
259
|
import apiModule from '../api/index';
|
|
249
260
|
|
|
250
261
|
const testApi = await createEffectBffTestHandler({
|
|
@@ -259,12 +270,9 @@ If you manually compose an Effect web handler in a low-level proof, provide the
|
|
|
259
270
|
platform services explicitly:
|
|
260
271
|
|
|
261
272
|
```ts
|
|
262
|
-
import
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
HttpServer,
|
|
266
|
-
Layer,
|
|
267
|
-
} from '@modern-js/plugin-bff/effect-server';
|
|
273
|
+
import * as Layer from 'effect/Layer';
|
|
274
|
+
import { HttpRouter, HttpServer } from 'effect/unstable/http';
|
|
275
|
+
import { HttpApiBuilder } from 'effect/unstable/httpapi';
|
|
268
276
|
|
|
269
277
|
const handler = HttpRouter.toWebHandler(
|
|
270
278
|
HttpApiBuilder.layer(api).pipe(
|
|
@@ -284,13 +292,10 @@ current Effect v4 beta cohort, `HttpRouter.middleware(...)` returns a `Layer`
|
|
|
284
292
|
directly:
|
|
285
293
|
|
|
286
294
|
```ts
|
|
287
|
-
import
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
HttpRouter,
|
|
292
|
-
Layer,
|
|
293
|
-
} from '@modern-js/plugin-bff/effect-server';
|
|
295
|
+
import * as Effect from 'effect/Effect';
|
|
296
|
+
import * as Layer from 'effect/Layer';
|
|
297
|
+
import { HttpMiddleware, HttpRouter } from 'effect/unstable/http';
|
|
298
|
+
import { HttpApiBuilder } from 'effect/unstable/httpapi';
|
|
294
299
|
|
|
295
300
|
const corsLayer = HttpRouter.middleware(
|
|
296
301
|
Effect.succeed(
|
|
@@ -17,7 +17,7 @@ Modern.js Effect API runtime now supports a request-envelope based data platform
|
|
|
17
17
|
|
|
18
18
|
## Runtime contract helpers
|
|
19
19
|
|
|
20
|
-
Use `@modern-js/
|
|
20
|
+
Use `@modern-js/bff-effect/data-platform` helpers to build and validate contracts:
|
|
21
21
|
|
|
22
22
|
```ts
|
|
23
23
|
import {
|
|
@@ -30,7 +30,7 @@ import {
|
|
|
30
30
|
validateHydrationEnvelope,
|
|
31
31
|
createInvalidationEvent,
|
|
32
32
|
shouldApplyInvalidation,
|
|
33
|
-
} from '@modern-js/
|
|
33
|
+
} from '@modern-js/bff-effect/data-platform';
|
|
34
34
|
```
|
|
35
35
|
|
|
36
36
|
## Effect runtime validation
|
|
@@ -5,10 +5,10 @@ title: Runtime Framework
|
|
|
5
5
|
|
|
6
6
|
# Runtime Framework
|
|
7
7
|
|
|
8
|
-
Modern.js
|
|
8
|
+
Modern.js and the UltraModern BFF extension provide two runtime frameworks:
|
|
9
9
|
|
|
10
|
-
- `
|
|
11
|
-
- `
|
|
10
|
+
- `hono` is the native plugin default and uses file-convention handlers from `api/lambda/**`.
|
|
11
|
+
- `effect` is the UltraModern extension default and uses [Effect HttpApi](https://effect.website/) from `api/index`.
|
|
12
12
|
|
|
13
13
|
`effect` and `hono` are strict runtime modes. There is no automatic fallback between them.
|
|
14
14
|
|
|
@@ -19,12 +19,18 @@ Generated UltraModern workspaces use strict Effect APIs: author HTTP APIs in
|
|
|
19
19
|
|
|
20
20
|
## Switch to Effect runtime
|
|
21
21
|
|
|
22
|
+
Use the fork build plugin below. It includes the native BFF plugin and registers
|
|
23
|
+
the Effect adapter. The application needs `@modern-js/bff-effect` and
|
|
24
|
+
`@modern-js/plugin-bff-extensions` as production dependencies from the same
|
|
25
|
+
framework cohort. Install the exact Effect peers described in
|
|
26
|
+
[`bff.effect`](/configure/app/bff/effect).
|
|
27
|
+
|
|
22
28
|
```ts title="modern.config.ts"
|
|
23
|
-
import { bffPlugin } from '@modern-js/plugin-bff';
|
|
24
|
-
import { defineConfig } from '@modern-js/app-tools';
|
|
29
|
+
import { bffPlugin } from '@modern-js/plugin-bff-build-extensions';
|
|
30
|
+
import { appTools, defineConfig } from '@modern-js/app-tools';
|
|
25
31
|
|
|
26
32
|
export default defineConfig({
|
|
27
|
-
plugins: [bffPlugin()],
|
|
33
|
+
plugins: [appTools(), bffPlugin()],
|
|
28
34
|
bff: {
|
|
29
35
|
runtimeFramework: 'effect',
|
|
30
36
|
effect: {
|
|
@@ -46,7 +52,7 @@ import {
|
|
|
46
52
|
HttpApiEndpoint,
|
|
47
53
|
HttpApiGroup,
|
|
48
54
|
Schema,
|
|
49
|
-
} from '@modern-js/
|
|
55
|
+
} from '@modern-js/bff-effect/effect-client';
|
|
50
56
|
|
|
51
57
|
export const bffApi = HttpApi.make('MyApi').add(
|
|
52
58
|
HttpApiGroup.make('hello').add(
|
|
@@ -60,14 +66,12 @@ export const bffApi = HttpApi.make('MyApi').add(
|
|
|
60
66
|
Implement your Effect API entry at `api/index.ts`:
|
|
61
67
|
|
|
62
68
|
```ts title="api/index.ts"
|
|
63
|
-
import {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
ServiceMap,
|
|
70
|
-
} from '@modern-js/plugin-bff/effect-server';
|
|
69
|
+
import { defineEffectBff } from '@modern-js/bff-effect/effect';
|
|
70
|
+
import * as Context from 'effect/Context';
|
|
71
|
+
import * as Effect from 'effect/Effect';
|
|
72
|
+
import * as Layer from 'effect/Layer';
|
|
73
|
+
import * as Schema from 'effect/Schema';
|
|
74
|
+
import { HttpApiBuilder } from 'effect/unstable/httpapi';
|
|
71
75
|
import { bffApi } from '../shared/api';
|
|
72
76
|
|
|
73
77
|
class GreetingUnavailableError extends Schema.TaggedError<GreetingUnavailableError>()(
|
|
@@ -77,7 +81,7 @@ class GreetingUnavailableError extends Schema.TaggedError<GreetingUnavailableErr
|
|
|
77
81
|
},
|
|
78
82
|
) {}
|
|
79
83
|
|
|
80
|
-
class GreetingService extends
|
|
84
|
+
class GreetingService extends Context.Service<GreetingService>()('GreetingService', {
|
|
81
85
|
make: Effect.succeed({
|
|
82
86
|
hello: Effect.fn('GreetingService.hello')(function* () {
|
|
83
87
|
if (Date.now() < 0) {
|
|
@@ -112,19 +116,27 @@ const layer = HttpApiBuilder.layer(bffApi).pipe(
|
|
|
112
116
|
export default defineEffectBff({ api: bffApi, layer });
|
|
113
117
|
```
|
|
114
118
|
|
|
115
|
-
|
|
119
|
+
Create a native, fully inferred client from the shared contract:
|
|
116
120
|
|
|
117
121
|
```ts title="src/routes/page.tsx"
|
|
118
|
-
import
|
|
122
|
+
import { Effect, makeEffectHttpApiClient } from '@modern-js/bff-effect/effect-client';
|
|
123
|
+
import { bffApi } from '../../shared/api';
|
|
119
124
|
|
|
120
|
-
const response = await
|
|
125
|
+
const response = await Effect.runPromise(
|
|
126
|
+
makeEffectHttpApiClient(bffApi, { baseUrl: '/api' }).pipe(
|
|
127
|
+
Effect.flatMap(client => client.hello.ping({})),
|
|
128
|
+
),
|
|
129
|
+
);
|
|
121
130
|
```
|
|
122
131
|
|
|
123
|
-
|
|
132
|
+
Requests, responses, and declared errors are inferred from `bffApi`. No client generation or server-entry import is needed.
|
|
124
133
|
|
|
125
134
|
For UltraModern, Effect `HttpApi` plus Effect BFF is the single blessed authored HTTP path. Use `HttpApi` endpoints with `query`, `params`, `payload`, `success`, and declared errors such as `HttpApiSchema.status(...)`; implement them with `HttpApiBuilder.group(...).handle(...)` and `HttpApiBuilder.layer(...).pipe(Layer.provide(...))`, then default-export the entry as `defineEffectBff({ api, layer })`. See `packages/server/bff-effect/tests/effect-edge-runtime.test.ts` for the live runtime shape.
|
|
126
135
|
|
|
127
|
-
Hono
|
|
136
|
+
Native Hono applications import operators from `@modern-js/plugin-bff/server`.
|
|
137
|
+
UltraModern-generated applications keep their strict Effect API model. Worker
|
|
138
|
+
handlers use `@modern-js/bff-effect/effect-edge`, including its worker request
|
|
139
|
+
context exports; Node handlers use the Effect entry shown above.
|
|
128
140
|
|
|
129
141
|
import Hono from '@site-docs-en/components/hono';
|
|
130
142
|
|
|
@@ -191,7 +191,7 @@ Parameters following the dynamic path are an object called `RequestOption`, whic
|
|
|
191
191
|
In a standard function without dynamic routes, `RequestOption` can be obtained from the first parameter, for example:
|
|
192
192
|
|
|
193
193
|
```ts title="api/lambda/hello.ts"
|
|
194
|
-
import type { RequestOption } from '@modern-js/plugin-bff/
|
|
194
|
+
import type { RequestOption } from '@modern-js/plugin-bff/server';
|
|
195
195
|
|
|
196
196
|
export async function post({
|
|
197
197
|
query,
|
|
@@ -204,7 +204,7 @@ export async function post({
|
|
|
204
204
|
Custom types can also be used here:
|
|
205
205
|
|
|
206
206
|
```ts title="api/lambda/hello.ts"
|
|
207
|
-
import type { RequestOption } from '@modern-js/plugin-bff/
|
|
207
|
+
import type { RequestOption } from '@modern-js/plugin-bff/server';
|
|
208
208
|
|
|
209
209
|
type IQuery = {
|
|
210
210
|
// some types
|
|
@@ -36,7 +36,7 @@ import BFFOperatorCode from '@site-docs/components/bff-operator-code';
|
|
|
36
36
|
<BFFOperatorCode>
|
|
37
37
|
|
|
38
38
|
```typescript title="api/lambda/user.ts"
|
|
39
|
-
import { Api, Post, Query, Data } from '@modern-js/plugin-bff/
|
|
39
|
+
import { Api, Post, Query, Data } from '@modern-js/plugin-bff/server';
|
|
40
40
|
import { z } from 'zod';
|
|
41
41
|
|
|
42
42
|
const UserSchema = z.object({
|
|
@@ -89,7 +89,7 @@ As shown in the example below, you can specify the route and HTTP Method through
|
|
|
89
89
|
<BFFOperatorCode>
|
|
90
90
|
|
|
91
91
|
```typescript title="api/lambda/user.ts"
|
|
92
|
-
import { Api, Get, Query, Data } from '@modern-js/plugin-bff/
|
|
92
|
+
import { Api, Get, Query, Data } from '@modern-js/plugin-bff/server';
|
|
93
93
|
|
|
94
94
|
// Specify the interface route, Modern.js sets `bff.prefix` to `/api` by default,
|
|
95
95
|
// so the interface route is `/api/user`, and the HTTP Method is GET.
|
|
@@ -107,7 +107,7 @@ When the route is not specified, the interface route is defined according to the
|
|
|
107
107
|
<BFFOperatorCode>
|
|
108
108
|
|
|
109
109
|
```typescript title="api/lambda/user.ts"
|
|
110
|
-
import { Api, Get, Query, Data } from '@modern-js/plugin-bff/
|
|
110
|
+
import { Api, Get, Query, Data } from '@modern-js/plugin-bff/server';
|
|
111
111
|
|
|
112
112
|
// No interface route specified, according to file convention and function name, the interface is api/user, HTTP Method is get.
|
|
113
113
|
export const get = Api(Query(UserSchema), async ({ query }) => query);
|
|
@@ -144,7 +144,7 @@ Using the `Query` function, you can define the type of query. After using the `Q
|
|
|
144
144
|
|
|
145
145
|
```typescript title="api/lambda/user.ts"
|
|
146
146
|
// Server-side code
|
|
147
|
-
import { Api, Query } from '@modern-js/plugin-bff/
|
|
147
|
+
import { Api, Query } from '@modern-js/plugin-bff/server';
|
|
148
148
|
import { z } from 'zod';
|
|
149
149
|
|
|
150
150
|
const UserSchema = z.object({
|
|
@@ -176,7 +176,7 @@ URL query parameters are strings by default. If you need numeric types, you need
|
|
|
176
176
|
<BFFOperatorCode>
|
|
177
177
|
|
|
178
178
|
```typescript title="api/lambda/user.ts"
|
|
179
|
-
import { Api, Get, Query } from '@modern-js/plugin-bff/
|
|
179
|
+
import { Api, Get, Query } from '@modern-js/plugin-bff/server';
|
|
180
180
|
import { z } from 'zod';
|
|
181
181
|
|
|
182
182
|
const QuerySchema = z.object({
|
|
@@ -216,7 +216,7 @@ If you use the Data function, you must follow the HTTP protocol. When the HTTP M
|
|
|
216
216
|
<BFFOperatorCode>
|
|
217
217
|
|
|
218
218
|
```typescript title="api/lambda/user.ts"
|
|
219
|
-
import { Api, Data } from '@modern-js/plugin-bff/
|
|
219
|
+
import { Api, Data } from '@modern-js/plugin-bff/server';
|
|
220
220
|
import { z } from 'zod';
|
|
221
221
|
|
|
222
222
|
const DataSchema = z.object({
|
|
@@ -249,7 +249,7 @@ Route parameters can implement dynamic routes and get parameters from the path.
|
|
|
249
249
|
<BFFOperatorCode>
|
|
250
250
|
|
|
251
251
|
```typescript
|
|
252
|
-
import { Api, Get, Params } from '@modern-js/plugin-bff/
|
|
252
|
+
import { Api, Get, Params } from '@modern-js/plugin-bff/server';
|
|
253
253
|
import { z } from 'zod';
|
|
254
254
|
|
|
255
255
|
const UserSchema = z.object({
|
|
@@ -274,7 +274,7 @@ You can define the request headers required by the interface through the `Header
|
|
|
274
274
|
<BFFOperatorCode>
|
|
275
275
|
|
|
276
276
|
```typescript
|
|
277
|
-
import { Api, Headers } from '@modern-js/plugin-bff/
|
|
277
|
+
import { Api, Headers } from '@modern-js/plugin-bff/server';
|
|
278
278
|
import { z } from 'zod';
|
|
279
279
|
|
|
280
280
|
const headerSchema = z.object({
|
|
@@ -336,7 +336,7 @@ The `Middleware` operator can be configured multiple times, and the execution or
|
|
|
336
336
|
<BFFOperatorCode>
|
|
337
337
|
|
|
338
338
|
```typescript
|
|
339
|
-
import { Api, Query, Middleware } from '@modern-js/plugin-bff/
|
|
339
|
+
import { Api, Query, Middleware } from '@modern-js/plugin-bff/server';
|
|
340
340
|
import { z } from 'zod';
|
|
341
341
|
|
|
342
342
|
const UserSchema = z.object({
|
|
@@ -376,7 +376,7 @@ The `Pipe` operator can be configured multiple times. The execution order of fun
|
|
|
376
376
|
<BFFOperatorCode>
|
|
377
377
|
|
|
378
378
|
```typescript
|
|
379
|
-
import { Api, Query, Pipe } from '@modern-js/plugin-bff/
|
|
379
|
+
import { Api, Query, Pipe } from '@modern-js/plugin-bff/server';
|
|
380
380
|
import { z } from 'zod';
|
|
381
381
|
|
|
382
382
|
const UserSchema = z.object({
|
|
@@ -408,7 +408,7 @@ Also,
|
|
|
408
408
|
<BFFOperatorCode>
|
|
409
409
|
|
|
410
410
|
```typescript
|
|
411
|
-
import { Api, Query, Pipe } from '@modern-js/plugin-bff/
|
|
411
|
+
import { Api, Query, Pipe } from '@modern-js/plugin-bff/server';
|
|
412
412
|
import { z } from 'zod';
|
|
413
413
|
|
|
414
414
|
const UserSchema = z.object({
|
|
@@ -443,7 +443,7 @@ If you need to do more custom operations on the response, you can pass a functio
|
|
|
443
443
|
<BFFOperatorCode>
|
|
444
444
|
|
|
445
445
|
```typescript
|
|
446
|
-
import { Api, Query, Pipe } from '@modern-js/plugin-bff/
|
|
446
|
+
import { Api, Query, Pipe } from '@modern-js/plugin-bff/server';
|
|
447
447
|
import { z } from 'zod';
|
|
448
448
|
|
|
449
449
|
const UserSchema = z.object({
|
|
@@ -487,7 +487,7 @@ You can specify the status code returned by the interface through the `HttpCode(
|
|
|
487
487
|
<BFFOperatorCode>
|
|
488
488
|
|
|
489
489
|
```typescript
|
|
490
|
-
import { Api, Query, Data, HttpCode } from '@modern-js/plugin-bff/
|
|
490
|
+
import { Api, Query, Data, HttpCode } from '@modern-js/plugin-bff/server';
|
|
491
491
|
import { z } from 'zod';
|
|
492
492
|
|
|
493
493
|
const UserSchema = z.object({
|
|
@@ -523,7 +523,7 @@ Supports setting response headers through the `SetHeaders(headers: Record<string
|
|
|
523
523
|
<BFFOperatorCode>
|
|
524
524
|
|
|
525
525
|
```typescript
|
|
526
|
-
import { Api, Get, SetHeaders } from '@modern-js/plugin-bff/
|
|
526
|
+
import { Api, Get, SetHeaders } from '@modern-js/plugin-bff/server';
|
|
527
527
|
|
|
528
528
|
export default Api(
|
|
529
529
|
Get('/hello'),
|
|
@@ -543,7 +543,7 @@ Supports redirecting the interface through `Redirect(url: string)`:
|
|
|
543
543
|
<BFFOperatorCode>
|
|
544
544
|
|
|
545
545
|
```typescript
|
|
546
|
-
import { Api, Get, Redirect } from '@modern-js/plugin-bff/
|
|
546
|
+
import { Api, Get, Redirect } from '@modern-js/plugin-bff/server';
|
|
547
547
|
|
|
548
548
|
export default Api(
|
|
549
549
|
Get('/hello'),
|
|
@@ -561,7 +561,7 @@ As mentioned above, through operators, you can get `query`, `data`, `params`, et
|
|
|
561
561
|
<BFFOperatorCode>
|
|
562
562
|
|
|
563
563
|
```typescript title="api/lambda/user.ts"
|
|
564
|
-
import { Api, Get, Query } from '@modern-js/plugin-bff/
|
|
564
|
+
import { Api, Get, Query } from '@modern-js/plugin-bff/server';
|
|
565
565
|
import { useHonoContext } from '@modern-js/server-runtime';
|
|
566
566
|
import { z } from 'zod';
|
|
567
567
|
|
|
@@ -610,7 +610,7 @@ In frontend development, some server interfaces (such as some configuration inte
|
|
|
610
610
|
<BFFOperatorCode>
|
|
611
611
|
|
|
612
612
|
```typescript
|
|
613
|
-
import { Api, SetHeaders } from '@modern-js/plugin-bff/
|
|
613
|
+
import { Api, SetHeaders } from '@modern-js/plugin-bff/server';
|
|
614
614
|
|
|
615
615
|
export const get = Api(
|
|
616
616
|
// Cache will only take effect when using integrated calls or fetch for requests
|
|
@@ -18,17 +18,9 @@ UltraModern.js 3.0 is our SuperApp framework forked from Modern.js. It keeps the
|
|
|
18
18
|
- Add platform-level contracts only where they improve cross-team reliability.
|
|
19
19
|
- Keep escape hatches explicit and outside the generated HTTP API path.
|
|
20
20
|
|
|
21
|
-
##
|
|
21
|
+
## Current Workspace Contract
|
|
22
22
|
|
|
23
|
-
UltraModern.js
|
|
24
|
-
|
|
25
|
-
- Modern.js app/config/plugin mental model.
|
|
26
|
-
- Existing project structure and command flow.
|
|
27
|
-
- Progressive adoption path (apps can stay mostly unchanged).
|
|
28
|
-
|
|
29
|
-
UltraModern.js additions are designed as the default product surface for new SuperApps. The framework direction is Effect + TanStack + SSR + Micro Verticals, and generated HTTP API work uses that direction by default instead of preserving parallel raw-handler layouts.
|
|
30
|
-
Existing Modern.js apps can migrate gradually; once an API surface is generated
|
|
31
|
-
or migrated as UltraModern HTTP API, it must use the strict Effect HttpApi path.
|
|
23
|
+
UltraModern.js uses Effect HttpApi, TanStack Router, SSR, and independently deployable Micro Verticals. Generated workspaces use `api/index.ts`, `shared/api.ts`, and `src/api/*` with concrete Effect schemas. The CLI creates, adds to, and validates workspaces against the current contract.
|
|
32
24
|
|
|
33
25
|
## Intentional Differences (v3 line)
|
|
34
26
|
|
|
@@ -56,21 +48,9 @@ or migrated as UltraModern HTTP API, it must use the strict Effect HttpApi path.
|
|
|
56
48
|
- Generated UltraModern API work uses the Effect runtime only; raw Hono/function handlers are not part of the generated API architecture.
|
|
57
49
|
- We make incompatible scaffold changes when they remove architecture drift.
|
|
58
50
|
|
|
59
|
-
##
|
|
60
|
-
|
|
61
|
-
For teams already on Modern.js 3.0 or an older BleedingDev UltraModern scaffold, the adoption path is to move API work onto the strict Effect HttpApi surface instead of preserving older raw handler layouts.
|
|
62
|
-
|
|
63
|
-
1. Keep existing Modern.js apps running as-is while they are outside the generated UltraModern surface. TanStack Router is the preferred path for new scaffolds and incremental route adoption, but route migration can happen on the team's schedule.
|
|
64
|
-
2. Use `bff.runtimeFramework: 'effect'` with `bff.effect.strictEffectApproach: true` for API work. Entries live at `api/index.ts`, contracts live at `shared/api.ts`, clients live under `src/api/*`, and request/response/error shapes come from Effect `Schema` plus `HttpApi`.
|
|
65
|
-
3. Treat raw handlers, `api/lambda/**`, manual `Response` construction, and manual request parsing as migration defects in generated or migrated UltraModern workspaces.
|
|
66
|
-
4. The public preset now ships with explicit release and certification gates. Generated workspaces include `.github/workflows/ultramodern-workspace-gates.yml`, so `pnpm check` and `pnpm build` stay part of the local adoption contract from day one while CI runs the primitive gates as parallel matrix jobs.
|
|
67
|
-
|
|
68
|
-
For an older generated workspace, migrate by treating the published cohort as
|
|
69
|
-
the source of truth:
|
|
51
|
+
## Create and Validate a Workspace
|
|
70
52
|
|
|
71
53
|
```bash
|
|
72
|
-
pnpm dlx @bleedingdev/modern-js-ultramodern-create@latest --help
|
|
73
|
-
pnpm dlx @bleedingdev/modern-js-ultramodern-create@latest catalog --vertical --dry-run
|
|
74
54
|
pnpm dlx @bleedingdev/modern-js-ultramodern-create@latest catalog --vertical
|
|
75
55
|
mise install
|
|
76
56
|
mise exec -- pnpm install
|
|
@@ -78,73 +58,12 @@ mise exec -- pnpm check
|
|
|
78
58
|
mise exec -- pnpm build
|
|
79
59
|
```
|
|
80
60
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
Current cohorts localize Cloudflare SSR workspaces.
|
|
84
|
-
The framework moves bare locale-root redirects into the framework-owned
|
|
85
|
-
Cloudflare Worker entry and the i18n server runtime. A request for `/` is
|
|
86
|
-
redirected server-side with `302` to the negotiated locale path, for example
|
|
87
|
-
`/cs` for `Accept-Language: cs-CZ` or `/en` for English and fallback traffic.
|
|
88
|
-
|
|
89
|
-
Existing generated workspaces should upgrade the whole BleedingDev Modern
|
|
90
|
-
package cohort together. Resolve the current cohort version first, then run
|
|
91
|
-
the matching migration:
|
|
92
|
-
|
|
93
|
-
```bash
|
|
94
|
-
COHORT="$(npm view @bleedingdev/modern-js-ultramodern-create version)"
|
|
95
|
-
pnpm dlx "@bleedingdev/modern-js-ultramodern-create@$COHORT" ultramodern \
|
|
96
|
-
migrate-strict-effect --version "$COHORT"
|
|
97
|
-
pnpm install
|
|
98
|
-
pnpm check
|
|
99
|
-
pnpm build
|
|
100
|
-
pnpm cloudflare:build
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
For deployed Cloudflare Workers, redeploy after the cohort update and verify
|
|
104
|
-
the root response before accepting the migration:
|
|
61
|
+
Localized Cloudflare SSR workspaces redirect `/` on the server to the negotiated locale. For example, `Accept-Language: cs-CZ` returns `302` with `Location: /cs`, `Cache-Control: private, no-store`, and `Vary` covering locale detection headers. Validate the deployed Worker with:
|
|
105
62
|
|
|
106
63
|
```bash
|
|
107
64
|
curl -I -H 'Accept-Language: cs-CZ,cs;q=0.9,en;q=0.1' https://<worker-host>/
|
|
108
65
|
```
|
|
109
66
|
|
|
110
|
-
The expected response is `302` with `Location: /cs` or the matching locale,
|
|
111
|
-
`Cache-Control: private, no-store`, and `Vary` covering the locale detection
|
|
112
|
-
headers. Following the redirect should return the SSR locale page with the
|
|
113
|
-
matching document language and i18n SSR data.
|
|
114
|
-
|
|
115
|
-
Do not fix older root `404` responses by adding app-owned root route files,
|
|
116
|
-
client-side redirects, custom navigation wrappers, Cloudflare Worker
|
|
117
|
-
postprocessing, generated output edits, or local redirect shims. If `/` still
|
|
118
|
-
returns `404` after upgrading, confirm the production build log shows
|
|
119
|
-
`Modern.js Framework v<cohort-version>` for the cohort you migrated to and
|
|
120
|
-
redeploy the Worker.
|
|
121
|
-
|
|
122
|
-
Strict generated API migration is part of every current cohort: the direct
|
|
123
|
-
`api/index.ts` generator, generated `.mts` checks, the strict Oxlint boundary
|
|
124
|
-
rule set, Effect cohort overrides, and the strict Effect migration command.
|
|
125
|
-
Agents that cannot install the BleedingDev cohort yet should use the local
|
|
126
|
-
Modern.js workspace for migration validation; otherwise pin the target cohort
|
|
127
|
-
with `--ultramodern-package-version`.
|
|
128
|
-
|
|
129
|
-
Before hand-editing package aliases or generated metadata, run the framework
|
|
130
|
-
migration command from the target workspace:
|
|
131
|
-
|
|
132
|
-
```bash
|
|
133
|
-
COHORT="$(npm view @bleedingdev/modern-js-ultramodern-create version)"
|
|
134
|
-
pnpm dlx "@bleedingdev/modern-js-ultramodern-create@$COHORT" ultramodern \
|
|
135
|
-
migrate-strict-effect --version "$COHORT"
|
|
136
|
-
pnpm api:check
|
|
137
|
-
pnpm contract:check
|
|
138
|
-
```
|
|
139
|
-
|
|
140
|
-
The command updates `.modernjs/ultramodern.json`, root
|
|
141
|
-
`modernjs.packageSource`, generated Modern package aliases, framework-owned
|
|
142
|
-
toolchain pins, direct topology API metadata, strict Effect pnpm
|
|
143
|
-
overrides/trust policy, and the pnpm lockfile. Remaining failures are source
|
|
144
|
-
migration work: move code to `shared/api.ts`, `api/index.ts`, and
|
|
145
|
-
`src/api/*-client.ts`, then delete `api/effect`, `api/lambda`, `shared/effect`,
|
|
146
|
-
and `src/effect`.
|
|
147
|
-
|
|
148
67
|
Generated strict Effect workspaces pin the compatible Effect cohort with pnpm
|
|
149
68
|
overrides: `effect@4.0.0-rc.112`, `@effect/opentelemetry@4.0.0-rc.112`,
|
|
150
69
|
and `@effect/vitest@4.0.0-rc.112`. Do not add app-local direct Effect
|
|
@@ -213,7 +132,7 @@ transport surfaces when needed. They do not make raw request handlers valid
|
|
|
213
132
|
inside generated HTTP API modules.
|
|
214
133
|
|
|
215
134
|
Strict API tests should exercise the `HttpApi` contract. Use
|
|
216
|
-
`createEffectBffTestHandler` from `@modern-js/
|
|
135
|
+
`createEffectBffTestHandler` from `@modern-js/bff-effect/effect-edge` for
|
|
217
136
|
edge-compatible proof tests; if you manually compose a web handler, provide
|
|
218
137
|
`HttpServer.layerServices` beside your API group layer before calling
|
|
219
138
|
`HttpRouter.toWebHandler`.
|
|
@@ -21,7 +21,7 @@ export const get = async () => {
|
|
|
21
21
|
在 BFF 函数中获取 Cookie 时,需要通过 `useHonoContext` 获取请求上下文,然后使用 `c.req.header('cookie')` 获取 Cookie 字符串并手动解析:
|
|
22
22
|
|
|
23
23
|
```ts title="api/lambda/cookies.ts"
|
|
24
|
-
import { Api, Get } from '@modern-js/plugin-bff/
|
|
24
|
+
import { Api, Get } from '@modern-js/plugin-bff/server';
|
|
25
25
|
import { useHonoContext } from '@modern-js/server-runtime';
|
|
26
26
|
|
|
27
27
|
// 解析 Cookie 字符串的辅助函数
|
|
@@ -64,7 +64,7 @@ export const getCookies = Api(Get('/cookies'), async () => {
|
|
|
64
64
|
使用 Hono 作为运行时框架时,可以通过 [Api 函数](/guides/advanced-features/bff/operators.html) 定义接口:
|
|
65
65
|
|
|
66
66
|
```ts title="api/lambda/user.ts"
|
|
67
|
-
import { Api, Get, Query } from '@modern-js/plugin-bff/
|
|
67
|
+
import { Api, Get, Query } from '@modern-js/plugin-bff/server';
|
|
68
68
|
import { z } from 'zod';
|
|
69
69
|
|
|
70
70
|
const QuerySchema = z.object({
|
|
@@ -93,7 +93,7 @@ export const getUser = Api(
|
|
|
93
93
|
Hono 支持丰富的中间件生态,可以在 BFF 函数中使用中间件:
|
|
94
94
|
|
|
95
95
|
```ts title="api/lambda/user.ts"
|
|
96
|
-
import { Api, Get, Middleware } from '@modern-js/plugin-bff/
|
|
96
|
+
import { Api, Get, Middleware } from '@modern-js/plugin-bff/server';
|
|
97
97
|
|
|
98
98
|
export const getUser = Api(
|
|
99
99
|
Get('/user'),
|
|
@@ -46,10 +46,9 @@ import EnableBFFCaution from "@site-docs/components/enable-bff-caution";
|
|
|
46
46
|
仅当 `bff.runtimeFramework` 设置为 `'effect'` 时,`bff.effect` 才会生效。
|
|
47
47
|
|
|
48
48
|
:::caution 需要自行安装 Effect peer 依赖
|
|
49
|
-
`effect` 与 `@effect/opentelemetry` 是 `@modern-js/
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
或引入 `@modern-js/plugin-bff/effect`、`/effect-server`、`/effect-edge`、
|
|
49
|
+
`effect` 与 `@effect/opentelemetry` 是 `@modern-js/bff-effect` 的**可选精确 peer
|
|
50
|
+
依赖**。应用必须安装这些依赖,让 API 模块与框架使用同一个 Effect 实例。在设置
|
|
51
|
+
`runtimeFramework: 'effect'` 或引入 `@modern-js/bff-effect/effect`、`/effect-edge`、
|
|
53
52
|
`/effect-client` 之前,请安装精确版本的依赖组:
|
|
54
53
|
|
|
55
54
|
```bash
|
|
@@ -57,9 +56,19 @@ pnpm add effect@4.0.0-rc.112 @effect/opentelemetry@4.0.0-rc.112
|
|
|
57
56
|
```
|
|
58
57
|
|
|
59
58
|
采用精确版本是因为 UltraModern 以锁步依赖组的方式发布 Effect。只使用
|
|
60
|
-
`runtimeFramework: 'hono'` 或
|
|
59
|
+
原生 `runtimeFramework: 'hono'` 或 `@modern-js/bff-effect/data-platform` 的应用无需安装这两个包。
|
|
61
60
|
:::
|
|
62
61
|
|
|
62
|
+
使用 `@modern-js/plugin-bff-build-extensions` 导出的 `bffPlugin` 注册 Effect
|
|
63
|
+
运行时,它会组合原生 BFF 插件。将同一框架版本组中的 `@modern-js/bff-effect` 和
|
|
64
|
+
`@modern-js/plugin-bff-extensions` 安装为应用的生产依赖,保证移除开发依赖后仍能加载
|
|
65
|
+
运行时适配器。构建插件可以作为开发依赖。参见[运行时配置示例](/guides/advanced-features/bff/frameworks)。
|
|
66
|
+
|
|
67
|
+
原生 `@modern-js/plugin-bff/server` 导出 Hono API。Node Effect API 从
|
|
68
|
+
`@modern-js/bff-effect/effect` 导入 `defineEffectBff` 等框架 helper,命名空间从对应的
|
|
69
|
+
`effect/*` 模块导入。Worker handler 和 Worker 请求上下文使用
|
|
70
|
+
`@modern-js/bff-effect/effect-edge`。
|
|
71
|
+
|
|
63
72
|
生成的 UltraModern workspace 只把这个运行时作为生成 HTTP API 路径。API 契约固定在
|
|
64
73
|
`shared/api.ts`,服务端运行时固定在 `api/index.ts`,客户端固定在
|
|
65
74
|
`src/api/*-client.ts`。生成检查会拒绝 `api/effect`、`api/lambda`、
|
|
@@ -169,7 +178,6 @@ export default defineConfig({
|
|
|
169
178
|
endpoint: '/_data/batch',
|
|
170
179
|
maxBatchSize: 16,
|
|
171
180
|
maxBatchBytes: 64 * 1024,
|
|
172
|
-
flushIntervalMs: 8,
|
|
173
181
|
maxConcurrency: 4,
|
|
174
182
|
requestTimeoutMs: 10000,
|
|
175
183
|
allowedMethods: ['GET'],
|
|
@@ -203,9 +211,9 @@ export default defineConfig({
|
|
|
203
211
|
});
|
|
204
212
|
```
|
|
205
213
|
|
|
206
|
-
`
|
|
214
|
+
`maxConcurrency` 与 `requestTimeoutMs` 控制服务端批处理网关。原生 `HttpApiClient` 发送独立请求,不会自动批处理。
|
|
207
215
|
|
|
208
|
-
|
|
216
|
+
导入共享 `HttpApi` 契约并传给 `HttpApiClient.make` 或 `makeEffectHttpApiClient`,即可获得完全类型推导的客户端。`defineEffectBff` 只提供服务端 handler,不包含客户端。
|
|
209
217
|
|
|
210
218
|
## Effect 版本组
|
|
211
219
|
|
|
@@ -237,7 +245,7 @@ attestation 的迁移,并不等同于 release-age 审批。
|
|
|
237
245
|
Edge 兼容测试可以使用框架 helper:
|
|
238
246
|
|
|
239
247
|
```ts
|
|
240
|
-
import { createEffectBffTestHandler } from '@modern-js/
|
|
248
|
+
import { createEffectBffTestHandler } from '@modern-js/bff-effect/effect-edge';
|
|
241
249
|
import apiModule from '../api/index';
|
|
242
250
|
|
|
243
251
|
const testApi = await createEffectBffTestHandler({
|
|
@@ -252,12 +260,9 @@ const response = await testApi.handler(new Request('http://localhost/api/ping'))
|
|
|
252
260
|
`HttpServer.layerServices`:
|
|
253
261
|
|
|
254
262
|
```ts
|
|
255
|
-
import
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
HttpServer,
|
|
259
|
-
Layer,
|
|
260
|
-
} from '@modern-js/plugin-bff/effect-server';
|
|
263
|
+
import * as Layer from 'effect/Layer';
|
|
264
|
+
import { HttpRouter, HttpServer } from 'effect/unstable/http';
|
|
265
|
+
import { HttpApiBuilder } from 'effect/unstable/httpapi';
|
|
261
266
|
|
|
262
267
|
const handler = HttpRouter.toWebHandler(
|
|
263
268
|
HttpApiBuilder.layer(api).pipe(
|
|
@@ -275,13 +280,10 @@ const handler = HttpRouter.toWebHandler(
|
|
|
275
280
|
Effect v4 beta 版本组中,`HttpRouter.middleware(...)` 直接返回 `Layer`:
|
|
276
281
|
|
|
277
282
|
```ts
|
|
278
|
-
import
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
HttpRouter,
|
|
283
|
-
Layer,
|
|
284
|
-
} from '@modern-js/plugin-bff/effect-server';
|
|
283
|
+
import * as Effect from 'effect/Effect';
|
|
284
|
+
import * as Layer from 'effect/Layer';
|
|
285
|
+
import { HttpMiddleware, HttpRouter } from 'effect/unstable/http';
|
|
286
|
+
import { HttpApiBuilder } from 'effect/unstable/httpapi';
|
|
285
287
|
|
|
286
288
|
const corsLayer = HttpRouter.middleware(
|
|
287
289
|
Effect.succeed(
|
|
@@ -17,7 +17,7 @@ Modern.js 的 Effect BFF 已支持基于请求信封(request envelope)的数
|
|
|
17
17
|
|
|
18
18
|
## 运行时契约工具
|
|
19
19
|
|
|
20
|
-
可通过 `@modern-js/
|
|
20
|
+
可通过 `@modern-js/bff-effect/data-platform` 使用以下能力:
|
|
21
21
|
|
|
22
22
|
```ts
|
|
23
23
|
import {
|
|
@@ -30,7 +30,7 @@ import {
|
|
|
30
30
|
validateHydrationEnvelope,
|
|
31
31
|
createInvalidationEvent,
|
|
32
32
|
shouldApplyInvalidation,
|
|
33
|
-
} from '@modern-js/
|
|
33
|
+
} from '@modern-js/bff-effect/data-platform';
|
|
34
34
|
```
|
|
35
35
|
|
|
36
36
|
## Effect 运行时校验
|
|
@@ -5,10 +5,10 @@ title: 运行时框架
|
|
|
5
5
|
|
|
6
6
|
# 运行时框架
|
|
7
7
|
|
|
8
|
-
Modern.js
|
|
8
|
+
Modern.js 与 UltraModern BFF 扩展提供两种运行时框架:
|
|
9
9
|
|
|
10
|
-
- `
|
|
11
|
-
- `
|
|
10
|
+
- `hono` 是原生插件的默认运行时,使用 `api/lambda/**` 的文件约定处理函数。
|
|
11
|
+
- `effect` 是 UltraModern 扩展的默认运行时,使用 `api/index` 的 [Effect HttpApi](https://effect.website/) 运行时。
|
|
12
12
|
|
|
13
13
|
`effect` 与 `hono` 为严格模式,两者之间不会自动回退。
|
|
14
14
|
|
|
@@ -22,12 +22,16 @@ workspace 中加入 Hono/file-convention handler、原始 request parsing 或手
|
|
|
22
22
|
|
|
23
23
|
## 切换到 Effect 运行时
|
|
24
24
|
|
|
25
|
+
使用下面的 fork 构建插件,它会包含原生 BFF 插件并注册 Effect 适配器。应用需要将
|
|
26
|
+
同一框架版本组中的 `@modern-js/bff-effect` 和 `@modern-js/plugin-bff-extensions`
|
|
27
|
+
安装为生产依赖。Effect 的精确 peer 版本见 [`bff.effect`](/configure/app/bff/effect)。
|
|
28
|
+
|
|
25
29
|
```ts title="modern.config.ts"
|
|
26
|
-
import { bffPlugin } from '@modern-js/plugin-bff';
|
|
27
|
-
import { defineConfig } from '@modern-js/app-tools';
|
|
30
|
+
import { bffPlugin } from '@modern-js/plugin-bff-build-extensions';
|
|
31
|
+
import { appTools, defineConfig } from '@modern-js/app-tools';
|
|
28
32
|
|
|
29
33
|
export default defineConfig({
|
|
30
|
-
plugins: [bffPlugin()],
|
|
34
|
+
plugins: [appTools(), bffPlugin()],
|
|
31
35
|
bff: {
|
|
32
36
|
runtimeFramework: 'effect',
|
|
33
37
|
effect: {
|
|
@@ -49,7 +53,7 @@ import {
|
|
|
49
53
|
HttpApiEndpoint,
|
|
50
54
|
HttpApiGroup,
|
|
51
55
|
Schema,
|
|
52
|
-
} from '@modern-js/
|
|
56
|
+
} from '@modern-js/bff-effect/effect-client';
|
|
53
57
|
|
|
54
58
|
export const bffApi = HttpApi.make('MyApi').add(
|
|
55
59
|
HttpApiGroup.make('hello').add(
|
|
@@ -63,14 +67,12 @@ export const bffApi = HttpApi.make('MyApi').add(
|
|
|
63
67
|
然后在 `api/index.ts` 中实现 Effect BFF 入口:
|
|
64
68
|
|
|
65
69
|
```ts title="api/index.ts"
|
|
66
|
-
import {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
ServiceMap,
|
|
73
|
-
} from '@modern-js/plugin-bff/effect-server';
|
|
70
|
+
import { defineEffectBff } from '@modern-js/bff-effect/effect';
|
|
71
|
+
import * as Context from 'effect/Context';
|
|
72
|
+
import * as Effect from 'effect/Effect';
|
|
73
|
+
import * as Layer from 'effect/Layer';
|
|
74
|
+
import * as Schema from 'effect/Schema';
|
|
75
|
+
import { HttpApiBuilder } from 'effect/unstable/httpapi';
|
|
74
76
|
import { bffApi } from '../shared/api';
|
|
75
77
|
|
|
76
78
|
class GreetingUnavailableError extends Schema.TaggedError<GreetingUnavailableError>()(
|
|
@@ -80,7 +82,7 @@ class GreetingUnavailableError extends Schema.TaggedError<GreetingUnavailableErr
|
|
|
80
82
|
},
|
|
81
83
|
) {}
|
|
82
84
|
|
|
83
|
-
class GreetingService extends
|
|
85
|
+
class GreetingService extends Context.Service<GreetingService>()('GreetingService', {
|
|
84
86
|
make: Effect.succeed({
|
|
85
87
|
hello: Effect.fn('GreetingService.hello')(function* () {
|
|
86
88
|
if (Date.now() < 0) {
|
|
@@ -115,15 +117,24 @@ const layer = HttpApiBuilder.layer(bffApi).pipe(
|
|
|
115
117
|
export default defineEffectBff({ api: bffApi, layer });
|
|
116
118
|
```
|
|
117
119
|
|
|
118
|
-
|
|
120
|
+
从共享契约创建原生、完全类型推导的客户端:
|
|
119
121
|
|
|
120
122
|
```ts title="src/routes/page.tsx"
|
|
121
|
-
import
|
|
123
|
+
import { Effect, makeEffectHttpApiClient } from '@modern-js/bff-effect/effect-client';
|
|
124
|
+
import { bffApi } from '../../shared/api';
|
|
122
125
|
|
|
123
|
-
const response = await
|
|
126
|
+
const response = await Effect.runPromise(
|
|
127
|
+
makeEffectHttpApiClient(bffApi, { baseUrl: '/api' }).pipe(
|
|
128
|
+
Effect.flatMap(client => client.hello.ping({})),
|
|
129
|
+
),
|
|
130
|
+
);
|
|
124
131
|
```
|
|
125
132
|
|
|
126
|
-
|
|
133
|
+
请求、响应和声明的错误类型均从 `bffApi` 推导,无需生成客户端代码或导入服务端入口。
|
|
134
|
+
|
|
135
|
+
原生 Hono 应用从 `@modern-js/plugin-bff/server` 导入操作符。生成的 UltraModern
|
|
136
|
+
应用继续使用严格 Effect API。Worker handler 及其请求上下文使用
|
|
137
|
+
`@modern-js/bff-effect/effect-edge`;Node handler 使用上面示例中的 Effect 入口。
|
|
127
138
|
|
|
128
139
|
import Hono from '@site-docs/components/hono';
|
|
129
140
|
|
|
@@ -188,7 +188,7 @@ Dynamic Path 之后的参数是包含 querystring、request body 的对象 `Requ
|
|
|
188
188
|
在不存在动态路由的普通函数中,可以从第一个入参中获取传入的 `data` 和 `query`,例如:
|
|
189
189
|
|
|
190
190
|
```ts title="api/lambda/hello.ts"
|
|
191
|
-
import type { RequestOption } from '@modern-js/plugin-bff/
|
|
191
|
+
import type { RequestOption } from '@modern-js/plugin-bff/server';
|
|
192
192
|
|
|
193
193
|
export async function post({
|
|
194
194
|
query,
|
|
@@ -201,7 +201,7 @@ export async function post({
|
|
|
201
201
|
这里你也可以使用自定义类型:
|
|
202
202
|
|
|
203
203
|
```ts title="api/lambda/hello.ts"
|
|
204
|
-
import type { RequestOption } from '@modern-js/plugin-bff/
|
|
204
|
+
import type { RequestOption } from '@modern-js/plugin-bff/server';
|
|
205
205
|
|
|
206
206
|
type IQuery = {
|
|
207
207
|
// some types
|
|
@@ -36,7 +36,7 @@ import BFFOperatorCode from '@site-docs/components/bff-operator-code';
|
|
|
36
36
|
<BFFOperatorCode>
|
|
37
37
|
|
|
38
38
|
```typescript title="api/lambda/user.ts"
|
|
39
|
-
import { Api, Post, Query, Data } from '@modern-js/plugin-bff/
|
|
39
|
+
import { Api, Post, Query, Data } from '@modern-js/plugin-bff/server';
|
|
40
40
|
import { z } from 'zod';
|
|
41
41
|
|
|
42
42
|
const UserSchema = z.object({
|
|
@@ -89,7 +89,7 @@ addUser({
|
|
|
89
89
|
<BFFOperatorCode>
|
|
90
90
|
|
|
91
91
|
```typescript title="api/lambda/user.ts"
|
|
92
|
-
import { Api, Get, Query, Data } from '@modern-js/plugin-bff/
|
|
92
|
+
import { Api, Get, Query, Data } from '@modern-js/plugin-bff/server';
|
|
93
93
|
|
|
94
94
|
// 指定接口路由,Modern.js 默认设置 `bff.prefix` 为 `/api`,
|
|
95
95
|
// 因此该接口路由为 `/api/user`,Http Method 为 GET。
|
|
@@ -107,7 +107,7 @@ export const getHello = Api(
|
|
|
107
107
|
<BFFOperatorCode>
|
|
108
108
|
|
|
109
109
|
```typescript title="api/lambda/user.ts"
|
|
110
|
-
import { Api, Get, Query, Data } from '@modern-js/plugin-bff/
|
|
110
|
+
import { Api, Get, Query, Data } from '@modern-js/plugin-bff/server';
|
|
111
111
|
|
|
112
112
|
// 未指定接口路由,根据文件约定和函数名,该接口为 api/user,Http Method 为 get。
|
|
113
113
|
export const get = Api(Query(UserSchema), async ({ query }) => query);
|
|
@@ -144,7 +144,7 @@ Modern.js 推荐基于文件约定去定义接口,保持项目中路由清晰
|
|
|
144
144
|
|
|
145
145
|
```typescript title="api/lambda/user.ts"
|
|
146
146
|
// 服务端代码
|
|
147
|
-
import { Api, Query } from '@modern-js/plugin-bff/
|
|
147
|
+
import { Api, Query } from '@modern-js/plugin-bff/server';
|
|
148
148
|
import { z } from 'zod';
|
|
149
149
|
|
|
150
150
|
const UserSchema = z.object({
|
|
@@ -176,7 +176,7 @@ URL query 参数默认是字符串类型,如果需要数字类型,需要使
|
|
|
176
176
|
<BFFOperatorCode>
|
|
177
177
|
|
|
178
178
|
```typescript title="api/lambda/user.ts"
|
|
179
|
-
import { Api, Get, Query } from '@modern-js/plugin-bff/
|
|
179
|
+
import { Api, Get, Query } from '@modern-js/plugin-bff/server';
|
|
180
180
|
import { z } from 'zod';
|
|
181
181
|
|
|
182
182
|
const QuerySchema = z.object({
|
|
@@ -216,7 +216,7 @@ URL query 参数都是字符串类型,如果需要数字类型,需要使用
|
|
|
216
216
|
<BFFOperatorCode>
|
|
217
217
|
|
|
218
218
|
```typescript title="api/lambda/user.ts"
|
|
219
|
-
import { Api, Data } from '@modern-js/plugin-bff/
|
|
219
|
+
import { Api, Data } from '@modern-js/plugin-bff/server';
|
|
220
220
|
import { z } from 'zod';
|
|
221
221
|
|
|
222
222
|
const DataSchema = z.object({
|
|
@@ -249,7 +249,7 @@ post({
|
|
|
249
249
|
<BFFOperatorCode>
|
|
250
250
|
|
|
251
251
|
```typescript
|
|
252
|
-
import { Api, Get, Params } from '@modern-js/plugin-bff/
|
|
252
|
+
import { Api, Get, Params } from '@modern-js/plugin-bff/server';
|
|
253
253
|
import { z } from 'zod';
|
|
254
254
|
|
|
255
255
|
const UserSchema = z.object({
|
|
@@ -274,7 +274,7 @@ export const queryUser = Api(
|
|
|
274
274
|
<BFFOperatorCode>
|
|
275
275
|
|
|
276
276
|
```typescript
|
|
277
|
-
import { Api, Headers } from '@modern-js/plugin-bff/
|
|
277
|
+
import { Api, Headers } from '@modern-js/plugin-bff/server';
|
|
278
278
|
import { z } from 'zod';
|
|
279
279
|
|
|
280
280
|
const headerSchema = z.object({
|
|
@@ -336,7 +336,7 @@ try {
|
|
|
336
336
|
<BFFOperatorCode>
|
|
337
337
|
|
|
338
338
|
```typescript
|
|
339
|
-
import { Api, Query, Middleware } from '@modern-js/plugin-bff/
|
|
339
|
+
import { Api, Query, Middleware } from '@modern-js/plugin-bff/server';
|
|
340
340
|
import { z } from 'zod';
|
|
341
341
|
|
|
342
342
|
const UserSchema = z.object({
|
|
@@ -376,7 +376,7 @@ export const get = Api(
|
|
|
376
376
|
<BFFOperatorCode>
|
|
377
377
|
|
|
378
378
|
```typescript
|
|
379
|
-
import { Api, Query, Pipe } from '@modern-js/plugin-bff/
|
|
379
|
+
import { Api, Query, Pipe } from '@modern-js/plugin-bff/server';
|
|
380
380
|
import { z } from 'zod';
|
|
381
381
|
|
|
382
382
|
const UserSchema = z.object({
|
|
@@ -408,7 +408,7 @@ export const get = Api(
|
|
|
408
408
|
<BFFOperatorCode>
|
|
409
409
|
|
|
410
410
|
```typescript
|
|
411
|
-
import { Api, Query, Pipe } from '@modern-js/plugin-bff/
|
|
411
|
+
import { Api, Query, Pipe } from '@modern-js/plugin-bff/server';
|
|
412
412
|
import { z } from 'zod';
|
|
413
413
|
|
|
414
414
|
const UserSchema = z.object({
|
|
@@ -443,7 +443,7 @@ export const get = Api(
|
|
|
443
443
|
<BFFOperatorCode>
|
|
444
444
|
|
|
445
445
|
```typescript
|
|
446
|
-
import { Api, Query, Pipe } from '@modern-js/plugin-bff/
|
|
446
|
+
import { Api, Query, Pipe } from '@modern-js/plugin-bff/server';
|
|
447
447
|
import { z } from 'zod';
|
|
448
448
|
|
|
449
449
|
const UserSchema = z.object({
|
|
@@ -487,7 +487,7 @@ export const get = Api(
|
|
|
487
487
|
<BFFOperatorCode>
|
|
488
488
|
|
|
489
489
|
```typescript
|
|
490
|
-
import { Api, Query, Data, HttpCode } from '@modern-js/plugin-bff/
|
|
490
|
+
import { Api, Query, Data, HttpCode } from '@modern-js/plugin-bff/server';
|
|
491
491
|
import { z } from 'zod';
|
|
492
492
|
|
|
493
493
|
const UserSchema = z.object({
|
|
@@ -523,7 +523,7 @@ export const post = Api(
|
|
|
523
523
|
<BFFOperatorCode>
|
|
524
524
|
|
|
525
525
|
```typescript
|
|
526
|
-
import { Api, Get, SetHeaders } from '@modern-js/plugin-bff/
|
|
526
|
+
import { Api, Get, SetHeaders } from '@modern-js/plugin-bff/server';
|
|
527
527
|
|
|
528
528
|
export default Api(
|
|
529
529
|
Get('/hello'),
|
|
@@ -543,7 +543,7 @@ export default Api(
|
|
|
543
543
|
<BFFOperatorCode>
|
|
544
544
|
|
|
545
545
|
```typescript
|
|
546
|
-
import { Api, Get, Redirect } from '@modern-js/plugin-bff/
|
|
546
|
+
import { Api, Get, Redirect } from '@modern-js/plugin-bff/server';
|
|
547
547
|
|
|
548
548
|
export default Api(
|
|
549
549
|
Get('/hello'),
|
|
@@ -561,7 +561,7 @@ export default Api(
|
|
|
561
561
|
<BFFOperatorCode>
|
|
562
562
|
|
|
563
563
|
```typescript title="api/lambda/user.ts"
|
|
564
|
-
import { Api, Get, Query } from '@modern-js/plugin-bff/
|
|
564
|
+
import { Api, Get, Query } from '@modern-js/plugin-bff/server';
|
|
565
565
|
import { useHonoContext } from '@modern-js/server-runtime';
|
|
566
566
|
import { z } from 'zod';
|
|
567
567
|
|
|
@@ -610,7 +610,7 @@ export const queryUser = Api(
|
|
|
610
610
|
<BFFOperatorCode>
|
|
611
611
|
|
|
612
612
|
```typescript
|
|
613
|
-
import { Api, SetHeaders } from '@modern-js/plugin-bff/
|
|
613
|
+
import { Api, SetHeaders } from '@modern-js/plugin-bff/server';
|
|
614
614
|
|
|
615
615
|
export const get = Api(
|
|
616
616
|
// 缓存使用一体化调用或者 fetch 进行请求才会生效
|
|
@@ -16,15 +16,11 @@ UltraModern.js 3.0 是我们从 Modern.js 分叉出来的 SuperApp 框架。它
|
|
|
16
16
|
- 仅在跨团队稳定性场景增加平台契约。
|
|
17
17
|
- 保留显式 escape hatch,但它们必须位于生成 HTTP API 模块之外。
|
|
18
18
|
|
|
19
|
-
##
|
|
19
|
+
## 当前 Workspace 契约
|
|
20
20
|
|
|
21
|
-
UltraModern.js
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
- 既有项目结构与命令使用方式。
|
|
25
|
-
- 渐进式接入路径(应用无需大规模重构)。
|
|
26
|
-
|
|
27
|
-
UltraModern.js 的增强能力是新 SuperApp 的默认产品面。框架方向是 Effect + TanStack + SSR + Micro Verticals,生成的 HTTP API 只走严格 Effect HttpApi surface。既有 Modern.js 应用可以渐进迁移;一旦某个 API surface 被生成为或迁移为 UltraModern HTTP API,就必须使用严格 Effect HttpApi 路径。
|
|
21
|
+
UltraModern.js 使用 Effect HttpApi、TanStack Router、SSR 和可独立部署的 Micro Verticals。
|
|
22
|
+
生成的 workspace 使用 `api/index.ts`、`shared/api.ts`、`src/api/*` 和具体的 Effect schema。
|
|
23
|
+
CLI 按当前契约创建、扩展和验证 workspace。
|
|
28
24
|
|
|
29
25
|
## 有意引入的差异(3.0 线)
|
|
30
26
|
|
|
@@ -50,20 +46,9 @@ UltraModern.js 的增强能力是新 SuperApp 的默认产品面。框架方向
|
|
|
50
46
|
- 生成的 UltraModern HTTP API 只走严格 Effect HttpApi surface;原始 request handler 和 Hono/file-function API 不属于生成架构。
|
|
51
47
|
- 除非稳定性硬需求,否则避免引入破坏性 API 变更。
|
|
52
48
|
|
|
53
|
-
##
|
|
54
|
-
|
|
55
|
-
对于已经在使用 Modern.js 3.0 或旧版 BleedingDev UltraModern scaffold 的团队,迁移路径是把 API 工作迁到严格 Effect HttpApi surface,而不是保留旧的原始 handler 布局。
|
|
56
|
-
|
|
57
|
-
1. 既有 Modern.js 应用在尚未进入生成 UltraModern surface 前可以继续按现状运行。TanStack Router 是新脚手架与增量迁移的优先路径,团队可以按自己的节奏迁移路由层。
|
|
58
|
-
2. 新建或迁移中的 BFF 能力使用 `bff.runtimeFramework: 'effect'`、`bff.effect.entry: './api/index'` 和 `bff.effect.strictEffectApproach: true`。接口先改 `shared/api.ts` 的 `HttpApi` 契约,再在 `api/index.ts` 用 `defineEffectBff(...)` / `HttpApiBuilder` 实现。
|
|
59
|
-
3. 在生成或已迁移的 UltraModern workspace 中,把 raw handler、`api/lambda/**`、手写 `Response` 和手写 request parsing 视为迁移缺陷。
|
|
60
|
-
4. 这套公开预设现在已经附带显式的发布 / 认证 gate。生成 workspace 会自带 `.github/workflows/ultramodern-workspace-gates.yml`,因此 `pnpm check` 与 `pnpm build` 从第一天开始就是本地接入契约的一部分;CI 会以并行矩阵运行这些基础 gate。
|
|
61
|
-
|
|
62
|
-
旧版生成 workspace 迁移时,以已发布的包 cohort 作为事实来源:
|
|
49
|
+
## 创建并验证 Workspace
|
|
63
50
|
|
|
64
51
|
```bash
|
|
65
|
-
pnpm dlx @bleedingdev/modern-js-ultramodern-create@latest --help
|
|
66
|
-
pnpm dlx @bleedingdev/modern-js-ultramodern-create@latest catalog --vertical --dry-run
|
|
67
52
|
pnpm dlx @bleedingdev/modern-js-ultramodern-create@latest catalog --vertical
|
|
68
53
|
mise install
|
|
69
54
|
mise exec -- pnpm install
|
|
@@ -71,62 +56,14 @@ mise exec -- pnpm check
|
|
|
71
56
|
mise exec -- pnpm build
|
|
72
57
|
```
|
|
73
58
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
server runtime 中。请求 `/` 时,框架会按语言协商在服务端返回 `302`,例如
|
|
78
|
-
`Accept-Language: cs-CZ` 会跳转到 `/cs`,英语或 fallback 流量会跳转到 `/en`。
|
|
79
|
-
|
|
80
|
-
既有生成 workspace 应整体升级同一个 BleedingDev Modern package cohort。
|
|
81
|
-
先解析当前 cohort 版本,再运行同版本迁移命令:
|
|
82
|
-
|
|
83
|
-
```bash
|
|
84
|
-
COHORT="$(npm view @bleedingdev/modern-js-ultramodern-create version)"
|
|
85
|
-
pnpm dlx "@bleedingdev/modern-js-ultramodern-create@$COHORT" ultramodern \
|
|
86
|
-
migrate-strict-effect --version "$COHORT"
|
|
87
|
-
pnpm install
|
|
88
|
-
pnpm check
|
|
89
|
-
pnpm build
|
|
90
|
-
pnpm cloudflare:build
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
Cloudflare Workers 已部署环境需要在 cohort 更新后重新部署,并在接受迁移前验证 root
|
|
94
|
-
响应:
|
|
59
|
+
本地化 Cloudflare SSR workspace 在服务端将 `/` 重定向到协商的语言路径。
|
|
60
|
+
`Accept-Language: cs-CZ` 返回 `302`、`Location: /cs`、
|
|
61
|
+
`Cache-Control: private, no-store`,以及覆盖语言检测 Header 的 `Vary`。
|
|
95
62
|
|
|
96
63
|
```bash
|
|
97
64
|
curl -I -H 'Accept-Language: cs-CZ,cs;q=0.9,en;q=0.1' https://<worker-host>/
|
|
98
65
|
```
|
|
99
66
|
|
|
100
|
-
期望响应是 `302`,并带有 `Location: /cs` 或匹配的 locale、
|
|
101
|
-
`Cache-Control: private, no-store`,以及覆盖语言检测 Header 的 `Vary`。继续跟随该
|
|
102
|
-
redirect 后,应返回匹配语言的 SSR 页面,文档语言和 i18n SSR 数据也应一致。
|
|
103
|
-
|
|
104
|
-
不要通过 app 自有 root route、客户端 redirect、自定义导航 wrapper、Cloudflare Worker
|
|
105
|
-
postprocess、生成产物编辑或本地 redirect shim 来修复旧版本的 root `404`。如果升级后
|
|
106
|
-
`/` 仍然返回 `404`,先确认生产构建日志显示的
|
|
107
|
-
`Modern.js Framework v<cohort-version>` 就是迁移目标 cohort,然后重新部署 Worker。
|
|
108
|
-
|
|
109
|
-
严格生成 API 迁移是当前每个 cohort 的组成部分:直接 `api/index.ts` 生成器、生成的
|
|
110
|
-
`.mts` 检查、严格 Oxlint 边界规则、Effect 版本组 overrides 和严格 Effect 迁移命令。
|
|
111
|
-
还不能安装 BleedingDev cohort 的 agent 应使用本地 Modern.js workspace 做迁移校验;
|
|
112
|
-
否则用 `--ultramodern-package-version` 固定目标 cohort。
|
|
113
|
-
|
|
114
|
-
手写 package alias 或生成 metadata 之前,先在目标 workspace 运行框架迁移命令:
|
|
115
|
-
|
|
116
|
-
```bash
|
|
117
|
-
COHORT="$(npm view @bleedingdev/modern-js-ultramodern-create version)"
|
|
118
|
-
pnpm dlx "@bleedingdev/modern-js-ultramodern-create@$COHORT" ultramodern \
|
|
119
|
-
migrate-strict-effect --version "$COHORT"
|
|
120
|
-
pnpm api:check
|
|
121
|
-
pnpm contract:check
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
该命令会更新 `.modernjs/ultramodern.json`、根 `modernjs.packageSource`、生成的
|
|
125
|
-
Modern package alias、框架拥有的 toolchain pin、直接 topology API metadata、严格 Effect
|
|
126
|
-
pnpm overrides/trust policy 和 pnpm lockfile。剩余失败就是源码迁移:把代码移到
|
|
127
|
-
`shared/api.ts`、`api/index.ts` 和 `src/api/*-client.ts`,再删除 `api/effect`、
|
|
128
|
-
`api/lambda`、`shared/effect` 和 `src/effect`。
|
|
129
|
-
|
|
130
67
|
严格 Effect 生成 workspace 会通过 pnpm overrides 固定兼容版本组:
|
|
131
68
|
`effect@4.0.0-rc.112`、`@effect/opentelemetry@4.0.0-rc.112` 和
|
|
132
69
|
`@effect/vitest@4.0.0-rc.112`。不要添加与这些 overrides 冲突的 app 本地直接
|
|
@@ -190,7 +127,7 @@ Effect RPC、WebSockets 和其他传输方式应在需要时作为显式 transpo
|
|
|
190
127
|
它们不能作为在生成 HTTP API 模块中重新引入原始 request handler 的理由。
|
|
191
128
|
|
|
192
129
|
严格 API 测试应执行 `HttpApi` 契约。Edge 兼容 proof 测试使用
|
|
193
|
-
`@modern-js/
|
|
130
|
+
`@modern-js/bff-effect/effect-edge` 的 `createEffectBffTestHandler`;如果必须手动组合
|
|
194
131
|
web handler,在调用 `HttpRouter.toWebHandler` 前要把 `HttpServer.layerServices` 和
|
|
195
132
|
API group layer 一起提供。
|
|
196
133
|
|
package/package.json
CHANGED
|
@@ -19,13 +19,13 @@
|
|
|
19
19
|
"modern.js",
|
|
20
20
|
"ultramodern.js"
|
|
21
21
|
],
|
|
22
|
-
"version": "3.9.0-ultramodern.
|
|
22
|
+
"version": "3.9.0-ultramodern.6",
|
|
23
23
|
"publishConfig": {
|
|
24
24
|
"access": "public"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@modern-js/sandpack-react": "npm:@bleedingdev/modern-js-sandpack-react@3.9.0-ultramodern.
|
|
28
|
-
"@modern-js/ultramodern-sandpack-profile": "npm:@bleedingdev/modern-js-ultramodern-sandpack-profile@3.9.0-ultramodern.
|
|
27
|
+
"@modern-js/sandpack-react": "npm:@bleedingdev/modern-js-sandpack-react@3.9.0-ultramodern.6",
|
|
28
|
+
"@modern-js/ultramodern-sandpack-profile": "npm:@bleedingdev/modern-js-ultramodern-sandpack-profile@3.9.0-ultramodern.6",
|
|
29
29
|
"mermaid": "^11.17.2"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Navigate,
|
|
3
|
-
|
|
3
|
+
useMatch,
|
|
4
4
|
useNavigate,
|
|
5
5
|
} from '@modern-js/plugin-tanstack/runtime';
|
|
6
6
|
import React from 'react';
|
|
@@ -52,8 +52,9 @@ export function AuthStatus() {
|
|
|
52
52
|
Welcome {auth.user}!{' '}
|
|
53
53
|
<button
|
|
54
54
|
type="button"
|
|
55
|
-
onClick={() => {
|
|
56
|
-
|
|
55
|
+
onClick={async () => {
|
|
56
|
+
await navigate({ to: '/' });
|
|
57
|
+
auth.signout(() => {});
|
|
57
58
|
}}
|
|
58
59
|
>
|
|
59
60
|
Sign out
|
|
@@ -62,9 +63,12 @@ export function AuthStatus() {
|
|
|
62
63
|
);
|
|
63
64
|
}
|
|
64
65
|
|
|
65
|
-
export function RequireAuth({ children }: { children: JSX.Element }) {
|
|
66
|
+
export function RequireAuth({ children }: { children: React.JSX.Element }) {
|
|
66
67
|
const auth = useAuth();
|
|
67
|
-
const
|
|
68
|
+
const pathname = useMatch({
|
|
69
|
+
strict: false,
|
|
70
|
+
select: match => match.pathname,
|
|
71
|
+
});
|
|
68
72
|
|
|
69
73
|
if (!auth.user) {
|
|
70
74
|
// Redirect them to the /login page, but save the current location they were
|
|
@@ -74,7 +78,7 @@ export function RequireAuth({ children }: { children: JSX.Element }) {
|
|
|
74
78
|
return (
|
|
75
79
|
<Navigate
|
|
76
80
|
replace
|
|
77
|
-
search={{ redirect:
|
|
81
|
+
search={{ redirect: pathname }}
|
|
78
82
|
to="/login"
|
|
79
83
|
/>
|
|
80
84
|
);
|