Skip to content

Commit b833653

Browse files
depsimondepsimon
authored
docs(examples): add Tanstack Start example (#2209)
1 parent 643a604 commit b833653

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+9771
-0
lines changed

‎examples/tanstack-start/.gitignore

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
node_modules
2+
.yarn
3+
4+
.DS_Store
5+
.cache
6+
.env
7+
.vercel
8+
.output
9+
.vinxi
10+
11+
/build/
12+
/api/
13+
/server/build
14+
/public/build
15+
.vinxi
16+
# Sentry Config File
17+
.env.sentry-build-plugin
18+
/test-results/
19+
/playwright-report/
20+
/blob-report/
21+
/playwright/.cache/

‎examples/tanstack-start/.prettierignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
**/build
2+
**/public
3+
pnpm-lock.yaml
4+
routeTree.gen.ts

‎examples/tanstack-start/README.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Example project using Tanstack Start + Vite + Babel with LinguiJS Plugin
2+
3+
This is a [Tanstack Start](https://tanstack.com/start/latest) project that demonstrates i18n support with Lingui.
4+
5+
## Development
6+
7+
From your terminal:
8+
9+
```sh
10+
yarn install
11+
yarn dev
12+
```
13+
14+
This starts your app in development mode, rebuilding assets on file changes.

‎examples/tanstack-start/app.config.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { lingui } from "@lingui/vite-plugin"
2+
import { defineConfig } from "@tanstack/react-start/config"
3+
import tsConfigPaths from "vite-tsconfig-paths"
4+
5+
export default defineConfig({
6+
tsr: {
7+
appDirectory: "src",
8+
},
9+
react: {
10+
babel: {
11+
plugins: ["@lingui/babel-plugin-lingui-macro"],
12+
},
13+
},
14+
vite: {
15+
plugins: [
16+
lingui(),
17+
tsConfigPaths({
18+
projects: ["./tsconfig.json"],
19+
}),
20+
],
21+
},
22+
})

‎examples/tanstack-start/lingui.config.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { defineConfig } from "@lingui/cli"
2+
3+
export default defineConfig({
4+
catalogs: [
5+
{
6+
include: ["src"],
7+
path: "<rootDir>/src/locales/{locale}/messages",
8+
},
9+
],
10+
locales: ["fr", "en"],
11+
sourceLocale: "en",
12+
})

‎examples/tanstack-start/package.json

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "tanstack-start",
3+
"private": true,
4+
"sideEffects": false,
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vinxi dev",
8+
"build": "vinxi build",
9+
"lingui:extract": "lingui extract --clean",
10+
"start": "vinxi start"
11+
},
12+
"dependencies": {
13+
"@lingui/core": "^5.3.0",
14+
"@lingui/react": "^5.3.0",
15+
"@tanstack/react-router": "^1.114.27",
16+
"@tanstack/react-router-devtools": "^1.114.27",
17+
"@tanstack/react-start": "^1.114.28",
18+
"cookie-es": "^2.0.0",
19+
"react": "^19.0.0",
20+
"react-dom": "^19.0.0",
21+
"redaxios": "^0.5.1",
22+
"tailwind-merge": "^2.6.0",
23+
"vinxi": "0.5.3"
24+
},
25+
"devDependencies": {
26+
"@lingui/babel-plugin-lingui-macro": "^5.3.0",
27+
"@lingui/cli": "^5.3.0",
28+
"@lingui/vite-plugin": "^5.3.0",
29+
"@types/node": "^22.5.4",
30+
"@types/react": "^19.0.8",
31+
"@types/react-dom": "^19.0.3",
32+
"autoprefixer": "^10.4.20",
33+
"postcss": "^8.5.1",
34+
"tailwindcss": "^3.4.17",
35+
"typescript": "^5.7.2",
36+
"vite-tsconfig-paths": "^5.1.4"
37+
}
38+
}

‎examples/tanstack-start/postcss.config.mjs

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎examples/tanstack-start/public/android-chrome-192x192.png

29.3 KB
Loading

‎examples/tanstack-start/public/android-chrome-512x512.png

107 KB
Loading

‎examples/tanstack-start/public/apple-touch-icon.png

26.6 KB
Loading

‎examples/tanstack-start/public/favicon-16x16.png

832 Bytes
Loading

‎examples/tanstack-start/public/favicon-32x32.png

2.07 KB
Loading

‎examples/tanstack-start/public/favicon.ico

15 KB
Binary file not shown.

‎examples/tanstack-start/public/favicon.png

1.47 KB
Loading

