From 91ecb6c556499b06710d1ac279e5060203585e4c Mon Sep 17 00:00:00 2001 From: Chenxin Yan Date: Fri, 9 Oct 2026 11:46:21 -0700 Subject: [PATCH 1/2] chore(examples): use the recommended gt-tanstack-start setup The bundle-analysis TanStack Start example now follows the README, so its numbers reflect what a new user installs: gtTanstackStart() in the Vite config, setupRouterGTIntegration({ router }) in src/router.tsx, and in the root route. Its loadTranslations file, gtMiddleware, root loader, and direct gt-react dependency are removed, and components import from gt-tanstack-start. --- pnpm-lock.yaml | 3 -- .../tanstack-start/loadTranslations.ts | 4 --- .../examples/tanstack-start/package.json | 3 +- .../tanstack-start/src/components/Footer.tsx | 2 +- .../src/components/OrderPanel.tsx | 10 ++++++- .../examples/tanstack-start/src/router.tsx | 10 +++---- .../tanstack-start/src/routes/__root.tsx | 28 ++++--------------- .../tanstack-start/src/routes/index.tsx | 3 +- .../tanstack-start/src/routes/specs.tsx | 2 +- .../examples/tanstack-start/src/start.ts | 3 +- .../examples/tanstack-start/tsconfig.json | 7 +---- .../examples/tanstack-start/vite.config.ts | 3 +- 12 files changed, 27 insertions(+), 51 deletions(-) delete mode 100644 tools/bundle-analysis/examples/tanstack-start/loadTranslations.ts diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7dc117e5bd..c056e7360c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2640,9 +2640,6 @@ importers: '@tanstack/react-start': specifier: ^1.168.25 version: 1.168.28(esbuild@0.28.1)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(rolldown@1.2.12)(rollup@4.63.5)(vite@8.3.1(@types/node@20.19.17)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.51.2)(tsx@4.23.15)(yaml@2.9.0))(webpack@5.111.1(esbuild@0.28.1)(lightningcss@1.33.0)(postcss@8.5.19)) - gt-react: - specifier: workspace:* - version: link:../../../../packages/react gt-tanstack-start: specifier: workspace:* version: link:../../../../packages/tanstack-start diff --git a/tools/bundle-analysis/examples/tanstack-start/loadTranslations.ts b/tools/bundle-analysis/examples/tanstack-start/loadTranslations.ts deleted file mode 100644 index b5ccb57154..0000000000 --- a/tools/bundle-analysis/examples/tanstack-start/loadTranslations.ts +++ /dev/null @@ -1,4 +0,0 @@ -export default async function loadTranslations(locale: string) { - const translations = await import(`./src/_gt/${locale}.json`); - return translations.default; -} diff --git a/tools/bundle-analysis/examples/tanstack-start/package.json b/tools/bundle-analysis/examples/tanstack-start/package.json index 0d3f1d4f7b..b24f16d47c 100644 --- a/tools/bundle-analysis/examples/tanstack-start/package.json +++ b/tools/bundle-analysis/examples/tanstack-start/package.json @@ -14,8 +14,7 @@ "@tanstack/react-start": "^1.168.25", "gt-tanstack-start": "workspace:*", "react": "^19.2.4", - "react-dom": "^19.2.4", - "gt-react": "workspace:*" + "react-dom": "^19.2.4" }, "devDependencies": { "@types/node": "^20", diff --git a/tools/bundle-analysis/examples/tanstack-start/src/components/Footer.tsx b/tools/bundle-analysis/examples/tanstack-start/src/components/Footer.tsx index 38aef90167..d75988783b 100644 --- a/tools/bundle-analysis/examples/tanstack-start/src/components/Footer.tsx +++ b/tools/bundle-analysis/examples/tanstack-start/src/components/Footer.tsx @@ -1,4 +1,4 @@ -import { T } from 'gt-react'; +import { T } from 'gt-tanstack-start'; import { Crosses } from './Crosses'; export function Footer() { diff --git a/tools/bundle-analysis/examples/tanstack-start/src/components/OrderPanel.tsx b/tools/bundle-analysis/examples/tanstack-start/src/components/OrderPanel.tsx index b74098abc7..6efd442c4b 100644 --- a/tools/bundle-analysis/examples/tanstack-start/src/components/OrderPanel.tsx +++ b/tools/bundle-analysis/examples/tanstack-start/src/components/OrderPanel.tsx @@ -1,5 +1,13 @@ import { useState } from 'react'; -import { Branch, Currency, Num, Plural, T, useGT, Var } from 'gt-react'; +import { + Branch, + Currency, + Num, + Plural, + T, + useGT, + Var, +} from 'gt-tanstack-start'; const UNIT_PRICE = 129; const FILTER_PACK_PRICE = 14; diff --git a/tools/bundle-analysis/examples/tanstack-start/src/router.tsx b/tools/bundle-analysis/examples/tanstack-start/src/router.tsx index ab12b2783a..18b1ba6636 100644 --- a/tools/bundle-analysis/examples/tanstack-start/src/router.tsx +++ b/tools/bundle-analysis/examples/tanstack-start/src/router.tsx @@ -1,16 +1,14 @@ import { createRouter } from '@tanstack/react-router'; -import { initializeGT } from 'gt-tanstack-start'; -import gtConfig from '../gt.config.json'; -import loadTranslations from '../loadTranslations'; +import { setupRouterGTIntegration } from 'gt-tanstack-start'; import { routeTree } from './routeTree.gen'; -initializeGT({ ...gtConfig, loadTranslations }); - export function getRouter() { - return createRouter({ + const router = createRouter({ routeTree, scrollRestoration: true, }); + setupRouterGTIntegration({ router }); + return router; } declare module '@tanstack/react-router' { diff --git a/tools/bundle-analysis/examples/tanstack-start/src/routes/__root.tsx b/tools/bundle-analysis/examples/tanstack-start/src/routes/__root.tsx index 65e9ffcec6..2ce9b6bd12 100644 --- a/tools/bundle-analysis/examples/tanstack-start/src/routes/__root.tsx +++ b/tools/bundle-analysis/examples/tanstack-start/src/routes/__root.tsx @@ -4,13 +4,7 @@ import { Scripts, createRootRoute, } from '@tanstack/react-router'; -import { - GTProvider, - getLocale, - getTranslationsSnapshot, - LocaleSelector, - useGT, -} from 'gt-tanstack-start'; +import { LocaleSelector, useGT, useLocale } from 'gt-tanstack-start'; import { GtMark } from '../components/GtMark'; import '../styles.css'; @@ -21,30 +15,20 @@ export const Route = createRootRoute({ { name: 'viewport', content: 'width=device-width, initial-scale=1' }, ], }), - loader: async () => { - const locale = getLocale(); - return { - locale, - translations: await getTranslationsSnapshot(locale), - }; - }, shellComponent: RootDocument, }); function RootDocument({ children }: { children: React.ReactNode }) { - const { locale, translations } = Route.useLoaderData(); return ( - + - -
-
- +
+
diff --git a/tools/bundle-analysis/examples/tanstack-start/src/routes/index.tsx b/tools/bundle-analysis/examples/tanstack-start/src/routes/index.tsx index 202c6dfc59..2a93a20f54 100644 --- a/tools/bundle-analysis/examples/tanstack-start/src/routes/index.tsx +++ b/tools/bundle-analysis/examples/tanstack-start/src/routes/index.tsx @@ -1,7 +1,6 @@ import { createFileRoute, Link } from '@tanstack/react-router'; import { createServerFn } from '@tanstack/react-start'; -import { Currency, DateTime, Num, T, Var } from 'gt-react'; -import { getGT } from 'gt-tanstack-start/server'; +import { Currency, DateTime, getGT, Num, T, Var } from 'gt-tanstack-start'; import { KettleDrawing } from '../components/KettleDrawing'; import { OrderPanel } from '../components/OrderPanel'; import { Crosses } from '../components/Crosses'; diff --git a/tools/bundle-analysis/examples/tanstack-start/src/routes/specs.tsx b/tools/bundle-analysis/examples/tanstack-start/src/routes/specs.tsx index e0f6a1f529..9e011d9548 100644 --- a/tools/bundle-analysis/examples/tanstack-start/src/routes/specs.tsx +++ b/tools/bundle-analysis/examples/tanstack-start/src/routes/specs.tsx @@ -1,5 +1,5 @@ import { createFileRoute } from '@tanstack/react-router'; -import { Num, T, useGT } from 'gt-react'; +import { Num, T, useGT } from 'gt-tanstack-start'; import { Crosses } from '../components/Crosses'; import { Footer } from '../components/Footer'; diff --git a/tools/bundle-analysis/examples/tanstack-start/src/start.ts b/tools/bundle-analysis/examples/tanstack-start/src/start.ts index 48585ec962..55d4549a89 100644 --- a/tools/bundle-analysis/examples/tanstack-start/src/start.ts +++ b/tools/bundle-analysis/examples/tanstack-start/src/start.ts @@ -1,10 +1,9 @@ import { createCsrfMiddleware, createStart } from '@tanstack/react-start'; -import { gtMiddleware } from 'gt-tanstack-start'; const csrfMiddleware = createCsrfMiddleware({ filter: ({ handlerType }) => handlerType === 'serverFn', }); export const startInstance = createStart(() => ({ - requestMiddleware: [csrfMiddleware, gtMiddleware], + requestMiddleware: [csrfMiddleware], })); diff --git a/tools/bundle-analysis/examples/tanstack-start/tsconfig.json b/tools/bundle-analysis/examples/tanstack-start/tsconfig.json index a90891eb00..f21719bdfc 100644 --- a/tools/bundle-analysis/examples/tanstack-start/tsconfig.json +++ b/tools/bundle-analysis/examples/tanstack-start/tsconfig.json @@ -13,10 +13,5 @@ "noEmit": true, "types": ["vite/client"] }, - "include": [ - "src/**/*.ts", - "src/**/*.tsx", - "loadTranslations.ts", - "vite.config.ts" - ] + "include": ["src/**/*.ts", "src/**/*.tsx", "vite.config.ts"] } diff --git a/tools/bundle-analysis/examples/tanstack-start/vite.config.ts b/tools/bundle-analysis/examples/tanstack-start/vite.config.ts index 67e97c501f..546d6df80d 100644 --- a/tools/bundle-analysis/examples/tanstack-start/vite.config.ts +++ b/tools/bundle-analysis/examples/tanstack-start/vite.config.ts @@ -1,5 +1,6 @@ import { tanstackStart } from '@tanstack/react-start/plugin/vite'; import react from '@vitejs/plugin-react'; +import { gtTanstackStart } from 'gt-tanstack-start/plugin/vite'; import { defineConfig } from 'vite'; // The bundle analysis app builds this example with GT_ANALYZE=1 and toggles @@ -10,7 +11,7 @@ const treeShake = process.env.GT_ANALYZE_TREESHAKE !== '0'; export default defineConfig({ server: { port: 4611, strictPort: true }, - plugins: [tanstackStart(), react()], + plugins: [tanstackStart(), react(), gtTanstackStart()], build: { sourcemap: analyze, minify, From bf072ec62645c43db455e3eebc5871d3b840ae2e Mon Sep 17 00:00:00 2001 From: Chenxin Yan Date: Fri, 9 Oct 2026 15:41:36 -0700 Subject: [PATCH 2/2] docs(examples): credit the router integration for the client-only route's translations The comment still named the root loader, which this setup removed. --- .../examples/tanstack-start/src/routes/specs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tools/bundle-analysis/examples/tanstack-start/src/routes/specs.tsx b/tools/bundle-analysis/examples/tanstack-start/src/routes/specs.tsx index 9e011d9548..bb767f9b8a 100644 --- a/tools/bundle-analysis/examples/tanstack-start/src/routes/specs.tsx +++ b/tools/bundle-analysis/examples/tanstack-start/src/routes/specs.tsx @@ -4,7 +4,7 @@ import { Crosses } from '../components/Crosses'; import { Footer } from '../components/Footer'; // This route skips server rendering, so its translations resolve in the -// browser from the snapshot the root loader sent down. +// browser from the snapshot the router integration sent down. export const Route = createFileRoute('/specs')({ ssr: false, component: Specs,