Hi everyone, :wave: I'm just starting in Kotlin an...

# javascript

[David Otasek]

Hi everyone, 👋 I'm just starting in Kotlin and this Slack, so correct me if I'm not following protocol.

I'm working on pulling react-ace into a multiplatform project. I have gotten this working in a separate project based on the KotlinConf explorer tutorial, using kotlin-wrappers 0.0.1-pre.264-kotlin-1.5.31. However, the targeted project is using 17.0.1-pre.148-kotlin-1.4.30. Bringing the target project's dependencies up to date is the virtuous path to this, but it has thus far proved very difficult. The KotlinConf explorer GitHub has no record of any code referring to previous versions that I could reference either.

The following is the import 'plumbing' that works in the newer project:

@file:JsModule("react-ace")
@file:JsNonModule

package ace

import react.*

@JsName("default")
external val aceEditor: ComponentClass<AceEditorProps>

external interface AceEditorProps : Props {
    var ref : MutableRefObject<Nothing>
    var mode: String
    var theme : String
    var annotations : Array<AceAnnotation>
    var markers : Array<AceMarker>
    var defaultValue : String?
    var value : String?
    var setOptions : AceOptions
}

Is there something simple that could be done to have this work with the older version while I try to update all the dependencies?

[turansky]

Props -> RProps ?
Looks like only this change will be required for downgrade

[turansky]

Common notes:
1. AceEditor - recommended (like in examples)
2. ReadonlyArray for properties and parameters
3. Package name from NPM package name

@file:JsModule("react-ace")
@file:JsNonModule

package react.ace

import react.*

@JsName("default")
external val AceEditor: ComponentClass<AceEditorProps>

external interface AceEditorProps : Props {
   // ...
   var markers : ReadonlyArray<AceMarker>
}

[David Otasek]

That's kind of what I tried, but no luck. The closest I've gotten looks like this:

@JsName("default")
external val aceEditor: RComponent<AceEditorProps, RState>

    external interface AceEditorProps : RProps {
    var ref : RMutableRef<Nothing>
    var mode: String
    var theme : String
    var annotations : Array<Annotation>
    var markers : Array<AceMarker>
    var defaultValue : String?
    var value : String?
    var setOptions : AceOptions
}

[turansky]

@JsName("default")
external val AceEditor: RClass<AceEditorProps>

[turansky]

What about this one?

[David Otasek]

I'll try.

[David Otasek]

Actually, that's getting me somewhere!

[David Otasek]

Give me a minute.

[David Otasek]

It works! The final code looks like this:

@file:JsModule("react-ace")
@file:JsNonModule

package ui.components.ace

import react.*

@JsName("default")
external val aceEditor: RClass<AceEditorProps>

    external interface AceEditorProps : RProps {
    var ref : RMutableRef<Nothing>
    var mode: String
    var theme : String
    var annotations : Array<Annotation>
    var markers : Array<AceMarker>
    var defaultValue : String?
    var value : String?
    var setOptions : AceOptions
}

[David Otasek]

Thank you so much, Victor!