@intlayer/docs 8.5.2 → 8.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (148) hide show
  1. package/docs/ar/intlayer_with_react_router_v7.md +2 -4
  2. package/docs/ar/intlayer_with_react_router_v7_fs_routes.md +2 -4
  3. package/docs/ar/intlayer_with_svelte_kit.md +2 -2
  4. package/docs/ar/intlayer_with_tanstack+solid.md +0 -17
  5. package/docs/ar/intlayer_with_tanstack.md +0 -8
  6. package/docs/ar/intlayer_with_vite+lit.md +0 -1
  7. package/docs/ar/intlayer_with_vite+solid.md +0 -1
  8. package/docs/ar/intlayer_with_vite+svelte.md +1 -1
  9. package/docs/bn/intlayer_with_vite+lit.md +0 -1
  10. package/docs/cs/intlayer_with_vite+lit.md +0 -1
  11. package/docs/de/intlayer_with_react_router_v7.md +2 -4
  12. package/docs/de/intlayer_with_react_router_v7_fs_routes.md +1 -2
  13. package/docs/de/intlayer_with_svelte_kit.md +2 -2
  14. package/docs/de/intlayer_with_tanstack+solid.md +78 -21
  15. package/docs/de/intlayer_with_tanstack.md +96 -28
  16. package/docs/de/intlayer_with_vite+lit.md +0 -1
  17. package/docs/de/intlayer_with_vite+solid.md +0 -1
  18. package/docs/de/intlayer_with_vite+svelte.md +1 -1
  19. package/docs/en/intlayer_with_react_router_v7.md +1 -2
  20. package/docs/en/intlayer_with_react_router_v7_fs_routes.md +2 -4
  21. package/docs/en/intlayer_with_svelte_kit.md +2 -2
  22. package/docs/en/intlayer_with_tanstack+solid.md +79 -19
  23. package/docs/en/intlayer_with_tanstack.md +81 -10
  24. package/docs/en/intlayer_with_vite+lit.md +0 -1
  25. package/docs/en/intlayer_with_vite+solid.md +0 -1
  26. package/docs/en/intlayer_with_vite+svelte.md +5 -6
  27. package/docs/en-GB/intlayer_with_react_router_v7.md +2 -4
  28. package/docs/en-GB/intlayer_with_react_router_v7_fs_routes.md +2 -4
  29. package/docs/en-GB/intlayer_with_svelte_kit.md +2 -2
  30. package/docs/en-GB/intlayer_with_tanstack+solid.md +71 -17
  31. package/docs/en-GB/intlayer_with_tanstack.md +74 -9
  32. package/docs/en-GB/intlayer_with_vite+lit.md +0 -1
  33. package/docs/en-GB/intlayer_with_vite+solid.md +0 -1
  34. package/docs/en-GB/intlayer_with_vite+svelte.md +1 -1
  35. package/docs/es/intlayer_with_react_router_v7.md +2 -4
  36. package/docs/es/intlayer_with_react_router_v7_fs_routes.md +2 -4
  37. package/docs/es/intlayer_with_svelte_kit.md +2 -2
  38. package/docs/es/intlayer_with_tanstack+solid.md +78 -21
  39. package/docs/es/intlayer_with_tanstack.md +96 -28
  40. package/docs/es/intlayer_with_vite+lit.md +0 -1
  41. package/docs/es/intlayer_with_vite+solid.md +0 -1
  42. package/docs/es/intlayer_with_vite+svelte.md +1 -1
  43. package/docs/fr/intlayer_with_react_router_v7.md +2 -4
  44. package/docs/fr/intlayer_with_react_router_v7_fs_routes.md +2 -4
  45. package/docs/fr/intlayer_with_svelte_kit.md +3 -3
  46. package/docs/fr/intlayer_with_tanstack+solid.md +78 -21
  47. package/docs/fr/intlayer_with_tanstack.md +96 -28
  48. package/docs/fr/intlayer_with_vite+lit.md +0 -1
  49. package/docs/fr/intlayer_with_vite+solid.md +0 -1
  50. package/docs/fr/intlayer_with_vite+svelte.md +1 -1
  51. package/docs/hi/intlayer_with_react_router_v7.md +2 -4
  52. package/docs/hi/intlayer_with_react_router_v7_fs_routes.md +2 -4
  53. package/docs/hi/intlayer_with_svelte_kit.md +2 -2
  54. package/docs/hi/intlayer_with_tanstack+solid.md +0 -17
  55. package/docs/hi/intlayer_with_tanstack.md +0 -8
  56. package/docs/hi/intlayer_with_vite+lit.md +0 -1
  57. package/docs/hi/intlayer_with_vite+solid.md +0 -1
  58. package/docs/hi/intlayer_with_vite+svelte.md +1 -1
  59. package/docs/id/intlayer_with_react_router_v7.md +2 -4
  60. package/docs/id/intlayer_with_react_router_v7_fs_routes.md +2 -4
  61. package/docs/id/intlayer_with_svelte_kit.md +2 -2
  62. package/docs/id/intlayer_with_tanstack+solid.md +0 -17
  63. package/docs/id/intlayer_with_tanstack.md +0 -8
  64. package/docs/id/intlayer_with_vite+lit.md +0 -1
  65. package/docs/id/intlayer_with_vite+solid.md +0 -1
  66. package/docs/id/intlayer_with_vite+svelte.md +1 -1
  67. package/docs/it/intlayer_with_react_router_v7.md +2 -4
  68. package/docs/it/intlayer_with_react_router_v7_fs_routes.md +2 -4
  69. package/docs/it/intlayer_with_svelte_kit.md +3 -3
  70. package/docs/it/intlayer_with_tanstack+solid.md +76 -19
  71. package/docs/it/intlayer_with_tanstack.md +96 -30
  72. package/docs/it/intlayer_with_vite+lit.md +0 -1
  73. package/docs/it/intlayer_with_vite+solid.md +0 -1
  74. package/docs/it/intlayer_with_vite+svelte.md +1 -1
  75. package/docs/ja/intlayer_with_react_router_v7.md +1 -2
  76. package/docs/ja/intlayer_with_react_router_v7_fs_routes.md +2 -4
  77. package/docs/ja/intlayer_with_tanstack+solid.md +81 -22
  78. package/docs/ja/intlayer_with_tanstack.md +779 -93
  79. package/docs/ja/intlayer_with_vite+lit.md +0 -1
  80. package/docs/ja/intlayer_with_vite+solid.md +0 -1
  81. package/docs/ja/intlayer_with_vite+svelte.md +1 -1
  82. package/docs/ko/intlayer_with_react_router_v7.md +2 -4
  83. package/docs/ko/intlayer_with_react_router_v7_fs_routes.md +2 -4
  84. package/docs/ko/intlayer_with_svelte_kit.md +2 -2
  85. package/docs/ko/intlayer_with_tanstack+solid.md +79 -22
  86. package/docs/ko/intlayer_with_tanstack.md +95 -101
  87. package/docs/ko/intlayer_with_vite+lit.md +0 -1
  88. package/docs/ko/intlayer_with_vite+solid.md +0 -1
  89. package/docs/ko/intlayer_with_vite+svelte.md +1 -1
  90. package/docs/nl/intlayer_with_vite+lit.md +0 -1
  91. package/docs/pl/intlayer_with_react_router_v7.md +2 -4
  92. package/docs/pl/intlayer_with_react_router_v7_fs_routes.md +2 -4
  93. package/docs/pl/intlayer_with_svelte_kit.md +2 -2
  94. package/docs/pl/intlayer_with_tanstack+solid.md +0 -17
  95. package/docs/pl/intlayer_with_tanstack.md +0 -8
  96. package/docs/pl/intlayer_with_vite+lit.md +0 -1
  97. package/docs/pl/intlayer_with_vite+solid.md +0 -1
  98. package/docs/pl/intlayer_with_vite+svelte.md +1 -1
  99. package/docs/pt/intlayer_with_react_router_v7.md +1 -2
  100. package/docs/pt/intlayer_with_react_router_v7_fs_routes.md +2 -4
  101. package/docs/pt/intlayer_with_svelte_kit.md +3 -3
  102. package/docs/pt/intlayer_with_tanstack+solid.md +76 -19
  103. package/docs/pt/intlayer_with_tanstack.md +96 -30
  104. package/docs/pt/intlayer_with_vite+lit.md +0 -1
  105. package/docs/pt/intlayer_with_vite+solid.md +0 -1
  106. package/docs/pt/intlayer_with_vite+svelte.md +1 -1
  107. package/docs/ru/intlayer_with_react_router_v7.md +2 -4
  108. package/docs/ru/intlayer_with_react_router_v7_fs_routes.md +2 -4
  109. package/docs/ru/intlayer_with_svelte_kit.md +2 -2
  110. package/docs/ru/intlayer_with_tanstack+solid.md +78 -21
  111. package/docs/ru/intlayer_with_tanstack.md +99 -33
  112. package/docs/ru/intlayer_with_vite+lit.md +0 -1
  113. package/docs/ru/intlayer_with_vite+solid.md +0 -1
  114. package/docs/ru/intlayer_with_vite+svelte.md +1 -1
  115. package/docs/tr/intlayer_with_react_router_v7.md +2 -4
  116. package/docs/tr/intlayer_with_react_router_v7_fs_routes.md +2 -4
  117. package/docs/tr/intlayer_with_svelte_kit.md +2 -2
  118. package/docs/tr/intlayer_with_tanstack+solid.md +0 -17
  119. package/docs/tr/intlayer_with_tanstack.md +0 -8
  120. package/docs/tr/intlayer_with_vite+lit.md +0 -1
  121. package/docs/tr/intlayer_with_vite+solid.md +0 -1
  122. package/docs/tr/intlayer_with_vite+svelte.md +1 -1
  123. package/docs/uk/intlayer_with_react_router_v7.md +1 -2
  124. package/docs/uk/intlayer_with_react_router_v7_fs_routes.md +2 -4
  125. package/docs/uk/intlayer_with_svelte_kit.md +2 -2
  126. package/docs/uk/intlayer_with_tanstack+solid.md +0 -17
  127. package/docs/uk/intlayer_with_tanstack.md +0 -8
  128. package/docs/uk/intlayer_with_vite+lit.md +0 -1
  129. package/docs/uk/intlayer_with_vite+solid.md +0 -1
  130. package/docs/uk/intlayer_with_vite+svelte.md +1 -1
  131. package/docs/ur/intlayer_with_vite+lit.md +0 -1
  132. package/docs/vi/intlayer_with_react_router_v7.md +2 -4
  133. package/docs/vi/intlayer_with_react_router_v7_fs_routes.md +2 -4
  134. package/docs/vi/intlayer_with_svelte_kit.md +2 -2
  135. package/docs/vi/intlayer_with_tanstack+solid.md +0 -17
  136. package/docs/vi/intlayer_with_tanstack.md +0 -8
  137. package/docs/vi/intlayer_with_vite+lit.md +0 -1
  138. package/docs/vi/intlayer_with_vite+solid.md +0 -1
  139. package/docs/vi/intlayer_with_vite+svelte.md +1 -1
  140. package/docs/zh/intlayer_with_react_router_v7.md +2 -4
  141. package/docs/zh/intlayer_with_react_router_v7_fs_routes.md +2 -4
  142. package/docs/zh/intlayer_with_svelte_kit.md +2 -2
  143. package/docs/zh/intlayer_with_tanstack+solid.md +80 -23
  144. package/docs/zh/intlayer_with_tanstack.md +96 -104
  145. package/docs/zh/intlayer_with_vite+lit.md +0 -1
  146. package/docs/zh/intlayer_with_vite+solid.md +0 -1
  147. package/docs/zh/intlayer_with_vite+svelte.md +1 -1
  148. package/package.json +8 -8
