Hi. In kotlin/js window is exposed. If I have an npm package which extends window with some methods,...

# javascript

[Császár Ákos]

Hi.
In kotlin/js window is exposed. If I have an npm package which extends window with some methods, how should I handle it? I tried to create my own window instance:

@JsModule("@packageScope/packageName")
@JsNonModule
external val window: Window

abstract external class Window {
    fun func1(variable1: String): Promise<Response>
    fun func2(variable2: String): Promise<Response>
}

When I log out window in kotlin, it will be an empty object.
What is the proper way to do it?

[Artem Kobzar]

What module system do you use for the compilation?

[Császár Ákos]

UMD I think, because there are no any defined. It is the default right?

[Császár Ákos]

Also I think I shouldn't use @JsModule and @JsNonModule on window because it means that the package added with npm, contains the window, which is not true. (Correct me if I am wrong)
So I think I need to create a separate kotlin file with
@file:JsModule("@packageScope/packageName") and @file:JsNonModule
annotations and define here the functions, but the problem is that I cant verify the function definitions in the npm package but I know that with what name they are added to window.

[Császár Ákos]

So just to wrap up my question:
It is possible to import an npm package using JsModule/JsNonmodule or something similar without defining any external function?

[Császár Ákos]

js("require('packageScope/packageName)") i think this is what I was looking for.

[Artem Kobzar]

No, especially with UMD. For CommonJS and ESM there are hacks with the require and import functions, but not with UMD.

[Császár Ákos]

Are you saying that I shouldn't use require with UMD?

[Artem Kobzar]

I mean, as far as I remember, if you process it with webpack - it could work (so you can try), but require is a function that used only with the tooling that supports commonjs modules (such as Node.js and Webpack)

[Artem Kobzar]

Webpack could work with mixed module systems (so, you can use require also from ES modules)

[Artem Kobzar]

But this is not smth I work a lot with. Just interesting, why do you use UMD in your project?

[Császár Ákos]

Honestly, as we said UMD is the default, and I just didn't changed it yet. I need to read the docs about what is the difference between module systems. I was just an android dev without any advanced web knowledge.

[Császár Ákos]

Also I managed to make it work with require + webpack