[DX] Would love to see t() directly injected by WithI18n-hoc about js-lingui HOT 5 CLOSED

Closing for now, as I'm still not convinced about exposing t besides i18n.

I would rather make const { t } = this.props.i18n work, but that requires a bit of design change.

Thank you anyway for suggesting b)!

from js-lingui.

Hello,
thank you for your valuable feedback and spending some time with jsLingui.

a) From i18n object you can get a lot more stuff than just t method - active language, info about language (:warning: planned feature) and all formatting methods: t, plural, select, selectOrdinal, number and date. In future the lib should also support custom formatters (e.g. range, relative, etc).

I felt that namespacing all i18n-relevant attributes and methods is better than polluting component namespace. Also, if you're using i18n.t too often, you can always add const { t } = this.props.i18n at the top of your render method.

b) That's actually pretty good idea. I saw few libs with capitalized letters, but looking and some examples (react-router, react-redux) it's clear, that lower cased first letter is more common. It also makes sense - upper case for components, lower case for functions. HOC is basically just factory for component. Would you like to add PR with withI18n while updating WithI18n to log deprecation warning?

from js-lingui.

Hey,

I was talking about exposing t() as a shortcut, not about replacing the i18n-object ;)
I'll try to find time for a PR today.

Thanks for your work! 👍

from js-lingui.

Hi @benbender,
just the follow up: This problem is a bit more complex.

Babel plugin is looking for t (plural, select, etc.) method bounded to i18n object. It doesn't even check if the i18n object comes from lingui or it's your own variable. I solved similar problem with Trans component in React by checking the imports at the top of file.

In this case I need to figure out, how to check that i18n object actually comes either from WithI18n HOC or react-i18n. Problem is, that Trans component can access context implicitly thanks to React, while in plain JS there's no such thing as context and I have to bind translating methods to i18n object.

TL;DR: My suggested workaround const { t } = this.props.i18n won't work...

from js-lingui.

Also, b) is fixed in latest [email protected] release.

from js-lingui.