Skip to content

Commit 0d7e866

Browse files
disjukrdisjukr
committed
new useWrpServer
1 parent a98a292 commit 0d7e866

File tree

4 files changed

+48
-75
lines changed

4 files changed

+48
-75
lines changed

‎import_map.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"twind": "https://esm.sh/twind@0.16.16",
1111
"twind/": "https://esm.sh/twind@0.16.16/",
1212

13-
"wrp/": "https://deno.land/x/wrp@v0.0.5/",
13+
"wrp/": "https://deno.land/x/wrp@v0.0.12/",
1414
"pbkit/": "https://deno.land/x/pbkit@v0.0.45/",
1515

1616
"@markdown": "./utils/markdown.ts"

‎islands/WrpExample.tsx

Lines changed: 17 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
import { createWrpChannel, WrpChannel } from "wrp/channel.ts";
1010
import { Type as WrpMessage } from "wrp/generated/messages/pbkit/wrp/WrpMessage.ts";
1111
import useWrpParentSocket from "wrp/react/useWrpParentSocket.ts";
12-
import useWrpServer from "wrp/react/useWrpServer.ts";
12+
import { rpc, useWrpServer } from "wrp/react/server.ts";
1313
import {
1414
createServiceClient,
1515
methodDescriptors,
@@ -26,11 +26,11 @@ export default function WrpExample() {
2626
const channel = useMemo(() => socket && createWrpChannel(socket), [socket]);
2727
const splitChannelResult = useMemo(
2828
() => channel && splitChannel(channel),
29-
[channel]
29+
[channel],
3030
);
3131
const wrpClientImpl = useWrpClientImpl(splitChannelResult?.guestChannel);
3232
const [serviceClient, setServiceClient] = useState<Service | undefined>(
33-
undefined
33+
undefined,
3434
);
3535
useEffect(() => {
3636
if (!wrpClientImpl) return;
@@ -51,34 +51,25 @@ export default function WrpExample() {
5151
const onClick = async () => {
5252
alert((await serviceClient?.getTextValue({}))?.text);
5353
};
54-
useWrpServer(splitChannelResult?.hostChannel, { sliderValue, text }, [
55-
[
54+
useWrpServer(
55+
splitChannelResult?.hostChannel,
56+
{ sliderValue, text },
57+
rpc(
5658
methodDescriptors.getSliderValue,
57-
({ req, res, getState, stateChanges }) => {
58-
res.header({});
59-
const value = getState().sliderValue;
60-
res.send({ value });
61-
const off = stateChanges.on("sliderValue", (value) =>
62-
res.send({ value })
63-
);
64-
req.metadata?.on("cancel-response", teardown);
65-
req.metadata?.on("close", teardown);
66-
function teardown() {
67-
off();
68-
res.end({});
69-
}
59+
async function* ({ req, getState, stateChanges }) {
60+
const { sliderValue: value } = getState();
61+
yield { value };
62+
for await (const value of stateChanges.sliderValue) yield { value };
7063
},
71-
],
72-
[
64+
),
65+
rpc(
7366
methodDescriptors.getTextValue,
74-
({ res, getState }) => {
67+
async function ({ req, getState }) {
7568
const { text } = getState();
76-
res.header({});
77-
res.send({ text });
78-
res.end({});
69+
return { text };
7970
},
80-
],
81-
]);
71+
),
72+
);
8273
const styles = {
8374
main: tw`flex flex-col items-center gap-2 p-2 text-center`,
8475
button: (color: string) =>

‎islands/WrpExampleHost.tsx

Lines changed: 15 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,42 +4,33 @@ import { Fragment, h, useMemo, useState } from "preact";
44
import { tw } from "@twind";
55
import { createWrpChannel } from "wrp/channel.ts";
66
import useWrpParentSocket from "wrp/react/useWrpParentSocket.ts";
7-
import useWrpServer from "wrp/react/useWrpServer.ts";
7+
import { rpc, useWrpServer } from "wrp/react/server.ts";
88
import { methodDescriptors } from "../wrp-example/generated/services/pbkit/wrp/example/WrpExampleService.ts";
99

1010
export default function WrpExampleHost() {
1111
const [sliderValue, setSliderValue] = useState(50);
1212
const [text, setText] = useState("Hello World");
1313
const { socket } = useWrpParentSocket();
1414
const channel = useMemo(() => socket && createWrpChannel(socket), [socket]);
15-
useWrpServer(channel, { sliderValue, text }, [
16-
[
15+
useWrpServer(
16+
channel,
17+
{ sliderValue, text },
18+
rpc(
1719
methodDescriptors.getSliderValue,
18-
({ req, res, getState, stateChanges }) => {
19-
res.header({});
20-
const value = getState().sliderValue;
21-
res.send({ value });
22-
const off = stateChanges.on("sliderValue", (value) =>
23-
res.send({ value })
24-
);
25-
req.metadata?.on("cancel-response", teardown);
26-
req.metadata?.on("close", teardown);
27-
function teardown() {
28-
off();
29-
res.end({});
30-
}
20+
async function* ({ req, getState, stateChanges }) {
21+
const { sliderValue: value } = getState();
22+
yield { value };
23+
for await (const value of stateChanges.sliderValue) yield { value };
3124
},
32-
],
33-
[
25+
),
26+
rpc(
3427
methodDescriptors.getTextValue,
35-
({ res, getState }) => {
28+
async function ({ req, getState }) {
3629
const { text } = getState();
37-
res.header({});
38-
res.send({ text });
39-
res.end({});
30+
return { text };
4031
},
41-
],
42-
]);
32+
),
33+
);
4334
const styles = {
4435
main: tw`flex flex-col items-center gap-4 p-4 text-center`,
4536
button: (color: string) =>

‎islands/WrpIframeHost.tsx

Lines changed: 15 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Fragment, h, useEffect, useMemo, useState } from "preact";
44
import { tw } from "@twind";
55
import { createWrpChannel } from "wrp/channel.ts";
66
import useWrpIframeSocket from "wrp/react/useWrpIframeSocket.ts";
7-
import useWrpServer from "wrp/react/useWrpServer.ts";
7+
import { rpc, useWrpServer } from "wrp/react/server.ts";
88
import { methodDescriptors } from "../wrp-example/generated/services/pbkit/wrp/example/WrpExampleService.ts";
99

1010
export default function WrpIframeHost() {
@@ -13,34 +13,25 @@ export default function WrpIframeHost() {
1313
const [text, setText] = useState("Hello World");
1414
const { iframeRef, socket } = useWrpIframeSocket();
1515
const channel = useMemo(() => socket && createWrpChannel(socket), [socket]);
16-
useWrpServer(channel, { sliderValue, text }, [
17-
[
16+
useWrpServer(
17+
channel,
18+
{ sliderValue, text },
19+
rpc(
1820
methodDescriptors.getSliderValue,
19-
({ req, res, getState, stateChanges }) => {
20-
res.header({});
21-
const value = getState().sliderValue;
22-
res.send({ value });
23-
const off = stateChanges.on("sliderValue", (value) =>
24-
res.send({ value })
25-
);
26-
req.metadata?.on("cancel-response", teardown);
27-
req.metadata?.on("close", teardown);
28-
function teardown() {
29-
off();
30-
res.end({});
31-
}
21+
async function* ({ req, getState, stateChanges }) {
22+
const { sliderValue: value } = getState();
23+
yield { value };
24+
for await (const value of stateChanges.sliderValue) yield { value };
3225
},
33-
],
34-
[
26+
),
27+
rpc(
3528
methodDescriptors.getTextValue,
36-
({ res, getState }) => {
29+
async function ({ req, getState }) {
3730
const { text } = getState();
38-
res.header({});
39-
res.send({ text });
40-
res.end({});
31+
return { text };
4132
},
42-
],
43-
]);
33+
),
34+
);
4435
const styles = {
4536
main: tw`flex flex-col items-center gap-4 p-4 text-center`,
4637
button: (color: string) =>

0 commit comments

Comments
 (0)