Kotlin/JS로 만든 React Hooks를 TypeScript에서 사용

개요

Kotlin/JS에서 React의 사용자 지정 후크를 만들고 TypeScript용 형식 정의 파일을 생성합니다.
우선 TypeScript에서 사용할 수 있었던 정도의 완성으로 아직 상세는 파악할 수 없고, 실용성은 전무입니다.
Kotlin측의 코드는 Kotlin/JS에서 직접 React를 사용하는 경우에도 동일하게 유효합니다.

아래 기사에서 알 수 있듯이 현재 (2021/08/03) IR 백엔드는 alpha이므로 신중하게 이용하십시오.
htps : //코 tぃんぁ g. 오 rg/도 cs/코 m포넨 ts-s 타비ぃty. HTML

Kotlin/JS 사용

Kotlin/JS 코드에서 형식 정의 파일(.d.ts)을 생성하려면 @JsExport 를 적용해야 합니다.
그러나 프리미티브 만 JavaScript에서 처리 할 수 ​​있기 때문에 아무리 유형 정의 파일을 생성하더라도 JavaScript에서 고급 라이브러리를 조작하는 것은 상당히 어렵습니다.

그래서 Ktolin/JS로 랩하는 것으로 간접적으로 표현할 수 있습니다.
이 기사에서는 React Hooks와 Kotlin coroutines의 조합을 예로 들었습니다.

코드

Kotlin

build.gradle.kts

plugins {
    kotlin("js") version "1.5.30-M1"
}

group = "com.uramnoil"
version = "0.1.0"

repositories {
    mavenCentral()
}

val kotlinVersion = "1.5.21"
val reactVersion = "17.0.2"

dependencies {
    implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.5.1")
    implementation("org.jetbrains.kotlin-wrappers:kotlin-react:17.0.2-pre.224-kotlin-1.5.21")
    implementation(peerNpm("react", reactVersion))}

kotlin {
    js(IR) {
        binaries.library()
        browser()
    }
}

hooks.kt

import kotlinx.coroutines.GlobalScope
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.collect
import kotlinx.coroutines.launch
import react.useState

val flow = MutableStateFlow(0)

@JsExport
fun useHoge(): String {
    var hoge by useState(flow.value)

    useEffectOnce {
        GlobalScope.launch { // NOTE: Dangerous API
            flow.collect {
                hoge = it
            }
        }
    }

    return hoge.toString()
}

// Flow操作用
@JsExport
fun increment() {
    flow.value++
}

TypeScript

package.json

{
    "dependencies": {
        "project-root-name": "link:/folder/to/ProjectRoot/build/js/packages/project-root-name"
    }
}

App.tsx

import "./App.css";
import { increment, useHoge } from "kotlin-react-library-sample";

function App() {
  const hoge = useHoge();

  return (
    <div className="App">
      {hoge}
      <button onClick={() => increment()}>hoge</button>
    </div>
  );
}

export default App;

샘플

정상적으로 움직입니다.

요약

ViewModel을 다루는 React Hooks를 만들어 두면 Kotlin/Multiplatform에서 로직을 공통화해도 TypeScript로 프런트 엔드를 만들 수 있습니다.

좀 더 조사해보고 기사를 쓰고 싶습니다.