Fresh

deno run -Ar jsr:@fresh/init
cd fresh-project
deno task dev

import { page } from "fresh";
import { define } from "@/utils.ts";

type Task = {
  id: string;
  title: string;
  completed: boolean;
};

const tasks: Task[] = [
  { id: "1", title: "学习 Fresh", completed: false },
];

export const handler = define.handlers({
  GET() {
    return page({ tasks });
  },
  async POST(ctx) {
    const form = await ctx.req.formData();
    const title = String(form.get("title") ?? "").trim();

    if (!title || title.length > 120) {
      return new Response("Invalid title", { status: 422 });
    }

    tasks.push({
      id: crypto.randomUUID(),
      title,
      completed: false,
    });

    return new Response(null, {
      status: 303,
      headers: { location: "/tasks" },
    });
  },
});

export default define.page<typeof handler>(({ data }) => {
  return (
    <main>
      <h1>任务</h1>
      <form method="post">
        <input name="title" required maxlength={120} />
        <button type="submit">添加</button>
      </form>
      <ul>
        {data.tasks.map((task) => <li key={task.id}>{task.title}</li>)}
      </ul>
    </main>
  );
});

import { useSignal } from "@preact/signals";

export default function TaskFilter() {
  const query = useSignal("");

  return (
    <label>
      筛选任务
      <input
        value={query}
        onInput={(event) => {
          query.value = event.currentTarget.value;
        }}
        placeholder="输入关键词"
      />
      <output>当前关键词：{query}</output>
    </label>
  );
}

import { define } from "@/utils.ts";

export const handlers = define.handlers({
  GET() {
    return Response.json({ status: "ok" });
  },
  async POST(ctx) {
    const input = await ctx.req.json();

    if (
      typeof input !== "object" ||
      input === null ||
      typeof (input as { title?: unknown }).title !== "string"
    ) {
      return Response.json(
        { error: "title must be a string" },
        { status: 422 },
      );
    }

    return Response.json(
      {
        id: crypto.randomUUID(),
        title: (input as { title: string }).title,
      },
      { status: 201 },
    );
  },
});

import { expect } from "@std/expect";
import { App } from "fresh";
import { handlers } from "../routes/api/tasks.ts";

Deno.test("creates a task", async () => {
  const handle = new App()
    .post("/api/tasks", handlers.POST)
    .handler();

  const response = await handle(
    new Request("http://localhost/api/tasks", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ title: "测试 Fresh" }),
    }),
  );

  expect(response.status).toEqual(201);
  expect((await response.json()).title).toEqual("测试 Fresh");
});