Skip to content

Commit 901a9bb

Browse files
Brockthobd8993
Brocktho
and
bd8993
authored
familiarized myself with the repo (#560)
* familiarized myself with the repo * fix format issues, and change data back to function instead for test -A since it failed in CI for some reason... * changed react version * all 113's changed * ahhh lint * deleted markup.ts please pull :( I need unstable flag for my app --------- Co-authored-by: Brocktho <[email protected]>
1 parent 0a7bc9b commit 901a9bb

File tree

15 files changed

+799
-252
lines changed

15 files changed

+799
-252
lines changed

‎deno.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"./types.d.ts"
1111
],
1212
"jsx": "react-jsx",
13-
"jsxImportSource": "https://esm.sh/v113/[email protected]"
13+
"jsxImportSource": "https://esm.sh/v126/[email protected]"
1414
},
1515
"importMap": "./import_map.json",
1616
"fmt": {

‎dev.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import dev from "./server/dev.ts";
22

33
if (import.meta.main) {
4-
dev(Deno.args[0]);
4+
dev(Deno.args);
55
}

‎examples/react-app/main.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
/** @format */
2+
13
import { bootstrap } from "aleph/react";
24

35
bootstrap();

‎examples/react-app/routes/todos.tsx

+42-16
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
/** @format */
2+
13
import type { FormEvent } from "react";
24
import { Head, useData } from "aleph/react";
35

@@ -14,9 +16,9 @@ const store = {
1416
},
1517
};
1618

17-
export function data() {
19+
export const data = () => {
1820
return Response.json(store);
19-
}
21+
};
2022

2123
export async function mutation(req: Request): Promise<Response> {
2224
const { id, message, completed } = await req.json();
@@ -43,24 +45,34 @@ export async function mutation(req: Request): Promise<Response> {
4345
}
4446

4547
export default function Todos() {
46-
const { data: { todos }, isMutating, mutation } = useData<{ todos: Todo[] }>();
48+
const {
49+
data: { todos },
50+
isMutating,
51+
mutation,
52+
} = useData<{ todos: Todo[] }>();
4753

4854
const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
4955
e.preventDefault();
5056
const form = e.currentTarget;
5157
const fd = new FormData(form);
5258
const message = fd.get("message")?.toString().trim();
5359
if (message) {
54-
await mutation.put({ message }, {
55-
// optimistic update data without waiting for the server response
56-
optimisticUpdate: (data) => {
57-
return {
58-
todos: [...data.todos, { id: 0, message, completed: false }],
59-
};
60+
await mutation.put(
61+
{ message },
62+
{
63+
// optimistic update data without waiting for the server response
64+
optimisticUpdate: (data) => {
65+
return {
66+
todos: [
67+
...data.todos,
68+
{ id: 0, message, completed: false },
69+
],
70+
};
71+
},
72+
// replace the data with the new data that is from the server response
73+
replace: true,
6074
},
61-
// replace the data with the new data that is from the server response
62-
replace: true,
63-
});
75+
);
6476
setTimeout(() => form.querySelector("input")?.focus(), 0);
6577
form.reset();
6678
}
@@ -70,25 +82,39 @@ export default function Todos() {
7082
<div className="todos-app">
7183
<Head>
7284
<title>Todos</title>
73-
<meta name="description" content="A todos app powered by Aleph.js" />
85+
<meta
86+
name="description"
87+
content="A todos app powered by Aleph.js"
88+
/>
7489
</Head>
7590
<h1>
7691
<span>Todos</span>
77-
{todos.length > 0 && <em>{todos.filter((todo) => todo.completed).length}/{todos.length}</em>}
92+
{todos.length > 0 && (
93+
<em>
94+
{todos.filter((todo) => todo.completed).length}/
95+
{todos.length}
96+
</em>
97+
)}
7898
</h1>
7999
<ul>
80100
{todos.map((todo) => (
81101
<li key={todo.id}>
82102
<input
83103
type="checkbox"
84104
checked={todo.completed}
85-
onChange={() => mutation.patch({ id: todo.id, completed: !todo.completed }, "replace")}
105+
onChange={() =>
106+
mutation.patch(
107+
{ id: todo.id, completed: !todo.completed },
108+
"replace",
109+
)}
86110
/>
87111
<label className={todo.completed ? "completed" : ""}>
88112
{todo.message}
89113
</label>
90114
{todo.id > 0 && (
91-
<button onClick={() => mutation.delete({ id: todo.id }, "replace")}>
115+
<button
116+
onClick={() => mutation.delete({ id: todo.id }, "replace")}
117+
>
92118
<svg
93119
viewBox="0 0 32 32"
94120
fill="none"

‎examples/react-app/server.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
/** @format */
2+
13
import { serve } from "aleph/server";
24
import react from "aleph/plugins/react";
35
import denoDeploy from "aleph/plugins/deploy";

0 commit comments

Comments
 (0)