format

pages/index/+Page.tsx

@@ -3,7 +3,11 @@ import { Counter } from "./Counter.js";
 export default function Page() {
   return (
     <>
-      <h1 css={{ fontWeight: "700", fontSize: "1.875rem", paddingBottom: "1rem" }}>My Vike app</h1>
+      <h1
+        css={{ fontWeight: "700", fontSize: "1.875rem", paddingBottom: "1rem" }}
+      >
+        My Vike app
+      </h1>
       This page is:
       <ul>
         <li>Rendered to HTML.</li>

pages/star-wars/@id/+data.ts

@@ -10,7 +10,9 @@ export const data = async (pageContext: PageContextServer) => {
   // https://vike.dev/useConfig
   const config = useConfig();
 
-  const response = await fetch(`https://brillout.github.io/star-wars/api/films/${pageContext.routeParams.id}.json`);
+  const response = await fetch(
+    `https://brillout.github.io/star-wars/api/films/${pageContext.routeParams.id}.json`,
+  );
   let movie = (await response.json()) as MovieDetails;
 
   config({

pages/star-wars/index/+Page.tsx

@@ -14,7 +14,11 @@ export default function Page() {
         ))}
       </ol>
       <p>
-        Source: <a href="https://brillout.github.io/star-wars">brillout.github.io/star-wars</a>.
+        Source:{" "}
+        <a href="https://brillout.github.io/star-wars">
+          brillout.github.io/star-wars
+        </a>
+        .
       </p>
     </>
   );

pages/star-wars/index/+data.ts

@@ -9,7 +9,9 @@ export const data = async () => {
   // https://vike.dev/useConfig
   const config = useConfig();
 
-  const response = await fetch("https://brillout.github.io/star-wars/api/films.json");
+  const response = await fetch(
+    "https://brillout.github.io/star-wars/api/films.json",
+  );
   const moviesData = (await response.json()) as MovieDetails[];
 
   config({

pages/todo/+data.ts

@@ -6,6 +6,8 @@ export type Data = {
   todo: { text: string }[];
 };
 
-export default async function data(_pageContext: PageContextServer): Promise<Data> {
+export default async function data(
+  _pageContext: PageContextServer,
+): Promise<Data> {
   return { todo: todos };
 }

pages/todo/TodoList.tsx

@@ -1,7 +1,11 @@
 import { trpc } from "../../trpc/client";
 import { useState } from "react";
 
-export function TodoList({ initialTodoItems }: { initialTodoItems: { text: string }[] }) {
+export function TodoList({
+  initialTodoItems,
+}: {
+  initialTodoItems: { text: string }[];
+}) {
   const [todoItems, setTodoItems] = useState(initialTodoItems);
   const [newTodo, setNewTodo] = useState("");
   return (
@@ -16,6 +20,7 @@ export function TodoList({ initialTodoItems }: { initialTodoItems: { text: strin
         <form
           onSubmit={async (ev) => {
             ev.preventDefault();
+            if (newTodo.trim() === "") return;
 
             // Optimistic UI update
             setTodoItems((prev) => [...prev, { text: newTodo }]);
@@ -29,7 +34,11 @@ export function TodoList({ initialTodoItems }: { initialTodoItems: { text: strin
             }
           }}
         >
-          <input type="text" onChange={(ev) => setNewTodo(ev.target.value)} value={newTodo} />
+          <input
+            type="text"
+            onChange={(ev) => setNewTodo(ev.target.value)}
+            value={newTodo}
+          />
           <button type="submit">Add to-do</button>
         </form>
       </div>