docs(solid-start): i18n example #5845
Conversation
WalkthroughThis PR introduces a complete example project for TanStack Solid Start with Paraglide i18n support, featuring locale-aware routing, URL rewriting, translated pathnames, server-side rendering, and multi-language message translations. Changes
Sequence DiagramsequenceDiagram
participant Browser
participant Router as TanStack Solid Router
participant Middleware as Paraglide Middleware
participant Server as Server Handler
participant i18n as i18n Runtime
Browser->>Router: Request with locale prefix (e.g., /de/about)
Router->>Middleware: Route request
Middleware->>i18n: Extract & set locale from URL
i18n-->>Middleware: Locale context established
Middleware->>Server: Forward request (de-localized)
Server->>Router: Handle route (/about)
Router->>Router: Load route component & data
Server-->>Middleware: Response with locale context
Middleware->>i18n: Localize URLs in response
i18n-->>Middleware: Rewritten URLs (with /de prefix)
Middleware-->>Browser: HTML with localized links
Browser->>Browser: Render with locale-aware content
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20–25 minutes Areas requiring extra attention:
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 (beta)
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 |
|
View your CI Pipeline Execution ↗ for commit 4f2d171
☁️ Nx Cloud last updated this comment at |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 14
🧹 Nitpick comments (5)
examples/solid/start-i18n-paraglide/src/utils/seo.ts (1)
23-29: Consider adding a default twitter:card type.The twitter:card is only set when an image is provided. Consider always including a twitter:card, using 'summary' as the default when no image is present, and 'summary_large_image' when an image is provided.
Apply this diff to include a default twitter:card:
+ { name: 'twitter:card', content: image ? 'summary_large_image' : 'summary' }, ...(image ? [ { name: 'twitter:image', content: image }, - { name: 'twitter:card', content: 'summary_large_image' }, { property: 'og:image', content: image }, ] : []),examples/solid/start-i18n-paraglide/src/utils/prerender.ts (1)
3-3: Consider automating route discovery.The hardcoded route list
['/', '/about']may become stale as routes are added or removed. For a production setup, consider deriving this list fromFileRoutesByTokeys or a similar mechanism to keep it synchronized automatically.examples/solid/start-i18n-paraglide/src/utils/translated-pathnames.ts (1)
47-56: Consider automating route discovery.Similar to
prerender.ts, the hardcoded route list may become stale. Consider deriving translations fromFileRoutesByTokeys automatically to maintain consistency as routes evolve.examples/solid/start-i18n-paraglide/src/routes/index.tsx (2)
4-4: Remove commented-out import.The commented import
getLocaleshould be removed if not needed.
28-28: Consider removing redundant message call.Line 28 duplicates the
example_messagecall from the loader (line 16). If demonstrating both loader and component-level message usage is intentional, consider using different message keys or adding a comment explaining the purpose.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (5)
examples/solid/start-i18n-paraglide/public/favicon.icois excluded by!**/*.icoexamples/solid/start-i18n-paraglide/public/logo192.pngis excluded by!**/*.pngexamples/solid/start-i18n-paraglide/public/logo512.pngis excluded by!**/*.pngexamples/solid/start-i18n-paraglide/src/logo.svgis excluded by!**/*.svgpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (24)
examples/solid/start-i18n-paraglide/.gitignore(1 hunks)examples/solid/start-i18n-paraglide/.vscode/extensions.json(1 hunks)examples/solid/start-i18n-paraglide/.vscode/settings.json(1 hunks)examples/solid/start-i18n-paraglide/README.md(1 hunks)examples/solid/start-i18n-paraglide/messages/de.json(1 hunks)examples/solid/start-i18n-paraglide/messages/en.json(1 hunks)examples/solid/start-i18n-paraglide/package.json(1 hunks)examples/solid/start-i18n-paraglide/project.inlang/.gitignore(1 hunks)examples/solid/start-i18n-paraglide/project.inlang/project_id(1 hunks)examples/solid/start-i18n-paraglide/project.inlang/settings.json(1 hunks)examples/solid/start-i18n-paraglide/public/manifest.json(1 hunks)examples/solid/start-i18n-paraglide/public/robots.txt(1 hunks)examples/solid/start-i18n-paraglide/src/routeTree.gen.ts(1 hunks)examples/solid/start-i18n-paraglide/src/router.tsx(1 hunks)examples/solid/start-i18n-paraglide/src/routes/__root.tsx(1 hunks)examples/solid/start-i18n-paraglide/src/routes/about.tsx(1 hunks)examples/solid/start-i18n-paraglide/src/routes/index.tsx(1 hunks)examples/solid/start-i18n-paraglide/src/server.ts(1 hunks)examples/solid/start-i18n-paraglide/src/styles.css(1 hunks)examples/solid/start-i18n-paraglide/src/utils/prerender.ts(1 hunks)examples/solid/start-i18n-paraglide/src/utils/seo.ts(1 hunks)examples/solid/start-i18n-paraglide/src/utils/translated-pathnames.ts(1 hunks)examples/solid/start-i18n-paraglide/tsconfig.json(1 hunks)examples/solid/start-i18n-paraglide/vite.config.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
examples/{react,solid}/**
📄 CodeRabbit inference engine (AGENTS.md)
Keep example applications under examples/react/ and examples/solid/
Files:
examples/solid/start-i18n-paraglide/messages/en.jsonexamples/solid/start-i18n-paraglide/src/styles.cssexamples/solid/start-i18n-paraglide/src/router.tsxexamples/solid/start-i18n-paraglide/project.inlang/settings.jsonexamples/solid/start-i18n-paraglide/src/utils/prerender.tsexamples/solid/start-i18n-paraglide/src/routes/__root.tsxexamples/solid/start-i18n-paraglide/src/routes/index.tsxexamples/solid/start-i18n-paraglide/public/robots.txtexamples/solid/start-i18n-paraglide/src/utils/seo.tsexamples/solid/start-i18n-paraglide/public/manifest.jsonexamples/solid/start-i18n-paraglide/vite.config.tsexamples/solid/start-i18n-paraglide/package.jsonexamples/solid/start-i18n-paraglide/tsconfig.jsonexamples/solid/start-i18n-paraglide/src/utils/translated-pathnames.tsexamples/solid/start-i18n-paraglide/src/server.tsexamples/solid/start-i18n-paraglide/project.inlang/project_idexamples/solid/start-i18n-paraglide/messages/de.jsonexamples/solid/start-i18n-paraglide/README.mdexamples/solid/start-i18n-paraglide/src/routes/about.tsxexamples/solid/start-i18n-paraglide/src/routeTree.gen.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with extensive type safety across the codebase
Files:
examples/solid/start-i18n-paraglide/src/router.tsxexamples/solid/start-i18n-paraglide/src/utils/prerender.tsexamples/solid/start-i18n-paraglide/src/routes/__root.tsxexamples/solid/start-i18n-paraglide/src/routes/index.tsxexamples/solid/start-i18n-paraglide/src/utils/seo.tsexamples/solid/start-i18n-paraglide/vite.config.tsexamples/solid/start-i18n-paraglide/src/utils/translated-pathnames.tsexamples/solid/start-i18n-paraglide/src/server.tsexamples/solid/start-i18n-paraglide/src/routes/about.tsxexamples/solid/start-i18n-paraglide/src/routeTree.gen.ts
**/src/routes/**
📄 CodeRabbit inference engine (AGENTS.md)
Place file-based routes under src/routes/ directories
Files:
examples/solid/start-i18n-paraglide/src/routes/__root.tsxexamples/solid/start-i18n-paraglide/src/routes/index.tsxexamples/solid/start-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/solid/start-i18n-paraglide/package.json
🧠 Learnings (8)
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 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/solid/start-i18n-paraglide/src/router.tsxexamples/solid/start-i18n-paraglide/src/utils/prerender.tsexamples/solid/start-i18n-paraglide/src/routes/__root.tsxexamples/solid/start-i18n-paraglide/src/routes/index.tsxexamples/solid/start-i18n-paraglide/src/routes/about.tsxexamples/solid/start-i18n-paraglide/src/routeTree.gen.ts
📚 Learning: 2025-10-08T08:11:47.088Z
Learnt from: nlynzaad
Repo: TanStack/router PR: 5402
File: packages/router-generator/tests/generator/no-formatted-route-tree/routeTree.nonnested.snapshot.ts:19-21
Timestamp: 2025-10-08T08:11:47.088Z
Learning: Test snapshot files in the router-generator tests directory (e.g., files matching the pattern `packages/router-generator/tests/generator/**/routeTree*.snapshot.ts` or `routeTree*.snapshot.js`) should not be modified or have issues flagged, as they are fixtures used to verify the generator's output and are intentionally preserved as-is.
Applied to files:
examples/solid/start-i18n-paraglide/src/router.tsxexamples/solid/start-i18n-paraglide/.vscode/settings.jsonexamples/solid/start-i18n-paraglide/src/routeTree.gen.ts
📚 Learning: 2025-11-02T16:16:24.898Z
Learnt from: nlynzaad
Repo: TanStack/router PR: 5732
File: packages/start-client-core/src/client/hydrateStart.ts:6-9
Timestamp: 2025-11-02T16:16:24.898Z
Learning: In packages/start-client-core/src/client/hydrateStart.ts, the `import/no-duplicates` ESLint disable is necessary for imports from `#tanstack-router-entry` and `#tanstack-start-entry` because both aliases resolve to the same placeholder file (`fake-start-entry.js`) in package.json during static analysis, even though they resolve to different files at runtime.
Applied to files:
examples/solid/start-i18n-paraglide/package.jsonexamples/solid/start-i18n-paraglide/README.mdexamples/solid/start-i18n-paraglide/src/routeTree.gen.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 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/solid/start-i18n-paraglide/tsconfig.json
📚 Learning: 2025-10-01T18:31:35.420Z
Learnt from: schiller-manuel
Repo: TanStack/router PR: 5330
File: e2e/react-start/custom-basepath/src/routeTree.gen.ts:58-61
Timestamp: 2025-10-01T18:31:35.420Z
Learning: Do not review files named `routeTree.gen.ts` in TanStack Router repositories, as these are autogenerated files that should not be manually modified.
Applied to files:
examples/solid/start-i18n-paraglide/.vscode/settings.jsonexamples/solid/start-i18n-paraglide/src/routeTree.gen.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to **/src/routes/** : Place file-based routes under src/routes/ directories
Applied to files:
examples/solid/start-i18n-paraglide/src/routes/about.tsxexamples/solid/start-i18n-paraglide/src/routeTree.gen.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{router-cli,router-generator,router-plugin,virtual-file-routes}/** : Keep CLI, generators, bundler plugins, and virtual file routing utilities in their dedicated tooling package directories
Applied to files:
examples/solid/start-i18n-paraglide/src/routeTree.gen.ts
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/router-core/** : Keep framework-agnostic core router logic in packages/router-core/
Applied to files:
examples/solid/start-i18n-paraglide/src/routeTree.gen.ts
🧬 Code graph analysis (6)
examples/solid/start-i18n-paraglide/src/routes/__root.tsx (2)
examples/solid/start-i18n-paraglide/src/routes/about.tsx (1)
Route(4-6)examples/solid/start-i18n-paraglide/src/routes/index.tsx (1)
Route(12-20)
examples/solid/start-i18n-paraglide/src/routes/index.tsx (2)
examples/solid/start-i18n-paraglide/src/routes/__root.tsx (1)
Route(15-33)examples/solid/start-i18n-paraglide/src/routes/about.tsx (1)
Route(4-6)
examples/solid/start-i18n-paraglide/src/utils/seo.ts (1)
scripts/llms-generate.mjs (1)
title(101-101)
examples/solid/start-i18n-paraglide/src/utils/translated-pathnames.ts (1)
examples/solid/start-i18n-paraglide/src/routeTree.gen.ts (1)
FileRoutesByTo(30-33)
examples/solid/start-i18n-paraglide/src/routes/about.tsx (2)
examples/solid/start-i18n-paraglide/src/routes/__root.tsx (1)
Route(15-33)examples/solid/start-i18n-paraglide/src/routes/index.tsx (1)
Route(12-20)
examples/solid/start-i18n-paraglide/src/routeTree.gen.ts (1)
examples/solid/start-i18n-paraglide/src/router.tsx (1)
getRouter(8-18)
🪛 ESLint
examples/solid/start-i18n-paraglide/src/utils/translated-pathnames.ts
[error] 1-1: All imports in the declaration are only used as types. Use import type.
(@typescript-eslint/consistent-type-imports)
[error] 2-2: All imports in the declaration are only used as types. Use import type.
(@typescript-eslint/consistent-type-imports)
[error] 2-2: ../routeTree.gen import should occur before import of @/paraglide/runtime
(import/order)
[error] 34-34: Array type using 'TranslatedPathname[]' is forbidden. Use 'Array' instead.
(@typescript-eslint/array-type)
examples/solid/start-i18n-paraglide/src/server.ts
[error] 2-2: @tanstack/solid-start/server-entry import should occur before import of ./paraglide/server.js
(import/order)
🪛 LanguageTool
examples/solid/start-i18n-paraglide/README.md
[style] ~185-~185: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...Start plugin. For this to work you will need to compile paraglide before the build with...
(REP_NEED_TO_VB)
🪛 markdownlint-cli2 (0.18.1)
examples/solid/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)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Preview
- GitHub Check: Test
🔇 Additional comments (20)
examples/solid/start-i18n-paraglide/.vscode/extensions.json (1)
1-3: LGTM!This VS Code extensions configuration correctly recommends the inlang VS Code extension, which is appropriate for a Paraglide i18n project and follows VS Code best practices for guiding developers toward relevant tooling.
examples/solid/start-i18n-paraglide/project.inlang/project_id (1)
1-1: LGTM!The Paraglide project identifier is correctly placed within the
.inlang/configuration directory and follows the expected file structure for Solid Start i18n examples. This file appropriately stores the project ID needed for Paraglide integration.examples/solid/start-i18n-paraglide/.gitignore (1)
1-10: Solid configuration of ignore entries for Solid Start + Paraglide project.The .gitignore correctly targets build artifacts (dist, dist-ssr, .nitro, .output), framework caches (.tanstack), environment files (.env), and platform-specific files (.DS_Store). This is appropriate for the described example architecture.
examples/solid/start-i18n-paraglide/project.inlang/.gitignore (1)
1-1: Appropriate scoping of Inlang cache exclusion.The nested .gitignore correctly targets the Inlang tooling cache directory. This focused approach aligns with the project structure.
examples/solid/start-i18n-paraglide/tsconfig.json (2)
3-30: Configuration aligns well with strict TypeScript standards for Solid Start.The tsconfig.json correctly enables
strict: trueand all recommended strict-mode checks (noUnusedLocals,noUnusedParameters,noFallthroughCasesInSwitch,noUncheckedSideEffectImports), which aligns with the TypeScript strict mode guidance. JSX handling is properly configured for Solid.js withjsx: "preserve"andjsxImportSource: "solid-js". The path alias@/*supports the example's modular structure.
13-15: VerifyverbatimModuleSyntaxsetting for strict-mode consistency.With
moduleResolution: "bundler"andstrict: trueenabled, theverbatimModuleSyntax: falsesetting allows TypeScript to transform module syntax (e.g., silently remove unused imports). This may be intentional for Solid Start's toolchain, but typically strict-mode projects useverbatimModuleSyntax: trueto ensure explicit control over imports and prevent accidental removal of imports with side effects (especially givennoUncheckedSideEffectImports: trueon line 24).Please confirm this is the intended configuration for this example's build setup, or consider setting
verbatimModuleSyntax: truefor stricter module handling.examples/solid/start-i18n-paraglide/src/styles.css (1)
1-1: LGTM! Correct Tailwind CSS v4 syntax.The import statement correctly uses the new Tailwind CSS v4 single-import syntax, which replaces the previous multiple
@tailwinddirectives.examples/solid/start-i18n-paraglide/project.inlang/settings.json (1)
1-12: LGTM! Standard Inlang configuration.The configuration correctly defines base locale, supported locales, required plugins, and message path pattern for the Paraglide i18n setup.
examples/solid/start-i18n-paraglide/public/robots.txt (1)
1-3: LGTM! Standard robots.txt configuration.The file uses the standard robots exclusion protocol format, allowing all crawlers with no restrictions, which is appropriate for an example application.
examples/solid/start-i18n-paraglide/.vscode/settings.json (1)
1-11: LGTM! Proper protection for generated route tree.The VS Code settings correctly exclude and protect
routeTree.gen.tsfrom modification, which is appropriate since this is an autogenerated file that should not be manually edited.Based on learnings
examples/solid/start-i18n-paraglide/src/server.ts (1)
4-8: LGTM! Clean middleware integration.The server entry correctly wraps the Solid Start handler with Paraglide middleware to enable i18n request handling.
examples/solid/start-i18n-paraglide/vite.config.ts (1)
8-45: LGTM! Comprehensive Paraglide and Vite configuration.The configuration correctly sets up:
- Paraglide plugin with appropriate locale detection strategy (URL, cookie, browser preference, base locale fallback)
- Explicit URL patterns for both base and translated routes (e.g.,
/about→/en/aboutand/de/ueber)- Proper catch-all pattern as the last entry to handle unmatched routes
- SSR-enabled Solid plugin, TanStack Start, and Tailwind CSS integration
examples/solid/start-i18n-paraglide/public/manifest.json (1)
4-19: No action required—all referenced icon files exist.The icon files referenced in manifest.json (
favicon.ico,logo192.png, andlogo512.png) are present in theexamples/solid/start-i18n-paraglide/public/directory. The manifest configuration is correct.Likely an incorrect or invalid review comment.
examples/solid/start-i18n-paraglide/src/utils/translated-pathnames.ts (1)
18-30: LGTM!The
toUrlPatternfunction correctly transforms TanStack Router patterns to URL patterns with proper handling of catch-all routes, optional parameters, named parameters, and trailing slashes.examples/solid/start-i18n-paraglide/messages/en.json (1)
1-8: LGTM!The English translation file is well-structured with appropriate schema reference and properly formatted placeholder syntax.
examples/solid/start-i18n-paraglide/messages/de.json (1)
1-8: LGTM!The German translation file correctly mirrors the English file's keys with appropriate German translations.
examples/solid/start-i18n-paraglide/src/routes/about.tsx (1)
1-10: LGTM!Clean implementation of a localized route that properly uses the i18n message helper.
examples/solid/start-i18n-paraglide/src/router.tsx (1)
8-18: LGTM!The router configuration properly integrates i18n URL rewriting with appropriate scroll restoration and preload settings for the example.
examples/solid/start-i18n-paraglide/src/routes/__root.tsx (1)
35-97: LGTM!The root document structure effectively demonstrates i18n integration with proper locale switching, localized navigation, and developer tools setup.
examples/solid/start-i18n-paraglide/src/routeTree.gen.ts (1)
1-86: Skipping review of autogenerated file.This file is autogenerated by TanStack Router and should not be manually modified or reviewed.
Based on learnings
| "dependencies": { | ||
| "@tanstack/solid-devtools": "^0.7.0", | ||
| "@tanstack/solid-router": "^1.135.2", | ||
| "@tanstack/solid-router-devtools": "^1.135.2", | ||
| "@tanstack/solid-start": "^1.135.2", | ||
| "solid-js": "^1.9.10" | ||
| }, |
There was a problem hiding this comment.
Use workspace:* protocol for internal TanStack dependencies.
The TanStack packages should use the workspace:* protocol instead of version ranges to ensure this example always uses the latest local versions from the monorepo during development.
As per coding guidelines
Apply this diff to fix the dependency declarations:
"dependencies": {
- "@tanstack/solid-devtools": "^0.7.0",
- "@tanstack/solid-router": "^1.135.2",
- "@tanstack/solid-router-devtools": "^1.135.2",
- "@tanstack/solid-start": "^1.135.2",
+ "@tanstack/solid-devtools": "workspace:*",
+ "@tanstack/solid-router": "workspace:*",
+ "@tanstack/solid-router-devtools": "workspace:*",
+ "@tanstack/solid-start": "workspace:*",
"solid-js": "^1.9.10"
},📝 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": { | |
| "@tanstack/solid-devtools": "^0.7.0", | |
| "@tanstack/solid-router": "^1.135.2", | |
| "@tanstack/solid-router-devtools": "^1.135.2", | |
| "@tanstack/solid-start": "^1.135.2", | |
| "solid-js": "^1.9.10" | |
| }, | |
| "dependencies": { | |
| "@tanstack/solid-devtools": "workspace:*", | |
| "@tanstack/solid-router": "workspace:*", | |
| "@tanstack/solid-router-devtools": "workspace:*", | |
| "@tanstack/solid-start": "workspace:*", | |
| "solid-js": "^1.9.10" | |
| }, |
🤖 Prompt for AI Agents
In examples/solid/start-i18n-paraglide/package.json around lines 11 to 17, the
TanStack scoped dependencies use fixed version ranges; change each @tanstack/*
entry to use the workspace:* protocol (e.g., "@tanstack/solid-devtools":
"workspace:*", "@tanstack/solid-router": "workspace:*",
"@tanstack/solid-router-devtools": "workspace:*", "@tanstack/solid-start":
"workspace:*") so the example uses local monorepo packages during development,
then save the file and run your package manager install (e.g., pnpm install or
npm install) to update lockfiles.
| @@ -0,0 +1,196 @@ | |||
| # TanStack Start example | |||
|
|
|||
| 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). | |||
There was a problem hiding this comment.
Fix incorrect repository link.
The link points to opral/monorepo but this example is located in the TanStack/router repository. This appears to be a copy-paste error.
Apply this diff to fix the link:
-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.📝 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.
| 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. |
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
3-3: Link text should be descriptive
(MD059, descriptive-link-text)
🤖 Prompt for AI Agents
In examples/solid/start-i18n-paraglide/README.md around line 3, the repository
link incorrectly points to opral/monorepo; update the URL to reference the
TanStack/router repository example location instead (replace the current GitHub
URL with the correct TanStack/router tree path that contains the
start-i18n-paraglide example).
| ```diff | ||
| import { defineConfig } from 'vite' | ||
| import { tanstackStart } from "@tanstack/solid-start/plugin/vite"; | ||
| import react from '@vitejs/plugin-react' | ||
| +import { paraglideVitePlugin } from "@inlang/paraglide-js"; | ||
|
|
||
| export default defineConfig({ | ||
| plugins: [ | ||
| tanstackStart(), | ||
| react(), | ||
| + paraglideVitePlugin({ | ||
| + project: "./project.inlang", | ||
| + outdir: "./app/paraglide", | ||
| + outputStructure: "message-modules", | ||
| + cookieName: "PARAGLIDE_LOCALE", | ||
| + strategy: ["url", "cookie", "preferredLanguage", "baseLocale"], | ||
| + urlPatterns: [ | ||
| + { | ||
| + pattern: "/:path(.*)?", | ||
| + localized: [ | ||
| + ["en", "/en/:path(.*)?"], | ||
| + ], | ||
| + }, | ||
| + ], | ||
| + }), | ||
| ], | ||
| }); | ||
| ``` |
There was a problem hiding this comment.
Remove incorrect React imports from Solid example.
The code block shows React imports and the @vitejs/plugin-react plugin, but this is a Solid.js example. These lines should be removed as they don't apply to Solid Start.
Apply this diff to fix the configuration example:
import { defineConfig } from 'vite'
import { tanstackStart } from "@tanstack/solid-start/plugin/vite";
-import react from '@vitejs/plugin-react'
+import { paraglideVitePlugin } from "@inlang/paraglide-js";
export default defineConfig({
- plugins: [
+ plugins: [
tanstackStart(),
- react(),
- paraglideVitePlugin({
- project: "./project.inlang",
- outdir: "./app/paraglide",
- outputStructure: "message-modules",
- cookieName: "PARAGLIDE_LOCALE",
- strategy: ["url", "cookie", "preferredLanguage", "baseLocale"],
- urlPatterns: [
- {
- pattern: "/:path(.*)?",
- localized: [
- ["en", "/en/:path(.*)?"],
- ],
- },
- ],
- }),
- ],
+ paraglideVitePlugin({
+ project: "./project.inlang",
+ outdir: "./app/paraglide",
+ outputStructure: "message-modules",
+ cookieName: "PARAGLIDE_LOCALE",
+ strategy: ["url", "cookie", "preferredLanguage", "baseLocale"],
+ urlPatterns: [
+ {
+ pattern: "/:path(.*)?",
+ localized: [
+ ["en", "/en/:path(.*)?"],
+ ],
+ },
+ ],
+ }),
+ ],
});📝 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.
| ```diff | |
| import { defineConfig } from 'vite' | |
| import { tanstackStart } from "@tanstack/solid-start/plugin/vite"; | |
| import react from '@vitejs/plugin-react' | |
| +import { paraglideVitePlugin } from "@inlang/paraglide-js"; | |
| export default defineConfig({ | |
| plugins: [ | |
| tanstackStart(), | |
| react(), | |
| + paraglideVitePlugin({ | |
| + project: "./project.inlang", | |
| + outdir: "./app/paraglide", | |
| + outputStructure: "message-modules", | |
| + cookieName: "PARAGLIDE_LOCALE", | |
| + strategy: ["url", "cookie", "preferredLanguage", "baseLocale"], | |
| + urlPatterns: [ | |
| + { | |
| + pattern: "/:path(.*)?", | |
| + localized: [ | |
| + ["en", "/en/:path(.*)?"], | |
| + ], | |
| + }, | |
| + ], | |
| + }), | |
| ], | |
| }); | |
| ``` | |
| import { defineConfig } from 'vite' | |
| import { tanstackStart } from "@tanstack/solid-start/plugin/vite"; | |
| import { paraglideVitePlugin } from "@inlang/paraglide-js"; | |
| export default defineConfig({ | |
| plugins: [ | |
| tanstackStart(), | |
| paraglideVitePlugin({ | |
| project: "./project.inlang", | |
| outdir: "./app/paraglide", | |
| outputStructure: "message-modules", | |
| cookieName: "PARAGLIDE_LOCALE", | |
| strategy: ["url", "cookie", "preferredLanguage", "baseLocale"], | |
| urlPatterns: [ | |
| { | |
| pattern: "/:path(.*)?", | |
| localized: [ | |
| ["en", "/en/:path(.*)?"], | |
| ], | |
| }, | |
| ], | |
| }), | |
| ], | |
| }); |
🧰 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)
39-39: Hard tabs
Column: 2
(MD010, no-hard-tabs)
40-40: Hard tabs
Column: 1
(MD010, no-hard-tabs)
🤖 Prompt for AI Agents
In examples/solid/start-i18n-paraglide/README.md around lines 15 to 42, the Vite
config sample incorrectly imports React and includes '@vitejs/plugin-react'
which does not belong in a Solid.js example; remove the line "import react from
'@vitejs/plugin-react'" and the react() entry in the plugins array, leaving
tanstackStart() and the paraglideVitePlugin({...}) configuration intact, and
ensure indentation and commas in the plugins array remain valid after removal.
| } | ||
| ``` | ||
|
|
||
| In `__root.tsx` add change the html lang attribute to the current locale. |
There was a problem hiding this comment.
Fix grammatical error.
The sentence contains a grammatical error.
Apply this diff:
-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/solid/start-i18n-paraglide/README.md around line 79, the sentence
"In `__root.tsx` add change the html lang attribute to the current locale." has
a grammar mistake; update it to read "In `__root.tsx` change the html lang
attribute to the current locale." so it is clear and grammatically correct.
| ```tsx | ||
| import { getLocale } from '../paraglide/runtime.js' | ||
|
|
||
| function RootDocument({ children }: { children: React.ReactNode }) { |
There was a problem hiding this comment.
Use Solid types instead of React types.
The code example uses React.ReactNode but this is a Solid.js example. Use appropriate Solid types.
Apply this diff:
-function RootDocument({ children }: { children: React.ReactNode }) {
+function RootDocument({ children }: { children: JSX.Element }) {📝 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 RootDocument({ children }: { children: React.ReactNode }) { | |
| function RootDocument({ children }: { children: JSX.Element }) { |
🤖 Prompt for AI Agents
examples/solid/start-i18n-paraglide/README.md around line 84: the example uses
React.ReactNode but this is a Solid.js example; replace React types with Solid
types by typing the component's children using Solid's types (e.g., import
ParentProps or JSX from 'solid-js' and use ParentProps['children'] or
JSX.Element) and update the import accordingly so the RootDocument parameter
uses a Solid-appropriate children type instead of React.ReactNode.
| import { paraglideMiddleware } from './paraglide/server.js' | ||
| import handler from '@tanstack/solid-start/server-entry' |
There was a problem hiding this comment.
Reorder imports to fix ESLint violation.
External package imports should come before relative imports according to the import/order rule.
Apply this diff to fix the import order:
-import { paraglideMiddleware } from './paraglide/server.js'
import handler from '@tanstack/solid-start/server-entry'
+import { paraglideMiddleware } from './paraglide/server.js'📝 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.
| import { paraglideMiddleware } from './paraglide/server.js' | |
| import handler from '@tanstack/solid-start/server-entry' | |
| import handler from '@tanstack/solid-start/server-entry' | |
| import { paraglideMiddleware } from './paraglide/server.js' |
🧰 Tools
🪛 ESLint
[error] 2-2: @tanstack/solid-start/server-entry import should occur before import of ./paraglide/server.js
(import/order)
🤖 Prompt for AI Agents
In examples/solid/start-i18n-paraglide/src/server.ts around lines 1 to 2, the
import order violates ESLint import/order by placing a relative import before an
external package import; reorder the two import statements so the external
package import (from '@tanstack/solid-start/server-entry') comes first and the
relative import ('./paraglide/server.js') comes after, then run eslint --fix or
lint to ensure the rule is satisfied.
| 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 }, | ||
| ...(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.
Filter out meta tags with undefined content.
Optional fields (description, keywords) are included in the tags array even when undefined, resulting in invalid meta tags with content: undefined. These tags should only be included when values are provided.
Apply this diff to conditionally include optional tags:
const tags = [
{ title },
- { name: 'description', content: description },
- { name: 'keywords', content: keywords },
+ ...(description ? [{ name: 'description', content: description }] : []),
+ ...(keywords ? [{ name: 'keywords', content: keywords }] : []),
{ name: 'twitter:title', content: title },
- { name: 'twitter:description', content: description },
+ ...(description ? [{ name: 'twitter:description', content: description }] : []),
{ name: 'twitter:creator', content: '@tannerlinsley' },
{ name: 'twitter:site', content: '@tannerlinsley' },
{ property: 'og:type', content: 'website' },
{ property: 'og:title', content: title },
- { property: 'og:description', content: description },
+ ...(description ? [{ property: 'og:description', content: description }] : []),
...(image
? [
{ name: 'twitter:image', content: image },
{ name: 'twitter:card', content: 'summary_large_image' },
{ property: 'og:image', content: image },
]
: []),
]Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In examples/solid/start-i18n-paraglide/src/utils/seo.ts around lines 12 to 30
the tags array currently includes objects for optional fields (description,
keywords) even when their values are undefined; update the construction so
optional meta objects are only added when the corresponding value is defined
(either by conditionally pushing those objects into the array or by building the
array and filtering out entries with undefined content, e.g., remove any tag
where tag.content === undefined) to avoid generating meta tags with content:
undefined.
| { name: 'og:type', content: 'website' }, | ||
| { name: 'og:title', content: title }, | ||
| { name: 'og:description', content: description }, |
There was a problem hiding this comment.
Open Graph tags must use property instead of name.
Open Graph meta tags (og:*) require the property attribute, not name, per the Open Graph protocol specification. Social media platforms won't recognize these tags with the name attribute.
Apply this diff to fix the Open Graph tags:
- { name: 'og:type', content: 'website' },
- { name: 'og:title', content: title },
- { name: 'og:description', content: description },
+ { property: 'og:type', content: 'website' },
+ { property: 'og:title', content: title },
+ { property: 'og:description', content: description },
...(image
? [
{ name: 'twitter:image', content: image },
{ name: 'twitter:card', content: 'summary_large_image' },
- { name: 'og:image', content: image },
+ { property: 'og:image', content: image },
]
: []),Also applies to: 27-27
🤖 Prompt for AI Agents
In examples/solid/start-i18n-paraglide/src/utils/seo.ts around lines 20-22 (and
also line 27), the Open Graph meta tags use the `name` attribute; replace `name`
with `property` for all `og:*` entries so tags become `property: 'og:type'`,
`property: 'og:title'`, `property: 'og:description'` (and the other OG entry at
line 27) to comply with the Open Graph protocol and ensure social platforms
recognize them.
| import { Locale } from '@/paraglide/runtime' | ||
| import { FileRoutesByTo } from '../routeTree.gen' |
There was a problem hiding this comment.
Fix import statements per ESLint rules.
Both imports are only used as types and should use import type. Additionally, the import order should place local imports after external ones.
Apply this diff:
-import { Locale } from '@/paraglide/runtime'
-import { FileRoutesByTo } from '../routeTree.gen'
+import type { FileRoutesByTo } from '../routeTree.gen'
+import type { Locale } from '@/paraglide/runtime'As per coding guidelines
🧰 Tools
🪛 ESLint
[error] 1-1: All imports in the declaration are only used as types. Use import type.
(@typescript-eslint/consistent-type-imports)
[error] 2-2: All imports in the declaration are only used as types. Use import type.
(@typescript-eslint/consistent-type-imports)
[error] 2-2: ../routeTree.gen import should occur before import of @/paraglide/runtime
(import/order)
🤖 Prompt for AI Agents
In examples/solid/start-i18n-paraglide/src/utils/translated-pathnames.ts around
lines 1 to 2, the two imports are only used as types and the local import should
come after external imports; change both to "import type" and reorder so the
external import (Locale from '@/paraglide/runtime') appears before the local
import (FileRoutesByTo from '../routeTree.gen').
|
|
||
| function createTranslatedPathnames( | ||
| input: Record<PublicRoutePath, Record<Locale, string>>, | ||
| ): TranslatedPathname[] { |
There was a problem hiding this comment.
Use consistent array type syntax.
The return type uses TranslatedPathname[] but the project style prefers Array<TranslatedPathname>.
Apply this diff:
-): TranslatedPathname[] {
+): Array<TranslatedPathname> {As per coding guidelines
📝 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.
| ): TranslatedPathname[] { | |
| ): Array<TranslatedPathname> { |
🧰 Tools
🪛 ESLint
[error] 34-34: Array type using 'TranslatedPathname[]' is forbidden. Use 'Array' instead.
(@typescript-eslint/array-type)
🤖 Prompt for AI Agents
In examples/solid/start-i18n-paraglide/src/utils/translated-pathnames.ts around
line 34, the function return type is declared as TranslatedPathname[] but the
project prefers the generic array syntax; change the return type to
Array<TranslatedPathname> (and update any other occurrences in this file to use
Array<...> for consistency).
docs(solid-start) i18n example
Summary by CodeRabbit
New Features
Documentation