scaffold Vike app with Bati

pages/todo/+Page.tsx

@@ -0,0 +1,13 @@
+import type { Data } from "./+data";
+import { useData } from "vike-react/useData";
+import { TodoList } from "./TodoList.js";
+
+export default function Page() {
+  const data = useData<Data>();
+  return (
+    <>
+      <h1>To-do List</h1>
+      <TodoList initialTodoItems={data.todo} />
+    </>
+  );
+}

pages/todo/+config.ts

@@ -0,0 +1,3 @@
+export const config = {
+  prerender: false,
+};

pages/todo/+data.ts

@@ -0,0 +1,11 @@
+// https://vike.dev/data
+import { todos } from "../../database/todoItems";
+import type { PageContextServer } from "vike/types";
+
+export type Data = {
+  todo: { text: string }[];
+};
+
+export default async function data(_pageContext: PageContextServer): Promise<Data> {
+  return { todo: todos };
+}

pages/todo/TodoList.tsx

@@ -0,0 +1,38 @@
+import { trpc } from "../../trpc/client";
+import { useState } from "react";
+
+export function TodoList({ initialTodoItems }: { initialTodoItems: { text: string }[] }) {
+  const [todoItems, setTodoItems] = useState(initialTodoItems);
+  const [newTodo, setNewTodo] = useState("");
+  return (
+    <>
+      <ul>
+        {todoItems.map((todoItem, index) => (
+          // biome-ignore lint:
+          <li key={index}>{todoItem.text}</li>
+        ))}
+      </ul>
+      <div>
+        <form
+          onSubmit={async (ev) => {
+            ev.preventDefault();
+
+            // Optimistic UI update
+            setTodoItems((prev) => [...prev, { text: newTodo }]);
+            try {
+              await trpc.onNewTodo.mutate(newTodo);
+              setNewTodo("");
+            } catch (e) {
+              console.error(e);
+              // rollback
+              setTodoItems((prev) => prev.slice(0, -1));
+            }
+          }}
+        >
+          <input type="text" onChange={(ev) => setNewTodo(ev.target.value)} value={newTodo} />
+          <button type="submit">Add to-do</button>
+        </form>
+      </div>
+    </>
+  );
+}