@tanstack/create 0.49.3 → 0.60.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (225) hide show
  1. package/CHANGELOG.md +732 -0
  2. package/dist/add-ons.js +42 -2
  3. package/dist/add-to-app.js +36 -7
  4. package/dist/custom-add-ons/add-on.js +2 -26
  5. package/dist/custom-add-ons/starter.js +1 -2
  6. package/dist/file-helpers.js +11 -10
  7. package/dist/frameworks/react/add-ons/ai/info.json +1 -1
  8. package/dist/frameworks/react/add-ons/apollo-client/info.json +1 -1
  9. package/dist/frameworks/react/add-ons/better-auth/info.json +0 -2
  10. package/dist/frameworks/react/add-ons/clerk/info.json +0 -1
  11. package/dist/frameworks/react/add-ons/db/info.json +1 -1
  12. package/dist/frameworks/react/add-ons/drizzle/info.json +1 -1
  13. package/dist/frameworks/react/add-ons/drizzle/package.json.ejs +4 -0
  14. package/dist/frameworks/react/add-ons/mcp/info.json +1 -2
  15. package/dist/frameworks/react/add-ons/neon/assets/neon-vite-plugin.ts +1 -1
  16. package/dist/frameworks/react/add-ons/neon/info.json +1 -2
  17. package/dist/frameworks/react/add-ons/oRPC/info.json +1 -1
  18. package/dist/frameworks/react/add-ons/paraglide/info.json +1 -1
  19. package/dist/frameworks/react/add-ons/prisma/info.json +1 -1
  20. package/dist/frameworks/react/add-ons/prisma/package.json.ejs +4 -0
  21. package/dist/frameworks/react/add-ons/sentry/info.json +1 -2
  22. package/dist/frameworks/react/add-ons/tRPC/info.json +1 -1
  23. package/dist/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs +1 -29
  24. package/dist/frameworks/react/add-ons/workos/info.json +0 -1
  25. package/dist/frameworks/react/hosts/cloudflare/info.json +0 -1
  26. package/dist/frameworks/react/hosts/netlify/info.json +0 -1
  27. package/dist/frameworks/react/hosts/nitro/info.json +0 -1
  28. package/dist/frameworks/react/hosts/railway/info.json +0 -1
  29. package/dist/frameworks/react/index.js +1 -6
  30. package/dist/frameworks/react/project/base/README.md.ejs +86 -436
  31. package/dist/frameworks/react/project/base/_dot_gitignore +4 -0
  32. package/dist/frameworks/react/project/base/package.json +8 -5
  33. package/dist/frameworks/react/project/base/src/components/Header.tsx.ejs +2 -32
  34. package/dist/frameworks/react/project/base/src/routes/__root.tsx.ejs +4 -44
  35. package/dist/frameworks/react/project/base/src/routes/index.tsx.ejs +99 -61
  36. package/dist/frameworks/react/project/base/src/styles.css.ejs +3 -3
  37. package/dist/frameworks/react/project/base/tsconfig.json.ejs +1 -1
  38. package/dist/frameworks/react/project/base/vite.config.ts.ejs +33 -27
  39. package/dist/frameworks/react/project/packages.json +2 -2
  40. package/dist/frameworks/solid/add-ons/better-auth/info.json +1 -1
  41. package/dist/frameworks/solid/hosts/cloudflare/info.json +0 -1
  42. package/dist/frameworks/solid/hosts/netlify/info.json +0 -1
  43. package/dist/frameworks/solid/hosts/nitro/info.json +0 -1
  44. package/dist/frameworks/solid/hosts/railway/info.json +0 -1
  45. package/dist/frameworks/solid/index.js +1 -6
  46. package/dist/frameworks/solid/project/base/README.md.ejs +43 -117
  47. package/dist/frameworks/solid/project/base/_dot_gitignore +4 -0
  48. package/dist/frameworks/solid/project/base/package.json +8 -3
  49. package/dist/frameworks/solid/project/base/src/components/Header.tsx.ejs +2 -25
  50. package/dist/frameworks/solid/project/base/src/routes/__root.tsx.ejs +3 -30
  51. package/dist/frameworks/solid/project/base/src/routes/index.tsx.ejs +97 -35
  52. package/dist/frameworks/solid/project/base/tsconfig.json.ejs +1 -1
  53. package/dist/frameworks/solid/project/base/vite.config.ts.ejs +15 -20
  54. package/dist/frameworks/solid/project/packages.json +2 -2
  55. package/dist/frameworks.js +0 -1
  56. package/dist/package-json.js +6 -10
  57. package/dist/template-file.js +21 -7
  58. package/dist/types/custom-add-ons/add-on.d.ts +1 -1
  59. package/dist/types/file-helpers.d.ts +0 -1
  60. package/dist/types/types.d.ts +12 -12
  61. package/dist/types.js +1 -2
  62. package/package.json +1 -1
  63. package/src/add-ons.ts +54 -2
  64. package/src/add-to-app.ts +42 -7
  65. package/src/custom-add-ons/add-on.ts +2 -33
  66. package/src/custom-add-ons/starter.ts +1 -2
  67. package/src/file-helpers.ts +11 -10
  68. package/src/frameworks/react/add-ons/ai/info.json +1 -1
  69. package/src/frameworks/react/add-ons/apollo-client/info.json +1 -1
  70. package/src/frameworks/react/add-ons/better-auth/info.json +0 -2
  71. package/src/frameworks/react/add-ons/clerk/info.json +0 -1
  72. package/src/frameworks/react/add-ons/db/info.json +1 -1
  73. package/src/frameworks/react/add-ons/drizzle/info.json +1 -1
  74. package/src/frameworks/react/add-ons/drizzle/package.json.ejs +4 -0
  75. package/src/frameworks/react/add-ons/mcp/info.json +1 -2
  76. package/src/frameworks/react/add-ons/neon/assets/neon-vite-plugin.ts +1 -1
  77. package/src/frameworks/react/add-ons/neon/info.json +1 -2
  78. package/src/frameworks/react/add-ons/oRPC/info.json +1 -1
  79. package/src/frameworks/react/add-ons/paraglide/info.json +1 -1
  80. package/src/frameworks/react/add-ons/prisma/info.json +1 -1
  81. package/src/frameworks/react/add-ons/prisma/package.json.ejs +4 -0
  82. package/src/frameworks/react/add-ons/sentry/info.json +1 -2
  83. package/src/frameworks/react/add-ons/tRPC/info.json +1 -1
  84. package/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs +1 -29
  85. package/src/frameworks/react/add-ons/workos/info.json +0 -1
  86. package/src/frameworks/react/hosts/cloudflare/info.json +0 -1
  87. package/src/frameworks/react/hosts/netlify/info.json +0 -1
  88. package/src/frameworks/react/hosts/nitro/info.json +0 -1
  89. package/src/frameworks/react/hosts/railway/info.json +0 -1
  90. package/src/frameworks/react/index.ts +1 -6
  91. package/src/frameworks/react/project/base/README.md.ejs +86 -436
  92. package/src/frameworks/react/project/base/_dot_gitignore +4 -0
  93. package/src/frameworks/react/project/base/package.json +8 -5
  94. package/src/frameworks/react/project/base/src/components/Header.tsx.ejs +2 -32
  95. package/src/frameworks/react/project/base/src/routes/__root.tsx.ejs +4 -44
  96. package/src/frameworks/react/project/base/src/routes/index.tsx.ejs +99 -61
  97. package/src/frameworks/react/project/base/src/styles.css.ejs +3 -3
  98. package/src/frameworks/react/project/base/tsconfig.json.ejs +1 -1
  99. package/src/frameworks/react/project/base/vite.config.ts.ejs +33 -27
  100. package/src/frameworks/react/project/packages.json +2 -2
  101. package/src/frameworks/solid/add-ons/better-auth/info.json +1 -1
  102. package/src/frameworks/solid/hosts/cloudflare/info.json +0 -1
  103. package/src/frameworks/solid/hosts/netlify/info.json +0 -1
  104. package/src/frameworks/solid/hosts/nitro/info.json +0 -1
  105. package/src/frameworks/solid/hosts/railway/info.json +0 -1
  106. package/src/frameworks/solid/index.ts +1 -6
  107. package/src/frameworks/solid/project/base/README.md.ejs +43 -117
  108. package/src/frameworks/solid/project/base/_dot_gitignore +4 -0
  109. package/src/frameworks/solid/project/base/package.json +8 -3
  110. package/src/frameworks/solid/project/base/src/components/Header.tsx.ejs +2 -25
  111. package/src/frameworks/solid/project/base/src/routes/__root.tsx.ejs +3 -30
  112. package/src/frameworks/solid/project/base/src/routes/index.tsx.ejs +97 -35
  113. package/src/frameworks/solid/project/base/tsconfig.json.ejs +1 -1
  114. package/src/frameworks/solid/project/base/vite.config.ts.ejs +15 -20
  115. package/src/frameworks/solid/project/packages.json +2 -2
  116. package/src/frameworks.ts +0 -1
  117. package/src/package-json.ts +6 -10
  118. package/src/template-file.ts +27 -8
  119. package/src/types.ts +1 -2
  120. package/tests/add-to-app.test.ts +37 -0
  121. package/tests/file-helper.test.ts +23 -2
  122. package/tests/package-json.test.ts +32 -0
  123. package/tests/template-file.test.ts +28 -0
  124. package/dist/frameworks/react/add-ons/module-federation/assets/module-federation.config.js.ejs +0 -31
  125. package/dist/frameworks/react/add-ons/module-federation/assets/src/demo-mf-component.tsx +0 -3
  126. package/dist/frameworks/react/add-ons/module-federation/assets/src/demo-mf-self-contained.tsx +0 -11
  127. package/dist/frameworks/react/add-ons/module-federation/info.json +0 -11
  128. package/dist/frameworks/react/add-ons/module-federation/package.json +0 -5
  129. package/dist/frameworks/react/add-ons/module-federation/small-logo.svg +0 -87
  130. package/dist/frameworks/react/add-ons/start/assets/_dot_gitignore.append +0 -3
  131. package/dist/frameworks/react/add-ons/start/assets/src/data/demo.punk-songs.ts +0 -13
  132. package/dist/frameworks/react/add-ons/start/assets/src/router.tsx.ejs +0 -77
  133. package/dist/frameworks/react/add-ons/start/assets/src/routes/demo/api.names.ts +0 -10
  134. package/dist/frameworks/react/add-ons/start/assets/src/routes/demo/api.tq-todos.ts.ejs +0 -35
  135. package/dist/frameworks/react/add-ons/start/assets/src/routes/demo/start.api-request.tsx.ejs +0 -68
  136. package/dist/frameworks/react/add-ons/start/assets/src/routes/demo/start.css.ejs +0 -43
  137. package/dist/frameworks/react/add-ons/start/assets/src/routes/demo/start.server-funcs.tsx.ejs +0 -183
  138. package/dist/frameworks/react/add-ons/start/assets/src/routes/demo/start.ssr.data-only.tsx.ejs +0 -55
  139. package/dist/frameworks/react/add-ons/start/assets/src/routes/demo/start.ssr.full-ssr.tsx.ejs +0 -55
  140. package/dist/frameworks/react/add-ons/start/assets/src/routes/demo/start.ssr.index.tsx.ejs +0 -62
  141. package/dist/frameworks/react/add-ons/start/assets/src/routes/demo/start.ssr.spa-mode.tsx.ejs +0 -62
  142. package/dist/frameworks/react/add-ons/start/assets/src/routes/index.tsx.ejs +0 -142
  143. package/dist/frameworks/react/add-ons/start/assets/src/server.ts.ejs +0 -9
  144. package/dist/frameworks/react/add-ons/start/assets/vite.config.ts.ejs +0 -40
  145. package/dist/frameworks/react/add-ons/start/info.json +0 -61
  146. package/dist/frameworks/react/add-ons/start/package.json +0 -12
  147. package/dist/frameworks/react/add-ons/start/small-logo.svg +0 -1
  148. package/dist/frameworks/react/project/base/index.html.ejs +0 -20
  149. package/dist/frameworks/react/project/base/src/App.css.ejs +0 -38
  150. package/dist/frameworks/react/project/base/src/App.tsx.ejs +0 -63
  151. package/dist/frameworks/react/project/base/src/components/Header.css.ejs +0 -18
  152. package/dist/frameworks/react/project/base/src/logo.svg +0 -12
  153. package/dist/frameworks/react/project/base/src/main.tsx.ejs +0 -166
  154. package/dist/frameworks/react/project/base/src/reportWebVitals.ts.ejs +0 -28
  155. package/dist/frameworks/solid/add-ons/module-federation/assets/module-federation.config.js.ejs +0 -27
  156. package/dist/frameworks/solid/add-ons/module-federation/assets/src/demo-mf-component.tsx +0 -3
  157. package/dist/frameworks/solid/add-ons/module-federation/assets/src/demo-mf-self-contained.tsx +0 -9
  158. package/dist/frameworks/solid/add-ons/module-federation/info.json +0 -10
  159. package/dist/frameworks/solid/add-ons/module-federation/package.json +0 -5
  160. package/dist/frameworks/solid/add-ons/module-federation/small-logo.svg +0 -87
  161. package/dist/frameworks/solid/add-ons/start/assets/public/tanstack-circle-logo.png +0 -0
  162. package/dist/frameworks/solid/add-ons/start/assets/public/tanstack-word-logo-white.svg +0 -1
  163. package/dist/frameworks/solid/add-ons/start/assets/src/router.tsx.ejs +0 -30
  164. package/dist/frameworks/solid/add-ons/start/assets/src/routes/demo.start.server-funcs.tsx +0 -49
  165. package/dist/frameworks/solid/add-ons/start/assets/src/routes/index.tsx.ejs +0 -138
  166. package/dist/frameworks/solid/add-ons/start/assets/vite.config.ts.ejs +0 -22
  167. package/dist/frameworks/solid/add-ons/start/info.json +0 -18
  168. package/dist/frameworks/solid/add-ons/start/package.json +0 -15
  169. package/dist/frameworks/solid/add-ons/start/small-logo.svg +0 -1
  170. package/dist/frameworks/solid/project/base/index.html.ejs +0 -20
  171. package/dist/frameworks/solid/project/base/src/App.css.ejs +0 -38
  172. package/dist/frameworks/solid/project/base/src/App.tsx.ejs +0 -34
  173. package/dist/frameworks/solid/project/base/src/logo.svg +0 -120
  174. package/dist/frameworks/solid/project/base/src/main.tsx.ejs +0 -126
  175. package/src/frameworks/react/add-ons/module-federation/assets/module-federation.config.js.ejs +0 -31
  176. package/src/frameworks/react/add-ons/module-federation/assets/src/demo-mf-component.tsx +0 -3
  177. package/src/frameworks/react/add-ons/module-federation/assets/src/demo-mf-self-contained.tsx +0 -11
  178. package/src/frameworks/react/add-ons/module-federation/info.json +0 -11
  179. package/src/frameworks/react/add-ons/module-federation/package.json +0 -5
  180. package/src/frameworks/react/add-ons/module-federation/small-logo.svg +0 -87
  181. package/src/frameworks/react/add-ons/start/assets/_dot_gitignore.append +0 -3
  182. package/src/frameworks/react/add-ons/start/assets/src/data/demo.punk-songs.ts +0 -13
  183. package/src/frameworks/react/add-ons/start/assets/src/router.tsx.ejs +0 -77
  184. package/src/frameworks/react/add-ons/start/assets/src/routes/demo/api.names.ts +0 -10
  185. package/src/frameworks/react/add-ons/start/assets/src/routes/demo/api.tq-todos.ts.ejs +0 -35
  186. package/src/frameworks/react/add-ons/start/assets/src/routes/demo/start.api-request.tsx.ejs +0 -68
  187. package/src/frameworks/react/add-ons/start/assets/src/routes/demo/start.css.ejs +0 -43
  188. package/src/frameworks/react/add-ons/start/assets/src/routes/demo/start.server-funcs.tsx.ejs +0 -183
  189. package/src/frameworks/react/add-ons/start/assets/src/routes/demo/start.ssr.data-only.tsx.ejs +0 -55
  190. package/src/frameworks/react/add-ons/start/assets/src/routes/demo/start.ssr.full-ssr.tsx.ejs +0 -55
  191. package/src/frameworks/react/add-ons/start/assets/src/routes/demo/start.ssr.index.tsx.ejs +0 -62
  192. package/src/frameworks/react/add-ons/start/assets/src/routes/demo/start.ssr.spa-mode.tsx.ejs +0 -62
  193. package/src/frameworks/react/add-ons/start/assets/src/routes/index.tsx.ejs +0 -142
  194. package/src/frameworks/react/add-ons/start/assets/src/server.ts.ejs +0 -9
  195. package/src/frameworks/react/add-ons/start/assets/vite.config.ts.ejs +0 -40
  196. package/src/frameworks/react/add-ons/start/info.json +0 -61
  197. package/src/frameworks/react/add-ons/start/package.json +0 -12
  198. package/src/frameworks/react/add-ons/start/small-logo.svg +0 -1
  199. package/src/frameworks/react/project/base/index.html.ejs +0 -20
  200. package/src/frameworks/react/project/base/src/App.css.ejs +0 -38
  201. package/src/frameworks/react/project/base/src/App.tsx.ejs +0 -63
  202. package/src/frameworks/react/project/base/src/components/Header.css.ejs +0 -18
  203. package/src/frameworks/react/project/base/src/logo.svg +0 -12
  204. package/src/frameworks/react/project/base/src/main.tsx.ejs +0 -166
  205. package/src/frameworks/react/project/base/src/reportWebVitals.ts.ejs +0 -28
  206. package/src/frameworks/solid/add-ons/module-federation/assets/module-federation.config.js.ejs +0 -27
  207. package/src/frameworks/solid/add-ons/module-federation/assets/src/demo-mf-component.tsx +0 -3
  208. package/src/frameworks/solid/add-ons/module-federation/assets/src/demo-mf-self-contained.tsx +0 -9
  209. package/src/frameworks/solid/add-ons/module-federation/info.json +0 -10
  210. package/src/frameworks/solid/add-ons/module-federation/package.json +0 -5
  211. package/src/frameworks/solid/add-ons/module-federation/small-logo.svg +0 -87
  212. package/src/frameworks/solid/add-ons/start/assets/public/tanstack-circle-logo.png +0 -0
  213. package/src/frameworks/solid/add-ons/start/assets/public/tanstack-word-logo-white.svg +0 -1
  214. package/src/frameworks/solid/add-ons/start/assets/src/router.tsx.ejs +0 -30
  215. package/src/frameworks/solid/add-ons/start/assets/src/routes/demo.start.server-funcs.tsx +0 -49
  216. package/src/frameworks/solid/add-ons/start/assets/src/routes/index.tsx.ejs +0 -138
  217. package/src/frameworks/solid/add-ons/start/assets/vite.config.ts.ejs +0 -22
  218. package/src/frameworks/solid/add-ons/start/info.json +0 -18
  219. package/src/frameworks/solid/add-ons/start/package.json +0 -15
  220. package/src/frameworks/solid/add-ons/start/small-logo.svg +0 -1
  221. package/src/frameworks/solid/project/base/index.html.ejs +0 -20
  222. package/src/frameworks/solid/project/base/src/App.css.ejs +0 -38
  223. package/src/frameworks/solid/project/base/src/App.tsx.ejs +0 -34
  224. package/src/frameworks/solid/project/base/src/logo.svg +0 -120
  225. package/src/frameworks/solid/project/base/src/main.tsx.ejs +0 -126
