Creating additional react wrappers

Support
1

I’m trying to look into adding wrappers for common react components. If there is already something for this, just skip the rest and paste a link. I’m specifically looking for react router, and redux.

I started a repository, and working on a very simple module to try and get used to the build system.

I have the module auto completing in intellij, and seeing the proper types. But it’s failing to run.

npm start

Error


src\app\App.kt:10:8: error: unresolved reference: reactextra
import reactextra.material.spinner.MDSpinner
       ^
src\app\App.kt:66:9: error: unresolved reference: MDSpinner
        MDSpinner()
        ^

The app itself is dead simple, just importing that library and calling the module.

Gives me the following. I’ve been going over the source for kotlin-wrapper and the outputted npm module. But there’s something I just be missing.

Secondly I wanted to ask about type matching with type script. I’m using ts2kt. But I’m curious about the best approach for discriminated unions. I’m thinking a sealed class, but wasn’t 100% sure.

Thanks in advance.

2

Could you please provide a self-contained example to reproduce your problem?

Right now I can only guess, probably your library is invalid (Kotlin/JS library).

Also, build.gradle doesn’t apply kotlin2js plugin and it’s strange.

Kotlin doesn’t have builtin union types, so the best solution to represent for TypeScript’s union type depends on the concrete case. For the provided example using sealed class sounds good, like:

external sealed class Action {
    object PUSH : Action() {}
    object POP : Action() {}
    object REPLACE : Action() {}
}

But to avoid crash at runtime you have to something like:

const Action = {
   PUSH: 'PUSH',
   POP:  'POP',
   REPLACE: 'REPLACE'
}
3

Thanks, @bashor for the response. Am I going about this the right way? I’m still wrapping my head around the Kotlin multi-module approach, and how best to build the web portion.

I was running gradle build from the top level directory. Which built each of the submodules. I followed the kotlin-wrapper for guidance. The output of the build is.

kotlin-react-md-spinner/build
├── classes
│   └── main
│       ├── kotlin-react-md-spinner
│       │   └── reactextra
│       │       └── material
│       │           └── spinner
│       │               └── spinner.kjsm
│       ├── kotlin-react-md-spinner.js
│       ├── kotlin-react-md-spinner.js.map
│       └── kotlin-react-md-spinner.meta.js

What I was doing.

gradle npm_publish

In a create-react-kotlin-app.

npm install kotlin-react-md-spinner

Modify the iml file to support the new library. Autocomplete, importing all works in Intellij. Run

npm start

Receive the prior error.

I removed the other modules and knocked it back to just one. I was going with a very simple module just to get my bearings. It’s just this one Kotlin file.

Thanks for the guidance on the union type.