docs: add paraglide examples #5257
Conversation
WalkthroughAdds two new React example apps demonstrating Paraglide i18n integration: a client-only Vite app and an SSR TanStack Start app with scaffolding, translations (en/de), Inlang settings, Vite/TS configs, generated route trees, routing files using deLocalize/localize rewrites, SSR middleware, utilities, and README docs. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant B as Browser
participant R as Router
participant RW as URL Rewriter
participant P as Paraglide
participant Rt as Routes
B->>R: Navigate to URL
R->>RW: onIn: deLocalizeUrl(url)
RW->>P: determine locale/path
P-->>RW: { locale, path }
RW-->>R: Rewritten URL
R->>Rt: Match route, run beforeLoad
Rt->>P: getLocale() / shouldRedirect()
alt redirect needed
Rt-->>R: throw redirect(newUrl)
R-->>B: Redirect to localized URL
else proceed
R-->>B: Render route component
end
Note over RW,R: onOut: localizeUrl(href) for generated links
sequenceDiagram
autonumber
participant C as Client
participant S as Server
participant PM as ParaglideMiddleware
participant H as Start Handler
C->>S: HTTP request
S->>PM: paraglideMiddleware.fetch(request)
PM->>PM: resolve locale (url/cookie/header)
PM->>H: forward adjusted request to Start handler
H-->>PM: SSR response (HTML)
PM-->>S: Response
S-->>C: Response
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 10
🧹 Nitpick comments (11)
examples/react/i18n-paraglide/tsconfig.json (1)
9-9: DropallowJsto keep the example purely TypeScriptThe include globs only pull in TS/TSX files, so this flag has no effect other than allowing accidental
.jsimports to slip through. Removing it keeps the example strictly typed, which fits the guidance for these projects.- "allowJs": true,examples/react/start-i18n-paraglide/tsconfig.json (1)
11-16: Prefer verbatimModuleSyntax with bundler resolutionWith
"moduleResolution": "bundler", modern TS recommends"verbatimModuleSyntax": truefor accurate ESM semantics."moduleResolution": "bundler", "allowImportingTsExtensions": true, - "verbatimModuleSyntax": false, + "verbatimModuleSyntax": true, "noEmit": true,examples/react/start-i18n-paraglide/README.md (3)
1-1: Fix typo in title ("TanSTack" → "TanStack").Small polish.
-# TanSTack Start example +# TanStack Start example
55-56: Normalize import extensions for TS/ESM consistency.Use extensionless imports within TS for consistency across snippets.
-import { deLocalizeUrl, localizeUrl } from "./paraglide/runtime.js"; +import { deLocalizeUrl, localizeUrl } from "./paraglide/runtime"; -import { paraglideMiddleware } from "./paraglide/server.js"; +import { paraglideMiddleware } from "./paraglide/server"; -import { getLocale } from "../paraglide/runtime.js"; +import { getLocale } from "../paraglide/runtime"; -import { shouldRedirect } from "../paraglide/runtime"; +import { shouldRedirect } from "../paraglide/runtime"; -import { localizeHref } from "./paraglide/runtime"; +import { localizeHref } from "./paraglide/runtime";Also applies to: 69-77, 82-82, 104-105, 188-188
79-79: Grammar and spelling nits.Quick readability fixes.
-In `__root.tsx` add change the html lang attribute to the current locale. +In `__root.tsx`, set the html lang attribute to the current locale. -And import into the Paraglide Vite plguin. +And import into the Paraglide Vite plugin. -You can use use the `localizeHref` function to map the routes to localized versions and import into the pages option in the TanStack Start plugin. For this to work you will need to compile paraglide before the build with the CLI. +You can use the `localizeHref` function to map routes to localized versions and import them into the `pages` option in the TanStack Start plugin. For this to work, compile Paraglide before the build with the CLI.Also applies to: 181-181, 185-185
examples/react/start-i18n-paraglide/.vscode/settings.json (1)
1-11: Broaden ignore/read‑only globs to future variants.Guard against d.ts/format changes by matching all routeTree.gen.*.
"files.watcherExclude": { - "**/routeTree.gen.ts": true + "**/routeTree.gen.*": true }, "search.exclude": { - "**/routeTree.gen.ts": true + "**/routeTree.gen.*": true }, "files.readonlyInclude": { - "**/routeTree.gen.ts": true + "**/routeTree.gen.*": true }examples/react/i18n-paraglide/README.md (2)
3-3: Use descriptive link textThe link text “here” is flagged by markdownlint (MD059) and isn’t very discoverable. Please swap it for something descriptive.
-This example shows how to use Paraglide with TanStack Router. The source code can be found [here](https://github.com/opral/monorepo/tree/main/inlang/packages/paraglide/paraglide-js/examples/tanstack-router). +This example shows how to use Paraglide with TanStack Router. The source code can be found in the [Paraglide JS TanStack Router example](https://github.com/opral/monorepo/tree/main/inlang/packages/paraglide/paraglide-js/examples/tanstack-router).
22-30: Replace tab characters with spacesMarkdown lint (MD010) is warning about hard tabs in this code sample. Converting them to spaces will keep the docs consistent with our style guide. As per coding guidelines.
-export default defineConfig({ - plugins: [ - tanstackRouter({ target: 'react', autoCodeSplitting: true }), - react(), -+ paraglideVitePlugin({ -+ project: "./project.inlang", -+ outdir: "./app/paraglide", -+ }), - ], +export default defineConfig({ + plugins: [ + tanstackRouter({ target: 'react', autoCodeSplitting: true }), + react(), + paraglideVitePlugin({ + project: "./project.inlang", + outdir: "./app/paraglide", + }), + ], });examples/react/i18n-paraglide/src/routes/__root.tsx (1)
50-59: Improve locale switcher accessibility (add aria-pressed and button type).Convey active state to assistive tech and avoid implicit submit behavior.
Apply this diff:
- {locales.map((locale) => ( - <button + {locales.map((locale) => ( + <button key={locale} onClick={() => setLocale(locale)} data-active-locale={locale === getLocale()} + aria-pressed={locale === getLocale()} + type="button" className="rounded p-1 px-2 border border-gray-300 cursor-pointer [&[data-active-locale=true]]:bg-gray-500 [&[data-active-locale=true]]:text-white" > {locale} </button> ))}examples/react/start-i18n-paraglide/src/routes/index.tsx (1)
27-31: Minor: remove stray trailing colon in UI.Cosmetic polish.
- <h2>Server function message: {serverFunctionMessage}:</h2> + <h2>Server function message: {serverFunctionMessage}</h2>examples/react/start-i18n-paraglide/src/routes/__root.tsx (1)
63-72: Add aria-pressed and button type to locale switcher.Improves accessibility and avoids accidental form submits.
- {locales.map((locale) => ( - <button + {locales.map((locale) => ( + <button key={locale} onClick={() => setLocale(locale)} data-active-locale={locale === getLocale()} + aria-pressed={locale === getLocale()} + type="button" className="rounded p-1 px-2 border border-gray-300 cursor-pointer [&[data-active-locale=true]]:bg-gray-500 [&[data-active-locale=true]]:text-white" > {locale} </button> ))}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (8)
examples/react/i18n-paraglide/public/favicon.icois excluded by!**/*.icoexamples/react/i18n-paraglide/public/logo192.pngis excluded by!**/*.pngexamples/react/i18n-paraglide/public/logo512.pngis excluded by!**/*.pngexamples/react/i18n-paraglide/src/logo.svgis excluded by!**/*.svgexamples/react/start-i18n-paraglide/public/favicon.icois excluded by!**/*.icoexamples/react/start-i18n-paraglide/public/logo192.pngis excluded by!**/*.pngexamples/react/start-i18n-paraglide/public/logo512.pngis excluded by!**/*.pngexamples/react/start-i18n-paraglide/src/logo.svgis excluded by!**/*.svg
📒 Files selected for processing (44)
examples/react/i18n-paraglide/.gitignore(1 hunks)examples/react/i18n-paraglide/.vscode/settings.json(1 hunks)examples/react/i18n-paraglide/README.md(1 hunks)examples/react/i18n-paraglide/index.html(1 hunks)examples/react/i18n-paraglide/messages/de.json(1 hunks)examples/react/i18n-paraglide/messages/en.json(1 hunks)examples/react/i18n-paraglide/package.json(1 hunks)examples/react/i18n-paraglide/project.inlang/.gitignore(1 hunks)examples/react/i18n-paraglide/project.inlang/project_id(1 hunks)examples/react/i18n-paraglide/project.inlang/settings.json(1 hunks)examples/react/i18n-paraglide/public/manifest.json(1 hunks)examples/react/i18n-paraglide/public/robots.txt(1 hunks)examples/react/i18n-paraglide/src/main.tsx(1 hunks)examples/react/i18n-paraglide/src/routeTree.gen.ts(1 hunks)examples/react/i18n-paraglide/src/routes/__root.tsx(1 hunks)examples/react/i18n-paraglide/src/routes/about.tsx(1 hunks)examples/react/i18n-paraglide/src/routes/index.tsx(1 hunks)examples/react/i18n-paraglide/src/styles.css(1 hunks)examples/react/i18n-paraglide/tsconfig.json(1 hunks)examples/react/i18n-paraglide/vite.config.ts(1 hunks)examples/react/start-i18n-paraglide/.gitignore(1 hunks)examples/react/start-i18n-paraglide/.vscode/extensions.json(1 hunks)examples/react/start-i18n-paraglide/.vscode/settings.json(1 hunks)examples/react/start-i18n-paraglide/README.md(1 hunks)examples/react/start-i18n-paraglide/messages/de.json(1 hunks)examples/react/start-i18n-paraglide/messages/en.json(1 hunks)examples/react/start-i18n-paraglide/package.json(1 hunks)examples/react/start-i18n-paraglide/project.inlang/.gitignore(1 hunks)examples/react/start-i18n-paraglide/project.inlang/project_id(1 hunks)examples/react/start-i18n-paraglide/project.inlang/settings.json(1 hunks)examples/react/start-i18n-paraglide/public/manifest.json(1 hunks)examples/react/start-i18n-paraglide/public/robots.txt(1 hunks)examples/react/start-i18n-paraglide/src/routeTree.gen.ts(1 hunks)examples/react/start-i18n-paraglide/src/router.tsx(1 hunks)examples/react/start-i18n-paraglide/src/routes/__root.tsx(1 hunks)examples/react/start-i18n-paraglide/src/routes/about.tsx(1 hunks)examples/react/start-i18n-paraglide/src/routes/index.tsx(1 hunks)examples/react/start-i18n-paraglide/src/server.ts(1 hunks)examples/react/start-i18n-paraglide/src/styles.css(1 hunks)examples/react/start-i18n-paraglide/src/utils/prerender.ts(1 hunks)examples/react/start-i18n-paraglide/src/utils/seo.ts(1 hunks)examples/react/start-i18n-paraglide/src/utils/translated-pathnames.ts(1 hunks)examples/react/start-i18n-paraglide/tsconfig.json(1 hunks)examples/react/start-i18n-paraglide/vite.config.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with extensive type safety across the codebase
Files:
examples/react/start-i18n-paraglide/src/utils/seo.tsexamples/react/start-i18n-paraglide/src/router.tsxexamples/react/i18n-paraglide/src/routes/index.tsxexamples/react/start-i18n-paraglide/src/routes/about.tsxexamples/react/start-i18n-paraglide/src/server.tsexamples/react/start-i18n-paraglide/src/utils/prerender.tsexamples/react/start-i18n-paraglide/src/routes/__root.tsxexamples/react/i18n-paraglide/vite.config.tsexamples/react/start-i18n-paraglide/src/routeTree.gen.tsexamples/react/i18n-paraglide/src/routeTree.gen.tsexamples/react/start-i18n-paraglide/src/utils/translated-pathnames.tsexamples/react/i18n-paraglide/src/routes/__root.tsxexamples/react/start-i18n-paraglide/src/routes/index.tsxexamples/react/i18n-paraglide/src/routes/about.tsxexamples/react/start-i18n-paraglide/vite.config.tsexamples/react/i18n-paraglide/src/main.tsx
examples/{react,solid}/**
📄 CodeRabbit inference engine (AGENTS.md)
Keep example applications under examples/react/ and examples/solid/
Files:
examples/react/start-i18n-paraglide/src/utils/seo.tsexamples/react/start-i18n-paraglide/public/manifest.jsonexamples/react/start-i18n-paraglide/messages/en.jsonexamples/react/start-i18n-paraglide/project.inlang/settings.jsonexamples/react/start-i18n-paraglide/src/styles.cssexamples/react/i18n-paraglide/messages/en.jsonexamples/react/start-i18n-paraglide/src/router.tsxexamples/react/start-i18n-paraglide/project.inlang/project_idexamples/react/i18n-paraglide/src/styles.cssexamples/react/i18n-paraglide/src/routes/index.tsxexamples/react/start-i18n-paraglide/tsconfig.jsonexamples/react/start-i18n-paraglide/src/routes/about.tsxexamples/react/start-i18n-paraglide/src/server.tsexamples/react/start-i18n-paraglide/src/utils/prerender.tsexamples/react/start-i18n-paraglide/src/routes/__root.tsxexamples/react/i18n-paraglide/vite.config.tsexamples/react/start-i18n-paraglide/src/routeTree.gen.tsexamples/react/i18n-paraglide/tsconfig.jsonexamples/react/i18n-paraglide/src/routeTree.gen.tsexamples/react/i18n-paraglide/index.htmlexamples/react/i18n-paraglide/project.inlang/project_idexamples/react/start-i18n-paraglide/src/utils/translated-pathnames.tsexamples/react/i18n-paraglide/public/manifest.jsonexamples/react/start-i18n-paraglide/public/robots.txtexamples/react/i18n-paraglide/messages/de.jsonexamples/react/i18n-paraglide/src/routes/__root.tsxexamples/react/start-i18n-paraglide/package.jsonexamples/react/start-i18n-paraglide/README.mdexamples/react/start-i18n-paraglide/messages/de.jsonexamples/react/start-i18n-paraglide/src/routes/index.tsxexamples/react/i18n-paraglide/src/routes/about.tsxexamples/react/i18n-paraglide/public/robots.txtexamples/react/i18n-paraglide/project.inlang/settings.jsonexamples/react/i18n-paraglide/package.jsonexamples/react/start-i18n-paraglide/vite.config.tsexamples/react/i18n-paraglide/README.mdexamples/react/i18n-paraglide/src/main.tsx
**/src/routes/**
📄 CodeRabbit inference engine (AGENTS.md)
Place file-based routes under src/routes/ directories
Files:
examples/react/i18n-paraglide/src/routes/index.tsxexamples/react/start-i18n-paraglide/src/routes/about.tsxexamples/react/start-i18n-paraglide/src/routes/__root.tsxexamples/react/i18n-paraglide/src/routes/__root.tsxexamples/react/start-i18n-paraglide/src/routes/index.tsxexamples/react/i18n-paraglide/src/routes/about.tsx
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace:* protocol for internal dependencies in package.json files
Files:
examples/react/start-i18n-paraglide/package.jsonexamples/react/i18n-paraglide/package.json
🧠 Learnings (2)
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
PR: TanStack/router#0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript in strict mode with extensive type safety across the codebase
Applied to files:
examples/react/start-i18n-paraglide/tsconfig.jsonexamples/react/i18n-paraglide/tsconfig.json
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
PR: TanStack/router#0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{react-router,solid-router}/** : Implement React and Solid bindings/components only in packages/react-router/ and packages/solid-router/
Applied to files:
examples/react/i18n-paraglide/src/routes/__root.tsxexamples/react/i18n-paraglide/src/main.tsx
🧬 Code graph analysis (10)
examples/react/start-i18n-paraglide/src/utils/seo.ts (1)
scripts/llms-generate.mjs (1)
title(96-96)
examples/react/i18n-paraglide/src/routes/index.tsx (2)
examples/react/i18n-paraglide/src/routes/__root.tsx (1)
Route(15-70)examples/react/start-i18n-paraglide/src/routes/index.tsx (1)
Route(12-21)
examples/react/start-i18n-paraglide/src/routes/about.tsx (2)
examples/react/start-i18n-paraglide/src/routes/__root.tsx (1)
Route(13-31)examples/react/start-i18n-paraglide/src/routes/index.tsx (1)
Route(12-21)
examples/react/start-i18n-paraglide/src/routes/__root.tsx (3)
examples/react/i18n-paraglide/src/routes/__root.tsx (1)
Route(15-70)examples/react/start-i18n-paraglide/src/routes/index.tsx (1)
Route(12-21)packages/react-router-devtools/src/TanStackRouterDevtoolsPanel.tsx (1)
TanStackRouterDevtoolsPanel(37-87)
examples/react/start-i18n-paraglide/src/routeTree.gen.ts (2)
examples/react/i18n-paraglide/src/routeTree.gen.ts (6)
FileRoutesByFullPath(26-29)FileRoutesByTo(30-33)FileRoutesById(34-38)FileRouteTypes(39-46)RootRouteChildren(47-50)routeTree(75-77)examples/react/start-i18n-paraglide/src/router.tsx (1)
getRouter(8-18)
examples/react/start-i18n-paraglide/src/utils/translated-pathnames.ts (1)
examples/react/start-i18n-paraglide/src/routeTree.gen.ts (1)
FileRoutesByTo(30-33)
examples/react/i18n-paraglide/src/routes/__root.tsx (2)
examples/react/i18n-paraglide/src/routes/about.tsx (1)
Route(4-6)examples/react/i18n-paraglide/src/routes/index.tsx (1)
Route(4-6)
examples/react/start-i18n-paraglide/src/routes/index.tsx (3)
examples/react/i18n-paraglide/src/routes/__root.tsx (1)
Route(15-70)examples/react/start-i18n-paraglide/src/routes/__root.tsx (1)
Route(13-31)examples/react/start-i18n-paraglide/src/routes/about.tsx (1)
Route(4-6)
examples/react/i18n-paraglide/src/routes/about.tsx (2)
examples/react/i18n-paraglide/src/routes/__root.tsx (1)
Route(15-70)examples/react/i18n-paraglide/src/routes/index.tsx (1)
Route(4-6)
examples/react/i18n-paraglide/src/main.tsx (1)
e2e/react-router/js-only-file-based/src/main.jsx (2)
rootElement(15-15)root(18-18)
🪛 markdownlint-cli2 (0.18.1)
examples/react/i18n-paraglide/README.md
3-3: Link text should be descriptive
(MD059, descriptive-link-text)
22-22: Hard tabs
Column: 1
(MD010, no-hard-tabs)
25-25: Hard tabs
Column: 2
(MD010, no-hard-tabs)
26-26: Hard tabs
Column: 2
(MD010, no-hard-tabs)
27-27: Hard tabs
Column: 2
(MD010, no-hard-tabs)
28-28: Hard tabs
Column: 2
(MD010, no-hard-tabs)
29-29: Hard tabs
Column: 1
(MD010, no-hard-tabs)
🔇 Additional comments (35)
examples/react/start-i18n-paraglide/.vscode/extensions.json (1)
1-4: Extension recommendation looks goodThanks for documenting the Inlang VS Code extension; no issues spotted here.
examples/react/start-i18n-paraglide/public/robots.txt (1)
1-3: Allow-all robots.txt looks goodSimple, standards-compliant robots rules for the example app.
examples/react/start-i18n-paraglide/messages/en.json (1)
1-8: LGTM — English messages wired correctly.Schema reference and placeholders match the new Paraglide integration; nothing to change.
examples/react/start-i18n-paraglide/project.inlang/settings.json (1)
1-14: LGTM — Inlang project config lines up with the resources.Locales mirror the provided message files and the path pattern resolves correctly inside the example app.
examples/react/start-i18n-paraglide/messages/de.json (1)
1-8: LGTM — German translations look consistent.Keys and placeholders stay aligned with the English source.
examples/react/start-i18n-paraglide/src/styles.css (1)
1-1: Tailwind import aligns with new plugin.The
@import "tailwindcss";hook lines up with the@tailwindcss/viteplugin you wired in Vite, so the stylesheet is ready for the v4 utility pipeline. All good here.examples/react/start-i18n-paraglide/vite.config.ts (1)
8-38: Vite plugin stack looks consistent.Solid sequencing—Paraglide runs before Start, and Tailwind plus tsconfig paths round it out. Nothing blocking from my end.
examples/react/i18n-paraglide/messages/en.json (1)
1-7: Message key mismatch with route usage
examples/react/start-i18n-paraglide/src/routes/about.tsxcallsm.about_message(), but this locale file does not defineabout_message. Align the key in the route to an existing one (e.g.,about_page) or add a matching key in all locales.examples/react/start-i18n-paraglide/src/server.ts (1)
4-8: LGTMMiddleware delegation to the Start server entry is clear and minimal.
examples/react/start-i18n-paraglide/src/utils/prerender.ts (1)
3-8: Confirm all locales are prerendered
localizeHref(path)returns a single path. If you need static pages per locale (e.g.,/and/de), ensure both localized paths are included.Would you like a helper that expands
["/","/about"]across all supported locales?examples/react/i18n-paraglide/vite.config.ts (1)
8-49: LGTMPlugin order and Paraglide URL patterns look solid; catch‑all is last, and router plugin precedes React.
examples/react/start-i18n-paraglide/package.json (2)
5-10: Confirm SSR build output path matches start script
scripts.startrunsnode .output/server/index.mjs, butvite buildmust emit your SSR bundle there. Ensure thetanstackStart()plugin in vite.config.ts is configured to output to.output/server/index.mjs, or adjust yourbuild/startcommands accordingly.
21-23: Compatibility verified:@vitejs/plugin-react@^4.7.0supports Vite ^7.1.7 — no changes needed.examples/react/i18n-paraglide/package.json (1)
24-27: Compatibility confirmed: @vitejs/plugin-react@^5.0.3 supports Vite ^7.1.7 peerDependencies.vite includes “^7.0.0”examples/react/start-i18n-paraglide/src/utils/translated-pathnames.ts (1)
47-56: LGTM for initial mappings.The EN/DE mappings look correct and align with routeTree keys.
If you plan to add more routes, ensure FileRoutesByTo stays the single source of truth to catch omissions at compile time.
examples/react/start-i18n-paraglide/src/routeTree.gen.ts (1)
1-87: Generated file looks consistent with routes.IDs, paths, and module augmentations match the example’s routes and router integration.
examples/react/i18n-paraglide/project.inlang/.gitignore (1)
1-1: LGTM.Ignoring project-local cache is appropriate.
examples/react/i18n-paraglide/src/styles.css (1)
1-1: LGTM (Tailwind v4 style import).Matches modern Tailwind usage.
examples/react/i18n-paraglide/project.inlang/project_id (1)
1-1: Confirm non-sensitive project identifier.This looks like a benign ID; just confirm it’s safe to commit.
examples/react/start-i18n-paraglide/src/router.tsx (1)
1-18: Verify runtime helper exports Confirm thatdeLocalizeUrlandlocalizeUrlare actually exported fromexamples/react/start-i18n-paraglide/src/paraglide/runtime.ts(the path used byrouter.tsx).examples/react/i18n-paraglide/.gitignore (1)
1-9: Ignore list covers expected artifactsThe ignore patterns line up with the generated assets for this example and match what we ship elsewhere. Looks good.
examples/react/i18n-paraglide/index.html (1)
1-19: HTML shell wired correctlyEntry document points to the new React entrypoint and references the shipped assets/manifest as expected. No issues spotted.
examples/react/i18n-paraglide/project.inlang/settings.json (1)
1-14: Inlang project configuration looks consistentLocales, base locale, and module setup align with the message files added in this example. Configuration LGTM.
examples/react/i18n-paraglide/messages/de.json (1)
1-6: German translations wired correctlyKeys match the English counterpart and will resolve through
m.*accessors without issue. Nice work.examples/react/i18n-paraglide/src/routes/index.tsx (1)
4-15: Route component renders localized copy as intendedThe file-route registration and usage of
m.example_messageintegrate cleanly with the rest of the example.examples/react/i18n-paraglide/src/routes/about.tsx (1)
4-9: About route hooked up cleanlyRoute registration and localized content follow the same pattern as the index route—looks good.
examples/react/i18n-paraglide/public/manifest.json (1)
1-24: Manifest matches referenced assetsIcon entries and metadata align with the public assets and HTML head configuration. Looks solid.
examples/react/i18n-paraglide/src/main.tsx (1)
10-22: LGTM: router setup and i18n rewrites look correct.Config, rewrites, and module augmentation are consistent with Router v1 patterns.
examples/react/i18n-paraglide/src/routeTree.gen.ts (1)
71-78: Generated route tree wiring reads fine.Matches the declared routes and parent relationships.
examples/react/start-i18n-paraglide/project.inlang/project_id (1)
1-1: Project ID seeded correctlyLooks good—this keeps the new Paraglide project scoped neatly.
examples/react/start-i18n-paraglide/.gitignore (1)
1-10: Solid ignore rules for the example appThe ignore patterns cover the expected build/cache artifacts for this example scaffold.
examples/react/i18n-paraglide/.vscode/settings.json (1)
1-11: Helpful editor guardrailsMarking the generated route tree as read-only and excluding it from watch/search prevents accidental edits—nice touch.
examples/react/i18n-paraglide/public/robots.txt (1)
1-3: Robots directive looks goodAllowing all crawlers is sensible for this public example.
examples/react/start-i18n-paraglide/project.inlang/.gitignore (1)
1-1: Cache directory ignoredIgnoring the Inlang cache keeps the repo clean.
examples/react/start-i18n-paraglide/public/manifest.json (1)
1-25: Manifest metadata aligns with the new exampleStandard PWA metadata with matching icons—looks consistent with the other sample.
| "scripts": { | ||
| "dev": "vite --port 3000", | ||
| "start": "vite --port 3000", | ||
| "build": "vite build && tsc", | ||
| "serve": "vite preview", | ||
| "test": "vitest run" | ||
| }, |
There was a problem hiding this comment.
🧩 Analysis chain
Test script requires Vitest
"test": "vitest run" is defined, but vitest isn’t listed here. If it’s not provided at the repo root, add it to devDependencies or adjust the script.
🏁 Script executed:
#!/bin/bash
# Check if vitest is present anywhere in the repo (root or example)
rg -nP '"vitest"\s*:' -g '!**/node_modules/**'Length of output: 148
🏁 Script executed:
#!/usr/bin/env bash
# Verify presence of vitest in root and example package.json
echo "Checking root package.json for vitest..."
rg -nP '"vitest"\s*:' package.json || echo "No vitest entry in root package.json"
echo
echo "Checking examples/react/i18n-paraglide/package.json for vitest..."
rg -nP '"vitest"\s*:' examples/react/i18n-paraglide/package.json || echo "No vitest entry in example package.json"Length of output: 173
Add Vitest to examples/react/i18n-paraglide/package.json devDependencies
Vitest is declared in the repo root but missing here—npm run test in this example will fail without it.
🤖 Prompt for AI Agents
In examples/react/i18n-paraglide/package.json around lines 5 to 11, the scripts
reference vitest but the package.json has no devDependency for vitest; add
vitest to devDependencies (preferably the same version used in the repo root) so
npm run test works. Update the file by adding a devDependencies section
including "vitest": "<root-version-or-appropriate-semver>" (or run npm install
--save-dev vitest in that example folder) and commit the change.
| "dependencies": { | ||
| "@tailwindcss/vite": "^4.1.13", | ||
| "@tanstack/react-router": "^1.132.2", | ||
| "@tanstack/router-plugin": "^1.132.3", | ||
| "react": "^19.1.1", | ||
| "react-dom": "^19.1.1", | ||
| "tailwindcss": "^4.1.13" | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Use workspace: for internal TanStack packages*
Point internal TanStack deps to the workspace to ensure the example consumes local builds.
As per coding guidelines
"dependencies": {
"@tailwindcss/vite": "^4.1.13",
- "@tanstack/react-router": "^1.132.2",
- "@tanstack/router-plugin": "^1.132.3",
+ "@tanstack/react-router": "workspace:*",
+ "@tanstack/router-plugin": "workspace:*",
"react": "^19.1.1",
"react-dom": "^19.1.1",
"tailwindcss": "^4.1.13"
},📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "dependencies": { | |
| "@tailwindcss/vite": "^4.1.13", | |
| "@tanstack/react-router": "^1.132.2", | |
| "@tanstack/router-plugin": "^1.132.3", | |
| "react": "^19.1.1", | |
| "react-dom": "^19.1.1", | |
| "tailwindcss": "^4.1.13" | |
| }, | |
| "dependencies": { | |
| "@tailwindcss/vite": "^4.1.13", | |
| "@tanstack/react-router": "workspace:*", | |
| "@tanstack/router-plugin": "workspace:*", | |
| "react": "^19.1.1", | |
| "react-dom": "^19.1.1", | |
| "tailwindcss": "^4.1.13" | |
| }, |
🤖 Prompt for AI Agents
In examples/react/i18n-paraglide/package.json around lines 12 to 19, the
internal TanStack packages are pinned to external versions; update the
@tanstack/react-router and @tanstack/router-plugin entries to use "workspace:*"
so the example consumes local workspace builds (replace their version strings
with "workspace:*").
| "@tanstack/react-router": "^1.132.7", | ||
| "@tanstack/react-start": "^1.132.9", | ||
| "react": "^19.1.1", | ||
| "react-dom": "^19.1.1" | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Use workspace: for internal TanStack packages*
In the monorepo examples, internal deps should use workspace:* so examples resolve local builds.
As per coding guidelines
"dependencies": {
- "@tanstack/react-router": "^1.132.7",
- "@tanstack/react-start": "^1.132.9",
+ "@tanstack/react-router": "workspace:*",
+ "@tanstack/react-start": "workspace:*",
"react": "^19.1.1",
"react-dom": "^19.1.1"
},📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "@tanstack/react-router": "^1.132.7", | |
| "@tanstack/react-start": "^1.132.9", | |
| "react": "^19.1.1", | |
| "react-dom": "^19.1.1" | |
| }, | |
| "dependencies": { | |
| "@tanstack/react-router": "workspace:*", | |
| "@tanstack/react-start": "workspace:*", | |
| "react": "^19.1.1", | |
| "react-dom": "^19.1.1" | |
| }, |
🤖 Prompt for AI Agents
In examples/react/start-i18n-paraglide/package.json around lines 12 to 16 the
internal TanStack packages are pinned to specific versions; change the internal
dependencies (e.g. "@tanstack/react-router" and "@tanstack/react-start") to use
"workspace:*" so the example resolves local monorepo builds instead of published
versions—update the dependency values to "workspace:*" and keep external
packages (react, react-dom) as-is.
| function toUrlPattern(path: string) { | ||
| return ( | ||
| path | ||
| // catch-all | ||
| .replace(/\/\$$/, "/:path(.*)?") | ||
| // optional parameters: {-$param} | ||
| .replace(/\{-\$([a-zA-Z0-9_]+)\}/g, ":$1?") | ||
| // named parameters: $param | ||
| .replace(/\$([a-zA-Z0-9_]+)/g, ":$1") | ||
| // remove trailing slash | ||
| .replace(/\/+$/, "") | ||
| ); | ||
| } |
There was a problem hiding this comment.
Bug: toUrlPattern turns "/" into empty string.
Removing trailing slash on "/" yields "", breaking pattern matching. Special‑case the root.
-function toUrlPattern(path: string) {
- return (
- path
- // catch-all
- .replace(/\/\$$/, "/:path(.*)?")
- // optional parameters: {-$param}
- .replace(/\{-\$([a-zA-Z0-9_]+)\}/g, ":$1?")
- // named parameters: $param
- .replace(/\$([a-zA-Z0-9_]+)/g, ":$1")
- // remove trailing slash
- .replace(/\/+$/, "")
- );
-}
+function toUrlPattern(path: string) {
+ const normalized = path
+ // catch-all
+ .replace(/\/\$$/, "/:path(.*)?")
+ // optional parameters: {-$param}
+ .replace(/\{-\$([a-zA-Z0-9_]+)\}/g, ":$1?")
+ // named parameters: $param
+ .replace(/\$([a-zA-Z0-9_]+)/g, ":$1")
+ // remove trailing slash
+ .replace(/\/+$/, "");
+ return normalized === "" ? "/" : normalized;
+}Also apply the same fix in the actual source (utils/translated-pathnames.ts).
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| function toUrlPattern(path: string) { | |
| return ( | |
| path | |
| // catch-all | |
| .replace(/\/\$$/, "/:path(.*)?") | |
| // optional parameters: {-$param} | |
| .replace(/\{-\$([a-zA-Z0-9_]+)\}/g, ":$1?") | |
| // named parameters: $param | |
| .replace(/\$([a-zA-Z0-9_]+)/g, ":$1") | |
| // remove trailing slash | |
| .replace(/\/+$/, "") | |
| ); | |
| } | |
| function toUrlPattern(path: string) { | |
| const normalized = path | |
| // catch-all | |
| .replace(/\/\$$/, "/:path(.*)?") | |
| // optional parameters: {-$param} | |
| .replace(/\{-\$([a-zA-Z0-9_]+)\}/g, ":$1?") | |
| // named parameters: $param | |
| .replace(/\$([a-zA-Z0-9_]+)/g, ":$1") | |
| // remove trailing slash | |
| .replace(/\/+$/, ""); | |
| return normalized === "" ? "/" : normalized; | |
| } |
🤖 Prompt for AI Agents
In examples/react/start-i18n-paraglide/README.md around lines 140 to 152 the
toUrlPattern function strips the trailing slash which turns the root path "/"
into an empty string and breaks matching; update the function to special-case
the root by returning "/" (or the desired root pattern) if the input path is
exactly "/" (or if the result after replacements is empty), otherwise perform
the existing replacements and trailing-slash removal; apply the same change to
the real implementation in utils/translated-pathnames.ts so root paths are
preserved.
| function RouteComponent() { | ||
| return <div>{m.about_message()}</div>; | ||
| } |
There was a problem hiding this comment.
Fix missing translation key call
m.about_message() is not defined in the locale files. Use an existing message key (e.g., about_page) to prevent runtime/type errors.
function RouteComponent() {
- return <div>{m.about_message()}</div>;
+ return <div>{m.about_page()}</div>;
}🤖 Prompt for AI Agents
In examples/react/start-i18n-paraglide/src/routes/about.tsx around lines 8 to
10, the component calls m.about_message() which does not exist in the locale
files; replace that call with the existing translation key (for example
m.about_page()) so it uses a defined message and avoids runtime/type errors, and
ensure the message key matches the exported names from your i18n/messages
module.
| const getServerMessage = createServerFn() | ||
| .inputValidator((emoji: string) => emoji) | ||
| .handler((ctx) => { | ||
| return m.server_message({ emoji: ctx.data }); | ||
| }); |
There was a problem hiding this comment.
Fix server function input shape and await it in the loader.
You're validating a string input but invoking with an object and not awaiting the Promise. This will type-check fail under strict TS and break serialization.
Apply this diff:
export const Route = createFileRoute("/")({
- component: Home,
- loader: () => {
- return {
+ component: Home,
+ loader: async () => {
+ return {
localeFromLoader: getLocale(),
messageFromLoader: m.example_message({ username: "John Doe" }),
- serverFunctionMessage: getServerMessage({ data: "📩" }),
+ serverFunctionMessage: await getServerMessage("📩"),
};
},
});Also applies to: 12-21
🤖 Prompt for AI Agents
In examples/react/start-i18n-paraglide/src/routes/index.tsx around lines 6-10
(and also apply the same fix to lines 12-21), the server function inputValidator
currently expects a raw string but callers pass an object and the loader calls
the server function without awaiting the returned Promise; change the input
shape to accept an object (e.g., { emoji: string }) so the validator
extracts/validates ctx.data.emoji, update the handler to use ctx.data.emoji when
building the response, and update all loader calls to await the server function
call (await getServerMessage({ emoji: '...' })) so the result is properly
serialized/returned.
| { title }, | ||
| { name: "description", content: description }, | ||
| { name: "keywords", content: keywords }, | ||
| { name: "twitter:title", content: title }, | ||
| { name: "twitter:description", content: description }, | ||
| { name: "twitter:creator", content: "@tannerlinsley" }, | ||
| { name: "twitter:site", content: "@tannerlinsley" }, | ||
| { name: "og:type", content: "website" }, | ||
| { name: "og:title", content: title }, | ||
| { name: "og:description", content: description }, | ||
| ...(image | ||
| ? [ | ||
| { name: "twitter:image", content: image }, | ||
| { name: "twitter:card", content: "summary_large_image" }, | ||
| { name: "og:image", content: image }, | ||
| ] | ||
| : []), | ||
| ]; |
There was a problem hiding this comment.
Avoid emitting content="undefined" meta tags
For optional fields we still push tag objects whose content ends up undefined. The meta renderer will stringify that to content="undefined", which is invalid SEO markup and leaks into the page head whenever description, keywords, or image are omitted. Please guard each optional entry before adding it (or filter out falsy values) so only fully populated tags are returned.
🤖 Prompt for AI Agents
In examples/react/start-i18n-paraglide/src/utils/seo.ts around lines 13 to 30,
optional meta entries for description, keywords, and image are being added with
undefined content which results in meta tags like content="undefined"; fix by
only including those tag objects when their values are defined (e.g., guard each
optional field before pushing or build the array then filter out entries with
falsy or undefined content), ensure image-related twitter/og tags are only added
when image is truthy and filter or conditionally add description/keywords
similarly so final array contains only fully populated tags.
| import { Locale } from "@/paraglide/runtime"; | ||
| import { FileRoutesByTo } from "../routeTree.gen"; |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
🧩 Analysis chain
Verify alias '@' and Paraglide outdir mapping exist.
The "@/paraglide/runtime" import requires Vite alias and TS path mapping to point to src. Ensure they align with the plugin’s outdir.
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Checking Vite alias and Paraglide outdir..."
rg -nP -C3 '(resolve\s*:\s*\{[^}]*alias|paraglideVitePlugin|outdir\s*:)' --glob 'examples/**/vite.config.*' || true
echo
echo "Checking TS path mapping for '@/*'..."
rg -nP -C3 '"paths"\s*:\s*\{[^}]*"@/\*"' --glob 'examples/**/tsconfig*.json' || true
echo
echo "Checking for compiled Paraglide runtime presence..."
fd -t f runtime --glob 'examples/**/src/paraglide/**' || trueLength of output: 2720
Add @ alias in Vite and TS config
- examples/react/start-i18n-paraglide/vite.config.ts: inside
defineConfig({…}), addresolve: { alias: { '@': path.resolve(__dirname, 'src') }, },
- examples/react/start-i18n-paraglide/tsconfig.json: under
compilerOptions, set"baseUrl": ".", "paths": { "@/*": ["src/*"] }
🤖 Prompt for AI Agents
In examples/react/start-i18n-paraglide/src/utils/translated-pathnames.ts around
lines 1-2, imports use the '@' alias but Vite and TypeScript aren't configured
for it; update examples/react/start-i18n-paraglide/vite.config.ts inside
defineConfig to add a resolve.alias entry mapping '@' to the src directory (use
path.resolve(__dirname, 'src')), and update
examples/react/start-i18n-paraglide/tsconfig.json under compilerOptions to set
"baseUrl" to "." and add a "paths" entry mapping "@/*" to ["src/*"] so both Vite
and the TypeScript compiler recognize the '@' import alias.
| function toUrlPattern(path: string) { | ||
| return ( | ||
| path | ||
| // catch-all | ||
| .replace(/\/\$$/, "/:path(.*)?") | ||
| // optional parameters: {-$param} | ||
| .replace(/\{-\$([a-zA-Z0-9_]+)\}/g, ":$1?") | ||
| // named parameters: $param | ||
| .replace(/\$([a-zA-Z0-9_]+)/g, ":$1") | ||
| // remove trailing slash | ||
| .replace(/\/+$/, "") | ||
| ); | ||
| } |
There was a problem hiding this comment.
Bug: toUrlPattern turns "/" into empty string.
Root pattern becomes "", which can break URL pattern consumers. Special‑case "/".
-function toUrlPattern(path: string) {
- return (
- path
- // catch-all
- .replace(/\/\$$/, "/:path(.*)?")
- // optional parameters: {-$param}
- .replace(/\{-\$([a-zA-Z0-9_]+)\}/g, ":$1?")
- // named parameters: $param
- .replace(/\$([a-zA-Z0-9_]+)/g, ":$1")
- // remove trailing slash
- .replace(/\/+$/, "")
- );
-}
+function toUrlPattern(path: string) {
+ const normalized = path
+ // catch-all
+ .replace(/\/\$$/, "/:path(.*)?")
+ // optional parameters: {-$param}
+ .replace(/\{-\$([a-zA-Z0-9_]+)\}/g, ":$1?")
+ // named parameters: $param
+ .replace(/\$([a-zA-Z0-9_]+)/g, ":$1")
+ // remove trailing slash
+ .replace(/\/+$/, "");
+ return normalized === "" ? "/" : normalized;
+}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| function toUrlPattern(path: string) { | |
| return ( | |
| path | |
| // catch-all | |
| .replace(/\/\$$/, "/:path(.*)?") | |
| // optional parameters: {-$param} | |
| .replace(/\{-\$([a-zA-Z0-9_]+)\}/g, ":$1?") | |
| // named parameters: $param | |
| .replace(/\$([a-zA-Z0-9_]+)/g, ":$1") | |
| // remove trailing slash | |
| .replace(/\/+$/, "") | |
| ); | |
| } | |
| function toUrlPattern(path: string) { | |
| const normalized = path | |
| // catch-all | |
| .replace(/\/\$$/, "/:path(.*)?") | |
| // optional parameters: {-$param} | |
| .replace(/\{-\$([a-zA-Z0-9_]+)\}/g, ":$1?") | |
| // named parameters: $param | |
| .replace(/\$([a-zA-Z0-9_]+)/g, ":$1") | |
| // remove trailing slash | |
| .replace(/\/+$/, ""); | |
| return normalized === "" ? "/" : normalized; | |
| } |
🤖 Prompt for AI Agents
In examples/react/start-i18n-paraglide/src/utils/translated-pathnames.ts around
lines 18 to 30, toUrlPattern currently converts the root path "/" into an empty
string due to the trailing-slash removal; add a special-case at the start that
if path === "/" (or path.trim() === "/") return "/" immediately, otherwise
continue with the existing replacement regexes so other patterns and catch-all
logic remain unchanged.
There was a problem hiding this comment.
Actionable comments posted: 8
🧹 Nitpick comments (3)
examples/react/start-i18n-paraglide/README.md (3)
3-3: Use descriptive link text (MD059).Replace "here" with a descriptive label. Based on static analysis hints.
-This example shows how to use Paraglide with TanStack Start. The source code can be found [here](https://github.com/opral/monorepo/tree/main/inlang/packages/paraglide/paraglide-js/examples/tanstack-start). +This example shows how to use Paraglide with TanStack Start. The source code can be found in the [Inlang monorepo Paraglide TanStack Start example](https://github.com/opral/monorepo/tree/main/inlang/packages/paraglide/paraglide-js/examples/tanstack-start).
22-22: Replace hard tabs with spaces (MD010).The snippet uses hard tabs; switch to spaces for consistency. Based on static analysis hints.
- plugins: [ + plugins: [ ... - paraglideVitePlugin({ + paraglideVitePlugin({ ... - }), + }), - ], + ],Also applies to: 25-27, 39-40
55-56: Include “.js” extension for Paraglide runtime imports
- In examples/react/start-i18n-paraglide/README.md, update:
•import { shouldRedirect } from "../paraglide/runtime";→import { shouldRedirect } from "../paraglide/runtime.js";
•import { localizeHref } from "./paraglide/runtime";→import { localizeHref } from "./paraglide/runtime.js";
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
examples/react/i18n-paraglide/README.md(1 hunks)examples/react/start-i18n-paraglide/README.md(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
examples/{react,solid}/**
📄 CodeRabbit inference engine (AGENTS.md)
Keep example applications under examples/react/ and examples/solid/
Files:
examples/react/i18n-paraglide/README.mdexamples/react/start-i18n-paraglide/README.md
🪛 markdownlint-cli2 (0.18.1)
examples/react/i18n-paraglide/README.md
3-3: Link text should be descriptive
(MD059, descriptive-link-text)
22-22: Hard tabs
Column: 1
(MD010, no-hard-tabs)
25-25: Hard tabs
Column: 2
(MD010, no-hard-tabs)
26-26: Hard tabs
Column: 2
(MD010, no-hard-tabs)
27-27: Hard tabs
Column: 2
(MD010, no-hard-tabs)
28-28: Hard tabs
Column: 2
(MD010, no-hard-tabs)
29-29: Hard tabs
Column: 1
(MD010, no-hard-tabs)
examples/react/start-i18n-paraglide/README.md
3-3: Link text should be descriptive
(MD059, descriptive-link-text)
22-22: Hard tabs
Column: 1
(MD010, no-hard-tabs)
25-25: Hard tabs
Column: 2
(MD010, no-hard-tabs)
26-26: Hard tabs
Column: 2
(MD010, no-hard-tabs)
27-27: Hard tabs
Column: 2
(MD010, no-hard-tabs)
39-39: Hard tabs
Column: 2
(MD010, no-hard-tabs)
40-40: Hard tabs
Column: 1
(MD010, no-hard-tabs)
🔇 Additional comments (4)
examples/react/start-i18n-paraglide/README.md (4)
21-41: Align paraglideVitePlugin outdir with imports (duplicate of prior review).Imports use "./paraglide/…", but outdir points to "./app/paraglide". Change to "./src/paraglide" (or update imports) to avoid unresolved modules. [Based on previous reviews]
plugins: [ tanstackStart(), react(), paraglideVitePlugin({ project: "./project.inlang", - outdir: "./app/paraglide", + outdir: "./src/paraglide", outputStructure: "message-modules", cookieName: "PARAGLIDE_LOCALE", strategy: ["url", "cookie", "preferredLanguage", "baseLocale"], urlPatterns: [ { pattern: "/:path(.*)?", localized: [ ["en", "/en/:path(.*)?"], ], }, ], }),Run to confirm outdir/import alignment:
#!/bin/bash # Show current outdir and all paraglide imports in this example rg -nP 'paraglideVitePlugin\(\{[^}]*outdir:\s*"[^"]+' -C1 examples/react/start-i18n-paraglide rg -n 'from\s+"\.{1,2}\/paraglide' -C1 examples/react/start-i18n-paraglide
69-77: LGTM: Server middleware placement is correct.Middleware wraps the Start entry and forwards the (possibly rewritten) request. No issues spotted.
Confirm this file actually lives at src/server.ts (or the path Start expects) to ensure it runs in dev/SSR.
140-152: Preserve root path in toUrlPattern (duplicate of prior review).Trailing-slash removal turns "/" into "". Special‑case the root.
function toUrlPattern(path: string) { - return ( - path - // catch-all - .replace(/\/\$$/, "/:path(.*)?") - // optional parameters: {-$param} - .replace(/\{-\$([a-zA-Z0-9_]+)\}/g, ":$1?") - // named parameters: $param - .replace(/\$([a-zA-Z0-9_]+)/g, ":$1") - // remove trailing slash - .replace(/\/+$/, "") - ); + const normalized = path + // catch-all + .replace(/\/\$$/, "/:path(.*)?") + // optional parameters: {-$param} + .replace(/\{-\$([a-zA-Z0-9_]+)\}/g, ":$1?") + // named parameters: $param + .replace(/\$([a-zA-Z0-9_]+)/g, ":$1") + // remove trailing slash + .replace(/\/+$/, ""); + return normalized === "" ? "/" : normalized; }
123-124: Remove alias verification – vite-tsconfig-paths plugin applies tsconfig@/*mapping, so"@/paraglide/runtime"imports resolve correctly.Likely an incorrect or invalid review comment.
| @@ -0,0 +1,141 @@ | |||
| # TanSTack Router example | |||
|
|
|||
| This example shows how to use Paraglide with TanStack Router. The source code can be found [here](https://github.com/opral/monorepo/tree/main/inlang/packages/paraglide/paraglide-js/examples/tanstack-router). | |||
There was a problem hiding this comment.
Use descriptive link text.
The hyperlink label “here” violates MD059 and isn’t accessible; replace it with descriptive text such as “Paraglide TanStack Router example source.” Based on lint hint.
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
3-3: Link text should be descriptive
(MD059, descriptive-link-text)
🤖 Prompt for AI Agents
In examples/react/i18n-paraglide/README.md around line 3, the hyperlink uses
non-descriptive text ("here") which violates MD059; replace the link label with
descriptive text like "Paraglide TanStack Router example source" (or similar) so
the link is accessible and meaningful, updating the Markdown to use that
descriptive phrase as the anchor while keeping the same target URL.
| plugins: [ | ||
| tanstackRouter({ target: 'react', autoCodeSplitting: true }), | ||
| react(), | ||
| + paraglideVitePlugin({ | ||
| + project: "./project.inlang", | ||
| + outdir: "./app/paraglide", | ||
| + }), | ||
| ], |
There was a problem hiding this comment.
Replace hard tabs in the code block.
markdownlint flags the tab-indented lines (MD010). Please switch them to spaces, e.g.:
- plugins: [
+ plugins: [
tanstackRouter({ target: 'react', autoCodeSplitting: true }),
react(),
- paraglideVitePlugin({
- project: "./project.inlang",
- outdir: "./app/paraglide",
- }),
- ],
+ paraglideVitePlugin({
+ project: "./project.inlang",
+ outdir: "./app/paraglide",
+ }),
+ ],Based on lint hint.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| plugins: [ | |
| tanstackRouter({ target: 'react', autoCodeSplitting: true }), | |
| react(), | |
| + paraglideVitePlugin({ | |
| + project: "./project.inlang", | |
| + outdir: "./app/paraglide", | |
| + }), | |
| ], | |
| plugins: [ | |
| tanstackRouter({ target: 'react', autoCodeSplitting: true }), | |
| react(), | |
| paraglideVitePlugin({ | |
| project: "./project.inlang", | |
| outdir: "./app/paraglide", | |
| }), | |
| ], |
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
22-22: Hard tabs
Column: 1
(MD010, no-hard-tabs)
25-25: Hard tabs
Column: 2
(MD010, no-hard-tabs)
26-26: Hard tabs
Column: 2
(MD010, no-hard-tabs)
27-27: Hard tabs
Column: 2
(MD010, no-hard-tabs)
28-28: Hard tabs
Column: 2
(MD010, no-hard-tabs)
29-29: Hard tabs
Column: 1
(MD010, no-hard-tabs)
🤖 Prompt for AI Agents
In examples/react/i18n-paraglide/README.md around lines 22 to 29, the fenced
code block uses hard tabs for indentation which triggers markdownlint MD010;
replace all tab characters inside that code block with spaces (use consistent 2
or 4 spaces per indent level as used elsewhere in the file), ensure alignment is
preserved, and save the file with tabs converted to spaces.
| And import into the Paraglide Vite plguin. | ||
|
|
||
| ## Server side rendering | ||
|
|
||
| For server side rerdering, check out the [TanStack Start guide](https://inlang.com/m/gerre34r/library-inlang-paraglideJs/tanstack-start). |
There was a problem hiding this comment.
Fix spelling in the prose.
“plguin” (Line 137) and “rerdering” (Line 141) are typos—please change them to “plugin” and “rendering.”
🤖 Prompt for AI Agents
In examples/react/i18n-paraglide/README.md around lines 137 to 141, there are
two typos in the prose: change "plguin" to "plugin" on line 137 and change
"rerdering" to "rendering" on line 141; update the text accordingly so it reads
"Paraglide Vite plugin" and "For server side rendering, check out..." keeping
the rest of the sentence unchanged.
| }; | ||
| ``` | ||
|
|
||
| In `__root.tsx` add change the html lang attribute to the current locale. |
There was a problem hiding this comment.
Fix grammar in instructions.
-In `__root.tsx` add change the html lang attribute to the current locale.
+In `__root.tsx`, change the HTML lang attribute to the current locale.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| In `__root.tsx` add change the html lang attribute to the current locale. | |
| In `__root.tsx`, change the HTML lang attribute to the current locale. |
🤖 Prompt for AI Agents
In examples/react/start-i18n-paraglide/README.md around line 79, the instruction
sentence "In `__root.tsx` add change the html lang attribute to the current
locale." has a grammar error; update the sentence to be clear and grammatically
correct (for example: "In `__root.tsx`, change the html lang attribute to the
current locale." or "In `__root.tsx`, add or change the html lang attribute to
the current locale.") so the README reads naturally and conveys the intended
action.
|
| Command | Status | Duration | Result |
|---|---|---|---|
nx affected --targets=test:eslint,test:unit,tes... |
❌ Failed | 6m | View ↗ |
nx run-many --target=build --exclude=examples/*... |
✅ Succeeded | 1m 35s | View ↗ |
☁️ Nx Cloud last updated this comment at 2025-09-27 14:03:55 UTC
schiller-manuel
force-pushed
the
main
branch
from
88f9fa4 to
3f37c7a
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
examples/react/i18n-paraglide/index.html (1)
2-2: Add a default<html lang>for accessibilityWithout a static
langattribute, assistive tech and crawlers see an undefined locale until JS boots and sets it, which can degrade the initial experience. Set a sensible default (e.g.en) and let your runtime updates override it.-<html> +<html lang="en">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (8)
examples/react/i18n-paraglide/public/favicon.icois excluded by!**/*.icoexamples/react/i18n-paraglide/public/logo192.pngis excluded by!**/*.pngexamples/react/i18n-paraglide/public/logo512.pngis excluded by!**/*.pngexamples/react/i18n-paraglide/src/logo.svgis excluded by!**/*.svgexamples/react/start-i18n-paraglide/public/favicon.icois excluded by!**/*.icoexamples/react/start-i18n-paraglide/public/logo192.pngis excluded by!**/*.pngexamples/react/start-i18n-paraglide/public/logo512.pngis excluded by!**/*.pngexamples/react/start-i18n-paraglide/src/logo.svgis excluded by!**/*.svg
📒 Files selected for processing (44)
examples/react/i18n-paraglide/.gitignore(1 hunks)examples/react/i18n-paraglide/.vscode/settings.json(1 hunks)examples/react/i18n-paraglide/README.md(1 hunks)examples/react/i18n-paraglide/index.html(1 hunks)examples/react/i18n-paraglide/messages/de.json(1 hunks)examples/react/i18n-paraglide/messages/en.json(1 hunks)examples/react/i18n-paraglide/package.json(1 hunks)examples/react/i18n-paraglide/project.inlang/.gitignore(1 hunks)examples/react/i18n-paraglide/project.inlang/project_id(1 hunks)examples/react/i18n-paraglide/project.inlang/settings.json(1 hunks)examples/react/i18n-paraglide/public/manifest.json(1 hunks)examples/react/i18n-paraglide/public/robots.txt(1 hunks)examples/react/i18n-paraglide/src/main.tsx(1 hunks)examples/react/i18n-paraglide/src/routeTree.gen.ts(1 hunks)examples/react/i18n-paraglide/src/routes/__root.tsx(1 hunks)examples/react/i18n-paraglide/src/routes/about.tsx(1 hunks)examples/react/i18n-paraglide/src/routes/index.tsx(1 hunks)examples/react/i18n-paraglide/src/styles.css(1 hunks)examples/react/i18n-paraglide/tsconfig.json(1 hunks)examples/react/i18n-paraglide/vite.config.ts(1 hunks)examples/react/start-i18n-paraglide/.gitignore(1 hunks)examples/react/start-i18n-paraglide/.vscode/extensions.json(1 hunks)examples/react/start-i18n-paraglide/.vscode/settings.json(1 hunks)examples/react/start-i18n-paraglide/README.md(1 hunks)examples/react/start-i18n-paraglide/messages/de.json(1 hunks)examples/react/start-i18n-paraglide/messages/en.json(1 hunks)examples/react/start-i18n-paraglide/package.json(1 hunks)examples/react/start-i18n-paraglide/project.inlang/.gitignore(1 hunks)examples/react/start-i18n-paraglide/project.inlang/project_id(1 hunks)examples/react/start-i18n-paraglide/project.inlang/settings.json(1 hunks)examples/react/start-i18n-paraglide/public/manifest.json(1 hunks)examples/react/start-i18n-paraglide/public/robots.txt(1 hunks)examples/react/start-i18n-paraglide/src/routeTree.gen.ts(1 hunks)examples/react/start-i18n-paraglide/src/router.tsx(1 hunks)examples/react/start-i18n-paraglide/src/routes/__root.tsx(1 hunks)examples/react/start-i18n-paraglide/src/routes/about.tsx(1 hunks)examples/react/start-i18n-paraglide/src/routes/index.tsx(1 hunks)examples/react/start-i18n-paraglide/src/server.ts(1 hunks)examples/react/start-i18n-paraglide/src/styles.css(1 hunks)examples/react/start-i18n-paraglide/src/utils/prerender.ts(1 hunks)examples/react/start-i18n-paraglide/src/utils/seo.ts(1 hunks)examples/react/start-i18n-paraglide/src/utils/translated-pathnames.ts(1 hunks)examples/react/start-i18n-paraglide/tsconfig.json(1 hunks)examples/react/start-i18n-paraglide/vite.config.ts(1 hunks)
✅ Files skipped from review due to trivial changes (3)
- examples/react/i18n-paraglide/package.json
- examples/react/i18n-paraglide/project.inlang/.gitignore
- examples/react/start-i18n-paraglide/project.inlang/project_id
🚧 Files skipped from review as they are similar to previous changes (26)
- examples/react/start-i18n-paraglide/messages/en.json
- examples/react/start-i18n-paraglide/tsconfig.json
- examples/react/start-i18n-paraglide/public/robots.txt
- examples/react/start-i18n-paraglide/src/router.tsx
- examples/react/start-i18n-paraglide/.vscode/settings.json
- examples/react/i18n-paraglide/messages/en.json
- examples/react/i18n-paraglide/project.inlang/project_id
- examples/react/start-i18n-paraglide/messages/de.json
- examples/react/i18n-paraglide/.gitignore
- examples/react/start-i18n-paraglide/.vscode/extensions.json
- examples/react/i18n-paraglide/src/styles.css
- examples/react/i18n-paraglide/project.inlang/settings.json
- examples/react/start-i18n-paraglide/src/utils/seo.ts
- examples/react/start-i18n-paraglide/src/routes/about.tsx
- examples/react/start-i18n-paraglide/src/utils/prerender.ts
- examples/react/start-i18n-paraglide/src/server.ts
- examples/react/start-i18n-paraglide/vite.config.ts
- examples/react/start-i18n-paraglide/src/utils/translated-pathnames.ts
- examples/react/start-i18n-paraglide/project.inlang/settings.json
- examples/react/i18n-paraglide/vite.config.ts
- examples/react/i18n-paraglide/public/manifest.json
- examples/react/start-i18n-paraglide/package.json
- examples/react/start-i18n-paraglide/src/routes/index.tsx
- examples/react/start-i18n-paraglide/.gitignore
- examples/react/start-i18n-paraglide/public/manifest.json
- examples/react/i18n-paraglide/src/main.tsx
🧰 Additional context used
📓 Path-based instructions (3)
examples/{react,solid}/**
📄 CodeRabbit inference engine (AGENTS.md)
Keep example applications under examples/react/ and examples/solid/
Files:
examples/react/i18n-paraglide/messages/de.jsonexamples/react/i18n-paraglide/tsconfig.jsonexamples/react/i18n-paraglide/src/routes/about.tsxexamples/react/i18n-paraglide/src/routeTree.gen.tsexamples/react/i18n-paraglide/src/routes/__root.tsxexamples/react/i18n-paraglide/index.htmlexamples/react/i18n-paraglide/README.mdexamples/react/i18n-paraglide/public/robots.txtexamples/react/i18n-paraglide/src/routes/index.tsxexamples/react/start-i18n-paraglide/src/routes/__root.tsxexamples/react/start-i18n-paraglide/src/styles.cssexamples/react/start-i18n-paraglide/src/routeTree.gen.tsexamples/react/start-i18n-paraglide/README.md
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with extensive type safety across the codebase
Files:
examples/react/i18n-paraglide/src/routes/about.tsxexamples/react/i18n-paraglide/src/routeTree.gen.tsexamples/react/i18n-paraglide/src/routes/__root.tsxexamples/react/i18n-paraglide/src/routes/index.tsxexamples/react/start-i18n-paraglide/src/routes/__root.tsxexamples/react/start-i18n-paraglide/src/routeTree.gen.ts
**/src/routes/**
📄 CodeRabbit inference engine (AGENTS.md)
Place file-based routes under src/routes/ directories
Files:
examples/react/i18n-paraglide/src/routes/about.tsxexamples/react/i18n-paraglide/src/routes/__root.tsxexamples/react/i18n-paraglide/src/routes/index.tsxexamples/react/start-i18n-paraglide/src/routes/__root.tsx
🧠 Learnings (2)
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
PR: TanStack/router#0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript in strict mode with extensive type safety across the codebase
Applied to files:
examples/react/i18n-paraglide/tsconfig.json
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
PR: TanStack/router#0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{react-router,solid-router}/** : Implement React and Solid bindings/components only in packages/react-router/ and packages/solid-router/
Applied to files:
examples/react/i18n-paraglide/src/routes/__root.tsx
🧬 Code graph analysis (6)
examples/react/i18n-paraglide/src/routes/about.tsx (2)
examples/react/i18n-paraglide/src/routes/__root.tsx (1)
Route(15-70)examples/react/i18n-paraglide/src/routes/index.tsx (1)
Route(4-6)
examples/react/i18n-paraglide/src/routeTree.gen.ts (1)
e2e/react-router/js-only-file-based/src/routeTree.gen.js (2)
IndexRoute(30-34)rootRouteChildren(90-94)
examples/react/i18n-paraglide/src/routes/__root.tsx (2)
examples/react/i18n-paraglide/src/routes/about.tsx (1)
Route(4-6)examples/react/i18n-paraglide/src/routes/index.tsx (1)
Route(4-6)
examples/react/i18n-paraglide/src/routes/index.tsx (3)
examples/react/i18n-paraglide/src/routes/__root.tsx (1)
Route(15-70)examples/react/i18n-paraglide/src/routes/about.tsx (1)
Route(4-6)examples/react/start-i18n-paraglide/src/routes/index.tsx (1)
Route(12-21)
examples/react/start-i18n-paraglide/src/routes/__root.tsx (3)
examples/react/i18n-paraglide/src/routes/__root.tsx (1)
Route(15-70)examples/react/start-i18n-paraglide/src/routes/index.tsx (1)
Route(12-21)packages/react-router-devtools/src/TanStackRouterDevtoolsPanel.tsx (1)
TanStackRouterDevtoolsPanel(37-87)
examples/react/start-i18n-paraglide/src/routeTree.gen.ts (2)
examples/react/i18n-paraglide/src/routeTree.gen.ts (6)
FileRoutesByFullPath(26-29)FileRoutesByTo(30-33)FileRoutesById(34-38)FileRouteTypes(39-46)RootRouteChildren(47-50)routeTree(75-77)examples/react/start-i18n-paraglide/src/router.tsx (1)
getRouter(8-18)
🪛 markdownlint-cli2 (0.18.1)
examples/react/i18n-paraglide/README.md
3-3: Link text should be descriptive
(MD059, descriptive-link-text)
22-22: Hard tabs
Column: 1
(MD010, no-hard-tabs)
25-25: Hard tabs
Column: 2
(MD010, no-hard-tabs)
26-26: Hard tabs
Column: 2
(MD010, no-hard-tabs)
27-27: Hard tabs
Column: 2
(MD010, no-hard-tabs)
28-28: Hard tabs
Column: 2
(MD010, no-hard-tabs)
29-29: Hard tabs
Column: 1
(MD010, no-hard-tabs)
examples/react/start-i18n-paraglide/README.md
3-3: Link text should be descriptive
(MD059, descriptive-link-text)
22-22: Hard tabs
Column: 1
(MD010, no-hard-tabs)
25-25: Hard tabs
Column: 2
(MD010, no-hard-tabs)
26-26: Hard tabs
Column: 2
(MD010, no-hard-tabs)
27-27: Hard tabs
Column: 2
(MD010, no-hard-tabs)
39-39: Hard tabs
Column: 2
(MD010, no-hard-tabs)
40-40: Hard tabs
Column: 1
(MD010, no-hard-tabs)
🔇 Additional comments (8)
examples/react/start-i18n-paraglide/project.inlang/.gitignore (1)
1-1: Ignore cache artifactsAdding
cachehere cleanly keeps generated Paraglide/Inlang cache out of source control. Looks good.examples/react/i18n-paraglide/README.md (3)
137-141: Fix the spelling mistakes in the prose.Lines 137 and 141 contain “plguin” and “rerdering”; please correct them to “plugin” and “rendering”.
-And import into the Paraglide Vite plguin. +And import into the Paraglide Vite plugin. @@ -For server side rerdering, check out the [TanStack Start guide](https://inlang.com/m/gerre34r/library-inlang-paraglideJs/tanstack-start). +For server side rendering, check out the [TanStack Start guide](https://inlang.com/m/gerre34r/library-inlang-paraglideJs/tanstack-start).
3-3: Replace the non-descriptive link label.Line 3 uses “here” as link text, which trips markdownlint (MD059) and hurts accessibility. Please give the link meaningful text. Based on lint hint.
-This example shows how to use Paraglide with TanStack Router. The source code can be found [here](https://github.com/opral/monorepo/tree/main/inlang/packages/paraglide/paraglide-js/examples/tanstack-router). +This example shows how to use Paraglide with TanStack Router. The source code can be found in the [Paraglide TanStack Router example source](https://github.com/opral/monorepo/tree/main/inlang/packages/paraglide/paraglide-js/examples/tanstack-router).
22-29: Convert the hard tabs inside the diff snippet.Lines 22-29 still contain tab characters, triggering markdownlint MD010. Swap them for spaces to keep the example lint-clean. Based on lint hint.
export default defineConfig({ - plugins: [ + plugins: [ tanstackRouter({ target: 'react', autoCodeSplitting: true }), react(), -+ paraglideVitePlugin({ -+ project: "./project.inlang", -+ outdir: "./app/paraglide", -+ }), - ], ++ paraglideVitePlugin({ ++ project: "./project.inlang", ++ outdir: "./app/paraglide", ++ }), + ], });examples/react/start-i18n-paraglide/README.md (4)
25-39: Fix Vite plugin outdir path mismatch.
Line 27 still documentsoutdir: "./app/paraglide", but the example code (and generated imports like@/paraglide/runtime) expect the plugin to emit intosrc/paraglide. Following the README as written produces broken imports. Update the snippet to use./src/paraglideso the instructions match the working project.-+ outdir: "./app/paraglide", ++ outdir: "./src/paraglide",
79-79: Clarify the HTML lang instruction.
Line 79 still says “add change”, which is confusing. Please rewrite it as a clear directive.-In `__root.tsx` add change the html lang attribute to the current locale. +In `__root.tsx`, change the HTML lang attribute to the current locale.
140-152: PreventtoUrlPattern("/")from returning an empty string.
As written, callingtoUrlPattern("/")yields""because the trailing slash is stripped. That breaks the root route pattern for localized paths. Add a simple guard to map the empty result back to/.-function toUrlPattern(path: string) { - return ( - path - // catch-all - .replace(/\/\$$/, "/:path(.*)?") - // optional parameters: {-$param} - .replace(/\{-\$([a-zA-Z0-9_]+)\}/g, ":$1?") - // named parameters: $param - .replace(/\$([a-zA-Z0-9_]+)/g, ":$1") - // remove trailing slash - .replace(/\/+$/, "") - ); -} +function toUrlPattern(path: string) { + const normalized = path + // catch-all + .replace(/\/\$$/, "/:path(.*)?") + // optional parameters: {-$param} + .replace(/\{-\$([a-zA-Z0-9_]+)\}/g, ":$1?") + // named parameters: $param + .replace(/\$([a-zA-Z0-9_]+)/g, ":$1") + // remove trailing slash + .replace(/\/+$/, ""); + + return normalized === "" ? "/" : normalized; +}
181-185: Correct the typos in the prerender section.
Lines 181‑185 still contain “plguin” and “use use”, which look sloppy in published docs.-And import into the Paraglide Vite plguin. -You can use use the `localizeHref` function to map the routes to localized versions and import into the pages option in the TanStack Start plugin. For this to work you will need to compile paraglide before the build with the CLI. +Then import into the Paraglide Vite plugin. +You can use the `localizeHref` function to map the routes to localized versions and import into the pages option in the TanStack Start plugin. For this to work you will need to compile Paraglide before the build with the CLI.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (21)
examples/react/i18n-paraglide/README.md(1 hunks)examples/react/i18n-paraglide/project.inlang/settings.json(1 hunks)examples/react/i18n-paraglide/src/main.tsx(1 hunks)examples/react/i18n-paraglide/src/routes/__root.tsx(1 hunks)examples/react/i18n-paraglide/src/routes/about.tsx(1 hunks)examples/react/i18n-paraglide/src/routes/index.tsx(1 hunks)examples/react/i18n-paraglide/src/styles.css(1 hunks)examples/react/i18n-paraglide/vite.config.ts(1 hunks)examples/react/start-i18n-paraglide/.vscode/extensions.json(1 hunks)examples/react/start-i18n-paraglide/README.md(1 hunks)examples/react/start-i18n-paraglide/project.inlang/settings.json(1 hunks)examples/react/start-i18n-paraglide/src/router.tsx(1 hunks)examples/react/start-i18n-paraglide/src/routes/__root.tsx(1 hunks)examples/react/start-i18n-paraglide/src/routes/about.tsx(1 hunks)examples/react/start-i18n-paraglide/src/routes/index.tsx(1 hunks)examples/react/start-i18n-paraglide/src/server.ts(1 hunks)examples/react/start-i18n-paraglide/src/styles.css(1 hunks)examples/react/start-i18n-paraglide/src/utils/prerender.ts(1 hunks)examples/react/start-i18n-paraglide/src/utils/seo.ts(1 hunks)examples/react/start-i18n-paraglide/src/utils/translated-pathnames.ts(1 hunks)examples/react/start-i18n-paraglide/vite.config.ts(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- examples/react/start-i18n-paraglide/README.md
- examples/react/start-i18n-paraglide/src/styles.css
🚧 Files skipped from review as they are similar to previous changes (12)
- examples/react/start-i18n-paraglide/src/utils/translated-pathnames.ts
- examples/react/start-i18n-paraglide/src/routes/about.tsx
- examples/react/start-i18n-paraglide/src/router.tsx
- examples/react/i18n-paraglide/src/routes/index.tsx
- examples/react/start-i18n-paraglide/vite.config.ts
- examples/react/start-i18n-paraglide/src/server.ts
- examples/react/i18n-paraglide/src/main.tsx
- examples/react/i18n-paraglide/vite.config.ts
- examples/react/i18n-paraglide/project.inlang/settings.json
- examples/react/start-i18n-paraglide/src/utils/prerender.ts
- examples/react/i18n-paraglide/src/routes/about.tsx
- examples/react/start-i18n-paraglide/project.inlang/settings.json
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with extensive type safety across the codebase
Files:
examples/react/start-i18n-paraglide/src/utils/seo.tsexamples/react/i18n-paraglide/src/routes/__root.tsxexamples/react/start-i18n-paraglide/src/routes/index.tsxexamples/react/start-i18n-paraglide/src/routes/__root.tsx
examples/{react,solid}/**
📄 CodeRabbit inference engine (AGENTS.md)
Keep example applications under examples/react/ and examples/solid/
Files:
examples/react/start-i18n-paraglide/src/utils/seo.tsexamples/react/i18n-paraglide/src/routes/__root.tsxexamples/react/start-i18n-paraglide/src/routes/index.tsxexamples/react/i18n-paraglide/src/styles.cssexamples/react/start-i18n-paraglide/src/routes/__root.tsxexamples/react/i18n-paraglide/README.md
**/src/routes/**
📄 CodeRabbit inference engine (AGENTS.md)
Place file-based routes under src/routes/ directories
Files:
examples/react/i18n-paraglide/src/routes/__root.tsxexamples/react/start-i18n-paraglide/src/routes/index.tsxexamples/react/start-i18n-paraglide/src/routes/__root.tsx
🧬 Code graph analysis (2)
examples/react/start-i18n-paraglide/src/routes/index.tsx (2)
examples/react/start-i18n-paraglide/src/routes/__root.tsx (1)
Route(13-31)examples/react/start-i18n-paraglide/src/routes/about.tsx (1)
Route(4-6)
examples/react/start-i18n-paraglide/src/routes/__root.tsx (3)
examples/react/i18n-paraglide/src/routes/__root.tsx (1)
Route(10-65)examples/react/start-i18n-paraglide/src/routes/index.tsx (1)
Route(12-21)packages/react-router-devtools/src/TanStackRouterDevtoolsPanel.tsx (1)
TanStackRouterDevtoolsPanel(37-87)
🪛 markdownlint-cli2 (0.18.1)
examples/react/i18n-paraglide/README.md
3-3: Link text should be descriptive
(MD059, descriptive-link-text)
22-22: Hard tabs
Column: 1
(MD010, no-hard-tabs)
25-25: Hard tabs
Column: 2
(MD010, no-hard-tabs)
26-26: Hard tabs
Column: 2
(MD010, no-hard-tabs)
27-27: Hard tabs
Column: 2
(MD010, no-hard-tabs)
39-39: Hard tabs
Column: 2
(MD010, no-hard-tabs)
40-40: Hard tabs
Column: 1
(MD010, no-hard-tabs)
🔇 Additional comments (6)
examples/react/start-i18n-paraglide/.vscode/extensions.json (1)
1-3: Extension recommendation looks goodThe Paraglide VS Code extension aligns with the example’s tooling and adds helpful ergonomics.
examples/react/start-i18n-paraglide/src/utils/seo.ts (1)
12-30: Filter out optional meta tags with undefined contentWe’re still emitting head entries whose
contentresolves toundefinedwhendescription,keywords, orimagearen’t supplied. That leaks invalid markup likecontent="undefined"into both Twitter and OG tags. Please only append those entries when the underlying value is truthy so the final array contains fully populated tags.const tags = [ { title }, - { name: 'description', content: description }, - { name: 'keywords', content: keywords }, { name: 'twitter:title', content: title }, - { name: 'twitter:description', content: description }, { name: 'twitter:creator', content: '@tannerlinsley' }, { name: 'twitter:site', content: '@tannerlinsley' }, { name: 'og:type', content: 'website' }, { name: 'og:title', content: title }, - { name: 'og:description', content: description }, + ...(description + ? [ + { name: 'description', content: description }, + { name: 'twitter:description', content: description }, + { name: 'og:description', content: description }, + ] + : []), + ...(keywords ? [{ name: 'keywords', content: keywords }] : []), ...(image ? [ { name: 'twitter:image', content: image }, { name: 'twitter:card', content: 'summary_large_image' }, { name: 'og:image', content: image }, ] : []), ]examples/react/start-i18n-paraglide/src/routes/index.tsx (1)
6-19: Fix server function invocation and typing
createServerFnis validated with a rawstring, but the loader passes{ data: '📩' }, so this fails strict typing and runtime validation. On top, the loader returns the unresolved Promise fromgetServerMessage, which breaks serialization. Await the call and pass the string the validator expects.-export const Route = createFileRoute('/')({ - component: Home, - loader: () => { - return { +export const Route = createFileRoute('/')({ + component: Home, + loader: async () => { + return { localeFromLoader: getLocale(), messageFromLoader: m.example_message({ username: 'John Doe' }), - serverFunctionMessage: getServerMessage({ data: '📩' }), + serverFunctionMessage: await getServerMessage('📩'), } }, })examples/react/i18n-paraglide/README.md (3)
3-3: Use descriptive link text in the intro paragraph
The anchor text “here” violates MD059 and isn’t descriptive for screen readers. Please swap in meaningful link text.Based on static analysis hints
-This example shows how to use Paraglide with TanStack Router. The source code can be found [here](https://github.com/opral/monorepo/tree/main/inlang/packages/paraglide/paraglide-js/examples/tanstack-router). +This example shows how to use Paraglide with TanStack Router. The source code can be found in the [Paraglide TanStack Router example](https://github.com/opral/monorepo/tree/main/inlang/packages/paraglide/paraglide-js/examples/tanstack-router).
137-141: Fix the spelling mistakes in the closing section
“plguin” and “rerdering” are typos. Correct them to keep the README polished.-And import into the Paraglide Vite plguin. +And import into the Paraglide Vite plugin. @@ -For server side rerdering, check out the [TanStack Start guide](https://inlang.com/m/gerre34r/library-inlang-paraglideJs/tanstack-start). +For server side rendering, check out the [TanStack Start guide](https://inlang.com/m/gerre34r/library-inlang-paraglideJs/tanstack-start).
22-29: Replace the hard tabs in the Vite config snippet
markdownlint flags these lines (MD010). Switch the tab characters to spaces to keep the snippet lint-clean.Based on static analysis hints
-export default defineConfig({ - plugins: [ +export default defineConfig({ + plugins: [ tanstackRouter({ target: 'react', autoCodeSplitting: true }), react(), - paraglideVitePlugin({ - project: "./project.inlang", - outdir: "./app/paraglide", - }), - ], + paraglideVitePlugin({ + project: "./project.inlang", + outdir: "./app/paraglide", + }), + ], });
| import { shouldRedirect } from "../paraglide/runtime"; | ||
|
|
||
| export const Route = createRootRoute({ | ||
| beforeLoad: async () => { | ||
| document.documentElement.setAttribute("lang", getLocale()); | ||
|
|
||
| const decision = await shouldRedirect({ url: window.location.href }); | ||
|
|
||
| if (decision.redirectUrl) { | ||
| throw redirect({ href: decision.redirectUrl.href }); | ||
| } | ||
| }, |
There was a problem hiding this comment.
Ensure the beforeLoad snippet includes required imports
The snippet references getLocale and redirect but doesn’t import them, so it won’t compile as written. Please add the missing imports for accuracy.
-```ts
-import { shouldRedirect } from "../paraglide/runtime";
+```ts
+import { getLocale, shouldRedirect } from "../paraglide/runtime";
+import { redirect } from "@tanstack/react-router";🤖 Prompt for AI Agents
In examples/react/i18n-paraglide/README.md around lines 58 to 69, the beforeLoad
snippet uses getLocale and redirect but only imports shouldRedirect, so the
snippet won't compile; update the imports to also import getLocale from
"../paraglide/runtime" and redirect from "@tanstack/react-router" so all
referenced functions are imported at the top of the snippet.
More templates
@tanstack/arktype-adapter
@tanstack/directive-functions-plugin
@tanstack/eslint-plugin-router
@tanstack/history
@tanstack/nitro-v2-vite-plugin
@tanstack/react-router
@tanstack/react-router-devtools
@tanstack/react-router-ssr-query
@tanstack/react-start
@tanstack/react-start-client
@tanstack/react-start-server
@tanstack/router-cli
@tanstack/router-core
@tanstack/router-devtools
@tanstack/router-devtools-core
@tanstack/router-generator
@tanstack/router-plugin
@tanstack/router-ssr-query-core
@tanstack/router-utils
@tanstack/router-vite-plugin
@tanstack/server-functions-plugin
@tanstack/solid-router
@tanstack/solid-router-devtools
@tanstack/solid-start
@tanstack/solid-start-client
@tanstack/solid-start-server
@tanstack/start-client-core
@tanstack/start-plugin-core
@tanstack/start-server-core
@tanstack/start-static-server-functions
@tanstack/start-storage-context
@tanstack/valibot-adapter
@tanstack/virtual-file-routes
@tanstack/zod-adapter
commit: |
2 participants
Summary by CodeRabbit
New Features
Documentation
Chores