Merge pull request #5 from nyaomaru/deno-study-3

stydy: island and middleware

components/Card.tsx

@@ -0,0 +1,12 @@
+import { JSX } from "preact";
+
+export function Card(props: JSX.HTMLAttributes<HTMLButtonElement>) {
+  return (
+    <div class="max-w-sm rounded overflow-hidden shadow-lg bg-white border-gray-400 ">
+      <div class="px-6 py-4">
+        <div class="font-bold text-xl mb-2">{props.title}</div>
+        {props.children}
+      </div>
+    </div>
+  );
+}

fresh.gen.ts

@@ -5,13 +5,15 @@
 import * as $_404 from "./routes/_404.tsx";
 import * as $_app from "./routes/_app.tsx";
 import * as $_layout from "./routes/_layout.tsx";
+import * as $_middleware from "./routes/_middleware.ts";
 import * as $about from "./routes/about.tsx";
 import * as $api_joke from "./routes/api/joke.ts";
 import * as $api_random_uuid from "./routes/api/random-uuid.ts";
 import * as $countdown from "./routes/countdown.tsx";
 import * as $greet_name_ from "./routes/greet/[name].tsx";
 import * as $index from "./routes/index.tsx";
 import * as $search from "./routes/search.tsx";
+import * as $subscribe from "./routes/subscribe.tsx";
 import * as $Countdown from "./islands/Countdown.tsx";
 import * as $Counter from "./islands/Counter.tsx";
 import { type Manifest } from "$fresh/server.ts";
@@ -21,13 +23,15 @@ const manifest = {
     "./routes/_404.tsx": $_404,
     "./routes/_app.tsx": $_app,
     "./routes/_layout.tsx": $_layout,
+    "./routes/_middleware.ts": $_middleware,
     "./routes/about.tsx": $about,
     "./routes/api/joke.ts": $api_joke,
     "./routes/api/random-uuid.ts": $api_random_uuid,
     "./routes/countdown.tsx": $countdown,
     "./routes/greet/[name].tsx": $greet_name_,
     "./routes/index.tsx": $index,
     "./routes/search.tsx": $search,
+    "./routes/subscribe.tsx": $subscribe,
   },
   islands: {
     "./islands/Countdown.tsx": $Countdown,

islands/Counter.tsx

@@ -1,16 +1,23 @@
-import type { Signal } from "@preact/signals";
+import { useSignal } from "@preact/signals";
+import { ComponentChildren } from "preact";
 import { Button } from "../components/Button.tsx";
+import { Card } from "../components/Card.tsx";
 
-interface CounterProps {
-  count: Signal<number>;
+interface Props {
+  children: ComponentChildren;
 }
 
-export default function Counter(props: CounterProps) {
+export default function MyIsland({ children }: Props) {
+  const count = useSignal(0);
+
   return (
-    <div class="flex gap-8 py-6">
-      <Button onClick={() => props.count.value -= 1}>-1</Button>
-      <p class="text-3xl tabular-nums">{props.count}</p>
-      <Button onClick={() => props.count.value += 1}>+1</Button>
-    </div>
+    <Card title={"Counter"}>
+      <div class="flex gap-8">
+        <Button onClick={() => count.value -= 1}>-</Button>
+        <p class="text-3xl tabular-nums">{count}</p>
+        <Button onClick={() => (count.value += 1)}>+</Button>
+      </div>
+      {children}
+    </Card>
   );
 }

routes/_middleware.ts

@@ -0,0 +1,15 @@
+import { FreshContext } from "$fresh/server.ts";
+
+interface State {
+    data: string;
+}
+
+export async function handler(
+    req: Request,
+    ctx: FreshContext<State>,
+) {
+    ctx.state.data = "myData";
+    const resp = await ctx.next();
+    resp.headers.set("server", "fresh server");
+    return resp;
+}

routes/index.tsx

@@ -1,11 +1,16 @@
-import { useSignal } from "@preact/signals";
+import { Handlers, PageProps } from "$fresh/server.ts";
 import { Link } from "../components/Link.tsx";
 import Counter from "../islands/Counter.tsx";
 
 const nameList = ["Alice", "Bob", "Charlie", "David", "Eve"];
 
-export default function Home() {
-  const count = useSignal(3);
+export const handler: Handlers<any, { data: string }> = {
+  GET(_req, ctx) {
+    return ctx.render(ctx.state.data);
+  },
+};
+
+export default function Home({ data }: PageProps<string>) {
   const name = nameList[Math.floor(Math.random() * 5)];
 
   return (
@@ -21,13 +26,19 @@ export default function Home() {
       <p class="my-4">
         I am a cat being!!
       </p>
-      <Counter count={count} />
+      <Counter>
+        <p>This text is rendered on the server</p>
+      </Counter>
       <div class="my-4">
         <Link text="Go About Page" href="about" />
         <Link text="Go Greet Page" href={`greet/${name}`} />
         <Link text="Go Search Page" href="search" />
         <Link text="Go Countdown Page" href="countdown" />
       </div>
+
+      <p class="my-4">
+        Server response data: <span id="data">{data}</span>
+      </p>
     </div>
   );
 }