@tanstack/cta-framework-react-cra 0.20.0 → 0.22.1

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 (29) hide show
  1. package/add-ons/db/assets/src/routes/demo.db-chat-api.ts +30 -26
  2. package/add-ons/mcp/assets/src/routes/api.mcp-todos.ts +29 -25
  3. package/add-ons/mcp/assets/src/routes/mcp.ts +22 -18
  4. package/add-ons/mcp/assets/src/utils/mcp-handler.ts +62 -60
  5. package/add-ons/neon/assets/src/routes/demo.neon.tsx +1 -1
  6. package/add-ons/oRPC/assets/src/routes/api.$.ts +12 -8
  7. package/add-ons/oRPC/assets/src/routes/api.rpc.$.ts +12 -8
  8. package/add-ons/start/assets/src/router.tsx.ejs +7 -14
  9. package/add-ons/start/assets/src/routes/api.demo-names.ts +11 -7
  10. package/add-ons/start/assets/src/routes/api.demo-tq-todos.ts.ejs +17 -13
  11. package/add-ons/start/assets/src/routes/demo.start.server-funcs.tsx +1 -1
  12. package/add-ons/start/assets/vite.config.ts.ejs +1 -3
  13. package/add-ons/start/package.json +1 -1
  14. package/add-ons/tRPC/assets/src/routes/api.trpc.$.tsx +8 -3
  15. package/examples/tanchat/assets/src/routes/api.demo-chat.ts +32 -28
  16. package/examples/tanchat/assets/src/routes/api.messages.ts +22 -17
  17. package/examples/tanchat/assets/src/routes/api.sse.ts +37 -33
  18. package/package.json +2 -2
  19. package/project/base/package.json +2 -2
  20. package/project/base/src/logo.svg +10 -42
  21. package/project/packages.json +2 -1
  22. package/tests/snapshots/react-cra/cr-js-form-npm.json +1 -1
  23. package/tests/snapshots/react-cra/cr-js-npm.json +1 -1
  24. package/tests/snapshots/react-cra/cr-ts-npm.json +1 -1
  25. package/tests/snapshots/react-cra/cr-ts-start-npm.json +5 -5
  26. package/tests/snapshots/react-cra/cr-ts-start-tanstack-query-npm.json +6 -6
  27. package/tests/snapshots/react-cra/fr-ts-biome-npm.json +1 -1
  28. package/tests/snapshots/react-cra/fr-ts-npm.json +1 -1
  29. package/tests/snapshots/react-cra/fr-ts-tw-npm.json +1 -1
package/examples/tanchat/assets/src/routes/api.messages.ts CHANGED
@@ -1,21 +1,26 @@
1
1
  import { transports } from '@/utils/demo.sse'
2
+ import { createFileRoute } from '@tanstack/react-router'
2
3
 
