Kotlin JS React. Парочка нюансов. HOC |A| alse-code

Ох и запарился же я, когда пытался заюзать HOC (higher order component) компонент из react либы.

Задача:

В react-yandex-maps для использования api карт предлагается использовать HOC компонент withYMaps.

Решение:

определяем типизацию:

@file:JsModule("react-yandex-maps")
@file:JsNonModule

package types.ymaps.react


// ...

external fun <P: WithYMapsProps> withYMaps(
    component: RClass<P>,
    waitForApi: Boolean = definedExternally,
    modules: Array<String> = definedExternally
): RClass<P>

external interface WithYMapsProps: RProps {
    var ymaps: YMapsApi
}

// определите здесь нужные вам функции api
external interface YMapsApi {
    fun geocode(q: String?, options: SearchOptions = definedExternally): Promise<SearchResult>
    fun search(text: String, options: SearchOptions = definedExternally): Promise<SearchResult>
}

Dukat такое сгенерить не смог, а над этими строчками вручную я бился долго.

Пример использования:

val connectedMyComponent = withYMaps(MyComponent::class.rClass, true, arrayOf("geocode", "search"))

Погружение:

В kotlin-react есть интерфейс HOC, но он больше для простых HOC компонентов — в данном же случае нужно было передать дополнительные аргументы в HOC функцию. Тем не менее, он помогает понять, как всё работает
Классы в JS и классы в Kotlin — это очень разное. А HOC компоненты требуют на вход классы, уже их оборачивая и рендеря. И для преобразования классов kotlin в классы react нужно проделать такую нехитрую операцию ::class.rClass с ещё более нехитрой реализацией из той же либы kotlin-react (но вот догадаться, что такое нужно, было нелегко):

val <P : RProps> KClass<out Component<P, *>>.rClass: RClass<P>
    get() = js.unsafeCast<RClass<P>>()