@agrosner DSL? Which? link please if possible?

Hi, I just started to use react+kotlin using create-react-kotlin-app, I have one question: can I use existing module (eg. react-bootstrap) in my project?

Hi, I`ve seen this presentation from KotlinConf and I am curious if there is anything available or on the roadmap for react native. Thanks

Is webpack/npm the only way to build a kotlin-react project?

Question for you guys, I started playing around with a Kotlin/React app, started with the create-react-kotlin-app tool to generate all the configs. Seems to work perfectly when I do npm run build, but the auto-reload with npm run dev often breaks and I'm getting errors like this one :

TypeError: Kotlin.defineModule is not a function
(anonymous function)
<http://localhost:3000/static/js/bundle.js:29147:10>
map../components/menu/Menu.css
<http://localhost:3000/static/js/bundle.js:29149:2>

Is that something you've seen before ? Thanks

Hello, I'm trying to use an external library (antd), so I did this:

@file:JsModule("antd/lib/button")
package antd.lib.button

import react.RProps
import react.RState
import react.React
import react.ReactElement

@JsName("Button")
external class ButtonComponent : React.Component<RProps, RState> {
    override fun render(): ReactElement?
}

And I try to use through

package antd.lib.button

import react.RBuilder
import react.RHandler
import react.RProps

fun RBuilder.antdButton(handler: RHandler<RProps>) = child(ButtonComponent::class, handler)

But I get in the console

reflection.kt?8f80:61 Uncaught TypeError: Cannot read property '$metadata$' of undefined
    at getOrCreateKClass (reflection.kt?8f80:61)
    at getKClass (reflection.kt?8f80:23)
    at antdButton (dsl.kt?502b:11)
    at Home.render_ss14n$ (Home.kt?7b40:13)
    at eval (ReactComponent.kt?fdb7:74)
    at buildElements (RBuilder.kt?4494:73)
    at Home.RComponent.render (ReactComponent.kt?fdb7:74)
    at finishClassComponent (react-dom.development.js?9c26:7873)
    at updateClassComponent (react-dom.development.js?9c26:7850)
    at beginWork (react-dom.development.js?9c26:8225)

react-dom.development.js?9c26:9747 The above error occurred in the <Home> component:
    in Home (created by Route)
    in Route
    in div
    in Router (created by BrowserRouter)
    in BrowserRouter

Do you know what I am missing?

Also in React (non-Kotlin)

SetState(JSobject, function(){callBack code})

is as @Filipp Riabchun said the state is batched and asynchronous. Meaning that the state change isn't immediate and in JS React if you need to have some action occur when the state actually changes you include a call back function as the second argument. I'm not sure how Kotlin transpiles the JS for this.

Sorry if this has already been asked and answered (documentation is somewhat sparse and scattered for kotlin-react). How do I import into Kotlin and use a JavaScript react library (for example https://react-bootstrap.github.io/)?

Actually that's not quite what I was trying to do. I wanted a class component to simply pass all its children on, but adding some props to pass down as well

Also, what is the difference between the js-externals repo and the kotlin-wrappers repo? They both have ways to use React and i'm not clear which one is supposed to be used for which use case

Friendly ping in case you missed. I made PR to wrappers for React Router: https://github.com/JetBrains/kotlin-wrappers/pull/39

Sure it's possible to do it step by step. Interop in both directions is quite straightforward. If you're using webpack, you can follow

kotlin-webpack-plugin

setup instructions: https://github.com/JetBrains/create-react-kotlin-app/tree/master/packages/kotlin-webpack-plugin Your kotlin module will be available as CommonJS module then

is it possible to use

kotlinx.serialization

with

CRKA

?

There are plans for enabling that, but it will involve breaking changes

Basically, the idea is that element won't be appended unless you add

+

like with strings

@Filipp Riabchun This can be done by using component class name instead of builder function name. Example

+MyComponent(prop1, prop2)

. There is old prototype here: https://htmlpreview.github.io/?https://raw.githubusercontent.com/snrostov/ui-dsl/master/index.html#hello-widgets

Is there a way to avoid the error message when using select tag in render?

override fun RBuilder.render() {
		val options = listOf("foo", "bar", "baz")
		select {
			attrs.value = "foo"
			attrs.onChangeFunction = {}

			options.forEach {
				option {
					key = it
					attrs.value = it
					+it
				}
			}
		}
	}

Warning: The value prop supplied to <select> must be a scalar value if multiple is false.

I'm working on a stylesheet using kotlin-styled and kotlin-css-js and I'm trying to convert an existing style but don't quite know how to do it. The style is for a button's hover state and I want to set the color property to be inherit but I don't see a way to do that

Can anyone run

npm run gen-idea-libs

successfully with

1.0.8

?

> react-scripts-kotlin gen-idea-libs

fs.js:124
  throw new ERR_INVALID_CALLBACK();
  ^

TypeError [ERR_INVALID_CALLBACK]: Callback must be a function
    at maybeCallback (fs.js:124:9)
    at Object.fs.writeFile (fs.js:1244:14)
    at Object.keys.forEach.name (/Users/sam/IdeaProjects/dl-web-portal/node_modules/@jetbrains/gen-idea-libs/generate.js:46:8)
    at Array.forEach (<anonymous>)
    at generate (/Users/sam/IdeaProjects/dl-web-portal/node_modules/@jetbrains/gen-idea-libs/generate.js:43:25)
    at Object.<anonymous> (/Users/sam/IdeaProjects/dl-web-portal/node_modules/react-scripts-kotlin/scripts/gen-idea-libs.js:20:1)
    at Module._compile (internal/modules/cjs/loader.js:678:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10)
    at Module.load (internal/modules/cjs/loader.js:589:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! dl-portal@0.1.0 gen-idea-libs: `react-scripts-kotlin gen-idea-libs`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the dl-portal@0.1.0 gen-idea-libs script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/sam/.npm/_logs/2018-05-08T19_07_25_518Z-debug.log




0 info it worked if it ends with ok
1 verbose cli [ ‘/usr/local/lib/node_modules/node/bin/node’,
1 verbose cli   ‘/usr/local/bin/npm’,
1 verbose cli   ‘run’,
1 verbose cli   ‘gen-idea-libs’ ]
2 info using npm@6.0.0
3 info using node@v10.0.0
4 verbose run-script [ ‘pregen-idea-libs’, ‘gen-idea-libs’, ‘postgen-idea-libs’ ]
5 info lifecycle dl-portal@0.1.0~pregen-idea-libs: dl-portal@0.1.0
6 info lifecycle dl-portal@0.1.0~gen-idea-libs: dl-portal@0.1.0
7 verbose lifecycle dl-portal@0.1.0~gen-idea-libs: unsafe-perm in lifecycle true
8 verbose lifecycle dl-portal@0.1.0~gen-idea-libs: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/sam/IdeaProjects/dl-web-portal/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
9 verbose lifecycle dl-portal@0.1.0~gen-idea-libs: CWD: /Users/sam/IdeaProjects/dl-web-portal
10 silly lifecycle dl-portal@0.1.0~gen-idea-libs: Args: [ ‘-c’, ‘react-scripts-kotlin gen-idea-libs’ ]
11 silly lifecycle dl-portal@0.1.0~gen-idea-libs: Returned: code: 1  signal: null
12 info lifecycle dl-portal@0.1.0~gen-idea-libs: Failed to exec gen-idea-libs script
13 verbose stack Error: dl-portal@0.1.0 gen-idea-libs: `react-scripts-kotlin gen-idea-libs`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:283:16)
13 verbose stack     at EventEmitter.emit (events.js:182:13)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:182:13)
13 verbose stack     at maybeClose (internal/child_process.js:947:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:236:5)
14 verbose pkgid dl-portal@0.1.0
15 verbose cwd /Users/sam/IdeaProjects/dl-web-portal
16 verbose Darwin 17.5.0
17 verbose argv “/usr/local/lib/node_modules/node/bin/node” “/usr/local/bin/npm” “run” “gen-idea-libs”
18 verbose node v10.0.0
19 verbose npm  v6.0.0
20 error code ELIFECYCLE
21 error errno 1
22 error dl-portal@0.1.0 gen-idea-libs: `react-scripts-kotlin gen-idea-libs`
22 error Exit status 1
23 error Failed at the dl-portal@0.1.0 gen-idea-libs script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Have anyone been able to add react-ace to kotlin(CRKA)? https://github.com/securingsincity/react-ace I get

TypeError: Cannot read property '$metadata$' of undefined

used ts2kt and added

@JsName("AceEditor")
external class AceEditor : Component<AceEditorProps, RState> {
    override fun render(): ReactElement?
}

The documentation for the styled library says you can call

StyledComponents.injectGlobal(styles.toString())

to inject global styles. However, it doesn't specify where you can call that. I've tried calling it from just about every part of my app and can never get it to work. I always get a receiver mismatch error. Could someone help provide a little more context on how this is used?

OK, simplifying things, have done a create-react-kotlin-app and pasted in my example code (with input instead of styledInput and no css line, just to keep things real basic) after the ticker <p>... and I do get a "for" attribute in my output, however all is not well... The console shows the following warning:

Warning: Invalid DOM property `for`. Did you mean `htmlFor`?
    in label (created by App)
    in App

so something still seems a bit wrong, which might be causing my initial issue in more complex code?

can’t understand how to convert this jsx example in kotlin

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

from this tutorial https://reactjs.org/docs/composition-vs-inheritance.html

kotlin-fullstack-sample uses classes like

ReactDOMComponent

from

package react.dom

that now doesn’t exist in this package. These sources are not relevant as I understand because I can’t use this code in newly created app from create-react-kotlin-app tool.

class Application : ReactDOMComponent<ReactComponentNoProps, ApplicationPageState>() {
    companion object : ReactComponentSpec<Application, ReactComponentNoProps, ApplicationPageState>
}

what is the actual way for using this code to achive the same result - calling

Application{}

in render function without creating convenient function

ReactDOM.render(document.getElementById("content")) {
        div {
            Application {}
        }
    }

@Nail Gilaziev

npm i core-js@^2.5.3 ajv-keywords@3.2.0

simplest way would be to add that line into the head of the index.html file located in the public folder of your app.

why work on this plugin suspended? It's seems to be very helpful https://github.com/snrostov/idea-kotlin-react

@m I’m talking only about create-react-kotlin-app tool. The react wrapper itself is totally fine (see also https://github.com/JetBrains/kotlin-wrappers). But if your application is a little bit more complicated than a trivial TODO-list I’d suggest you to eject it from create-react-kotlin-app or use completely custom build script which is a little bit painful right now (well, all JS bundling tool are painful IMO 🙂 ). There are not so many examples of KotlinJS applications with customized build. Most of examples have really basic setup generated by IDE and this is not what we have in real world applications. In the end, building Kotlin to JS is not that simple, but writing a code in Kotlin is WAY easier and fun than in JS (including Kotlin-React apps) 🙂

Hi, starting from an app created with create-react-kotlin-app how can add an external Kotlin dependency? For instance I have a KotlinJS project called my-lib and a Kotlin/React project called my-app. How can I use my-lib in my-app? Thanks 🙂