diff --git a/deno.json b/deno.json index f1de0e57a..9a8b49c13 100644 --- a/deno.json +++ b/deno.json @@ -10,7 +10,7 @@ "./types.d.ts" ], "jsx": "react-jsx", - "jsxImportSource": "https://esm.sh/v113/react@18.2.0" + "jsxImportSource": "https://esm.sh/v126/react@18.2.0" }, "importMap": "./import_map.json", "fmt": { diff --git a/dev.ts b/dev.ts index 8216797a1..dc93f2b6f 100644 --- a/dev.ts +++ b/dev.ts @@ -1,5 +1,5 @@ import dev from "./server/dev.ts"; if (import.meta.main) { - dev(Deno.args[0]); + dev(Deno.args); } diff --git a/examples/react-app/main.ts b/examples/react-app/main.ts index 81010ad7e..96199776a 100644 --- a/examples/react-app/main.ts +++ b/examples/react-app/main.ts @@ -1,3 +1,5 @@ +/** @format */ + import { bootstrap } from "aleph/react"; bootstrap(); diff --git a/examples/react-app/routes/todos.tsx b/examples/react-app/routes/todos.tsx index c43e2b5ed..dcdd2eac0 100644 --- a/examples/react-app/routes/todos.tsx +++ b/examples/react-app/routes/todos.tsx @@ -1,3 +1,5 @@ +/** @format */ + import type { FormEvent } from "react"; import { Head, useData } from "aleph/react"; @@ -14,9 +16,9 @@ const store = { }, }; -export function data() { +export const data = () => { return Response.json(store); -} +}; export async function mutation(req: Request): Promise { const { id, message, completed } = await req.json(); @@ -43,7 +45,11 @@ export async function mutation(req: Request): Promise { } export default function Todos() { - const { data: { todos }, isMutating, mutation } = useData<{ todos: Todo[] }>(); + const { + data: { todos }, + isMutating, + mutation, + } = useData<{ todos: Todo[] }>(); const onSubmit = async (e: FormEvent) => { e.preventDefault(); @@ -51,16 +57,22 @@ export default function Todos() { const fd = new FormData(form); const message = fd.get("message")?.toString().trim(); if (message) { - await mutation.put({ message }, { - // optimistic update data without waiting for the server response - optimisticUpdate: (data) => { - return { - todos: [...data.todos, { id: 0, message, completed: false }], - }; + await mutation.put( + { message }, + { + // optimistic update data without waiting for the server response + optimisticUpdate: (data) => { + return { + todos: [ + ...data.todos, + { id: 0, message, completed: false }, + ], + }; + }, + // replace the data with the new data that is from the server response + replace: true, }, - // replace the data with the new data that is from the server response - replace: true, - }); + ); setTimeout(() => form.querySelector("input")?.focus(), 0); form.reset(); } @@ -70,11 +82,19 @@ export default function Todos() {
Todos - +

Todos - {todos.length > 0 && {todos.filter((todo) => todo.completed).length}/{todos.length}} + {todos.length > 0 && ( + + {todos.filter((todo) => todo.completed).length}/ + {todos.length} + + )}

    {todos.map((todo) => ( @@ -82,13 +102,19 @@ export default function Todos() { mutation.patch({ id: todo.id, completed: !todo.completed }, "replace")} + onChange={() => + mutation.patch( + { id: todo.id, completed: !todo.completed }, + "replace", + )} /> {todo.id > 0 && ( -