From e8820f5d32149eacb07482176f712569f7c4c202 Mon Sep 17 00:00:00 2001 From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com> Date: Sat, 27 Sep 2025 12:22:52 +1000 Subject: [PATCH] docs(examples): update star-wars and rick-morty examples --- .github/workflows/pr.yml | 2 - examples/react/rick-morty/index.html | 2 +- examples/react/rick-morty/package.json | 6 +- examples/react/rick-morty/src/App.tsx | 31 +- examples/react/rick-morty/src/Character.jsx | 117 -- examples/react/rick-morty/src/Character.tsx | 87 ++ examples/react/rick-morty/src/Characters.jsx | 34 - examples/react/rick-morty/src/Characters.tsx | 33 + examples/react/rick-morty/src/Episode.jsx | 51 - examples/react/rick-morty/src/Episode.tsx | 54 + .../src/{Episodes.jsx => Episodes.tsx} | 21 +- examples/react/rick-morty/src/Home.jsx | 56 - examples/react/rick-morty/src/Home.tsx | 46 + examples/react/rick-morty/src/Layout.tsx | 46 +- examples/react/rick-morty/src/api.ts | 30 + examples/react/rick-morty/src/fetch.jsx | 4 - examples/react/rick-morty/src/styles.css | 30 +- examples/react/rick-morty/tsconfig.json | 2 +- examples/react/rick-morty/vite.config.ts | 3 +- examples/react/star-wars/index.html | 2 +- examples/react/star-wars/package.json | 6 +- examples/react/star-wars/src/App.tsx | 31 +- examples/react/star-wars/src/Character.jsx | 122 -- examples/react/star-wars/src/Character.tsx | 82 ++ examples/react/star-wars/src/Characters.jsx | 32 - examples/react/star-wars/src/Characters.tsx | 33 + examples/react/star-wars/src/Film.jsx | 57 - examples/react/star-wars/src/Film.tsx | 51 + .../star-wars/src/{Films.jsx => Films.tsx} | 25 +- examples/react/star-wars/src/Home.jsx | 57 - examples/react/star-wars/src/Home.tsx | 46 + examples/react/star-wars/src/Layout.tsx | 46 +- examples/react/star-wars/src/api.ts | 24 + examples/react/star-wars/src/fetch.jsx | 4 - examples/react/star-wars/src/styles.css | 30 +- examples/react/star-wars/tsconfig.json | 2 +- examples/react/star-wars/vite.config.ts | 3 +- examples/svelte/star-wars/package.json | 5 +- examples/svelte/star-wars/postcss.config.cjs | 3 - examples/svelte/star-wars/src/app.css | 15 +- examples/svelte/star-wars/src/app.html | 6 +- examples/svelte/star-wars/src/lib/api.ts | 24 + .../star-wars/src/routes/+layout.svelte | 14 +- .../svelte/star-wars/src/routes/+page.svelte | 62 +- .../src/routes/characters/+page.svelte | 13 +- .../characters/[characterId]/+page.svelte | 68 +- .../characters/[characterId]/Film.svelte | 16 +- .../characters/[characterId]/Homeworld.svelte | 16 +- .../star-wars/src/routes/films/+page.svelte | 10 +- .../src/routes/films/[filmId]/+page.svelte | 10 +- .../routes/films/[filmId]/Character.svelte | 13 +- .../svelte/star-wars/static/emblem-light.svg | 13 + examples/svelte/star-wars/static/favicon.png | Bin 1571 -> 0 bytes examples/svelte/star-wars/tailwind.config.cjs | 9 - examples/svelte/star-wars/vite.config.ts | 5 +- pnpm-lock.yaml | 1299 ++++++----------- 56 files changed, 1175 insertions(+), 1734 deletions(-) delete mode 100644 examples/react/rick-morty/src/Character.jsx create mode 100644 examples/react/rick-morty/src/Character.tsx delete mode 100644 examples/react/rick-morty/src/Characters.jsx create mode 100644 examples/react/rick-morty/src/Characters.tsx delete mode 100644 examples/react/rick-morty/src/Episode.jsx create mode 100644 examples/react/rick-morty/src/Episode.tsx rename examples/react/rick-morty/src/{Episodes.jsx => Episodes.tsx} (55%) delete mode 100644 examples/react/rick-morty/src/Home.jsx create mode 100644 examples/react/rick-morty/src/Home.tsx create mode 100644 examples/react/rick-morty/src/api.ts delete mode 100644 examples/react/rick-morty/src/fetch.jsx delete mode 100644 examples/react/star-wars/src/Character.jsx create mode 100644 examples/react/star-wars/src/Character.tsx delete mode 100644 examples/react/star-wars/src/Characters.jsx create mode 100644 examples/react/star-wars/src/Characters.tsx delete mode 100644 examples/react/star-wars/src/Film.jsx create mode 100644 examples/react/star-wars/src/Film.tsx rename examples/react/star-wars/src/{Films.jsx => Films.tsx} (58%) delete mode 100644 examples/react/star-wars/src/Home.jsx create mode 100644 examples/react/star-wars/src/Home.tsx create mode 100644 examples/react/star-wars/src/api.ts delete mode 100644 examples/react/star-wars/src/fetch.jsx delete mode 100644 examples/svelte/star-wars/postcss.config.cjs create mode 100644 examples/svelte/star-wars/src/lib/api.ts create mode 100644 examples/svelte/star-wars/static/emblem-light.svg delete mode 100644 examples/svelte/star-wars/static/favicon.png delete mode 100644 examples/svelte/star-wars/tailwind.config.cjs diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml index 86eedddc8a..2aad2d859d 100644 --- a/.github/workflows/pr.yml +++ b/.github/workflows/pr.yml @@ -2,8 +2,6 @@ name: PR on: pull_request: - push: - branches: ['svelte-5-adapter'] concurrency: group: ${{ github.workflow }}-${{ github.event.number || github.ref }} diff --git a/examples/react/rick-morty/index.html b/examples/react/rick-morty/index.html index 244598b0b4..8adf3c1987 100644 --- a/examples/react/rick-morty/index.html +++ b/examples/react/rick-morty/index.html @@ -6,7 +6,7 @@ -
Loading...
- if (status === 'error') returnError :(
- - const locationUrlPars = data.location.url.split('/').filter(Boolean) - const locationId = locationUrlPars[locationUrlPars.length - 1] - - return ( -Loading...
- if (status === 'error') returnError :(
- - return ( - <> - {data.name} - {data.type} - > - ) -} - -export default Character diff --git a/examples/react/rick-morty/src/Character.tsx b/examples/react/rick-morty/src/Character.tsx new file mode 100644 index 0000000000..42e37ddcac --- /dev/null +++ b/examples/react/rick-morty/src/Character.tsx @@ -0,0 +1,87 @@ +import { useParams, Link as RouterLink } from 'react-router-dom' +import { useQuery } from '@tanstack/react-query' +import { getCharacter, getEpisode, getLocation } from './api' + +function Character() { + let params = useParams() + const characterId = params.characterId! + + const { status, data } = useQuery({ + queryKey: ['character', characterId], + queryFn: () => getCharacter(characterId), + }) + + if (status === 'pending') returnLoading...
+ if (status === 'error') returnError :(
+ + const locationUrlParts = data.location.url.split('/').filter(Boolean) + const locationId = locationUrlParts[locationUrlParts.length - 1] + + return ( ++ Gender: {data.gender} +
++ Status: {data.status} +
++ Species: {data.species} +
++ Origin: {data.origin.name} +
+
+ Location:
Loading...
- if (status === 'error') returnError :(
- - console.info(data) - - return ( -Loading...
+ if (status === 'error') returnError :(
+ + return ( +Loading...
- if (status === 'error') returnError :(
- - return ( -Loading...
- if (status === 'error') returnError :(
- - return ( -Loading...
+ + if (status === 'error') returnError :(
+ + return ( +{data.air_date}
+Loading...
+ if (status === 'error') returnError :(
+ + return ( +Using the Rick And Morty API
++ (Built by{' '} + + @axelfuh + + ) +
++ In this demo you will be able to see how TanStack Query is a significant + improvement over redux, mobx, and any + other general-purpose state container. +
++ No reducers, thunks, or sagas. No ES6 models to maintain in order to tag + them as observable. +
++ Simply associate a key with your fetch call and let{' '} + TanStack Query handle the rest. +
+
+ Check out the{' '}
+