i18next / i18next-multiload-backend-adapter Goto Github PK

This is a i18next backend to enable another backend's multiload behaviour of loading multiple lng-ns combinations with one request.

License: MIT License

JavaScript 98.09% TypeScript 1.91%

i18next-multiload-backend-adapter's Introduction

Introduction

This is a i18next backend to enable another backend's multiload behaviour of loading multiple lng-ns combinations with one request.

Your backend needs to return this structure:

{
  [lang] : {
    [namespaceA]: {},
    [namespaceB]: {},
    // ...etc
  },
  [lang2] : {
    // ...etc
  }
}

Here you can find a simplified example.

Getting started

Source can be loaded via npm or downloaded from this repo.

# npm package
$ npm install i18next-multiload-backend-adapter

Wiring up:

import i18next from 'i18next';
import BackendAdapter from 'i18next-multiload-backend-adapter';

i18next
  .use(BackendAdapter)
  .init(i18nextOptions);

As with all modules you can either pass the constructor function (class) to the i18next.use or a concrete instance.
If you don't use a module loader it will be added to window.i18nextMultiloadBackendAdapter

Backend Options

{
  // array of existing i18next backends from https://www.i18next.com/plugins-and-utils.html#backends
  backend: BackendSupportingMultiload,

  // array of options in order of backends above
  backendOption: { /* options of adapted backend */ },

  // interval to wait for calling readMulti after receiving a read
  debounceInterval: 50
}

Options can be passed in:

preferred - by setting options.backend in i18next.init:

import i18next from 'i18next';
import BackendAdapter from 'i18next-multiload-backend-adapter';

i18next
  .use(Backend)
  .init({
    backend: options
  });

on construction:

  import BackendAdapter from 'i18next-multiload-backend-adapter';
  const Backend = new BackendAdapter(null, options);

via calling init:

  import BackendAdapter from 'i18next-multiload-backend-adapter';
  const Backend = new BackendAdapter();
  Backend.init(options);

more complete sample

import i18next from 'i18next';
import BackendAdapter from 'i18next-multiload-backend-adapter';
import Http from 'i18next-http-backend'; // have a own http fallback

i18next
  .use(BackendAdapter)
  .init({
    backend: {
      backend: Http,
      backendOption: {
        loadPath: '/locales?lng={{lng}}&ns={{ns}}' // http load path for my own fallback
      }
    }
  });

TypeScript

To properly type the backend options, you can import the MultiloadBackendOptions interface and use it as a generic type parameter to the i18next's init method, e.g.:

import i18n from 'i18next'
import BackendAdapter, { MultiloadBackendOptions } from 'i18next-multiload-backend-adapter'

i18n
  .use(BackendAdapter)
  .init<MultiloadBackendOptions>({
    backend: {
      backend: Http,
      backendOption: {
        loadPath: '/locales?lng={{lng}}&ns={{ns}}' // http load path for my own fallback
      }
    },

    // other i18next options
  })

Gold Sponsors

i18next-multiload-backend-adapter's People

Contributors

Stargazers

Watchers

Forkers

fbarbare runar-indico zhangyugege isabella232 paton ghdevs

i18next-multiload-backend-adapter's Issues

Migration 10.x 11.x and combining i18next-chained-backend & i18next-multiload-backend-adapter

Hello there,

Nice work you done here ;)

Just tried to migrate from a 10.x to 11.x and got issue when coupling i18next-multiload-backend-adapter && i18next-chained-backend and couldn't make it.

Notes

First a little typo in backendOptions:

i18next-multiload-backend-adapter	i18next-chained-backend
backends: BackendSupportingMultiload	backends: [],
backendOptions: { }	backendOptions: []

But seems more complex than just a name refactor ;)

Details

i18n plugins:

i18next-chained-backend
i18next-multiload-backend-adapter
i18next-localstorage-backend
i18next-xhr-backend

When tried to mixing both with duplication of options, I got multiple error on missing key on the first language I'm preloading. Like only the first language load is preserved and the following doesn't matter.

So would love to got any example working.

Thanks !

[Question] Multiload with CMS

Hello everyone,

I use i18next and my languages are in Contentfull CMS

The structure of the CMS is as follows:

${URL}/spaces/${SPACE_ID}/entries/ENTRY_ID

curl -X GET "https://cdn.contentful.com/spaces/SPACE_ID/entries/ENTRY_ID?access_token=TOKEN&locale=en-US"

Return

{
  "sys": {
    "locale": "en-US"
  },
  "fields": {
    "slug": "people",
    "labelsIntendedCredit": "How much you need?",
    "labelsFullName": "What your full name?",
    "labelsEmail": "What your e-mail?",
    "labelsAllowEmail": "I want to receive Creditas newsfeed in your email?",
    "placeholdersIntendedCredit": "Min R$ 30.000",
    "placeholdersFullName": "Name and last name",
    "placeholdersEmail": "[email protected]",
    "phrasesEmailAlreadyExists": "E-mail already registered.",
    "phrasesCpfAlreadyExists": "CPF already registered.",
    "flashAreYouRegisteredWithEmail": "This e-mail already registered. Are you already our customer?",
    "flashAreYouRegisteredWithCpf": "This CPF already registered. Are you already our customer?"
  }
}

I need to make some requests for different ENTRY_ID, I read a lot of documentation, codes, etc., and I can't say if it's possible to do that.

curl -X GET "https://cdn.contentful.com/spaces/SPACE_ID/entries/OTHER_ENTRY_ID?access_token=TOKEN&locale=en-US"

Can you help me understand this point please?

Extract locales from JSON

Hi, I'm trying to exctact locales from a API call wich response with a json that have a nested object with an array containing the languages I need.

Example

response = {
attr1: "some"
att2: "foo"
lang: {es: [...], en: [...]}
}

I need to extract es and en from this response.

Is there a way to achieve what I need using this plugin? Thank you!