javascriptecmascript-nextdefineproperty

How to import prototype getter from custom library using Object.defineProperty()


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.


Solution

  • 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