Skip to content

Commit df33932

Browse files
jherrjherr
committed
fix: more upgrades to the React core add-ons
1 parent 803eec9 commit df33932

File tree

10 files changed

+260
-75
lines changed

10 files changed

+260
-75
lines changed

‎frameworks/react-cra/add-ons/oRPC/assets/src/routes/demo.orpc-todo.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ function ORPCTodos() {
4444
}}
4545
>
4646
<div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
47-
<h1 className="text-2xl mb-4">Todos list</h1>
47+
<h1 className="text-2xl mb-4">oRPC Todos list</h1>
4848
<ul className="mb-4 space-y-2">
4949
{data?.map((t) => (
5050
<li

‎frameworks/react-cra/add-ons/start/assets/_dot_gitignore.append

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
.output
22
.vinxi
3-
count.txt
3+
todos.json

‎frameworks/react-cra/add-ons/start/assets/src/routes/api.demo-names.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { createServerFileRoute } from '@tanstack/react-start/server'
22

33
export const ServerRoute = createServerFileRoute().methods({
4-
GET: ({ request }) => {
4+
GET: () => {
55
return new Response(JSON.stringify(['Alice', 'Bob', 'Charlie']), {
66
headers: {
77
'Content-Type': 'application/json',

‎frameworks/react-cra/add-ons/start/assets/src/routes/api.demo-tq-todos.ts.ejs

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<% if (!addOnEnabled['tanstack-query']) { ignoreFile() } %>import { createServerFileRoute } from '@tanstack/react-start/server'
2+
3+
const todos = [
4+
{
5+
id: 1,
6+
name: 'Buy groceries',
7+
},
8+
{
9+
id: 2,
10+
name: 'Buy mobile phone',
11+
},
12+
{
13+
id: 3,
14+
name: 'Buy laptop',
15+
},
16+
]
17+
18+
export const ServerRoute = createServerFileRoute('/api/demo-tq-todos').methods({
19+
GET: () => {
20+
return Response.json(todos)
21+
},
22+
POST: async ({ request }) => {
23+
const name = await request.json()
24+
const todo = {
25+
id: todos.length + 1,
26+
name,
27+
}
28+
todos.push(todo)
29+
return Response.json(todo)
30+
},
31+
})

‎frameworks/react-cra/add-ons/start/assets/src/routes/demo.start.api-request.tsx.ejs

Lines changed: 50 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,53 @@
1-
<% if (addOnEnabled['react-query']) { %>
2-
import { useQuery } from '@tanstack/react-query'
1+
<% if (addOnEnabled['tanstack-query']) { %>
2+
import { useQuery } from '@tanstack/react-query'
3+
<% } else { %>
4+
import { useEffect, useState } from 'react'
5+
<% } %>
6+
import { createFileRoute } from '@tanstack/react-router'
7+
8+
function getNames() {
9+
return fetch('/api/demo-names').then((res) => res.json())
10+
}
11+
12+
export const Route = createFileRoute('/demo/start/api-request')({
13+
component: Home,
14+
})
15+
16+
function Home() {
17+
<% if (addOnEnabled['tanstack-query']) { %>
18+
const { data: names = [] } = useQuery({
19+
queryKey: ['names'],
20+
queryFn: getNames,
21+
})
322
<% } else { %>
4-
import { useEffect, useState } from 'react'
23+
const [names, setNames] = useState<Array<string>>([])
24+
25+
useEffect(() => {
26+
getNames().then(setNames)
27+
}, [])
528
<% } %>
6-
import { createFileRoute } from '@tanstack/react-router'
7-
8-
function getNames() {
9-
return fetch('/api/demo-names').then((res) => res.json())
10-
}
11-
12-
export const Route = createFileRoute('/demo/start/api-request')({
13-
component: Home,
14-
})
15-
16-
function Home() {
17-
<% if (addOnEnabled['react-query']) { %>
18-
const { data: names = [] } = useQuery({
19-
queryKey: ['names'],
20-
queryFn: getNames,
21-
})
22-
<% } else { %>
23-
const [names, setNames] = useState<Array<string>>([])
24-
useEffect(() => {
25-
getNames().then(setNames)
26-
}, [])
27-
<% } %>
28-
return (
29-
<div className="p-4">
30-
<div>{names.join(', ')}</div>
29+
return (
30+
<div
31+
className="flex items-center justify-center min-h-screen p-4 text-white"
32+
style={{
33+
backgroundColor: '#000',
34+
backgroundImage:
35+
'radial-gradient(ellipse 60% 60% at 0% 100%, #444 0%, #222 60%, #000 100%)',
36+
}}
37+
>
38+
<div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
39+
<h1 className="text-2xl mb-4">Start API Request Demo - Names List</h1>
40+
<ul className="mb-4 space-y-2">
41+
{names.map((name) => (
42+
<li
43+
key={name}
44+
className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md"
45+
>
46+
<span className="text-lg text-white">{name}</span>
47+
</li>
48+
))}
49+
</ul>
3150
</div>
32-
)
33-
}
51+
</div>
52+
)
53+
}

‎frameworks/react-cra/add-ons/start/assets/src/routes/demo.start.server-funcs.tsx

Lines changed: 74 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,97 @@
1-
import * as fs from 'node:fs'
1+
import fs from 'node:fs'
2+
import { useCallback, useState } from 'react'
23
import { createFileRoute, useRouter } from '@tanstack/react-router'
34
import { createServerFn } from '@tanstack/react-start'
45

5-
const filePath = 'count.txt'
6+
const filePath = 'todos.json'
67

7-
async function readCount() {
8-
return parseInt(
9-
await fs.promises.readFile(filePath, 'utf-8').catch(() => '0'),
8+
async function readTodos() {
9+
return JSON.parse(
10+
await fs.promises.readFile(filePath, 'utf-8').catch(() =>
11+
JSON.stringify(
12+
[
13+
{ id: 1, name: 'Get groceries' },
14+
{ id: 2, name: 'Buy a new phone' },
15+
],
16+
null,
17+
2,
18+
),
19+
),
1020
)
1121
}
1222

13-
const getCount = createServerFn({
23+
const getTodos = createServerFn({
1424
method: 'GET',
15-
}).handler(() => {
16-
return readCount()
17-
})
25+
}).handler(async () => await readTodos())
1826

19-
const updateCount = createServerFn({ method: 'POST' })
20-
.validator((d: number) => d)
27+
const addTodo = createServerFn({ method: 'POST' })
28+
.validator((d: string) => d)
2129
.handler(async ({ data }) => {
22-
const count = await readCount()
23-
await fs.promises.writeFile(filePath, `${count + data}`)
30+
const todos = await readTodos()
31+
todos.push({ id: todos.length + 1, name: data })
32+
await fs.promises.writeFile(filePath, JSON.stringify(todos, null, 2))
33+
return todos
2434
})
2535

2636
export const Route = createFileRoute('/demo/start/server-funcs')({
2737
component: Home,
28-
loader: async () => await getCount(),
38+
loader: async () => await getTodos(),
2939
})
3040

3141
function Home() {
3242
const router = useRouter()
33-
const state = Route.useLoaderData()
43+
let todos = Route.useLoaderData()
44+
45+
const [todo, setTodo] = useState('')
46+
47+
const submitTodo = useCallback(async () => {
48+
todos = await addTodo({ data: todo })
49+
setTodo('')
50+
router.invalidate()
51+
}, [addTodo, todo])
3452

3553
return (
36-
<div className="p-4">
37-
<button
38-
type="button"
39-
onClick={() => {
40-
updateCount({ data: 1 }).then(() => {
41-
router.invalidate()
42-
})
43-
}}
44-
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
45-
>
46-
Add 1 to {state}?
47-
</button>
54+
<div
55+
className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white"
56+
style={{
57+
backgroundImage:
58+
'radial-gradient(50% 50% at 20% 60%, #23272a 0%, #18181b 50%, #000000 100%)',
59+
}}
60+
>
61+
<div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
62+
<h1 className="text-2xl mb-4">Start Server Functions - Todo Example</h1>
63+
<ul className="mb-4 space-y-2">
64+
{todos?.map((t) => (
65+
<li
66+
key={t.id}
67+
className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md"
68+
>
69+
<span className="text-lg text-white">{t.name}</span>
70+
</li>
71+
))}
72+
</ul>
73+
<div className="flex flex-col gap-2">
74+
<input
75+
type="text"
76+
value={todo}
77+
onChange={(e) => setTodo(e.target.value)}
78+
onKeyDown={(e) => {
79+
if (e.key === 'Enter') {
80+
submitTodo()
81+
}
82+
}}
83+
placeholder="Enter a new todo..."
84+
className="w-full px-4 py-3 rounded-lg border border-white/20 bg-white/10 backdrop-blur-sm text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent"
85+
/>
86+
<button
87+
disabled={todo.trim().length === 0}
88+
onClick={submitTodo}
89+
className="bg-blue-500 hover:bg-blue-600 disabled:bg-blue-500/50 disabled:cursor-not-allowed text-white font-bold py-3 px-4 rounded-lg transition-colors"
90+
>
91+
Add todo
92+
</button>
93+
</div>
94+
</div>
4895
</div>
4996
)
5097
}

‎frameworks/react-cra/add-ons/tanstack-query/assets/src/routes/demo.tanstack-query.tsx.ejs

Lines changed: 91 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,89 @@
1-
import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'
1+
<% if (addOnEnabled['start']) {
2+
/** Start todos implementation */
3+
%>import { useCallback, useState } from 'react'
4+
import { createFileRoute } from '@tanstack/react-router'
5+
import { useQuery, useMutation } from '@tanstack/react-query'
6+
7+
export const Route = createFileRoute('/demo/tanstack-query')({
8+
component: TanStackQueryDemo,
9+
})
10+
11+
type Todo = {
12+
id: number
13+
name: string
14+
}
15+
16+
function TanStackQueryDemo() {
17+
const { data, refetch } = useQuery<Todo[]>({
18+
queryKey: ['todos'],
19+
queryFn: () => fetch('/api/demo-tq-todos').then((res) => res.json()),
20+
initialData: [],
21+
})
22+
23+
const { mutate: addTodo } = useMutation({
24+
mutationFn: (todo: string) =>
25+
fetch('/api/demo-tq-todos', {
26+
method: 'POST',
27+
body: JSON.stringify(todo),
28+
}).then((res) => res.json()),
29+
onSuccess: () => refetch(),
30+
})
31+
32+
const [todo, setTodo] = useState('')
33+
34+
const submitTodo = useCallback(async () => {
35+
await addTodo(todo)
36+
setTodo('')
37+
}, [addTodo, todo])
38+
39+
return (
40+
<div
41+
className="flex items-center justify-center min-h-screen bg-gradient-to-br from-red-900 via-red-800 to-black p-4 text-white"
42+
style={{
43+
backgroundImage:
44+
'radial-gradient(50% 50% at 80% 20%, #3B021F 0%, #7B1028 60%, #1A000A 100%)',
45+
}}
46+
>
47+
<div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
48+
<h1 className="text-2xl mb-4">TanStack Query Todos list</h1>
49+
<ul className="mb-4 space-y-2">
50+
{data?.map((t) => (
51+
<li
52+
key={t.id}
53+
className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md"
54+
>
55+
<span className="text-lg text-white">{t.name}</span>
56+
</li>
57+
))}
58+
</ul>
59+
<div className="flex flex-col gap-2">
60+
<input
61+
type="text"
62+
value={todo}
63+
onChange={(e) => setTodo(e.target.value)}
64+
onKeyDown={(e) => {
65+
if (e.key === 'Enter') {
66+
submitTodo()
67+
}
68+
}}
69+
placeholder="Enter a new todo..."
70+
className="w-full px-4 py-3 rounded-lg border border-white/20 bg-white/10 backdrop-blur-sm text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent"
71+
/>
72+
<button
73+
disabled={todo.trim().length === 0}
74+
onClick={submitTodo}
75+
className="bg-blue-500 hover:bg-blue-600 disabled:bg-blue-500/50 disabled:cursor-not-allowed text-white font-bold py-3 px-4 rounded-lg transition-colors"
76+
>
77+
Add todo
78+
</button>
79+
</div>
80+
</div>
81+
</div>
82+
)
83+
}
84+
<% } else {
85+
/** Simple in-memory query implementation */
86+
%>import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'
287
import { useQuery } from '@tanstack/react-query'
388
<% if (codeRouter) { %>
489
import type { RootRoute } from '@tanstack/react-router'
@@ -11,9 +96,9 @@ function TanStackQueryDemo() {
1196
const { data } = useQuery({
1297
queryKey: ['todos'],
1398
queryFn: () => Promise.resolve([
14-
{ id: 1, name: 'Get groceries' },
15-
{ id: 2, name: 'Buy a new phone' },
16-
{ id: 3, name: 'Finish the project' },
99+
{ id: 1, name: 'Alice' },
100+
{ id: 2, name: 'Bob' },
101+
{ id: 3, name: 'Charlie' },
17102
]),
18103
initialData: [],
19104
})
@@ -27,7 +112,7 @@ function TanStackQueryDemo() {
27112
}}
28113
>
29114
<div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
30-
<h1 className="text-2xl mb-4">TanStack Query Todos list</h1>
115+
<h1 className="text-2xl mb-4">TanStack Query Simple Promise Handling</h1>
31116
<ul className="mb-4 space-y-2">
32117
{data.map((todo) => (
33118
<li
@@ -50,3 +135,4 @@ export default (parentRoute: RootRoute) => createRoute({
50135
getParentRoute: () => parentRoute,
51136
})
52137
<% } %>
138+
<% } %>

0 commit comments

Comments
 (0)