Comments (22)
I use flow also in react components, so your proposal won't work. I've created a i18n
env in babel which adds the necessary presets and plugins.
"env": {
"i18n": {
"plugins": [
"transform-class-properties",
"transform-es2015-classes",
"transform-object-rest-spread",
"syntax-dynamic-import"
],
"presets": ["react"]
}
}
Then I can execute cross-env BABEL_ENV=i18n lingui extract
.
I'll ask in the Neutrino.js Slack Channel if there is a way to execute third party commands with the generated babel configuration.
from js-lingui.
Thank you for bug report!
Unfortunately, I'm not able to replicate it. There's major release coming in next few days, could you please try it?
npm install --save lingui-react@next
npm install --save-dev babel-preset-lingui-react@next
npm install --global lingui-cli@next
And then run: lingui extract
babel-plugin-lingui-extract-messages
is no longer part of babel-preset-lingui-react
. It's add manually by CLI when running lingui extract
(the reason is performance - messages shouldn't be extracted on every babel build).
Moreover, babel-plugin-lingui-extract-messages
warns about edge cases which would case the bug you've just described.
from js-lingui.
OK. Will test it if the new version is released.
the reason is performance - messages shouldn't be extracted on every babel build
Could it not test if the catalog is up-to-date based on a timestamp cached for every catalog. So that the catalog gets automatically built if something has changed?
from js-lingui.
That could work, but still you need a catalog only when extracting messages for translators, not for development. Also, having babel plugin added in lingui extract
has another advantage, that it works also for projects which can't edit the babel config.
from js-lingui.
@akkie I've just published new major version, could you please try if the bug is still there.
There're few backward incompatible changes covered in Migration guide. Most of changes are low-level api, only few affects react
from js-lingui.
I've just tried following .babelrc
config:
{
"presets": [
[
"env",
{
"targets": {
"browsers": ["ie 11"]
}
}
],
"react",
"lingui-react"
]
}
in tutorial repository, but I still get no error.
Closing now, feel free to reopen when you have more info.
from js-lingui.
I try to migrate to 1.0.1, but for me it's not really clear how a catalog should look like. Previously we had message files in the form:
{
"key": "value"
}
But now we have a catalog in the form:
type Catalog = {
messages: Messages,
languageData: {
// required in production
plurals: Function
}
}
Does this mean that the files are now structured like this:
{
"messages": {
"key": "value"
}
}
If yes, then this part of the documentation is outdated.
from js-lingui.
Yes, good catch, sorry for mistake.
It should be:
<I18nProvider language="en" catalogs={{ en: { messages } }} development={dev}>
(just wrap messages in dictionary)
However, it's better to load compiled message catalogs during development, so it works exactly as in production:
import catalog from 'locale/en/messages.js'
const App = () => (
<I18nProvider language="en" catalogs={{ en: catalog }} development={dev}>
...
</I18nProvider>
)
You can compile catalog with lingui compile
. (I guess we could add webpack loader to handle compilation automatically.)
from js-lingui.
Tutorial fixed in #36
from js-lingui.
It's a bit confusing sometimes you use:
import catalog from 'locale/en/messages.js'
and sometimes:
import messages from 'locale/cs/messages.json'
from js-lingui.
I went through docs and it's consistent now.
Recommended way is import catalog from 'locale/en/messages.js
.
The other way is supported for backward compatibility and when you can't/don't want to compile messages. I should probably remove it from docs completely, so it's less confusing.
from js-lingui.
Yes, I think it's better to remove it or to explain the difference between the two file formats.
JSON: Source file from which the catalog will be built
JS: Compiled message catalog
Anyway, I cannot get the lib to work. Is it normal that the compiled format has the form:
{
l: {},
m: {}
}
?
from js-lingui.
My apologies! I was fixing every little detail before the major release and I forgot to document the most important part: unpackCatalog
from lingui-i18n
The message catalog is "minified" and need to be unpacked before loaded:
import { unpackCatalog } from 'lingui-i18n'
import catalog from 'locale/cs/messages.js'
const App = () => (
<I18nProvider language="cs" catalogs={{ cs: unpackCatalog(catalog) }} development={dev}>
<Inbox />
</I18nProvider>
)
Also, take a look at example how to load messages with webpack. It looks way cleaner.
from js-lingui.
Thanks 👍
Also, take a look at example how to load messages with webpack. It looks way cleaner.
Yea, I use this in a similar manner.
If I compile my German messages file, then the compiled catalog contains only the English variant.
My source file contains as example:
{
"This field is required": "Dies ist ein Pflichtfeld",
}
The compiled catalog contains then:
{
"This field is required": "This field is required",
}
It seems that it uses the key also as value.
from js-lingui.
I see. I was able to replicate this error by using old-style message catalog. Format of message catalog have changed as stated in migration guide (https://lingui.gitbooks.io/js/content/guides/migration-1.html#cli).
All you need is run lingui extract
. It will merge translations from previous catalog (even if it's in old format) and generate a new one.
Finally, lingui compile
should work as expected.
After running lingui extract
, the message catalog should look like this:
{
"msg.heading": {
"translation": "Ukázková aplikace",
"defaults": "Application Example",
"origin": [
[
"test/fixtures/App.js",
5
]
]
},
"Example of <0>react-trans</0> usage.": {
"translation": "Příklad použití <0>react-trans</0>.",
"origin": [
[
"test/fixtures/App.js",
7
]
]
},
...
}
from js-lingui.
Sorry, I should better double check the documentation 😉
Can it be the case that lingui extract
doesn't work with flow?
SyntaxError: .../src/apis/I18nAPI.js: Unexpected token, expected , (15:29)
13 | * @returns The message catalog for the given language.
14 | */
> 15 | async fetchCatalog(language: string): Promise<Object> {
| ^
16 | const catalog = await import(
17 | /* webpackMode: "lazy", webpackChunkName: "i18n-[index]" */
18 | `locale/${language}/messages.js`);
from js-lingui.
I'm using flow as well without any issues. lingui-cli
only extends your .babelrc
config, but I guess you use react
plugin, which adds support for flow syntax.
Is fetchCatalog
class method? Standalone functions must have function
keyword after async
:
async function fetchCatalog (language: string) {
...
}
without function
, I'm getting the same error:
SyntaxError: /Users/tricoder/Projects/lingui/lingui-web/src/lingui/locale/ui/I18nLoader/I18nLoader.js: Unexpected token, expected => (9:13)
7 | import { selector } from 'lingui/locale'
8 |
> 9 | async fetchCatalog (language: string) {
EDIT: Actually, it's different error...
from js-lingui.
Is fetchCatalog class method? Standalone functions must have function keyword after async:
Yes, it's a class method.
but I guess you use react plugin, which adds support for flow syntax.
I use neutrino.js which does all the magic. Neutrino pulls in dynamically babel-preset-react
. This means the preset isn't loaded in the .babelrc
file.
Any idea for a workaround?
from js-lingui.
Isolate I18nApi
component, so it doesn't have any translations in it and then ignore it using srcPathIgnorePatterns
config:
{
"lingui": {
"srcPathIgnorePatterns": [
"/node_modules/",
"I18nApi.js$"
]
}
Please update to latest lingui-cli@1.0.3. I fixed pattern matching so it excludes also files, not only directories.
Does it work for you as a temporary workaround? I don't have any translations inside I18nLoader
component, it only takes care of loading translations.
from js-lingui.
@tricoder42 Is it intended that the origin
entry in the messages.json
points multiple times to the same line in the same file?
An example:
{
"Dashboard": {
"translation": "Dashboard",
"origin": [
[
"src\\components\\MainMenu\\MainMenu.jsx",
86
],
[
"src\\components\\MainMenu\\MainMenu.jsx",
86
],
[
"src\\components\\MainMenu\\MainMenu.jsx",
86
],
[
"src\\components\\MainMenu\\MainMenu.jsx",
86
],
[
"src\\components\\MainMenu\\MainMenu.jsx",
86
]
]
},
...
}
from js-lingui.
No, that's definitely bug.
from js-lingui.
Fixed in #39, lingui-cli@1.0.4
from js-lingui.
Related Issues (20)
- Support Gatsby HOT 2
- Cannot find type definition file for './node_modules/@lingui/macro/global'. HOT 2
- Next.js tutorial HOT 3
- The `catalogsMergePath` option is missing in the documentation
- Support backup messages HOT 3
- Extract removes manual comments from po files HOT 1
- React Fragment (`<>`) inside `<Plural>` is not working HOT 5
- Impossible to use with Vite? HOT 1
- definePlural macro HOT 4
- rspack now supports wasm plugins, lingui integration example could be improved HOT 3
- Escaped curly-braces doesn't preserve in development mode HOT 1
- <Trans> breaks React JSX semantics with regards to booleans HOT 3
- Consider renaming of the macro components HOT 2
- selectOrdinal error HOT 2
- Lingui CLI extraction puts msgid as msgstr HOT 3
- i18n._(id) throws error if id param passed as undefined
- # is being replaced by%__lingui_octothorpe__% outside plural and selectordinal HOT 3
- Setup with webpack
- Order by is not alphabetically HOT 1
- t`` macro doesn't work when load and activate message HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from js-lingui.