Why can’t I create new instances of this from Kotl...

# javascript

[Marc Knaup]

Why can’t I create new instances of this from Kotlin?

@JsModule("@emotion/stylis")
@JsNonModule
external class Stylis(
	options: StylisOptions = definedExternally,
)

val stylis = Stylis() // runtime: Stylis is not a constructor

At runtime Stylis is actually a Module and Stylis.default is the actual class 🤔

[Marc Knaup]

Mhh, I’m probably running into this: https://youtrack.jetbrains.com/issue/KT-41650

[Big Chungus]

Add @JsName("default") to pint that declaration to module default

[Marc Knaup]

Doesn’t work with the IR compiler b/c of a bug 😞

[Marc Knaup]

Looking for workarounds…

[turansky]

@Marc Knaup Please share workaround here too

[Marc Knaup]

I think I also misunderstood @JsName. It changes the name of the local variable for the import, it doesn’t change what it actually imported.

[Big Chungus]

It points to what to import. At least it did before ir came

[Marc Knaup]

It changes both when I use @Js(Non)Module on a file.
The local variable is now default and it also tries to import .default.

[Marc Knaup]

The former is not intended 🤔

[Big Chungus]

On Legacy?

[Marc Knaup]

IR

[Big Chungus]

Wait, try your (non)module annotation on file

[Marc Knaup]

That’s what I just did.

[Big Chungus]

And the add jsname default on the class representing the entity that's actually exported as default

[turansky]

Last step:

val module: JsClass<*> =  require("@emotion/stylis").default

fun Stylis(options: StylisOptions? = null) = js("(new module(options))")

[Big Chungus]

Can you try that with legacy compiler?

[turansky]

It works on legacy

[Marc Knaup]

I abandoned legacy a while ago because I kept running into issues. I want to make it work with IR.

[Marc Knaup]

@JsName("_default") results in:

var _default = $module$_emotion_stylis._default;

expected:

var Stylis = $module$_emotion_stylis._default;

[turansky]

Do you need workaround for final app only?

[Marc Knaup]

yes

[Marc Knaup]

no

[Marc Knaup]

well

[Marc Knaup]

I want to make it a lib at some point

[turansky]

Gradle plugin - bad WA in that case? Right?

[Marc Knaup]

I have no idea what you’re talking about :D

[turansky]

For example

[Marc Knaup]

That’s quite an elaborate hack 😅

[turansky]

It works! 🙂

[turansky]

You can fix it manually

@JsModule("@emotion/stylis")
@JsNonModule
external class Stylis(
	options: StylisOptions = definedExternally,
)

// quite an elaborate hack
fun fixStylis() {
    js("Stylis = Stylis.default")
}

[Marc Knaup]

In that case I have to make assumptions what the local variable is called 🤔
And how does it affect optimizations?

[turansky]

Another Stylis can kill WA 🙂

[Marc Knaup]

What’s WA? 🤔

[turansky]

WorkAround

[Marc Knaup]

lol

[turansky]

And how does it affect optimizations?

Webpack optimization?

[Marc Knaup]

JS minification for example

[Marc Knaup]

I’ve also created this one:
https://youtrack.jetbrains.com/issue/KT-43312

[Marc Knaup]

I’ll go with the Stylis = Stylis.default workaround until KT-41650 is solved. There simply isn’t any other workaround apart from modifying the Stylis package itself.

[turansky]

JS minification for example

It my examples it works for commonjs
Posibly such logic not supported in es modules (because sideeffect). But es modules still not supported 😞

[turansky]

@Marc Knaup FYI - https://github.com/JetBrains/kotlin-wrappers/issues/361#issuecomment-725793541