@intlayer/docs 6.1.6-canary.0 → 6.1.6

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 (242) hide show
  1. package/blog/en/next-i18next_vs_next-intl_vs_intlayer.md +71 -80
  2. package/dist/cjs/generated/docs.entry.cjs +16 -0
  3. package/dist/cjs/generated/docs.entry.cjs.map +1 -1
  4. package/dist/esm/generated/docs.entry.mjs +16 -0
  5. package/dist/esm/generated/docs.entry.mjs.map +1 -1
  6. package/dist/types/generated/docs.entry.d.ts +1 -0
  7. package/dist/types/generated/docs.entry.d.ts.map +1 -1
  8. package/docs/ar/intlayer_with_angular.md +2 -2
  9. package/docs/ar/intlayer_with_astro.md +246 -0
  10. package/docs/ar/intlayer_with_create_react_app.md +3 -2
  11. package/docs/ar/intlayer_with_express.md +2 -2
  12. package/docs/ar/intlayer_with_nestjs.md +2 -2
  13. package/docs/ar/intlayer_with_nextjs_14.md +2 -2
  14. package/docs/ar/intlayer_with_nextjs_15.md +2 -2
  15. package/docs/ar/intlayer_with_nextjs_page_router.md +2 -2
  16. package/docs/ar/intlayer_with_nuxt.md +2 -2
  17. package/docs/ar/intlayer_with_react_native+expo.md +11 -20
  18. package/docs/ar/intlayer_with_react_router_v7.md +195 -241
  19. package/docs/ar/intlayer_with_tanstack.md +198 -272
  20. package/docs/ar/intlayer_with_vite+preact.md +9 -9
  21. package/docs/ar/intlayer_with_vite+react.md +7 -7
  22. package/docs/ar/intlayer_with_vite+vue.md +9 -9
  23. package/docs/de/intlayer_with_angular.md +2 -2
  24. package/docs/de/intlayer_with_astro.md +246 -0
  25. package/docs/de/intlayer_with_create_react_app.md +2 -2
  26. package/docs/de/intlayer_with_express.md +2 -2
  27. package/docs/de/intlayer_with_nestjs.md +2 -2
  28. package/docs/de/intlayer_with_nextjs_14.md +2 -2
  29. package/docs/de/intlayer_with_nextjs_15.md +2 -2
  30. package/docs/de/intlayer_with_nextjs_page_router.md +2 -2
  31. package/docs/de/intlayer_with_nuxt.md +2 -2
  32. package/docs/de/intlayer_with_react_native+expo.md +11 -20
  33. package/docs/de/intlayer_with_react_router_v7.md +193 -242
  34. package/docs/de/intlayer_with_tanstack.md +194 -266
  35. package/docs/de/intlayer_with_vite+preact.md +9 -9
  36. package/docs/de/intlayer_with_vite+react.md +9 -9
  37. package/docs/de/intlayer_with_vite+vue.md +11 -11
  38. package/docs/de/packages/vite-intlayer/index.md +3 -3
  39. package/docs/en/how_works_intlayer.md +1 -1
  40. package/docs/en/index.md +1 -1
  41. package/docs/en/intlayer_cli.md +1 -1
  42. package/docs/en/intlayer_with_angular.md +4 -4
  43. package/docs/en/intlayer_with_astro.md +246 -0
  44. package/docs/en/intlayer_with_create_react_app.md +4 -4
  45. package/docs/en/intlayer_with_express.md +3 -3
  46. package/docs/en/intlayer_with_lynx+react.md +1 -1
  47. package/docs/en/intlayer_with_nestjs.md +2 -2
  48. package/docs/en/intlayer_with_nextjs_14.md +13 -4
  49. package/docs/en/intlayer_with_nextjs_15.md +13 -4
  50. package/docs/en/intlayer_with_nextjs_page_router.md +5 -5
  51. package/docs/en/intlayer_with_nuxt.md +4 -4
  52. package/docs/en/intlayer_with_react_native+expo.md +46 -24
  53. package/docs/en/intlayer_with_react_router_v7.md +164 -211
  54. package/docs/en/intlayer_with_tanstack.md +166 -241
  55. package/docs/en/intlayer_with_vite+preact.md +12 -12
  56. package/docs/en/intlayer_with_vite+react.md +12 -12
  57. package/docs/en/intlayer_with_vite+solid.md +2 -2
  58. package/docs/en/intlayer_with_vite+svelte.md +2 -2
  59. package/docs/en/intlayer_with_vite+vue.md +12 -12
  60. package/docs/en/introduction.md +1 -1
  61. package/docs/en/packages/next-intlayer/useDictionary.md +1 -1
  62. package/docs/en/packages/next-intlayer/useIntlayer.md +1 -1
  63. package/docs/en/packages/react-intlayer/useDictionary.md +1 -1
  64. package/docs/en/packages/react-intlayer/useI18n.md +1 -1
  65. package/docs/en/packages/react-intlayer/useIntlayer.md +1 -1
  66. package/docs/en/releases/v6.md +1 -0
  67. package/docs/en/roadmap.md +1 -1
  68. package/docs/en-GB/intlayer_with_angular.md +3 -3
  69. package/docs/en-GB/intlayer_with_astro.md +246 -0
  70. package/docs/en-GB/intlayer_with_create_react_app.md +5 -4
  71. package/docs/en-GB/intlayer_with_express.md +2 -2
  72. package/docs/en-GB/intlayer_with_nestjs.md +2 -2
  73. package/docs/en-GB/intlayer_with_nextjs_14.md +4 -4
  74. package/docs/en-GB/intlayer_with_nextjs_15.md +2 -2
  75. package/docs/en-GB/intlayer_with_nextjs_page_router.md +2 -2
  76. package/docs/en-GB/intlayer_with_nuxt.md +2 -2
  77. package/docs/en-GB/intlayer_with_react_native+expo.md +11 -20
  78. package/docs/en-GB/intlayer_with_react_router_v7.md +171 -220
  79. package/docs/en-GB/intlayer_with_tanstack.md +174 -248
  80. package/docs/en-GB/intlayer_with_vite+preact.md +9 -9
  81. package/docs/en-GB/intlayer_with_vite+react.md +9 -9
  82. package/docs/en-GB/intlayer_with_vite+vue.md +11 -11
  83. package/docs/en-GB/packages/next-intlayer/useIntlayer.md +1 -1
  84. package/docs/en-GB/packages/react-intlayer/useIntlayer.md +1 -1
  85. package/docs/es/intlayer_with_angular.md +2 -2
  86. package/docs/es/intlayer_with_astro.md +246 -0
  87. package/docs/es/intlayer_with_create_react_app.md +3 -2
  88. package/docs/es/intlayer_with_express.md +2 -2
  89. package/docs/es/intlayer_with_nextjs_14.md +2 -2
  90. package/docs/es/intlayer_with_nextjs_15.md +2 -2
  91. package/docs/es/intlayer_with_react_native+expo.md +11 -20
  92. package/docs/es/intlayer_with_react_router_v7.md +188 -232
  93. package/docs/es/intlayer_with_tanstack.md +203 -273
  94. package/docs/es/intlayer_with_vite+preact.md +7 -7
  95. package/docs/es/intlayer_with_vite+react.md +7 -7
  96. package/docs/es/intlayer_with_vite+vue.md +9 -9
  97. package/docs/fr/intlayer_with_angular.md +2 -2
  98. package/docs/fr/intlayer_with_astro.md +246 -0
  99. package/docs/fr/intlayer_with_create_react_app.md +3 -2
  100. package/docs/fr/intlayer_with_express.md +2 -2
  101. package/docs/fr/intlayer_with_nestjs.md +2 -2
  102. package/docs/fr/intlayer_with_nextjs_14.md +2 -2
  103. package/docs/fr/intlayer_with_react_native+expo.md +11 -20
  104. package/docs/fr/intlayer_with_react_router_v7.md +188 -248
  105. package/docs/fr/intlayer_with_tanstack.md +192 -265
  106. package/docs/fr/intlayer_with_vite+preact.md +7 -7
  107. package/docs/fr/intlayer_with_vite+react.md +7 -7
  108. package/docs/fr/intlayer_with_vite+vue.md +9 -9
  109. package/docs/hi/intlayer_cli.md +1 -4
  110. package/docs/hi/intlayer_with_angular.md +2 -2
  111. package/docs/hi/intlayer_with_astro.md +246 -0
  112. package/docs/hi/intlayer_with_create_react_app.md +2 -2
  113. package/docs/hi/intlayer_with_express.md +2 -2
  114. package/docs/hi/intlayer_with_nestjs.md +2 -2
  115. package/docs/hi/intlayer_with_nextjs_14.md +2 -2
  116. package/docs/hi/intlayer_with_nextjs_15.md +2 -2
  117. package/docs/hi/intlayer_with_nextjs_page_router.md +2 -2
  118. package/docs/hi/intlayer_with_nuxt.md +2 -2
  119. package/docs/hi/intlayer_with_react_native+expo.md +11 -20
  120. package/docs/hi/intlayer_with_react_router_v7.md +199 -243
  121. package/docs/hi/intlayer_with_tanstack.md +210 -285
  122. package/docs/hi/intlayer_with_vite+preact.md +9 -9
  123. package/docs/hi/intlayer_with_vite+react.md +9 -9
  124. package/docs/hi/intlayer_with_vite+solid.md +1 -1
  125. package/docs/hi/intlayer_with_vite+vue.md +11 -11
  126. package/docs/it/intlayer_with_angular.md +2 -2
  127. package/docs/it/intlayer_with_astro.md +246 -0
  128. package/docs/it/intlayer_with_create_react_app.md +3 -2
  129. package/docs/it/intlayer_with_express.md +2 -2
  130. package/docs/it/intlayer_with_nestjs.md +2 -2
  131. package/docs/it/intlayer_with_nextjs_14.md +2 -2
  132. package/docs/it/intlayer_with_nextjs_15.md +2 -2
  133. package/docs/it/intlayer_with_nextjs_page_router.md +2 -2
  134. package/docs/it/intlayer_with_nuxt.md +2 -2
  135. package/docs/it/intlayer_with_react_native+expo.md +11 -21
  136. package/docs/it/intlayer_with_react_router_v7.md +195 -242
  137. package/docs/it/intlayer_with_tanstack.md +203 -267
  138. package/docs/it/intlayer_with_vite+preact.md +9 -9
  139. package/docs/it/intlayer_with_vite+react.md +13 -11
  140. package/docs/it/intlayer_with_vite+vue.md +11 -11
  141. package/docs/ja/intlayer_with_angular.md +2 -2
  142. package/docs/ja/intlayer_with_astro.md +246 -0
  143. package/docs/ja/intlayer_with_create_react_app.md +3 -2
  144. package/docs/ja/intlayer_with_express.md +2 -2
  145. package/docs/ja/intlayer_with_nestjs.md +2 -2
  146. package/docs/ja/intlayer_with_nextjs_14.md +2 -2
  147. package/docs/ja/intlayer_with_nextjs_15.md +2 -2
  148. package/docs/ja/intlayer_with_nextjs_page_router.md +2 -2
  149. package/docs/ja/intlayer_with_nuxt.md +2 -2
  150. package/docs/ja/intlayer_with_react_native+expo.md +18 -29
  151. package/docs/ja/intlayer_with_react_router_v7.md +204 -250
  152. package/docs/ja/intlayer_with_tanstack.md +218 -286
  153. package/docs/ja/intlayer_with_vite+preact.md +9 -9
  154. package/docs/ja/intlayer_with_vite+react.md +11 -11
  155. package/docs/ja/intlayer_with_vite+vue.md +11 -11
  156. package/docs/ko/intlayer_with_angular.md +2 -2
  157. package/docs/ko/intlayer_with_astro.md +246 -0
  158. package/docs/ko/intlayer_with_create_react_app.md +3 -2
  159. package/docs/ko/intlayer_with_express.md +2 -2
  160. package/docs/ko/intlayer_with_nestjs.md +2 -2
  161. package/docs/ko/intlayer_with_nextjs_14.md +2 -2
  162. package/docs/ko/intlayer_with_nextjs_15.md +2 -2
  163. package/docs/ko/intlayer_with_nextjs_page_router.md +2 -2
  164. package/docs/ko/intlayer_with_nuxt.md +2 -2
  165. package/docs/ko/intlayer_with_react_native+expo.md +19 -28
  166. package/docs/ko/intlayer_with_react_router_v7.md +190 -244
  167. package/docs/ko/intlayer_with_tanstack.md +200 -270
  168. package/docs/ko/intlayer_with_vite+preact.md +9 -9
  169. package/docs/ko/intlayer_with_vite+react.md +9 -9
  170. package/docs/ko/intlayer_with_vite+vue.md +11 -11
  171. package/docs/pt/intlayer_with_angular.md +2 -2
  172. package/docs/pt/intlayer_with_astro.md +246 -0
  173. package/docs/pt/intlayer_with_create_react_app.md +3 -2
  174. package/docs/pt/intlayer_with_express.md +2 -2
  175. package/docs/pt/intlayer_with_nestjs.md +2 -2
  176. package/docs/pt/intlayer_with_nextjs_14.md +2 -2
  177. package/docs/pt/intlayer_with_nextjs_15.md +2 -2
  178. package/docs/pt/intlayer_with_nextjs_page_router.md +2 -2
  179. package/docs/pt/intlayer_with_nuxt.md +2 -2
  180. package/docs/pt/intlayer_with_react_native+expo.md +11 -20
  181. package/docs/pt/intlayer_with_react_router_v7.md +7 -13
  182. package/docs/pt/intlayer_with_tanstack.md +183 -258
  183. package/docs/pt/intlayer_with_vite+preact.md +9 -9
  184. package/docs/pt/intlayer_with_vite+react.md +9 -9
  185. package/docs/pt/intlayer_with_vite+vue.md +9 -9
  186. package/docs/ru/intlayer_with_angular.md +2 -2
  187. package/docs/ru/intlayer_with_astro.md +246 -0
  188. package/docs/ru/intlayer_with_create_react_app.md +3 -2
  189. package/docs/ru/intlayer_with_express.md +2 -2
  190. package/docs/ru/intlayer_with_nestjs.md +2 -2
  191. package/docs/ru/intlayer_with_nextjs_14.md +2 -2
  192. package/docs/ru/intlayer_with_nextjs_15.md +2 -2
  193. package/docs/ru/intlayer_with_nextjs_page_router.md +2 -2
  194. package/docs/ru/intlayer_with_nuxt.md +2 -2
  195. package/docs/ru/intlayer_with_react_native+expo.md +11 -20
  196. package/docs/ru/intlayer_with_react_router_v7.md +192 -238
  197. package/docs/ru/intlayer_with_tanstack.md +197 -269
  198. package/docs/ru/intlayer_with_vite+preact.md +9 -9
  199. package/docs/ru/intlayer_with_vite+react.md +9 -9
  200. package/docs/ru/intlayer_with_vite+vue.md +11 -11
  201. package/docs/tr/how_works_intlayer.md +1 -1
  202. package/docs/tr/index.md +1 -1
  203. package/docs/tr/intlayer_cli.md +1 -1
  204. package/docs/tr/intlayer_with_angular.md +4 -4
  205. package/docs/tr/intlayer_with_astro.md +246 -0
  206. package/docs/tr/intlayer_with_create_react_app.md +4 -4
  207. package/docs/tr/intlayer_with_express.md +3 -3
  208. package/docs/tr/intlayer_with_lynx+react.md +1 -1
  209. package/docs/tr/intlayer_with_nestjs.md +2 -2
  210. package/docs/tr/intlayer_with_nextjs_14.md +2 -2
  211. package/docs/tr/intlayer_with_nextjs_15.md +4 -4
  212. package/docs/tr/intlayer_with_nextjs_page_router.md +5 -5
  213. package/docs/tr/intlayer_with_nuxt.md +4 -4
  214. package/docs/tr/intlayer_with_react_native+expo.md +12 -21
  215. package/docs/tr/intlayer_with_react_router_v7.md +222 -267
  216. package/docs/tr/intlayer_with_tanstack.md +400 -303
  217. package/docs/tr/intlayer_with_vite+preact.md +12 -12
  218. package/docs/tr/intlayer_with_vite+react.md +12 -12
  219. package/docs/tr/intlayer_with_vite+solid.md +2 -2
  220. package/docs/tr/intlayer_with_vite+svelte.md +2 -2
  221. package/docs/tr/intlayer_with_vite+vue.md +12 -12
  222. package/docs/tr/introduction.md +1 -1
  223. package/docs/tr/packages/react-intlayer/useDictionary.md +1 -1
  224. package/docs/tr/packages/react-intlayer/useI18n.md +1 -1
  225. package/docs/tr/roadmap.md +1 -1
  226. package/docs/zh/intlayer_with_angular.md +2 -2
  227. package/docs/zh/intlayer_with_astro.md +246 -0
  228. package/docs/zh/intlayer_with_create_react_app.md +3 -2
  229. package/docs/zh/intlayer_with_express.md +2 -2
  230. package/docs/zh/intlayer_with_nestjs.md +2 -2
  231. package/docs/zh/intlayer_with_nextjs_14.md +2 -2
  232. package/docs/zh/intlayer_with_nextjs_15.md +2 -2
  233. package/docs/zh/intlayer_with_nextjs_page_router.md +2 -2
  234. package/docs/zh/intlayer_with_nuxt.md +2 -2
  235. package/docs/zh/intlayer_with_react_native+expo.md +19 -28
  236. package/docs/zh/intlayer_with_react_router_v7.md +200 -248
  237. package/docs/zh/intlayer_with_tanstack.md +208 -283
  238. package/docs/zh/intlayer_with_vite+preact.md +9 -9
  239. package/docs/zh/intlayer_with_vite+react.md +9 -9
  240. package/docs/zh/intlayer_with_vite+vue.md +9 -9
  241. package/package.json +11 -11
  242. package/src/generated/docs.entry.ts +16 -0
