What is the best way to replace a core class from a library with a new

I am currently utilizing an npm library which contains a class called MapRepository with promise methods for fetching data from the server:

export class MapRepository {
 constructor(
    readonly globalEvents: MapGlobalEvent,
    baseWebApiUrl: string,
    readonly userKey: string = null
  ) {}

    getAllRegistry() {
       return this.credentialFetch(this.webApi.registry)
       .then((res) => res.ok && res.json())
       .catch(catchRequestError([]));
   }

}

I have the need to extend and overwrite this class by creating a new class CoreReonMapRepository. My goal is to replace promises with RXJS observables using Http client.

export class CoreReonMapRepository extends MapRepository {
  constructor(private http: HttpClient) {
      super();// I encounter an issue here
  }

  getAllRegistry(): Observable<any> {}
}

The problem arises when I have to pass parameters in the parent constructor again, even though MapRepository is already loaded in the library. This violates the rule that top modules should not depend on lower-level modules.

How can this be resolved?

Somewhere deep within the core of the library:

 this.repository = new MapRepository(
        this.globalEvents,
        webApiUrl,
        this.props.userKey
      );

Answer №1

If you find yourself in a situation where you have limited options, one approach is to require all the arguments and then pass them on to the parent's constructor

export class CoreReonMapRepository extends MapRepository {
  constructor(
    private http: HttpClient,
    readonly globalEvents: MapGlobalEvent,
    baseWebApiUrl: string,
    readonly userKey: string = null
  ) {
      super(globalEvents, baseWebApiUrl, userKey);
  }

Another option is to not extend the parent class, but instead create a decorator or proxy that mimics the interface of MapRepository. This way, you can simply inject an instance of MapRepository into your new class, allowing the rest of your application to interact with your new implementation

export class CoreReonMapRepository {
  constructor(
    private http: HttpClient,
    private innerMapRepository: MapRepository
  ) {}

  getAllRegistry() {
    // perform additional tasks
    return this.innerMapRepository.getAllRegistry()
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve a list of all file names within a designated directory using Angular

I am working on my Angular app and I need to list all the file names inside the assets folder. To achieve this, I am planning to utilize the npm library called list-files-in-dir https://www.npmjs.com/package/list-files-in-dir Here is the service impleme ...

What is the method to track the movement of the mouse in the reverse direction?

I am looking to create a unique div that moves in the opposite direction of the mouse cursor within another div called .box. As the mouse moves, I want the red box to create a subtle parallax effect by slightly moving in the opposite direction. Instead of ...

The positioning of the Three.js THREE.Projector has been adjusted to a new location

It has come to my understanding that in version 71, the THREE.projector is no longer available (refer to the deprecated list). However, I am uncertain about the replacement process, especially in this code snippet designed to identify the clicked object: ...

The Javascript code within the CodeIgniter view is failing to function

After searching for a while, I have yet to find a solution to my issue. I wrote a JavaScript script to check the match of the password and confirm password, but it doesn't seem to be executing. Additionally, I tried another script to close a popup usi ...

Is JavaScript overwriting the existing value?

I am completely new to JavaScript and I am struggling with a seemingly simple issue. I have an array of usernames that I am iterating over. My goal is to map these usernames to click event methods, although I am aware that this may not be the most efficien ...

Is there a way to track dynamic changes in window dimensions within Vue?

Working on my Vue mobile web app, I encountered an issue with hiding the footer when the soft keyboard appears. I've created a function to determine the window height-to-width ratio... showFooter(){ return h / w > 1.2 || h > 560; } ...and ...

Implementing a NextJS client component within a webpage

I am currently working with NextJS version 14 and I am in the process of creating a landing page. In one of the sections, I need to utilize the useState hook. I have specified my component as "use-client" but I am still encountering an error stating that " ...

Learn how to extract an ID created with AngularJS using JavaScript

I have a piece of code that generates multiple divs using ng-repeat and assigns each one an id based on a specific value. <div ng-repeat="item in $scope.items"> <div id="ajs-{{item.title}}">{{text}}</div> <script> v ...

A versatile JavaScript function that can be applied to multiple elements and accurately determine which element triggered its execution

Let's say we have a set of 12 div tags, each representing a different month. Whenever one of these divs is clicked on, it should display the corresponding content for that specific month while hiding all other months' content. All 12 month divs ...

The transfer of character data from PHP to jQuery is not successful

Working with HTML files In this scenario, the values for the sub combobox are being retrieved through a PHP select query and these values are in character format. I have successfully tested passing integer values. <select name="sub" id="sub"> ...

Obtain the node identifier within the Angular UI Tree component [angular-ui-tree]

Utilizing Angular UI tree to create a relationship between items and categories has been successful in the default setup. However, a new requirement has emerged to incorporate node/section numbering within the tree for managing hierarchy. I attempted to i ...

Styling in Svelte/TS does not change when applied through a foreach loop

I've been experimenting with creating a unique "bubble" effect on one of my websites, but I'm facing difficulty changing the styling in a foreach loop. Despite no errors showing up in the console, I'm at a loss as to how to effectively debu ...

The useState variable remains unchanged even after being updated in useEffect due to the event

Currently, I am facing an issue in updating a stateful variable cameraPosition using TypeScript, React, and Babylon.js. Below is the code snippet: const camera = scene?.cameras[0]; const prevPositionRef = useRef<Nullable<Vector3>>(null); ...

The first click causes Highchart to display with varying heights

I have implemented a highchart within a chart object in HTML, with CSS defining the height and width of the chart object. Initially, upon first render, the chart has a height of 290px. However, when I click on the tab again, the chart stretches to a height ...

Verify the pop-up browser window that appears when the page begins to reload using Cucumber

After completing one scenario, the page automatically refreshes. A JavaScript modal is displayed on the website asking the user "Are you sure you want to leave the page?" I need to confirm that modal, but every time I try to create a step for it, I encount ...

Ways to create space around Navbar MUI for a more balanced design

Currently, I am working on designing a navigation bar using MUI. My goal is to create a navbar with some space on both sides similar to the one seen on https://i.sstatic.net/lPXyC.png If you take a look at Stackoverflow's navbar, you will notice that ...

Set up npm and package at the main directory of a web application

Currently, I am in the process of developing a web application using node.js. Within my project structure, I have segregated the front-end code into a 'client' folder and all back-end logic into a 'server' folder. My question revolves a ...

How to trigger useEffect when the state changes to the same value using React hooks?

Currently working on a drum-pad app, most features are functional except for one small issue. Quick update: Uploaded the project to codesandbox for anyone willing to take a look: codesandbox.io/s/sleepy-darwin-jc9b5?file=/src/App.js const [index, setIndex ...

When using Owl Carousel in Chrome, the carousel unexpectedly stops after switching tabs

Hi there, I'm currently testing out the auto play feature in owl carousel. One issue I've encountered is that when I switch to another tab in Chrome and then return to my webpage with the carousel, it stops functioning unless I manually drag the ...

Spin the item around the axis of the universe

My goal is to rotate an object around the world axis. I came across this question on Stack Overflow: How to rotate a object on axis world three.js? However, the suggested solution using the function below did not resolve the issue: var rotWorldMatrix; / ...