Hi! I’m playing with <#C3PQML5NU|multiplatform> an...

# javascript

[Ademir Queiroga]

Hi! I’m playing with #multiplatform and I have a this data class:

@JsExport
@Serializable
data class Account(
    val id: String,
    val appName: String?,
    val availableCredits: Float,
)

When exported to javascript and logging an instance of this class the property names get all messed up.
Account { n4n_1: 'test_id', o4n_1: 'test_name', p4n_1: 10 }
Does anyone know why and how to fix this? In the .ts file the constructor has the all parameters correctly named and the IDE parameter hints are also all correct (and typed). I’m only facing this issue when logging the instances…

[Ademir Queiroga]

Is this the name mangling mentioned here? Although, I thought that the mangling should not happen to targets annotated with @JsExport

[Michael Friend]

iirc in a lot of cases name mangling can still happen for the internal property names of `@JSExport`ed classes and adding the annotation just makes the complier generate an Object.defineProperty call that lets you access the internal, mangled name property via the normal name

[Michael Friend]

So if you look in the generated JS code you’ll probably see something like this declaring your type

function Account(id,appName,availableCredits) {
    this.n4n_1 = id; 
    this.04n_1 = appName
    this.p4n_1 = availbableCredits
}

then functions like this that declare the unmangled properties

Object.defineProperty(Account.prototype, 'id') {
   ...
   get: Actual.prototype._get_n4n_1...
}

[Ademir Queiroga]

That’s exactly it…

[Ademir Queiroga]

If I parse the object to a String it prints the correct property names because it will probably use the data class generated toString()

[Michael Friend]

nice! and yea thats basically whats happening. You can also call toString() directly i think

[Ademir Queiroga]

Yeah, it works too! Thanks!

[Ademir Queiroga]

It’s been a tough but enjoyable sea to sail this multiplatform thing 😅

[Michael Friend]

No problem! And yea Kotlin/JS especially is a bit more murky and mysterious. When i was working on it i found looking at the ts file to be helpful to get a general overview of whats exported but looking at the generated JS code was necessary if you wanted to figure out what was actually going on

[Ademir Queiroga]

Yeah, I’ll definitely do that more often from now on…

[Ademir Queiroga]

By the way… have you had any issues with transitive dependencies not being added to the generated package-lock.json? I’m using ktor and specifically for the JS module I had to manually install some missing dependencies required by it

[Michael Friend]

hmm i dont think ive ever run into that issue before, though we were trying to hide external deps from js as much as possible on the last project i used kotlin/js

[Jared Vu]

Hey @Ademir Queiroga, did you ever find a way to preserve the unmangled var names?

[Ademir Queiroga]

I did not! The only solution was to use the .toString() function