Hey Everyone! Just wanted to take a second to thank this community, as a Junior Developer this forum has been a life saver more than once - thank you everyone for sharing everything you know!
I have recently been planning a strategy for internationalizing/localizing our Meteor/Blaze application with the rest of my team, and although I’d love to use universe i18n and TAP i18n, the fact that those repositories are no longer actively edited has given me pause to use them. Are there any i18n tools that are particularly suited to a Meteor/Blaze application that are more recently updated? If you were to undertake the process of internationalization, do you have any recommendations for tools to use in particular?
I am currently intending to use format.js, which I have decided to use after watching Storyteller’s awesome 2021 Meteor Impact presentation. If there is anyone out there that has it, could you share the repository that Storyteller presents in that video, or even just a version of that video with better resolution? There is so much good information in there, but the video quality makes it tough for me to read what is on the screen.
I’m glad that you have found my talk useful. I thought that I had written an article about this topic as well, but apparently not. Well, that can be quickly rectified. I’ll try to make an article some time soon. In the meantime I’ll try to dig up the code and post it here. So watch this space.
@guncebektas …only notice, in case of implementation to the React, be careful with using the “T” component created by “i18.createComponent()”. This way will create an event onChangeLocale for each “T” component and after a short time of translation of your app, you will create by this way hundreds of events “onChangeLocale” and It will slower down your app.
No way!!! Thank you so much Storyteller, this is going to make my life so much easier. I really can’t thank you enough. I’ll keep an eye out for that article and will be sure to read it. Thank you again!
I’ll just mention that the universe:i18n package is actively developed - very soon a 2.0 version of this package will be out. This new release will be much easier to integrate with a React and Blaze application. universe:i18n-blaze is deprecated and won’t be further supported.
Regarding React integration and using the “T” component, this API won’t be present in the new version and the problem of creating many events will be avoided: GitHub - vazco/meteor-universe-i18n at version-2
We’re using universe:i18n (for React, though) and couldn’t be happier.
The TAP packages used to be great in the earlier days, too, but we had a lot of headaches with them later on, which was the reason for us to switch.
@zendranm Glad to read here that universe:i18n ist still being actively maintained, for both React and Blaze. Amazing!
BTW: If you happen to use VSCode, I also recommend i18n-ally:
This makes i18n so much easier, as it shows the translations right in the editor. There is also a version for WebStorm, but it has some limitations. If someone is interested, I can share my i18n-ally config that works seamlessly with universe:i18n syntax.
# .vscode/i18n-ally-custom-framework.yml
# An array of strings which contain Language Ids defined by VS Code
# You can check avaliable language ids here: https://code.visualstudio.com/docs/languages/overview#_language-id
languageIds:
- javascript
- typescript
- javascriptreact
- typescriptreact
# An array of RegExes to find the key usage. **The key should be captured in the first match group**.
# You should unescape RegEx strings in order to fit in the YAML file
# To help with this, you can use https://www.freeformatter.com/json-escape.html
usageMatchRegex:
# The following example shows how to detect `t("your.i18n.keys")`
# the `{key}` will be placed by a proper keypath matching regex,
# you can ignore it and use your own matching rules as well
- "[^\\w\\d]i18n.__\\(['\"`]({key})['\"`]"
- '<T[^>]*>({key})</T>'
# An array of strings containing refactor templates.
# The "$1" will be replaced by the keypath specified.
# Optional: uncomment the following two lines to use
# refactorTemplates:
# - i18n.get("$1")
# If set to true, only enables this custom framework (will disable all built-in frameworks)
monopoly: true
#localesPaths: imports/i18n
#pathMatcher: '{locale}.i18n.json'
keyStyle: flat
It contains a declaration for both the i18n.__('my.key') syntax and the <T>my.key</T> syntax.
The <T> component is a custom one that I set up like this:
import { i18n } from 'meteor/universe:i18n';
const T = i18n.createComponent();
export default T;
On WebStorm, I was able to setup the i18n.__('my.key') syntax, but not the <T>my.key</T> syntax. It does not have an equivalent for the i18n-ally-custom-framework.yml file, and its UI configuration options are too limited for this. At least, I could not find out how it could be done.
That’s the reason why I am still using VSCode for translation tasks, although it sucks to switch the editor.
I’m happy to announce that the new version of universe:i18n is already out! If you want to try it out you have to install it via meteor add universe:i18n@2.0.0-rc.0
