jetbrains/kotlin-wrappers

Kotlin wrappers for popular JavaScript libraries

Kotlin Wrappers

This repository hosts a number of Kotlin wrappers for popular JavaScript libraries.

To learn more please refer to the READMEs of individual modules.

README	Note	Version
kotlin-actions-toolkit
kotlin-browser
kotlin-cesium-engine
kotlin-cesium-widgets
kotlin-css
kotlin-cssom-core
kotlin-csstype	guide
kotlin-electron
kotlin-emotion	guide
kotlin-extensions	archived
kotlin-js
kotlin-mui-material
kotlin-mui-base
kotlin-mui-icons-material
kotlin-mui-lab
kotlin-mui-system
kotlin-muix-date-pickers
kotlin-muix-tree-view
kotlin-node
kotlin-popper
kotlin-react
kotlin-react-beautiful-dnd
kotlin-react-core
kotlin-react-dom
kotlin-react-dom-legacy
kotlin-react-dom-test-utils
kotlin-react-legacy
kotlin-react-redux
kotlin-react-router
kotlin-react-router-dom
kotlin-react-popper
kotlin-react-select
kotlin-react-use
kotlin-redux
kotlin-remix-run-router
kotlin-ring-ui
kotlin-styled-next
kotlin-tanstack-query-core
kotlin-tanstack-react-query
kotlin-tanstack-react-query-devtools
kotlin-tanstack-react-table
kotlin-tanstack-react-virtual
kotlin-tanstack-table-core
kotlin-tanstack-virtual-core
kotlin-typescript
kotlin-web
kotlin-wrappers-bom

Artifacts are published to Maven Central, see the corresponding README files for package coordinates.

All packages require JDK 8 to be installed.

Using In Your Projects

Use the "Kotlin Wrappers BOM" which helps to ensure consistency between the modules and allows you not to think about version compatibility.

Just declare kotlin-wrappers-bom and specify the modules you need:

val kotlinWrappersVersion = "1.0.0-pre.736"

dependencies {
    implementation(platform("org.jetbrains.kotlin-wrappers:kotlin-wrappers-bom:$kotlinWrappersVersion"))
    implementation("org.jetbrains.kotlin-wrappers:kotlin-emotion")
    implementation("org.jetbrains.kotlin-wrappers:kotlin-react")
    implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom")
    implementation("org.jetbrains.kotlin-wrappers:kotlin-tanstack-react-table")
    // other wrappers
}

Or use a helper function:

fun kotlinw(target: String): String =
    "org.jetbrains.kotlin-wrappers:kotlin-$target"

val kotlinWrappersVersion = "1.0.0-pre.736"

dependencies {
    implementation(platform(kotlinw("wrappers-bom:$kotlinWrappersVersion")))
    implementation(kotlinw("emotion"))
    implementation(kotlinw("react"))
    implementation(kotlinw("react-dom"))
    implementation(kotlinw("tanstack-react-table"))
    // other wrappers
}

Make sure that you have mavenCentral() in the list of repositories.

Examples

1. To-do list example

2. Tic-Tac-Toe example

3. A port of "Thinking in React" example

4. An example of using axios to fetch remote data. It also demonstrates how to add typings for an external library.

5. An example of using Quill that shows how to use an external React component.

6. An example of using react-router-dom that shows how to use react-route-dom with hooks API.

7. Building Web Applications with React and Kotlin/JS, a tutorial by JetBrains.

8. A full-stack demo application written in Kotlin for JetBrains Night Moscow 2019.

9. An example of using react-table that shows how to use react-table with hooks API.

10. An example of using Material UI.

11. ByteLegend: an open-source, real-world HTML5 MMORPG game.

Follow these examples to learn how to start developing your React apps with Kotlin. Good luck and have fun!

Contributing

Contributions to this project are welcome! Please see the open issues or chat with us on the #react channel in our Slack.

kotlin-wrappers's Issues

kotlin-styled fails with inline-style-prefixer >=5.0.0