‎examples/tanstack-start/public/site.webmanifest

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "",
3+
"short_name": "",
4+
"icons": [
5+
{
6+
"src": "/android-chrome-192x192.png",
7+
"sizes": "192x192",
8+
"type": "image/png"
9+
},
10+
{
11+
"src": "/android-chrome-512x512.png",
12+
"sizes": "512x512",
13+
"type": "image/png"
14+
}
15+
],
16+
"theme_color": "#ffffff",
17+
"background_color": "#ffffff",
18+
"display": "standalone"
19+
}

‎examples/tanstack-start/src/api.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import {
2+
createStartAPIHandler,
3+
defaultAPIFileRouteHandler,
4+
} from "@tanstack/react-start/api"
5+
6+
export default createStartAPIHandler(defaultAPIFileRouteHandler)

‎examples/tanstack-start/src/client.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/// <reference types="vinxi/types/client" />
2+
import { i18n } from "@lingui/core"
3+
import { hydrateRoot } from "react-dom/client"
4+
import { StartClient } from "@tanstack/react-start"
5+
import { dynamicActivate } from "./modules/lingui/i18n"
6+
7+
import { createRouter } from "./router"
8+
9+
// The lang should be set by the server
10+
dynamicActivate(document.documentElement.lang)
11+
12+
const router = createRouter({ i18n })
13+
14+
hydrateRoot(document, <StartClient router={router} />)

‎examples/tanstack-start/src/components/DefaultCatchBoundary.tsx

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { Trans } from "@lingui/react/macro"
2+
import {
3+
ErrorComponent,
4+
Link,
5+
rootRouteId,
6+
useMatch,
7+
useRouter,
8+
} from "@tanstack/react-router"
9+
import type { ErrorComponentProps } from "@tanstack/react-router"
10+
11+
export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
12+
const router = useRouter()
13+
const isRoot = useMatch({
14+
strict: false,
15+
select: (state) => state.id === rootRouteId,
16+
})
17+
18+
console.error("DefaultCatchBoundary Error:", error)
19+
20+
return (
21+
<div className="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6">
22+
<ErrorComponent error={error} />
23+
<div className="flex gap-2 items-center flex-wrap">
24+
<button
25+
onClick={() => {
26+
router.invalidate()
27+
}}
28+
className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
29+
>
30+
<Trans>Try Again</Trans>
31+
</button>
32+
{isRoot ? (
33+
<Link
34+
to="/"
35+
className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
36+
>
37+
<Trans>Home</Trans>
38+
</Link>
39+
) : (
40+
<Link
41+
to="/"
42+
className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
43+
onClick={(e) => {
44+
e.preventDefault()
45+
window.history.back()
46+
}}
47+
>
48+
<Trans>Go Back</Trans>
49+
</Link>
50+
)}
51+
</div>
52+
</div>
53+
)
54+
}

‎examples/tanstack-start/src/components/NotFound.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Trans } from "@lingui/react/macro"
2+
import { Link } from "@tanstack/react-router"
3+
4+
export function NotFound({ children }: { children?: any }) {
5+
return (
6+
<div className="space-y-2 p-2">
7+
<div className="text-gray-600 dark:text-gray-400">
8+
{children || (
9+
<p>
10+
<Trans>The page you are looking for does not exist.</Trans>
11+
</p>
12+
)}
13+
</div>
14+
<p className="flex items-center gap-2 flex-wrap">
15+
<button
16+
onClick={() => window.history.back()}
17+
className="bg-emerald-500 text-white px-2 py-1 rounded uppercase font-black text-sm"
18+
>
19+
<Trans>Go back</Trans>
20+
</button>
21+
<Link
22+
to="/"
23+
className="bg-cyan-600 text-white px-2 py-1 rounded uppercase font-black text-sm"
24+
>
25+
<Trans>Start Over</Trans>
26+
</Link>
27+
</p>
28+
</div>
29+
)
30+
}

‎examples/tanstack-start/src/components/PostError.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { ErrorComponent, ErrorComponentProps } from "@tanstack/react-router"
2+
3+
export function PostErrorComponent({ error }: ErrorComponentProps) {
4+
return <ErrorComponent error={error} />
5+
}

‎examples/tanstack-start/src/components/UserError.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { ErrorComponent, ErrorComponentProps } from "@tanstack/react-router"
2+
3+
export function UserErrorComponent({ error }: ErrorComponentProps) {
4+
return <ErrorComponent error={error} />
5+
}

‎examples/tanstack-start/src/global-middleware.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { registerGlobalMiddleware } from "@tanstack/react-start"
2+
import { logMiddleware } from "./utils/loggingMiddleware"
3+
4+
registerGlobalMiddleware({
5+
middleware: [logMiddleware],
6+
})

0 commit comments

Comments
 (0)