Yay, first experience with Kotlin/JS & React w...

# javascript

[Marc Knaup]

Yay, first experience with Kotlin/JS & React was quite good 🎉

Things which I think need improvement:
• Debugging support. I can’t really debug anything.
• Faster refresh in browser after I’ve changed something in code. Lost a lot of time here.
• More documentation.
• Update to kotlinx-html. Seems quite dated.

It’s also surprisingly easy to deploy a Kotlin React project on Cloudflare Worker Sites.
https://workers.cloudflare.com/sites
Maybe that could be a Gradle plugin for automatic deployment. It’s easy & cheap for getting started 🙂

[Big Chungus]

Few pointers for you:

Debugging works fine after you enable sourceMaps

Refresh can be improved with hmr https://kotlinlang.slack.com/archives/C0B8L3U69/p1602179280192500?thread_ts=1602179280.192500&cid=C0B8L3U69

There are plenty of docs, jus not in one place. Would be nice to have an index of that for sure...

kotlinx-html seems to have been put on life support, the only changes recently being kotlin version bumps. Also there are plenty of unreviewed prs over 2 months old. JB must be prioritising something else.

[Big Chungus]

As for deployments, kotlin js output is plain js, so any deployment strategies used for regular react apps work for kotlin too

[Marc Knaup]

Thanks for all the feedback 🙂
Regarding debugging:
Even if I enable source maps explicitly (I expect that to be default for browserDevelopmentRun) it can’t see the files here:

[Marc Knaup]

Regarding refresh: Thanks, that HMR feature was well-hidden 😄

[Marc Knaup]

The documentation is indeed pretty scattered.

[Big Chungus]

You need to enable sourceMaps for both, webpackTask and runTask explicitly 😄

[Big Chungus]

JB is looking at providing master flag to quickly toggle it for webpackTask, runTask & testTask with one prop

[Marc Knaup]

Thanks, I’ll test
Why is it on by default for distribution but not development 😮

[Big Chungus]

I thought it's off for all. In any case, it's pretty messy right now 🙂

[Marc Knaup]

No, I haven’t configured it but I do have source maps in my distribution folder.

[Marc Knaup]

No difference after setting it in both 😕

[Big Chungus]

No difference as in sourceMaps are not generated?

[Big Chungus]

Or not visible in browser?

[Marc Knaup]

Hmm. In Chrome it reads “Source maps detected”. But I can’t find a way to access the sources.

[Marc Knaup]

According to the docs it should look like this.
But it’s not there.

[Marc Knaup]

Nevermind. For whatever obscure reasons source maps in my Chrome Developer Tools were turned off 😅

[Marc Knaup]

Source maps are definitely on by default 🙂

[Alan B]

@Marc Knaup (or anyone else) Hey, in your endeavors with Kotlin/React/JS have you found any good resources or just a decent example of an app? I’m more curious than actually attempting it. I don’t have the time to go through all the trials and tribulations of setup, due to other major pressing issues. But would love to see something using a few core react concepts. My team would probably show up at my house with baseball bats and fire if I tried to pull such a thing (yet). But, I am curious to give it a try.

[Marc Knaup]

@Alan B unfortunately I haven’t found anything like that yet. I kinda had the same issues which is why I’m testing waters here. Maybe I can share mine once it’s more mature but it’s far from that 😅 More like a two-day experiment upon that I will build.

[Alan B]

@Marc Knaup Hey thanks for responding Yeah, it’s something that I’ve been meaning to toy with but just haven’t had the extra time and ambition. Right now I’m trying to figure out the best approach for Mongo and kotlin. I’m NOT using one of those awful builder APIs. 😄 Good luck!

[Marc Knaup]

You mean writing BSON codecs? I’ve always wanted to build a generator for that 😄

[Marc Knaup]

Using custom DSL it’s already better than the original API but still painful 😕
But we should probably move to #server or so.

[Marc Knaup]

Oh, sourceMaps don’t work with the IR compiler.
And with the legacy compiler I cannot even run my app…

Uncaught TypeError: this.css_wopuc9$(...).provideDelegate_n5byny$ is not a function

Kinda between a rock and a hard place here…

[Big Chungus]

Yep. They're still working on the source maps for ir

[Big Chungus]

As for why it's crashing with legacy, it looks like relevant bit of code has been dce'd

[Big Chungus]

Are you using ktor client? I remember there being a bug like this

[Marc Knaup]

No, it's because I'm using kotlin-styled

[Glen]

Hello @Alan B, you can check out these repositories : https://github.com/ptmt/kotlin-react-native-example and https://github.com/Foso/KotlinReactNativeMpp . Even though, they are react-native😅