@vitejs/plugin-rsc 0.4.15 → 0.4.17
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/README.md +37 -0
- package/dist/{browser-CeSkQWD5.d.ts → browser-mbRygLxB.d.ts} +1 -1
- package/dist/browser.d.ts +3 -3
- package/dist/core/browser.d.ts +1 -1
- package/dist/core/rsc.d.ts +2 -2
- package/dist/core/ssr.d.ts +2 -2
- package/dist/core/ssr.js +1 -1
- package/dist/{rsc-BIUd01vh.js → encryption-runtime-D6SQwJ1j.js} +0 -19
- package/dist/encryption-runtime-SgJRa9yj.d.ts +5 -0
- package/dist/extra/browser.d.ts +1 -1
- package/dist/extra/browser.js +1 -1
- package/dist/extra/rsc.d.ts +1 -1
- package/dist/extra/rsc.js +2 -1
- package/dist/extra/ssr.js +4 -4
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/{plugin-_STtCzuL.js → plugin-BxEQycAE.js} +128 -83
- package/dist/{plugin-DXIhXGMa.d.ts → plugin-CYYsF3qY.d.ts} +19 -1
- package/dist/plugin.d.ts +2 -2
- package/dist/plugin.js +2 -2
- package/dist/react/browser.d.ts +3 -3
- package/dist/react/rsc.d.ts +3 -3
- package/dist/react/ssr.d.ts +3 -3
- package/dist/react/ssr.js +2 -2
- package/dist/{rsc-BOV3yNSd.d.ts → rsc-CxDPDiLz.d.ts} +1 -1
- package/dist/rsc-DP-89iIT.js +20 -0
- package/dist/rsc-html-stream/browser.js +1 -1
- package/dist/rsc-html-stream/ssr.js +1 -1
- package/dist/rsc.d.ts +4 -8
- package/dist/rsc.js +2 -1
- package/dist/{ssr-D5pxP29F.js → ssr-BLt64xPK.js} +1 -1
- package/dist/{ssr-DgSrGrln.d.ts → ssr-BoNKka-5.d.ts} +1 -1
- package/dist/{ssr-DNwSdZ9T.js → ssr-ClDiSAPx.js} +5 -2
- package/dist/ssr.d.ts +3 -3
- package/dist/ssr.js +3 -3
- package/dist/utils/encryption-runtime.d.ts +2 -0
- package/dist/utils/encryption-runtime.js +8 -0
- package/dist/vendor/react-server-dom/cjs/react-server-dom-webpack-client.browser.development.js +13 -15
- package/dist/vendor/react-server-dom/cjs/react-server-dom-webpack-client.edge.development.js +11 -13
- package/dist/vendor/react-server-dom/cjs/react-server-dom-webpack-client.node.development.js +11 -13
- package/dist/vendor/react-server-dom/cjs/react-server-dom-webpack-client.node.unbundled.development.js +11 -13
- package/dist/vendor/react-server-dom/cjs/react-server-dom-webpack-server.browser.development.js +8 -8
- package/dist/vendor/react-server-dom/cjs/react-server-dom-webpack-server.edge.development.js +8 -8
- package/dist/vendor/react-server-dom/cjs/react-server-dom-webpack-server.node.development.js +8 -8
- package/dist/vendor/react-server-dom/cjs/react-server-dom-webpack-server.node.unbundled.development.js +8 -8
- package/dist/vendor/react-server-dom/package.json +3 -3
- package/package.json +12 -10
- /package/dist/{browser-Dw18EFgE.d.ts → browser-CuwQIlVY.d.ts} +0 -0
- /package/dist/{client-CPc-spDn.js → client-C1J4FCf5.js} +0 -0
- /package/dist/{index-BHqtj9tT.d.ts → index-QWzVHuya.d.ts} +0 -0
- /package/dist/{rsc-DgrejoNf.d.ts → rsc-CFtzqEG8.d.ts} +0 -0
- /package/dist/{rsc-DryRyKqc.d.ts → rsc-Cv3XEZqB.d.ts} +0 -0
- /package/dist/{server-C50j-DRF.js → server-D0-DavPP.js} +0 -0
- /package/dist/{ssr-D708H86k.d.ts → ssr-D6GTzOzx.d.ts} +0 -0
- /package/dist/{ssr-BOIYlvSn.js → ssr-MYoobcMC.js} +0 -0
package/README.md
CHANGED
|
@@ -264,6 +264,9 @@ export function renderHTML(...) {}
|
|
|
264
264
|
|
|
265
265
|
#### `import.meta.viteRsc.loadCss`
|
|
266
266
|
|
|
267
|
+
> [!NOTE]
|
|
268
|
+
> The plugin automatically injects CSS for server components. See the [CSS Support](#css-support) section for detailed information about automatic CSS injection.
|
|
269
|
+
|
|
267
270
|
- Type: `(importer?: string) => React.ReactNode`
|
|
268
271
|
|
|
269
272
|
This allows collecting css which is imported through a current server module and injecting them inside server components.
|
|
@@ -436,6 +439,40 @@ This is a wrapper of `react-server-dom` API and helper API to setup a minimal RS
|
|
|
436
439
|
|
|
437
440
|
- `hydrate`
|
|
438
441
|
|
|
442
|
+
## CSS Support
|
|
443
|
+
|
|
444
|
+
The plugin automatically handles CSS code-splitting and injection for server components. This eliminates the need to manually call [`import.meta.viteRsc.loadCss()`](#importmetaviterscloadcss) in most cases.
|
|
445
|
+
|
|
446
|
+
1. **Component Detection**: The plugin automatically detects server components by looking for:
|
|
447
|
+
- Function exports with capital letter names (e.g., `export function Page() {}`)
|
|
448
|
+
- Default exports that are functions with capital names (e.g., `export default function Page() {}`)
|
|
449
|
+
- Const exports assigned to functions with capital names (e.g., `export const Page = () => {}`)
|
|
450
|
+
|
|
451
|
+
2. **CSS Import Detection**: For detected components, the plugin checks if the module imports any CSS files (`.css`, `.scss`, `.sass`, etc.)
|
|
452
|
+
|
|
453
|
+
3. **Automatic Wrapping**: When both conditions are met, the plugin wraps the component with a CSS injection wrapper:
|
|
454
|
+
|
|
455
|
+
```tsx
|
|
456
|
+
// Before transformation
|
|
457
|
+
import './styles.css'
|
|
458
|
+
|
|
459
|
+
export function Page() {
|
|
460
|
+
return <div>Hello</div>
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
// After transformation
|
|
464
|
+
import './styles.css'
|
|
465
|
+
|
|
466
|
+
export function Page() {
|
|
467
|
+
return (
|
|
468
|
+
<>
|
|
469
|
+
{import.meta.viteRsc.loadCss()}
|
|
470
|
+
<div>Hello</div>
|
|
471
|
+
</>
|
|
472
|
+
)
|
|
473
|
+
}
|
|
474
|
+
```
|
|
475
|
+
|
|
439
476
|
## Credits
|
|
440
477
|
|
|
441
478
|
This project builds on fundamental techniques and insights from pioneering Vite RSC implementations.
|
package/dist/browser.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CallServerCallback } from "./index-
|
|
2
|
-
import { setRequireModule } from "./browser-
|
|
3
|
-
import { callServer, createFromFetch, createFromReadableStream, createServerReference, createTemporaryReferenceSet, encodeReply, findSourceMapURL, setServerCallback } from "./browser-
|
|
1
|
+
import { CallServerCallback } from "./index-QWzVHuya.js";
|
|
2
|
+
import { setRequireModule } from "./browser-CuwQIlVY.js";
|
|
3
|
+
import { callServer, createFromFetch, createFromReadableStream, createServerReference, createTemporaryReferenceSet, encodeReply, findSourceMapURL, setServerCallback } from "./browser-mbRygLxB.js";
|
|
4
4
|
export { CallServerCallback, callServer, createFromFetch, createFromReadableStream, createServerReference, createTemporaryReferenceSet, encodeReply, findSourceMapURL, setRequireModule, setServerCallback };
|
package/dist/core/browser.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { setRequireModule } from "../browser-
|
|
1
|
+
import { setRequireModule } from "../browser-CuwQIlVY.js";
|
|
2
2
|
export { setRequireModule };
|
package/dist/core/rsc.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import "../index-
|
|
2
|
-
import { createClientManifest, createServerDecodeClientManifest, createServerManifest, loadServerAction, setRequireModule } from "../rsc-
|
|
1
|
+
import "../index-QWzVHuya.js";
|
|
2
|
+
import { createClientManifest, createServerDecodeClientManifest, createServerManifest, loadServerAction, setRequireModule } from "../rsc-CxDPDiLz.js";
|
|
3
3
|
export { createClientManifest, createServerDecodeClientManifest, createServerManifest, loadServerAction, setRequireModule };
|
package/dist/core/ssr.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import "../index-
|
|
2
|
-
import { createServerConsumerManifest, setRequireModule } from "../ssr-
|
|
1
|
+
import "../index-QWzVHuya.js";
|
|
2
|
+
import { createServerConsumerManifest, setRequireModule } from "../ssr-BoNKka-5.js";
|
|
3
3
|
export { createServerConsumerManifest, setRequireModule };
|
package/dist/core/ssr.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import "../dist-DEF94lDJ.js";
|
|
2
2
|
import "../shared-CEyKoKAb.js";
|
|
3
|
-
import { createServerConsumerManifest, setRequireModule } from "../ssr-
|
|
3
|
+
import { createServerConsumerManifest, setRequireModule } from "../ssr-MYoobcMC.js";
|
|
4
4
|
|
|
5
5
|
export { createServerConsumerManifest, setRequireModule };
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import { once } from "./dist-DEF94lDJ.js";
|
|
2
2
|
import { arrayToStream, concatArrayStream, decryptBuffer, encryptBuffer, fromBase64 } from "./encryption-utils-BDwwcMVT.js";
|
|
3
|
-
import { setRequireModule } from "./rsc-DKA6wwTB.js";
|
|
4
3
|
import { createFromReadableStream, renderToReadableStream } from "./rsc-DHfL29FT.js";
|
|
5
|
-
import serverReferences from "virtual:vite-rsc/server-references";
|
|
6
4
|
import encryptionKeySource from "virtual:vite-rsc/encryption-key";
|
|
7
5
|
|
|
8
6
|
//#region src/utils/encryption-runtime.ts
|
|
@@ -22,22 +20,5 @@ const getEncryptionKey = /* @__PURE__ */ once(async () => {
|
|
|
22
20
|
return key;
|
|
23
21
|
});
|
|
24
22
|
|
|
25
|
-
//#endregion
|
|
26
|
-
//#region src/rsc.tsx
|
|
27
|
-
initialize();
|
|
28
|
-
function initialize() {
|
|
29
|
-
setRequireModule({ load: async (id) => {
|
|
30
|
-
if (!import.meta.env.__vite_rsc_build__) return import(
|
|
31
|
-
/* @vite-ignore */
|
|
32
|
-
id
|
|
33
|
-
);
|
|
34
|
-
else {
|
|
35
|
-
const import_ = serverReferences[id];
|
|
36
|
-
if (!import_) throw new Error(`server reference not found '${id}'`);
|
|
37
|
-
return import_();
|
|
38
|
-
}
|
|
39
|
-
} });
|
|
40
|
-
}
|
|
41
|
-
|
|
42
23
|
//#endregion
|
|
43
24
|
export { decryptActionBoundArgs, encryptActionBoundArgs };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
//#region src/utils/encryption-runtime.d.ts
|
|
2
|
+
declare function encryptActionBoundArgs(originalValue: unknown): Promise<string>;
|
|
3
|
+
declare function decryptActionBoundArgs(encrypted: ReturnType<typeof encryptActionBoundArgs>): Promise<unknown>;
|
|
4
|
+
//#endregion
|
|
5
|
+
export { decryptActionBoundArgs, encryptActionBoundArgs };
|
package/dist/extra/browser.d.ts
CHANGED
package/dist/extra/browser.js
CHANGED
|
@@ -3,7 +3,7 @@ import "../shared-CEyKoKAb.js";
|
|
|
3
3
|
import "../browser-QWbIPyhO.js";
|
|
4
4
|
import { createFromFetch, createFromReadableStream, createTemporaryReferenceSet, encodeReply, setServerCallback } from "../browser-D8OPzpF5.js";
|
|
5
5
|
import "../browser-C1Q4O7AS.js";
|
|
6
|
-
import { rscStream } from "../client-
|
|
6
|
+
import { rscStream } from "../client-C1J4FCf5.js";
|
|
7
7
|
import React from "react";
|
|
8
8
|
import ReactDomClient from "react-dom/client";
|
|
9
9
|
import { jsx } from "react/jsx-runtime";
|
package/dist/extra/rsc.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { RscPayload, renderRequest } from "../rsc-
|
|
1
|
+
import { RscPayload, renderRequest } from "../rsc-Cv3XEZqB.js";
|
|
2
2
|
export { RscPayload, renderRequest };
|
package/dist/extra/rsc.js
CHANGED
|
@@ -3,7 +3,8 @@ import "../shared-CEyKoKAb.js";
|
|
|
3
3
|
import "../encryption-utils-BDwwcMVT.js";
|
|
4
4
|
import { loadServerAction } from "../rsc-DKA6wwTB.js";
|
|
5
5
|
import { createTemporaryReferenceSet, decodeAction, decodeFormState, decodeReply, renderToReadableStream } from "../rsc-DHfL29FT.js";
|
|
6
|
-
import "../
|
|
6
|
+
import "../encryption-runtime-D6SQwJ1j.js";
|
|
7
|
+
import "../rsc-DP-89iIT.js";
|
|
7
8
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
8
9
|
|
|
9
10
|
//#region src/extra/rsc.tsx
|
package/dist/extra/ssr.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import "../dist-DEF94lDJ.js";
|
|
2
2
|
import "../shared-CEyKoKAb.js";
|
|
3
|
-
import "../ssr-
|
|
4
|
-
import { createFromReadableStream } from "../ssr-
|
|
5
|
-
import "../ssr-
|
|
6
|
-
import { injectRSCPayload } from "../server-
|
|
3
|
+
import "../ssr-MYoobcMC.js";
|
|
4
|
+
import { createFromReadableStream } from "../ssr-BLt64xPK.js";
|
|
5
|
+
import "../ssr-ClDiSAPx.js";
|
|
6
|
+
import { injectRSCPayload } from "../server-D0-DavPP.js";
|
|
7
7
|
import React from "react";
|
|
8
8
|
import { jsx } from "react/jsx-runtime";
|
|
9
9
|
import ReactDomServer from "react-dom/server.edge";
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import "./dist-DEF94lDJ.js";
|
|
2
2
|
import "./plugin-CZbI4rhS.js";
|
|
3
|
-
import { transformHoistInlineDirective, vitePluginRsc } from "./plugin-
|
|
3
|
+
import { transformHoistInlineDirective, vitePluginRsc } from "./plugin-BxEQycAE.js";
|
|
4
4
|
import "./encryption-utils-BDwwcMVT.js";
|
|
5
5
|
import "./rpc-tGuLT8PD.js";
|
|
6
6
|
import "./vite-utils-Vzd7cqfv.js";
|
|
@@ -9,7 +9,7 @@ import { createHash } from "node:crypto";
|
|
|
9
9
|
import fs from "node:fs";
|
|
10
10
|
import path from "node:path";
|
|
11
11
|
import { fileURLToPath, pathToFileURL } from "node:url";
|
|
12
|
-
import { createRequestListener } from "@
|
|
12
|
+
import { createRequestListener } from "@remix-run/node-fetch-server";
|
|
13
13
|
import * as esModuleLexer from "es-module-lexer";
|
|
14
14
|
import MagicString from "magic-string";
|
|
15
15
|
import { defaultServerConditions, isCSSRequest, normalizePath, parseAstAsync } from "vite";
|
|
@@ -319,12 +319,81 @@ const require = createRequire(import.meta.url);
|
|
|
319
319
|
function resolvePackage(name) {
|
|
320
320
|
return pathToFileURL(require.resolve(name)).href;
|
|
321
321
|
}
|
|
322
|
+
/** @experimental */
|
|
323
|
+
function vitePluginRscMinimal(rscPluginOptions = {}) {
|
|
324
|
+
return [
|
|
325
|
+
{
|
|
326
|
+
name: "rsc:minimal",
|
|
327
|
+
enforce: "pre",
|
|
328
|
+
async config() {
|
|
329
|
+
await esModuleLexer.init;
|
|
330
|
+
},
|
|
331
|
+
configResolved(config_) {
|
|
332
|
+
config = config_;
|
|
333
|
+
},
|
|
334
|
+
configureServer(server_) {
|
|
335
|
+
server = server_;
|
|
336
|
+
}
|
|
337
|
+
},
|
|
338
|
+
{
|
|
339
|
+
name: "rsc:vite-client-raw-import",
|
|
340
|
+
transform: {
|
|
341
|
+
order: "post",
|
|
342
|
+
handler(code) {
|
|
343
|
+
if (code.includes("__vite_rsc_raw_import__")) return code.replace("__vite_rsc_raw_import__", "import");
|
|
344
|
+
}
|
|
345
|
+
}
|
|
346
|
+
},
|
|
347
|
+
...vitePluginRscCore(),
|
|
348
|
+
...vitePluginUseClient(rscPluginOptions),
|
|
349
|
+
...vitePluginUseServer(rscPluginOptions),
|
|
350
|
+
...vitePluginDefineEncryptionKey(rscPluginOptions)
|
|
351
|
+
];
|
|
352
|
+
}
|
|
322
353
|
function vitePluginRsc(rscPluginOptions = {}) {
|
|
354
|
+
const buildApp = async (builder) => {
|
|
355
|
+
if (!builder.environments.ssr?.config.build.rollupOptions.input) {
|
|
356
|
+
isScanBuild = true;
|
|
357
|
+
builder.environments.rsc.config.build.write = false;
|
|
358
|
+
builder.environments.client.config.build.write = false;
|
|
359
|
+
await builder.build(builder.environments.rsc);
|
|
360
|
+
await builder.build(builder.environments.client);
|
|
361
|
+
isScanBuild = false;
|
|
362
|
+
builder.environments.rsc.config.build.write = true;
|
|
363
|
+
builder.environments.client.config.build.write = true;
|
|
364
|
+
await builder.build(builder.environments.rsc);
|
|
365
|
+
clientReferenceMetaMap = sortObject(clientReferenceMetaMap);
|
|
366
|
+
serverResourcesMetaMap = sortObject(serverResourcesMetaMap);
|
|
367
|
+
await builder.build(builder.environments.client);
|
|
368
|
+
writeAssetsManifest(["rsc"]);
|
|
369
|
+
return;
|
|
370
|
+
}
|
|
371
|
+
isScanBuild = true;
|
|
372
|
+
builder.environments.rsc.config.build.write = false;
|
|
373
|
+
builder.environments.ssr.config.build.write = false;
|
|
374
|
+
await builder.build(builder.environments.rsc);
|
|
375
|
+
await builder.build(builder.environments.ssr);
|
|
376
|
+
isScanBuild = false;
|
|
377
|
+
builder.environments.rsc.config.build.write = true;
|
|
378
|
+
builder.environments.ssr.config.build.write = true;
|
|
379
|
+
await builder.build(builder.environments.rsc);
|
|
380
|
+
clientReferenceMetaMap = sortObject(clientReferenceMetaMap);
|
|
381
|
+
serverResourcesMetaMap = sortObject(serverResourcesMetaMap);
|
|
382
|
+
await builder.build(builder.environments.client);
|
|
383
|
+
await builder.build(builder.environments.ssr);
|
|
384
|
+
writeAssetsManifest(["ssr", "rsc"]);
|
|
385
|
+
};
|
|
386
|
+
function writeAssetsManifest(environmentNames) {
|
|
387
|
+
const assetsManifestCode = `export default ${serializeValueWithRuntime(buildAssetsManifest)}`;
|
|
388
|
+
for (const name of environmentNames) {
|
|
389
|
+
const manifestPath = path.join(config.environments[name].build.outDir, BUILD_ASSETS_MANIFEST_NAME);
|
|
390
|
+
fs.writeFileSync(manifestPath, assetsManifestCode);
|
|
391
|
+
}
|
|
392
|
+
}
|
|
323
393
|
return [
|
|
324
394
|
{
|
|
325
395
|
name: "rsc",
|
|
326
396
|
async config(config$1, env) {
|
|
327
|
-
await esModuleLexer.init;
|
|
328
397
|
const result = await crawlFrameworkPkgs({
|
|
329
398
|
root: process.cwd(),
|
|
330
399
|
isBuild: env.command === "build",
|
|
@@ -400,47 +469,12 @@ function vitePluginRsc(rscPluginOptions = {}) {
|
|
|
400
469
|
builder: {
|
|
401
470
|
sharedPlugins: true,
|
|
402
471
|
sharedConfigBuild: true,
|
|
403
|
-
|
|
404
|
-
if (!builder.environments.ssr?.config.build.rollupOptions.input) {
|
|
405
|
-
isScanBuild = true;
|
|
406
|
-
builder.environments.rsc.config.build.write = false;
|
|
407
|
-
builder.environments.client.config.build.write = false;
|
|
408
|
-
await builder.build(builder.environments.rsc);
|
|
409
|
-
await builder.build(builder.environments.client);
|
|
410
|
-
isScanBuild = false;
|
|
411
|
-
builder.environments.rsc.config.build.write = true;
|
|
412
|
-
builder.environments.client.config.build.write = true;
|
|
413
|
-
await builder.build(builder.environments.rsc);
|
|
414
|
-
clientReferenceMetaMap = sortObject(clientReferenceMetaMap);
|
|
415
|
-
serverResourcesMetaMap = sortObject(serverResourcesMetaMap);
|
|
416
|
-
await builder.build(builder.environments.client);
|
|
417
|
-
const assetsManifestCode = `export default ${serializeValueWithRuntime(buildAssetsManifest)}`;
|
|
418
|
-
const manifestPath = path.join(builder.environments.rsc.config.build.outDir, BUILD_ASSETS_MANIFEST_NAME);
|
|
419
|
-
fs.writeFileSync(manifestPath, assetsManifestCode);
|
|
420
|
-
return;
|
|
421
|
-
}
|
|
422
|
-
isScanBuild = true;
|
|
423
|
-
builder.environments.rsc.config.build.write = false;
|
|
424
|
-
builder.environments.ssr.config.build.write = false;
|
|
425
|
-
await builder.build(builder.environments.rsc);
|
|
426
|
-
await builder.build(builder.environments.ssr);
|
|
427
|
-
isScanBuild = false;
|
|
428
|
-
builder.environments.rsc.config.build.write = true;
|
|
429
|
-
builder.environments.ssr.config.build.write = true;
|
|
430
|
-
await builder.build(builder.environments.rsc);
|
|
431
|
-
clientReferenceMetaMap = sortObject(clientReferenceMetaMap);
|
|
432
|
-
serverResourcesMetaMap = sortObject(serverResourcesMetaMap);
|
|
433
|
-
await builder.build(builder.environments.client);
|
|
434
|
-
await builder.build(builder.environments.ssr);
|
|
435
|
-
}
|
|
472
|
+
buildApp: rscPluginOptions.useBuildAppHook ? void 0 : buildApp
|
|
436
473
|
}
|
|
437
474
|
};
|
|
438
475
|
},
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
},
|
|
442
|
-
configureServer(server_) {
|
|
443
|
-
server = server_;
|
|
476
|
+
buildApp: rscPluginOptions.useBuildAppHook ? buildApp : void 0,
|
|
477
|
+
configureServer() {
|
|
444
478
|
globalThis.__viteRscDevServer = server;
|
|
445
479
|
if (rscPluginOptions.disableServerHandler) return;
|
|
446
480
|
if (rscPluginOptions.serverHandler === false) return;
|
|
@@ -511,6 +545,10 @@ function vitePluginRsc(rscPluginOptions = {}) {
|
|
|
511
545
|
}
|
|
512
546
|
if (!isInsideClientBoundary(ctx.modules)) {
|
|
513
547
|
if (this.environment.name === "rsc") {
|
|
548
|
+
if (ctx.modules.length === 1) {
|
|
549
|
+
const importers = [...ctx.modules[0].importers];
|
|
550
|
+
if (importers.length > 0 && importers.every((m) => m.id && isCSSRequest(m.id))) return [];
|
|
551
|
+
}
|
|
514
552
|
for (const mod of ctx.modules) if (mod.type === "js") try {
|
|
515
553
|
await this.environment.transformRequest(mod.url);
|
|
516
554
|
} catch (e) {
|
|
@@ -537,15 +575,6 @@ function vitePluginRsc(rscPluginOptions = {}) {
|
|
|
537
575
|
}
|
|
538
576
|
}
|
|
539
577
|
},
|
|
540
|
-
{
|
|
541
|
-
name: "rsc:patch-browser-raw-import",
|
|
542
|
-
transform: {
|
|
543
|
-
order: "post",
|
|
544
|
-
handler(code) {
|
|
545
|
-
if (code.includes("__vite_rsc_raw_import__")) return code.replace("__vite_rsc_raw_import__", "import");
|
|
546
|
-
}
|
|
547
|
-
}
|
|
548
|
-
},
|
|
549
578
|
{
|
|
550
579
|
name: "rsc:load-ssr-module",
|
|
551
580
|
transform(code) {
|
|
@@ -709,16 +738,6 @@ function vitePluginRsc(rscPluginOptions = {}) {
|
|
|
709
738
|
code = code.replaceAll("virtual:vite-rsc/assets-manifest", () => replacement);
|
|
710
739
|
return { code };
|
|
711
740
|
}
|
|
712
|
-
return;
|
|
713
|
-
},
|
|
714
|
-
writeBundle() {
|
|
715
|
-
if (this.environment.name === "ssr") {
|
|
716
|
-
const assetsManifestCode = `export default ${serializeValueWithRuntime(buildAssetsManifest)}`;
|
|
717
|
-
for (const name of ["ssr", "rsc"]) {
|
|
718
|
-
const manifestPath = path.join(config.environments[name].build.outDir, BUILD_ASSETS_MANIFEST_NAME);
|
|
719
|
-
fs.writeFileSync(manifestPath, assetsManifestCode);
|
|
720
|
-
}
|
|
721
|
-
}
|
|
722
741
|
}
|
|
723
742
|
},
|
|
724
743
|
createVirtualPlugin("vite-rsc/bootstrap-script-content", function() {
|
|
@@ -768,7 +787,13 @@ window.__vite_plugin_react_preamble_installed__ = true;
|
|
|
768
787
|
code += `await import(${JSON.stringify(resolvedEntry.id)});`;
|
|
769
788
|
code += `
|
|
770
789
|
const ssrCss = document.querySelectorAll("link[rel='stylesheet']");
|
|
771
|
-
import.meta.hot.on("vite:beforeUpdate", () =>
|
|
790
|
+
import.meta.hot.on("vite:beforeUpdate", () => {
|
|
791
|
+
ssrCss.forEach(node => {
|
|
792
|
+
if (node.dataset.precedence?.startsWith("vite-rsc/")) {
|
|
793
|
+
node.remove();
|
|
794
|
+
}
|
|
795
|
+
});
|
|
796
|
+
});
|
|
772
797
|
`;
|
|
773
798
|
code += `
|
|
774
799
|
import.meta.hot.on("rsc:update", () => {
|
|
@@ -791,13 +816,11 @@ globalThis.AsyncLocalStorage = __viteRscAyncHooks.AsyncLocalStorage;
|
|
|
791
816
|
return "";
|
|
792
817
|
}
|
|
793
818
|
},
|
|
794
|
-
...
|
|
795
|
-
...vitePluginUseClient(rscPluginOptions),
|
|
796
|
-
...vitePluginUseServer(rscPluginOptions),
|
|
797
|
-
...vitePluginDefineEncryptionKey(rscPluginOptions),
|
|
819
|
+
...vitePluginRscMinimal(rscPluginOptions),
|
|
798
820
|
...vitePluginFindSourceMapURL(),
|
|
799
821
|
...vitePluginRscCss({ rscCssTransform: rscPluginOptions.rscCssTransform }),
|
|
800
822
|
...rscPluginOptions.validateImports !== false ? [validateImportPlugin()] : [],
|
|
823
|
+
...vendorUseSyncExternalStorePlugin(),
|
|
801
824
|
scanBuildStripPlugin(),
|
|
802
825
|
detectNonOptimizedCjsPlugin()
|
|
803
826
|
];
|
|
@@ -850,19 +873,16 @@ function getEntrySource(config$1, name = "index") {
|
|
|
850
873
|
function hashString(v) {
|
|
851
874
|
return createHash("sha256").update(v).digest().toString("hex").slice(0, 12);
|
|
852
875
|
}
|
|
853
|
-
function normalizeReferenceId(id, name) {
|
|
854
|
-
if (!server) return hashString(path.relative(config.root, id));
|
|
855
|
-
const environment = server.environments[name];
|
|
856
|
-
return normalizeViteImportAnalysisUrl(environment, id);
|
|
857
|
-
}
|
|
858
876
|
function vitePluginUseClient(useClientPluginOptions) {
|
|
859
877
|
const packageSources = /* @__PURE__ */ new Map();
|
|
860
878
|
const bareImportRE = /^(?![a-zA-Z]:)[\w@](?!.*:\/\/)/;
|
|
879
|
+
const serverEnvironmentName = useClientPluginOptions.environment?.rsc ?? "rsc";
|
|
880
|
+
const browserEnvironmentName = useClientPluginOptions.environment?.browser ?? "client";
|
|
861
881
|
return [
|
|
862
882
|
{
|
|
863
883
|
name: "rsc:use-client",
|
|
864
884
|
async transform(code, id) {
|
|
865
|
-
if (this.environment.name !==
|
|
885
|
+
if (this.environment.name !== serverEnvironmentName) return;
|
|
866
886
|
if (!code.includes("use client")) return;
|
|
867
887
|
const ast = await parseAstAsync(code);
|
|
868
888
|
if (!hasDirective(ast.body, "use client")) return;
|
|
@@ -883,7 +903,7 @@ function vitePluginUseClient(useClientPluginOptions) {
|
|
|
883
903
|
referenceKey = hashString(packageSource);
|
|
884
904
|
}
|
|
885
905
|
else if (this.environment.mode === "dev") {
|
|
886
|
-
importId = normalizeViteImportAnalysisUrl(server.environments
|
|
906
|
+
importId = normalizeViteImportAnalysisUrl(server.environments[browserEnvironmentName], id);
|
|
887
907
|
referenceKey = importId;
|
|
888
908
|
} else {
|
|
889
909
|
importId = id;
|
|
@@ -945,7 +965,7 @@ function vitePluginUseClient(useClientPluginOptions) {
|
|
|
945
965
|
async load(id) {
|
|
946
966
|
if (id.startsWith("\0virtual:vite-rsc/client-in-server-package-proxy/")) {
|
|
947
967
|
assert.equal(this.environment.mode, "dev");
|
|
948
|
-
assert
|
|
968
|
+
assert(this.environment.name !== serverEnvironmentName);
|
|
949
969
|
id = decodeURIComponent(id.slice(49));
|
|
950
970
|
return `
|
|
951
971
|
export * from ${JSON.stringify(id)};
|
|
@@ -960,7 +980,7 @@ function vitePluginUseClient(useClientPluginOptions) {
|
|
|
960
980
|
resolveId: {
|
|
961
981
|
order: "pre",
|
|
962
982
|
async handler(source, importer, options) {
|
|
963
|
-
if (this.environment.name ===
|
|
983
|
+
if (this.environment.name === serverEnvironmentName && bareImportRE.test(source)) {
|
|
964
984
|
const resolved = await this.resolve(source, importer, options);
|
|
965
985
|
if (resolved && resolved.id.includes("/node_modules/")) {
|
|
966
986
|
packageSources.set(resolved.id, source);
|
|
@@ -979,7 +999,7 @@ function vitePluginUseClient(useClientPluginOptions) {
|
|
|
979
999
|
}
|
|
980
1000
|
},
|
|
981
1001
|
generateBundle(_options, bundle) {
|
|
982
|
-
if (this.environment.name !==
|
|
1002
|
+
if (this.environment.name !== serverEnvironmentName) return;
|
|
983
1003
|
for (const chunk of Object.values(bundle)) if (chunk.type === "chunk") for (const [id, mod] of Object.entries(chunk.modules)) {
|
|
984
1004
|
const meta = clientReferenceMetaMap[id];
|
|
985
1005
|
if (meta) meta.renderedExports = mod.renderedExports;
|
|
@@ -993,10 +1013,11 @@ function vitePluginDefineEncryptionKey(useServerPluginOptions) {
|
|
|
993
1013
|
let emitEncryptionKey = false;
|
|
994
1014
|
const KEY_PLACEHOLDER = "__vite_rsc_define_encryption_key";
|
|
995
1015
|
const KEY_FILE = "__vite_rsc_encryption_key.js";
|
|
1016
|
+
const serverEnvironmentName = useServerPluginOptions.environment?.rsc ?? "rsc";
|
|
996
1017
|
return [{
|
|
997
1018
|
name: "rsc:encryption-key",
|
|
998
1019
|
async configEnvironment(name, _config, env) {
|
|
999
|
-
if (name ===
|
|
1020
|
+
if (name === serverEnvironmentName && !env.isPreview) defineEncryptionKey = useServerPluginOptions.defineEncryptionKey ?? JSON.stringify(toBase64(await generateEncryptionKey()));
|
|
1000
1021
|
},
|
|
1001
1022
|
resolveId(source) {
|
|
1002
1023
|
if (source === "virtual:vite-rsc/encryption-key") return {
|
|
@@ -1026,6 +1047,8 @@ function vitePluginDefineEncryptionKey(useServerPluginOptions) {
|
|
|
1026
1047
|
}];
|
|
1027
1048
|
}
|
|
1028
1049
|
function vitePluginUseServer(useServerPluginOptions) {
|
|
1050
|
+
const serverEnvironmentName = useServerPluginOptions.environment?.rsc ?? "rsc";
|
|
1051
|
+
const browserEnvironmentName = useServerPluginOptions.environment?.browser ?? "client";
|
|
1029
1052
|
return [{
|
|
1030
1053
|
name: "rsc:use-server",
|
|
1031
1054
|
async transform(code, id) {
|
|
@@ -1040,23 +1063,28 @@ function vitePluginUseServer(useServerPluginOptions) {
|
|
|
1040
1063
|
if (!ignored) this.warn(`[vite-rsc] detected an internal server function created by a package imported on ${this.environment.name} environment`);
|
|
1041
1064
|
id = id.split("?v=")[0];
|
|
1042
1065
|
}
|
|
1043
|
-
normalizedId_ =
|
|
1066
|
+
if (config.command === "build") normalizedId_ = hashString(path.relative(config.root, id));
|
|
1067
|
+
else normalizedId_ = normalizeViteImportAnalysisUrl(server.environments[serverEnvironmentName], id);
|
|
1044
1068
|
}
|
|
1045
1069
|
return normalizedId_;
|
|
1046
1070
|
};
|
|
1047
|
-
if (this.environment.name ===
|
|
1071
|
+
if (this.environment.name === serverEnvironmentName) {
|
|
1048
1072
|
const transformServerActionServer_ = withRollupError(this, transformServerActionServer);
|
|
1049
1073
|
const enableEncryption = useServerPluginOptions.enableActionEncryption ?? true;
|
|
1050
1074
|
const { output } = transformServerActionServer_(code, ast, {
|
|
1051
1075
|
runtime: (value, name) => `$$ReactServer.registerServerReference(${value}, ${JSON.stringify(getNormalizedId())}, ${JSON.stringify(name)})`,
|
|
1052
1076
|
rejectNonAsyncFunction: true,
|
|
1053
|
-
encode: enableEncryption ? (value) =>
|
|
1054
|
-
decode: enableEncryption ? (value) => `await
|
|
1077
|
+
encode: enableEncryption ? (value) => `__vite_rsc_encryption_runtime.encryptActionBoundArgs(${value})` : void 0,
|
|
1078
|
+
decode: enableEncryption ? (value) => `await __vite_rsc_encryption_runtime.decryptActionBoundArgs(${value})` : void 0
|
|
1055
1079
|
});
|
|
1056
1080
|
if (!output.hasChanged()) return;
|
|
1057
1081
|
serverReferences[getNormalizedId()] = id;
|
|
1058
|
-
const importSource = resolvePackage(`${PKG_NAME}/rsc`);
|
|
1082
|
+
const importSource = resolvePackage(`${PKG_NAME}/react/rsc`);
|
|
1059
1083
|
output.prepend(`import * as $$ReactServer from "${importSource}";\n`);
|
|
1084
|
+
if (enableEncryption) {
|
|
1085
|
+
const importSource$1 = resolvePackage(`${PKG_NAME}/utils/encryption-runtime`);
|
|
1086
|
+
output.prepend(`import * as __vite_rsc_encryption_runtime from ${JSON.stringify(importSource$1)};\n`);
|
|
1087
|
+
}
|
|
1060
1088
|
return {
|
|
1061
1089
|
code: output.toString(),
|
|
1062
1090
|
map: output.generateMap({ hires: "boundary" })
|
|
@@ -1073,7 +1101,7 @@ function vitePluginUseServer(useServerPluginOptions) {
|
|
|
1073
1101
|
const output = result?.output;
|
|
1074
1102
|
if (!output?.hasChanged()) return;
|
|
1075
1103
|
serverReferences[getNormalizedId()] = id;
|
|
1076
|
-
const name = this.environment.name ===
|
|
1104
|
+
const name = this.environment.name === browserEnvironmentName ? "browser" : "ssr";
|
|
1077
1105
|
const importSource = resolvePackage(`${PKG_NAME}/react/${name}`);
|
|
1078
1106
|
output.prepend(`import * as $$ReactClient from "${importSource}";\n`);
|
|
1079
1107
|
return {
|
|
@@ -1561,7 +1589,6 @@ function validateImportPlugin() {
|
|
|
1561
1589
|
moduleSideEffects: false
|
|
1562
1590
|
};
|
|
1563
1591
|
}
|
|
1564
|
-
return;
|
|
1565
1592
|
}
|
|
1566
1593
|
},
|
|
1567
1594
|
load(id) {
|
|
@@ -1569,9 +1596,27 @@ function validateImportPlugin() {
|
|
|
1569
1596
|
}
|
|
1570
1597
|
};
|
|
1571
1598
|
}
|
|
1599
|
+
function vendorUseSyncExternalStorePlugin() {
|
|
1600
|
+
const exports = [
|
|
1601
|
+
"use-sync-external-store",
|
|
1602
|
+
"use-sync-external-store/with-selector",
|
|
1603
|
+
"use-sync-external-store/with-selector.js",
|
|
1604
|
+
"use-sync-external-store/shim",
|
|
1605
|
+
"use-sync-external-store/shim/index.js",
|
|
1606
|
+
"use-sync-external-store/shim/with-selector",
|
|
1607
|
+
"use-sync-external-store/shim/with-selector.js"
|
|
1608
|
+
];
|
|
1609
|
+
return [{
|
|
1610
|
+
name: "rsc:vendor-use-sync-external-store",
|
|
1611
|
+
apply: "serve",
|
|
1612
|
+
config() {
|
|
1613
|
+
return { environments: { ssr: { optimizeDeps: { include: exports.map((e) => `${PKG_NAME} > ${e}`) } } } };
|
|
1614
|
+
}
|
|
1615
|
+
}];
|
|
1616
|
+
}
|
|
1572
1617
|
function sortObject(o) {
|
|
1573
1618
|
return Object.fromEntries(Object.entries(o).sort(([a], [b]) => a.localeCompare(b)));
|
|
1574
1619
|
}
|
|
1575
1620
|
|
|
1576
1621
|
//#endregion
|
|
1577
|
-
export { __fix_cloudflare, findSourceMapURL, transformHoistInlineDirective, transformRscCssExport, vitePluginFindSourceMapURL, vitePluginRsc, vitePluginRscCss };
|
|
1622
|
+
export { __fix_cloudflare, findSourceMapURL, transformHoistInlineDirective, transformRscCssExport, vitePluginFindSourceMapURL, vitePluginRsc, vitePluginRscCss, vitePluginRscMinimal };
|
|
@@ -55,7 +55,25 @@ type RscPluginOptions = {
|
|
|
55
55
|
* @default true
|
|
56
56
|
*/
|
|
57
57
|
validateImports?: boolean;
|
|
58
|
+
/**
|
|
59
|
+
* use `Plugin.buildApp` hook (introduced on Vite 7) instead of `builder.buildApp` configuration
|
|
60
|
+
* for better composability with other plugins.
|
|
61
|
+
* @default false
|
|
62
|
+
*/
|
|
63
|
+
useBuildAppHook?: boolean;
|
|
64
|
+
/**
|
|
65
|
+
* Custom environment configuration
|
|
66
|
+
* @experimental
|
|
67
|
+
* @default { browser: 'client', ssr: 'ssr', rsc: 'rsc' }
|
|
68
|
+
*/
|
|
69
|
+
environment?: {
|
|
70
|
+
browser?: string;
|
|
71
|
+
ssr?: string;
|
|
72
|
+
rsc?: string;
|
|
73
|
+
};
|
|
58
74
|
};
|
|
75
|
+
/** @experimental */
|
|
76
|
+
declare function vitePluginRscMinimal(rscPluginOptions?: RscPluginOptions): Plugin[];
|
|
59
77
|
declare function vitePluginRsc(rscPluginOptions?: RscPluginOptions): Plugin[];
|
|
60
78
|
declare class RuntimeAsset {
|
|
61
79
|
runtime: string;
|
|
@@ -97,4 +115,4 @@ declare function transformRscCssExport(options: {
|
|
|
97
115
|
*/
|
|
98
116
|
declare function __fix_cloudflare(): Plugin;
|
|
99
117
|
//#endregion
|
|
100
|
-
export { AssetDeps, AssetsManifest, ResolvedAssetDeps, ResolvedAssetsManifest, RscPluginOptions, __fix_cloudflare, findSourceMapURL, transformRscCssExport, vitePluginFindSourceMapURL, vitePluginRsc, vitePluginRscCss };
|
|
118
|
+
export { AssetDeps, AssetsManifest, ResolvedAssetDeps, ResolvedAssetsManifest, RscPluginOptions, __fix_cloudflare, findSourceMapURL, transformRscCssExport, vitePluginFindSourceMapURL, vitePluginRsc, vitePluginRscCss, vitePluginRscMinimal };
|
package/dist/plugin.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { AssetDeps, AssetsManifest, ResolvedAssetDeps, ResolvedAssetsManifest, RscPluginOptions, __fix_cloudflare, findSourceMapURL, transformRscCssExport, vitePluginFindSourceMapURL, vitePluginRsc, vitePluginRscCss } from "./plugin-
|
|
2
|
-
export { AssetDeps, AssetsManifest, ResolvedAssetDeps, ResolvedAssetsManifest, RscPluginOptions, __fix_cloudflare, vitePluginRsc as default, findSourceMapURL, transformRscCssExport, vitePluginFindSourceMapURL, vitePluginRscCss };
|
|
1
|
+
import { AssetDeps, AssetsManifest, ResolvedAssetDeps, ResolvedAssetsManifest, RscPluginOptions, __fix_cloudflare, findSourceMapURL, transformRscCssExport, vitePluginFindSourceMapURL, vitePluginRsc, vitePluginRscCss, vitePluginRscMinimal } from "./plugin-CYYsF3qY.js";
|
|
2
|
+
export { AssetDeps, AssetsManifest, ResolvedAssetDeps, ResolvedAssetsManifest, RscPluginOptions, __fix_cloudflare, vitePluginRsc as default, findSourceMapURL, transformRscCssExport, vitePluginFindSourceMapURL, vitePluginRscCss, vitePluginRscMinimal };
|
package/dist/plugin.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import "./dist-DEF94lDJ.js";
|
|
2
2
|
import "./plugin-CZbI4rhS.js";
|
|
3
|
-
import { __fix_cloudflare, findSourceMapURL, transformRscCssExport, vitePluginFindSourceMapURL, vitePluginRsc, vitePluginRscCss } from "./plugin-
|
|
3
|
+
import { __fix_cloudflare, findSourceMapURL, transformRscCssExport, vitePluginFindSourceMapURL, vitePluginRsc, vitePluginRscCss, vitePluginRscMinimal } from "./plugin-BxEQycAE.js";
|
|
4
4
|
import "./encryption-utils-BDwwcMVT.js";
|
|
5
5
|
import "./rpc-tGuLT8PD.js";
|
|
6
6
|
import "./vite-utils-Vzd7cqfv.js";
|
|
7
7
|
|
|
8
|
-
export { __fix_cloudflare, vitePluginRsc as default, findSourceMapURL, transformRscCssExport, vitePluginFindSourceMapURL, vitePluginRscCss };
|
|
8
|
+
export { __fix_cloudflare, vitePluginRsc as default, findSourceMapURL, transformRscCssExport, vitePluginFindSourceMapURL, vitePluginRscCss, vitePluginRscMinimal };
|
package/dist/react/browser.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CallServerCallback } from "../index-
|
|
2
|
-
import { setRequireModule } from "../browser-
|
|
3
|
-
import { callServer, createFromFetch, createFromReadableStream, createServerReference, createTemporaryReferenceSet, encodeReply, findSourceMapURL, setServerCallback } from "../browser-
|
|
1
|
+
import { CallServerCallback } from "../index-QWzVHuya.js";
|
|
2
|
+
import { setRequireModule } from "../browser-CuwQIlVY.js";
|
|
3
|
+
import { callServer, createFromFetch, createFromReadableStream, createServerReference, createTemporaryReferenceSet, encodeReply, findSourceMapURL, setServerCallback } from "../browser-mbRygLxB.js";
|
|
4
4
|
export { CallServerCallback, callServer, createFromFetch, createFromReadableStream, createServerReference, createTemporaryReferenceSet, encodeReply, findSourceMapURL, setRequireModule, setServerCallback };
|
package/dist/react/rsc.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "../index-
|
|
2
|
-
import { loadServerAction, setRequireModule } from "../rsc-
|
|
3
|
-
import { createClientTemporaryReferenceSet, createFromReadableStream, createTemporaryReferenceSet, decodeAction, decodeFormState, decodeReply, encodeReply, registerClientReference, registerServerReference, renderToReadableStream } from "../rsc-
|
|
1
|
+
import "../index-QWzVHuya.js";
|
|
2
|
+
import { loadServerAction, setRequireModule } from "../rsc-CxDPDiLz.js";
|
|
3
|
+
import { createClientTemporaryReferenceSet, createFromReadableStream, createTemporaryReferenceSet, decodeAction, decodeFormState, decodeReply, encodeReply, registerClientReference, registerServerReference, renderToReadableStream } from "../rsc-CFtzqEG8.js";
|
|
4
4
|
export { createClientTemporaryReferenceSet, createFromReadableStream, createTemporaryReferenceSet, decodeAction, decodeFormState, decodeReply, encodeReply, loadServerAction, registerClientReference, registerServerReference, renderToReadableStream, setRequireModule };
|
package/dist/react/ssr.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import "../index-
|
|
2
|
-
import { setRequireModule } from "../ssr-
|
|
3
|
-
import { callServer, createFromReadableStream, createServerReference, findSourceMapURL } from "../ssr-
|
|
1
|
+
import "../index-QWzVHuya.js";
|
|
2
|
+
import { setRequireModule } from "../ssr-BoNKka-5.js";
|
|
3
|
+
import { callServer, createFromReadableStream, createServerReference, findSourceMapURL } from "../ssr-D6GTzOzx.js";
|
|
4
4
|
export { callServer, createFromReadableStream, createServerReference, findSourceMapURL, setRequireModule };
|