docs: add with-responsive-image example app

Author: simonihmig

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,31 @@
+{
+  "name": "with-responsive-image",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && tsc --noEmit",
+    "start": "srvx --prod -s ../client dist/server/server.js"
+  },
+  "dependencies": {
+    "@responsive-image/core": "^2.1.0",
+    "@responsive-image/react": "^1.1.5",
+    "@tanstack/react-router": "^1.134.15",
+    "@tanstack/react-router-devtools": "^1.134.15",
+    "@tanstack/react-start": "^1.134.15",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@responsive-image/vite-plugin": "^2.0.2",
+    "@types/node": "^22.5.4",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.6.0",
+    "srvx": "^0.8.16",
+    "typescript": "^5.7.2",
+    "vite": "^7.1.7",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}

examples/react/with-responsive-image/public/favicon.ico

@@ -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/global.d.ts

@@ -0,0 +1,55 @@
+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
+}
+
+export function hasImage(imageId: string): boolean {
+  return Boolean(images[denormalizeImageId(imageId)])
+}
+
+// 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}`
+}