https://kotlinlang.org logo
#javascript
Title
# javascript
c

Császár Ákos

11/23/2023, 12:45 PM
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:
Copy code
@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?
a

Artem Kobzar

11/23/2023, 3:00 PM
What module system do you use for the compilation?
c

Császár Ákos

11/24/2023, 7:36 AM
UMD I think, because there are no any defined. It is the default right?
👍 1
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.
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?
js("require('packageScope/packageName)")
i think this is what I was looking for.
a

Artem Kobzar

11/24/2023, 2:09 PM
No, especially with UMD. For CommonJS and ESM there are hacks with the
require
and
import
functions, but not with UMD.
c

Császár Ákos

11/24/2023, 2:16 PM
Are you saying that I shouldn't use
require
with UMD?
a

Artem Kobzar

11/24/2023, 2:38 PM
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)
Webpack could work with mixed module systems (so, you can use
require
also from ES modules)
But this is not smth I work a lot with. Just interesting, why do you use UMD in your project?
c

Császár Ákos

11/24/2023, 2:48 PM
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.
Also I managed to make it work with require + webpack
🎉 1
2 Views