@@ -160,14 +160,10 @@ import viteReact from "@vitejs/plugin-react";
160
160
  import { nitro } from "nitro/vite";
161
161
  import { defineConfig } from "vite";
162
162
  import { intlayer } from "vite-intlayer";
163
- import viteTsConfigPaths from "vite-tsconfig-paths";
164
163
 
165
164
  const config = defineConfig({
166
165
  plugins: [
167
166
  nitro(),
168
- viteTsConfigPaths({
169
- projects: ["./tsconfig.json"],
170
- }),
171
167
  intlayer(),
172
168
  tanstackStart({
173
169
  router: {
@@ -593,15 +589,11 @@ import viteReact from "@vitejs/plugin-react";
593
589
  import { nitro } from "nitro/vite";
594
590
  import { defineConfig } from "vite";
595
591
  import { intlayer, intlayerProxy } from "vite-intlayer";
596
- import viteTsConfigPaths from "vite-tsconfig-paths";
597
592
 
598
593
  export default defineConfig({
599
594
  plugins: [
600
595
  intlayerProxy(), // The proxy should be placed before server if you use Nitro
601
596
  nitro(),
602
- viteTsConfigPaths({
603
- projects: ["./tsconfig.json"],
604
- }),
605
597
  intlayer(),
606
598
  tanstackStart({
607
599
  router: {
@@ -755,7 +747,80 @@ export const Route = createFileRoute("/{-$locale}/$")({
755
747
 
756
748
  ---
757
749
 
758
- ### Step 16: Configure TypeScript (Optional)
750
+ ### Step 16: Generate Sitemap (Optional)
751
+
752
+ Intlayer comes with a built-in sitemap generator to help you create a sitemap for your application easily. It handles localized routes and adds the necessary metadata for search engines.
753
+
754
+ To use it, you first need to configure your `vite.config.ts` to enable pre-rendering for your localized routes and disable the default TanStack Start sitemap generation.
755
+
756
+ ```typescript fileName="vite.config.ts"
757
+ import { localeFlatMap } from "intlayer";
758
+ // ... other imports
759
+
760
+ export const pathList = ["", "/about", "/404"];
761
+
762
+ const localizedPages = localeFlatMap(({ urlPrefix }) =>
763
+ pathList.map((path) => ({
764
+ path: `${urlPrefix}${path}`,
765
+ prerender: {
766
+ enabled: true,
767
+ },
768
+ }))
769
+ );
770
+
771
+ export default defineConfig({
772
+ plugins: [
773
+ // ... other plugins
774
+ tanstackStart({
775
+ // ... other config
776
+ sitemap: {
777
+ enabled: false,
778
+ },
779
+ prerender: {
780
+ enabled: true,
781
+ crawlLinks: false,
782
+ concurrency: 10,
783
+ },
784
+ pages: localizedPages,
785
+ }),
786
+ ],
787
+ });
788
+ ```
789
+
790
+ Then, create a `src/routes/sitemap[.]xml.ts` route that uses the `generateSitemap` function:
791
+
792
+ ```typescript fileName="src/routes/sitemap[.]xml.ts"
793
+ import { createFileRoute } from "@tanstack/react-router";
794
+ import { generateSitemap } from "intlayer";
795
+
796
+ const SITE_URL = (
797
+ import.meta.env.VITE_SITE_URL ?? "http://localhost:3000"
798
+ ).replace(/\/$/, "");
799
+
800
+ export const Route = createFileRoute("/sitemap.xml")({
801
+ server: {
802
+ handlers: {
803
+ GET: async () => {
804
+ const sitemap = generateSitemap(
805
+ [
806
+ { path: "/", changefreq: "daily", priority: 1.0 },
807
+ { path: "/about", changefreq: "monthly", priority: 0.8 },
808
+ ],
809
+ { siteUrl: SITE_URL }
810
+ );
811
+
812
+ return new Response(sitemap, {
813
+ headers: { "Content-Type": "application/xml" },
814
+ });
815
+ },
816
+ },
817
+ },
818
+ });
819
+ ```
820
+
821
+ ---
822
+
823
+ ### Step 17: Configure TypeScript (Optional)
759
824
 
760
825
  Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.
761
826
 
@@ -411,7 +411,6 @@ export class MyElement extends LitElement {
411
411
  }
412
412
  ```
413
413
 
414
- > [!NOTE]
415
414
  > When you need the translated string in a native HTML attribute (e.g. `alt`, `aria-label`, `title`), call `.value` on the leaf node:
416
415
  >
417
416
  > ```typescript
@@ -312,7 +312,6 @@ const App: Component = () => (
312
312
  export default App;
313
313
  ```
314
314
 
315
- > [!NOTE]
316
315
  > In Solid, `useIntlayer` returns an **accessor** function (e.g., `content()`). You must call this function to access the reactive content.
317
316
 
318
317
  > If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you must call the value of the function, like:
@@ -232,7 +232,7 @@ module.exports = appContent;
232
232
  <!-- Render content as simple content -->
233
233
  <h1>{$content.title}</h1>
234
234
  <!-- To render the content editable using the editor -->
235
- <h1><svelte:component this={$content.title} /></h1>
235
+ <h1>{@const Title = $content.title}<Title /></h1>
236
236
  <!-- To render the content as a string -->
237
237
  <div aria-label={$content.title.value}></div>
238
238
  ```
@@ -175,10 +175,9 @@ Agrega el plugin intlayer en tu configuración:
175
175
  import { reactRouter } from "@react-router/dev/vite";
176
176
  import { defineConfig } from "vite";
177
177
  import { intlayer } from "vite-intlayer";
178
- import tsconfigPaths from "vite-tsconfig-paths";
179
178
 
180
179
  export default defineConfig({
181
- plugins: [reactRouter(), tsconfigPaths(), intlayer()],
180
+ plugins: [reactRouter(), intlayer()],
182
181
  });
183
182
  ```
184
183
 
@@ -740,13 +739,12 @@ También puedes usar el `intlayerProxy` para agregar enrutamiento del lado del s
740
739
  import { reactRouter } from "@react-router/dev/vite";
741
740
  import { defineConfig } from "vite";
742
741
  import { intlayer, intlayerProxy } from "vite-intlayer";
743
- import tsconfigPaths from "vite-tsconfig-paths";
744
742
 
745
743
  export default defineConfig({
746
744
  plugins: [
747
745
  intlayerProxy(), // should be placed first
748
746
  reactRouter(),
749
- tsconfigPaths(),
747
+
750
748
  intlayer(),
751
749
  ],
752
750
  });
@@ -170,10 +170,9 @@ Agrega el plugin intlayer en tu configuración:
170
170
  import { reactRouter } from "@react-router/dev/vite";
171
171
  import { defineConfig } from "vite";
172
172
  import { intlayer } from "vite-intlayer";
173
- import tsconfigPaths from "vite-tsconfig-paths";
174
173
 
175
174
  export default defineConfig({
176
- plugins: [reactRouter(), tsconfigPaths(), intlayer()],
175
+ plugins: [reactRouter(), intlayer()],
177
176
  });
178
177
  ```
179
178
 
@@ -744,13 +743,12 @@ También puedes usar el `intlayerProxy` para agregar enrutamiento del lado del s
744
743
  import { reactRouter } from "@react-router/dev/vite";
745
744
  import { defineConfig } from "vite";
746
745
  import { intlayer, intlayerProxy } from "vite-intlayer";
747
- import tsconfigPaths from "vite-tsconfig-paths";
748
746
 
749
747
  export default defineConfig({
750
748
  plugins: [
751
749
  intlayerProxy(), // should be placed first
752
750
  reactRouter(),
753
- tsconfigPaths(),
751
+
754
752
  intlayer(),
755
753
  ],
756
754
  });
@@ -370,7 +370,7 @@ para acceder a su valor reactivo (por ejemplo, `$content.title`).
370
370
  <!-- Renderizar contenido como contenido simple -->
371
371
  <h1>{$content.title}</h1>
372
372
  <!-- Para renderizar el contenido editable usando el editor -->
373
- <h1><svelte:component this={$content.title} /></h1>
373
+ <h1>{@const Title = $content.title}<Title /></h1>
374
374
  <!-- Para renderizar el contenido como una cadena -->
375
375
  <div aria-label={$content.title.value}></div>
376
376
  ```
@@ -726,7 +726,7 @@ Para poder visualizar el selector del editor intlayer, deberás usar la sintaxis
726
726
  <h1>{$content.title}</h1>
727
727
 
728
728
  <!-- Renderizar contenido como un componente (requerido por el editor) -->
729
- <svelte:component this={$content.component} />
729
+ {@const Component = $content.component}<Component />
730
730
  </div>
731
731
  ```
732
732
 
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  createdAt: 2025-03-25
3
- updatedAt: 2026-03-25
3
+ updatedAt: 2026-03-29
4
4
  title: i18n Tanstack Start - Cómo traducir una aplicación Tanstack Start usando Solid.js en 2026
5
5
  description: Aprenda cómo agregar internacionalización (i18n) a su aplicación Tanstack Start usando Intlayer y Solid.js. Siga esta guía completa para hacer que su aplicación sea multilingüe con enrutamiento consciente de la localización.
6
6
  keywords:
@@ -12,6 +12,7 @@ keywords:
12
12
  - i18n
13
13
  - TypeScript
14
14
  - Enrutamiento de localización
15
+ - Sitemap
15
16
  slugs:
16
17
  - doc
17
18
  - environment
@@ -140,16 +141,12 @@ Añada el plugin de intlayer en su configuración:
140
141
  import { intlayer } from "vite-intlayer";
141
142
  import { defineConfig } from "vite";
142
143
  import { devtools } from "@tanstack/devtools-vite";
143
- import viteTsConfigPaths from "vite-tsconfig-paths";
144
144
  import { tanstackStart } from "@tanstack/solid-start/plugin/vite";
145
145
  import solidPlugin from "vite-plugin-solid";
146
146
 
147
147
  export default defineConfig({
148
148
  plugins: [
149
149
  devtools(),
150
- viteTsConfigPaths({
151
- projects: ["./tsconfig.json"],
152
- }),
153
150
  tanstackStart({
154
151
  router: {
155
152
  routeFileIgnorePattern:
@@ -221,9 +218,6 @@ function RootComponent() {
221
218
  }
222
219
  ```
223
220
 
224
- > [!NOTE]
225
- > En Solid, `useMatches` devuelve un **signal** (accesos reactivos). Use `matches()` (con paréntesis) para acceder al valor actual de forma reactiva.
226
-
227
221
  ### Paso 6: Crear el diseño de idioma (Opcional)
228
222
 
229
223
  Cree un diseño que maneje el prefijo de idioma y realice la validación. Este diseño asegurará que solo se procesen idiomas válidos.
@@ -415,7 +409,6 @@ function RouteComponent() {
415
409
  }
416
410
  ```
417
411
 
418
- > [!NOTE]
419
412
  > En Solid, `useIntlayer` devuelve una función **accessor** (por ejemplo, `content()`). Debe llamar a esta función para acceder al contenido reactivo.
420
413
  >
421
414
  > Para saber más sobre el hook `useIntlayer`, consulte la [documentación](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/solid-intlayer/useIntlayer.md).
@@ -460,7 +453,6 @@ export const LocaleSwitcher = () => {
460
453
  export default LocaleSwitcher;
461
454
  ```
462
455
 
463
- > [!NOTE]
464
456
  > En Solid, `locale` de `useLocale` es un **signal accessor**. Use `locale()` (con paréntesis) para leer su valor actual de forma reactiva.
465
457
  >
466
458
  > Para saber más sobre el hook `useLocale`, consulte la [documentación](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/solid-intlayer/useLocale.md).
@@ -502,15 +494,11 @@ import solid from "vite-plugin-solid";
502
494
  import { nitro } from "nitro/vite";
503
495
  import { defineConfig } from "vite";
504
496
  import { intlayer, intlayerProxy } from "vite-intlayer";
505
- import viteTsConfigPaths from "vite-tsconfig-paths";
506
497
 
507
498
  export default defineConfig({
508
499
  plugins: [
509
500
  intlayerProxy(), // El proxy debe colocarse antes que el servidor si utiliza Nitro
510
501
  nitro(),
511
- viteTsConfigPaths({
512
- projects: ["./tsconfig.json"],
513
- }),
514
502
  intlayer(),
515
503
  tanstackStart({
516
504
  router: {
@@ -551,7 +539,7 @@ export const Route = createFileRoute("/{-$locale}/")({
551
539
 
552
540
  ---
553
541
 
554
- ### Paso 14: Recuperar el idioma en sus acciones de servidor (Opcional)
542
+ ### Paso 13: Recuperar el idioma en sus acciones de servidor (Opcional)
555
543
 
556
544
  Es posible que desee acceder al idioma actual desde sus acciones de servidor o endpoints de API.
557
545
  Puede hacerlo utilizando el ayudante `getLocale` de `intlayer`.
@@ -588,7 +576,7 @@ export const getLocaleServer = createServerFn().handler(async () => {
588
576
 
589
577
  ---
590
578
 
591
- ### Paso 15: Gestionar páginas no encontradas (Opcional)
579
+ ### Paso 14: Gestionar páginas no encontradas (Opcional)
592
580
 
593
581
  Cuando un usuario visita una página inexistente, puede mostrar una página 404 personalizada y el prefijo de idioma puede afectar a la forma en que se activa la página no encontrada.
594
582
 
@@ -662,7 +650,7 @@ export const Route = createFileRoute("/{-$locale}/$")({
662
650
  });
663
651
  ```
664
652
 
665
- ### (Opcional) Paso 16: Extraer el contenido de sus componentes
653
+ ### (Opcional) Paso 15: Extraer el contenido de sus componentes
666
654
 
667
655
  Si tiene una base de código existente, transformar miles de archivos puede llevar mucho tiempo.
668
656
 
@@ -803,16 +791,12 @@ Actualice su `vite.config.ts` para incluir el plugin `intlayerCompiler`:
803
791
  import { intlayer, intlayerCompiler } from "vite-intlayer";
804
792
  import { defineConfig } from "vite";
805
793
  import { devtools } from "@tanstack/devtools-vite";
806
- import viteTsConfigPaths from "vite-tsconfig-paths";
807
794
  import { tanstackStart } from "@tanstack/solid-start/plugin/vite";
808
795
  import solidPlugin from "vite-plugin-solid";
809
796
 
810
797
  export default defineConfig({
811
798
  plugins: [
812
799
  devtools(),
813
- viteTsConfigPaths({
814
- projects: ["./tsconfig.json"],
815
- }),
816
800
  tanstackStart({
817
801
  router: {
818
802
  routeFileIgnorePattern:
@@ -847,6 +831,79 @@ bun run build # O bun run dev
847
831
 
848
832
  ---
849
833
 
834
+ ### Paso 16: Generar un Sitemap (Opcional)
835
+
836
+ Intlayer viene con un generador de sitemap integrado para ayudarte a crear fácilmente un sitemap para tu aplicación. Maneja las rutas localizadas y agrega los metadatos necesarios para los motores de búsqueda.
837
+
838
+ > El sitemap generado por Intlayer admite el espacio de nombres `xhtml:link` (Hreflang XML Extensions). A diferencia de los generadores de sitemap predeterminados que solo enumeran URL sin procesar, Intlayer crea automáticamente los enlaces bidireccionales necesarios entre todas las versiones de idioma de una página (por ejemplo, `/about`, `/about?lang=fr` y `/about?lang=es`). Esto garantiza que los motores de búsqueda indexen y sirvan correctamente la versión de idioma adecuada a la audiencia adecuada.
839
+
840
+ Para usarlo, primero debes configurar tu archivo `vite.config.ts` para habilitar el prerrenderizado de tus rutas localizadas y deshabilitar la generación de sitemap predeterminada de TanStack Start.
841
+
842
+ ```typescript fileName="vite.config.ts"
843
+ import { localeMap, localeFlatMap } from "intlayer";
844
+ // ... otras importaciones
845
+
846
+ export const pathList = ["", "/about", "/404"];
847
+
848
+ const localizedPages = localeFlatMap(({ urlPrefix }) =>
849
+ pathList.map((path) => ({
850
+ path: `${urlPrefix}${path}`,
851
+ prerender: {
852
+ enabled: true,
853
+ },
854
+ }))
855
+ );
856
+
857
+ export default defineConfig({
858
+ plugins: [
859
+ // ... otros plugins
860
+ tanstackStart({
861
+ // ... otras configuraciones
862
+ sitemap: {
863
+ enabled: false,
864
+ },
865
+ prerender: {
866
+ enabled: true,
867
+ crawlLinks: false,
868
+ concurrency: 10,
869
+ },
870
+ pages: localizedPages,
871
+ }),
872
+ ],
873
+ });
874
+ ```
875
+
876
+ Luego, crea una ruta `src/routes/sitemap[.]xml.ts` que use la función `generateSitemap`:
877
+
878
+ ```typescript fileName="src/routes/sitemap[.]xml.ts"
879
+ import { createFileRoute } from "@tanstack/solid-router";
880
+ import { generateSitemap } from "intlayer";
881
+
882
+ const SITE_URL = "http://localhost:3000";
883
+
884
+ export const Route = createFileRoute("/sitemap.xml")({
885
+ server: {
886
+ handlers: {
887
+ GET: async () => {
888
+ const sitemap = generateSitemap(
889
+ [
890
+ { path: "/", changefreq: "daily", priority: 1.0 },
891
+ { path: "/about", changefreq: "monthly", priority: 0.8 },
892
+ ],
893
+ { siteUrl: SITE_URL }
894
+ );
895
+
896
+ return new Response(sitemap, {
897
+ headers: { "Content-Type": "application/xml" },
898
+ });
899
+ },
900
+ },
901
+ },
902
+ });
903
+ ```
904
+
905
+ ---
906
+
850
907
  ### Paso 17: Configurar TypeScript (Opcional)
851
908
 
852
909
  Intlayer utiliza el aumento de módulos para aprovechar las ventajas de TypeScript y hacer que su base de código sea más robusta.
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  createdAt: 2025-09-09
3
- updatedAt: 2026-03-12
3
+ updatedAt: 2026-03-29
4
4
  title: Tanstack Start i18n - Cómo traducir una aplicación Tanstack Start en 2026
5
5
  description: Aprende a añadir la internacionalización (i18n) a tu aplicación Tanstack Start utilizando Intlayer. Sigue esta guía completa para hacer que tu aplicación sea multilingüe con enrutamiento consciente de la configuración regional.
6
6
  keywords:
@@ -12,6 +12,7 @@ keywords:
12
12
  - i18n
13
13
  - TypeScript
14
14
  - Enrutamiento por configuración regional
15
+ - Sitemap
15
16
  slugs:
16
17
  - doc
17
18
  - environment
@@ -160,14 +161,10 @@ import viteReact from "@vitejs/plugin-react";
160
161
  import { nitro } from "nitro/vite";
161
162
  import { defineConfig } from "vite";
162
163
  import { intlayer } from "vite-intlayer";
163
- import viteTsConfigPaths from "vite-tsconfig-paths";
164
164
 
165
165
  const config = defineConfig({
166
166
  plugins: [
167
167
  nitro(),
168
- viteTsConfigPaths({
169
- projects: ["./tsconfig.json"],
170
- }),
171
168
  intlayer(),
172
169
  tanstackStart({
173
170
  router: {
@@ -593,15 +590,11 @@ import viteReact from "@vitejs/plugin-react";
593
590
  import { nitro } from "nitro/vite";
594
591
  import { defineConfig } from "vite";
595
592
  import { intlayer, intlayerProxy } from "vite-intlayer";
596
- import viteTsConfigPaths from "vite-tsconfig-paths";
597
593
 
598
594
  export default defineConfig({
599
595
  plugins: [
600
596
  intlayerProxy(), // El proxy debe colocarse antes que el servidor si utilizas Nitro
601
597
  nitro(),
602
- viteTsConfigPaths({
603
- projects: ["./tsconfig.json"],
604
- }),
605
598
  intlayer(),
606
599
  tanstackStart({
607
600
  router: {
@@ -755,25 +748,7 @@ export const Route = createFileRoute("/{-$locale}/$")({
755
748
 
756
749
  ---
757
750
 
758
- ### Paso 15: Configurar TypeScript (Opcional)
759
-
760
- Intlayer utiliza la ampliación de módulos para obtener los beneficios de TypeScript y fortalecer tu base de código.
761
-
762
- Asegúrate de que tu configuración de TypeScript incluya los tipos autogenerados:
763
-
764
- ```json5 fileName="tsconfig.json"
765
- {
766
- // ... tus configuraciones existentes
767
- include: [
768
- // ... tus inclusiones existentes
769
- ".intlayer/**/*.ts", // Incluir los tipos autogenerados
770
- ],
771
- }
772
- ```
773
-
774
- ---
775
-
776
- ### (Opcional) Paso 16 : Extraer el contenido de tus componentes
751
+ ### (Opcional) Paso 15 : Extraer el contenido de tus componentes
777
752
 
778
753
  Si tienes una base de código existente, transformar miles de archivos puede llevar mucho tiempo.
779
754
 
@@ -931,6 +906,99 @@ bun run build # Or bun run dev
931
906
 
932
907
  ---
933
908
 
909
+ ### Paso 16: Generar un Sitemap (Opcional)
910
+
911
+ Intlayer viene con un generador de sitemap integrado para ayudarte a crear fácilmente un sitemap para tu aplicación. Maneja las rutas localizadas y agrega los metadatos necesarios para los motores de búsqueda.
912
+
913
+ > El sitemap generado por Intlayer admite el espacio de nombres `xhtml:link` (Hreflang XML Extensions). A diferencia de los generadores de sitemap predeterminados que solo enumeran URL sin procesar, Intlayer crea automáticamente los enlaces bidireccionales necesarios entre todas las versiones de idioma de una página (por ejemplo, `/about`, `/about?lang=fr` y `/about?lang=es`). Esto garantiza que los motores de búsqueda indexen y sirvan correctamente la versión de idioma adecuada a la audiencia adecuada.
914
+
915
+ Para usarlo, primero debes configurar tu archivo `vite.config.ts` para habilitar el prerrenderizado de tus rutas localizadas y deshabilitar la generación de sitemap predeterminada de TanStack Start.
916
+
917
+ ```typescript fileName="vite.config.ts"
918
+ import { localeFlatMap } from "intlayer";
919
+ // ... otras importaciones
920
+
921
+ export const pathList = ["", "/about", "/404"];
922
+
923
+ const localizedPages = localeFlatMap(({ urlPrefix }) =>
924
+ pathList.map((path) => ({
925
+ path: `${urlPrefix}${path}`,
926
+ prerender: {
927
+ enabled: true,
928
+ },
929
+ }))
930
+ );
931
+
932
+ export default defineConfig({
933
+ plugins: [
934
+ // ... otros plugins
935
+ tanstackStart({
936
+ // ... otras configuraciones
937
+ sitemap: {
938
+ enabled: false,
939
+ },
940
+ prerender: {
941
+ enabled: true,
942
+ crawlLinks: false,
943
+ concurrency: 10,
944
+ },
945
+ pages: localizedPages,
946
+ }),
947
+ ],
948
+ });
949
+ ```
950
+
951
+ Luego, crea una ruta `src/routes/sitemap[.]xml.ts` que use la función `generateSitemap`:
952
+
953
+ ```typescript fileName="src/routes/sitemap[.]xml.ts"
954
+ import { createFileRoute } from "@tanstack/react-router";
955
+ import { generateSitemap } from "intlayer";
956
+
957
+ const SITE_URL = (
958
+ import.meta.env.VITE_SITE_URL ?? "http://localhost:3000"
959
+ ).replace(/\/$/, "");
960
+
961
+ export const Route = createFileRoute("/sitemap.xml")({
962
+ server: {
963
+ handlers: {
964
+ GET: async () => {
965
+ const sitemap = generateSitemap(
966
+ [
967
+ { path: "/", changefreq: "daily", priority: 1.0 },
968
+ { path: "/about", changefreq: "monthly", priority: 0.8 },
969
+ ],
970
+ { siteUrl: SITE_URL }
971
+ );
972
+
973
+ return new Response(sitemap, {
974
+ headers: { "Content-Type": "application/xml" },
975
+ });
976
+ },
977
+ },
978
+ },
979
+ });
980
+ ```
981
+
982
+ ---
983
+
984
+ ### Paso 17: Configurar TypeScript (Opcional)
985
+
986
+ Intlayer utiliza la ampliación de módulos para obtener los beneficios de TypeScript y fortalecer tu base de código.
987
+
988
+ Asegúrate de que tu configuración de TypeScript incluya los tipos autogenerados:
989
+
990
+ ```json5 fileName="tsconfig.json"
991
+ {
992
+ // ... tus configuraciones existentes
993
+ include: [
994
+ // ... tus inclusiones existentes
995
+ ".intlayer/**/*.ts", // Incluir los tipos autogenerados
996
+ ],
997
+ }
998
+ ```
999
+
1000
+ ---
1001
+
934
1002
  ### Configuración de Git
935
1003
 
936
1004
  Se recomienda ignorar los archivos generados por Intlayer. Esto te permite evitar confirmarlos en tu repositorio de Git.
@@ -409,7 +409,6 @@ export class MyElement extends LitElement {
409
409
  }
410
410
  ```
411
411
 
412
- > [!NOTE]
413
412
  > Cuando necesites la cadena traducida en un atributo HTML nativo (por ejemplo, `alt`, `aria-label`, `title`), llama a `.value` en el nodo hoja:
414
413
  >
415
414
  > ```typescript
@@ -315,7 +315,6 @@ const App: Component = () => (
315
315
  export default App;
316
316
  ```
317
317
 
318
- > [!NOTE]
319
318
  > En Solid, `useIntlayer` devuelve una función **accessor** (por ejemplo, `content()`). Debes llamar a esta función para acceder al contenido reactivo.
320
319
 
321
320
  > Si quieres usar tu contenido en un atributo `string`, como `alt`, `title`, `href`, `aria-label`, etc., debes llamar al valor de la función, como:
@@ -232,7 +232,7 @@ module.exports = appContent;
232
232
  <!-- Renderizar contenido como contenido simple -->
233
233
  <h1>{$content.title}</h1>
234
234
  <!-- Para renderizar el contenido editable usando el editor -->
235
- <h1><svelte:component this={$content.title} /></h1>
235
+ <h1>{@const Title = $content.title}<Title /></h1>
236
236
  <!-- Para renderizar el contenido como una cadena -->
237
237
  <div aria-label={$content.title.value}></div>
238
238
  ```
@@ -175,10 +175,9 @@ Ajoutez le plugin intlayer dans votre configuration :
175
175
  import { reactRouter } from "@react-router/dev/vite";
176
176
  import { defineConfig } from "vite";
177
177
  import { intlayer } from "vite-intlayer";
178
- import tsconfigPaths from "vite-tsconfig-paths";
179
178
 
180
179
  export default defineConfig({
181
- plugins: [reactRouter(), tsconfigPaths(), intlayer()],
180
+ plugins: [reactRouter(), intlayer()],
182
181
  });
183
182
  ```
184
183
 
@@ -743,13 +742,12 @@ Vous pouvez également utiliser le `intlayerProxy` pour ajouter un routage côt
743
742
  import { reactRouter } from "@react-router/dev/vite";
744
743
  import { defineConfig } from "vite";
745
744
  import { intlayer, intlayerProxy } from "vite-intlayer";
746
- import tsconfigPaths from "vite-tsconfig-paths";
747
745
 
748
746
  export default defineConfig({
749
747
  plugins: [
750
748
  intlayerProxy(), // should be placed first
751
749
  reactRouter(),
752
- tsconfigPaths(),
750
+
753
751
  intlayer(),
754
752
  ],
755
753
  });
@@ -170,10 +170,9 @@ Ajoutez le plugin intlayer dans votre configuration :
170
170
  import { reactRouter } from "@react-router/dev/vite";
171
171
  import { defineConfig } from "vite";
172
172
  import { intlayer } from "vite-intlayer";
173
- import tsconfigPaths from "vite-tsconfig-paths";
174
173
 
175
174
  export default defineConfig({
176
- plugins: [reactRouter(), tsconfigPaths(), intlayer()],
175
+ plugins: [reactRouter(), intlayer()],
177
176
  });
178
177
  ```
179
178
 
@@ -817,13 +816,12 @@ Vous pouvez également utiliser le `intlayerProxy` pour ajouter un routage côt
817
816
  import { reactRouter } from "@react-router/dev/vite";
818
817
  import { defineConfig } from "vite";
819
818
  import { intlayer, intlayerProxy } from "vite-intlayer";
820
- import tsconfigPaths from "vite-tsconfig-paths";
821
819
 
822
820
  export default defineConfig({
823
821
  plugins: [
824
822
  intlayerProxy(), // should be placed first
825
823
  reactRouter(),
826
- tsconfigPaths(),
824
+
827
825
  intlayer(),
828
826
  ],
829
827
  });