-
Notifications
You must be signed in to change notification settings - Fork 37
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to get astro-i18next to work in React Components inside Astro #46
Comments
Hey, thanks for the issue. I've setup an example for react using the Here's the stackblitz: https://stackblitz.com/edit/github-xdzdkv?file=src/components/Counter.tsx It doesn't work because i18next is only initialized server side. So when using the |
Any ideas on how to achieve this? |
And also, what about other frameworks like solidjs etc? |
I've started implementing client side translations, I've created some example folders on the develop branch (including react). Trying things out for now.
I think my experimenting with react will solve the same issues for other frameworks. Basically, frameworks render client side js, so the i18next instance should exist client side as well to retrieve translation keys. It's not ideal to have all translations handled client side in my opinion because it would hurt SEO. So I'll have to think of ways to make SSR and client side rendering work together for i18n. I have some questions that need more investigating:
Anyways, thank you for your interest. If you have any insight, I'm all ears! |
On astro docs website, they create dedicated pages for each translation (using md files). Only the UI part that using the translation key. And I will follow that convention. |
…side - update config naming - abstract i18next config + make it overridable for server and client configs - fix route translations to discard page extensions - update README to account for new route features and easier setup - add i18next-fs-backend, i18next-http-backend and i18next-browser-languagedetector packages to abstract locales detection and loading - automatically require react-i18next when @astrojs/react integration is installed BREAKING CHANGE: - defaultLanguage is now defaultLocale - supportedLanguages is now locales - i18next config is now split into two configs: `i18nextServer` and `i18nextClient` fixes #57, closes #46, #37
…side - update config naming - abstract i18next config + make it overridable for server and client configs - fix route translations to discard page extensions - update README to account for new route features and easier setup - add i18next-fs-backend, i18next-http-backend and i18next-browser-languagedetector packages to abstract locales detection and loading - automatically require react-i18next when @astrojs/react integration is installed BREAKING CHANGE: - defaultLanguage is now defaultLocale - supportedLanguages is now locales - i18next config is now split into two configs: `i18nextServer` and `i18nextClient` fixes #57, closes #46, #37
# [1.0.0-beta.13](v1.0.0-beta.12...v1.0.0-beta.13) (2022-11-06) ### Bug Fixes * add isFileHidden function + tests to prevent missing hidden files ([7dcd0aa](7dcd0aa)) * **generate:** replace isLocale check with user defined locales to prevent nested folders generation ([a598e2e](a598e2e)), closes [#56](#56) * **i18next-server:** load locale files synchronously ([e7892e2](e7892e2)) * update types import to relative ([#58](#58)) ([44a5422](44a5422)) ### Features * add option to show the default locale in the url ([#51](#51)) ([ea939db](ea939db)), closes [#54](#54) * add support for route translations ([db5200b](db5200b)), closes [#50](#50) [#29](#29) * allow implicit key for <Trans> when omitting i18nKey prop ([ff14354](ff14354)), closes [#53](#53) * simplified API + instanciate i18next both in server and client side ([ed44510](ed44510)), closes [#57](#57) [#46](#46) [#37](#37) ### BREAKING CHANGES * - defaultLanguage is now defaultLocale - supportedLanguages is now locales - i18next config is now split into two configs: `i18nextServer` and `i18nextClient`
🎉 This issue has been resolved in version 1.0.0-beta.13 🎉 The release is available on: Your semantic-release bot 📦🚀 |
# [1.0.0-beta.13](yassinedoghri/astro-i18next@v1.0.0-beta.12...v1.0.0-beta.13) (2022-11-06) ### Bug Fixes * add isFileHidden function + tests to prevent missing hidden files ([7dcd0aa](yassinedoghri/astro-i18next@7dcd0aa)) * **generate:** replace isLocale check with user defined locales to prevent nested folders generation ([a598e2e](yassinedoghri/astro-i18next@a598e2e)), closes [#56](yassinedoghri/astro-i18next#56) * **i18next-server:** load locale files synchronously ([e7892e2](yassinedoghri/astro-i18next@e7892e2)) * update types import to relative ([#58](yassinedoghri/astro-i18next#58)) ([44a5422](yassinedoghri/astro-i18next@44a5422)) ### Features * add option to show the default locale in the url ([#51](yassinedoghri/astro-i18next#51)) ([ea939db](yassinedoghri/astro-i18next@ea939db)), closes [#54](yassinedoghri/astro-i18next#54) * add support for route translations ([db5200b](yassinedoghri/astro-i18next@db5200b)), closes [#50](yassinedoghri/astro-i18next#50) [#29](yassinedoghri/astro-i18next#29) * allow implicit key for <Trans> when omitting i18nKey prop ([ff14354](yassinedoghri/astro-i18next@ff14354)), closes [#53](yassinedoghri/astro-i18next#53) * simplified API + instanciate i18next both in server and client side ([ed44510](yassinedoghri/astro-i18next@ed44510)), closes [#57](yassinedoghri/astro-i18next#57) [#46](yassinedoghri/astro-i18next#46) [#37](yassinedoghri/astro-i18next#37) ### BREAKING CHANGES * - defaultLanguage is now defaultLocale - supportedLanguages is now locales - i18next config is now split into two configs: `i18nextServer` and `i18nextClient`
# 1.0.0 (2024-12-04) ### Bug Fixes * add depth level to relative import declarations ([02ddb76](02ddb76)) * add isFileHidden function + tests to prevent missing hidden files ([7dcd0aa](7dcd0aa)) * add levels to Astro.global pattern and scripts' import statements ([9d88d79](9d88d79)) * add levels to relative path in script tag ([1203d42](1203d42)), closes [yassinedoghri#129](https://github.com/jeffwcx/astro-i18next/issues/129) * add missing `script` to regex in resolveRelativePathsLevel ([9288efe](9288efe)), closes [yassinedoghri#129](https://github.com/jeffwcx/astro-i18next/issues/129) * **build:** remove components and utils from build + set components export to src ([bb7ab0f](bb7ab0f)), closes [yassinedoghri#18](https://github.com/jeffwcx/astro-i18next/issues/18) * **cli:** filter out any file other than .astro files for generate ([c34fa07](c34fa07)) * **example:** add isCurrentPath function comparing current url to localized path ([ee90afb](ee90afb)) * expect locales folder to be in astro's publicDir config by default ([ec72ff3](ec72ff3)), closes [yassinedoghri#64](https://github.com/jeffwcx/astro-i18next/issues/64) * **generate:** ignore any directories/files that begin with an underscore ([a7e6f08](a7e6f08)), closes [yassinedoghri#43](https://github.com/jeffwcx/astro-i18next/issues/43) * **generate:** inject changeLanguage statement after imports and before frontmatter logic ([4d74e0b](4d74e0b)), closes [yassinedoghri#23](https://github.com/jeffwcx/astro-i18next/issues/23) * **generate:** replace isLocale check with user defined locales to prevent nested folders generation ([a598e2e](a598e2e)), closes [yassinedoghri#56](https://github.com/jeffwcx/astro-i18next/issues/56) * get astro pages' full paths using fdir's withFullPaths instead of withRelativePaths ([92a5178](92a5178)), closes [yassinedoghri#135](https://github.com/jeffwcx/astro-i18next/issues/135) * handle localizePath trailing slash depending on astro's trailingSlash config ([880666c](880666c)), closes [yassinedoghri#119](https://github.com/jeffwcx/astro-i18next/issues/119) * **i18next-server:** load locale files synchronously ([e7892e2](e7892e2)) * import localizeUrl in HeadHrefLangs from index for access to astro-i18next runtime config ([5e3b96c](5e3b96c)), closes [yassinedoghri#65](https://github.com/jeffwcx/astro-i18next/issues/65) * include LanguageSelector component to release files ([efa1961](efa1961)) * **language-selector:** replace country-code-to-flag-emoji dependency with locale-emoji ([6aee21d](6aee21d)), closes [yassinedoghri#14](https://github.com/jeffwcx/astro-i18next/issues/14) * **plugins:** normalize named imports to call in i18next's use function ([6928ddc](6928ddc)), closes [yassinedoghri#38](https://github.com/jeffwcx/astro-i18next/issues/38) * remove trailing slash from localized path ([1998309](1998309)), closes [yassinedoghri#77](https://github.com/jeffwcx/astro-i18next/issues/77) * replace @proload/plugin-typescript with @proload/plugin-tsm ([6f639ee](6f639ee)) * replace language-flag-colors with country-code-to-flag-emoji dependency ([7d4d408](7d4d408)) * reset iso-639-1 and locale-emoji as dependencies ([b2863d7](b2863d7)), closes [yassinedoghri#32](https://github.com/jeffwcx/astro-i18next/issues/32) * resolve astroFileFullPath to extract relative astroFilePath on Windows ([c23cd27](c23cd27)), closes [yassinedoghri#135](https://github.com/jeffwcx/astro-i18next/issues/135) * Rollup failed to resolve import 'types' ([yassinedoghri#33](https://github.com/jeffwcx/astro-i18next/issues/33)) ([2807989](2807989)) * take astro base path into account when using localizePath or localizeUrl functions ([5c35eaf](5c35eaf)), closes [yassinedoghri#27](https://github.com/jeffwcx/astro-i18next/issues/27) * **trans component:** import utility functions from index ([eea0d5d](eea0d5d)) * type definitions for exported astro components ([bb60949](bb60949)), closes [yassinedoghri#18](https://github.com/jeffwcx/astro-i18next/issues/18) * update package.json's exports value ([86d7cf9](86d7cf9)) * update publish workflow to include bundled package in dist ([5428dc3](5428dc3)) * update types import to relative ([yassinedoghri#58](https://github.com/jeffwcx/astro-i18next/issues/58)) ([44a5422](44a5422)) * update utils path to relative in Trans component ([c767fe3](c767fe3)) * use fileURLToPath to normalize publicDir pathname accross operating systems ([3c07d6a](3c07d6a)), closes [yassinedoghri#79](https://github.com/jeffwcx/astro-i18next/issues/79) * use unjs/pathe to resolve cross OS public path ([ad1d24f](ad1d24f)), closes [yassinedoghri#105](https://github.com/jeffwcx/astro-i18next/issues/105) * use unjs/pathe to resolve generated localized files paths across OS ([da80a8d](da80a8d)), closes [yassinedoghri#135](https://github.com/jeffwcx/astro-i18next/issues/135) * **workflow:** download bundle artifact into dist path to include it into package ([3fb5a78](3fb5a78)) ### Features * add astro integration --> initialize i18next upon astro:config:setup ([78ec744](78ec744)) * add HeadHrefLangs component + localizeUrl util function ([cd4095e](cd4095e)) * add i18next namespaces + validate config before processing it ([10b40cc](10b40cc)) * add LanguageSelector component to select language from supported locales ([ad3fe2a](ad3fe2a)) * add option to show the default locale in the url ([yassinedoghri#51](https://github.com/jeffwcx/astro-i18next/issues/51)) ([ea939db](ea939db)), closes [yassinedoghri#54](https://github.com/jeffwcx/astro-i18next/issues/54) * add showFlag attribute to LanguageSelector to display the flag emoji or not ([a4b2f98](a4b2f98)) * add support for route translations ([db5200b](db5200b)), closes [yassinedoghri#50](https://github.com/jeffwcx/astro-i18next/issues/50) [yassinedoghri#29](https://github.com/jeffwcx/astro-i18next/issues/29) * add Trans component to interpolate translation strings with its contents ([14ff1bd](14ff1bd)) * add utility function to localize path + improve components and overall DX ([d230f00](d230f00)) * Allow astro versions greater than 1.0.0 as peer dependency. ([0205d41](0205d41)) * allow implicit key for <Trans> when omitting i18nKey prop ([ff14354](ff14354)), closes [yassinedoghri#53](https://github.com/jeffwcx/astro-i18next/issues/53) * allow passing functions to i18next init ([ed7c721](ed7c721)) * allow using i18next plugins directly in the config ([114ccd7](114ccd7)) * **cli:** add generate command to create localized astro pages ([17982cf](17982cf)), closes [yassinedoghri#13](https://github.com/jeffwcx/astro-i18next/issues/13) * **cli:** add success feedback to generate command + add generated filepaths with verbose ([9e3d4f5](9e3d4f5)) * **language-selector:** add languageMapping prop to rename languages of choice ([20d94e4](20d94e4)), closes [yassinedoghri#116](https://github.com/jeffwcx/astro-i18next/issues/116) * load translation resources automatically + add example website ([48dd98e](48dd98e)) * make base path for i18next resources configurable ([4e4b057](4e4b057)) * move astro-i18next config in a standalone file to load it for CLI commands ([bdf2408](bdf2408)) * **plugins:** set i18next plugins config for both server and client side setups ([5ddb1c7](5ddb1c7)), closes [yassinedoghri#68](https://github.com/jeffwcx/astro-i18next/issues/68) * prefix language name with language flag emoji using language-flag-colors ([7e09d93](7e09d93)) * simplified API + instanciate i18next both in server and client side ([ed44510](ed44510)), closes [yassinedoghri#57](https://github.com/jeffwcx/astro-i18next/issues/57) [yassinedoghri#46](https://github.com/jeffwcx/astro-i18next/issues/46) [yassinedoghri#37](https://github.com/jeffwcx/astro-i18next/issues/37) ### Reverts * **i18next-peer:** reset i18next as package dependency ([7906e19](7906e19)), closes [yassinedoghri#131](https://github.com/jeffwcx/astro-i18next/issues/131) ### BREAKING CHANGES * - defaultLanguage is now defaultLocale - supportedLanguages is now locales - i18next config is now split into two configs: `i18nextServer` and `i18nextClient` * config is now a standalone file + some property names have changed for better clarity and consistency - `baseLocale` is now `defaultLanguage` - `supportedLocales` is now `supportedLanguages`` * `baseLanguage` is now `baseLocale` in config options * rename i18nextConfig to i18next in config + remove className and baseLanguage props for LanguageSelector
# 1.0.0-beta.1 (2024-12-04) ### Bug Fixes * add depth level to relative import declarations ([02ddb76](02ddb76)) * add isFileHidden function + tests to prevent missing hidden files ([7dcd0aa](7dcd0aa)) * add levels to Astro.global pattern and scripts' import statements ([9d88d79](9d88d79)) * add levels to relative path in script tag ([1203d42](1203d42)), closes [yassinedoghri#129](https://github.com/jeffwcx/astro-i18next/issues/129) * add missing `script` to regex in resolveRelativePathsLevel ([9288efe](9288efe)), closes [yassinedoghri#129](https://github.com/jeffwcx/astro-i18next/issues/129) * **build:** remove components and utils from build + set components export to src ([bb7ab0f](bb7ab0f)), closes [yassinedoghri#18](https://github.com/jeffwcx/astro-i18next/issues/18) * **cli:** filter out any file other than .astro files for generate ([c34fa07](c34fa07)) * **example:** add isCurrentPath function comparing current url to localized path ([ee90afb](ee90afb)) * expect locales folder to be in astro's publicDir config by default ([ec72ff3](ec72ff3)), closes [yassinedoghri#64](https://github.com/jeffwcx/astro-i18next/issues/64) * **generate:** ignore any directories/files that begin with an underscore ([a7e6f08](a7e6f08)), closes [yassinedoghri#43](https://github.com/jeffwcx/astro-i18next/issues/43) * **generate:** inject changeLanguage statement after imports and before frontmatter logic ([4d74e0b](4d74e0b)), closes [yassinedoghri#23](https://github.com/jeffwcx/astro-i18next/issues/23) * **generate:** replace isLocale check with user defined locales to prevent nested folders generation ([a598e2e](a598e2e)), closes [yassinedoghri#56](https://github.com/jeffwcx/astro-i18next/issues/56) * get astro pages' full paths using fdir's withFullPaths instead of withRelativePaths ([92a5178](92a5178)), closes [yassinedoghri#135](https://github.com/jeffwcx/astro-i18next/issues/135) * handle localizePath trailing slash depending on astro's trailingSlash config ([880666c](880666c)), closes [yassinedoghri#119](https://github.com/jeffwcx/astro-i18next/issues/119) * **i18next-server:** load locale files synchronously ([e7892e2](e7892e2)) * import localizeUrl in HeadHrefLangs from index for access to astro-i18next runtime config ([5e3b96c](5e3b96c)), closes [yassinedoghri#65](https://github.com/jeffwcx/astro-i18next/issues/65) * include LanguageSelector component to release files ([efa1961](efa1961)) * **language-selector:** replace country-code-to-flag-emoji dependency with locale-emoji ([6aee21d](6aee21d)), closes [yassinedoghri#14](https://github.com/jeffwcx/astro-i18next/issues/14) * **plugins:** normalize named imports to call in i18next's use function ([6928ddc](6928ddc)), closes [yassinedoghri#38](https://github.com/jeffwcx/astro-i18next/issues/38) * remove trailing slash from localized path ([1998309](1998309)), closes [yassinedoghri#77](https://github.com/jeffwcx/astro-i18next/issues/77) * replace @proload/plugin-typescript with @proload/plugin-tsm ([6f639ee](6f639ee)) * replace language-flag-colors with country-code-to-flag-emoji dependency ([7d4d408](7d4d408)) * reset iso-639-1 and locale-emoji as dependencies ([b2863d7](b2863d7)), closes [yassinedoghri#32](https://github.com/jeffwcx/astro-i18next/issues/32) * resolve astroFileFullPath to extract relative astroFilePath on Windows ([c23cd27](c23cd27)), closes [yassinedoghri#135](https://github.com/jeffwcx/astro-i18next/issues/135) * Rollup failed to resolve import 'types' ([yassinedoghri#33](https://github.com/jeffwcx/astro-i18next/issues/33)) ([2807989](2807989)) * take astro base path into account when using localizePath or localizeUrl functions ([5c35eaf](5c35eaf)), closes [yassinedoghri#27](https://github.com/jeffwcx/astro-i18next/issues/27) * **trans component:** import utility functions from index ([eea0d5d](eea0d5d)) * type definitions for exported astro components ([bb60949](bb60949)), closes [yassinedoghri#18](https://github.com/jeffwcx/astro-i18next/issues/18) * update package.json's exports value ([86d7cf9](86d7cf9)) * update publish workflow to include bundled package in dist ([5428dc3](5428dc3)) * update types import to relative ([yassinedoghri#58](https://github.com/jeffwcx/astro-i18next/issues/58)) ([44a5422](44a5422)) * update utils path to relative in Trans component ([c767fe3](c767fe3)) * use fileURLToPath to normalize publicDir pathname accross operating systems ([3c07d6a](3c07d6a)), closes [yassinedoghri#79](https://github.com/jeffwcx/astro-i18next/issues/79) * use unjs/pathe to resolve cross OS public path ([ad1d24f](ad1d24f)), closes [yassinedoghri#105](https://github.com/jeffwcx/astro-i18next/issues/105) * use unjs/pathe to resolve generated localized files paths across OS ([da80a8d](da80a8d)), closes [yassinedoghri#135](https://github.com/jeffwcx/astro-i18next/issues/135) * **workflow:** download bundle artifact into dist path to include it into package ([3fb5a78](3fb5a78)) ### Features * add astro integration --> initialize i18next upon astro:config:setup ([78ec744](78ec744)) * add HeadHrefLangs component + localizeUrl util function ([cd4095e](cd4095e)) * add i18next namespaces + validate config before processing it ([10b40cc](10b40cc)) * add LanguageSelector component to select language from supported locales ([ad3fe2a](ad3fe2a)) * add option to show the default locale in the url ([yassinedoghri#51](https://github.com/jeffwcx/astro-i18next/issues/51)) ([ea939db](ea939db)), closes [yassinedoghri#54](https://github.com/jeffwcx/astro-i18next/issues/54) * add showFlag attribute to LanguageSelector to display the flag emoji or not ([a4b2f98](a4b2f98)) * add support for route translations ([db5200b](db5200b)), closes [yassinedoghri#50](https://github.com/jeffwcx/astro-i18next/issues/50) [yassinedoghri#29](https://github.com/jeffwcx/astro-i18next/issues/29) * add Trans component to interpolate translation strings with its contents ([14ff1bd](14ff1bd)) * add utility function to localize path + improve components and overall DX ([d230f00](d230f00)) * Allow astro versions greater than 1.0.0 as peer dependency. ([0205d41](0205d41)) * allow implicit key for <Trans> when omitting i18nKey prop ([ff14354](ff14354)), closes [yassinedoghri#53](https://github.com/jeffwcx/astro-i18next/issues/53) * allow passing functions to i18next init ([ed7c721](ed7c721)) * allow using i18next plugins directly in the config ([114ccd7](114ccd7)) * **cli:** add generate command to create localized astro pages ([17982cf](17982cf)), closes [yassinedoghri#13](https://github.com/jeffwcx/astro-i18next/issues/13) * **cli:** add success feedback to generate command + add generated filepaths with verbose ([9e3d4f5](9e3d4f5)) * **language-selector:** add languageMapping prop to rename languages of choice ([20d94e4](20d94e4)), closes [yassinedoghri#116](https://github.com/jeffwcx/astro-i18next/issues/116) * load translation resources automatically + add example website ([48dd98e](48dd98e)) * make base path for i18next resources configurable ([4e4b057](4e4b057)) * move astro-i18next config in a standalone file to load it for CLI commands ([bdf2408](bdf2408)) * **plugins:** set i18next plugins config for both server and client side setups ([5ddb1c7](5ddb1c7)), closes [yassinedoghri#68](https://github.com/jeffwcx/astro-i18next/issues/68) * prefix language name with language flag emoji using language-flag-colors ([7e09d93](7e09d93)) * simplified API + instanciate i18next both in server and client side ([ed44510](ed44510)), closes [yassinedoghri#57](https://github.com/jeffwcx/astro-i18next/issues/57) [yassinedoghri#46](https://github.com/jeffwcx/astro-i18next/issues/46) [yassinedoghri#37](https://github.com/jeffwcx/astro-i18next/issues/37) ### Reverts * **i18next-peer:** reset i18next as package dependency ([7906e19](7906e19)), closes [yassinedoghri#131](https://github.com/jeffwcx/astro-i18next/issues/131) ### BREAKING CHANGES * - defaultLanguage is now defaultLocale - supportedLanguages is now locales - i18next config is now split into two configs: `i18nextServer` and `i18nextClient` * config is now a standalone file + some property names have changed for better clarity and consistency - `baseLocale` is now `defaultLanguage` - `supportedLocales` is now `supportedLanguages`` * `baseLanguage` is now `baseLocale` in config options * rename i18nextConfig to i18next in config + remove className and baseLanguage props for LanguageSelector
What works inside .astro components doesn't in React components (.tsx) in SSR mode.
Is there any plan to make it work ? or some work around ?
The text was updated successfully, but these errors were encountered: