How do you create/test an i18next plugin?

[reZach]

I'm trying to test the i18next-electron-fs-backend i18next plugin I wrote, that is testable in this repo. The plugin is meant to mimic the i18next-node-fs-backend, but within Electron.

TL;DR - this plugin is meant to make use of the ipcRenderer/ipcMain modules Electron provides to facilitate writing to disk, while maintaining SOC (separations of concerns) to keep your app secure.

I'm sad, because the documentation for creating plugins is quite sparce, but I think I've managed to write enough in order for the plugin to work. I am running into a problem, because I don't know how to test my plugin! As you can see in the source code of the plugin, I've written console.log statements in the relevant methods (read, create, etc) but I do not see anything in the console (below) when the component renders. The proper i18next::translator: missingKey en translation Detail.SampleText Detail.SampleText (I assume) messages displays, but nothing else happens.

A fully-functioning demo is available for you to test locally:

-- command line
git clone https://github.com/reZach/secure-electron-template.git
cd secure-electron-template
npm i
npm run dev

-- electron app
Click the "Click me to go the main page." link
Notice Console

[jamuhl]

No backend was added -> My guess is you did not set the type: 'backend' on your class or singleton

https://www.i18next.com/misc/creating-own-plugins#backend

like in the node-fs-backend: https://github.com/i18next/i18next-node-fs-backend/blob/master/src/index.js#L167

[reZach]

Thank you @jamuhl, that got me a step further. I see I needed to do one more step after I added this type to my Class - I could not check for anything in the options object, doing so threw an error. I needed to change my constructor to this:

constructor(services, backendOptions = {}, i18nextOptions = {}) {
    console.log("constructor");
    // if (typeof this.backendOptions.ipcRenderer === "undefined") {
    //     throw "Could not initialize because the 'ipcRenderer' option was not set!";
    // }

    this.init(services, backendOptions, i18nextOptions);
    this.readCallbacks = {};
    this.writeCallbacks = {};
    this.writeQueue = {};
    this.writeQueueBuffer = {};
}

[jamuhl]

Hi @reZach do all set and validation in the init function like: https://github.com/i18next/i18next-node-fs-backend/blob/master/src/index.js#L68 the constructor is called without arguments when "using" the plugin as class. (Only using arguments if https://github.com/i18next/i18next-node-fs-backend#backend-options -> passing options on construction and using an instance of the class)

[reZach]

Thank you @jamuhl. Would you like me to create a PR to update the plugin documentation to include these details? I feel it would assist you as to not answer many questions about this. I could do so when I get free time.

[jamuhl]

Sure...improving the documentation is very valuable (and something I struggle hard with (having created most of the code - I sometimes get blind to the difficulties in using it) - so many options / details, what is important to devs). So yes - help is very welcome.

[reZach]

Yes, documentation is always very good and helps give you more time to work on other tasks. I am planning to add more details after I've got there (and hopefully uncovered good documentation to write up!)

Having resolved my blocker to test this plugin, I've come across another question for you @jamuhl. I am seeing the translation file load, but I am seeing i18next say the translation file is missing. My read function is doing the same as yours and my console messages lead me to believe everything is working.

// Reads a given translation file
read(language, namespace, callback) {
    const {
        loadPath
    } = this.backendOptions;
    let filename = this.services.interpolator.interpolate(loadPath, {
        lng: language,
        ns: namespace
    });

    this.requestFileRead(filename, (error, data) => {
        if (error) return callback(error, false); // no retry
        callback(null, data);
    });
}

[jamuhl]

Your key is Detail.SampleText -> i18next per default use nested objects so it would search in a JSON looking like:

{
  "Detail": {
    "SampleText": "lorem ipsum"
  }
}

You can change this behaviour by setting keySeparator: false on init....

[reZach]

Ah!, some of the configuration values I always get caught up on, thank you!
I've created a pull request for some of the information I've learned through your help. Let me know if anything needs correcting. I am happy to contribute to your repository.

[jamuhl]

Already merged....👍