add `namespaces` functionality

[ivanhofer]

add `namespaces` functionality

[mullwaden]

Kind of related feature that might be interesting. In a very large project, having all of the copy in one place becomes challenging. Right now (I could be wrong) the setup forces a structure like:

src/notifications/published.ts
src/i18n/translations/en/published_copy.ts
src/i18n/translations/de/published_copy.ts

whereas something like this, allowing the copy to be colocated with the component/function could be very helpful to avoid jumping around in the codebase:

src/notifications/published.ts
src/notifications/published_copy.ts  (perhaps with sub-exports like   export const en = { } )

[ivanhofer]

I'm not sure if I got it correct.

You can do that already, but you would need to import these objects inside the src/i18n/[locale]/index.ts file.
To simplify the generator, it uses the index.ts file's default export as the entry point to all your locales. What you then do inside that file is up to you. You can import anything that lays inside the root of your project.

You can have a file src/notifications/published.ts that exports part of a dictionary in multiple languages like

export const notifications_en = {
  prop1: 'This is a test'
}

export const notifications_de = {
  prop1: 'Das ist ein test'
}

and then reference it inside src/i18n/en/index.ts like

import { notifications_en } from 'src/notifications/published.ts'

const en: BaseTranslation = {
   ...notifications_en
}
export default en

and inside src/i18n/de/index.ts like

import { notifications_de } from 'src/notifications/published.ts'

const de: Translation = {
   ...notifications_de
}
export default de

Is this what you want?

[ivanhofer]

@mullwaden did you see my comment above?

[mullwaden]

yes! I ended up putting everything in the translations folder though. It works better with the automatic updates of the types.

One idea would be to go the route that jest, storybook and less go, where they automatically pick up files, e.g.
myClass.ts
myClass.test.ts

Imagine then you could do something like

import translation from "./myClass.translation";

const title = translation.en.title();

It can be done, but it would require some interesting webpack shenanigans... In fact you could probably at that point entirely hide the types file and make it part of the regular build process.

[ivanhofer]

@mullwaden sounds interesting. Pleas open a discussion with some more details. Maybe it is a topic for the future.