Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Apr 04 22:22
    tricoder42 synchronize #344
  • Apr 04 21:19
    tricoder42 synchronize #344
  • Apr 04 17:31
    tricoder42 edited #334
  • Apr 04 17:31
    tricoder42 edited #334
  • Apr 04 17:31
    tricoder42 edited #334
  • Apr 04 17:31
    tricoder42 edited #334
  • Apr 04 16:05
    tricoder42 synchronize #344
  • Apr 04 14:59
    tricoder42 synchronize #344
  • Apr 04 14:48
    tricoder42 synchronize #344
  • Apr 04 14:39
    tricoder42 synchronize #344
  • Apr 04 11:40
    tricoder42 synchronize #344
  • Apr 03 10:58
    tricoder42 closed #626
  • Apr 03 10:39
    stekovinbranturry opened #626
  • Apr 02 09:53
    semoal opened #625
  • Mar 27 10:15
    lolenko edited #624
  • Mar 27 10:13
    lolenko edited #624
  • Mar 27 10:13
    lolenko opened #624
  • Mar 19 19:30
    tricoder42 synchronize #344
  • Mar 18 17:48
    tricoder42 labeled #623
  • Mar 18 17:47
    tricoder42 labeled #618
Cosmin Lehene
@clehene

@tricoder42 thank you. I reason that the right way to use it is also

plural({
        0: 'nothing',
        value: count,
        one: '# active item',
        other: '# active items',
      })

I first noticed it doesn't work with zero

      plural({
        zero: 'nothing',
        value: count,
        one: '# active item',
        other: '# active items',
      })
Tomáš Ehrlich
@tricoder42
Is it for English locale? English doesn't have zero, only one and other
Cosmin Lehene
@clehene
@tricoder42 the question is regarding 0 vs zero I'm guessing 'nothing' and its translations would show up correctly in this case.
I have a bigger / more concerning issue, though. I wasn't able to figure it out from the docs how to handle component libraries.

It works fine for the main App

          <I18nProvider
            language={i18nStore.language}
            catalogs={i18nStore.catalogs}>
            <MainContainer />
          </I18nProvider>

However we have shared component library common-ui which is shared across apps . I figured out how to extract translations (see lingui/js-lingui#415 issues), but not clear what's the right way to pass / merge the common-ui catalog

SilentImp
@SilentImp
peoples how I should dynamicly load language on server side for next.js application?
example in the documentation don’t work this way, because useEffect/didMount is absent on the server side.
And getInitialProps is not an answer, because next.js it actually add translations to html this way. And this is +40kb.
also is it possible to compile messages from the script?
I can readFileSync on the server side, but compiled massages.js contain source code for module that eval fails to execute.
But if I load json file instead and then compile it from inside the script and pass to I18nProvider — maybe it will help.
Daniel K.
@FredyC
@SilentImp Are you sure of useEffect not available on server? I know that useLayoutEffect does not work there (for obvious reasons), but running side effects is basic no matter if you are client or server
if you stop comparing it to lifecycle methods, it will be much easier for you ;)

for compilation you basically need this

  const { getConfig } = require('@lingui/conf')
  const config = getConfig()

  const { configureCatalog } = require('@lingui/cli/api')
  const catalog = configureCatalog(config)

  const { createCompiledCatalog } = require('@lingui/cli/api/compile')

it's not really documented anywhere, but source is easy to read

SilentImp
@SilentImp

Are you sure of useEffect not available on server?

yes, I have double tested it

Daniel K.
@FredyC
I kinda refuse to believe that, possibly some error in your code? documentation does not mention such limitation
SilentImp
@SilentImp
console.log inside effect don’t output anything, but give me a second
nope, nothing
Daniel K.
@FredyC
ok I guess you have to battle with that on your own, SSR is not my strong suite, perhaps ask over at next.js how to run server side effects?
there surely must be a way
based on that useEffect indeed does work server side, something wrong with your setup
SilentImp
@SilentImp
thanks, I will try to dive into it.
thank you very much for compile
SilentImp
@SilentImp
@FredyC looks like @lingui/conf using fs inside so it’s not actually possible to use it on client >__<
Daniel K.
@FredyC
@SilentImp I did not really understand what problem you have with compiling server side, but moving that to client could hardly make it any better
SilentImp
@SilentImp
@FredyC the reason is quite unexpected: When I adding it to the bundle on build stage — translations are inside the build. Because the build is same for all languages — I got all languages bundled. We don’t have a need or way to switch the languages, it’s different projects for different countries on different domains, thats seems a huge overhead. So I don’t want bundle all languages. When build is complete docker image is chached and because of some devops reasons I can’t reproduce it’s hard to overcame. As a result translations may get to the production outdated. So I don’t want to add translations to boundle at all. If I will load translations from the files each time it would be a loading of one single language, that may be cached by the client and served by CDN. Also with webhook from the translations system (crowdin) I may update this files as soon as translations changed and translations will be updated without need to redeploy or rebuild the project. That’s my intent. Make translations process relyable and separate them from development process as far as possible.
Daniel K.
@FredyC
um, have you tried code splitting? :)
SilentImp
@SilentImp
code splitting create bundles.
on the build stage.
so it wouldn’t solve the docker image caching problem.