@@ -1,183 +0,0 @@
1
- <% if (addOnEnabled.cloudflare) { %>import { useState } from "react";
2
- import { createFileRoute } from "@tanstack/react-router";
3
- import { createServerFn } from "@tanstack/react-start";
4
-
5
- const getCurrentServerTime = createServerFn({
6
- method: "GET",
7
- }).handler(async () => await new Date().toISOString());
8
-
9
- export const Route = createFileRoute("/demo/start/server-funcs")({
10
- component: Home,
11
- loader: async () => await getCurrentServerTime(),
12
- });
13
-
14
- function Home() {
15
- const originalTime = Route.useLoaderData();
16
- const [time, setTime] = useState(originalTime);
17
-
18
- return (
19
- <div
20
- className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white"
21
- style={{
22
- backgroundImage:
23
- "radial-gradient(50% 50% at 20% 60%, #23272a 0%, #18181b 50%, #000000 100%)",
24
- }}
25
- >
26
- <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
27
- <h1 className="text-2xl mb-4">Start Server Functions - Server Time</h1>
28
- <div className="flex flex-col gap-2">
29
- <div className="text-xl">Starting Time: {originalTime}</div>
30
- <div className="text-xl">Current Time: {time}</div>
31
- <button
32
- 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"
33
- onClick={async () => setTime(await getCurrentServerTime())}
34
- >
35
- Refresh
36
- </button>
37
- </div>
38
- </div>
39
- </div>
40
- );
41
- }
42
- <% } else { %>import fs from 'node:fs'
43
- import { useCallback, useState } from 'react'
44
- import { createFileRoute, useRouter } from '@tanstack/react-router'
45
- import { createServerFn } from '@tanstack/react-start'<% if (!tailwind) { %>
46
- import './start.css'
47
- <% } %>
48
-
49
- /*
50
- const loggingMiddleware = createMiddleware().server(
51
- async ({ next, request }) => {
52
- console.log("Request:", request.url);
53
- return next();
54
- }
55
- );
56
- const loggedServerFunction = createServerFn({ method: "GET" }).middleware([
57
- loggingMiddleware,
58
- ]);
59
- */
60
-
61
- const TODOS_FILE = 'todos.json'
62
-
63
- async function readTodos() {
64
- return JSON.parse(
65
- await fs.promises.readFile(TODOS_FILE, 'utf-8').catch(() =>
66
- JSON.stringify(
67
- [
68
- { id: 1, name: 'Get groceries' },
69
- { id: 2, name: 'Buy a new phone' },
70
- ],
71
- null,
72
- 2,
73
- ),
74
- ),
75
- )
76
- }
77
-
78
- const getTodos = createServerFn({
79
- method: 'GET',
80
- }).handler(async () => await readTodos())
81
-
82
- const addTodo = createServerFn({ method: 'POST' })
83
- .inputValidator((d: string) => d)
84
- .handler(async ({ data }) => {
85
- const todos = await readTodos()
86
- todos.push({ id: todos.length + 1, name: data })
87
- await fs.promises.writeFile(TODOS_FILE, JSON.stringify(todos, null, 2))
88
- return todos
89
- })
90
-
91
- export const Route = createFileRoute('/demo/start/server-funcs')({
92
- component: Home,
93
- loader: async () => await getTodos(),
94
- })
95
-
96
- function Home() {
97
- const router = useRouter()
98
- let todos = Route.useLoaderData()
99
-
100
- const [todo, setTodo] = useState('')
101
-
102
- const submitTodo = useCallback(async () => {
103
- todos = await addTodo({ data: todo })
104
- setTodo('')
105
- router.invalidate()
106
- }, [addTodo, todo])
107
-
108
- return (
109
- <% if (tailwind) { %>
110
- <div
111
- className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white"
112
- style={{
113
- backgroundImage:
114
- 'radial-gradient(50% 50% at 20% 60%, #23272a 0%, #18181b 50%, #000000 100%)',
115
- }}
116
- >
117
- <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
118
- <h1 className="text-2xl mb-4">Start Server Functions - Todo Example</h1>
119
- <ul className="mb-4 space-y-2">
120
- {todos?.map((t) => (
121
- <li
122
- key={t.id}
123
- className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md"
124
- >
125
- <span className="text-lg text-white">{t.name}</span>
126
- </li>
127
- ))}
128
- </ul>
129
- <div className="flex flex-col gap-2">
130
- <input
131
- type="text"
132
- value={todo}
133
- onChange={(e) => setTodo(e.target.value)}
134
- onKeyDown={(e) => {
135
- if (e.key === 'Enter') {
136
- submitTodo()
137
- }
138
- }}
139
- placeholder="Enter a new todo..."
140
- 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"
141
- />
142
- <button
143
- disabled={todo.trim().length === 0}
144
- onClick={submitTodo}
145
- 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"
146
- >
147
- Add todo
148
- </button>
149
- </div>
150
- </div>
151
- </div>
152
- <% } else { %>
153
- <div>
154
- <h1>Start Server Functions - Todo Example</h1>
155
- <ul>
156
- {todos?.map((t) => (
157
- <li key={t.id}>{t.name}</li>
158
- ))}
159
- </ul>
160
- <div className="flex flex-col gap-2">
161
- <input
162
- type="text"
163
- value={todo}
164
- onChange={(e) => setTodo(e.target.value)}
165
- onKeyDown={(e) => {
166
- if (e.key === 'Enter') {
167
- submitTodo()
168
- }
169
- }}
170
- placeholder="Enter a new todo..."
171
- />
172
- <button
173
- disabled={todo.trim().length === 0}
174
- onClick={submitTodo}
175
- >
176
- Add todo
177
- </button>
178
- </div>
179
- </div>
180
- <% } %>
181
- )
182
- }
183
- <% } %>
@@ -1,55 +0,0 @@
1
- import { createFileRoute } from "@tanstack/react-router";
2
- import { getPunkSongs } from "@/data/demo.punk-songs";
3
-
4
- export const Route = createFileRoute("/demo/start/ssr/data-only")({
5
- ssr: "data-only",
6
- component: RouteComponent,
7
- loader: async () => await getPunkSongs(),
8
- });
9
-
10
- function RouteComponent() {
11
- const punkSongs = Route.useLoaderData();
12
- <% if (tailwind) { %>
13
- return (
14
- <div
15
- className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white"
16
- style={{
17
- backgroundImage:
18
- "radial-gradient(50% 50% at 20% 60%, #1a1a1a 0%, #0a0a0a 50%, #000000 100%)",
19
- }}
20
- >
21
- <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
22
- <h1 className="text-3xl font-bold mb-6 text-pink-400">
23
- Data Only SSR - Punk Songs
24
- </h1>
25
- <ul className="space-y-3">
26
- {punkSongs.map((song) => (
27
- <li
28
- key={song.id}
29
- className="bg-white/10 border border-white/20 rounded-lg p-4 backdrop-blur-sm shadow-md"
30
- >
31
- <span className="text-lg text-white font-medium">
32
- {song.name}
33
- </span>
34
- <span className="text-white/60"> - {song.artist}</span>
35
- </li>
36
- ))}
37
- </ul>
38
- </div>
39
- </div>
40
- );
41
- <% } else { %>
42
- return (
43
- <div>
44
- <h1>Data Only SSR - Punk Songs</h1>
45
- <ul>
46
- {punkSongs.map((song) => (
47
- <li key={song.id}>
48
- {song.name} - {song.artist}
49
- </li>
50
- ))}
51
- </ul>
52
- </div>
53
- );
54
- <% } %>
55
- }
@@ -1,55 +0,0 @@
1
- import { createFileRoute } from "@tanstack/react-router";
2
- import { getPunkSongs } from "@/data/demo.punk-songs";
3
-
4
- export const Route = createFileRoute("/demo/start/ssr/full-ssr")({
5
- component: RouteComponent,
6
- loader: async () => await getPunkSongs(),
7
- });
8
-
9
- function RouteComponent() {
10
- const punkSongs = Route.useLoaderData();
11
-
12
- <% if (tailwind) { %>
13
- return (
14
- <div
15
- className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white"
16
- style={{
17
- backgroundImage:
18
- "radial-gradient(50% 50% at 20% 60%, #1a1a1a 0%, #0a0a0a 50%, #000000 100%)",
19
- }}
20
- >
21
- <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
22
- <h1 className="text-3xl font-bold mb-6 text-purple-400">
23
- Full SSR - Punk Songs
24
- </h1>
25
- <ul className="space-y-3">
26
- {punkSongs.map((song) => (
27
- <li
28
- key={song.id}
29
- className="bg-white/10 border border-white/20 rounded-lg p-4 backdrop-blur-sm shadow-md"
30
- >
31
- <span className="text-lg text-white font-medium">
32
- {song.name}
33
- </span>
34
- <span className="text-white/60"> - {song.artist}</span>
35
- </li>
36
- ))}
37
- </ul>
38
- </div>
39
- </div>
40
- );
41
- <% } else { %>
42
- return (
43
- <div>
44
- <h1>Full SSR - Punk Songs</h1>
45
- <ul>
46
- {punkSongs.map((song) => (
47
- <li key={song.id}>
48
- {song.name} - {song.artist}
49
- </li>
50
- ))}
51
- </ul>
52
- </div>
53
- );
54
- <% } %>
55
- }
@@ -1,62 +0,0 @@
1
- import { createFileRoute, Link } from "@tanstack/react-router";
2
-
3
- export const Route = createFileRoute("/demo/start/ssr/")({
4
- component: RouteComponent,
5
- });
6
-
7
- function RouteComponent() {
8
- <% if (tailwind) { %>
9
- return (
10
- <div
11
- className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-900 to-black p-4 text-white"
12
- style={{
13
- backgroundImage:
14
- "radial-gradient(50% 50% at 20% 60%, #1a1a1a 0%, #0a0a0a 50%, #000000 100%)",
15
- }}
16
- >
17
- <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
18
- <h1 className="text-4xl font-bold mb-8 text-center bg-gradient-to-r from-pink-500 via-purple-500 to-green-400 bg-clip-text text-transparent">
19
- SSR Demos
20
- </h1>
21
- <div className="flex flex-col gap-4">
22
- <Link
23
- to="/demo/start/ssr/spa-mode"
24
- className="text-2xl font-bold py-6 px-8 rounded-lg bg-gradient-to-r from-pink-600 to-pink-500 hover:from-pink-700 hover:to-pink-600 text-white text-center shadow-lg transform transition-all hover:scale-105 hover:shadow-pink-500/50 border-2 border-pink-400"
25
- >
26
- SPA Mode
27
- </Link>
28
- <Link
29
- to="/demo/start/ssr/full-ssr"
30
- className="text-2xl font-bold py-6 px-8 rounded-lg bg-gradient-to-r from-purple-600 to-purple-500 hover:from-purple-700 hover:to-purple-600 text-white text-center shadow-lg transform transition-all hover:scale-105 hover:shadow-purple-500/50 border-2 border-purple-400"
31
- >
32
- Full SSR
33
- </Link>
34
- <Link
35
- to="/demo/start/ssr/data-only"
36
- className="text-2xl font-bold py-6 px-8 rounded-lg bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white text-center shadow-lg transform transition-all hover:scale-105 hover:shadow-green-500/50 border-2 border-green-400"
37
- >
38
- Data Only
39
- </Link>
40
- </div>
41
- </div>
42
- </div>
43
- );
44
- <% } else { %>
45
- return (
46
- <div>
47
- <h1>SSR Demos</h1>
48
- <ul>
49
- <li>
50
- <Link to="/demo/start/ssr/spa-mode">SPA Mode</Link>
51
- </li>
52
- <li>
53
- <Link to="/demo/start/ssr/full-ssr">Full SSR</Link>
54
- </li>
55
- <li>
56
- <Link to="/demo/start/ssr/data-only">Data Only</Link>
57
- </li>
58
- </ul>
59
- </div>
60
- );
61
- <% } %>
62
- }
@@ -1,62 +0,0 @@
1
- import { useEffect, useState } from "react";
2
- import { createFileRoute } from "@tanstack/react-router";
3
- import { getPunkSongs } from "@/data/demo.punk-songs";
4
-
5
- export const Route = createFileRoute("/demo/start/ssr/spa-mode")({
6
- ssr: false,
7
- component: RouteComponent,
8
- });
9
-
10
- function RouteComponent() {
11
- const [punkSongs, setPunkSongs] = useState<
12
- Awaited<ReturnType<typeof getPunkSongs>>
13
- >([]);
14
-
15
- useEffect(() => {
16
- getPunkSongs().then(setPunkSongs);
17
- }, []);
18
-
19
- <% if (tailwind) { %>
20
- return (
21
- <div
22
- className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white"
23
- style={{
24
- backgroundImage:
25
- "radial-gradient(50% 50% at 20% 60%, #1a1a1a 0%, #0a0a0a 50%, #000000 100%)",
26
- }}
27
- >
28
- <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
29
- <h1 className="text-3xl font-bold mb-6 text-green-400">
30
- SPA Mode - Punk Songs
31
- </h1>
32
- <ul className="space-y-3">
33
- {punkSongs.map((song) => (
34
- <li
35
- key={song.id}
36
- className="bg-white/10 border border-white/20 rounded-lg p-4 backdrop-blur-sm shadow-md"
37
- >
38
- <span className="text-lg text-white font-medium">
39
- {song.name}
40
- </span>
41
- <span className="text-white/60"> - {song.artist}</span>
42
- </li>
43
- ))}
44
- </ul>
45
- </div>
46
- </div>
47
- );
48
- <% } else { %>
49
- return (
50
- <div>
51
- <h1>SPA Mode - Punk Songs</h1>
52
- <ul>
53
- {punkSongs.map((song) => (
54
- <li key={song.id}>
55
- {song.name} - {song.artist}
56
- </li>
57
- ))}
58
- </ul>
59
- </div>
60
- );
61
- <% } %>
62
- }
@@ -1,142 +0,0 @@
1
- import { createFileRoute } from "@tanstack/react-router"; <% if (!tailwind) { %>
2
- import "../App.css"
3
- <% } else { %>
4
- import {
5
- Zap, Server, Route as RouteIcon, Shield, Waves, Sparkles, } from "lucide-react";
6
- <% } %>
7
-
8
- export const Route = createFileRoute("/")({ component: App, });
9
-
10
- function App() { <% if (tailwind) { %>
11
- const features = [
12
- {
13
- icon: <Zap className="w-12 h-12 text-cyan-400" />,
14
- title: "Powerful Server Functions",
15
- description: "Write server-side code that seamlessly integrates with your client components. Type-safe, secure, and simple.",
16
- },
17
- {
18
- icon: <Server className="w-12 h-12 text-cyan-400" />,
19
- title: "Flexible Server Side Rendering",
20
- description: "Full-document SSR, streaming, and progressive enhancement out of the box. Control exactly what renders where.",
21
- },
22
- {
23
- icon: <RouteIcon className="w-12 h-12 text-cyan-400" />,
24
- title: "API Routes",
25
- description: "Build type-safe API endpoints alongside your application. No separate backend needed.",
26
- },
27
- {
28
- icon: <Shield className="w-12 h-12 text-cyan-400" />,
29
- title: "Strongly Typed Everything",
30
- description: "End-to-end type safety from server to client. Catch errors before they reach production.",
31
- },
32
- {
33
- icon: <Waves className="w-12 h-12 text-cyan-400" />,
34
- title: "Full Streaming Support",
35
- description: "Stream data from server to client progressively. Perfect for AI applications and real-time updates.",
36
- },
37
- {
38
- icon: <Sparkles className="w-12 h-12 text-cyan-400" />,
39
- title: "Next Generation Ready",
40
- description: "Built from the ground up for modern web applications. Deploy anywhere JavaScript runs.",
41
- },
42
- ];
43
-
44
- return (
45
- <div
46
- className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900"
47
- >
48
- <section className="relative py-20 px-6 text-center overflow-hidden">
49
- <div
50
- className="absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10"
51
- ></div>
52
- <div className="relative max-w-5xl mx-auto">
53
- <div className="flex items-center justify-center gap-6 mb-6">
54
- <img
55
- src="/tanstack-circle-logo.png"
56
- alt="TanStack Logo"
57
- className="w-24 h-24 md:w-32 md:h-32"
58
- />
59
- <h1
60
- className="text-6xl md:text-7xl font-black text-white [letter-spacing:-0.08em]"
61
- >
62
- <span className="text-gray-300">TANSTACK</span>{" "}
63
- <span
64
- className="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent"
65
- >
66
- START
67
- </span>
68
- </h1>
69
- </div>
70
- <p className="text-2xl md:text-3xl text-gray-300 mb-4 font-light">
71
- The framework for next generation AI applications
72
- </p>
73
- <p className="text-lg text-gray-400 max-w-3xl mx-auto mb-8">
74
- Full-stack framework powered by TanStack Router for React and Solid.
75
- Build modern applications with server functions, streaming, and type
76
- safety.
77
- </p>
78
- <div className="flex flex-col items-center gap-4">
79
- <a
80
- href="https://tanstack.com/start"
81
- target="_blank"
82
- rel="noopener noreferrer"
83
- className="px-8 py-3 bg-cyan-500 hover:bg-cyan-600 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-cyan-500/50"
84
- >
85
- Documentation
86
- </a>
87
- <p className="text-gray-400 text-sm mt-2">
88
- Begin your TanStack Start journey by editing{" "}
89
- <code className="px-2 py-1 bg-slate-700 rounded text-cyan-400">
90
- /src/routes/index.tsx
91
- </code>
92
- </p>
93
- </div>
94
- </div>
95
- </section>
96
-
97
- <section className="py-16 px-6 max-w-7xl mx-auto">
98
- <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
99
- {features.map((feature, index) => (
100
- <div
101
- key={index}
102
- className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-6 hover:border-cyan-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/10"
103
- >
104
- <div className="mb-4">{feature.icon}</div>
105
- <h3 className="text-xl font-semibold text-white mb-3">
106
- {feature.title}
107
- </h3>
108
- <p className="text-gray-400 leading-relaxed">{feature.description}</p>
109
- </div>
110
- ))}
111
- </div>
112
- </section>
113
- </div>
114
- ); <% } else { %> return (
115
- <div className="App">
116
- <header className="App-header">
117
- <img
118
- src="/tanstack-circle-logo.png"
119
- className="App-logo" alt="TanStack Logo"
120
- />
121
- <p>Edit <code>src/routes/index.tsx</code> and save to reload.</p>
122
- <a
123
- className="App-link"
124
- href="https://reactjs.org"
125
- target="_blank"
126
- rel="noopener noreferrer"
127
- >
128
- Learn React
129
- </a>
130
- <a
131
- className="App-link"
132
- href="https://tanstack.com"
133
- target="_blank"
134
- rel="noopener noreferrer"
135
- >
136
- Learn TanStack
137
- </a>
138
- </header>
139
- </div>
140
- );
141
- <% } %>
142
- }
@@ -1,9 +0,0 @@
1
- <% if (!addOnEnabled.paraglide) { ignoreFile() } %>import { paraglideMiddleware } from './paraglide/server'
2
- import handler from '@tanstack/react-start/server-entry'
3
-
4
- // Server-side URL localization/redirects for Paraglide
5
- export default {
6
- fetch(req: Request): Promise<Response> {
7
- return paraglideMiddleware(req, () => handler.fetch(req))
8
- },
9
- }
@@ -1,40 +0,0 @@
1
- import { defineConfig } from 'vite'
2
- import { devtools } from '@tanstack/devtools-vite'
3
- <% if (addOnEnabled.paraglide) { -%>
4
- import { paraglideVitePlugin } from "@inlang/paraglide-js"
5
- <% } -%>
6
- import { tanstackStart } from '@tanstack/react-start/plugin/vite';
7
- import viteReact from '@vitejs/plugin-react'
8
- import viteTsConfigPaths from 'vite-tsconfig-paths'
9
- import { fileURLToPath, URL } from 'url'
10
- <% if (tailwind) { %>
11
- import tailwindcss from "@tailwindcss/vite"
12
- <% } %><% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportContent(integration) %>
13
- <% } %>
14
-
15
- const config = defineConfig({
16
- resolve: {
17
- alias: {
18
- '@': fileURLToPath(new URL('./src', import.meta.url)),
19
- },
20
- },
21
- plugins: [devtools(), <% if (addOnEnabled.paraglide) { %>paraglideVitePlugin({
22
- project: './project.inlang',
23
- outdir: './src/paraglide',
24
- strategy: ['url'],
25
- }), <% } %><% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportCode(integration) %>,<% } %>
26
- // this is the plugin that enables path aliases
27
- viteTsConfigPaths({
28
- projects: ['./tsconfig.json'],
29
- }),
30
- <% if (tailwind) { %>tailwindcss(),<% } %>
31
- tanstackStart(),
32
- viteReact(<% if (addOnEnabled.compiler) { %>{
33
- babel: {
34
- plugins: ["babel-plugin-react-compiler"],
35
- },
36
- }<% } %>),
37
- ],
38
- })
39
-
40
- export default config
@@ -1,61 +0,0 @@
1
- {
2
- "name": "Start",
3
- "phase": "setup",
4
- "description": "Add TanStack Start for SSR, API endpoints, and more.",
5
- "link": "https://tanstack.com/start/latest",
6
- "modes": ["file-router"],
7
- "type": "add-on",
8
- "category": "tanstack",
9
- "color": "#14B8A6",
10
- "tailwind": false,
11
- "priority": 26,
12
- "warning": "TanStack Start is not yet at 1.0 and may change significantly or not be compatible with other add-ons.\nMigrating to Start might require deleting node_modules and re-installing.",
13
- "routes": [
14
- {
15
- "icon": "SquareFunction",
16
- "url": "/demo/start/server-funcs",
17
- "name": "Start - Server Functions",
18
- "path": "src/routes/demo.start.server-funcs.tsx",
19
- "jsName": "StartServerFuncsDemo"
20
- },
21
- {
22
- "icon": "Network",
23
- "url": "/demo/start/api-request",
24
- "name": "Start - API Request",
25
- "path": "src/routes/demo.start.api-request.tsx",
26
- "jsName": "StartApiRequestDemo"
27
- },
28
- {
29
- "icon": "StickyNote",
30
- "url": "/demo/start/ssr",
31
- "name": "Start - SSR Demos",
32
- "path": "src/routes/demo.start.ssr.index.tsx",
33
- "jsName": "StartSSRDemo",
34
- "children": [
35
- {
36
- "icon": "StickyNote",
37
- "url": "/demo/start/ssr/spa-mode",
38
- "name": "SPA Mode",
39
- "path": "src/routes/demo.start.ssr.spa-mode.tsx",
40
- "jsName": "StartSSRSpamodeDemo"
41
- },
42
- {
43
- "icon": "StickyNote",
44
- "url": "/demo/start/ssr/full-ssr",
45
- "name": "Full SSR",
46
- "path": "src/routes/demo.start.ssr.full-ssr.tsx",
47
- "jsName": "StartSSRFullSsrDemo"
48
- },
49
- {
50
- "icon": "StickyNote",
51
- "url": "/demo/start/ssr/data-only",
52
- "name": "Data Only",
53
- "path": "src/routes/demo.start.ssr.data-only.tsx",
54
- "jsName": "StartSSRDataOnlyDemo"
55
- }
56
- ]
57
- }
58
- ],
59
- "deletedFiles": ["./index.html", "./src/main.tsx"],
60
- "addOnSpecialSteps": ["rimraf-node-modules"]
61
- }