0

I made a plugin library called Aurelia-Slickgrid and I'm looking at adding i18n to support multiple locales. I got it all setup and working in my own development environment but then once I have it all bundled and everything, how will the user use the locale that I created (from node_modules/aurelia-slickgrid/locales)? Will the user have to copy & paste the keys/values that I created? I only have a dozen keys or so, not that big of a deal but still, I would rather use them directly.

The current setup that I have is like this

import { I18N, TCustomAttribute } from 'aurelia-i18n';
import * as Backend from 'i18next-xhr-backend';

export function configure(aurelia: Aurelia) {
  aurelia.use.plugin(PLATFORM.moduleName('aurelia-i18n'), (instance) => {
    instance.i18next.use(Backend);

    return instance.setup({
      backend: {
        loadPath: './locales/{{lng}}.json',
      },
      lng: 'en',
      attributes: ['t', 'i18n'],
      fallbackLng: 'en',
      debug: false
    });
  });
}

I know that I can add the {{ns}} in the play but I don't think that will help me. The problem is more around, how can I add another endpoint? If I add ns like this

loadPath: './locales/{{lng}}/{{ns}}.json', // <-- XHR settings for where to get the files from

It still comes from the same endpoint. So the question is really about, how to handle multiple backend endpoints/paths.

ghiscoding
  • 12,308
  • 6
  • 69
  • 112

1 Answers1

1

Typically the consumer of your plugin will have to bundle his app somehow as well. So having any references to node_modules is definitely not the way, since those files won't be available when accessing the prod app, without the presence of a node_modules folder.

This scenario is pretty much the same as bootstrap and using their custom fonts (glyphicons). You would copy them over to a well-defined place (in your case ./locales) and keep the structure as it is. Youd place them using a custom ns as this is exactly the reason why i18next supports multiple namespaces. So your resulting example would be something like:

./locales/en-US/aurelia-slickgrid.json
./locales/de-DE/aurelia-slickgrid.json
...

The user needs than to make sure to consume those translations using a different namespace.

Having multiple endpoints is not supported by standard translation loaders (see here). The reason would be that the use-case is too specific.

zewa666
  • 2,593
  • 17
  • 20
  • Hmm ok, so you're saying that is like an assets folder which has to be copied over to a centralized assets folder. So I need to use a copyFiles in my webpack config. I didn't think about that approach but it makes sense after a bundling. Thanks – ghiscoding Dec 12 '17 at 14:21
  • Exactly, its just an asset artifact. The i18n plugin extends the default NS itself for the relative time feature to provide Default translations, so take a look at that one to see an alternative to asset Copy Basta – zewa666 Dec 12 '17 at 17:06