Flatten BaseTranslation object

[seancolsen]

Current behavior

src/i18n/en/index.ts looks like this:

const en: BaseTranslation = {
  general: {
    import: 'Import',
    // ...
  },
  importUploadPage: {
    uploadAFile: 'Upload a file',
    // ...
  },
  // ...
};

Then in ImportUploadPage.svelte we do:

$LL.importUploadPage.uploadAFile()

Desired behavior

I would like src/i18n/en/index.ts to instead look like this:

const en: BaseTranslation = {
  import: 'Import',
  uploadAFile: 'Upload a file',
  // ...
};

Then in ImportUploadPage.svelte we would do:

$LL.uploadAFile()

[seancolsen]

@rajatvijay

What is the rationale for the nesting that you've set up?

Here's why I don't like the nesting:

• It's unnecessarily verbose.
• When I'm adding new strings to the base translation, it's not clear whether I should put them in general, or put them in a different, more specific sub-object.
• In the event that we decide to refactor one component into two or two components into one, re-organizing the translation nesting would be unnecessarily burdensome.
• It's more difficult to re-use strings. For example the Import Upload page has the string "Upload a file". Let's pretend we design a feature for users to set their own avatar and we want to have that same text within some UI where they upload their avatar file. Duplicating the source string is not great because it creates more work for the translators and larger translation bundles. We could move uploadAFile out of importUploadPage at that point, but then that would require refactoring to modify all references to that string.

Would you be okay with the flattened structure that I'm proposing above? If so, I'd like to implement this before continuing to wrap more strings in translations.

[seancolsen]

@rajatvijay I've assigned this to you to answer my questions above.

[seancolsen]

@rajatvijay and I discussed this in our 1/1 meeting today and he agreed to go with my proposed flattened approach. As such, I'm un-drafting this ticket and leaving it assigned.