Enhance HTML forms.

Author: Mike Nikles

src/lib/actions/form.ts

@@ -0,0 +1,35 @@
+export const enhance = (form: HTMLFormElement, {
+  result
+}) => {
+
+  const handleSubmit = async (event: Event) => {
+    event.preventDefault();
+
+    try {
+      const body = new FormData(form);
+      const res = await fetch(form.action, {
+        method: form.method,
+        headers: {
+          accept: "application/json"
+        },
+        body
+      });
+
+      if (res.ok) {
+        result(res, form);
+      } else {
+        console.error("Fetch error: ", await res.text());
+      }
+    } catch (error) {
+      console.error("Could not submit the form: ", error);
+    }
+  };
+
+  form.addEventListener("submit", handleSubmit);
+
+  return {
+    destroy() {
+      form.removeEventListener("submit", handleSubmit);
+    }
+  }
+};

src/lib/todo-item.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
+  import { enhance } from "$lib/actions/form";
+
   export let todo: Todo;
+  export let processDeletedTodoResult: (res: Response) => void;
+  export let processUpdatedTodoResult: (res: Response) => void;
 </script>
 
 <style>
@@ -82,17 +86,23 @@
 </style>
 
 <div class="todo" class:done={todo.done}>
-  <form action="/todos/{todo.uid}.json?_method=patch" method="post">
+  <form action="/todos/{todo.uid}.json?_method=patch" method="post" use:enhance={{
+    result: processUpdatedTodoResult
+  }}>
     <input type="hidden" name="done" value="{todo.done ? '' : 'true'}" />
     <button aria-label="Mark todo as {todo.done ? 'not done' : 'done'}" class="toggle"></button>
   </form>
 
-  <form action="/todos/{todo.uid}.json?_method=patch" method="post" class="text">
+  <form action="/todos/{todo.uid}.json?_method=patch" method="post" class="text" use:enhance={{
+    result: processUpdatedTodoResult
+  }}>
     <input type="text" name="text" value="{todo.text}" />
     <button aria-label="Save todo" class="save"></button>
   </form>
 
-  <form action="/todos/{todo.uid}.json?_method=delete" method="post">
+  <form action="/todos/{todo.uid}.json?_method=delete" method="post" use:enhance={{
+    result: processDeletedTodoResult
+  }}>
     <button aria-label="Delete todo" class="delete"></button>
   </form>
 </div>

src/routes/index.svelte

@@ -1,5 +1,6 @@
 <script context="module" lang="ts">
   import type { Load } from "@sveltejs/kit";
+  import { enhance } from "$lib/actions/form";
 
   export const load: Load = async ({ fetch }) => {
     const res = await fetch("/todos.json");
@@ -24,6 +25,21 @@
   export let todos: Todo[];
 
   const title = "Todo";
+
+  const processNewTodoResult = async (res: Response, form: HTMLFormElement) => {
+    const newTodo = await res.json();
+    todos = [...todos, newTodo];
+
+    form.reset();
+  };
+
+  const processUpdatedTodoResult = async (res: Response) => {
+    const updatedTodo = await res.json();
+    todos = todos.map(t => {
+      if (t.uid === updatedTodo.uid) return updatedTodo;
+      return t;
+    })
+  };
 </script>
 
 <style>
@@ -64,12 +80,20 @@
 
 <div class="todos">
   <h1>{title}</h1>
-  
-  <form action="/todos.json" method="post" class="new">
+
+  <form action="/todos.json" method="post" class="new" use:enhance={{
+    result: processNewTodoResult
+  }}>
     <input type="text" name="text" aria-label="Add a todo" placeholder="+ type to add a todo" />
   </form>
 
   {#each todos as todo}
-    <TodoItem {todo} />
+    <TodoItem
+      {todo}
+      processDeletedTodoResult={() => {
+        todos = todos.filter(t => t.uid !== todo.uid);
+      }}
+      {processUpdatedTodoResult}
+    />
   {/each}
 </div>

src/routes/todos/_api.ts

@@ -30,13 +30,15 @@ export const api = (request: Request, data?: Record<string, unknown>) => {
         return todo;
       });
       status = 200;
+      body = todos.find(todo => todo.uid === request.params.uid);
       break;
 
     default:
       break;
   }
 
-  if (request.method.toUpperCase() !== "GET") {
+  if (request.method.toUpperCase() !== "GET" &&
+    request.headers.accept !== "application/json") {
     return {
       status: 303,
       headers: {