docs: add with-responsive-image example app

examples/react/with-responsive-image/README.md

@@ -0,0 +1,5 @@
+# TanStack + ResponsiveImage
+
+Integrating [ResponsiveImage](https://responsive-image.dev) with TanStack Start.
+
+Run `pnpm dev` to run locally.

examples/react/with-responsive-image/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "with-responsive-image",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && tsc --noEmit",
+    "start": "vite start"
+  },
+  "dependencies": {
+    "@responsive-image/core": "^2.1.0",
+    "@responsive-image/react": "^1.1.4",
+    "@tanstack/react-router": "^1.132.47",
+    "@tanstack/react-router-devtools": "^1.132.50",
+    "@tanstack/react-start": "^1.132.48",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@responsive-image/vite-plugin": "^2.0.0",
+    "@types/node": "^22.5.4",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.7.2",
+    "vite": "^7.1.7",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}

examples/react/with-responsive-image/src/global.d.ts

@@ -0,0 +1,6 @@
+declare module '*responsive' {
+  import type { ImageData } from '@responsive-image/core'
+
+  const value: ImageData
+  export default value
+}

examples/react/with-responsive-image/src/images.ts

@@ -0,0 +1,51 @@
+import { notFound } from '@tanstack/react-router'
+import type { ImageData } from '@responsive-image/core'
+
+const thumbnails = import.meta.glob<{ default: ImageData }>(
+  './images/gallery/*.jpg',
+  {
+    eager: true, // this is just generating image meta data, not need for lazy loading
+    query: {
+      w: '200;400',
+      responsive: true, // opt into processing by @responsive-image/vite, see vite.config.ts. Without this, default vite asset handling applies.
+    },
+  },
+)
+
+const images = import.meta.glob<{ default: ImageData }>(
+  './images/gallery/*.jpg',
+  {
+    eager: true, // this is just generating image meta data, not need for lazy loading
+    query: {
+      responsive: true, // opt into processing by @responsive-image/vite, see vite.config.ts. Without this, default vite asset handling applies.
+    },
+  },
+)
+
+export function getThumbsnails(): Record<string, ImageData> {
+  return Object.fromEntries(
+    Object.entries(thumbnails).map(([imageId, module]) => [
+      normalizeImageId(imageId),
+      module.default,
+    ]),
+  )
+}
+
+export function getImage(imageId: string): ImageData {
+  const module = images[denormalizeImageId(imageId)]
+
+  if (!module) {
+    throw notFound({ data: { foo: 1 } })
+  }
+
+  return module.default
+}
+
+// Remove leading `./images/gallery/` from import.meta.glob keys for nicer URLs
+function normalizeImageId(imageId: string): string {
+  return imageId.replace(/^\.\/images\/gallery\//, '')
+}
+
+function denormalizeImageId(imageId: string): string {
+  return `./images/gallery/${imageId}`
+}

examples/react/with-responsive-image/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 ImageIdRouteImport } from './routes/$imageId'
+import { Route as IndexRouteImport } from './routes/index'
+
+const ImageIdRoute = ImageIdRouteImport.update({
+  id: '/$imageId',
+  path: '/$imageId',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/$imageId': typeof ImageIdRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/$imageId': typeof ImageIdRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/$imageId': typeof ImageIdRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/$imageId'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/$imageId'
+  id: '__root__' | '/' | '/$imageId'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  ImageIdRoute: typeof ImageIdRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/$imageId': {
+      id: '/$imageId'
+      path: '/$imageId'
+      fullPath: '/$imageId'
+      preLoaderRoute: typeof ImageIdRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  ImageIdRoute: ImageIdRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}

examples/react/with-responsive-image/src/router.tsx

@@ -0,0 +1,20 @@
+import { createRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+
+export function getRouter() {
+  const router = createRouter({
+    routeTree,
+    defaultPreload: 'intent',
+    defaultErrorComponent: (err) => <p>{err.error.stack}</p>,
+    defaultNotFoundComponent: () => <p>not found</p>,
+    scrollRestoration: true,
+  })
+
+  return router
+}
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof getRouter>
+  }
+}

examples/react/with-responsive-image/src/routes/$imageId.tsx

@@ -0,0 +1,14 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { ResponsiveImage } from '@responsive-image/react'
+import { getImage } from '../images'
+
+export const Route = createFileRoute('/$imageId')({
+  loader: ({ params }) => getImage(params.imageId),
+  component: Image,
+})
+
+function Image() {
+  const image = Route.useLoaderData()
+
+  return <ResponsiveImage src={image} className="large" />
+}

examples/react/with-responsive-image/src/routes/__root.tsx

@@ -0,0 +1,42 @@
+import {
+  Outlet,
+  Link,
+  createRootRoute,
+  HeadContent,
+  Scripts,
+} from '@tanstack/react-router'
+import { ResponsiveImage } from '@responsive-image/react'
+import { getThumbsnails } from '../images'
+import appCss from '~/styles.css?url'
+
+export const Route = createRootRoute({
+  head: () => ({
+    links: [{ rel: 'stylesheet', href: appCss }],
+  }),
+  component: App,
+})
+
+function App() {
+  return (
+    <html>
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <div className="wrapper">
+          <aside>
+            {Object.entries(getThumbsnails()).map(([imageId, image]) => (
+              <Link to="/$imageId" params={{ imageId }} key={imageId}>
+                <ResponsiveImage src={image} width={200}></ResponsiveImage>
+              </Link>
+            ))}
+          </aside>
+          <main>
+            <Outlet />
+          </main>
+        </div>
+        <Scripts />
+      </body>
+    </html>
+  )
+}

examples/react/with-responsive-image/src/routes/index.tsx

@@ -0,0 +1,40 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { ResponsiveImage } from '@responsive-image/react'
+import visual from '../images/splash-dark.png?w=300;600&responsive'
+
+export const Route = createFileRoute('/')({
+  component: Index,
+})
+
+function Index() {
+  return (
+    <>
+      <ResponsiveImage src={visual} width={300} />
+      <section className="intro">
+        <h1>Welcome to this TanStack Router + ResponsiveImage demo</h1>
+        <ul>
+          <li>
+            <a
+              className="App-link"
+              href="https://tanstack.com"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Learn TanStack
+            </a>
+          </li>
+          <li>
+            <a
+              className="App-link"
+              href="https://responsive-image.dev"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Learn ResponsiveImage
+            </a>
+          </li>
+        </ul>
+      </section>
+    </>
+  )
+}

examples/react/with-responsive-image/src/styles.css

@@ -0,0 +1,57 @@
+body {
+  margin: 0;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  background-color: black;
+  color: #ccc;
+}
+
+a {
+  color: #00c2ab;
+}
+
+code {
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+aside {
+  display: flex;
+  overflow: auto;
+  justify-content: center;
+
+  flex: 0 0 auto;
+
+  margin-bottom: 5px;
+}
+
+aside a {
+  border: solid 1px transparent;
+}
+
+aside a.active {
+  border-color: #00c2ab;
+}
+
+img {
+  display: block;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+}
+
+main {
+  flex: 1;
+}
+
+.intro {
+  padding: 20px;
+}

examples/react/with-responsive-image/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "include": ["**/*.ts", "**/*.tsx", "public/script*.js"],
+  "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "target": "ES2022",
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./src/*"]
+    },
+    "noEmit": true,
+    "types": ["vite/client"]
+  }
+}