@@ -1054,38 +1054,38 @@ const App = () => (
1054
1054
  module.exports = App;
1055
1055
  ```
1056
1056
 
1057
- بالتوازي، يمكنك أيضًا استخدام `intlayerMiddlewarePlugin` لإضافة التوجيه من جانب الخادم إلى تطبيقك. سيقوم هذا المكون الإضافي تلقائيًا بالكشف عن اللغة الحالية بناءً على عنوان URL وتعيين ملف تعريف الارتباط المناسب للغة. إذا لم يتم تحديد لغة، سيحدد المكون الإضافي اللغة الأنسب بناءً على تفضيلات لغة متصفح المستخدم. إذا لم يتم الكشف عن أي لغة، فسيتم إعادة التوجيه إلى اللغة الافتراضية.
1057
+ بالتوازي، يمكنك أيضًا استخدام `intlayerMiddleware` لإضافة التوجيه من جانب الخادم إلى تطبيقك. سيقوم هذا المكون الإضافي تلقائيًا بالكشف عن اللغة الحالية بناءً على عنوان URL وتعيين ملف تعريف الارتباط المناسب للغة. إذا لم يتم تحديد لغة، سيحدد المكون الإضافي اللغة الأنسب بناءً على تفضيلات لغة متصفح المستخدم. إذا لم يتم الكشف عن أي لغة، فسيتم إعادة التوجيه إلى اللغة الافتراضية.
1058
1058
 
1059
1059
  ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
1060
1060
  import { defineConfig } from "vite";
1061
1061
  import preact from "@preact/preset-vite";
1062
- import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
1062
+ import { intlayer, intlayerMiddleware } from "vite-intlayer";
1063
1063
 
1064
1064
  // https://vitejs.dev/config/
1065
1065
  export default defineConfig({
1066
- plugins: [preact(), intlayer(), intlayerMiddlewarePlugin()],
1066
+ plugins: [preact(), intlayer(), intlayerMiddleware()],
1067
1067
  });
1068
1068
  ```
1069
1069
 
1070
1070
  ```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
1071
1071
  import { defineConfig } from "vite";
1072
1072
  import preact from "@preact/preset-vite";
1073
- import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
1073
+ import { intlayer, intlayerMiddleware } from "vite-intlayer";
1074
1074
 
1075
1075
  // https://vitejs.dev/config/
1076
1076
  export default defineConfig({
1077
- plugins: [preact(), intlayer(), intlayerMiddlewarePlugin()],
1077
+ plugins: [preact(), intlayer(), intlayerMiddleware()],
1078
1078
  });
1079
1079
  ```
1080
1080
 
1081
1081
  ```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
1082
1082
  const { defineConfig } = require("vite");
1083
1083
  const preact = require("@preact/preset-vite");
1084
- const { intlayer, intlayerMiddlewarePlugin } = require("vite-intlayer");
1084
+ const { intlayer, intlayerMiddleware } = require("vite-intlayer");
1085
1085
 
1086
1086
  // https://vitejs.dev/config/
1087
1087
  module.exports = defineConfig({
1088
- plugins: [preact(), intlayer(), intlayerMiddlewarePlugin()],
1088
+ plugins: [preact(), intlayer(), intlayerMiddleware()],
1089
1089
  });
1090
1090
  ```
1091
1091
 
@@ -1629,9 +1629,9 @@ module.exports = { LocalizedLink, checkIsExternalLink };
1629
1629
 
1630
1630
  يستخدم Intlayer توسيع الوحدات (module augmentation) للاستفادة من TypeScript وجعل قاعدة الشيفرة الخاصة بك أقوى.
1631
1631
 
1632
- ![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
1632
+ ![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
1633
1633
 
1634
- ![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
1634
+ ![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
1635
1635
 
1636
1636
  تأكد من أن تكوين TypeScript الخاص بك يتضمن الأنواع التي تم إنشاؤها تلقائيًا.
1637
1637
 
@@ -1009,38 +1009,38 @@ const App = () => (
1009
1009
  );
1010
1010
  ```
1011
1011
 
1012
- بالتوازي، يمكنك أيضًا استخدام `intlayerMiddlewarePlugin` لإضافة التوجيه من جانب الخادم إلى تطبيقك. سيقوم هذا المكون الإضافي بالكشف تلقائيًا عن اللغة الحالية بناءً على عنوان URL وتعيين ملف تعريف الارتباط المناسب للغة. إذا لم يتم تحديد لغة، فسيحدد المكون الإضافي اللغة الأنسب بناءً على تفضيلات لغة متصفح المستخدم. إذا لم يتم الكشف عن أي لغة، فسيتم إعادة التوجيه إلى اللغة الافتراضية.
1012
+ بالتوازي، يمكنك أيضًا استخدام `intlayerMiddleware` لإضافة التوجيه من جانب الخادم إلى تطبيقك. سيقوم هذا المكون الإضافي بالكشف تلقائيًا عن اللغة الحالية بناءً على عنوان URL وتعيين ملف تعريف الارتباط المناسب للغة. إذا لم يتم تحديد لغة، فسيحدد المكون الإضافي اللغة الأنسب بناءً على تفضيلات لغة متصفح المستخدم. إذا لم يتم الكشف عن أي لغة، فسيتم إعادة التوجيه إلى اللغة الافتراضية.
1013
1013
 
1014
1014
  ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
1015
1015
  import { defineConfig } from "vite";
1016
1016
  import react from "@vitejs/plugin-react-swc";
1017
- import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
1017
+ import { intlayer, intlayerMiddleware } from "vite-intlayer";
1018
1018
 
1019
1019
  // https://vitejs.dev/config/
1020
1020
  export default defineConfig({
1021
- plugins: [react(), intlayer(), intlayerMiddlewarePlugin()],
1021
+ plugins: [react(), intlayer(), intlayerMiddleware()],
1022
1022
  });
1023
1023
  ```
1024
1024
 
1025
1025
  ```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
1026
1026
  import { defineConfig } from "vite";
1027
1027
  import react from "@vitejs/plugin-react-swc";
1028
- import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
1028
+ import { intlayer, intlayerMiddleware } from "vite-intlayer";
1029
1029
 
1030
1030
  // https://vitejs.dev/config/
1031
1031
  export default defineConfig({
1032
- plugins: [react(), intlayer(), intlayerMiddlewarePlugin()],
1032
+ plugins: [react(), intlayer(), intlayerMiddleware()],
1033
1033
  });
1034
1034
  ```
1035
1035
 
1036
1036
  ```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
1037
1037
  const { defineConfig } = require("vite");
1038
1038
  const react = require("@vitejs/plugin-react-swc");
1039
- const { intlayer, intlayerMiddlewarePlugin } = require("vite-intlayer");
1039
+ const { intlayer, intlayerMiddleware } = require("vite-intlayer");
1040
1040
 
1041
1041
  // https://vitejs.dev/config/
1042
1042
  module.exports = defineConfig({
1043
- plugins: [react(), intlayer(), intlayerMiddlewarePlugin()],
1043
+ plugins: [react(), intlayer(), intlayerMiddleware()],
1044
1044
  });
1045
1045
  ```
1046
1046
 
@@ -653,46 +653,46 @@ import LocaleSwitcher from "@components/LocaleSwitcher.vue";
653
653
  </template>
654
654
  ```
655
655
 
656
- بالتوازي، يمكنك أيضًا استخدام `intlayerMiddlewarePlugin` لإضافة التوجيه من جانب الخادم إلى تطبيقك. سيقوم هذا المكون الإضافي بالكشف تلقائيًا عن اللغة الحالية بناءً على عنوان URL وتعيين ملف تعريف الارتباط المناسب للغة. إذا لم يتم تحديد لغة، سيحدد المكون الإضافي اللغة الأنسب بناءً على تفضيلات لغة متصفح المستخدم. إذا لم يتم الكشف عن أي لغة، فسيتم إعادة التوجيه إلى اللغة الافتراضية.
656
+ بالتوازي، يمكنك أيضًا استخدام `intlayerMiddleware` لإضافة التوجيه من جانب الخادم إلى تطبيقك. سيقوم هذا المكون الإضافي بالكشف تلقائيًا عن اللغة الحالية بناءً على عنوان URL وتعيين ملف تعريف الارتباط المناسب للغة. إذا لم يتم تحديد لغة، سيحدد المكون الإضافي اللغة الأنسب بناءً على تفضيلات لغة متصفح المستخدم. إذا لم يتم الكشف عن أي لغة، فسيتم إعادة التوجيه إلى اللغة الافتراضية.
657
657
 
658
658
  ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
659
659
  import { defineConfig } from "vite";
660
660
  import vue from "@vitejs/plugin-vue";
661
- import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
661
+ import { intlayer, intlayerMiddleware } from "vite-intlayer";
662
662
 
663
663
  // https://vitejs.dev/config/
664
664
  export default defineConfig({
665
- plugins: [vue(), intlayer(), intlayerMiddlewarePlugin()],
665
+ plugins: [vue(), intlayer(), intlayerMiddleware()],
666
666
  });
667
667
  ```
668
668
 
669
669
  ```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
670
670
  import { defineConfig } from "vite";
671
671
  import vue from "@vitejs/plugin-vue";
672
- import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
672
+ import { intlayer, intlayerMiddleware } from "vite-intlayer";
673
673
 
674
674
  // https://vitejs.dev/config/
675
675
  export default defineConfig({
676
- plugins: [vue(), intlayer(), intlayerMiddlewarePlugin()],
676
+ plugins: [vue(), intlayer(), intlayerMiddleware()],
677
677
  });
678
678
  ```
679
679
 
680
680
  ```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
681
681
  const { defineConfig } = require("vite");
682
682
  const vue = require("@vitejs/plugin-vue");
683
- const { intlayer, intlayerMiddlewarePlugin } = require("vite-intlayer");
683
+ const { intlayer, intlayerMiddleware } = require("vite-intlayer");
684
684
 
685
685
  // https://vitejs.dev/config/
686
686
  module.exports = defineConfig({
687
- plugins: [vue(), intlayer(), intlayerMiddlewarePlugin()],
687
+ plugins: [vue(), intlayer(), intlayerMiddleware()],
688
688
  });
689
689
  const { defineConfig } = require("vite");
690
690
  const vue = require("@vitejs/plugin-vue");
691
- const { intlayer, intlayerMiddlewarePlugin } = require("vite-intlayer");
691
+ const { intlayer, intlayerMiddleware } = require("vite-intlayer");
692
692
 
693
693
  // https://vitejs.dev/config/
694
694
  module.exports = defineConfig({
695
- plugins: [vue(), intlayer(), intlayerMiddlewarePlugin()],
695
+ plugins: [vue(), intlayer(), intlayerMiddleware()],
696
696
  });
697
697
  ```
698
698
 
@@ -677,9 +677,9 @@ Für komplexere Szenarien können Sie eine Pipe erstellen, um das HTML sicher zu
677
677
 
678
678
  Intlayer verwendet Module Augmentation, um die Vorteile von TypeScript zu nutzen und Ihren Code robuster zu machen.
679
679
 
680
- ![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
680
+ ![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
681
681
 
682
- ![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
682
+ ![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
683
683
 
684
684
  Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen einschließt.
685
685
 
@@ -0,0 +1,246 @@
1
+ ---
2
+ createdAt: 2024-03-07
3
+ updatedAt: 2025-10-03
4
+ title: Erste Schritte mit Intlayer in Astro
5
+ description: Erfahren Sie, wie Sie Internationalisierung (i18n) zu Ihrer Vite- und React-Anwendung mit Intlayer hinzufügen. Folgen Sie dieser Anleitung, um Ihre App mehrsprachig zu machen.
6
+ keywords:
7
+ - Internationalisierung
8
+ - Dokumentation
9
+ - Intlayer
10
+ - Vite
11
+ - React
12
+ - i18n
13
+ - JavaScript
14
+ slugs:
15
+ - doc
16
+ - environment
17
+ - astro
18
+ applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
19
+ ---
20
+
21
+ # Erste Schritte zur Internationalisierung (i18n) mit Intlayer und Astro
22
+
23
+ Siehe [Application Template](https://github.com/aymericzip/intlayer-astro-template) auf GitHub.
24
+
25
+ ## Was ist Intlayer?
26
+
27
+ **Intlayer** ist eine innovative, Open-Source-Internationalisierungsbibliothek (i18n), die entwickelt wurde, um die mehrsprachige Unterstützung in modernen Webanwendungen zu vereinfachen.
28
+
29
+ Mit Intlayer können Sie:
30
+
31
+ - **Übersetzungen einfach verwalten** mithilfe deklarativer Wörterbücher auf Komponentenebene.
32
+ - **Metadaten, Routen und Inhalte dynamisch lokalisieren**.
33
+ - **TypeScript-Unterstützung sicherstellen** durch automatisch generierte Typen, die Autovervollständigung und Fehlererkennung verbessern.
34
+ - **Von erweiterten Funktionen profitieren**, wie dynamischer Spracherkennung und -umschaltung.
35
+
36
+ ---
37
+
38
+ ## Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer in Astro
39
+
40
+ ### Schritt 1: Abhängigkeiten installieren
41
+
42
+ Installieren Sie die notwendigen Pakete mit Ihrem Paketmanager:
43
+
44
+ ```bash packageManager="npm"
45
+ npm install intlayer astro-intlayer
46
+ # Optional: React Island-Unterstützung hinzufügen
47
+ npm install react react-dom react-intlayer @astrojs/react
48
+ ```
49
+
50
+ ```bash packageManager="pnpm"
51
+ pnpm add intlayer astro-intlayer
52
+ # Optional: React Island-Unterstützung hinzufügen
53
+ pnpm add react react-dom react-intlayer @astrojs/react
54
+ ```
55
+
56
+ ```bash packageManager="yarn"
57
+ yarn add intlayer astro-intlayer
58
+ # Optional: React Island-Unterstützung hinzufügen
59
+ yarn add react react-dom react-intlayer @astrojs/react
60
+ ```
61
+
62
+ - **intlayer**
63
+ Das Kernpaket, das Internationalisierungswerkzeuge für Konfigurationsmanagement, Übersetzung, [Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/get_started.md), Transpilierung und [CLI-Befehle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_cli.md) bereitstellt.
64
+
65
+ - **astro-intlayer**
66
+ Beinhaltet das Astro-Integrationsplugin zur Integration von Intlayer mit dem [Vite-Bundler](https://vite.dev/guide/why.html#why-bundle-for-production) sowie Middleware zur Erkennung der bevorzugten Sprache des Benutzers, Verwaltung von Cookies und Handhabung von URL-Weiterleitungen.
67
+
68
+ ### Schritt 2: Konfiguration Ihres Projekts
69
+
70
+ Erstellen Sie eine Konfigurationsdatei, um die Sprachen Ihrer Anwendung zu konfigurieren:
71
+
72
+ ```typescript fileName="intlayer.config.ts"
73
+ import { Locales, type IntlayerConfig } from "intlayer";
74
+
75
+ const config: IntlayerConfig = {
76
+ internationalization: {
77
+ locales: [
78
+ Locales.ENGLISH,
79
+ Locales.FRENCH,
80
+ Locales.SPANISH,
81
+ // Ihre weiteren Sprachen
82
+ ],
83
+ defaultLocale: Locales.ENGLISH,
84
+ },
85
+ };
86
+
87
+ export default config;
88
+ ```
89
+
90
+ > Über diese Konfigurationsdatei können Sie lokalisierte URLs, Middleware-Weiterleitungen, Cookie-Namen, den Speicherort und die Erweiterung Ihrer Inhaltsdeklarationen einrichten, Intlayer-Protokolle in der Konsole deaktivieren und mehr. Für eine vollständige Liste der verfügbaren Parameter verweisen wir auf die [Konfigurationsdokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md).
91
+
92
+ ### Schritt 3: Integration von Intlayer in Ihre Astro-Konfiguration
93
+
94
+ Fügen Sie das Intlayer-Plugin in Ihre Konfiguration ein.
95
+
96
+ ```typescript fileName="astro.config.ts"
97
+ // @ts-check
98
+
99
+ import { intlayer } from "astro-intlayer";
100
+ import { defineConfig } from "astro/config";
101
+
102
+ // https://astro.build/config
103
+ export default defineConfig({
104
+ integrations: [intlayer()],
105
+ });
106
+ ```
107
+
108
+ > Das `intlayer()` Astro-Integrations-Plugin wird verwendet, um Intlayer mit Astro zu integrieren. Es sorgt für den Aufbau von Inhaltsdeklarationsdateien und überwacht diese im Entwicklungsmodus. Es definiert Intlayer-Umgebungsvariablen innerhalb der Astro-Anwendung. Zusätzlich stellt es Aliase zur Optimierung der Leistung bereit.
109
+
110
+ ### Schritt 4: Deklarieren Sie Ihre Inhalte
111
+
112
+ Erstellen und verwalten Sie Ihre Inhaltsdeklarationen, um Übersetzungen zu speichern:
113
+
114
+ ```tsx fileName="src/app.content.tsx"
115
+ import { t, type Dictionary } from "intlayer";
116
+ import type { ReactNode } from "react";
117
+
118
+ const appContent = {
119
+ key: "app",
120
+ content: {
121
+ title: t({
122
+ en: "Hello World",
123
+ fr: "Bonjour le monde",
124
+ es: "Hola mundo",
125
+ }),
126
+ },
127
+ } satisfies Dictionary;
128
+
129
+ export default appContent;
130
+ ```
131
+
132
+ > Ihre Inhaltsdeklarationen können überall in Ihrer Anwendung definiert werden, solange sie im `contentDir`-Verzeichnis enthalten sind (standardmäßig `./src`). Und die Dateiendung der Inhaltsdeklaration muss übereinstimmen (standardmäßig `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`).
133
+
134
+ > Für weitere Details siehe die [Dokumentation zur Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/get_started.md).
135
+
136
+ ### Schritt 5: Verwenden Sie Ihre Inhalte in Astro
137
+
138
+ Sie können Wörterbücher direkt in `.astro`-Dateien mit den von `intlayer` exportierten Kern-Hilfsfunktionen verwenden.
139
+
140
+ ```astro fileName="src/pages/index.astro"
141
+ <!-- astro -->
142
+ ---
143
+ import { getIntlayer } from "intlayer";
144
+ import appContent from "../app.content";
145
+
146
+ const { title } = getIntlayer('app');
147
+ ---
148
+
149
+ <html lang="en">
150
+ <head>
151
+ <meta charset="utf-8" />
152
+ <meta name="viewport" content="width=device-width" />
153
+ <title>{title}</title>
154
+ </head>
155
+ <body>
156
+ <h1>{title}</h1>
157
+ </body>
158
+ </html>
159
+ ```
160
+
161
+ ### Schritt 6: Lokalisierte Routen
162
+
163
+ Erstellen Sie ein dynamisches Routensegment, um lokalisierte Seiten bereitzustellen, zum Beispiel `src/pages/[locale]/index.astro`:
164
+
165
+ ```astro fileName="src/pages/[locale]/index.astro"
166
+ <!-- astro -->
167
+ ---
168
+ import { getIntlayer } from "intlayer";
169
+
170
+ const { title } = getIntlayer('app');
171
+ ---
172
+
173
+ <h1>{title}</h1>
174
+ ```
175
+
176
+ Die Astro-Integration fügt während der Entwicklung eine Vite-Middleware hinzu, die bei der lokalisierungsbewussten Routenführung und Umgebungsdefinitionen hilft. Sie können weiterhin zwischen den Sprachen mit Ihrer eigenen Logik oder Hilfsfunktionen wie `getLocalizedUrl` von `intlayer` verlinken.
177
+
178
+ ### Schritt 7: Verwenden Sie weiterhin Ihr bevorzugtes Framework
179
+
180
+ Fahren Sie fort, Ihr Lieblings-Framework zum Erstellen Ihrer Anwendung zu verwenden.
181
+
182
+ - Intlayer + React: [Intlayer mit React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_vite+react.md)
183
+ - Intlayer + Vue: [Intlayer mit Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_vite+vue.md)
184
+ - Intlayer + Svelte: [Intlayer mit Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_vite+svelte.md)
185
+ - Intlayer + Solid: [Intlayer mit Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_vite+solid.md)
186
+ - Intlayer + Preact: [Intlayer mit Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_vite+preact.md)
187
+
188
+ ### TypeScript konfigurieren
189
+
190
+ Intlayer verwendet Module Augmentation, um die Vorteile von TypeScript zu nutzen und Ihren Codebestand robuster zu machen.
191
+
192
+ ![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
193
+
194
+ ![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
195
+
196
+ Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen einschließt.
197
+
198
+ ```json5 fileName="tsconfig.json"
199
+ {
200
+ // ... Ihre bestehenden TypeScript-Konfigurationen
201
+ "include": [
202
+ // ... Ihre bestehenden TypeScript-Konfigurationen
203
+ ".intlayer/**/*.ts", // Einschließen der automatisch generierten Typen
204
+ ],
205
+ }
206
+ ```
207
+
208
+ ### Git-Konfiguration
209
+
210
+ Es wird empfohlen, die von Intlayer generierten Dateien zu ignorieren. Dadurch vermeiden Sie, diese versehentlich in Ihr Git-Repository zu committen.
211
+
212
+ Um dies zu tun, können Sie die folgenden Anweisungen zu Ihrer `.gitignore`-Datei hinzufügen:
213
+
214
+ ```plaintext
215
+ # Ignoriere die von Intlayer generierten Dateien
216
+ .intlayer
217
+ ```
218
+
219
+ ### VS Code Erweiterung
220
+
221
+ Um Ihre Entwicklungserfahrung mit Intlayer zu verbessern, können Sie die offizielle **Intlayer VS Code Erweiterung** installieren.
222
+
223
+ [Installation aus dem VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
224
+
225
+ Diese Erweiterung bietet:
226
+
227
+ - **Autovervollständigung** für Übersetzungsschlüssel.
228
+ - **Echtzeit-Fehlererkennung** für fehlende Übersetzungen.
229
+ - **Inline-Vorschauen** des übersetzten Inhalts.
230
+ - **Schnellaktionen**, um Übersetzungen einfach zu erstellen und zu aktualisieren.
231
+
232
+ Für weitere Details zur Nutzung der Erweiterung, siehe die [Intlayer VS Code Erweiterungsdokumentation](https://intlayer.org/doc/vs-code-extension).
233
+
234
+ ---
235
+
236
+ ### Weiterführende Schritte
237
+
238
+ Um weiterzugehen, können Sie den [visuellen Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_visual_editor.md) implementieren oder Ihre Inhalte mit dem [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_CMS.md) auslagern.
239
+
240
+ ---
241
+
242
+ ## Dokumentationshistorie
243
+
244
+ | Version | Datum | Änderungen |
245
+ | ------- | ---------- | ------------------------------------------------------------ |
246
+ | 6.2.0 | 2025-10-03 | Aktualisierung für Astro-Integration, Konfiguration, Nutzung |
@@ -1175,9 +1175,9 @@ Durch die Anwendung dieser Änderungen wird Ihre Anwendung:
1175
1175
 
1176
1176
  Intlayer verwendet Modulaugmentation, um die Vorteile von TypeScript zu nutzen und Ihre Codebasis robuster zu machen.
1177
1177
 
1178
- ![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
1178
+ ![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
1179
1179
 
1180
- ![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
1180
+ ![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
1181
1181
 
1182
1182
  Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen enthält.
1183
1183
 
@@ -370,9 +370,9 @@ Standardmäßig interpretiert `express-intlayer` den `Accept-Language`-Header, u
370
370
 
371
371
  `express-intlayer` nutzt die leistungsstarken Funktionen von TypeScript, um den Internationalisierungsprozess zu verbessern. Die statische Typisierung von TypeScript stellt sicher, dass jeder Übersetzungsschlüssel berücksichtigt wird, wodurch das Risiko fehlender Übersetzungen verringert und die Wartbarkeit verbessert wird.
372
372
 
373
- ![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
373
+ ![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
374
374
 
375
- ![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
375
+ ![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
376
376
 
377
377
  Stellen Sie sicher, dass die automatisch generierten Typen (standardmäßig unter ./types/intlayer.d.ts) in Ihrer tsconfig.json-Datei enthalten sind.
378
378
 
@@ -221,9 +221,9 @@ Standardmäßig interpretiert `express-intlayer` den `Accept-Language`-Header, u
221
221
 
222
222
  `express-intlayer` nutzt die leistungsstarken Funktionen von TypeScript, um den Internationalisierungsprozess zu verbessern. Die statische Typisierung von TypeScript stellt sicher, dass jeder Übersetzungsschlüssel berücksichtigt wird, wodurch das Risiko fehlender Übersetzungen verringert und die Wartbarkeit verbessert wird.
223
223
 
224
- ![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
224
+ ![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
225
225
 
226
- ![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
226
+ ![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
227
227
 
228
228
  Stellen Sie sicher, dass die automatisch generierten Typen (standardmäßig unter ./types/intlayer.d.ts) in Ihrer tsconfig.json-Datei enthalten sind.
229
229
 
@@ -1235,9 +1235,9 @@ yarn add @intlayer/swc --save-dev
1235
1235
 
1236
1236
  Intlayer verwendet Modulerweiterung, um die Vorteile von TypeScript zu nutzen und Ihren Code robuster zu machen.
1237
1237
 
1238
- ![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
1238
+ ![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
1239
1239
 
1240
- ![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
1240
+ ![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
1241
1241
 
1242
1242
  Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen enthält.
1243
1243
 
@@ -1464,9 +1464,9 @@ yarn add @intlayer/swc --save-dev
1464
1464
 
1465
1465
  Intlayer verwendet Module Augmentation, um die Vorteile von TypeScript zu nutzen und Ihren Code robuster zu machen.
1466
1466
 
1467
- ![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
1467
+ ![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
1468
1468
 
1469
- ![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
1469
+ ![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
1470
1470
 
1471
1471
  Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen einschließt.
1472
1472
 
@@ -1435,9 +1435,9 @@ yarn add @intlayer/swc --save-dev
1435
1435
 
1436
1436
  Intlayer verwendet Modulaugmentation, um die Vorteile von TypeScript zu nutzen und Ihren Code robuster zu machen.
1437
1437
 
1438
- ![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
1438
+ ![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
1439
1439
 
1440
- ![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
1440
+ ![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
1441
1441
 
1442
1442
  Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen einschließt.
1443
1443
 
@@ -749,9 +749,9 @@ module.exports = aboutMetaContent;
749
749
 
750
750
  Intlayer verwendet Module Augmentation, um die Vorteile von TypeScript zu nutzen und Ihren Code robuster zu machen.
751
751
 
752
- ![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
752
+ ![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
753
753
 
754
- ![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
754
+ ![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
755
755
 
756
756
  Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen einschließt.
757
757
 
@@ -149,28 +149,25 @@ module.exports = (async () => {
149
149
 
150
150
  ## Schritt 4: Fügen Sie den Intlayer-Provider hinzu
151
151
 
152
- Um die Benutzersprache in Ihrer Anwendung synchron zu halten, müssen Sie Ihre Root-Komponente mit der `IntlayerProvider`-Komponente aus `react-intlayer` umschließen.
152
+ Um die Benutzersprache in Ihrer Anwendung synchron zu halten, müssen Sie Ihre Root-Komponente mit der `IntlayerProvider`-Komponente von `react-intlayer-native` umschließen.
153
153
 
154
- Außerdem müssen Sie die Funktion `intlayerPolyfill` in Ihre `index.js`-Datei einfügen, um sicherzustellen, dass Intlayer ordnungsgemäß funktioniert.
154
+ > Stellen Sie sicher, dass Sie den Provider von `react-native-intlayer` anstelle von `react-intlayer` verwenden. Der Export von `react-native-intlayer` enthält Polyfills für die Web-API.
155
155
 
156
156
  ```tsx fileName="app/_layout.tsx" codeFormat="typescript"
157
157
  import { Stack } from "expo-router";
158
158
  import { getLocales } from "expo-localization";
159
- import { IntlayerProviderContent } from "react-intlayer";
160
- import { intlayerPolyfill } from "react-native-intlayer";
159
+ import { IntlayerProvider } from "react-native-intlayer";
161
160
  import { type FC } from "react";
162
161
 
163
- intlayerPolyfill();
164
-
165
162
  const getDeviceLocale = () => getLocales()[0]?.languageTag;
166
163
 
167
164
  const RootLayout: FC = () => {
168
165
  return (
169
- <IntlayerProviderContent defaultLocale={getDeviceLocale()}>
166
+ <IntlayerProvider defaultLocale={getDeviceLocale()}>
170
167
  <Stack>
171
168
  <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
172
169
  </Stack>
173
- </IntlayerProviderContent>
170
+ </IntlayerProvider>
174
171
  );
175
172
  };
176
173
 
@@ -180,20 +177,17 @@ export default RootLayout;
180
177
  ```jsx fileName="app/_layout.mjx" codeFormat="esm"
181
178
  import { Stack } from "expo-router";
182
179
  import { getLocales } from "expo-localization";
183
- import { IntlayerProviderContent } from "react-intlayer";
184
- import { intlayerPolyfill } from "react-native-intlayer";
185
-
186
- intlayerPolyfill();
180
+ import { IntlayerProvider } from "react-native-intlayer";
187
181
 
188
182
  const getDeviceLocale = () => getLocales()[0]?.languageTag;
189
183
 
190
184
  const RootLayout = () => {
191
185
  return (
192
- <IntlayerProviderContent defaultLocale={getDeviceLocale()}>
186
+ <IntlayerProvider defaultLocale={getDeviceLocale()}>
193
187
  <Stack>
194
188
  <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
195
189
  </Stack>
196
- </IntlayerProviderContent>
190
+ </IntlayerProvider>
197
191
  );
198
192
  };
199
193
 
@@ -203,21 +197,18 @@ export default RootLayout;
203
197
  ```jsx fileName="app/_layout.cjx" codeFormat="commonjs"
204
198
  const { Stack } = require("expo-router");
205
199
  const { getLocales } = require("expo-localization");
206
- const { IntlayerProviderContent } = require("react-intlayer");
207
- const { intlayerPolyfill } = require("react-native-intlayer");
208
-
209
- intlayerPolyfill();
200
+ const { IntlayerProvider } = require("react-native-intlayer");
210
201
 
211
202
  // Funktion, um die Gerätesprache zu ermitteln
212
203
  const getDeviceLocale = () => getLocales()[0]?.languageTag;
213
204
 
214
205
  const RootLayout = () => {
215
206
  return (
216
- <IntlayerProviderContent defaultLocale={getDeviceLocale()}>
207
+ <IntlayerProvider defaultLocale={getDeviceLocale()}>
217
208
  <Stack>
218
209
  <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
219
210
  </Stack>
220
- </IntlayerProviderContent>
211
+ </IntlayerProvider>
221
212
  );
222
213
  };
223
214