feat: add TanStack Start basic example#468
Conversation
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: d25873c969
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
Pull request overview
Adds a new Rsbuild + TanStack Start “basic” example app, plus aligns the existing tanstack-start-rsc example’s config/deps (and updates the workspace lockfile) to support the new addition.
Changes:
- Introduce a new
rsbuild/tanstack-startexample with routes, router wiring, styling, and Rsbuild/Tailwind/TanStack Start configuration. - Update
rsbuild/tanstack-start-rscTypeScript config/docs and bump dependencies (React/Tailwind/Rsbuild). - Update
pnpm-lock.yamlto reflect new importer and dependency graph changes.
Reviewed changes
Copilot reviewed 23 out of 27 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| rsbuild/tanstack-start/tsconfig.json | Adds TypeScript configuration for the new TanStack Start basic example. |
| rsbuild/tanstack-start/src/styles.css | Adds Tailwind + theme styling for the basic example UI. |
| rsbuild/tanstack-start/src/routeTree.gen.ts | Adds generated TanStack Router route tree for file-based routing. |
| rsbuild/tanstack-start/src/routes/index.tsx | Adds home route UI for the basic example. |
| rsbuild/tanstack-start/src/routes/about.tsx | Adds “About” route UI for the basic example. |
| rsbuild/tanstack-start/src/routes/__root.tsx | Adds root document shell, devtools, and global CSS injection. |
| rsbuild/tanstack-start/src/router.tsx | Adds router creation/registration for TanStack Router. |
| rsbuild/tanstack-start/src/components/ThemeToggle.tsx | Adds theme mode toggle (light/dark/auto). |
| rsbuild/tanstack-start/src/components/Header.tsx | Adds header/nav including external links and theme toggle. |
| rsbuild/tanstack-start/src/components/Footer.tsx | Adds footer with social links. |
| rsbuild/tanstack-start/rsbuild.config.ts | Adds Rsbuild config using React, Tailwind, and TanStack Start plugin. |
| rsbuild/tanstack-start/README.md | Adds basic example usage docs (dev/build). |
| rsbuild/tanstack-start/public/robots.txt | Adds robots.txt for the example. |
| rsbuild/tanstack-start/public/manifest.json | Adds web app manifest for the example. |
| rsbuild/tanstack-start/package.json | Adds package definition + deps for the new example. |
| rsbuild/tanstack-start/.gitignore | Adds ignore rules for the new example. |
| rsbuild/tanstack-start-rsc/tsconfig.json | Updates TS config (notably path aliases) for the RSC example. |
| rsbuild/tanstack-start-rsc/README.md | Updates README content/structure for the RSC example. |
| rsbuild/tanstack-start-rsc/public/site.webmanifest | Removes old webmanifest file. |
| rsbuild/tanstack-start-rsc/public/robots.txt | Adds robots.txt for the RSC example. |
| rsbuild/tanstack-start-rsc/public/manifest.json | Adds manifest.json for the RSC example. |
| rsbuild/tanstack-start-rsc/package.json | Updates deps/devDeps (React/Tailwind/Rsbuild versions). |
| rsbuild/tanstack-start-rsc/.gitignore | Updates ignore rules for the RSC example. |
| pnpm-lock.yaml | Adds new importer + updates lock entries for dependency changes. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'; | ||
| import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'; | ||
| import { TanStackDevtools } from '@tanstack/react-devtools'; | ||
| import Footer from '../components/Footer'; | ||
| import Header from '../components/Header'; |
| import Footer from '../components/Footer'; | ||
| import Header from '../components/Header'; | ||
|
|
||
| import appCss from '../styles.css?url'; |
| @@ -0,0 +1,73 @@ | |||
| import { createFileRoute } from '@tanstack/react-router'; | |||
| <a | ||
| href="/about" | ||
| className="rounded-full border border-[rgba(50,143,151,0.3)] bg-[rgba(79,184,178,0.14)] px-5 py-2.5 text-sm font-semibold text-[var(--lagoon-deep)] no-underline transition hover:-translate-y-0.5 hover:bg-[rgba(79,184,178,0.24)]" | ||
| > | ||
| About This Starter | ||
| </a> |
| href="https://x.com/tan_stack" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| className="hidden rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)] sm:block" |
| href="https://github.com/TanStack" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| className="hidden rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)] sm:block" |
| href="https://tanstack.com/start/latest/docs/framework/react/overview" | ||
| className="nav-link" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| > |
| <a | ||
| href="https://x.com/tan_stack" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| className="rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)]" |
| <a | ||
| href="https://github.com/TanStack" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| className="rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)]" |
| "paths": { | ||
| "#/*": ["./src/*"], | ||
| "@/*": ["./src/*"], | ||
| "~/*": ["./src/*"] |
This PR adds a basic TanStack Start + React + Rsbuild example.