Skip to content

Commit af2bfbd

Browse files
AleksandrSlAleksandrSl
committed
feat: update vite example with a second page and fix router
1 parent 210aefb commit af2bfbd

6 files changed

Lines changed: 132 additions & 51 deletions

File tree

‎cmp/demo/vite-react-spa/src/components/Header.tsx‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,34 @@
11
import { LocaleSwitcher } from "@lingo.dev/compiler/react";
2+
import { Link } from "@tanstack/react-router";
23

34
export default function Header() {
45
return (
56
<header className="p-4 flex gap-4 items-center justify-between bg-gray-800 text-white shadow-lg">
6-
<span>Lingo.dev compiler Tanstack router demo</span>
7+
<div className="flex items-center gap-6">
8+
<span className="font-semibold">
9+
Lingo.dev compiler Tanstack router demo
10+
</span>
11+
<nav className="flex gap-4">
12+
<Link
13+
to="/"
14+
className="hover:text-blue-300 transition-colors [&.active]:text-blue-400 [&.active]:font-semibold"
15+
activeProps={{ className: "active" }}
16+
>
17+
Home
18+
</Link>
19+
<Link
20+
to="/about"
21+
className="hover:text-blue-300 transition-colors [&.active]:text-blue-400 [&.active]:font-semibold"
22+
activeProps={{ className: "active" }}
23+
>
24+
About
25+
</Link>
26+
</nav>
27+
</div>
28+
<div>
29+
This header is not translated, since it's not marked with "use i18n",
30+
but "useDirective" is "true"
31+
</div>
732
<LocaleSwitcher
833
locales={[
934
{ code: "en", label: "English" },

‎cmp/demo/vite-react-spa/src/main.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import { StrictMode } from "react";
22
import ReactDOM from "react-dom/client";
3-
import { RouterProvider, createRouter } from "@tanstack/react-router";
3+
import { createRouter, RouterProvider } from "@tanstack/react-router";
44

5-
// Import the generated route tree
65
import { routeTree } from "./routeTree.gen";
76

87
import "./styles.css";
98
import reportWebVitals from "./reportWebVitals.ts";
9+
import { LingoProvider } from "@lingo.dev/compiler/react";
1010

11-
// Create a new router instance
1211
const router = createRouter({
1312
routeTree,
1413
context: {},
@@ -31,7 +30,9 @@ if (rootElement && !rootElement.innerHTML) {
3130
const root = ReactDOM.createRoot(rootElement);
3231
root.render(
3332
<StrictMode>
34-
<RouterProvider router={router} />
33+
<LingoProvider>
34+
<RouterProvider router={router} />
35+
</LingoProvider>
3536
</StrictMode>,
3637
);
3738
}

‎cmp/demo/vite-react-spa/src/routeTree.gen.ts‎

Lines changed: 44 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,52 +8,70 @@
88
// You should NOT make any changes in this file as it will be overwritten.
99
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
1010

11-
import { Route as rootRouteImport } from "./routes/__root";
12-
import { Route as IndexRouteImport } from "./routes/index";
11+
import { Route as rootRouteImport } from './routes/__root'
12+
import { Route as AboutRouteImport } from './routes/about'
13+
import { Route as IndexRouteImport } from './routes/index'
1314

15+
const AboutRoute = AboutRouteImport.update({
16+
id: '/about',
17+
path: '/about',
18+
getParentRoute: () => rootRouteImport,
19+
} as any)
1420
const IndexRoute = IndexRouteImport.update({
15-
id: "/",
16-
path: "/",
21+
id: '/',
22+
path: '/',
1723
getParentRoute: () => rootRouteImport,
18-
} as any);
24+
} as any)
1925

2026
export interface FileRoutesByFullPath {
21-
"/": typeof IndexRoute;
27+
'/': typeof IndexRoute
28+
'/about': typeof AboutRoute
2229
}
2330
export interface FileRoutesByTo {
24-
"/": typeof IndexRoute;
31+
'/': typeof IndexRoute
32+
'/about': typeof AboutRoute
2533
}
2634
export interface FileRoutesById {
27-
__root__: typeof rootRouteImport;
28-
"/": typeof IndexRoute;
35+
__root__: typeof rootRouteImport
36+
'/': typeof IndexRoute
37+
'/about': typeof AboutRoute
2938
}
3039
export interface FileRouteTypes {
31-
fileRoutesByFullPath: FileRoutesByFullPath;
32-
fullPaths: "/";
33-
fileRoutesByTo: FileRoutesByTo;
34-
to: "/";
35-
id: "__root__" | "/";
36-
fileRoutesById: FileRoutesById;
40+
fileRoutesByFullPath: FileRoutesByFullPath
41+
fullPaths: '/' | '/about'
42+
fileRoutesByTo: FileRoutesByTo
43+
to: '/' | '/about'
44+
id: '__root__' | '/' | '/about'
45+
fileRoutesById: FileRoutesById
3746
}
3847
export interface RootRouteChildren {
39-
IndexRoute: typeof IndexRoute;
48+
IndexRoute: typeof IndexRoute
49+
AboutRoute: typeof AboutRoute
4050
}
4151

42-
declare module "@tanstack/react-router" {
52+
declare module '@tanstack/react-router' {
4353
interface FileRoutesByPath {
44-
"/": {
45-
id: "/";
46-
path: "/";
47-
fullPath: "/";
48-
preLoaderRoute: typeof IndexRouteImport;
49-
parentRoute: typeof rootRouteImport;
50-
};
54+
'/about': {
55+
id: '/about'
56+
path: '/about'
57+
fullPath: '/about'
58+
preLoaderRoute: typeof AboutRouteImport
59+
parentRoute: typeof rootRouteImport
60+
}
61+
'/': {
62+
id: '/'
63+
path: '/'
64+
fullPath: '/'
65+
preLoaderRoute: typeof IndexRouteImport
66+
parentRoute: typeof rootRouteImport
67+
}
5168
}
5269
}
5370

5471
const rootRouteChildren: RootRouteChildren = {
5572
IndexRoute: IndexRoute,
56-
};
73+
AboutRoute: AboutRoute,
74+
}
5775
export const routeTree = rootRouteImport
5876
._addFileChildren(rootRouteChildren)
59-
._addFileTypes<FileRouteTypes>();
77+
._addFileTypes<FileRouteTypes>()

‎cmp/demo/vite-react-spa/src/routes/__root.tsx‎

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,23 @@ import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
33
import { TanStackDevtools } from "@tanstack/react-devtools";
44

55
import Header from "../components/Header";
6-
import { LingoProvider } from "@lingo.dev/compiler/react";
76

87
export const Route = createRootRoute({
98
component: () => (
10-
<LingoProvider>
11-
<div className="flex flex-col min-h-screen">
12-
<Header />
13-
<Outlet />
14-
<TanStackDevtools
15-
config={{
16-
position: "bottom-right",
17-
}}
18-
plugins={[
19-
{
20-
name: "Tanstack Router",
21-
render: <TanStackRouterDevtoolsPanel />,
22-
},
23-
]}
24-
/>
25-
</div>
26-
</LingoProvider>
9+
<div className="flex flex-col min-h-screen">
10+
<Header />
11+
<Outlet />
12+
<TanStackDevtools
13+
config={{
14+
position: "bottom-right",
15+
}}
16+
plugins={[
17+
{
18+
name: "Tanstack Router",
19+
render: <TanStackRouterDevtoolsPanel />,
20+
},
21+
]}
22+
/>
23+
</div>
2724
),
2825
});

‎cmp/demo/vite-react-spa/src/routes/about.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
"use i18n";
2+
import { createFileRoute } from "@tanstack/react-router";
3+
4+
export const Route = createFileRoute("/about")({
5+
component: About,
6+
});
7+
8+
function About() {
9+
return (
10+
<main className="flex grow w-full flex-col items-center gap-4 py-32 px-16 bg-white dark:bg-black sm:items-start text-gray-100">
11+
<h1 className="text-4xl font-bold mb-4">About Lingo.dev</h1>
12+
<p className="mb-4">
13+
This is a demo application showcasing the Lingo.dev compiler for
14+
automatic translations in React applications.
15+
</p>
16+
<div className="space-y-4 max-w-2xl">
17+
<section>
18+
<h2 className="text-2xl font-semibold mb-2">Key Features</h2>
19+
<ul className="list-disc list-inside space-y-2">
20+
<li>Automatic extraction of translatable text from JSX</li>
21+
<li>Build-time transformation with zero runtime overhead</li>
22+
<li>Support for multiple bundlers (Vite, Webpack, Next.js)</li>
23+
<li>Hash-based translation system for stable identifiers</li>
24+
<li>Server and client component support</li>
25+
</ul>
26+
</section>
27+
<section>
28+
<h2 className="text-2xl font-semibold mb-2">How It Works</h2>
29+
<p className="mb-2">
30+
The compiler analyzes your React components at build time and
31+
automatically extracts all translatable strings. It then generates
32+
translations using your configured translation provider.
33+
</p>
34+
<p>
35+
Simply add the "use i18n" directive at the top of your component
36+
files, and the compiler handles the rest!
37+
</p>
38+
</section>
39+
</div>
40+
</main>
41+
);
42+
}

‎cmp/demo/vite-react-spa/vite.config.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,6 @@ export default defineConfig({
2525
}),
2626
tanstackRouter({
2727
target: "react",
28-
// TODO (AleksandrSl 03/12/2025): Turning code splitting on breaks the translations.
29-
autoCodeSplitting: false,
3028
}),
3129
viteReact(),
3230
tailwindcss(),

0 commit comments

Comments
 (0)