ToolJS as said in the introductory part of this series, is open-source, is a collection of functions and methods. This means even you can contribute to it, by creating a plugin/module for it.
This is useful, as you get to share your own most used JavaScript functions and methods as a plugin/module on the library.
We will be covering how to create a plugin which can be used alongside the main library in both Node.js and browser.
We will be creating a plugin/module that holds a number of greetings, so lets call it ToolJS-Greetings Plugin.
1. Create a new .js file and give it a name
This is the first step, a pretty obvious one for that matter. Create a .js file and name it anything you like, but preferably with the "tooljs-" prefix for easy recognition. In our case we will call ours "tooljs-greetings.js". This will hold all our plugin code.
2. Check if ToolJS is included in your working environment
This step is very important. For your plugin to be recognized by ToolJS, you have to make sure ToolJS main class (which is the default export in Node and ESM) is included in your working environment either through a Node.js require statement, a script tag, or an ES6 import.
// check if ToolJS is registered in your work environment
if(ToolJS !== undefined){
// rest of your code goes in here
}
else{
console.warn("ToolJS is not registered in your work environment. Include ToolJS before you register a plugin on to it");
}
Now that we are sure ToolJS is available we can go ahead with our plugin code. All our plugin code goes into the "if" block.
3. Write plugin's code
// import the built in "Str" module from the ToolJS library
var Str = ToolJS.export("Str");
// define a function that returns an object for your module
function myModule() {
// module methods
var methods = {
hello: (name) => { alert(`${Str.toUpper(name)} says hello to you.`); },
goodbye: (name) => { alert(`${Str.toUpper(name)} says goodbye to you.`); },
morning: (name) => { alert(`${Str.toUpper(name)} says good morning to you.`); },
afternoon: (name) => { alert(`${Str.toUpper(name)} says good afternoon to you.`); },
evening: (name) => { alert(`${Str.toUpper(name)} says good evening to you.`); }
};
// return the methods
return methods;
};
You might have noticed that we exported the in-built "Str" module from the library. This means that you can use in-built modules and even other plugins for yours too.
As mentioned earlier, we are creating a module that holds a bunch of greetings, each being a method of the module.
Note that your module function MUST return an object of methods
4. Register the Plugin.
Its time to register our plugin unto the ToolJS library(locally). This can be achieved using the ToolJS.register method made available by the library. This method accepts two(2) parameters
- moduleName - The name to register your plugin as.
- moduleFunc - The function that exports your modules methods.
// use ToolJS register method to register your module.
// the first parameter of the method is the module name, and the second is the module functions/methods
ToolJS.register("Greet", myModule);
The code above will register our plugin/module as "Greet", which means when we want to export it's methods, we'll pass "Greet" to the ToolJS.export method.
You can optionally wrap the whole code in an iife format and store it in a variable, for easy export using either CJS or ES6 formats, depending on your preference. You can host your plugin either on NPM or on a CDN.
See the full code below
5. Using a created plugin
So we created a plugin, its time to actually use it. The usage depends on your environment.
For Node.js
const ToolJS = require("@redeakaa/tooljs").default;
const Greet = require("./path/to/tooljs-greetings.js");
Greet.hello("Okoro Redemption");
// alerts "OKORO REDEMPTION says hello"
For ES6
import ToolJS from "./path/to/tooljs.esm.js";
import Greet from "./path/to/tooljs-greetings.js";
Greet.hello("Okoro Redemption");
// alerts "OKORO REDEMPTION says hello"
For Browser
<script src="https://unpkg.com/@redeakaa/tooljs@1.0.1/dist/umd/tooljs.min.js"></script>
<script src="./path/to/tooljs-greetings.js"></script>
var Greet = ToolJS.export("Greet");
Greet.hello("Okoro Redemption");
// alerts "OKORO REDEMPTION says hello"
See the full code of the example plugin below
var tooljsPlugin = (function(){
// check if ToolJS is registered in your work environment
if(ToolJS !== undefined){
var Str = ToolJS.export("Str");
// define a function that returns an object for your module
function myModule() {
// module methods
var methods = {
hello: (name) => { alert(`${Str.toUpper(name)} says hello to you.`); },
goodbye: (name) => { alert(`${Str.toUpper(name)} says goodbye to you.`); },
morning: (name) => { alert(`${Str.toUpper(name)} says good morning to you.`); },
afternoon: (name) => { alert(`${Str.toUpper(name)} says good afternoon to you.`); },
evening: (name) => { alert(`${Str.toUpper(name)} says good evening to you.`); }
};
// return the methods
return methods;
};
// use ToolJS register method to register your module.
// the first parameter of the method is the module name, and the second is the module functions/methods
ToolJS.register("Greet", myModule);
}
else{
console.warn("ToolJS is not registered in your work environment. Include ToolJS before you register a plugin on to it");
}
})();
// export the tooljsPlugin variable as needed by the environment specifics. Omit for browser usage.
// For Node.js
modules.export = tooljsPlugin;
// For ES6
export default tooljsPlugin;
See the Pen ToolJS: Creating a Plugin by Redemption Okoro (@akaawereniya) on CodePen.
Conclusion
ToolJS offers its user the ability of extending the libraries functionalities by creating plugins/modules which can be used alongside the library itself and shared amongst other developers.
Top comments (0)