Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How do you create/test an i18next plugin? #1379

Closed
reZach opened this issue Jan 7, 2020 · 9 comments
Closed

How do you create/test an i18next plugin? #1379

reZach opened this issue Jan 7, 2020 · 9 comments

Comments

@reZach
Copy link

@reZach reZach commented Jan 7, 2020

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.

image

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

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Jan 7, 2020

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

This comment has been minimized.

Copy link
Author

@reZach reZach commented Jan 8, 2020

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

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Jan 8, 2020

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

This comment has been minimized.

Copy link
Author

@reZach reZach commented Jan 10, 2020

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

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Jan 10, 2020

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

This comment has been minimized.

Copy link
Author

@reZach reZach commented Jan 13, 2020

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.

image

// 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

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Jan 13, 2020

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

This comment has been minimized.

Copy link
Author

@reZach reZach commented Jan 14, 2020

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

This comment has been minimized.

Copy link
Member

@jamuhl jamuhl commented Jan 14, 2020

Already merged....👍

@jamuhl jamuhl closed this Jan 16, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.