I would like to do a dynamic import like so: ```i...

# javascript

[Erik van Velzen]

I would like to do a dynamic import like so:

import js.import.import

suspend fun MyFun(cloudUrl: String) {
    import<Unit>(
        /* webpackIgnore: true */
        "$cloudUrl/assets/js-client-8.5.0/cloud-client.js"
    )
}

Unfortunately the magic comment is removed when compiling Kotlin to JS.

In the browser i get the error "Cannot find module 'https://anylogic.zenmo.com/assets/js-client-8.5.0/cloud-client.js'".

import("<https://anylogic.zenmo.com/assets/js-client-8.5.0/cloud-client.js>") works in plain javascript. How do I get the compiler/webpack to leave this import untouched?

[turansky]

Is there sideeffect inside?

[Erik van Velzen]

No just class definitions

[turansky]

Do you have declarations for them?

[Erik van Velzen]

That is not the issue, it's not even fetching it

[turansky]

JFYI - https://webpack.js.org/configuration/externals/#externalstypeimport

[turansky]

For pill I need details

[turansky]

cloudUrl is really dynamic?

[Erik van Velzen]

externals sounds like it should work but it seems it has some caveats.

This works:

val promise: Promise<Unit> = eval("import('<https://anylogic.zenmo.com/assets/js-client-8.5.0/cloud-client.js>')")
promise.then {
    console.log(CloudClient)
}

But it's a pretty stupid workaround.

[turansky]

Is it CDN for existed NPM library?

[Erik van Velzen]

No it's a js library which is a client library of the application which hosts it

[Erik van Velzen]

It is not open source

[Erik van Velzen]

I mean, i don't have to do it dynamic, but it's a thing that should be possible

[turansky]

import js.function.JsFunction
import js.function.invoke
import js.promise.Promise

private val loadLibrary = JsFunction<String, Promise<Unit>>(
    "cloudUrl",
    "return import(cloudUrl + '/assets/js-client-8.5.0/cloud-client.js')",
)

suspend fun MyFun(cloudUrl: String) {
    loadLibrary(cloudUrl).await()
}

[turansky]

In next release:

import js.function.AsyncFunction
import js.function.invoke

private val loadLibrary = AsyncFunction<String, Unit>(
    "cloudUrl",
    "return import(cloudUrl + '/assets/js-client-8.5.0/cloud-client.js')",
)

suspend fun MyFun(cloudUrl: String) {
    loadLibrary(cloudUrl)
}

[Erik van Velzen]

Isn't this the same but shorter?

suspend fun <T> importLibrary(library: String): T {
    return eval("import('$library')")
}

[Erik van Velzen]

Or no wait its not awaiting

[Erik van Velzen]

suspend fun <T> dynamicImport(library: String): T {
    val promise: Promise<T> = eval("import('$library')")
    return promise.await()
}

[turansky]

In wrappers we can have something like this:

inline fun <T> importAsync(
    url: String,
    comment: String,
): Promise<T> {
    return js("/* $comment */ import('$url')")
}

[turansky]

+ suspend variant

[turansky]

js call is better then eval - eval is unsafe

[turansky]

Also idea:

import js.import.import

suspend fun MyFun(cloudUrl: String) {
    js("/* webpackIgnore: true */)
 
    import<Unit>("$cloudUrl/assets/js-client-8.5.0/cloud-client.js")
}

[turansky]

Should work (in theory)

[Erik van Velzen]

I think the comment needs to be later import(/* webpackIgnore: true */

[Erik van Velzen]

Thanks for brainstorming anyhow.

[turansky]

import js.import.import

suspend fun MyFun(cloudUrl: String) {
    import<Unit>(js("/* webpackIgnore: true */ cloudUrl + '/assets/js-client-8.5.0/cloud-client.js'"))
}

😉

[Erik van Velzen]

I'm testing that and the comment is still stripped

[Erik van Velzen]

in fact if you do this

js("/* testcomment */")

The compiler says "An argument for the js() function must be non-empty JavaScript code"