kotlin-styled fails with inline-style-prefixer >=5.0.0.

The runtime error message in Chrome is:

Uncaught TypeError: $module$inline_style_prefixer is not a constructor
    at eval (webpack:///../node_modules_imported/kotlin-styled/kotlin-styled.js?:2261)
    at eval (webpack:///../node_modules_imported/kotlin-styled/kotlin-styled.js?:2264)
    at Object.../node_modules_imported/kotlin-styled/kotlin-styled.js (main.bundle.js:16332)
    at __webpack_require__ (main.bundle.js:725)
    at fn (main.bundle.js:102)
    ...

Workaround: use inline-style-prefixer >=4.0.2 <5.0.0

Support attrs in styled components

I see no equivalent to

const Component = styled.div.attrs({
    style: ({ background }) => ({
      background,
    }),
  })`width: 100%;`

Also, I have warnings in browser console that I generate too many styles (because try do depend on parameters)

Add wrapper for redux

I've already wrote a very basic wrapper in a project, but I think it would be useful to anyone using kotlin react. Would something like this be a welcome pull request?

Add more documentation

Let's include mode documentation, document thins for one, who is coming from Kotlin/JVM world, and have no detailed understanding of how to deal with technology. Gradle build setup is nice to be documented too (probably with kotlin-frontend plugin)

source jars

It would be great to deploy sources jars to bintray as well

kotlin-redux: combineReducers helper is flipping key-value pairs

Hi! I was trying out the kotlin-redux wrapper and I noticed that redux kept giving me an "invalid store" sanitization error when I used the combineReducers helper.

When I looked into it, I noticed that the definition of the helper was setting the value of the map as the JS Object key and the key as the value. Flipping these seemed to fix the issue for me!

fun <S, A> combineReducers(reducers: Map<String, Reducer<*, A>>): Reducer<S, A> = combineReducers(js {
    reducers.forEach { this[it.value] = it.key }
}.unsafeCast<ReducerContainer<S, A>>())

Working with checkboxes always produces warning in console

To reproduce the problem add something like this in a kotlin-react app. The state needs to have a var myBoolean, that has an initial value of false:

input(InputType.checkBox) {
  attrs.onChangeFunction = { event ->
    val newValue = (event.target as HTMLInputElement).checked
    setState { myBoolean=newValue }
  }
  attrs.checked = state.myBoolean
}

Then open the app in the browser and click on the checkbox. The following warning will appear in the console of the browser:
"A component is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component."

I have investigated the issue myself and I suspect that the problem is due to the setter of the checked property of the input removing the checked attribute when the value is false.

Support RPureComponent

Default RComponent/Component needs to have an implementation of shouldComponentUpdate. It is nice to have have something kotlin-typed for typed state/props

A standalone example is missing

It is not clear now one create/use the library in the Gradle/NPM project. A fully-dedicated example and setup instructions are really nice to have

CSSBuilder generates CSS without offsets

The toString() returns the CSS, where

• missing new-line separator between selectors
• missing indenting (4 spaces) for every block internals

example output

font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Arial,sans-serif;
font-size: 12px;
background-color: #999;
}
button {
line-height: 24px;
border-radius: 3px;
border-color: rgb(68, 68, 68);
padding-right: 16px;
padding-left: 16px;
margin-right: 8px;
margin-left: 8px;
}```

Missing executing `npm run gen-idea-libs` requirement after including a new kotlin-wrapper dependency

I spent at least a half of an hour to figure out, that I need to execute npm run gen-idea-libs after I include kotlin-react-router by executing
npm i @jetbrains/kotlin-react-router-dom
Please specify that in the documentation or automate it somehow.

CSS hover selectors.. How do we use them?

Hi there JetBrains developers. Recently I was trying to build an application using 100% Kotlin. I came across an issue, where hover selectors are confusing and unintuitive, and I might be misusing them altogether. For someone to create the code for the hover of an element, intuitively, someone would want to do this:

p {
  hover { color = Color.yellow }
  color = Color.blue
}

However, confusingly, this creates this:

p {
color: blue;
&:hover {
color: yellow;
}
}

Please help me out in understanding how I can use the hover selector with my code effectively! Thank you very much

Add Contributing section to the README

Something along the lines of the https://github.com/JetBrains/kotlin one?

Any intention to support Vue.js too?

Is there any intention to support Vue.js with an kind of offical kotlin-wrapper for for React.js?

Rework React definition using @file:JsModule

kotlin-wrappers/kotlin-react/src/main/kotlin/react/Imports.kt

Line 3 in d0d8911

// TODO replace with @file:JsModule once https://youtrack.jetbrains.com/issue/KT-17871 is fixed

Will result in a breaking change.

Support contexts

https://reactjs.org/docs/context.html

assign not work in InternetExplorer

@jsmodule("core-js/fn/object/assign") must be used instead of @jsmodule("core-js/library/fn/object/assign")
Related conversation:
zloirock/core-js#239

cannot define same styles for CSSBuilder

CSSBuilder().apply { body + head { ... } }

That or similar is not possible right now, thus I need to duplicate code.
Could be cool to be able to generate CSS without duplicates too

Add Vue.js wrapper (kotlin-vue)

With Vue.js more & more popular, adding some Kotlin spices to it should provide a very powerful combo 🚀.

Some wrappers exists already (ex: https://github.com/gbaldeck/vue.kt) but having it properly & idiomatically supported by Jetbrains (as with ReactJS->kotlin-react) is IMO the way to go.

Since Vue.js v2.5 comes with great TypeScript support [link-1] [link-2] , some insights from its type definitions might be useful as well.

[Question] kotlin-styled import modules from ecosystem

Is there a convenient way to utilize React javascript modules in kotlin-react code?

For example, to use a styled-components package like react-flexa -- if you were writing JS, you could say

import { Row, Col } from 'react-flexa';

And then use it

<Row justifyContent="center"> ...

What is the analog for this in Kotlin (if any)?

Migration guide/examples for React

It would be nice to see some guides, docs or examples for a common use-case. That is, the case where I have an existing JavaScript React app and now I want to gradually start adding in some Kotlin-React.

more examples pls!

It is not clear now one create/use the library in the Gradle/NPM project. A fully-dedicated example and setup instructions are really nice to have

kotlin-react-dom: class attribute should not always be renamed to classname

The fixAttributeName function replaces the class attribute name by classname. This correct for most use cases.

However, there are scenarios, when really the class attribute is needed, e.g. when using web components. See https://reactjs.org/docs/dom-elements.html

className
To specify a CSS class, use the className attribute. This applies to all regular DOM and SVG elements like <div>, <a>, and others.
If you use React with Web Components (which is uncommon), use the class attribute instead.

Can you provide some option to access the class property?

Overloadable React components

JSX allows us to pass either string or another JSX element into attribute. Both options bellow are valid

<Container header="My header" />
<Container header={<h1>My header</h1>} />

I wanted to achieve the same effect in the Kotlin code:

Container(header = "My header")
Container(header = { h1 { +"My header" }})

I managed to make it work via two overloaded functions

fun RBuilder.Container(header: RBuilder.() -> Unit) {
  //..
}
fun RBuilder.Container(header: String) {
  //..
}

It works, but if I have more than one property, I will have to create bigger number of functions

fun RBuilder.Container(header: RBuilder.() -> Unit, content: RBuilder.() -> Unit)
fun RBuilder.Container(header: String, content: RBuilder.() -> Unit)
fun RBuilder.Container(header: RBuilder.() -> Unit, content: String)
fun RBuilder.Container(header: String, content: String)

For 3 different properties there will be 9 functions.

Is there a way to simplify this and create only one signature that accepts both String and RBuilder types?

More examples

Can you provide please more examples.
E.g.

• In the kotlin-fullstack-example there is an open class ReactExternalComponentSpec<P : RProps>(val ref: dynamic) class for imporing React components from external modules.
  How can I achieve the same with kotlin-react?

• How can I add children components to a component using DSL, like

fun RBuilder.app {
    welcome("Jane") {
        div()
     }
}

• An example about a stateful component.

Thanks!

Usage with Express.js?

Hi,
is there a way we can use Express as a server-side?

Would articles like this:
https://dev.to/loujaybee/using-create-react-app-with-express
that refers to the normal create-react-app work using this wrapper?

How to use getDerivedStateFromProps

getDerivedStateFromProps is currently defined as member function without return, but should be a static function returning a state.

How do I use it?

Implicit (unsafe) cast warning when using attrs.style = js { ..}

See image.

Cannot connect component with kotlin-react-redux

Regarding the kotlin-react-redux wrapper

we cannot connect a component with

rConnect(...) : (RClass<P>) -> RClass<OP>

In order to connect someComponent then someComponent should be of type RClass in order to call rConnect(...)(someComponent)

Can you pls advise how to connect each of the components below?

fun RBuilder.componentA() {
    + "test function component"
}

class ComponentB(props: RProps) : RComponent<RProps, RState>(props) {
    override fun RBuilder.render() {
        + "test class component"
    }
}

Also after connecting ComponentB how should we call the RBuilder.child(...) in order to render the connectedComponentB?

react-router-dom wrapper and custom attributes

In kotlin-html I can add custom attributes to tags like this:
div(other = mapOf("key" to "value")) { "Content" }

Can I do the same with the react-router-dom wrapper for elements like Link (used through routerLink)?
I really need it for making proper buttons with bootstrap.

pseudo-class selector usage

@Leonya @yole I can't seem to get pseudo-class selectors to work. I suspect I may just be using them wrong. I thought I could just do:

override fun RBuilder.render() {
   styledDiv {
      css {
         styleName = "Channel-Style"
         color = props.colorTheme.text
         backgroundColor = props.colorTheme.background

         // pseudo-class selector
         firstChild {
            color: Color.black
         }
      }
      ...
   }
)

But that does not appear to generate the expected CSS (or any "first-child" related CSS that I can see).

Any thoughts?

EDIT: I will note that this does work...

override fun RBuilder.render() {
   styledDiv {
      css {
         styleName = "Channel-Style"
         color = props.colorTheme.text
         backgroundColor = props.colorTheme.background

         // pseudo-class selector
         child(":first-child") {
            color: Color.black
         }
      }
      ...
   }
)

It is impossible to add alpha on rgba color

Hi!

I try to add opacity to rgba color but it throws an error on

kotlin-wrappers/kotlin-css/src/main/kotlin/kotlinx/css/StyleEnums.kt

Line 128 in 510650e

throw IllegalArgumentException("Expected rgb or rgba notation, got $value")

I think final alpha should be multiplied by withAlpha argument.

Color("rgba(0, 0, 0, 0.87)").withAlpha(0.08) == "rgba(0, 0, 0, 0.0696)"

kotlin-styled: ancestorHover not working

Hi, short question/problem regarding kotlin-styled:

the ancestorHover feature from your example doesn't work for me, hovering doesn't change the background-color.
I pretty much copied your example and also did the same with plain CSS:

StyleSheet:

object ComponentStyles : StyleSheet("ComponentStyles", isStatic = true) {
    val wrapper by css {
        // CSS properties
    }

    val inner by css {
        backgroundColor = Color.green

        ancestorHover("${ComponentStyles.name}-${ComponentStyles::wrapper.name}") {
            backgroundColor = Color.red
        }
    }
}

This gets generated:

/* sc-component-id: sc-global-343784017 */
.ComponentStyles-inner{background-color:#0f0;} [data-style*="ComponentStyles-wrapper"]:hover .ComponentStyles-inner{background-color:#f00;}

Example as CSS:

.wrapper {

}

.inner {
    background-color: green;
}

.wrapper:hover .inner {
    background-color: red;
}

Styled Components:

	styledDiv {
            css {
                classes.add("wrapper")
            }
            styledDiv {
                css {
                    classes.add("inner")
                }
                +"Inner element"
            }
        }
        styledDiv {
            css {
                +ComponentStyles.wrapper
            }
            styledDiv {
                css {
                    +ComponentStyles.inner
                }
                +"Inner element 2"
            }
        }

Resulting HTML:

<div class="wrapper">
	<div class="inner">Inner element</div>
</div>
<div class="ComponentStyles-wrapper">
	<div class="ComponentStyles-inner">Inner element 2</div>
</div>

The plain CSS approach works, the kotlin-styled one doesn't, any ideas/hints? :)
I'm using kotlin-styled version 1.0.0-pre.28-kotlin-1.2.30 with kotlin-react-dom in version 16.3.1-pre.28-kotlin-1.2.30

Thanks in advance and greetings
Marcel

StyledComponents.injectGlobal for CSSBuilder

Let's have an extension function to make it work directly with CSSBuilder or probably only via a lambda with a receiver.

Current (too tricky, hard to make IJ to add necessary extension operators, btw) code is

StyledComponents.injectGlobal(CSSBuilder().apply { ...csshere ... }.toString())

It looks nice to have something like

StyledComponents.injectGlobal { 
  ...csshere...
}

Cannot resolve src in kotlin-extensions pulled in via bintray

I get the following error trying to build

./node_modules/kotlin-extensions/kotlin-extensions.js
Module not found: Error: Can't resolve 'src' in '<path>/front-end/build/node_modules/kotlin-extensions'
 @ ./node_modules/kotlin-extensions/kotlin-extensions.js 20:4-42
 @ ./node_modules/kotlin-react-dom/kotlin-react-dom.js
 @ ./js/front-end.js
 @ multi webpack-dev-server/client?http://localhost:8088/ webpack/hot/dev-server ./front-end

The issue is resolved by commenting out the following line of code found at line 20 in the node module.

  function foo() {
    // require.context('src', true, /\.css$/);
  }

I believe that this is function that it references.

Manual for using e.g. @jetbrains/kotlin-react-router-dom as a package.json dependency

Hello there,

when I tried to use kotlin-react-router-dom wrappers as a package.json dependency in my project, e.g. by running yarn add @jetbrains/kotlin-react-router-dom, I ran into several issues:

1. IDEA couldn't find it (I resolved it by adding the @jetbrains/kotlin-react-router-dom as a library manually from the node_modules folder)
2. When I ran yarn start, it didn't compile (This I resolved by hacking the webpack.config.dev.js file in the react-scripts-kotlin folder by adding it to the libraries: [...] part of the KotlinWebpackPlugin)
3. When it finally compiled and development server started, it failed on some weird cryptic error (note that I also added react-router-dom dependency manually)

After 2 days of desperation I just copy-pasted the source files of kotlin-react-router-dom wrappers into my project's src directory and it worked like a charm!

I apparently did something wrong, because wrappers (as they are) work just fine, so my question is, is there any guide how to properly add these wrappers as a dependecies without the need to copy-paste them into the project directly?

Thanks a lot!

Typesafe RProps/RState

Type-safe RProps and RState with default values.

It looks nice to be able to define and create a wrapper class for RProps that deals with default values, validation, state updates. The class uses original RProps like a key-value map. Similarly, we do with RProps. Current approach with interfaces works nice but lacks any type checks and one has to have an interface declared (no assertions, btw in the code).

The outcome is that a component is ready to work (all properties are set to correct values).

Having such class created explicitly is the way to specify all non-default values. That will make the compiler to check if all parameters are specified

Passing an int to unaryPlus fails silently

Given the following code:

div { +33 }

i would expect one of two outcomes:

1. Convert the int to a string and display it
2. Fail, with a nice message explaining that unaryPlus only permits strings

Instead it just renders nothing with no errors or warnings.

How to describe Children?

I have the following code:

class App : RComponent<RProps, RState>() {
    override fun RBuilder.render() {
        div {
            Panel {
                div { +"Line 1" }
                div { +"Line 2" }
            }
        }
    }
}

I want to create my custom React Component called Panel to accept children, like the following JSX

<Panel>
  <div>Line 1</div>
  <div>Line 2</div>
</Panel>

How should I describe Panel component in Kotlin to make children accessible?

Wrappers for TestUtils

It would be great to have wrappers for the TestUtils from react-dom.

Is something like this on the Roadmap?
I could help with this, but I still fail to run any Unit Test at all...

Unclear if I need to include `StyleSheet` object somewhere

Documentation does not say anything regarding that. Will my StyleSheet object register itself? Do I need to register is somewhere?

Using kotlin-wrappers with Gradle

https://bintray.com/kotlin/kotlin-js-wrappers/kotlin-react
What repository am I supposed to get this from? - jcenter and mavenCentral only gives me "Unable to resolve...".

Can't use kotlin-js-wrappers from my project

My build.gradle contains

buildScript {
   ext.kotlin_version = "1.2.30"
   ext.react_version = "16.2.1-pre.19-kotlin-$kotlin_version"
}

repositories {
        mavenLocal()
        jcenter()
        maven { url "http://dl.bintray.com/kotlin/kotlinx.html" }
        maven { url "https://dl.bintray.com/kotlin/squash" }
        maven { url 'https://dl.bintray.com/kotlin/kotlin-js-wrappers' }
}

dependencies {
    compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
    compile "org.jetbrains.kotlin:kotlin-test-js:$kotlin_version"
    compile "org.jetbrains.kotlinx:kotlinx-html-js:$html_version"
    compile "org.jetbrains.kotlin-react:$react_version"
    compile "org.jetbrains.kotlin-react-dom:$react_version"
    compile "org.jetbrains.kotlin-react-router-dom:$react_version"
}

But when I try to run gradle build I receive

Could not find org.jetbrains.kotlin-react:16.2.1-pre.19-kotlin-1.2.30:.
Searched in the following locations:
    file:/C:/Users/andgein/.m2/repository/org/jetbrains/kotlin-react/16.2.1-pre.19-kotlin-1.2.30//16.2.1-pre.19-kotlin-1.2.30-.pom
    file:/C:/Users/andgein/.m2/repository/org/jetbrains/kotlin-react/16.2.1-pre.19-kotlin-1.2.30//16.2.1-pre.19-kotlin-1.2.30-.jar
    https://jcenter.bintray.com/org/jetbrains/kotlin-react/16.2.1-pre.19-kotlin-1.2.30//16.2.1-pre.19-kotlin-1.2.30-.pom
    https://jcenter.bintray.com/org/jetbrains/kotlin-react/16.2.1-pre.19-kotlin-1.2.30//16.2.1-pre.19-kotlin-1.2.30-.jar
    http://dl.bintray.com/kotlin/kotlinx.html/org/jetbrains/kotlin-react/16.2.1-pre.19-kotlin-1.2.30//16.2.1-pre.19-kotlin-1.2.30-.pom
    http://dl.bintray.com/kotlin/kotlinx.html/org/jetbrains/kotlin-react/16.2.1-pre.19-kotlin-1.2.30//16.2.1-pre.19-kotlin-1.2.30-.jar
    https://dl.bintray.com/kotlin/squash/org/jetbrains/kotlin-react/16.2.1-pre.19-kotlin-1.2.30//16.2.1-pre.19-kotlin-1.2.30-.pom
    https://dl.bintray.com/kotlin/squash/org/jetbrains/kotlin-react/16.2.1-pre.19-kotlin-1.2.30//16.2.1-pre.19-kotlin-1.2.30-.jar
    https://dl.bintray.com/kotlin/kotlin-js-wrappers/org/jetbrains/kotlin-react/16.2.1-pre.19-kotlin-1.2.30//16.2.1-pre.19-kotlin-1.2.30-.pom
    https://dl.bintray.com/kotlin/kotlin-js-wrappers/org/jetbrains/kotlin-react/16.2.1-pre.19-kotlin-1.2.30//16.2.1-pre.19-kotlin-1.2.30-.jar

Correct url for kotlin-react is https://dl.bintray.com/kotlin/kotlin-js-wrappers/org/jetbrains/kotlin-react/16.2.1-pre.19-kotlin-1.2.30/kotlin-react-16.2.1-pre.19-kotlin-1.2.30.jar, not https://dl.bintray.com/kotlin/kotlin-js-wrappers/org/jetbrains/kotlin-react/16.2.1-pre.19-kotlin-1.2.30//16.2.1-pre.19-kotlin-1.2.30-.jar

Could you help me? Where is my error?

in the input , how to capture the on change event and assign the event.target.value to state.text?

I try to capture inputValue assign to state.text field.
However, I am not able get the event.target.value. How to resolve it?

I try to print the it(event), the target itself is null.

The console print warning "... Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property target on a released/nullified synthetic event."

How to resolve it? Thanks.

class Todo(props: TodoProps) : RComponent<TodoProps, TodoState>(props) {
   override fun TodoState.init(props: TodoProps) {
       items = props.items
       text = ""
   }
   override fun RBuilder.render() {
       div {

           input(type = InputType.text, name = "itemText") {
               key = "itemText"

               attrs {
                   placeholder = "Input todo text here..."
                   onChangeFunction = {
                           setState{
                               text = it.target.toString()
                           }
                           console.log(it)
                   }
               }
           }

           +state.text

Uncaught ReferenceError: module is not defined

When I include kotlin-extensions in my HTML page, I get this error in all browsers:

Uncaught ReferenceError: module is not defined
    at kotlin-extensions.js:93
(anonymous) @ kotlin-extensions.js:93

This is line 93:

}(module.exports, require('kotlin'), require('core-js/library/fn/object/assign')));

The kotlin module is loaded, but core-js seems new to me. I could not find any documentation in the kotlin-extensions project which mentions core-js. As I include kotlin-extensions via gradle and I can not find anything core-js releated in the project, I assume the kotlin-extensions artifact is missing the dependency to core-js.

dependencies {
    compile(
        "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlinVersion",
        "org.jetbrains:kotlin-extensions:$kotlinExtensionsVersion",
        "org.jetbrains:kotlin-react:$kotlinReactVersion",
        "org.jetbrains:kotlin-react-dom:$kotlinReactVersion"
    )
}

Support 'callback' parameter in ReactDOM.render

Relying on the return value is not a good idea anymore since ReactDOM.render may be asynchronous in some cases already and may become fully asynchronous in later versions of React.

call super. Cannot read property 'call' of undefined

class AutoResizeCanvasControl : RComponent<RProps, RState>() {
  override fun RBuilder.render() {
  }
  override fun componentDidMount() {
    super.componentDidMount()
  }

  override fun componentWillUnmount() {
    super.componentWillUnmount()
  }
}

This component calls parent implementation of those methods, but there are no methods in the JS class, thus it fails.

react-canvas.kt?e65d:49 Uncaught TypeError: Cannot read property 'call' of undefined
    at AutoResizeCanvasControl.componentDidMount (react-canvas.kt?e65d:49)
    at commitLifeCycles (react-dom.development.js?9d96:9784)
    at commitAllLifeCycles (react-dom.development.js?9d96:11455)
    at HTMLUnknownElement.callCallback (react-dom.development.js?9d96:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?9d96:138)
    at invokeGuardedCallback (react-dom.development.js?9d96:187)
    at commitRoot (react-dom.development.js?9d96:11594)
    at completeRoot (react-dom.development.js?9d96:12502)
    at performWorkOnRoot (react-dom.development.js?9d96:12452)
    at performWork (react-dom.development.js?9d96:12370)

Type safe CSS

Some way to do type-safe css. GWT had this. I would check that out for an example.

React Dev Tools Error When Inspecting Code

I got a fairly simple setup that looks like this:

enum class AppOptions {
    Option1, Option2
}

interface AppState : RState {
    var options: MutableList<AppOptions>
    var selectedOption: AppOptions
}

class App : RComponent<RProps, AppState>() {
    init {
        state.options = mutableListOf(Option1, Option2)
        state.selectedOption = Option1
    }

    override fun componentDidMount() {
        setState(state)
    }

    override fun RBuilder.render() {
        listOf(nav(classes = "navbar navbar-default") {
            key = "navbar"
            div(classes = "container") {
                a(classes = "navbar-brand", href = "#") { +"Elders Quorum" }
                ul(classes = "nav navbar-nav") {
                    li(classes = if (state.selectedOption == Option1) "active" else "") {
                        a(href = "#") {
                            attrs {
                                onClickFunction = { state.selectedOption = Option1;setState(state) }
                            }
                            +"Option1"
                        }
                    }
                    li(classes = if (state.selectedOption == Option2) "active" else "") {
                        a(href = "#") {
                            attrs {
                                onClickFunction = { state.selectedOption = Option2;setState(state) }
                            }
                            +"Option2"
                        }
                    }
                }
            }
        }, div(classes = "container") {
            key = "content"
            renderTarget(this)
        })
    }

    private fun renderTarget(rdomBuilder: RDOMBuilder<DIV>): ReactElement {
        if (state.selectedOption == Option1)
            return rdomBuilder.span { +"Option1" }
        else if (this.state.selectedOption == Option2)
            return rdomBuilder.span { +"Option2" }
        return rdomBuilder.div { }
    }
}

fun RBuilder.app() = child(App::class) {}
fun main(args: Array<String>) {
    render(document.getElementById("react")) {
        app()
    }
}

It works fine. React Dev Tools give the right information for state.selectedOption. However, when trying to use it to access state.options it throws this error:

> Uncaught TypeError: Cannot read property 'length' of undefined
    at AbstractMutableList.get (kotlin.js:23508)
    at backend.js:7715
    at Array.forEach (<anonymous>)
    at Bridge._inspectResponse (backend.js:7711)
    at Bridge._handleMessage (backend.js:7592)
    at listener (backend.js:92)

The specific portion of the code where that happens looks like this:

Object.defineProperty(ArrayList.prototype, 'size', {get: function () {
    return this.array_hd7ov6$_0.length;
}});

It seems to only happen to lists. Anything wrong with my setup?

React.createElement: type is invalid

Using kotlin-react-router-dom, I get this error:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `MainComponent`. in MainComponent

I managed to reduce it to a reproducible example:

import react.RBuilder
import react.RComponent
import react.RProps
import react.RState
import react.dom.div
import react.dom.render
import react.router.dom.browserRouter
import react.router.dom.hashRouter
import react.router.dom.route
import react.router.dom.switch
import kotlin.browser.document
import kotlin.browser.window

class SimpleComponent : RComponent<RProps, RState>() {
    override fun RBuilder.render() {
        div {
            +"Test"
        }
    }

}

class MainComponent : RComponent<RProps, RState>() {
    override fun RBuilder.render() {
        div {
            + "before"
        }
        browserRouter {
            switch {
                route("/", SimpleComponent::class, exact = true)
            }
        }
    }

}

fun main(args: Array<String>) {
    window.onload = {
        render(document.getElementById("root")!!) {
            child(MainComponent::class) {}
        }
    }
}

I comment out the div before the browserRouter (the one containing the text "before"), the error disappears and the router works as advertised.

I use gradle to build, my build.gradle is identical to https://github.com/Kotlin/kotlin-frontend-plugin/blob/master/examples/frontend-only/build.gradle, except that I am using kotlin 1.2.51, and I added the dependencies and repo for org.jetbrains:kotlin-react:16.4.1-pre.34-kotlin-1.2.51 and org.jetbrains:kotlin-react-dom:16.4.1-pre.34-kotlin-1.2.51 and org.jetbrains:kotlin-react-router-dom:4.2.2-pre.34-kotlin-1.2.51.