FEAT/zod added in todo example (#19)

example/todo/package.json

@@ -25,6 +25,7 @@
     "webpack-dev-server": "^4.15.1"
   },
   "dependencies": {
-    "SerendipJS": "workspace:^"
+    "SerendipJS": "workspace:^",
+    "zod": "^3.22.4"
   }
 }

example/todo/src/index.ts

@@ -9,8 +9,16 @@ import {
 } from "SerendipJS";
 import "./index.css";
 import { getTodos, saveTodos } from "./localStorage";
+import { z } from "zod";
 
-export type Todo = { id: number; title: string; isDone: boolean };
+export const todoSchema = z.object({
+  id: z.number(),
+  title: z.string().trim().min(1),
+  isDone: z.boolean(),
+});
+export const todosSchema = todoSchema.array();
+
+export type Todo = z.infer<typeof todoSchema>;
 
 const todos = getTodos();
 
@@ -28,12 +36,17 @@ const newTodoForm = (emit: Emit<typeof reducers>) => {
           e.preventDefault();
           const formElement = <HTMLFormElement>e.currentTarget;
 
-          //FIXME: add zod
           const formData = new FormData(formElement);
 
-          const todoTitle = formData.get("todo-title") as string;
+          const todoTitle = todoSchema.shape.title.safeParse(
+            formData.get("todo-title"),
+          );
+
+          if (!todoTitle.success) {
+            return alert("todo title cannot be empty");
+          }
 
-          emit("addNewTodo", todoTitle);
+          emit("addNewTodo", todoTitle.data);
         },
       },
     },

example/todo/src/localStorage.ts

@@ -1,6 +1,4 @@
-//FIXME: add zod
-
-import { Todo } from ".";
+import { Todo, todosSchema } from ".";
 
 const localStorageKey = "todo";
 
@@ -9,9 +7,12 @@ export const saveTodos = (todos: Todo[]) => {
 };
 
 export const getTodos = () => {
-  const todos = localStorage.getItem(localStorageKey) ?? "";
-
-  const parsedTodos = JSON.parse(todos) || [];
+  try {
+    const unsafeTodos = localStorage.getItem(localStorageKey) ?? "";
+    const todos = todosSchema.parse(JSON.parse(unsafeTodos));
 
-  return parsedTodos as Todo[];
+    return todos;
+  } catch (e) {
+    return [];
+  }
 };

packages/runtime/src/app.ts

@@ -42,7 +42,7 @@ export const createApp = <TState, TReducers extends Reducers<TState>>({
 
   const dispatcher = new Dispatcher();
 
-  const emit = (eventName: string, payload: any) => {
+  const emit: Emit<any> = (eventName, payload) => {
     dispatcher.dispatch(eventName, payload);
   };
 
@@ -51,7 +51,7 @@ export const createApp = <TState, TReducers extends Reducers<TState>>({
       destroyDom(vdom);
     }
 
-    vdom = view(state, emit as Emit<any>);
+    vdom = view(state, emit);
 
     if (vdom && parentEl) {
       mountDOM(vdom, parentEl);
@@ -87,5 +87,3 @@ export const createApp = <TState, TReducers extends Reducers<TState>>({
     },
   };
 };
-
-//TODO: find something cleaner instead of satifies