3
- export const ServerRoute = createServerFileRoute('/api/messages').methods({
4
- // @ts-ignore
5
- POST: async ({ request }) => {
6
- const body = await request.json()
7
- const url = new URL(request.url)
8
- const sessionId = url.searchParams.get('sessionId') as string
9
- const transport = transports[sessionId]
10
- if (transport) {
11
- try {
12
- await transport.handleMessage(body)
13
- return new Response(null, { status: 200 })
14
- } catch (error) {
15
- return new Response(null, { status: 500 })
16
- }
17
- } else {
18
- return new Response(null, { status: 404 })
19
- }
4
+ export const Route = createFileRoute('/api/messages')({
5
+ server: {
6
+ handlers: {
7
+ // @ts-ignore
8
+ POST: async ({ request }) => {
9
+ const body = await request.json()
10
+ const url = new URL(request.url)
11
+ const sessionId = url.searchParams.get('sessionId') as string
12
+ const transport = transports[sessionId]
13
+ if (transport) {
14
+ try {
15
+ await transport.handleMessage(body)
16
+ return new Response(null, { status: 200 })
17
+ } catch (error) {
18
+ return new Response(null, { status: 500 })
19
+ }
20
+ } else {
21
+ return new Response(null, { status: 404 })
22
+ }
23
+ },
24
+ },
20
25
  },
21
26
  })
package/examples/tanchat/assets/src/routes/api.sse.ts CHANGED
@@ -1,40 +1,44 @@
1
1
  import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js'
2
-
2
+ import { createFileRoute } from '@tanstack/react-router'
3
3
  import { transports, server } from '@/utils/demo.sse'
4
4
 
5
- export const ServerRoute = createServerFileRoute('/api/sse').methods({
6
- // @ts-ignore
7
- GET: async ({}) => {
8
- let body = ''
9
- let headers: Record<string, string> = {}
10
- let statusCode = 200
11
- const resp = {
12
- on: (event: string, callback: () => void) => {
13
- if (event === 'close') {
14
- callback()
5
+ export const Route = createFileRoute('/api/sse')({
6
+ server: {
7
+ handlers: {
8
+ // @ts-ignore
9
+ GET: async ({}) => {
10
+ let body = ''
11
+ let headers: Record<string, string> = {}
12
+ let statusCode = 200
13
+ const resp = {
14
+ on: (event: string, callback: () => void) => {
15
+ if (event === 'close') {
16
+ callback()
17
+ }
18
+ },
19
+ writeHead: (statusCode: number, headers: Record<string, string>) => {
20
+ headers = headers
21
+ statusCode = statusCode
22
+ },
23
+ write: (data: string) => {
24
+ body += data + '\n'
25
+ },
15
26
  }
27
+ const transport = new SSEServerTransport('/api/messages', resp as any)
28
+ transports[transport.sessionId] = transport
29
+ transport.onerror = (error) => {
30
+ console.error(error)
31
+ }
32
+ resp.on('close', () => {
33
+ delete transports[transport.sessionId]
34
+ })
35
+ await server.connect(transport)
36
+ const response = new Response(body, {
37
+ status: statusCode,
38
+ headers: headers,
39
+ })
40
+ return response
16
41
  },
17
- writeHead: (statusCode: number, headers: Record<string, string>) => {
18
- headers = headers
19
- statusCode = statusCode
20
- },
21
- write: (data: string) => {
22
- body += data + '\n'
23
- },
24
- }
25
- const transport = new SSEServerTransport('/api/messages', resp as any)
26
- transports[transport.sessionId] = transport
27
- transport.onerror = (error) => {
28
- console.error(error)
29
- }
30
- resp.on('close', () => {
31
- delete transports[transport.sessionId]
32
- })
33
- await server.connect(transport)
34
- const response = new Response(body, {
35
- status: statusCode,
36
- headers: headers,
37
- })
38
- return response
42
+ },
39
43
  },
40
44
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/cta-framework-react-cra",
3
- "version": "0.20.0",
3
+ "version": "0.22.1",
4
4
  "description": "CTA Framework for React (Create React App)",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -23,7 +23,7 @@
23
23
  "author": "Jack Herrington <jherr@pobox.com>",
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
- "@tanstack/cta-engine": "0.20.0"
26
+ "@tanstack/cta-engine": "0.22.1"
27
27
  },
28
28
  "devDependencies": {
29
29
  "@types/node": "^22.13.4",
package/project/base/package.json CHANGED
@@ -11,8 +11,8 @@
11
11
  },
12
12
  "dependencies": {
13
13
  "@tanstack/react-devtools": "^0.2.2",
14
- "@tanstack/react-router": "^1.130.2",
15
- "@tanstack/react-router-devtools": "^1.131.5",
14
+ "@tanstack/react-router": "^1.132.0",
15
+ "@tanstack/react-router-devtools": "^1.132.0",
16
16
  "react": "^19.0.0",
17
17
  "react-dom": "^19.0.0"
18
18
  },
package/project/base/src/logo.svg CHANGED
@@ -1,44 +1,12 @@
1
1
  <?xml version="1.0" encoding="UTF-8"?>
2
- <svg id="Layer_1"
3
- xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 841.9 595.3">
4
- <!-- Generator: Adobe Illustrator 29.3.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 146) -->
5
- <defs>
6
- <style>
7
- .st0 {
8
- fill: #9ae7fc;
9
- }
10
-
11
- .st1 {
12
- fill: #61dafb;
13
- }
14
- </style>
15
- </defs>
16
- <g>
17
- <path class="st1" d="M666.3,296.5c0-32.5-40.7-63.3-103.1-82.4,14.4-63.6,8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6,0,8.3.9,11.4,2.6,13.6,7.8,19.5,37.5,14.9,75.7-1.1,9.4-2.9,19.3-5.1,29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50,32.6-30.3,63.2-46.9,84-46.9v-22.3c-27.5,0-63.5,19.6-99.9,53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7,0,51.4,16.5,84,46.6-14,14.7-28,31.4-41.3,49.9-22.6,2.4-44,6.1-63.6,11-2.3-10-4-19.7-5.2-29-4.7-38.2,1.1-67.9,14.6-75.8,3-1.8,6.9-2.6,11.5-2.6v-22.3c-8.4,0-16,1.8-22.6,5.6-28.1,16.2-34.4,66.7-19.9,130.1-62.2,19.2-102.7,49.9-102.7,82.3s40.7,63.3,103.1,82.4c-14.4,63.6-8,114.2,20.2,130.4,6.5,3.8,14.1,5.6,22.5,5.6,27.5,0,63.5-19.6,99.9-53.6,36.4,33.8,72.4,53.2,99.9,53.2,8.4,0,16-1.8,22.6-5.6,28.1-16.2,34.4-66.7,19.9-130.1,62-19.1,102.5-49.9,102.5-82.3zm-130.2-66.7c-3.7,12.9-8.3,26.2-13.5,39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4,14.2,2.1,27.9,4.7,41,7.9zm-45.8,106.5c-7.8,13.5-15.8,26.3-24.1,38.2-14.9,1.3-30,2-45.2,2s-30.2-.7-45-1.9c-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8,6.2-13.4,13.2-26.8,20.7-39.9,7.8-13.5,15.8-26.3,24.1-38.2,14.9-1.3,30-2,45.2-2s30.2.7,45,1.9c8.3,11.9,16.4,24.6,24.2,38,7.6,13.1,14.5,26.4,20.8,39.8-6.3,13.4-13.2,26.8-20.7,39.9zm32.3-13c5.4,13.4,10,26.8,13.8,39.8-13.1,3.2-26.9,5.9-41.2,8,4.9-7.7,9.8-15.6,14.4-23.7,4.6-8,8.9-16.1,13-24.1zm-101.4,106.7c-9.3-9.6-18.6-20.3-27.8-32,9,.4,18.2.7,27.5.7s18.7-.2,27.8-.7c-9,11.7-18.3,22.4-27.5,32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9,3.7-12.9,8.3-26.2,13.5-39.5,4.1,8,8.4,16,13.1,24s9.5,15.8,14.4,23.4zm73.9-208.1c9.3,9.6,18.6,20.3,27.8,32-9-.4-18.2-.7-27.5-.7s-18.7.2-27.8.7c9-11.7,18.3-22.4,27.5-32zm-74,58.9c-4.9,7.7-9.8,15.6-14.4,23.7-4.6,8-8.9,16-13,24-5.4-13.4-10-26.8-13.8-39.8,13.1-3.1,26.9-5.8,41.2-7.9zm-90.5,125.2c-35.4-15.1-58.3-34.9-58.3-50.6s22.9-35.6,58.3-50.6c8.6-3.7,18-7,27.7-10.1,5.7,19.6,13.2,40,22.5,60.9-9.2,20.8-16.6,41.1-22.2,60.6-9.9-3.1-19.3-6.5-28-10.2zm53.8,142.9c-13.6-7.8-19.5-37.5-14.9-75.7,1.1-9.4,2.9-19.3,5.1-29.4,19.6,4.8,41,8.5,63.5,10.9,13.5,18.5,27.5,35.3,41.6,50-32.6,30.3-63.2,46.9-84,46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7,38.2-1.1,67.9-14.6,75.8-3,1.8-6.9,2.6-11.5,2.6-20.7,0-51.4-16.5-84-46.6,14-14.7,28-31.4,41.3-49.9,22.6-2.4,44-6.1,63.6-11,2.3,10.1,4.1,19.8,5.2,29.1zm38.5-66.7c-8.6,3.7-18,7-27.7,10.1-5.7-19.6-13.2-40-22.5-60.9,9.2-20.8,16.6-41.1,22.2-60.6,9.9,3.1,19.3,6.5,28.1,10.2,35.4,15.1,58.3,34.9,58.3,50.6,0,15.7-23,35.6-58.4,50.6zm-264.9-268.7z"/>
18
- <circle class="st1" cx="420.9" cy="296.5" r="45.7"/>
19
- <path class="st1" d="M520.5,78.1"/>
20
- </g>
21
- <circle class="st0" cx="420.8" cy="296.6" r="43"/>
22
- <path class="st1" d="M466.1,296.6c0,25-20.2,45.2-45.2,45.2s-45.2-20.2-45.2-45.2,20.2-45.2,45.2-45.2,45.2,20.2,45.2,45.2ZM386,295.6v-6.3c0-1.1,1.2-5.1,1.8-6.2,1-1.9,2.9-3.5,4.6-4.7l-3.4-3.4c4-3.6,9.4-3.7,13.7-.7,1.9-4.7,6.6-7.1,11.6-6.7l-.8,4.2c5.9.2,13.1,4.1,13.1,10.8s0,.5-.7.7c-1.7.3-3.4-.4-5-.6s-1.2-.4-1.2.3,2.5,4.1,3,5.5,1,3.5.8,5.3c-5.6-.8-10.5-3.2-14.8-6.7.3,2.6,4.1,21.7,5.3,21.9s.8-.6,1-1.1,1.3-6.3,1.3-6.7c0-1-1.7-1.8-2.2-2.8-1.2-2.7,1.3-4.7,3.7-3.3s5.2,6.2,7.5,7.3,13,1.4,14.8,3.3-2.9,4.6-1.5,7.6c6.7-2.6,13.5-3.3,20.6-2.5,3.1-9.7,3.1-20.3-.9-29.8-7.3,0-14.7-3.6-17.2-10.8-2.5-7.2-.7-8.6-1.3-9.3-.8-1-6.3.6-7.4-1.5s.3-1.1-.2-1.4-1.9-.6-2.6-.8c-26-6.4-51.3,15.7-49.7,42.1,0,1.6,1.6,10.3,2.4,11.1s4.8,0,6.3,0,3.7.3,5,.5c2.9.4,7.2,2.4,9.4,2.5s2.4-.8,2.7-2.4c.4-2.6.5-7.4.5-10.1s-1-7.8-1.3-11.6c-.9-.2-.7,0-.9.5-.7,1.3-1.1,3.2-1.9,4.8s-5.2,8.7-5.7,9-.7-.5-.8-.8c-1.6-3.5-2-7.9-1.9-11.8-.9-1-5.4,4.9-6.7,5.3l-.8-.4v-.3h-.2ZM455.6,276.4c1.1-1.2-6-8.9-7.2-10-3-2.7-5.4-4.5-3.5,1.4s5.7,7.8,10.6,8.5h.1ZM410.9,270.1c-.4-.5-6.1,2.9-5.5,4.6,1.9-1.3,5.9-1.7,5.5-4.6ZM400.4,276.4c-.3-2.4-6.3-2.7-7.2-1s1.6,1.4,1.9,1.4c1.8.3,3.5-.6,5.2-.4h.1ZM411.3,276.8c3.8,1.3,6.6,3.6,10.9,3.7s0-3-1.2-3.9c-2.2-1.7-5.1-2.4-7.8-2.4s-1.6-.3-1.4.4c2.8.6,7.3.7,8.4,3.8-2.3-.3-3.9-1.6-6.2-2s-2.5-.5-2.6.3h0ZM420.6,290.3c-.8-5.1-5.7-10.8-10.9-11.6s-1.3-.4-.8.5,4.7,3.2,5.7,4,4.5,4.2,2.1,3.8-8.4-7.8-9.4-6.7c.2.9,1.1,1.9,1.7,2.7,3,3.8,6.9,6.8,11.8,7.4h-.2ZM395.3,279.8c-5,1.1-6.9,6.3-6.7,11,.7.8,5-3.8,5.4-4.5s2.7-4.6,1.1-4-2.9,4.4-4.2,4.6.2-2.1.4-2.5c1.1-1.6,2.9-3.1,4-4.6h0ZM400.4,281.5c-.4-.5-2,1.3-2.3,1.7-2.9,3.9-2.6,10.2-1.5,14.8.8.2.8-.3,1.2-.7,3-3.8,5.5-10.5,4.5-15.4-2.1,3.1-3.1,7.3-3.6,11h-1.3c0-4,1.9-7.7,3-11.4h0ZM426.9,305.9c0-1.7-1.7-1.4-2.5-1.9s-1.3-1.9-3-1.4c1.3,2.1,3,3.2,5.5,3.4h0ZM417.2,308.5c7.6.7,5.5-1.9,1.4-5.5-1.3-.3-1.5,4.5-1.4,5.5ZM437,309.7c-3.5-.3-7.8-2-11.2-2.1s-1.3,0-1.9.7c4,1.3,8.4,1.7,12.1,4l1-2.5h0ZM420.5,312.8c-7.3,0-15.1,3.7-20.4,8.8s-4.8,5.3-4.8,6.2c0,1.8,8.6,6.2,10.5,6.8,12.1,4.8,27.5,3.5,38.2-4.2s3.1-2.7,0-6.2c-5.7-6.6-14.7-11.4-23.4-11.3h-.1ZM398.7,316.9c-1.4-1.4-5-1.9-7-2.1s-5.3-.3-6.9.6l13.9,1.4h0ZM456.9,314.8h-7.4c-.9,0-4.9,1.1-6,1.6s-.8.6,0,.5c2.4,0,5.1-1,7.6-1.3s3.5.2,5.1,0,1.3-.3.6-.8h0Z"/>
23
- <path class="st0" d="M386,295.6l.8.4c1.3-.3,5.8-6.2,6.7-5.3,0,3.9.3,8.3,1.9,11.8s0,1.2.8.8,5.1-7.8,5.7-9,1.3-3.5,1.9-4.8,0-.7.9-.5c.3,3.8,1.2,7.8,1.3,11.6s0,7.5-.5,10.1-1.1,2.4-2.7,2.4-6.5-2.1-9.4-2.5-3.7-.5-5-.5-5.4,1.1-6.3,0-2.2-9.5-2.4-11.1c-1.5-26.4,23.7-48.5,49.7-42.1s2.2.4,2.6.8,0,1,.2,1.4c1.1,2,6.5.5,7.4,1.5s.4,6.9,1.3,9.3c2.5,7.2,10,10.9,17.2,10.8,4,9.4,4,20.1.9,29.8-7.2-.7-13.9,0-20.6,2.5-1.3-3.1,4.1-5.1,1.5-7.6s-11.8-1.9-14.8-3.3-5.4-6.1-7.5-7.3-4.9.6-3.7,3.3,2.1,1.8,2.2,2.8-1,6.2-1.3,6.7-.3,1.3-1,1.1c-1.1-.3-5-19.3-5.3-21.9,4.3,3.5,9.2,5.9,14.8,6.7.2-1.9-.3-3.5-.8-5.3s-3-5.1-3-5.5c0-.8.9-.3,1.2-.3,1.6,0,3.3.8,5,.6s.7.3.7-.7c0-6.6-7.2-10.6-13.1-10.8l.8-4.2c-5.1-.3-9.6,2-11.6,6.7-4.3-3-9.8-3-13.7.7l3.4,3.4c-1.8,1.3-3.5,2.8-4.6,4.7s-1.8,5.1-1.8,6.2v6.6h.2ZM431.6,265c7.8,2.1,8.7-3.5.2-1.3l-.2,1.3ZM432.4,270.9c.3.6,6.4-.4,5.8-2.3s-4.6.6-5.7.6l-.2,1.7h.1ZM434.5,276c.8,1.2,5.7-1.8,5.5-2.7-.4-1.9-6.6,1.2-5.5,2.7ZM442.9,276.4c-.9-.9-5,2.8-4.6,4,.6,2.4,5.7-3,4.6-4ZM445.1,279.9c-.3.2-3.1,4.6-1.5,5s3.5-3.4,3.5-4-1.3-1.3-2-.9h0ZM448.9,287.4c2.1.8,3.8-5.1,2.3-5.5-1.9-.6-2.6,5.1-2.3,5.5ZM457.3,288.6c.5-1.7,1.1-4.7-1-5.5-1,.3-.6,3.9-.6,4.8l.3.5,1.3.2h0Z"/>
24
- <path class="st0" d="M455.6,276.4c-5-.8-9.1-3.6-10.6-8.5s.5-4,3.5-1.4,8.3,8.7,7.2,10h-.1Z"/>
25
- <path class="st0" d="M420.6,290.3c-4.9-.6-8.9-3.6-11.8-7.4s-1.5-1.8-1.7-2.7c1-1,8.5,6.6,9.4,6.7,2.4.4-1.8-3.5-2.1-3.8-1-.8-5.4-3.5-5.7-4-.4-.8.5-.5.8-.5,5.2.8,10.1,6.6,10.9,11.6h.2Z"/>
26
- <path class="st0" d="M400.4,281.5c-1.1,3.7-3,7.3-3,11.4h1.3c.5-3.7,1.5-7.8,3.6-11,1,4.8-1.5,11.6-4.5,15.4s-.4.8-1.2.7c-1.1-4.5-1.3-10.8,1.5-14.8s1.9-2.2,2.3-1.7h0Z"/>
27
- <path class="st0" d="M411.3,276.8c0-.8,2.1-.4,2.6-.3,2.4.4,4,1.7,6.2,2-1.2-3.1-5.7-3.2-8.4-3.8,0-.8.9-.4,1.4-.4,2.8,0,5.6.7,7.8,2.4,2.2,1.7,4,4,1.2,3.9-4.3,0-7.1-2.4-10.9-3.7h0Z"/>
28
- <path class="st0" d="M395.3,279.8c-1.1,1.6-3,3-4,4.6s-1.9,2.8-.4,2.5,2.8-4,4.2-4.6-.9,3.6-1.1,4c-.4.7-4.7,5.2-5.4,4.5-.2-4.6,1.8-9.9,6.7-11h0Z"/>
29
- <path class="st0" d="M437,309.7l-1,2.5c-3.6-2.3-8-2.8-12.1-4,.5-.7,1.1-.7,1.9-.7,3.4,0,7.8,1.8,11.2,2.1h0Z"/>
30
- <path class="st0" d="M417.2,308.5c0-1,0-5.8,1.4-5.5,4,3.5,6.1,6.2-1.4,5.5Z"/>
31
- <path class="st0" d="M400.4,276.4c-1.8-.3-3.5.7-5.2.4s-2.3-.8-1.9-1.4c.8-1.6,6.9-1.4,7.2,1h-.1Z"/>
32
- <path class="st0" d="M410.9,270.1c.4,3-3.6,3.3-5.5,4.6-.6-1.8,5-5.1,5.5-4.6Z"/>
33
- <path class="st0" d="M426.9,305.9c-2.5-.2-4.1-1.3-5.5-3.4,1.7-.4,2,.8,3,1.4s2.6.3,2.5,1.9h0Z"/>
34
- <path class="st1" d="M432.4,270.9l.2-1.7c1.1,0,5.1-2.2,5.7-.6s-5.5,2.9-5.8,2.3h-.1Z"/>
35
- <path class="st1" d="M431.6,265l.2-1.3c8.4-2.1,7.7,3.4-.2,1.3Z"/>
36
- <path class="st1" d="M434.5,276c-1.1-1.5,5.1-4.6,5.5-2.7s-4.6,4-5.5,2.7Z"/>
37
- <path class="st1" d="M442.9,276.4c1.1,1.1-4,6.4-4.6,4s3.7-4.9,4.6-4Z"/>
38
- <path class="st1" d="M445.1,279.9c.7-.4,2.1,0,2,.9s-2.4,4.4-3.5,4,1.3-4.8,1.5-5h0Z"/>
39
- <path class="st1" d="M448.9,287.4c-.3-.3.4-6.1,2.3-5.5,1.4.4-.2,6.2-2.3,5.5Z"/>
40
- <path class="st1" d="M457.3,288.6l-1.3-.2-.3-.5c0-.9-.4-4.6.6-4.8,2.1.8,1.5,3.8,1,5.5h0Z"/>
41
- <path class="st0" d="M420.5,312.8c8.9,0,17.9,4.7,23.4,11.3,5.6,6.6,3.8,3.5,0,6.2-10.7,7.7-26.1,9-38.2,4.2-1.9-.8-10.5-5.1-10.5-6.8s4-5.3,4.8-6.2c5.3-5,13.1-8.6,20.4-8.8h.1Z"/>
42
- <path class="st0" d="M398.7,316.9l-13.9-1.4c1.7-1,5-.8,6.9-.6s5.6.7,7,2.1h0Z"/>
43
- <path class="st0" d="M456.9,314.8c.7.5,0,.8-.6.8-1.6.2-3.5-.2-5.1,0-2.4.3-5.2,1.2-7.6,1.3s-1.1,0,0-.5,5.1-1.6,6-1.6h7.4,0Z"/>
2
+ <svg width="5355px" height="3786px" viewBox="0 0 5355 3786" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3
+ <title>logo</title>
4
+ <g id="logo" stroke="none" fill="none" transform="translate(0.9778, 0)" fill-rule="evenodd" stroke-width="1">
5
+ <g id="Layer_1" transform="translate(1117.351, 496.0658)" fill="#61DAFB">
6
+ <g id="Group" fill-rule="nonzero">
7
+ <path d="M3119.93396,1389.62036 C3119.93396,1182.92626 2861.10536,987.043843 2464.27723,865.571309 C2555.85295,461.086847 2515.15263,139.280027 2335.81684,36.2509659 C2294.48058,12.0836553 2246.14895,0.635981858 2193.36572,0.635981858 L2193.36572,142.459936 C2222.61908,142.459936 2246.14895,148.183773 2265.86317,158.995464 C2352.35135,208.602049 2389.87196,397.488661 2360.6186,640.433731 C2353.62323,700.216026 2342.17627,763.178229 2328.18553,827.412397 C2203.5408,796.885268 2067.4491,773.353939 1924.36204,758.090375 C1838.5098,640.433731 1749.47785,533.588779 1659.80995,440.099446 C1867.12721,247.396943 2061.72562,141.823954 2194.00166,141.823954 L2194.00166,0 C2019.11747,0 1790.17817,124.652444 1558.69509,340.886276 C1327.21202,125.924408 1098.27272,2.54392743 923.388526,2.54392743 L923.388526,144.367882 C1055.02863,144.367882 1250.26298,249.304888 1457.58024,440.735428 C1368.54828,534.224761 1279.51633,640.433731 1194.93598,758.090375 C1051.21297,773.353939 915.121273,796.885268 790.476541,828.048379 C775.849863,764.450193 765.038841,702.759953 757.407531,643.61364 C727.518233,400.66857 764.402898,211.781959 850.255137,161.539392 C869.333413,150.091718 894.13517,145.003864 923.388526,145.003864 L923.388526,3.17990929 C869.969355,3.17990929 821.637724,14.6275827 779.665518,38.7948933 C600.965673,141.823954 560.901295,462.994793 653.112959,866.20729 C257.556717,988.315807 0,1183.56224 0,1389.62036 C0,1595.67848 258.828602,1792.19688 655.656729,1913.66941 C564.081007,2318.15387 604.781328,2639.96069 784.117116,2742.98975 C825.453379,2767.15706 873.78501,2778.60474 927.204181,2778.60474 C1102.08837,2778.60474 1331.02768,2653.95229 1562.51075,2437.71846 C1793.99382,2652.68033 2022.93313,2776.06081 2197.81732,2776.06081 C2251.23649,2776.06081 2299.56812,2764.61314 2341.54033,2740.44583 C2520.24017,2637.41676 2560.30455,2316.24593 2468.09289,1913.03343 C2862.37724,1791.56089 3119.93396,1595.67848 3119.93396,1389.62036 L3119.93396,1389.62036 Z M2291.93681,965.42046 C2268.40694,1047.46212 2239.15358,1132.04771 2206.08457,1216.63329 C2180.01093,1165.75475 2152.6654,1114.8762 2122.7761,1063.99765 C2093.52275,1013.1191 2062.36156,963.512515 2031.20038,915.177893 C2121.50422,928.533513 2208.62834,945.069041 2291.93681,965.42046 Z M2000.67514,1642.74114 C1951.07162,1728.59869 1900.19622,1810.00437 1847.41299,1885.68621 C1752.65756,1893.95397 1656.63024,1898.40585 1559.96698,1898.40585 C1463.30372,1898.40585 1367.91234,1893.95397 1273.79285,1886.32219 C1221.00962,1810.64035 1169.49828,1729.87065 1119.89476,1644.64908 C1071.56313,1561.33546 1027.6831,1476.74987 987.61872,1391.52831 C1027.04716,1306.30674 1071.56313,1221.08517 1119.25882,1137.77154 C1168.86234,1051.91399 1219.73774,970.508315 1272.52096,894.826474 C1367.2764,886.55871 1463.30372,882.106837 1559.96698,882.106837 C1656.63024,882.106837 1752.02162,886.55871 1846.14111,894.190492 C1898.92434,969.872333 1950.43568,1050.64203 2000.0392,1135.8636 C2048.37083,1219.17722 2092.25086,1303.76281 2132.31524,1388.98438 C2092.25086,1474.20595 2048.37083,1559.42752 2000.67514,1642.74114 Z M2206.08457,1560.0635 C2240.42547,1645.28507 2269.67882,1730.50664 2293.84464,1813.18428 C2210.53617,1833.5357 2122.7761,1850.70721 2031.83632,1864.06283 C2062.99751,1815.09222 2094.15869,1764.84966 2123.41204,1713.33513 C2152.6654,1662.45658 2180.01093,1610.94205 2206.08457,1560.0635 Z M1561.23886,2238.65614 C1502.09621,2177.60188 1442.95356,2109.55182 1384.44685,2035.14195 C1441.68167,2037.68587 1500.18838,2039.59382 1559.33104,2039.59382 C1618.47369,2039.59382 1678.25229,2038.32185 1736.12305,2035.14195 C1678.88823,2109.55182 1619.74558,2177.60188 1561.23886,2238.65614 Z M1088.09764,1864.06283 C997.7938,1850.70721 910.669676,1834.17168 827.361207,1813.82026 C850.89108,1731.7786 880.144435,1647.19301 913.213446,1562.60742 C939.287089,1613.48597 966.632617,1664.36452 996.521915,1715.24307 C1026.41121,1766.12162 1056.93645,1815.7282 1088.09764,1864.06283 Z M1558.05915,540.584579 C1617.20181,601.638838 1676.34446,669.688896 1734.85117,744.098774 C1677.61634,741.554846 1619.10963,739.646901 1559.96698,739.646901 C1500.82433,739.646901 1441.04573,740.918864 1383.17496,744.098774 C1440.40979,669.688896 1499.55244,601.638838 1558.05915,540.584579 Z M1087.46169,915.177893 C1056.30051,964.148497 1025.13933,1014.39106 995.885972,1065.90559 C966.632617,1116.78414 939.287089,1167.66269 913.213446,1218.54124 C878.87255,1133.31967 849.619195,1048.0981 825.453379,965.42046 C908.761848,945.705023 996.521915,928.533513 1087.46169,915.177893 Z M511.933721,1711.42718 C286.810072,1615.39392 141.179237,1489.46951 141.179237,1389.62036 C141.179237,1289.77121 286.810072,1163.21082 511.933721,1067.81354 C566.624777,1044.28221 626.403373,1023.29481 688.089797,1003.57937 C724.33852,1128.23182 772.034208,1257.97211 831.176862,1390.89232 C772.670151,1523.17655 725.610405,1652.28087 689.997624,1776.29733 C627.039316,1756.58189 567.26072,1734.95851 511.933721,1711.42718 Z M854.070792,2620.24525 C767.582611,2570.63867 730.062003,2381.75206 759.315358,2138.80699 C766.310726,2079.02469 777.757691,2016.06249 791.748426,1951.82832 C916.393158,1982.35545 1052.48486,2005.88678 1195.57192,2021.15034 C1281.42416,2138.80699 1370.45611,2245.65194 1460.12401,2339.14127 C1252.80675,2531.84378 1058.20834,2637.41676 925.932296,2637.41676 C897.314883,2636.78078 873.149068,2631.05695 854.070792,2620.24525 L854.070792,2620.24525 Z M2362.52643,2135.62708 C2392.41573,2378.57215 2355.53106,2567.45876 2269.67882,2617.70133 C2250.60055,2629.149 2225.79879,2634.23686 2196.54543,2634.23686 C2064.90533,2634.23686 1869.67098,2529.29985 1662.35372,2337.86931 C1751.38568,2244.37998 1840.41763,2138.17101 1924.99798,2020.51436 C2068.72099,2005.2508 2204.81269,1981.71947 2329.45742,1950.55636 C2344.0841,2014.79053 2355.53106,2076.48077 2362.52643,2135.62708 L2362.52643,2135.62708 Z M2607.3643,1711.42718 C2552.67324,1734.95851 2492.89464,1755.94591 2431.20822,1775.66135 C2394.9595,1651.0089 2347.26381,1521.2686 2288.12115,1388.3484 C2346.62787,1256.06417 2393.68761,1126.95985 2429.30039,1002.94339 C2492.2587,1022.65883 2552.0373,1044.28221 2608.00024,1067.81354 C2833.12389,1163.8468 2978.75472,1289.77121 2978.75472,1389.62036 C2978.75472,1489.46951 2832.48794,1616.0299 2607.3643,1711.42718 L2607.3643,1711.42718 Z" id="Shape"></path>
8
+ </g>
9
+ <path d="M1537.37834,1099.4829 C1545.02735,1098.47702 1553.10731,1099.16174 1560.81604,1099.16174 C1589.37451,1099.16174 1617.41357,1103.60261 1644.73816,1112.01928 C1679.60968,1122.76128 1712.08981,1139.93545 1740.75715,1162.52987 C1775.89405,1190.22336 1805.00822,1226.54711 1823.68958,1267.31325 C1858.64201,1343.58359 1858.38571,1436.01692 1822.57667,1511.96611 C1799.42324,1561.07316 1762.27826,1602.17408 1717.31944,1632.14671 C1680.63641,1656.60215 1637.73331,1671.57142 1594.08247,1676.87122 C1538.52074,1683.61849 1478.45443,1673.7589 1428.50641,1648.10898 C1334.7397,1599.95554 1270.99292,1503.04196 1269.73182,1396.83535 C1269.48913,1376.35874 1269.80743,1355.76018 1273.85459,1335.48277 C1280.44663,1302.45918 1291.94018,1270.53691 1309.20168,1241.56031 C1327.87397,1210.21369 1351.99288,1182.55201 1380.87494,1160.24997 C1414.74469,1134.09636 1454.10946,1115.2846 1495.79531,1105.71435 C1505.55336,1103.47438 1515.35011,1102.20236 1525.19388,1100.99838 L1528.67012,1100.57481 C1531.56864,1100.22174 1534.47131,1099.86541 1537.37834,1099.4829 Z M1440.28829,1582.05277 C1427.38628,1583.43854 1413.77812,1585.79095 1402.70469,1593.0505 C1405.19749,1593.65093 1408.05457,1593.05485 1410.65507,1593.0505 C1416.90117,1593.04035 1423.20727,1592.80467 1429.44687,1593.07878 C1445.06719,1593.76551 1461.34234,1596.26875 1476.42637,1600.4123 C1488.01412,1603.59545 1498.77315,1608.6274 1509.54524,1613.66442 L1512.23902,1614.92271 C1518.52742,1617.854 1524.84413,1620.73472 1531.35625,1623.19891 C1550.98501,1630.62598 1570.52415,1632.93415 1591.34546,1632.93415 L1593.25225,1632.93318 C1603.09908,1632.91995 1612.8672,1632.72906 1622.42421,1630.03352 C1617.1148,1627.20106 1609.51424,1627.7326 1603.63241,1626.55277 C1590.87061,1623.99224 1578.32347,1620.86608 1566.04881,1616.47888 C1546.68964,1609.55943 1528.85694,1599.16793 1509.6734,1591.90838 C1487.81565,1583.63651 1463.59446,1579.54953 1440.28829,1582.05277 Z M1459.80285,1527.06119 C1434.23516,1527.06119 1408.3762,1531.57312 1385.35841,1543.19449 C1379.78158,1546.01028 1374.48085,1549.36485 1369.45766,1553.08274 C1367.92685,1554.21616 1365.21288,1555.67227 1364.64696,1557.64252 C1364.07308,1559.64106 1366.125,1561.31545 1367.28937,1562.5939 C1373.04255,1559.52213 1378.5088,1556.27053 1384.63565,1553.93842 C1424.26105,1538.85878 1472.29796,1542.01974 1511.84169,1555.84631 C1531.56224,1562.74183 1549.73174,1573.05357 1568.93985,1581.14052 C1590.42177,1590.18468 1612.36265,1596.04903 1635.43392,1599.05625 C1662.64806,1602.60227 1693.67549,1599.72848 1718.5515,1587.42618 C1727.29258,1583.10352 1739.42919,1576.51619 1743.1254,1566.94484 C1738.56043,1567.3444 1734.45298,1569.30378 1730.11569,1570.65475 C1723.2191,1572.80266 1716.24011,1574.62426 1709.1556,1576.04629 C1685.14474,1580.86496 1659.61174,1581.85988 1635.43392,1577.48645 C1610.81165,1573.03264 1588.07413,1563.72547 1565.31061,1554.26664 L1562.27515,1553.00498 C1550.63735,1548.16833 1538.97057,1543.34664 1527.01968,1539.16769 C1505.55366,1531.66159 1482.54816,1527.06119 1459.80285,1527.06119 Z M1504.61407,1133.60828 C1473.96537,1140.39067 1446.50982,1153.59796 1420.05097,1170.24757 C1404.69012,1179.91319 1389.99637,1189.81522 1376.68527,1202.25529 C1356.89028,1220.75623 1341.76143,1243.24263 1328.5667,1266.72974 C1314.97155,1290.92897 1306.25505,1319.13178 1302.04207,1346.49704 C1297.90932,1373.34381 1297.22848,1401.57056 1301.96257,1428.43981 C1307.88054,1462.03199 1319.14478,1493.55458 1336.93339,1522.71025 C1342.91135,1519.91332 1347.1554,1513.53629 1352.11138,1509.24045 C1362.11874,1500.56685 1372.62552,1492.52776 1383.91289,1485.59018 C1388.09117,1483.02239 1392.38365,1481.02821 1396.9226,1479.20082 C1398.63482,1478.51119 1401.43407,1477.88103 1402.23995,1475.99707 C1403.52069,1473.00507 1401.1522,1467.79772 1400.74528,1464.69767 C1399.58381,1455.83117 1398.88273,1446.81384 1399.10172,1437.86685 C1399.73775,1411.80978 1404.59833,1385.3894 1413.85256,1361.00019 C1420.82649,1342.62325 1431.48,1325.93811 1444.10086,1310.96434 C1448.38322,1305.88316 1452.9359,1301.15368 1457.63457,1296.46192 C1458.21308,1295.88421 1458.82064,1295.32387 1459.43565,1294.76658 L1460.17587,1294.09838 C1462.27545,1292.20409 1464.36137,1290.27877 1465.58495,1287.7593 C1456.52296,1287.76511 1447.45953,1290.38292 1438.84277,1293.04062 C1420.27936,1298.76647 1402.19587,1307.26241 1386.80393,1319.24926 C1379.78303,1324.71767 1374.6413,1331.88512 1368.00129,1337.63997 C1365.96455,1339.40573 1362.31605,1341.77192 1359.50162,1340.4398 C1355.24961,1338.42822 1355.90588,1330.0454 1355.41874,1326.19264 C1353.54534,1311.37332 1359.14891,1292.62874 1366.27028,1279.78257 C1377.7022,1259.16128 1398.84008,1241.55301 1423.66478,1242.16794 C1434.3855,1242.43335 1443.77128,1246.16501 1454.02076,1248.60081 C1451.42171,1244.90179 1447.93728,1242.20565 1444.62486,1239.17377 C1436.50897,1231.74453 1427.63201,1224.95924 1417.88268,1219.82657 C1415.26773,1218.45023 1412.51915,1217.43388 1409.75022,1216.45975 L1408.08733,1215.8778 C1407.25557,1215.58681 1406.42402,1215.29391 1405.59574,1214.9905 C1403.51346,1214.22836 1400.89128,1213.17906 1400.10781,1210.86073 C1398.65722,1206.56707 1406.37487,1202.59031 1409.20954,1200.77959 C1420.16806,1193.78038 1433.60492,1188.02263 1446.79315,1187.69848 C1467.40342,1187.1916 1487.541,1198.64836 1496.03056,1218.14421 C1499.41855,1225.92354 1500.09804,1234.21057 1500.70889,1242.5268 L1500.82326,1244.08631 C1500.88069,1244.86613 1500.93897,1245.64593 1501.00027,1246.42534 C1507.47332,1241.13895 1512.02599,1233.35946 1518.34654,1227.69743 C1533.12846,1214.45461 1553.35856,1208.57576 1572.55366,1214.53728 C1589.90066,1219.92375 1604.97747,1231.9164 1613.85081,1247.87566 C1616.17232,1252.05111 1622.64899,1262.25625 1617.96983,1266.41503 C1614.3076,1269.67098 1609.66313,1267.13366 1605.80069,1265.78341 C1601.8125,1264.38966 1597.64361,1263.69061 1593.51375,1262.86103 C1583.01058,1260.75155 1570.79301,1260.97055 1560.26672,1262.82477 C1553.46119,1264.02346 1546.81034,1266.44983 1540.02939,1267.4549 L1540.02939,1268.90522 C1558.57112,1269.05895 1576.50717,1279.65567 1585.65516,1295.73603 C1589.44532,1302.39805 1591.33824,1310.02308 1592.79026,1317.49075 C1594.5856,1326.72055 1593.32366,1336.77631 1590.80628,1345.77188 C1589.9621,1348.78781 1588.42984,1353.9009 1584.82977,1354.5956 C1582.28492,1355.08653 1580.12387,1352.54848 1578.67112,1350.83711 C1574.86289,1346.35128 1571.2404,1342.08663 1566.77157,1338.21284 C1555.46613,1328.41379 1543.51238,1319.37471 1531.35625,1310.65904 C1524.90199,1306.03109 1517.83266,1300.01446 1510.39617,1297.18635 C1512.48712,1302.23199 1514.53542,1306.92303 1515.24662,1312.41465 C1517.33829,1328.56825 1510.5877,1343.77263 1500.4553,1355.92409 C1497.36333,1359.63254 1494.05597,1363.36782 1490.15884,1366.24887 C1488.54275,1367.44393 1486.51468,1369.00447 1484.37675,1368.66655 C1477.67386,1367.60564 1476.87593,1357.4839 1475.84816,1352.2983 C1472.36734,1334.73427 1473.76516,1317.28988 1478.59466,1300.08698 C1474.29784,1302.2697 1471.19213,1307.04631 1468.49406,1310.96434 C1462.55802,1319.58573 1457.40762,1328.70458 1453.71431,1338.52031 C1439.00539,1377.62006 1439.14705,1423.41664 1458.20194,1461.05811 C1460.32975,1465.26184 1463.55905,1464.69767 1467.75323,1464.69767 C1472.80895,1464.69767 1477.91309,1464.44387 1482.93123,1465.11536 C1484.88413,1465.37642 1487.59593,1465.14364 1489.14192,1466.58526 C1490.99291,1468.31258 1490.00634,1471.27412 1489.57991,1473.39956 C1488.3888,1479.3415 1487.99056,1484.74174 1487.99056,1490.80333 C1495.9019,1489.57492 1498.09476,1476.86871 1500.89908,1470.49893 C1504.07706,1463.28289 1507.3107,1456.0596 1510.25089,1448.74421 C1511.69641,1445.14888 1513.6298,1441.12861 1513.12242,1437.1417 C1512.55289,1432.66095 1509.32142,1427.91044 1507.06929,1424.08887 C1502.80645,1416.85687 1497.96105,1409.41458 1494.82282,1401.60899 C1492.31412,1395.36901 1494.65008,1387.5714 1501.72375,1385.34226 C1505.62522,1384.1124 1509.7876,1386.52427 1512.32666,1389.34948 C1515.93315,1393.3614 1518.67364,1398.69976 1521.26801,1403.88732 L1522.0059,1405.3641 C1522.98612,1407.32427 1523.95508,1409.24214 1524.95258,1411.03604 L1555.1062,1465.42283 C1557.66694,1470.0283 1560.23347,1474.6287 1562.85348,1479.20082 C1563.87546,1480.9847 1564.91552,1483.73885 1567.00936,1484.49954 C1568.87408,1485.17684 1571.42182,1484.21383 1573.27642,1483.84182 C1578.09146,1482.87591 1582.89927,1481.83314 1587.73166,1480.9586 C1593.52242,1479.91074 1602.34951,1480.10726 1606.52346,1475.57503 C1600.41901,1473.63813 1593.36269,1473.75271 1587.00889,1474.18925 C1586.22321,1474.2433 1585.41997,1474.34419 1584.60911,1474.45086 L1583.91244,1474.54275 C1581.00382,1474.92353 1578.03411,1475.22838 1575.45555,1473.58665 C1570.23649,1470.26398 1566.76723,1462.58891 1563.57407,1457.4461 C1555.70103,1444.76455 1548.28333,1431.89228 1540.7442,1419.01276 C1538.34102,1414.90692 1535.86628,1410.83299 1533.5361,1406.68509 C1532.63554,1405.08104 1531.3006,1402.96721 1532.59073,1401.19855 C1533.93235,1399.36006 1536.8405,1399.23436 1539.486,1399.22865 L1540.63853,1399.22883 C1541.48104,1399.22712 1542.26426,1399.21253 1542.92044,1399.12605 C1553.68091,1397.70765 1564.591,1396.53289 1575.44471,1396.53289 C1574.5998,1393.58875 1572.18361,1390.26101 1572.95624,1387.10875 C1574.68509,1380.05587 1584.81459,1377.84921 1589.52555,1382.91009 C1592.68835,1386.30745 1594.52634,1390.98326 1596.58404,1395.08258 C1599.29945,1400.49442 1602.39143,1405.72571 1605.2991,1411.03604 C1610.38879,1420.33328 1615.94754,1429.37526 1621.18178,1438.59201 C1621.64941,1439.41555 1622.13242,1440.23451 1622.62001,1441.05306 L1623.35349,1442.2811 C1625.55616,1445.9674 1627.74247,1449.68746 1628.92907,1453.82031 C1610.75017,1452.98711 1597.1037,1431.84732 1589.17718,1417.56245 C1588.54476,1419.8496 1589.57253,1421.89091 1590.39431,1424.08887 C1592.10219,1428.65373 1594.14327,1433.00105 1596.71197,1437.1417 C1600.38071,1443.05463 1604.58646,1449.14377 1610.13726,1453.4367 C1619.98778,1461.05448 1632.97725,1461.09654 1644.82982,1460.28219 C1652.43038,1459.75935 1661.92747,1456.2931 1669.40371,1458.64478 C1676.86767,1460.99284 1679.87219,1469.23933 1675.4395,1475.5743 C1672.11913,1480.31973 1667.68716,1482.1116 1662.1761,1482.8266 C1666.07323,1491.20144 1671.17882,1498.97368 1674.87936,1507.48195 C1676.42101,1511.02652 1678.02771,1516.45867 1681.72174,1518.32885 C1684.1813,1519.57322 1687.70476,1518.41442 1690.3638,1518.35931 C1687.69536,1511.28612 1682.69891,1505.284 1680.24514,1498.0549 C1687.72644,1498.3979 1694.96201,1502.30868 1701.92799,1504.80467 C1717.73912,1510.4696 1733.32041,1516.74438 1748.90749,1523.00031 C1754.4648,1525.23017 1760.05536,1527.43755 1765.53101,1529.86175 C1767.5345,1530.74862 1770.30846,1532.82184 1772.523,1531.54557 C1774.3299,1530.50352 1775.49861,1528.01913 1776.61311,1526.33604 C1779.73038,1521.62687 1782.55349,1516.73786 1785.34985,1511.83289 C1796.54904,1492.18983 1804.76323,1470.66644 1810.25043,1448.74421 C1828.34983,1376.44313 1812.82274,1296.66786 1769.32912,1236.27314 C1752.61815,1213.06883 1731.60241,1193.00808 1708.43284,1176.39473 C1650.44929,1134.82074 1574.37719,1118.17113 1504.61407,1133.60828 Z M1623.14697,1494.16008 C1607.776,1498.17456 1591.93524,1501.81339 1576.16747,1503.85616 C1578.24107,1510.92862 1583.30835,1517.80819 1587.01757,1524.16056 C1588.45153,1526.61667 1589.98595,1529.90599 1592.8199,1530.97197 C1596.02101,1532.17573 1599.88923,1530.22215 1602.90965,1529.23667 C1601.5111,1525.40348 1599.15779,1521.95391 1597.23163,1518.35931 C1596.43804,1516.87709 1595.21007,1515.1222 1595.86417,1513.36225 C1597.10081,1510.03668 1602.23459,1510.23247 1605.07793,1509.65452 C1612.5708,1508.13169 1619.98561,1506.23105 1627.48354,1504.72635 C1630.24594,1504.17161 1634.09247,1502.66908 1636.8686,1503.59728 C1640.50626,1504.81337 1641.61498,1509.15561 1644.25884,1511.54718 C1647.2901,1514.289 1651.82326,1514.71032 1655.67124,1515.45868 C1653.32299,1510.16503 1649.42008,1505.53345 1646.91788,1500.23038 C1645.46296,1497.14628 1644.26751,1492.60897 1641.0823,1490.82654 C1636.69442,1488.37115 1627.63243,1492.98823 1623.14697,1494.16008 Z M1526.29692,1458.89641 C1525.57344,1468.08996 1522.75828,1475.56995 1518.34654,1483.55176 C1523.40226,1484.1928 1528.55916,1484.42122 1533.52454,1485.65399 C1537.24604,1486.57784 1540.67554,1488.33997 1544.36596,1489.35302 C1542.39282,1483.94479 1538.73203,1479.1196 1535.89592,1474.12472 C1533.03234,1469.0827 1530.46942,1462.95584 1526.29692,1458.89641 Z" id="Combined-Shape-Copy" fill-rule="nonzero"></path>
10
+ </g>
11
+ </g>
44
12
  </svg>
package/project/packages.json CHANGED
@@ -2,6 +2,7 @@
2
2
  "typescript": {
3
3
  "devDependencies": {
4
4
  "@types/react": "^19.0.8",
5
+ "@types/node": "^22.10.2",
5
6
  "@types/react-dom": "^19.0.3",
6
7
  "typescript": "^5.7.2"
7
8
  }
@@ -14,7 +15,7 @@
14
15
  },
15
16
  "file-router": {
16
17
  "dependencies": {
17
- "@tanstack/router-plugin": "^1.121.2"
18
+ "@tanstack/router-plugin": "^1.132.0"
18
19
  }
19
20
  }
20
21
  }
package/tests/snapshots/react-cra/cr-js-form-npm.json CHANGED
@@ -19,7 +19,7 @@
19
19
  "/src/styles.css": "\nbody {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n",
20
20
  "README.md": "Welcome to your new TanStack app! \n\n# Getting Started\n\nTo run this application:\n\n```bash\nnpm install\nnpm run start\n```\n\n# Building For Production\n\nTo build this application for production:\n\n```bash\nnpm run build\n```\n\n## Testing\n\nThis project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:\n\n```bash\nnpm run test\n```\n\n## Styling\n\nThis project uses CSS for styling.\n\n\n\n\n## Routing\nThis project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.\n\n### Adding A Route\n\nTo add a new route to your application just add another a new file in the `./src/routes` directory.\n\nTanStack will automatically generate the content of the route file for you.\n\nNow that you have two routes you can use a `Link` component to navigate between them.\n\n### Adding Links\n\nTo use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.\n\n```tsx\nimport { Link } from \"@tanstack/react-router\";\n```\n\nThen anywhere in your JSX you can use it like so:\n\n```tsx\n<Link to=\"/about\">About</Link>\n```\n\nThis will create a link that will navigate to the `/about` route.\n\nMore information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).\n\n### Using A Layout\n\nIn the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.\n\nHere is an example layout that includes a header:\n\n```tsx\nimport { Outlet, createRootRoute } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nimport { Link } from \"@tanstack/react-router\";\n\nexport const Route = createRootRoute({\n component: () => (\n <>\n <header>\n <nav>\n <Link to=\"/\">Home</Link>\n <Link to=\"/about\">About</Link>\n </nav>\n </header>\n <Outlet />\n <TanStackRouterDevtools />\n </>\n ),\n})\n```\n\nThe `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.\n\nMore information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).\n\n\n## Data Fetching\n\nThere are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.\n\nFor example:\n\n```tsx\nconst peopleRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: \"/people\",\n loader: async () => {\n const response = await fetch(\"https://swapi.dev/api/people\");\n return response.json();\n },\n component: () => {\n const data = peopleRoute.useLoaderData();\n return (\n <ul>\n {data.results.map((person) => (\n <li key={person.name}>{person.name}</li>\n ))}\n </ul>\n );\n },\n});\n```\n\nLoaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters).\n\n### React-Query\n\nReact-Query is an excellent addition or alternative to route loading and integrating it into you application is a breeze.\n\nFirst add your dependencies:\n\n```bash\nnpm install @tanstack/react-query @tanstack/react-query-devtools\n```\n\nNext we'll need to create a query client and provider. We recommend putting those in `main.jsx`.\n\n```tsx\nimport { QueryClient, QueryClientProvider } from \"@tanstack/react-query\";\n\n// ...\n\nconst queryClient = new QueryClient();\n\n// ...\n\nif (!rootElement.innerHTML) {\n const root = ReactDOM.createRoot(rootElement);\n\n root.render(\n <QueryClientProvider client={queryClient}>\n <RouterProvider router={router} />\n </QueryClientProvider>\n );\n}\n```\n\nYou can also add TanStack Query Devtools to the root route (optional).\n\n```tsx\nimport { ReactQueryDevtools } from \"@tanstack/react-query-devtools\";\n\nconst rootRoute = createRootRoute({\n component: () => (\n <>\n <Outlet />\n <ReactQueryDevtools buttonPosition=\"top-right\" />\n <TanStackRouterDevtools />\n </>\n ),\n});\n```\n\nNow you can use `useQuery` to fetch your data.\n\n```tsx\nimport { useQuery } from \"@tanstack/react-query\";\n\nimport \"./App.css\";\n\nfunction App() {\n const { data } = useQuery({\n queryKey: [\"people\"],\n queryFn: () =>\n fetch(\"https://swapi.dev/api/people\")\n .then((res) => res.json())\n .then((data) => data.results),\n initialData: [],\n });\n\n return (\n <div>\n <ul>\n {data.map((person) => (\n <li key={person.name}>{person.name}</li>\n ))}\n </ul>\n </div>\n );\n}\n\nexport default App;\n```\n\nYou can find out everything you need to know on how to use React-Query in the [React-Query documentation](https://tanstack.com/query/latest/docs/framework/react/overview).\n\n## State Management\n\nAnother common requirement for React applications is state management. There are many options for state management in React. TanStack Store provides a great starting point for your project.\n\nFirst you need to add TanStack Store as a dependency:\n\n```bash\nnpm install @tanstack/store\n```\n\nNow let's create a simple counter in the `src/App.jsx` file as a demonstration.\n\n```tsx\nimport { useStore } from \"@tanstack/react-store\";\nimport { Store } from \"@tanstack/store\";\nimport \"./App.css\";\n\nconst countStore = new Store(0);\n\nfunction App() {\n const count = useStore(countStore);\n return (\n <div>\n <button onClick={() => countStore.setState((n) => n + 1)}>\n Increment - {count}\n </button>\n </div>\n );\n}\n\nexport default App;\n```\n\nOne of the many nice features of TanStack Store is the ability to derive state from other state. That derived state will update when the base state updates.\n\nLet's check this out by doubling the count using derived state.\n\n```tsx\nimport { useStore } from \"@tanstack/react-store\";\nimport { Store, Derived } from \"@tanstack/store\";\nimport \"./App.css\";\n\nconst countStore = new Store(0);\n\nconst doubledStore = new Derived({\n fn: () => countStore.state * 2,\n deps: [countStore],\n});\ndoubledStore.mount();\n\nfunction App() {\n const count = useStore(countStore);\n const doubledCount = useStore(doubledStore);\n\n return (\n <div>\n <button onClick={() => countStore.setState((n) => n + 1)}>\n Increment - {count}\n </button>\n <div>Doubled - {doubledCount}</div>\n </div>\n );\n}\n\nexport default App;\n```\n\nWe use the `Derived` class to create a new store that is derived from another store. The `Derived` class has a `mount` method that will start the derived store updating.\n\nOnce we've created the derived store we can use it in the `App` component just like we would any other store using the `useStore` hook.\n\nYou can find out everything you need to know on how to use TanStack Store in the [TanStack Store documentation](https://tanstack.com/store/latest).\n\n# Demo files\n\nFiles prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.\n\n# Learn More\n\nYou can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).\n",
21
21
  "index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <link rel=\"icon\" href=\"/favicon.ico\" />\n <meta name=\"theme-color\" content=\"#000000\" />\n <meta\n name=\"description\"\n content=\"Web site created using create-tsrouter-app\"\n />\n <link rel=\"apple-touch-icon\" href=\"/logo192.png\" />\n <link rel=\"manifest\" href=\"/manifest.json\" />\n <title>Create TanStack App - TEST</title>\n </head>\n <body>\n <div id=\"app\"></div>\n <script type=\"module\" src=\"/src/main.jsx\"></script>\n </body>\n</html>\n",
22
- "package.json": "{\n \"name\": \"TEST\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite --port 3000\",\n \"start\": \"vite --port 3000\",\n \"build\": \"vite build && tsc\",\n \"serve\": \"vite preview\",\n \"test\": \"vitest run\"\n },\n \"dependencies\": {\n \"@tanstack/react-devtools\": \"^0.2.2\",\n \"@tanstack/react-form\": \"^1.0.0\",\n \"@tanstack/react-router\": \"^1.130.2\",\n \"@tanstack/react-router-devtools\": \"^1.131.5\",\n \"@tanstack/router-plugin\": \"^1.121.2\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"zod\": \"^3.24.2\"\n },\n \"devDependencies\": {\n \"@testing-library/dom\": \"^10.4.0\",\n \"@testing-library/react\": \"^16.2.0\",\n \"@types/react\": \"^19.0.8\",\n \"@types/react-dom\": \"^19.0.3\",\n \"@vitejs/plugin-react\": \"^4.3.4\",\n \"jsdom\": \"^26.0.0\",\n \"typescript\": \"^5.7.2\",\n \"vite\": \"^6.3.5\",\n \"vitest\": \"^3.0.5\",\n \"web-vitals\": \"^4.2.4\"\n }\n}",
22
+ "package.json": "{\n \"name\": \"TEST\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite --port 3000\",\n \"start\": \"vite --port 3000\",\n \"build\": \"vite build && tsc\",\n \"serve\": \"vite preview\",\n \"test\": \"vitest run\"\n },\n \"dependencies\": {\n \"@tanstack/react-devtools\": \"^0.2.2\",\n \"@tanstack/react-form\": \"^1.0.0\",\n \"@tanstack/react-router\": \"^1.132.0\",\n \"@tanstack/react-router-devtools\": \"^1.132.0\",\n \"@tanstack/router-plugin\": \"^1.132.0\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"zod\": \"^3.24.2\"\n },\n \"devDependencies\": {\n \"@testing-library/dom\": \"^10.4.0\",\n \"@testing-library/react\": \"^16.2.0\",\n \"@types/react\": \"^19.0.8\",\n \"@types/react-dom\": \"^19.0.3\",\n \"@vitejs/plugin-react\": \"^4.3.4\",\n \"jsdom\": \"^26.0.0\",\n \"typescript\": \"^5.7.2\",\n \"vite\": \"^6.3.5\",\n \"vitest\": \"^3.0.5\",\n \"web-vitals\": \"^4.2.4\"\n }\n}",
23
23
  "vite.config.js": "import { defineConfig } from 'vite'\nimport viteReact from '@vitejs/plugin-react'\nimport { TanStackRouterVite } from '@tanstack/router-plugin/vite'\nimport { resolve } from 'node:path'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [TanStackRouterVite({ autoCodeSplitting: true }), viteReact()],\n test: {\n globals: true,\n environment: 'jsdom',\n },\n resolve: {\n alias: {\n '@': resolve(__dirname, './src'),\n },\n },\n})\n"
24
24
  },
25
25
  "commands": [
package/tests/snapshots/react-cra/cr-js-npm.json CHANGED
@@ -13,7 +13,7 @@
13
13
  "/src/styles.css": "\nbody {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n",
14
14
  "README.md": "Welcome to your new TanStack app! \n\n# Getting Started\n\nTo run this application:\n\n```bash\nnpm install\nnpm run start\n```\n\n# Building For Production\n\nTo build this application for production:\n\n```bash\nnpm run build\n```\n\n## Testing\n\nThis project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:\n\n```bash\nnpm run test\n```\n\n## Styling\n\nThis project uses CSS for styling.\n\n\n\n\n## Routing\nThis project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.\n\n### Adding A Route\n\nTo add a new route to your application just add another a new file in the `./src/routes` directory.\n\nTanStack will automatically generate the content of the route file for you.\n\nNow that you have two routes you can use a `Link` component to navigate between them.\n\n### Adding Links\n\nTo use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.\n\n```tsx\nimport { Link } from \"@tanstack/react-router\";\n```\n\nThen anywhere in your JSX you can use it like so:\n\n```tsx\n<Link to=\"/about\">About</Link>\n```\n\nThis will create a link that will navigate to the `/about` route.\n\nMore information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).\n\n### Using A Layout\n\nIn the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.\n\nHere is an example layout that includes a header:\n\n```tsx\nimport { Outlet, createRootRoute } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nimport { Link } from \"@tanstack/react-router\";\n\nexport const Route = createRootRoute({\n component: () => (\n <>\n <header>\n <nav>\n <Link to=\"/\">Home</Link>\n <Link to=\"/about\">About</Link>\n </nav>\n </header>\n <Outlet />\n <TanStackRouterDevtools />\n </>\n ),\n})\n```\n\nThe `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.\n\nMore information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).\n\n\n## Data Fetching\n\nThere are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.\n\nFor example:\n\n```tsx\nconst peopleRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: \"/people\",\n loader: async () => {\n const response = await fetch(\"https://swapi.dev/api/people\");\n return response.json();\n },\n component: () => {\n const data = peopleRoute.useLoaderData();\n return (\n <ul>\n {data.results.map((person) => (\n <li key={person.name}>{person.name}</li>\n ))}\n </ul>\n );\n },\n});\n```\n\nLoaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters).\n\n### React-Query\n\nReact-Query is an excellent addition or alternative to route loading and integrating it into you application is a breeze.\n\nFirst add your dependencies:\n\n```bash\nnpm install @tanstack/react-query @tanstack/react-query-devtools\n```\n\nNext we'll need to create a query client and provider. We recommend putting those in `main.jsx`.\n\n```tsx\nimport { QueryClient, QueryClientProvider } from \"@tanstack/react-query\";\n\n// ...\n\nconst queryClient = new QueryClient();\n\n// ...\n\nif (!rootElement.innerHTML) {\n const root = ReactDOM.createRoot(rootElement);\n\n root.render(\n <QueryClientProvider client={queryClient}>\n <RouterProvider router={router} />\n </QueryClientProvider>\n );\n}\n```\n\nYou can also add TanStack Query Devtools to the root route (optional).\n\n```tsx\nimport { ReactQueryDevtools } from \"@tanstack/react-query-devtools\";\n\nconst rootRoute = createRootRoute({\n component: () => (\n <>\n <Outlet />\n <ReactQueryDevtools buttonPosition=\"top-right\" />\n <TanStackRouterDevtools />\n </>\n ),\n});\n```\n\nNow you can use `useQuery` to fetch your data.\n\n```tsx\nimport { useQuery } from \"@tanstack/react-query\";\n\nimport \"./App.css\";\n\nfunction App() {\n const { data } = useQuery({\n queryKey: [\"people\"],\n queryFn: () =>\n fetch(\"https://swapi.dev/api/people\")\n .then((res) => res.json())\n .then((data) => data.results),\n initialData: [],\n });\n\n return (\n <div>\n <ul>\n {data.map((person) => (\n <li key={person.name}>{person.name}</li>\n ))}\n </ul>\n </div>\n );\n}\n\nexport default App;\n```\n\nYou can find out everything you need to know on how to use React-Query in the [React-Query documentation](https://tanstack.com/query/latest/docs/framework/react/overview).\n\n## State Management\n\nAnother common requirement for React applications is state management. There are many options for state management in React. TanStack Store provides a great starting point for your project.\n\nFirst you need to add TanStack Store as a dependency:\n\n```bash\nnpm install @tanstack/store\n```\n\nNow let's create a simple counter in the `src/App.jsx` file as a demonstration.\n\n```tsx\nimport { useStore } from \"@tanstack/react-store\";\nimport { Store } from \"@tanstack/store\";\nimport \"./App.css\";\n\nconst countStore = new Store(0);\n\nfunction App() {\n const count = useStore(countStore);\n return (\n <div>\n <button onClick={() => countStore.setState((n) => n + 1)}>\n Increment - {count}\n </button>\n </div>\n );\n}\n\nexport default App;\n```\n\nOne of the many nice features of TanStack Store is the ability to derive state from other state. That derived state will update when the base state updates.\n\nLet's check this out by doubling the count using derived state.\n\n```tsx\nimport { useStore } from \"@tanstack/react-store\";\nimport { Store, Derived } from \"@tanstack/store\";\nimport \"./App.css\";\n\nconst countStore = new Store(0);\n\nconst doubledStore = new Derived({\n fn: () => countStore.state * 2,\n deps: [countStore],\n});\ndoubledStore.mount();\n\nfunction App() {\n const count = useStore(countStore);\n const doubledCount = useStore(doubledStore);\n\n return (\n <div>\n <button onClick={() => countStore.setState((n) => n + 1)}>\n Increment - {count}\n </button>\n <div>Doubled - {doubledCount}</div>\n </div>\n );\n}\n\nexport default App;\n```\n\nWe use the `Derived` class to create a new store that is derived from another store. The `Derived` class has a `mount` method that will start the derived store updating.\n\nOnce we've created the derived store we can use it in the `App` component just like we would any other store using the `useStore` hook.\n\nYou can find out everything you need to know on how to use TanStack Store in the [TanStack Store documentation](https://tanstack.com/store/latest).\n\n# Demo files\n\nFiles prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.\n\n# Learn More\n\nYou can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).\n",
15
15
  "index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <link rel=\"icon\" href=\"/favicon.ico\" />\n <meta name=\"theme-color\" content=\"#000000\" />\n <meta\n name=\"description\"\n content=\"Web site created using create-tsrouter-app\"\n />\n <link rel=\"apple-touch-icon\" href=\"/logo192.png\" />\n <link rel=\"manifest\" href=\"/manifest.json\" />\n <title>Create TanStack App - TEST</title>\n </head>\n <body>\n <div id=\"app\"></div>\n <script type=\"module\" src=\"/src/main.jsx\"></script>\n </body>\n</html>\n",
16
- "package.json": "{\n \"name\": \"TEST\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite --port 3000\",\n \"start\": \"vite --port 3000\",\n \"build\": \"vite build && tsc\",\n \"serve\": \"vite preview\",\n \"test\": \"vitest run\"\n },\n \"dependencies\": {\n \"@tanstack/react-devtools\": \"^0.2.2\",\n \"@tanstack/react-router\": \"^1.130.2\",\n \"@tanstack/react-router-devtools\": \"^1.131.5\",\n \"@tanstack/router-plugin\": \"^1.121.2\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\"\n },\n \"devDependencies\": {\n \"@testing-library/dom\": \"^10.4.0\",\n \"@testing-library/react\": \"^16.2.0\",\n \"@types/react\": \"^19.0.8\",\n \"@types/react-dom\": \"^19.0.3\",\n \"@vitejs/plugin-react\": \"^4.3.4\",\n \"jsdom\": \"^26.0.0\",\n \"typescript\": \"^5.7.2\",\n \"vite\": \"^6.3.5\",\n \"vitest\": \"^3.0.5\",\n \"web-vitals\": \"^4.2.4\"\n }\n}",
16
+ "package.json": "{\n \"name\": \"TEST\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite --port 3000\",\n \"start\": \"vite --port 3000\",\n \"build\": \"vite build && tsc\",\n \"serve\": \"vite preview\",\n \"test\": \"vitest run\"\n },\n \"dependencies\": {\n \"@tanstack/react-devtools\": \"^0.2.2\",\n \"@tanstack/react-router\": \"^1.132.0\",\n \"@tanstack/react-router-devtools\": \"^1.132.0\",\n \"@tanstack/router-plugin\": \"^1.132.0\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\"\n },\n \"devDependencies\": {\n \"@testing-library/dom\": \"^10.4.0\",\n \"@testing-library/react\": \"^16.2.0\",\n \"@types/react\": \"^19.0.8\",\n \"@types/react-dom\": \"^19.0.3\",\n \"@vitejs/plugin-react\": \"^4.3.4\",\n \"jsdom\": \"^26.0.0\",\n \"typescript\": \"^5.7.2\",\n \"vite\": \"^6.3.5\",\n \"vitest\": \"^3.0.5\",\n \"web-vitals\": \"^4.2.4\"\n }\n}",
17
17
  "vite.config.js": "import { defineConfig } from 'vite'\nimport viteReact from '@vitejs/plugin-react'\nimport { TanStackRouterVite } from '@tanstack/router-plugin/vite'\nimport { resolve } from 'node:path'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [TanStackRouterVite({ autoCodeSplitting: true }), viteReact()],\n test: {\n globals: true,\n environment: 'jsdom',\n },\n resolve: {\n alias: {\n '@': resolve(__dirname, './src'),\n },\n },\n})\n"
18
18
  },
19
19
  "commands": [
package/tests/snapshots/react-cra/cr-ts-npm.json CHANGED
@@ -13,7 +13,7 @@
13
13
  "/src/styles.css": "\nbody {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n",
14
14
  "README.md": "Welcome to your new TanStack app! \n\n# Getting Started\n\nTo run this application:\n\n```bash\nnpm install\nnpm run start\n```\n\n# Building For Production\n\nTo build this application for production:\n\n```bash\nnpm run build\n```\n\n## Testing\n\nThis project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:\n\n```bash\nnpm run test\n```\n\n## Styling\n\nThis project uses CSS for styling.\n\n\n\n\n## Routing\nThis project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.\n\n### Adding A Route\n\nTo add a new route to your application just add another a new file in the `./src/routes` directory.\n\nTanStack will automatically generate the content of the route file for you.\n\nNow that you have two routes you can use a `Link` component to navigate between them.\n\n### Adding Links\n\nTo use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.\n\n```tsx\nimport { Link } from \"@tanstack/react-router\";\n```\n\nThen anywhere in your JSX you can use it like so:\n\n```tsx\n<Link to=\"/about\">About</Link>\n```\n\nThis will create a link that will navigate to the `/about` route.\n\nMore information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).\n\n### Using A Layout\n\nIn the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.\n\nHere is an example layout that includes a header:\n\n```tsx\nimport { Outlet, createRootRoute } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nimport { Link } from \"@tanstack/react-router\";\n\nexport const Route = createRootRoute({\n component: () => (\n <>\n <header>\n <nav>\n <Link to=\"/\">Home</Link>\n <Link to=\"/about\">About</Link>\n </nav>\n </header>\n <Outlet />\n <TanStackRouterDevtools />\n </>\n ),\n})\n```\n\nThe `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.\n\nMore information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).\n\n\n## Data Fetching\n\nThere are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.\n\nFor example:\n\n```tsx\nconst peopleRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: \"/people\",\n loader: async () => {\n const response = await fetch(\"https://swapi.dev/api/people\");\n return response.json() as Promise<{\n results: {\n name: string;\n }[];\n }>;\n },\n component: () => {\n const data = peopleRoute.useLoaderData();\n return (\n <ul>\n {data.results.map((person) => (\n <li key={person.name}>{person.name}</li>\n ))}\n </ul>\n );\n },\n});\n```\n\nLoaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters).\n\n### React-Query\n\nReact-Query is an excellent addition or alternative to route loading and integrating it into you application is a breeze.\n\nFirst add your dependencies:\n\n```bash\nnpm install @tanstack/react-query @tanstack/react-query-devtools\n```\n\nNext we'll need to create a query client and provider. We recommend putting those in `main.tsx`.\n\n```tsx\nimport { QueryClient, QueryClientProvider } from \"@tanstack/react-query\";\n\n// ...\n\nconst queryClient = new QueryClient();\n\n// ...\n\nif (!rootElement.innerHTML) {\n const root = ReactDOM.createRoot(rootElement);\n\n root.render(\n <QueryClientProvider client={queryClient}>\n <RouterProvider router={router} />\n </QueryClientProvider>\n );\n}\n```\n\nYou can also add TanStack Query Devtools to the root route (optional).\n\n```tsx\nimport { ReactQueryDevtools } from \"@tanstack/react-query-devtools\";\n\nconst rootRoute = createRootRoute({\n component: () => (\n <>\n <Outlet />\n <ReactQueryDevtools buttonPosition=\"top-right\" />\n <TanStackRouterDevtools />\n </>\n ),\n});\n```\n\nNow you can use `useQuery` to fetch your data.\n\n```tsx\nimport { useQuery } from \"@tanstack/react-query\";\n\nimport \"./App.css\";\n\nfunction App() {\n const { data } = useQuery({\n queryKey: [\"people\"],\n queryFn: () =>\n fetch(\"https://swapi.dev/api/people\")\n .then((res) => res.json())\n .then((data) => data.results as { name: string }[]),\n initialData: [],\n });\n\n return (\n <div>\n <ul>\n {data.map((person) => (\n <li key={person.name}>{person.name}</li>\n ))}\n </ul>\n </div>\n );\n}\n\nexport default App;\n```\n\nYou can find out everything you need to know on how to use React-Query in the [React-Query documentation](https://tanstack.com/query/latest/docs/framework/react/overview).\n\n## State Management\n\nAnother common requirement for React applications is state management. There are many options for state management in React. TanStack Store provides a great starting point for your project.\n\nFirst you need to add TanStack Store as a dependency:\n\n```bash\nnpm install @tanstack/store\n```\n\nNow let's create a simple counter in the `src/App.tsx` file as a demonstration.\n\n```tsx\nimport { useStore } from \"@tanstack/react-store\";\nimport { Store } from \"@tanstack/store\";\nimport \"./App.css\";\n\nconst countStore = new Store(0);\n\nfunction App() {\n const count = useStore(countStore);\n return (\n <div>\n <button onClick={() => countStore.setState((n) => n + 1)}>\n Increment - {count}\n </button>\n </div>\n );\n}\n\nexport default App;\n```\n\nOne of the many nice features of TanStack Store is the ability to derive state from other state. That derived state will update when the base state updates.\n\nLet's check this out by doubling the count using derived state.\n\n```tsx\nimport { useStore } from \"@tanstack/react-store\";\nimport { Store, Derived } from \"@tanstack/store\";\nimport \"./App.css\";\n\nconst countStore = new Store(0);\n\nconst doubledStore = new Derived({\n fn: () => countStore.state * 2,\n deps: [countStore],\n});\ndoubledStore.mount();\n\nfunction App() {\n const count = useStore(countStore);\n const doubledCount = useStore(doubledStore);\n\n return (\n <div>\n <button onClick={() => countStore.setState((n) => n + 1)}>\n Increment - {count}\n </button>\n <div>Doubled - {doubledCount}</div>\n </div>\n );\n}\n\nexport default App;\n```\n\nWe use the `Derived` class to create a new store that is derived from another store. The `Derived` class has a `mount` method that will start the derived store updating.\n\nOnce we've created the derived store we can use it in the `App` component just like we would any other store using the `useStore` hook.\n\nYou can find out everything you need to know on how to use TanStack Store in the [TanStack Store documentation](https://tanstack.com/store/latest).\n\n# Demo files\n\nFiles prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.\n\n# Learn More\n\nYou can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).\n",
15
15
  "index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <link rel=\"icon\" href=\"/favicon.ico\" />\n <meta name=\"theme-color\" content=\"#000000\" />\n <meta\n name=\"description\"\n content=\"Web site created using create-tsrouter-app\"\n />\n <link rel=\"apple-touch-icon\" href=\"/logo192.png\" />\n <link rel=\"manifest\" href=\"/manifest.json\" />\n <title>Create TanStack App - TEST</title>\n </head>\n <body>\n <div id=\"app\"></div>\n <script type=\"module\" src=\"/src/main.tsx\"></script>\n </body>\n</html>\n",
16
- "package.json": "{\n \"name\": \"TEST\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite --port 3000\",\n \"start\": \"vite --port 3000\",\n \"build\": \"vite build && tsc\",\n \"serve\": \"vite preview\",\n \"test\": \"vitest run\"\n },\n \"dependencies\": {\n \"@tanstack/react-devtools\": \"^0.2.2\",\n \"@tanstack/react-router\": \"^1.130.2\",\n \"@tanstack/react-router-devtools\": \"^1.131.5\",\n \"@tanstack/router-plugin\": \"^1.121.2\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\"\n },\n \"devDependencies\": {\n \"@testing-library/dom\": \"^10.4.0\",\n \"@testing-library/react\": \"^16.2.0\",\n \"@types/react\": \"^19.0.8\",\n \"@types/react-dom\": \"^19.0.3\",\n \"@vitejs/plugin-react\": \"^4.3.4\",\n \"jsdom\": \"^26.0.0\",\n \"typescript\": \"^5.7.2\",\n \"vite\": \"^6.3.5\",\n \"vitest\": \"^3.0.5\",\n \"web-vitals\": \"^4.2.4\"\n }\n}",
16
+ "package.json": "{\n \"name\": \"TEST\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite --port 3000\",\n \"start\": \"vite --port 3000\",\n \"build\": \"vite build && tsc\",\n \"serve\": \"vite preview\",\n \"test\": \"vitest run\"\n },\n \"dependencies\": {\n \"@tanstack/react-devtools\": \"^0.2.2\",\n \"@tanstack/react-router\": \"^1.132.0\",\n \"@tanstack/react-router-devtools\": \"^1.132.0\",\n \"@tanstack/router-plugin\": \"^1.132.0\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\"\n },\n \"devDependencies\": {\n \"@testing-library/dom\": \"^10.4.0\",\n \"@testing-library/react\": \"^16.2.0\",\n \"@types/node\": \"^22.10.2\",\n \"@types/react\": \"^19.0.8\",\n \"@types/react-dom\": \"^19.0.3\",\n \"@vitejs/plugin-react\": \"^4.3.4\",\n \"jsdom\": \"^26.0.0\",\n \"typescript\": \"^5.7.2\",\n \"vite\": \"^6.3.5\",\n \"vitest\": \"^3.0.5\",\n \"web-vitals\": \"^4.2.4\"\n }\n}",
17
17
  "tsconfig.json": "{\n \"include\": [\"**/*.ts\", \"**/*.tsx\"],\n \"compilerOptions\": {\n \"target\": \"ES2022\",\n \"jsx\": \"react-jsx\",\n \"module\": \"ESNext\",\n \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n \"types\": [\"vite/client\"],\n\n /* Bundler mode */\n \"moduleResolution\": \"bundler\",\n \"allowImportingTsExtensions\": true,\n \"verbatimModuleSyntax\": true,\n \"noEmit\": true,\n\n /* Linting */\n \"skipLibCheck\": true,\n \"strict\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"noUncheckedSideEffectImports\": true,\n \"baseUrl\": \".\",\n \"paths\": {\n \"@/*\": [\"./src/*\"],\n }\n }\n}\n",
18
18
  "vite.config.ts": "import { defineConfig } from 'vite'\nimport viteReact from '@vitejs/plugin-react'\nimport { TanStackRouterVite } from '@tanstack/router-plugin/vite'\nimport { resolve } from 'node:path'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [TanStackRouterVite({ autoCodeSplitting: true }), viteReact()],\n test: {\n globals: true,\n environment: 'jsdom',\n },\n resolve: {\n alias: {\n '@': resolve(__dirname, './src'),\n },\n },\n})\n"
19
19
  },
package/tests/snapshots/react-cra/cr-ts-start-npm.json CHANGED
@@ -6,17 +6,17 @@
6
6
  "/public/manifest.json": "{\n \"short_name\": \"TanStack App\",\n \"name\": \"Create TanStack App Sample\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n \"sizes\": \"64x64 32x32 24x24 16x16\",\n \"type\": \"image/x-icon\"\n },\n {\n \"src\": \"logo192.png\",\n \"type\": \"image/png\",\n \"sizes\": \"192x192\"\n },\n {\n \"src\": \"logo512.png\",\n \"type\": \"image/png\",\n \"sizes\": \"512x512\"\n }\n ],\n \"start_url\": \".\",\n \"display\": \"standalone\",\n \"theme_color\": \"#000000\",\n \"background_color\": \"#ffffff\"\n}\n",
7
7
  "/public/robots.txt": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n",
8
8
  "/src/components/Header.tsx": "import { Link } from '@tanstack/react-router'\n\nexport default function Header() {\n return (\n <header className=\"p-2 flex gap-2 bg-white text-black justify-between\">\n <nav className=\"flex flex-row\">\n <div className=\"px-2 font-bold\">\n <Link to=\"/\">Home</Link>\n </div>\n\n <div className=\"px-2 font-bold\">\n <Link to=\"/demo/start/server-funcs\">Start - Server Functions</Link>\n </div>\n\n <div className=\"px-2 font-bold\">\n <Link to=\"/demo/start/api-request\">Start - API Request</Link>\n </div>\n </nav>\n </header>\n )\n}\n",
9
- "/src/router.tsx": "import { createRouter as createTanstackRouter } from '@tanstack/react-router'\n\n// Import the generated route tree\nimport { routeTree } from './routeTree.gen'\n\n// Create a new router instance\nexport const createRouter = () => {\n return createTanstackRouter({\n routeTree,\n scrollRestoration: true,\n defaultPreloadStaleTime: 0,\n })\n}\n\n// Register the router instance for type safety\ndeclare module '@tanstack/react-router' {\n interface Register {\n router: ReturnType<typeof createRouter>\n }\n}\n",
9
+ "/src/router.tsx": "import { createRouter } from '@tanstack/react-router'\n\n// Import the generated route tree\nimport { routeTree } from './routeTree.gen'\n\n// Create a new router instance\nexport const getRouter = () => {\n return createRouter({\n routeTree,\n scrollRestoration: true,\n defaultPreloadStaleTime: 0,\n })\n}\n",
10
10
  "/src/routes/__root.tsx": "import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'\nimport { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'\nimport { TanstackDevtools } from '@tanstack/react-devtools'\n\nimport Header from '../components/Header'\n\nimport appCss from '../styles.css?url'\n\nexport const Route = createRootRoute({\n head: () => ({\n meta: [\n {\n charSet: 'utf-8',\n },\n {\n name: 'viewport',\n content: 'width=device-width, initial-scale=1',\n },\n {\n title: 'TanStack Start Starter',\n },\n ],\n links: [\n {\n rel: 'stylesheet',\n href: appCss,\n },\n ],\n }),\n\n shellComponent: RootDocument,\n})\n\nfunction RootDocument({ children }: { children: React.ReactNode }) {\n return (\n <html lang=\"en\">\n <head>\n <HeadContent />\n </head>\n <body>\n <Header />\n {children}\n <TanstackDevtools\n config={{\n position: 'bottom-left',\n }}\n plugins={[\n {\n name: 'Tanstack Router',\n render: <TanStackRouterDevtoolsPanel />,\n },\n ]}\n />\n <Scripts />\n </body>\n </html>\n )\n}\n",
11
- "/src/routes/api.demo-names.ts": "import { createServerFileRoute } from '@tanstack/react-start/server'\n\nexport const ServerRoute = createServerFileRoute().methods({\n GET: () => {\n return new Response(JSON.stringify(['Alice', 'Bob', 'Charlie']), {\n headers: {\n 'Content-Type': 'application/json',\n },\n })\n },\n})\n",
11
+ "/src/routes/api.demo-names.ts": "import { createFileRoute } from '@tanstack/react-router'\n\nexport const Route = createFileRoute('/api/demo-names')({\n server: {\n handlers: {\n GET: () => {\n return new Response(JSON.stringify(['Alice', 'Bob', 'Charlie']), {\n headers: {\n 'Content-Type': 'application/json',\n },\n })\n },\n },\n },\n})\n",
12
12
  "/src/routes/demo.start.api-request.tsx": "import { useEffect, useState } from 'react'\n\nimport { createFileRoute } from '@tanstack/react-router'\n\nfunction getNames() {\n return fetch('/api/demo-names').then((res) => res.json())\n}\n\nexport const Route = createFileRoute('/demo/start/api-request')({\n component: Home,\n})\n\nfunction Home() {\n const [names, setNames] = useState<Array<string>>([])\n\n useEffect(() => {\n getNames().then(setNames)\n }, [])\n\n return (\n <div\n className=\"flex items-center justify-center min-h-screen p-4 text-white\"\n style={{\n backgroundColor: '#000',\n backgroundImage:\n 'radial-gradient(ellipse 60% 60% at 0% 100%, #444 0%, #222 60%, #000 100%)',\n }}\n >\n <div className=\"w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10\">\n <h1 className=\"text-2xl mb-4\">Start API Request Demo - Names List</h1>\n <ul className=\"mb-4 space-y-2\">\n {names.map((name) => (\n <li\n key={name}\n className=\"bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md\"\n >\n <span className=\"text-lg text-white\">{name}</span>\n </li>\n ))}\n </ul>\n </div>\n </div>\n )\n}\n",
13
- "/src/routes/demo.start.server-funcs.tsx": "import fs from 'node:fs'\nimport { useCallback, useState } from 'react'\nimport { createFileRoute, useRouter } from '@tanstack/react-router'\nimport { createServerFn } from '@tanstack/react-start'\n\nconst filePath = 'todos.json'\n\nasync function readTodos() {\n return JSON.parse(\n await fs.promises.readFile(filePath, 'utf-8').catch(() =>\n JSON.stringify(\n [\n { id: 1, name: 'Get groceries' },\n { id: 2, name: 'Buy a new phone' },\n ],\n null,\n 2,\n ),\n ),\n )\n}\n\nconst getTodos = createServerFn({\n method: 'GET',\n}).handler(async () => await readTodos())\n\nconst addTodo = createServerFn({ method: 'POST' })\n .validator((d: string) => d)\n .handler(async ({ data }) => {\n const todos = await readTodos()\n todos.push({ id: todos.length + 1, name: data })\n await fs.promises.writeFile(filePath, JSON.stringify(todos, null, 2))\n return todos\n })\n\nexport const Route = createFileRoute('/demo/start/server-funcs')({\n component: Home,\n loader: async () => await getTodos(),\n})\n\nfunction Home() {\n const router = useRouter()\n let todos = Route.useLoaderData()\n\n const [todo, setTodo] = useState('')\n\n const submitTodo = useCallback(async () => {\n todos = await addTodo({ data: todo })\n setTodo('')\n router.invalidate()\n }, [addTodo, todo])\n\n return (\n <div\n className=\"flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white\"\n style={{\n backgroundImage:\n 'radial-gradient(50% 50% at 20% 60%, #23272a 0%, #18181b 50%, #000000 100%)',\n }}\n >\n <div className=\"w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10\">\n <h1 className=\"text-2xl mb-4\">Start Server Functions - Todo Example</h1>\n <ul className=\"mb-4 space-y-2\">\n {todos?.map((t) => (\n <li\n key={t.id}\n className=\"bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md\"\n >\n <span className=\"text-lg text-white\">{t.name}</span>\n </li>\n ))}\n </ul>\n <div className=\"flex flex-col gap-2\">\n <input\n type=\"text\"\n value={todo}\n onChange={(e) => setTodo(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n submitTodo()\n }\n }}\n placeholder=\"Enter a new todo...\"\n 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\"\n />\n <button\n disabled={todo.trim().length === 0}\n onClick={submitTodo}\n 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\"\n >\n Add todo\n </button>\n </div>\n </div>\n </div>\n )\n}\n",
13
+ "/src/routes/demo.start.server-funcs.tsx": "import fs from 'node:fs'\nimport { useCallback, useState } from 'react'\nimport { createFileRoute, useRouter } from '@tanstack/react-router'\nimport { createServerFn } from '@tanstack/react-start'\n\nconst filePath = 'todos.json'\n\nasync function readTodos() {\n return JSON.parse(\n await fs.promises.readFile(filePath, 'utf-8').catch(() =>\n JSON.stringify(\n [\n { id: 1, name: 'Get groceries' },\n { id: 2, name: 'Buy a new phone' },\n ],\n null,\n 2,\n ),\n ),\n )\n}\n\nconst getTodos = createServerFn({\n method: 'GET',\n}).handler(async () => await readTodos())\n\nconst addTodo = createServerFn({ method: 'POST' })\n .inputValidator((d: string) => d)\n .handler(async ({ data }) => {\n const todos = await readTodos()\n todos.push({ id: todos.length + 1, name: data })\n await fs.promises.writeFile(filePath, JSON.stringify(todos, null, 2))\n return todos\n })\n\nexport const Route = createFileRoute('/demo/start/server-funcs')({\n component: Home,\n loader: async () => await getTodos(),\n})\n\nfunction Home() {\n const router = useRouter()\n let todos = Route.useLoaderData()\n\n const [todo, setTodo] = useState('')\n\n const submitTodo = useCallback(async () => {\n todos = await addTodo({ data: todo })\n setTodo('')\n router.invalidate()\n }, [addTodo, todo])\n\n return (\n <div\n className=\"flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white\"\n style={{\n backgroundImage:\n 'radial-gradient(50% 50% at 20% 60%, #23272a 0%, #18181b 50%, #000000 100%)',\n }}\n >\n <div className=\"w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10\">\n <h1 className=\"text-2xl mb-4\">Start Server Functions - Todo Example</h1>\n <ul className=\"mb-4 space-y-2\">\n {todos?.map((t) => (\n <li\n key={t.id}\n className=\"bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md\"\n >\n <span className=\"text-lg text-white\">{t.name}</span>\n </li>\n ))}\n </ul>\n <div className=\"flex flex-col gap-2\">\n <input\n type=\"text\"\n value={todo}\n onChange={(e) => setTodo(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n submitTodo()\n }\n }}\n placeholder=\"Enter a new todo...\"\n 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\"\n />\n <button\n disabled={todo.trim().length === 0}\n onClick={submitTodo}\n 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\"\n >\n Add todo\n </button>\n </div>\n </div>\n </div>\n )\n}\n",
14
14
  "/src/routes/index.tsx": "import { createFileRoute } from '@tanstack/react-router'\nimport logo from '../logo.svg'\n\nexport const Route = createFileRoute('/')({\n component: App,\n})\n\nfunction App() {\n return (\n <div className=\"text-center\">\n <header className=\"min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)]\">\n <img\n src={logo}\n className=\"h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]\"\n alt=\"logo\"\n />\n <p>\n Edit <code>src/routes/index.tsx</code> and save to reload.\n </p>\n <a\n className=\"text-[#61dafb] hover:underline\"\n href=\"https://reactjs.org\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn React\n </a>\n <a\n className=\"text-[#61dafb] hover:underline\"\n href=\"https://tanstack.com\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Learn TanStack\n </a>\n </header>\n </div>\n )\n}\n",
15
15
  "/src/styles.css": "@import \"tailwindcss\";\n\nbody {\n @apply m-0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n",
16
16
  "README.md": "Welcome to your new TanStack app! \n\n# Getting Started\n\nTo run this application:\n\n```bash\nnpm install\nnpm run start\n```\n\n# Building For Production\n\nTo build this application for production:\n\n```bash\nnpm run build\n```\n\n## Testing\n\nThis project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:\n\n```bash\nnpm run test\n```\n\n## Styling\n\nThis project uses [Tailwind CSS](https://tailwindcss.com/) for styling.\n\n\n\n\n## Routing\nThis project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.\n\n### Adding A Route\n\nTo add a new route to your application just add another a new file in the `./src/routes` directory.\n\nTanStack will automatically generate the content of the route file for you.\n\nNow that you have two routes you can use a `Link` component to navigate between them.\n\n### Adding Links\n\nTo use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.\n\n```tsx\nimport { Link } from \"@tanstack/react-router\";\n```\n\nThen anywhere in your JSX you can use it like so:\n\n```tsx\n<Link to=\"/about\">About</Link>\n```\n\nThis will create a link that will navigate to the `/about` route.\n\nMore information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).\n\n### Using A Layout\n\nIn the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.\n\nHere is an example layout that includes a header:\n\n```tsx\nimport { Outlet, createRootRoute } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/react-router-devtools'\n\nimport { Link } from \"@tanstack/react-router\";\n\nexport const Route = createRootRoute({\n component: () => (\n <>\n <header>\n <nav>\n <Link to=\"/\">Home</Link>\n <Link to=\"/about\">About</Link>\n </nav>\n </header>\n <Outlet />\n <TanStackRouterDevtools />\n </>\n ),\n})\n```\n\nThe `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.\n\nMore information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).\n\n\n## Data Fetching\n\nThere are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.\n\nFor example:\n\n```tsx\nconst peopleRoute = createRoute({\n getParentRoute: () => rootRoute,\n path: \"/people\",\n loader: async () => {\n const response = await fetch(\"https://swapi.dev/api/people\");\n return response.json() as Promise<{\n results: {\n name: string;\n }[];\n }>;\n },\n component: () => {\n const data = peopleRoute.useLoaderData();\n return (\n <ul>\n {data.results.map((person) => (\n <li key={person.name}>{person.name}</li>\n ))}\n </ul>\n );\n },\n});\n```\n\nLoaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters).\n\n### React-Query\n\nReact-Query is an excellent addition or alternative to route loading and integrating it into you application is a breeze.\n\nFirst add your dependencies:\n\n```bash\nnpm install @tanstack/react-query @tanstack/react-query-devtools\n```\n\nNext we'll need to create a query client and provider. We recommend putting those in `main.tsx`.\n\n```tsx\nimport { QueryClient, QueryClientProvider } from \"@tanstack/react-query\";\n\n// ...\n\nconst queryClient = new QueryClient();\n\n// ...\n\nif (!rootElement.innerHTML) {\n const root = ReactDOM.createRoot(rootElement);\n\n root.render(\n <QueryClientProvider client={queryClient}>\n <RouterProvider router={router} />\n </QueryClientProvider>\n );\n}\n```\n\nYou can also add TanStack Query Devtools to the root route (optional).\n\n```tsx\nimport { ReactQueryDevtools } from \"@tanstack/react-query-devtools\";\n\nconst rootRoute = createRootRoute({\n component: () => (\n <>\n <Outlet />\n <ReactQueryDevtools buttonPosition=\"top-right\" />\n <TanStackRouterDevtools />\n </>\n ),\n});\n```\n\nNow you can use `useQuery` to fetch your data.\n\n```tsx\nimport { useQuery } from \"@tanstack/react-query\";\n\nimport \"./App.css\";\n\nfunction App() {\n const { data } = useQuery({\n queryKey: [\"people\"],\n queryFn: () =>\n fetch(\"https://swapi.dev/api/people\")\n .then((res) => res.json())\n .then((data) => data.results as { name: string }[]),\n initialData: [],\n });\n\n return (\n <div>\n <ul>\n {data.map((person) => (\n <li key={person.name}>{person.name}</li>\n ))}\n </ul>\n </div>\n );\n}\n\nexport default App;\n```\n\nYou can find out everything you need to know on how to use React-Query in the [React-Query documentation](https://tanstack.com/query/latest/docs/framework/react/overview).\n\n## State Management\n\nAnother common requirement for React applications is state management. There are many options for state management in React. TanStack Store provides a great starting point for your project.\n\nFirst you need to add TanStack Store as a dependency:\n\n```bash\nnpm install @tanstack/store\n```\n\nNow let's create a simple counter in the `src/App.tsx` file as a demonstration.\n\n```tsx\nimport { useStore } from \"@tanstack/react-store\";\nimport { Store } from \"@tanstack/store\";\nimport \"./App.css\";\n\nconst countStore = new Store(0);\n\nfunction App() {\n const count = useStore(countStore);\n return (\n <div>\n <button onClick={() => countStore.setState((n) => n + 1)}>\n Increment - {count}\n </button>\n </div>\n );\n}\n\nexport default App;\n```\n\nOne of the many nice features of TanStack Store is the ability to derive state from other state. That derived state will update when the base state updates.\n\nLet's check this out by doubling the count using derived state.\n\n```tsx\nimport { useStore } from \"@tanstack/react-store\";\nimport { Store, Derived } from \"@tanstack/store\";\nimport \"./App.css\";\n\nconst countStore = new Store(0);\n\nconst doubledStore = new Derived({\n fn: () => countStore.state * 2,\n deps: [countStore],\n});\ndoubledStore.mount();\n\nfunction App() {\n const count = useStore(countStore);\n const doubledCount = useStore(doubledStore);\n\n return (\n <div>\n <button onClick={() => countStore.setState((n) => n + 1)}>\n Increment - {count}\n </button>\n <div>Doubled - {doubledCount}</div>\n </div>\n );\n}\n\nexport default App;\n```\n\nWe use the `Derived` class to create a new store that is derived from another store. The `Derived` class has a `mount` method that will start the derived store updating.\n\nOnce we've created the derived store we can use it in the `App` component just like we would any other store using the `useStore` hook.\n\nYou can find out everything you need to know on how to use TanStack Store in the [TanStack Store documentation](https://tanstack.com/store/latest).\n\n# Demo files\n\nFiles prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.\n\n# Learn More\n\nYou can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).\n",
17
- "package.json": "{\n \"name\": \"TEST\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite dev --port 3000\",\n \"start\": \"node .output/server/index.mjs\",\n \"build\": \"vite build\",\n \"serve\": \"vite preview\",\n \"test\": \"vitest run\"\n },\n \"dependencies\": {\n \"@tailwindcss/vite\": \"^4.0.6\",\n \"@tanstack/react-devtools\": \"^0.2.2\",\n \"@tanstack/react-router\": \"^1.130.2\",\n \"@tanstack/react-router-devtools\": \"^1.131.5\",\n \"@tanstack/react-router-ssr-query\": \"^1.131.7\",\n \"@tanstack/react-start\": \"^1.131.7\",\n \"@tanstack/router-plugin\": \"^1.121.2\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"tailwindcss\": \"^4.0.6\",\n \"vite-tsconfig-paths\": \"^5.1.4\"\n },\n \"devDependencies\": {\n \"@testing-library/dom\": \"^10.4.0\",\n \"@testing-library/react\": \"^16.2.0\",\n \"@types/react\": \"^19.0.8\",\n \"@types/react-dom\": \"^19.0.3\",\n \"@vitejs/plugin-react\": \"^4.3.4\",\n \"jsdom\": \"^26.0.0\",\n \"typescript\": \"^5.7.2\",\n \"vite\": \"^6.3.5\",\n \"vitest\": \"^3.0.5\",\n \"web-vitals\": \"^4.2.4\"\n }\n}",
17
+ "package.json": "{\n \"name\": \"TEST\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite dev --port 3000\",\n \"start\": \"node .output/server/index.mjs\",\n \"build\": \"vite build\",\n \"serve\": \"vite preview\",\n \"test\": \"vitest run\"\n },\n \"dependencies\": {\n \"@tailwindcss/vite\": \"^4.0.6\",\n \"@tanstack/react-devtools\": \"^0.2.2\",\n \"@tanstack/react-router\": \"^1.132.0\",\n \"@tanstack/react-router-devtools\": \"^1.132.0\",\n \"@tanstack/react-router-ssr-query\": \"^1.131.7\",\n \"@tanstack/react-start\": \"^1.132.0\",\n \"@tanstack/router-plugin\": \"^1.132.0\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"tailwindcss\": \"^4.0.6\",\n \"vite-tsconfig-paths\": \"^5.1.4\"\n },\n \"devDependencies\": {\n \"@testing-library/dom\": \"^10.4.0\",\n \"@testing-library/react\": \"^16.2.0\",\n \"@types/node\": \"^22.10.2\",\n \"@types/react\": \"^19.0.8\",\n \"@types/react-dom\": \"^19.0.3\",\n \"@vitejs/plugin-react\": \"^4.3.4\",\n \"jsdom\": \"^26.0.0\",\n \"typescript\": \"^5.7.2\",\n \"vite\": \"^6.3.5\",\n \"vitest\": \"^3.0.5\",\n \"web-vitals\": \"^4.2.4\"\n }\n}",
18
18
  "tsconfig.json": "{\n \"include\": [\"**/*.ts\", \"**/*.tsx\"],\n \"compilerOptions\": {\n \"target\": \"ES2022\",\n \"jsx\": \"react-jsx\",\n \"module\": \"ESNext\",\n \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n \"types\": [\"vite/client\"],\n\n /* Bundler mode */\n \"moduleResolution\": \"bundler\",\n \"allowImportingTsExtensions\": true,\n \"verbatimModuleSyntax\": false,\n \"noEmit\": true,\n\n /* Linting */\n \"skipLibCheck\": true,\n \"strict\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"noUncheckedSideEffectImports\": true,\n \"baseUrl\": \".\",\n \"paths\": {\n \"@/*\": [\"./src/*\"],\n }\n }\n}\n",
19
- "vite.config.ts": "import { defineConfig } from 'vite'\nimport { tanstackStart } from '@tanstack/react-start/plugin/vite'\nimport viteReact from '@vitejs/plugin-react'\nimport viteTsConfigPaths from 'vite-tsconfig-paths'\nimport tailwindcss from '@tailwindcss/vite'\n\nconst config = defineConfig({\n plugins: [\n // this is the plugin that enables path aliases\n viteTsConfigPaths({\n projects: ['./tsconfig.json'],\n }),\n tailwindcss(),\n tanstackStart({\n customViteReactPlugin: true,\n }),\n viteReact(),\n ],\n})\n\nexport default config\n"
19
+ "vite.config.ts": "import { defineConfig } from 'vite'\nimport { tanstackStart } from '@tanstack/react-start/plugin/vite'\nimport viteReact from '@vitejs/plugin-react'\nimport viteTsConfigPaths from 'vite-tsconfig-paths'\nimport tailwindcss from '@tailwindcss/vite'\n\nconst config = defineConfig({\n plugins: [\n // this is the plugin that enables path aliases\n viteTsConfigPaths({\n projects: ['./tsconfig.json'],\n }),\n tailwindcss(),\n tanstackStart(),\n viteReact(),\n ],\n})\n\nexport default config\n"
20
20
  },
21
21
  "commands": [
22
22
  "git init",