diff --git a/examples/weft_shop/src/server/Ui.res.js b/examples/weft_shop/src/server/Ui.res.js
index c095b06..cfec528 100644
--- a/examples/weft_shop/src/server/Ui.res.js
+++ b/examples/weft_shop/src/server/Ui.res.js
@@ -14,6 +14,7 @@ import * as Theme$WeftShop from "../shared/Theme.res.js";
import * as Latency$WeftShop from "./Latency.res.js";
import * as Session$WeftShop from "./Session.res.js";
import * as CartBadge$WeftShop from "../client/CartBadge.res.js";
+import * as SaleBadge$WeftShop from "./SaleBadge.res.js";
import * as SearchBox$WeftShop from "../client/SearchBox.res.js";
import * as ShopShell$WeftShop from "../client/ShopShell.res.js";
import * as AccountMenu$WeftShop from "../client/AccountMenu.res.js";
@@ -279,6 +280,9 @@ function Ui$ProductCard(props) {
})
]
}),
+ Jsx$WeftDom.jsx(SaleBadge$WeftShop.make, {
+ summary: summary
+ }),
Jsx$WeftDom.Elements.jsxs("div", {
className: cardMeta,
children: [
diff --git a/examples/weft_shop/tests/Styles_test.res b/examples/weft_shop/tests/Styles_test.res
index 0fe5189..2b5fc9a 100644
--- a/examples/weft_shop/tests/Styles_test.res
+++ b/examples/weft_shop/tests/Styles_test.res
@@ -81,4 +81,36 @@ describe("the store's styles", () => {
await page->WeftTesting.waitFor(() => has(page, "[data-id=cart-title]"))
t->expect(page->WeftTesting.unstyled)->Expect.toEqual([])
})
+
+ testAsync(
+ "bring the sheets of what an RPC renders: \"Load more\" shows its cards once their sheets load",
+ async t => {
+ await app()->releaseAll
+ // Dearest first: the first page has nothing on sale, the second has two.
+ let page = app()->open_("/c/shoes?sort=price-desc")
+ await page->WeftTesting.waitFor(() => has(page, "[data-id=load-more]"))
+ await hydratedAsServed(page)
+ t->expect(has(page, "[data-id^=sale-]"))->Expect.toBe(false)
+ let head = headSheets(await page->WeftTesting.shell)
+ t->expect(head->hasSheet("server/SaleBadge"))->Expect.toBe(false)
+ t->expect(page->WeftTesting.stylesheets->hasSheet("server/SaleBadge"))->Expect.toBe(false)
+ page->WeftTesting.holdStylesheets(~matching=sheetOf("server/SaleBadge"))
+ page->WeftTesting.click("[data-id=load-more]")
+ await page->WeftTesting.waitFor(
+ () =>
+ page->WeftTesting.stylesheets->hasSheet("server/SaleBadge") ||
+ has(page, "[data-id=card-p6]"),
+ )
+ await page->WeftTesting.settle
+ // The answer is in, but for its badges' sheet: the grid stays as it was.
+ t->expect(text(page, "[data-id=load-more]"))->Expect.toBe("Loading…")
+ t->expect(has(page, "[data-id=card-p6]"))->Expect.toBe(false)
+ t->expect(page->WeftTesting.unstyled)->Expect.toEqual([])
+ page->WeftTesting.releaseStylesheets
+ await page->WeftTesting.waitFor(() => has(page, "[data-id=sale-p6]"))
+ t->expect(text(page, "[data-id=sale-p6]"))->Expect.toBe("20% off")
+ t->expect(has(page, "[data-id=sale-p3]"))->Expect.toBe(true)
+ t->expect(page->WeftTesting.unstyled)->Expect.toEqual([])
+ },
+ )
})
diff --git a/examples/weft_shop/tests/Styles_test.res.js b/examples/weft_shop/tests/Styles_test.res.js
index f768507..bec60ca 100644
--- a/examples/weft_shop/tests/Styles_test.res.js
+++ b/examples/weft_shop/tests/Styles_test.res.js
@@ -74,6 +74,34 @@ Vitest.describe("the store's styles", undefined, undefined, undefined, undefined
await WeftTesting.waitFor(page, undefined, () => ShopSupport$WeftShop.has(page, "[data-id=cart-title]"));
return t.expect(WeftTesting.unstyled(page)).toEqual([]);
});
+ Vitest.testAsync("bring the sheets of what an RPC renders: \"Load more\" shows its cards once their sheets load", undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, async t => {
+ await ShopSupport$WeftShop.releaseAll(app());
+ let page = ShopSupport$WeftShop.open_(app(), undefined, undefined, "/c/shoes?sort=price-desc");
+ await WeftTesting.waitFor(page, undefined, () => ShopSupport$WeftShop.has(page, "[data-id=load-more]"));
+ await ShopSupport$WeftShop.hydratedAsServed(page, undefined);
+ t.expect(ShopSupport$WeftShop.has(page, "[data-id^=sale-]")).toBe(false);
+ let head = headSheets(await WeftTesting.shell(page));
+ t.expect(hasSheet(head, "server/SaleBadge")).toBe(false);
+ t.expect(hasSheet(WeftTesting.stylesheets(page), "server/SaleBadge")).toBe(false);
+ WeftTesting.holdStylesheets(page, sheetOf("server/SaleBadge"));
+ WeftTesting.click(page, "[data-id=load-more]");
+ await WeftTesting.waitFor(page, undefined, () => {
+ if (hasSheet(WeftTesting.stylesheets(page), "server/SaleBadge")) {
+ return true;
+ } else {
+ return ShopSupport$WeftShop.has(page, "[data-id=card-p6]");
+ }
+ });
+ await WeftTesting.settle(page);
+ t.expect(ShopSupport$WeftShop.text(page, "[data-id=load-more]")).toBe("Loading…");
+ t.expect(ShopSupport$WeftShop.has(page, "[data-id=card-p6]")).toBe(false);
+ t.expect(WeftTesting.unstyled(page)).toEqual([]);
+ WeftTesting.releaseStylesheets(page);
+ await WeftTesting.waitFor(page, undefined, () => ShopSupport$WeftShop.has(page, "[data-id=sale-p6]"));
+ t.expect(ShopSupport$WeftShop.text(page, "[data-id=sale-p6]")).toBe("20% off");
+ t.expect(ShopSupport$WeftShop.has(page, "[data-id=sale-p3]")).toBe(true);
+ return t.expect(WeftTesting.unstyled(page)).toEqual([]);
+ });
});
export {
diff --git a/packages/weft_server/src/server/Page.res.js b/packages/weft_server/src/server/Page.res.js
index bb9d0c9..90e0231 100644
--- a/packages/weft_server/src/server/Page.res.js
+++ b/packages/weft_server/src/server/Page.res.js
@@ -368,6 +368,7 @@ function respond(request, element, assets, html, title, head, onError) {
}
export {
+ stylesOf,
toStream,
rowScript,
wantsPayload,
diff --git a/packages/weft_server/src/server/Page.resi b/packages/weft_server/src/server/Page.resi
index 2f7d577..2fca7e8 100644
--- a/packages/weft_server/src/server/Page.resi
+++ b/packages/weft_server/src/server/Page.resi
@@ -58,6 +58,12 @@ type assets = {
entrypointSheets?: dict
>,
}
+/**
+The app's stylesheets in `assets`, as `Render` takes them (its `styles`): `None` if the app has
+none.
+*/
+let stylesOf: assets => option
+
/**
The HTML page for `element`, streamed as it renders. `url` (the request's path and query, `"/"` by
default) is what the server-side page says it is; `html=false` leaves the HTML out. `title` and
diff --git a/packages/weft_server/src/server/RpcServer.res b/packages/weft_server/src/server/RpcServer.res
index 93ff63b..7d80e38 100644
--- a/packages/weft_server/src/server/RpcServer.res
+++ b/packages/weft_server/src/server/RpcServer.res
@@ -199,7 +199,7 @@ let readBody = async (request, ~limit) =>
}
}
-let respond = async (router, request: Request.t, ~id) =>
+let respond = async (router, request: Request.t, ~id, ~assets=?) =>
switch router.handlers->Map.get(id) {
| None => refuse(404, `There's no RPC ${id}.`)
| Some(handler) =>
@@ -232,6 +232,7 @@ let respond = async (router, request: Request.t, ~id) =>
toUnknown(root),
~onError=router.onError,
~signal=toSignal(request.signal),
+ ~styles=?assets->Option.flatMap(Page.stylesOf),
),
)
| exception error => payloadResponse(500, failure(router, error))
diff --git a/packages/weft_server/src/server/RpcServer.res.js b/packages/weft_server/src/server/RpcServer.res.js
index 4e95de1..7459d8f 100644
--- a/packages/weft_server/src/server/RpcServer.res.js
+++ b/packages/weft_server/src/server/RpcServer.res.js
@@ -5,6 +5,7 @@ import * as Env$Common from "@e-cline/common/src/Env.res.js";
import * as Stdlib_Int from "@rescript/runtime/lib/es6/Stdlib_Int.js";
import * as Stdlib_Option from "@rescript/runtime/lib/es6/Stdlib_Option.js";
import * as Stdlib_Promise from "@rescript/runtime/lib/es6/Stdlib_Promise.js";
+import * as Page$WeftServer from "./Page.res.js";
import * as Primitive_object from "@rescript/runtime/lib/es6/Primitive_object.js";
import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.js";
import * as Primitive_string from "@rescript/runtime/lib/es6/Primitive_string.js";
@@ -224,7 +225,7 @@ async function readBody(request, limit) {
}
}
-async function respond(router, request, id) {
+async function respond(router, request, id, assets) {
let handler = router.handlers.get(id);
if (handler === undefined) {
return refuse(404, `There's no RPC ` + id + `.`);
@@ -277,7 +278,7 @@ async function respond(router, request, id) {
return payloadResponse(500, failure(router, error));
}
if (exit$2 === 3) {
- return payloadResponse(val[0], Render$WeftServer.valueToStream(val[1], router.onError, Primitive_option.some(request.signal), undefined));
+ return payloadResponse(val[0], Render$WeftServer.valueToStream(val[1], router.onError, Primitive_option.some(request.signal), Stdlib_Option.flatMap(assets, Page$WeftServer.stylesOf)));
}
}
}
diff --git a/packages/weft_server/src/server/RpcServer.resi b/packages/weft_server/src/server/RpcServer.resi
index 79255df..2f21cd9 100644
--- a/packages/weft_server/src/server/RpcServer.resi
+++ b/packages/weft_server/src/server/RpcServer.resi
@@ -12,10 +12,13 @@ let addComment = WeftServer.RpcServer.handler(Api.addComment, async (request, ~h
let router = WeftServer.RpcServer.router([addComment])
// src/Server.res
+@module("virtual:weft/assets") external assets: WeftServer.Page.assets = "default"
+
Route.post(list{"_weft", "rpc", ":id"}, async ctx =>
await ApiServer.router->WeftServer.RpcServer.respond(
ctx.request,
~id=ctx->RequestContext.paramOrThrow("id"),
+ ~assets,
)
)
```
@@ -68,8 +71,13 @@ The response to `request`, a call of the RPC `id`. In order:
6. otherwise the handler's result is the answer, as a payload, with `Payload.cacheControl`. A
handler that throws is a 500 (`Failed`), with the digest `onError` gave it and, in development
only, its message.
+
+With `assets` (`virtual:weft/assets`, as `Page.respond` is given), the answer brings the
+stylesheets of the elements in it, as a page's payload does (see `Render`'s `styles`), and the
+client's call resolves once they've loaded, so what it renders never shows without its CSS. Without
+them, an element in the answer is styled only by what the page has loaded already.
*/
-let respond: (router, Request.t, ~id: string) => promise
+let respond: (router, Request.t, ~id: string, ~assets: Page.assets=?) => promise
/** The IDs the router answers, sorted. */
let ids: router => array
diff --git a/packages/weft_server/tests/Rpc_test.res.js b/packages/weft_server/tests/Rpc_test.res.js
index 32a7959..a5e9de9 100644
--- a/packages/weft_server/tests/Rpc_test.res.js
+++ b/packages/weft_server/tests/Rpc_test.res.js
@@ -155,7 +155,7 @@ function post(idOpt, headersOpt, methodOpt, body) {
method: method,
headers: headers,
body: body
- })), id);
+ })), id, undefined);
}
function contentType(response) {
@@ -271,7 +271,7 @@ Vitest.describe("the router", undefined, undefined, undefined, undefined, undefi
method: "POST",
headers: headers,
body: `"a"`
- }), "notes.small");
+ }), "notes.small", undefined);
};
t.expect((await call("http://app.test")).status).toBe(200);
return t.expect((await call(origin)).status).toBe(403);
@@ -301,7 +301,7 @@ Vitest.describe("the router", undefined, undefined, undefined, undefined, undefi
let response = await RpcServer$WeftServer.respond(router, request(origin, {
"content-type": "application/json",
"x-weft-rpc": "1"
- }, bytes), "notes.small");
+ }, bytes), "notes.small", undefined);
return t.expect(response.status).toBe(400);
});
Vitest.testAsync("answers a handler that throws with a 500 and an error row, through onError", undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, async t => {
@@ -500,7 +500,7 @@ function fakeFetch(url, init) {
headers: init.headers,
body: init.body,
signal: init.signal
- }), id);
+ }), id, undefined);
let signal = init.signal;
if (signal === undefined) {
return response;
diff --git a/packages/weft_server/tests/Sheets_test.res b/packages/weft_server/tests/Sheets_test.res
index b838ba7..410d82a 100644
--- a/packages/weft_server/tests/Sheets_test.res
+++ b/packages/weft_server/tests/Sheets_test.res
@@ -333,3 +333,105 @@ describe("Navigation, with sheets", () => {
t->expect(TestRenderer.findById(renderer, "styled")->Option.isSome)->Expect.toBe(true)
})
})
+
+// An RPC's answer, through the router in process: its elements bring their sheets, as a page's do.
+
+let cards: Rpc.t = Rpc.make(
+ ~id="shop.cards",
+ ~request=Rpc.Codec.string,
+)
+/** An answer whose stock comes later, in a row of its own: once a test resolves `stockReady`. */
+let stocked: Rpc.t = Rpc.make(
+ ~id="shop.stocked",
+ ~request=Rpc.Codec.string,
+)
+let stockReady = ref(Promise.withResolvers())
+
+let cardsRouter = RpcServer.router([
+ RpcServer.handler(cards, async (label, ~http as _) => Ok(
+ {text(label)}
,
+ )),
+ RpcServer.handler(stocked, async (label, ~http as _) => Ok(
+
+ {text(label)}
+
+
+
+
+
+