Document how to load Banana with ES6 native modules

[Jaifroid]

There doesn't appear to be any information. Doing something like:

import { Banana } from '../node_modules/banana-i18n/dist/banana-i18n.js';

... results in an error The requested module '/node_modules/banana-i18n/dist/banana-i18n.js' does not provide an export named 'Banana'...

[Jaifroid]

To answer my own issue and for the benefit of others, it would be great if a sample ES6 module like the below (which is now working for me) could be documented in Banana's documentation:

/**
 * translateUi.js : Translation of the user interface
**/

'use strict';

/* global Banana */

import '../../../node_modules/banana-i18n/dist/banana-i18n.js';
import es from '../../../i18n/es.json';
import en from '../../../i18n/en.json';

const banana = new Banana();

// Load the messages for English and Spanish
banana.load(en, 'en');
banana.load(es, 'es');

// Set the language to Spanish
banana.setLocale('es');

// Translate the UI
function translateApp () {
    document.querySelectorAll('[data-i18n]').forEach((element) => {
        element.innerHTML = banana.i18n(element.dataset.i18n);
    });
}

export default {
    translateApp: translateApp
};

In your index.html any element to be translated would have a data-i18n="message" attribute added to it.

Then, you import this module from (e.g.) your main app.js, and you can use translateUI.translateApp(); once your DOMContent is loaded.

[Jaifroid]

I'm finding that importing JSON files is supported in very few browsers, and the bundling system has issues with it too, so it's better to use old-fashioned XHR or else Fetch as per documentation.

And while this works with native ES6 modules, my bundler (Rollup) doesn't seem capable of bundling banana-i18n due to lack of exports. Does anyone know how to make a wrapper to provide an export? I tried:

banana.module.js:

import '../../../node_modules/banana-i18n/dist/banana-i18n.js';
export default Banana;

After bundling, this produces the error that Banana is not a constructor... But it works fine with native modules. Go figure.

[kabir-afk]

Hey, I had been working on the migration of a chrome extension from manifest V2 to V3 , and apparently it shows that the Banana constructor is not defined despite being imported through popup.html cdn, this seemed relevant to your issue since I think I am having some trouble with importing as well. I cant use import or require statements , but even so cdn should work as expected , as it was working earlier in manifest V2 background-script.