I want to create a reusable library for my projects. For this exercise, I've got one main library, and then an extension library for "identity" related functionality.
The idea is that I can include the identity module if / when needed, and extend the MainLibrary with a getter to access anything related to identity. Here's my code:
// Main library - index.js (Package name: @mainlib)
export class MainLibrary
{
// ....
}
// Identity library - index.js (Package name: @mainlib/identity)
import { MainLibrary } from '@mainlib';
export function useIdentity()
{
Object.defineProperty(MainLibrary.prototype, "identity", {
get: function()
{
// Returns an identity object
return {
isAuth: function()
{
return false;
}
}
},
enumerable: true
});
}
// App
import { MainLibrary } from '@mainlib';
import { useIdentity } from '@mainlib/identity';
useIdentity();
const myLib = new MainLibrary();
myLib.identity.isAuth(); // Throws error, identity is undefined
If I move the Object.defineProperty code into my App, it works just fine. How can I define this in the extension library and apply it to the MainLibrary class prototype, upon calling useIdentity() in my App?
Oh, I'm building with ViteJS, if that's relevant.
Your MainLibrary object in your app is not the MainLibrary object you import in your extension, because that imports a local version of that by itself.
To solve the issue, instead make useIdentity accept an argument (effectively turning it into what is called a mixin):
// Identity library - index.js (Package name: @mainlib/identity)
export function useIdentity(context)
{
Object.defineProperty(context.prototype, "identity", {
get: function()
{
// Returns an identity object
return {
isAuth: function()
{
return false;
}
}
},
enumerable: true
});
}
and then use it in your app:
// App
import { MainLibrary } from '@mainlib';
import { useIdentity } from '@mainlib/identity';
useIdentity(MainLibrary);
const myLib = new MainLibrary();
myLib.identity.isAuth(); // false