I have a Typescript type alias like the following:...

# javascript

[Chris Miller]

I have a Typescript type alias like the following:

export type TextLayer = {
	"id": string;
	"font-name"?: string;
	"text-size"?: number;
}

What's the correct way to map that to Kotlin/JS, so that I can create instances via jso { ... }? I've tried the following, but the @JsName annotations fail with "Name contains illegal chars that cannot appear in JavaScript identifier":

@JsPlainObject
external interface TextLayer {
  var id: String
  @JsName("font-name")
  var fontName: String?
  @JsName("text-size")
  var textSize: Double?
}

Also, is the use of @JsPlainObject relevant here? The Kotlin/JS documentation seems quite sparse, plus I can't find any documentation for most of the @Js* annotations, so feel like I am shooting in the dark a bit here. Any pointers would be greatly appreciated!

[turansky]

fail with "Name contains illegal chars that cannot appear in JavaScript identifier":

OOB support is coming in Kotlin 2.1
For now you need compiler option like here

[turansky]

Also, is the use of @JsPlainObject relevant here?

On 100%. And val instead of var for properties.

[Chris Miller]

Thank you Victor! I tried your @JsSpecialName annotation too which also seemed to work - is that equivalent to JsName with -XXLanguage:+JsAllowInvalidCharsIdentifiersEscaping, or is it intended for something else?

As a more general question, is any of this (or many other parts of Kotlin/JS) properly documented anywhere? I generally seem to have to resort to searching this channel or cobble together my understanding from example code and comments scattered around the internet 😞

[Chris Miller]

Ah I found this https://github.com/JetBrains/kotlin/tree/master/plugins/js-plain-objects which explains JsPlainObject at least

[turansky]

is that equivalent to JsName with -XXLanguage:+JsAllowInvalidCharsIdentifiersEscaping, or is it intended for something else?

No, @JsName is what you need. @JsSpecialName - temp WA for type guards

[Chris Miller]

Ok thanks for clarifying

[turansky]

> or cobble together my understanding from example code
Looks like best documentation for now for @Js* annotation.
Common practices you can find in Kotlin Wrappers and examples inside.

[Chris Miller]

Unfortunate, but thanks for clarifying, I know where to focus my searching now

[turansky]

If any question - feel free to ask in this chat 😉

[Chris Miller]

Thank you!

[Chris Miller]

So I've only just had a chance to try @JsName properly, but it doesn't seem to be working. My interface:

@JsPlainObject
external interface TextLayer {
  val id: String
  @JsName("font-name")
  val fontName: String?
}

My code using it:

@Composable
fun Test() {
  Div {
    Text(JSON.stringify(TextLayer(id="123", fontName="abc")))
  }
}

The output:

{
  "id": "123",
  "fontName": "abc"
}

If I disable -XXLanguage:+JsAllowInvalidCharsIdentifiersEscaping then it won't even compile, so that flag does at least appear to be having some effect. I'm on the latest IDEA 2024.3 EAP in K2 mode, and am using Kotlin 2.0.20. Not sure what I'm missing?

Edit: the following does work (if I change both the val back to var) which is probably why I thought @JsName was working earlier:

Text(JSON.stringify(jso<TextLayer> { id="123"; fontName="abc" })) }

output:

{
  "id": "123",
  "font-name": "abc"
}

[Chris Miller]

I've gone back to using jso {} since I can't find a way to get JsPlainObject and JsName to play nicely together with the +JsAllowInvalidCharsIdentifiersEscaping flag. I can file a bug report, but maybe you know if this is already fixed/implemented in 2.1.0?

[turansky]

You can check how it works with 2.1.0-Beta2 before report