fix: clean up offline-transactions example

examples/react/offline-transactions/README.md

@@ -1,72 +1,34 @@
-# Welcome to TanStack.com!
+# Offline Transactions Example
 
-This site is built with TanStack Router!
+A todo app demonstrating `@tanstack/offline-transactions` with three different browser storage backends:
 
-- [TanStack Router Docs](https://tanstack.com/router)
+- **IndexedDB** — persistent structured storage via `IndexedDBAdapter`
+- **localStorage** — simple key-value fallback via `LocalStorageAdapter`
+- **wa-sqlite OPFS** — full SQLite database in the browser via `@tanstack/browser-db-sqlite-persistence`
 
-It's deployed automagically with Netlify!
+The app uses TanStack Start in SPA mode with an in-memory server-side todo store. The server simulates network delays and random failures to demonstrate offline resilience.
 
-- [Netlify](https://netlify.com/)
+## How to run
 
-## Development
-
-From your terminal:
+From the root of the repository:
 
 ```sh
 pnpm install
-pnpm dev
-```
-
-This starts your app in development mode, rebuilding assets on file changes.
-
-## Editing and previewing the docs of TanStack projects locally
-
-The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app.
-In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system.
-
-Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally :
-
-1. Create a new directory called `tanstack`.
-
-```sh
-mkdir tanstack
-```
-
-2. Enter the directory and clone this repo and the repo of the project there.
-
-```sh
-cd tanstack
-git clone git@github.com:TanStack/tanstack.com.git
-git clone git@github.com:TanStack/form.git
+pnpm build
 ```
 
-> [!NOTE]
-> Your `tanstack` directory should look like this:
->
-> ```
-> tanstack/
->    |
->    +-- form/
->    |
->    +-- tanstack.com/
-> ```
-
-> [!WARNING]
-> Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found.
-
-3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode:
+Then from this directory:
 
 ```sh
-cd tanstack.com
-pnpm i
-# The app will run on https://localhost:3000 by default
 pnpm dev
 ```
 
-4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`.
+The app runs at http://localhost:3000.
 
-> [!NOTE]
-> The updated pages need to be manually reloaded in the browser.
+## What it demonstrates
 
-> [!WARNING]
-> You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page!
+- **Outbox pattern** — mutations are persisted locally before syncing to the server
+- **Automatic retry** — failed operations retry with exponential backoff when connectivity returns
+- **Multi-tab coordination** — leader election ensures only one tab manages offline storage
+- **Optimistic updates** — UI updates immediately while mutations sync in the background
+- **Collection-level persistence** (wa-sqlite route) — data stored in a real SQLite database in the browser via OPFS, surviving page reloads without server sync

examples/react/offline-transactions/package.json

@@ -5,8 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite dev",
-    "build": "vite build && tsc --noEmit",
-    "start": "node .output/server/index.mjs"
+    "build": "vite build && tsc --noEmit"
   },
   "dependencies": {
     "@tanstack/browser-db-sqlite-persistence": "^0.1.5",
@@ -20,7 +19,6 @@
     "@tanstack/react-start": "^1.159.5",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "tailwind-merge": "^2.6.1",
     "zod": "^3.25.76"
   },
   "devDependencies": {

examples/react/offline-transactions/src/routeTree.gen.ts

@@ -13,6 +13,8 @@ import { Route as WaSqliteRouteImport } from './routes/wa-sqlite'
 import { Route as LocalstorageRouteImport } from './routes/localstorage'
 import { Route as IndexeddbRouteImport } from './routes/indexeddb'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as ApiTodosRouteImport } from './routes/api/todos'
+import { Route as ApiTodosTodoIdRouteImport } from './routes/api/todos.$todoId'
 
 const WaSqliteRoute = WaSqliteRouteImport.update({
   id: '/wa-sqlite',
@@ -34,39 +36,75 @@ const IndexRoute = IndexRouteImport.update({
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ApiTodosRoute = ApiTodosRouteImport.update({
+  id: '/api/todos',
+  path: '/api/todos',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiTodosTodoIdRoute = ApiTodosTodoIdRouteImport.update({
+  id: '/$todoId',
+  path: '/$todoId',
+  getParentRoute: () => ApiTodosRoute,
+} as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/indexeddb': typeof IndexeddbRoute
   '/localstorage': typeof LocalstorageRoute
   '/wa-sqlite': typeof WaSqliteRoute
+  '/api/todos': typeof ApiTodosRouteWithChildren
+  '/api/todos/$todoId': typeof ApiTodosTodoIdRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/indexeddb': typeof IndexeddbRoute
   '/localstorage': typeof LocalstorageRoute
   '/wa-sqlite': typeof WaSqliteRoute
+  '/api/todos': typeof ApiTodosRouteWithChildren
+  '/api/todos/$todoId': typeof ApiTodosTodoIdRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/indexeddb': typeof IndexeddbRoute
   '/localstorage': typeof LocalstorageRoute
   '/wa-sqlite': typeof WaSqliteRoute
+  '/api/todos': typeof ApiTodosRouteWithChildren
+  '/api/todos/$todoId': typeof ApiTodosTodoIdRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/indexeddb' | '/localstorage' | '/wa-sqlite'
+  fullPaths:
+    | '/'
+    | '/indexeddb'
+    | '/localstorage'
+    | '/wa-sqlite'
+    | '/api/todos'
+    | '/api/todos/$todoId'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/indexeddb' | '/localstorage' | '/wa-sqlite'
-  id: '__root__' | '/' | '/indexeddb' | '/localstorage' | '/wa-sqlite'
+  to:
+    | '/'
+    | '/indexeddb'
+    | '/localstorage'
+    | '/wa-sqlite'
+    | '/api/todos'
+    | '/api/todos/$todoId'
+  id:
+    | '__root__'
+    | '/'
+    | '/indexeddb'
+    | '/localstorage'
+    | '/wa-sqlite'
+    | '/api/todos'
+    | '/api/todos/$todoId'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   IndexeddbRoute: typeof IndexeddbRoute
   LocalstorageRoute: typeof LocalstorageRoute
   WaSqliteRoute: typeof WaSqliteRoute
+  ApiTodosRoute: typeof ApiTodosRouteWithChildren
 }
 
 declare module '@tanstack/react-router' {
@@ -99,14 +137,41 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/api/todos': {
+      id: '/api/todos'
+      path: '/api/todos'
+      fullPath: '/api/todos'
+      preLoaderRoute: typeof ApiTodosRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/todos/$todoId': {
+      id: '/api/todos/$todoId'
+      path: '/$todoId'
+      fullPath: '/api/todos/$todoId'
+      preLoaderRoute: typeof ApiTodosTodoIdRouteImport
+      parentRoute: typeof ApiTodosRoute
+    }
   }
 }
 
+interface ApiTodosRouteChildren {
+  ApiTodosTodoIdRoute: typeof ApiTodosTodoIdRoute
+}
+
+const ApiTodosRouteChildren: ApiTodosRouteChildren = {
+  ApiTodosTodoIdRoute: ApiTodosTodoIdRoute,
+}
+
+const ApiTodosRouteWithChildren = ApiTodosRoute._addFileChildren(
+  ApiTodosRouteChildren,
+)
+
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   IndexeddbRoute: IndexeddbRoute,
   LocalstorageRoute: LocalstorageRoute,
   WaSqliteRoute: WaSqliteRoute,
+  ApiTodosRoute: ApiTodosRouteWithChildren,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

examples/react/offline-transactions/src/router.tsx

@@ -1,14 +1,10 @@
 import { createRouter as createTanStackRouter } from '@tanstack/react-router'
 import { routeTree } from './routeTree.gen'
-import { DefaultCatchBoundary } from './components/DefaultCatchBoundary'
-import { NotFound } from './components/NotFound'
 
 export function createRouter() {
   const router = createTanStackRouter({
     routeTree,
     defaultPreload: `intent`,
-    defaultErrorComponent: DefaultCatchBoundary,
-    defaultNotFoundComponent: () => <NotFound />,
     scrollRestoration: true,
   })
 

examples/react/offline-transactions/src/routes/__root.tsx

@@ -8,10 +8,7 @@ import {
 import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 import { QueryClientProvider } from '@tanstack/react-query'
 import * as React from 'react'
-import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
-import { NotFound } from '~/components/NotFound'
 import appCss from '~/styles/app.css?url'
-import { seo } from '~/utils/seo'
 import { queryClient } from '~/utils/queryClient'
 
 export const Route = createRootRoute({
@@ -24,42 +21,9 @@ export const Route = createRootRoute({
         name: `viewport`,
         content: `width=device-width, initial-scale=1`,
       },
-      ...seo({
-        title: `TanStack Start | Type-Safe, Client-First, Full-Stack React Framework`,
-        description: `TanStack Start is a type-safe, client-first, full-stack React framework. `,
-      }),
-    ],
-    links: [
-      { rel: `stylesheet`, href: appCss },
-      {
-        rel: `apple-touch-icon`,
-        sizes: `180x180`,
-        href: `/apple-touch-icon.png`,
-      },
-      {
-        rel: `icon`,
-        type: `image/png`,
-        sizes: `32x32`,
-        href: `/favicon-32x32.png`,
-      },
-      {
-        rel: `icon`,
-        type: `image/png`,
-        sizes: `16x16`,
-        href: `/favicon-16x16.png`,
-      },
-      { rel: `manifest`, href: `/site.webmanifest`, color: `#fffff` },
-      { rel: `icon`, href: `/favicon.ico` },
-    ],
-    scripts: [
-      {
-        src: `/customScript.js`,
-        type: `text/javascript`,
-      },
     ],
+    links: [{ rel: `stylesheet`, href: appCss }],
   }),
-  errorComponent: DefaultCatchBoundary,
-  notFoundComponent: () => <NotFound />,
   shellComponent: RootDocument,
 })