I end up with this solution: hacky, scary, but should work as I want it to:
https://github.com/SilentImp/langLoader/tree/moveout

The main problem is the manual creation of catalog.
I am not sure if I can just add plurals like this:

import * as plurals from "make-plural/plurals”;
//…
const messages = JSON.parse(fs.readFileSync(`locales/${language}/messages.json`, 'utf-8'));
const catalog = {
      [language]: {
        messages: messages,
        languageData: {
          plurals: plurals[language]
        }
      }
    };
I don’t actually see anything but plurals inside of languageData in the lingui.js code, but maybe I am missing something.
Daniel K.
@FredyC
@SilentImp no idea what to do about your case ... this might interest you, but that's still very much in the wind lingui/js-lingui#508
you might add some thoughts there for sure
SilentImp
@SilentImp
thanks, I will read it
SilentImp
@SilentImp

Hi,
sorry I still need help.
I thought that everything is OK, but on production mode I face the fact that

Formatting of messages as strings (e.g: "My name is {name}") works in development only, when messages are parsed on the fly. In production, however, messages must be compiled using compile command.

but what can I do if I can’t actually load a modules as files?
and if I will try to compile messages each time it would be the same as parse on the fly?

SilentImp
@SilentImp
resolved by reading and parsing es6 module
            (async ()=>{
              try {
                const response = await fetch('/static/locales/${LOCALE}/messages.js');
                const catalogText = await response.text();
                const catalog = new Function(catalogText.replace('/* eslint-disable */export default', 'return '));
                window.catalog = catalog();
              } catch (error) {}
            })();
Daniel K.
@FredyC
that's nasty :D
SilentImp
@SilentImp
ok … it’s not really working in firefox.
without any errors.
does lingui.js have any debug mode so I can find out why in the production mode it can’t interpolate stuff in FF?
SilentImp
@SilentImp
omfg. looks like ff can’t handle preload and http2 push and just load app bundle before translations.
Daniel K.
@FredyC
you seem to be overcomplicating everything, instead of trying to resolve docker issue you are adding bunch of hacks that does not make much sense :)
SilentImp
@SilentImp
I also start to feel this way.
But it’s not only about the docker.
I want to separate translations process and development.
If I will succeed — translations can be updated from the crowding and they will appear in the project without rebilding and redeploying it.
(crowdin have a webhook, and we have a service that actually can run command in all pods and get new translations from crowdin)
ArtMiroslav
@ArthurMiroslavsky
Hi, i need a help.
I get this error, when do server side rendering - Trans(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
I use nodemon and ts-node without babel
Alex Szabo
@delanni
Hi friends! I didn't want to create an issue just yet, this might be some simple oversight from my side, but please help me understand this bit:
  • Why is i18n.plural removed from the production build? https://github.com/lingui/js-lingui/blob/master/packages/core/src/i18n.js#L77-L82
  • It's really misleading, as the typings will still have these signatures, and it's not mentioned anywhere in the docs that this would not be present on the prod build :/
  • I've seen other alternatives to getting my plurals done, but this seems like the most straightforward, why should I not use this in production?
Cezar Neaga
@cezarneaga

would it be possible to enhance plurals to allow instead of below:

<Plural
                        value={count}
                        one={
                            <>
                                <Trans>
                                     <strong>{count}</strong> year
                                </Trans>
                            </>
                        }
                        other={
                            <>
                                <Trans>
                                     <strong>{count}</strong> years
                                </Trans>
                            </>
                        }
                    />

to use

<Plural
   value={count}
  one={`<strong>${count}</strong> year`}
  other={`<strong>${count}</strong> years`}
/>
Cezar Neaga
@cezarneaga
or even better:
<Plural
  value={count}
  one="<strong>#</strong> year"
  other="<strong>#</strong> years"
/>
Daniel K.
@FredyC
<Trans><Plural ... </Trans> should work as well
not sure why do you have fragments (<>) there
Cosmin Lehene
@clehene
Is there any documentation (or even possible) on how to use lingui with a library?
Dany Alawwa
@dalawwa
image.png
Hi,
when running lingui extract with my current config, I get the error above :
image.png
By adding @babel/preset-react I am able to extract, however, I am not sure this is the way to go, as I could not find anything about it in the docs.
I use parceljs to build my project

Could you confirm that this is the correct approach ?

Additional info: I found a @lingui/babel-preset-react package but I could not have it working

Dany Alawwa
@dalawwa

current config :

.linguirc
image.png

.babelrc
image.png

package.json devDependencies
image.png

package.json dependencies

image.png