Denoのフロントエンド開発の動向【2022年春】

$ deno run -A https://deno.land/x/[email protected]/cli.ts init

# devサーバの起動
$ deno task dev

# ビルド
$ deno task build

import { Router } from "aleph/react";
import { serve } from "aleph/server";
import { renderToReadableStream } from "react-dom/server";

serve({
  config: {
    // ルーティングに関する設定
    routes: "./routes/**/*.{tsx,ts}",
  },
  // SSRに関する設定
  ssr: {
    suspense: true,
    render: (ctx) => renderToReadableStream(<Router ssrContext={ctx} />, ctx),
  },
});

import { useData } from "aleph/react";
import { useState } from "react";
import type { FormEvent } from "react";

interface User {
  id: number;
  name: string;
}

let nextUserId = 0;
const users: Array<User> = [
  { id: nextUserId++, name: "foo" },
  { id: nextUserId++, name: "bar" },
];
export const data: Data = {
  get(_req, ctx) {
    return ctx.json({ users });
  },
  async post(req, ctx) {
    const { name } = await req.json();
    const id = nextUserId++;
    const user = { id, name };
    users.push(user);
    return ctx.json({ users });
  },
};

export default function Users() {
  const { data, isMutating, mutation } = useData<{ users: Array<User> }>();
  const [userName, setUserName] = useState("");
  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    mutation.post({ name: userName }, { replace: true }).then(() => {
      setUserName("");
    });
  };
  return (
    <div>
      <h1>Users</h1>
      <ul>
        {data.users.map((x) => {
          return <li key={x.id}>{x.name}</li>;
        })}
      </ul>
      <form
        onSubmit={onSubmit}
      >
        <input
          type="text"
          name="name"
          value={userName}
          onChange={(e) => setUserName(e.target.value)}
          disabled={Boolean(isMutating)}
        />
      </form>
    </div>
  );
}

  const { data, isMutating, mutation } = useData<{ users: Array<User> }>();

  mutation.post({ name: userName }, { replace: true });