Skip to content

Commit 00f3249

Browse files
disjukrdisjukr
committed
upgrade fresh to 1.1
1 parent 0d7e866 commit 00f3249

22 files changed

+140
-213
lines changed

‎components/Button.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
1-
/** @jsx h */
2-
3-
import { h } from "preact";
4-
import { tw } from "@twind";
1+
import type { h } from "preact";
52

63
export function RoundedButton(props: h.JSX.HTMLAttributes<HTMLButtonElement>) {
74
return (
85
<button
96
{...props}
10-
class={tw
11-
`p-3 border border-transparent rounded-full text-white bg-indigo(600 hover:700) focus:(outline-none ring(2 offset-2 indigo-500)) disabled:(bg-indigo-200 cursor-default)`}
7+
class="p-3 border border-transparent rounded-full text-white bg-indigo(600 hover:700) focus:(outline-none ring(2 offset-2 indigo-500)) disabled:(bg-indigo-200 cursor-default)"
128
/>
139
);
1410
}

‎components/DocsSidebar.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
/** @jsx h */
2-
3-
import { h } from "preact";
4-
import { apply, tw } from "@twind";
1+
import { apply, tw } from "twind";
52
import {
63
CATEGORIES,
74
TableOfContentsCategory,

‎components/Footer.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
/** @jsx h */
2-
3-
import { h } from "preact";
4-
import { tw } from "@twind";
1+
import { tw } from "twind";
52

63
const LINKS = [
74
{

‎components/Icons.tsx

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
1-
/** @jsx h */
2-
3-
import { h } from "preact";
4-
import { tw } from "@twind";
5-
61
export function IconMinus() {
72
return (
83
<svg
9-
class={tw`h-6 w-6`}
4+
class="h-6 w-6"
105
xmlns="http://www.w3.org/2000/svg"
116
fill="none"
127
viewBox="0 0 24 24"
@@ -26,7 +21,7 @@ export function IconMinus() {
2621
export function IconPlus() {
2722
return (
2823
<svg
29-
class={tw`h-6 w-6`}
24+
class="h-6 w-6"
3025
xmlns="http://www.w3.org/2000/svg"
3126
fill="none"
3227
viewBox="0 0 24 24"

‎components/Navbar.tsx

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
/** @jsx h */
2-
3-
import { h } from "preact";
4-
import { tw } from "@twind";
1+
import { tw } from "twind";
52

63
interface NavbarProps {
74
active: string;
@@ -21,15 +18,15 @@ export default function Navbar({ active }: NavbarProps) {
2118
];
2219

2320
return (
24-
<nav class={tw`bg(gray-50) py-2 border(t-2 b-2 gray-100)`}>
21+
<nav class="bg(gray-50) py-2 border(t-2 b-2 gray-100)">
2522
<div
26-
class={tw`flex items-center justify-between max-w-screen-lg mx-auto`}
23+
class="flex items-center justify-between max-w-screen-lg mx-auto"
2724
>
28-
<a class={tw`flex items-center gap-2 mx-4 tracking-tight`} href="/">
25+
<a class="flex items-center gap-2 mx-4 tracking-tight" href="/">
2926
<img src="/pbkit.svg" width="32" />
3027
{/* <b>pbkit</b> */}
3128
</a>
32-
<ul class={tw`flex justify-end gap-8 mx-4`}>
29+
<ul class="flex justify-end gap-8 mx-4">
3330
{items.map((item) => (
3431
<li>
3532
<a

‎deno.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,9 @@
22
"tasks": {
33
"start": "deno run -A --watch=static/,routes/ dev.ts"
44
},
5-
"importMap": "import_map.json"
5+
"importMap": "import_map.json",
6+
"compilerOptions": {
7+
"jsx": "react-jsx",
8+
"jsxImportSource": "preact"
9+
}
610
}

‎fresh.gen.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// This file SHOULD be checked into source version control.
33
// This file is automatically updated during development when running `dev.ts`.
44

5+
import config from "./deno.json" assert { type: "json" };
56
import * as $0 from "./routes/docs/[...slug].tsx";
67
import * as $1 from "./routes/gfm.css.ts";
78
import * as $2 from "./routes/index.tsx";
@@ -31,6 +32,7 @@ const manifest = {
3132
"./islands/WrpIframeHost.tsx": $$3,
3233
},
3334
baseUrl: import.meta.url,
35+
config,
3436
};
3537

3638
export default manifest;

‎import_map.json

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
{
22
"imports": {
3-
"$fresh/": "https://fresh.deno.dev/@1.0.0/",
4-
"preact": "./utils/preact-deps.ts",
3+
"$fresh/": "https://deno.land/x/fresh@1.1.0/",
4+
"preact": "https://esm.sh/preact@10.10.6",
5+
"preact/": "https://esm.sh/preact@10.10.6/",
56
"preact/hooks": "./utils/preact-deps.ts",
6-
"preact-render-to-string": "https://esm.sh/preact-render-to-string@5.2.0?deps=preact@10.8.1",
7+
"preact-render-to-string": "https://esm.sh/*preact-render-to-string@5.2.3/",
8+
"@preact/signals": "https://esm.sh/*@preact/signals@1.0.3",
9+
"@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.0.1",
710
"react": "./utils/preact-deps.ts",
8-
9-
"@twind": "./utils/twind.ts",
10-
"twind": "https://esm.sh/twind@0.16.16",
11-
"twind/": "https://esm.sh/twind@0.16.16/",
12-
11+
"twind": "https://esm.sh/twind@0.16.17",
12+
"twind/": "https://esm.sh/twind@0.16.17/",
1313
"wrp/": "https://deno.land/x/wrp@v0.0.12/",
1414
"pbkit/": "https://deno.land/x/pbkit@v0.0.45/",
15-
1615
"@markdown": "./utils/markdown.ts"
1716
}
1817
}

‎islands/WrpExample.tsx

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
1-
/** @jsx h */
2-
/** @jsxFrag Fragment */
3-
import { Fragment, h, useEffect, useMemo, useState } from "preact";
4-
import { tw } from "@twind";
5-
import {
6-
createEventBuffer,
7-
EventBuffer,
8-
} from "pbkit/core/runtime/async/event-buffer.ts";
1+
import { useEffect, useMemo, useState } from "preact/hooks";
2+
import { tw } from "twind";
3+
import { createEventBuffer } from "pbkit/core/runtime/async/event-buffer.ts";
94
import { createWrpChannel, WrpChannel } from "wrp/channel.ts";
105
import { Type as WrpMessage } from "wrp/generated/messages/pbkit/wrp/WrpMessage.ts";
116
import useWrpParentSocket from "wrp/react/useWrpParentSocket.ts";
@@ -80,13 +75,13 @@ export default function WrpExample() {
8075
return (
8176
<>
8277
<div class={styles.main}>
83-
<h1 class={tw`text-xl font-bold`}>WrpExampleServer (Host)</h1>
84-
<div class={tw`flex flex-col gap-4`}>
78+
<h1 class="text-xl font-bold">WrpExampleServer (Host)</h1>
79+
<div class="flex flex-col gap-4">
8580
<label class={styles.label("blue")}>
8681
<b>SliderValue</b>
8782
<input
8883
type="range"
89-
class={tw`w-full`}
84+
class="w-full"
9085
value={sliderValue}
9186
min="0"
9287
max="100"
@@ -97,28 +92,28 @@ export default function WrpExample() {
9792
<b>TextValue</b>
9893
<input
9994
type="text"
100-
class={tw`p-1`}
95+
class="p-1"
10196
value={text}
10297
onInput={(e) => setText((e.target as any).value)}
10398
/>
10499
</label>
105100
</div>
106101
</div>
107102
<div class={styles.main}>
108-
<h1 class={tw`text-xl font-bold`}>WrpExampleClient (Guest)</h1>
103+
<h1 class="text-xl font-bold">WrpExampleClient (Guest)</h1>
109104
<p>GetSliderValue is requested on initialized</p>
110-
<div class={tw`flex flex-col items-center gap-2`}>
111-
<div class={tw`flex items-center gap-2`}>
105+
<div class="flex flex-col items-center gap-2">
106+
<div class="flex items-center gap-2">
112107
<label class={styles.label("blue")}>
113108
<b>Slider value</b>
114-
<p class={tw`text-4xl`}>{recvSliderValue}</p>
109+
<p class="text-4xl">{recvSliderValue}</p>
115110
</label>
116111
<label class={styles.label("red")}>
117112
<b># of responses (GetSliderValue)</b>
118-
<p class={tw`text-4xl`}>{responseCount}</p>
113+
<p class="text-4xl">{responseCount}</p>
119114
</label>
120115
</div>
121-
<div class={tw`w-full flex-1 flex flex-col items-center gap-2`}>
116+
<div class="w-full flex-1 flex flex-col items-center gap-2">
122117
<button class={styles.button("blue")} onClick={onClick}>
123118
Get TextValue from Server
124119
</button>

‎islands/WrpExampleGuest.tsx

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
/** @jsx h */
2-
/** @jsxFrag Fragment */
3-
import { Fragment, h, useEffect, useMemo, useState } from "preact";
4-
import { tw } from "@twind";
1+
import { useEffect, useMemo, useState } from "preact/hooks";
2+
import { tw } from "twind";
53
import { createWrpChannel } from "wrp/channel.ts";
64
import useWrpParentSocket from "wrp/react/useWrpParentSocket.ts";
75
import useWrpClientImpl from "wrp/react/useWrpClientImpl.ts";
@@ -38,20 +36,20 @@ export default function WrpExampleGuest() {
3836
};
3937
return (
4038
<div class={styles.main}>
41-
<h1 class={tw`text-2xl font-bold`}>WrpExampleClient (Guest)</h1>
39+
<h1 class="text-2xl font-bold">WrpExampleClient (Guest)</h1>
4240
<p>GetSliderValue is requested on initialized</p>
43-
<div class={tw`flex flex-col items-center gap-4`}>
44-
<div class={tw`flex items-center gap-4`}>
41+
<div class="flex flex-col items-center gap-4">
42+
<div class="flex items-center gap-4">
4543
<label class={styles.label("blue")}>
4644
<b>Slider value</b>
47-
<p class={tw`text-4xl`}>{sliderValue}</p>
45+
<p class="text-4xl">{sliderValue}</p>
4846
</label>
4947
<label class={styles.label("red")}>
5048
<b># of responses (GetSliderValue)</b>
51-
<p class={tw`text-4xl`}>{responseCount}</p>
49+
<p class="text-4xl">{responseCount}</p>
5250
</label>
5351
</div>
54-
<div class={tw`w-full flex-1 flex flex-col items-center gap-2`}>
52+
<div class="w-full flex-1 flex flex-col items-center gap-2">
5553
<button class={styles.button("blue")} onClick={onClick}>
5654
Get TextValue from Server
5755
</button>
@@ -72,12 +70,12 @@ function useWrpExampleServiceClient() {
7270
const channel = useMemo(() => socket && createWrpChannel(socket), [socket]);
7371
const wrpClientImpl = useWrpClientImpl(channel);
7472
const [serviceClient, setServiceClient] = useState<Service | undefined>(
75-
undefined
73+
undefined,
7674
);
7775
useEffect(() => {
7876
if (!wrpClientImpl) return;
7977
setServiceClient(
80-
createServiceClient(wrpClientImpl, { devtools: { tags: ["WrpClient"] } })
78+
createServiceClient(wrpClientImpl, { devtools: { tags: ["WrpClient"] } }),
8179
);
8280
}, [wrpClientImpl]);
8381
return serviceClient;

‎islands/WrpExampleHost.tsx

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
/** @jsx h */
2-
/** @jsxFrag Fragment */
3-
import { Fragment, h, useMemo, useState } from "preact";
4-
import { tw } from "@twind";
1+
import { useMemo, useState } from "preact/hooks";
2+
import { tw } from "twind";
53
import { createWrpChannel } from "wrp/channel.ts";
64
import useWrpParentSocket from "wrp/react/useWrpParentSocket.ts";
75
import { rpc, useWrpServer } from "wrp/react/server.ts";
@@ -41,13 +39,13 @@ export default function WrpExampleHost() {
4139
return (
4240
<>
4341
<div class={styles.main}>
44-
<h1 class={tw`text-2xl font-bold`}>WrpExampleServer (Host)</h1>
45-
<div class={tw`flex flex-col gap-4`}>
42+
<h1 class="text-2xl font-bold">WrpExampleServer (Host)</h1>
43+
<div class="flex flex-col gap-4">
4644
<label class={styles.label("blue")}>
4745
<b>SliderValue</b>
4846
<input
4947
type="range"
50-
class={tw`w-full`}
48+
class="w-full"
5149
value={sliderValue}
5250
min="0"
5351
max="100"
@@ -58,7 +56,7 @@ export default function WrpExampleHost() {
5856
<b>TextValue</b>
5957
<input
6058
type="text"
61-
class={tw`p-2`}
59+
class="p-2"
6260
value={text}
6361
onInput={(e) => setText((e.target as any).value)}
6462
/>

‎islands/WrpIframeHost.tsx

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
/** @jsx h */
2-
/** @jsxFrag Fragment */
3-
import { Fragment, h, useEffect, useMemo, useState } from "preact";
4-
import { tw } from "@twind";
1+
import { useMemo, useState } from "preact/hooks";
2+
import { tw } from "twind";
53
import { createWrpChannel } from "wrp/channel.ts";
64
import useWrpIframeSocket from "wrp/react/useWrpIframeSocket.ts";
75
import { rpc, useWrpServer } from "wrp/react/server.ts";
@@ -42,19 +40,19 @@ export default function WrpIframeHost() {
4240
return (
4341
<>
4442
<div class={styles.main}>
45-
<h1 class={tw`text-2xl font-bold`}>WrpExampleServer (Host)</h1>
43+
<h1 class="text-2xl font-bold">WrpExampleServer (Host)</h1>
4644
<p>
4745
You can use pbkit{" "}
4846
<a
49-
class={tw`text-blue-500 font-bold`}
47+
class="text-blue-500 font-bold"
5048
href="https://chrome.google.com/webstore/detail/pbkit-devtools/fjacmiijeihblfhobghceofniolonhca"
5149
target="_blank"
5250
>
5351
chrome devtools
5452
</a>{" "}
5553
here!
5654
</p>
57-
<p class={tw`cursor-pointer`} onClick={() => setIsFold((v) => !v)}>
55+
<p class="cursor-pointer" onClick={() => setIsFold((v) => !v)}>
5856
Show protobuf schema in this example {isFold ? "▼" : "▲"}
5957
</p>
6058
<code
@@ -64,12 +62,12 @@ export default function WrpIframeHost() {
6462
>
6563
{proto}
6664
</code>
67-
<div class={tw`flex flex-col gap-4`}>
65+
<div class="flex flex-col gap-4">
6866
<label class={styles.label("blue")}>
6967
<b>SliderValue</b>
7068
<input
7169
type="range"
72-
class={tw`w-full`}
70+
class="w-full"
7371
value={sliderValue}
7472
min="0"
7573
max="100"
@@ -80,14 +78,14 @@ export default function WrpIframeHost() {
8078
<b>TextValue</b>
8179
<input
8280
type="text"
83-
class={tw`p-1`}
81+
class="p-1"
8482
value={text}
8583
onInput={(e) => setText((e.target as any).value)}
8684
/>
8785
</label>
8886
</div>
8987
<div>
90-
<h2 class={tw`text-2xl font-bold my-4`}>iframe</h2>
88+
<h2 class="text-2xl font-bold my-4">iframe</h2>
9189
<iframe ref={iframeRef} src="/wrp-example-guest" />
9290
</div>
9391
</div>

‎main.ts

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,13 @@
11
/// <reference no-default-lib="true" />
22
/// <reference lib="dom" />
3+
/// <reference lib="dom.iterable" />
34
/// <reference lib="dom.asynciterable" />
45
/// <reference lib="deno.ns" />
5-
/// <reference lib="deno.unstable" />
66

77
import { start } from "$fresh/server.ts";
8-
import { setup } from "@twind";
9-
import * as colors from "twind/colors";
10-
import { virtualSheet } from "twind/sheets";
8+
import manifest from "./fresh.gen.ts";
119

12-
import routes from "./fresh.gen.ts";
10+
import twindPlugin from "$fresh/plugins/twind.ts";
11+
import twindConfig from "./twind.config.ts";
1312

14-
const sheet = virtualSheet();
15-
sheet.reset();
16-
setup({ sheet, theme: { colors } });
17-
18-
await start(routes, {
19-
render(ctx, render) {
20-
const snapshot = ctx.state.get("twindSnapshot") as unknown[] | null;
21-
sheet.reset(snapshot || undefined);
22-
render();
23-
ctx.styles.splice(0, ctx.styles.length, ...sheet.target);
24-
const newSnapshot = sheet.reset();
25-
ctx.state.set("twindSnapshot", newSnapshot);
26-
},
27-
});
13+
await start(manifest, { plugins: [twindPlugin(twindConfig)] });

0 commit comments

Comments
 (0)