Need help with setting up modules in React TS Project

[smoky hemlock]

Hello! This is most probably an uncommon issue after a lot searching through various github, SOF discussion, google searches I am writing here. For context, I am creating an Open Source UI Library for a Video Player. The core functionality of player is provided by Shaka Player https://github.com/shaka-project/shaka-player This is a purely JS based library and on top of it I am creating a UI Library using React https://github.com/WINOFFRG/limeplay/tree/shaka-monorepo

The issue: This JS based Player has three versions Compiled, Compiled with Debug and Uncompiled. In the first image you can see how any of the versions are loaded. Earlier to use shaka player in my project I installed it as a NPM Package and created a module of its like this https://github.com/WINOFFRG/limeplay/blob/main/src/types/shaka-player/index.ts

declare module 'shaka-player/dist/shaka-player.ui.debug' {
    export = shaka;
}```

And to use it anywhere, I just did this https://github.com/WINOFFRG/limeplay/blob/main/src/hooks/useLimetree.ts#L4

```ts
import shaka from 'shaka-player/dist/shaka-player.ui.debug';

Now this works fine at a small scale but this limits me to just use the shaka-player.ui.debug debug version of player. Also, I am always locked to modify the code of shaka-player If I need. So, I went ahead with monorepo style and closed the style and cloned the shaka-player as a package in my code. Ref. Image 2

I want to create something like in ENV or settings which can help me load any of the versions directly I mentioned and to be able to have the availability of shaka-player as a package globally. So that I can consume maybe like import shaka from 'shaka-player' anywhere. To mention, with reference to Image 1 if I want to use the compiled version I would first need to compiled it manually and for uncompiled I just need to import all those JS files mentioned in the Image 1. Refer Image 3 for the dist of Shaka Player.

Cont. in the bottom

[nocturne yacht]

import shaka from 'shaka-player/dist/shaka-player.ui.debug';

[smoky hemlock]

I am using Vite for Limeplay/Limetree package with React and TS and my complete project is managed in PNPM Workspace. I find it best to seek help from the TS Community as after lot of searching I wasn't able to make it work.

I guess I am looking for some way which first works on the load time to load the required files as shown in image 1 in 1/2 and once the files and its types are loaded. All should be loaded as a package shaka-player and then make then available globally.

Need help with setting up modules in React TS Project

I would very thankful If someone can help me with this issue or bring this into notice of someone who might have idea of this or expertise with creating similar open source libraries.

I would just list down the issues in short once again:

1. Loading the JS files dynamically based on settings.
2. Using another repo as a dependency module of current project
3. Setting up alias for import like import shaka from 'shaka-player' instead of shaka-player/dist/shaka-player.ui.debug which are all resolved to one loaded in 1st.
4. Optionally making this module available to use globally without importing.
5. Not sure how can tools like Vite or PNPM help in this scenario.