feat: add TanStack Start SolidJS example

rsbuild/tanstack-start-rsc/tsconfig.json

@@ -10,7 +10,7 @@
       "~/*": ["./src/*"]
     },
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "types": ["node"],
+    "types": ["node", "@rsbuild/core/types"],
 
     /* Bundler mode */
     "moduleResolution": "bundler",

rsbuild/tanstack-start-solid/.gitignore

@@ -0,0 +1,12 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+.env
+.nitro
+.tanstack
+.wrangler
+.output
+.vinxi
+__unconfig*

rsbuild/tanstack-start-solid/README.md

@@ -0,0 +1,32 @@
+Welcome to your new TanStack Start app!
+
+# Getting Started
+
+To run this application:
+
+```bash
+npm install
+npm run dev
+```
+
+# Building For Production
+
+To build this application for production:
+
+```bash
+npm run build
+```
+
+## Styling
+
+This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
+
+## Routing
+
+This project uses [TanStack Router](https://tanstack.com/router) with file-based routing. Routes are managed as files in `src/routes`.
+
+# Learn More
+
+You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).
+
+For TanStack Start specific documentation, visit [TanStack Start](https://tanstack.com/start).

rsbuild/tanstack-start-solid/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@rsbuild-example/tanstack-start-solid",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "rsbuild",
+    "build": "rsbuild build",
+    "preview": "rsbuild preview"
+  },
+  "dependencies": {
+    "@tanstack/router-plugin": "^1.133.21",
+    "@tanstack/solid-router": "^1.170.11",
+    "@tanstack/solid-router-devtools": "^1.167.0",
+    "@tanstack/solid-router-ssr-query": "^1.167.1",
+    "@tanstack/solid-start": "^1.168.19",
+    "solid-js": "^1.9.12",
+    "tailwindcss": "^4.1.18"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "^2.0.11",
+    "@rsbuild/plugin-babel": "^1.2.1",
+    "@rsbuild/plugin-solid": "^1.2.1",
+    "@rsbuild/plugin-tailwindcss": "^2.0.1",
+    "@types/node": "^25.9.1",
+    "typescript": "^6.0.2"
+  }
+}

rsbuild/tanstack-start-solid/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "TanStack App",
+  "name": "Create TanStack App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

rsbuild/tanstack-start-solid/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

rsbuild/tanstack-start-solid/rsbuild.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginBabel } from '@rsbuild/plugin-babel';
+import { pluginSolid } from '@rsbuild/plugin-solid';
+import { pluginTailwindcss } from '@rsbuild/plugin-tailwindcss';
+import { tanstackStart } from '@tanstack/solid-start/plugin/rsbuild';
+
+export default defineConfig({
+  plugins: [
+    pluginBabel({
+      include: /\.(?:jsx|tsx)$/,
+    }),
+    pluginSolid(),
+    pluginTailwindcss(),
+    tanstackStart(),
+  ],
+});

rsbuild/tanstack-start-solid/src/components/Header.tsx

@@ -0,0 +1,35 @@
+import { Link } from '@tanstack/solid-router';
+
+export default function Header() {
+  return (
+    <header class="site-header px-4">
+      <nav class="page-wrap nav-shell">
+        <h2 class="m-0 flex-shrink-0 text-base font-semibold tracking-tight">
+          <Link to="/" class="brand-pill">
+            <span class="brand-dot" />
+            TanStack Start
+          </Link>
+        </h2>
+
+        <div class="ml-auto flex items-center gap-2"></div>
+
+        <div class="order-3 flex w-full flex-wrap items-center gap-x-4 gap-y-1 pb-1 text-sm font-semibold sm:order-2 sm:w-auto sm:flex-nowrap sm:pb-0">
+          <Link to="/" class="nav-link" activeProps={{ class: 'nav-link is-active' }}>
+            Home
+          </Link>
+          <Link to="/about" class="nav-link" activeProps={{ class: 'nav-link is-active' }}>
+            About
+          </Link>
+          <a
+            href="https://tanstack.com/start/latest/docs/framework/solid/overview"
+            target="_blank"
+            rel="noreferrer"
+            class="nav-link"
+          >
+            Docs
+          </a>
+        </div>
+      </nav>
+    </header>
+  );
+}

rsbuild/tanstack-start-solid/src/routeTree.gen.ts

@@ -0,0 +1,86 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as AboutRouteImport } from './routes/about'
+import { Route as IndexRouteImport } from './routes/index'
+
+const AboutRoute = AboutRouteImport.update({
+  id: '/about',
+  path: '/about',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/about': typeof AboutRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/about': typeof AboutRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/about': typeof AboutRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/about'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/about'
+  id: '__root__' | '/' | '/about'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  AboutRoute: typeof AboutRoute
+}
+
+declare module '@tanstack/solid-router' {
+  interface FileRoutesByPath {
+    '/about': {
+      id: '/about'
+      path: '/about'
+      fullPath: '/about'
+      preLoaderRoute: typeof AboutRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  AboutRoute: AboutRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/solid-start'
+declare module '@tanstack/solid-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}

rsbuild/tanstack-start-solid/src/router.tsx

@@ -0,0 +1,20 @@
+import { createRouter as createTanStackRouter } from '@tanstack/solid-router';
+import { routeTree } from './routeTree.gen';
+
+export function getRouter() {
+  const router = createTanStackRouter({
+    routeTree,
+
+    scrollRestoration: true,
+    defaultPreload: 'intent',
+    defaultPreloadStaleTime: 0,
+  });
+
+  return router;
+}
+
+declare module '@tanstack/solid-router' {
+  interface Register {
+    router: ReturnType<typeof getRouter>;
+  }
+}

rsbuild/tanstack-start-solid/src/routes/__root.tsx

@@ -0,0 +1,35 @@
+import { HeadContent, Outlet, Scripts, createRootRouteWithContext } from '@tanstack/solid-router';
+import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools';
+
+import { HydrationScript } from 'solid-js/web';
+import { Suspense } from 'solid-js';
+
+import Header from '../components/Header';
+
+import styleCss from '../styles.css?url';
+
+export const Route = createRootRouteWithContext()({
+  head: () => ({
+    links: [{ rel: 'stylesheet', href: styleCss }],
+  }),
+  shellComponent: RootComponent,
+});
+
+function RootComponent() {
+  return (
+    <html>
+      <head>
+        <HydrationScript />
+        <HeadContent />
+      </head>
+      <body>
+        <Suspense>
+          <Header />
+          <Outlet />
+          <TanStackRouterDevtools />
+        </Suspense>
+        <Scripts />
+      </body>
+    </html>
+  );
+}

rsbuild/tanstack-start-solid/src/routes/about.tsx

@@ -0,0 +1,22 @@
+import { createFileRoute } from '@tanstack/solid-router';
+
+export const Route = createFileRoute('/about')({
+  component: About,
+});
+
+function About() {
+  return (
+    <main class="page-wrap px-4 py-12">
+      <section class="island-shell rounded-2xl p-6 sm:p-8">
+        <p class="island-kicker mb-2">About</p>
+        <h1 class="display-title mb-3 text-4xl font-bold text-[var(--sea-ink)] sm:text-5xl">
+          A small starter with room to grow.
+        </h1>
+        <p class="m-0 max-w-3xl text-base leading-8 text-[var(--sea-ink-soft)]">
+          TanStack Start gives you type-safe routing, server functions, and modern SSR defaults. Use
+          this as a clean foundation, then layer in your own routes, styling, and add-ons.
+        </p>
+      </section>
+    </main>
+  );
+}