kotlin-wrappers VS mobx-state-tree

If you want something more standard, I'd look at Kotlin Wrappers and look at examples of using react - https://github.com/JetBrains/kotlin-wrappers

Kotlin wrappers for JS.

The only reference I can find to an error boundary in Kotlin React is at QueryErrorResetBoundary.kt in the kotlin-wrappers repository. Would any of you know anything about this?

Yes! Interesting that it isn't defined in the Length.kt file (that's where I was looking for it) and is instead in its lonesome, but I guess it makes sense as it's not actually a length value. Thanks for the help!

plugins { kotlin("js") id("com.github.node-gradle.node") version "3.4.0" } kotlin { js(IR) { // let's rename it to more reusable as under that name we will access it in our boilerplate code moduleName = "stories" // browser also works fine here, we just need it for compiling purposes as of now nodejs {} // add a startup script to our package json compilations["main"].packageJson { customField( "scripts", mapOf("storybook" to "start-storybook -p 6006 -c $projectDir/.storybook --ci") ) } binaries.executable() } } tasks.named("build") { dependsOn("assemble") dependsOn("copyJsStories") } tasks.register("copyJsStories") { dependsOn("developmentExecutableCompileSync") from("$projectDir/src/main/js") into("$buildDir/compileSync/main/developmentExecutable/kotlin") // flatten all files to appear on one level eachFile { if (isDirectory) { exclude() } path = path.replace("/", ".") } } tasks.register("copyPackageJson") { dependsOn("build") from("$buildDir/tmp/publicPackageJson/package.json") into("$projectDir") } tasks.register("start") { dependsOn("build") dependsOn("npmInstall") args.addAll("run", "storybook") } tasks.named("npmInstall") { dependsOn("copyPackageJson") workingDir.set(file("$projectDir")) inputs.file("package.json") } dependencies { // dependency to the project with components implementation(project(":app")) // react dependencies to put on package.json explicitly // can resolve the actual versions on https://github.com/JetBrains/kotlin-wrappers implementation(npm("react", "^17.0.2")) implementation(npm("react-dom", "^17.0.2")) implementation(npm("react-router-dom", "^6.2.2")) // storybook specific dependencies implementation(npm("@storybook/builder-webpack5", "^6.5.9")) implementation(npm("@storybook/manager-webpack5", "^6.5.9")) implementation(npm("@storybook/node-logger", "^6.5.9")) implementation(npm("@storybook/preset-create-react-app", "^4.1.2")) implementation(npm("@storybook/react", "^6.5.9")) }

kotlin js https://github.com/JetBrains/kotlin-wrappers/tree/master/kotlin-react Multiplatform etc.

From my experience if you're truly trying to interop with JavaScript code that is already out there on npm, you better hope there is a library that already wraps it like kotlin wrappers. Otherwise you would have to write a wrapper library yourself or use dukat to convert typescript definitions to kotlin (which I have never had the best luck converting but maybe it got better?).

Everything moved to central a long back - https://github.com/JetBrains/kotlin-wrappers

It's still pretty finnicky to configure and it hasn't emerged from alpha yet, so its future isn't exactly secure, but I'm hopeful as they appear to be investing a lot of resources into it and adjacent projects, e.g. the kotlin-react library.

We already have a battle-tested integration with react (it's used inside jetbrains.space) -- https://github.com/JetBrains/kotlin-wrappers And, take a look at docs and hands-on.

Basic knowledge of Tailwind CSS and MobX-State-Tree

Folks disagreed with my comment yesterday criticizing Redux as an architecture, but this sort of illustrates my point. I'd suggest taking a look at Mobx State Tree, which automatically re-renders components only when they depend on the specific part of the state that changed. Other fields can change without triggering unnecessary re-renders, and developers don't have to worry about manually splitting the state to deal with performance problems.

mobx-state-tree (https://mobx-state-tree.js.org/)

Benefits of it over mobx is data normalization with references and JSON patches which allow you sync complex state easily. Typed models are also a plus.

Drawbacks are performance (see https://github.com/mobxjs/mobx-state-tree/issues/1267).

Previously was using immer, which I loved because of immutability but moved off since classes and OOP didn't feel as natural as in mst.

If I were to pick an alternative, might try redux with normalization https://redux.js.org/usage/structuring-reducers/normalizing-....

And if I were to build a state management tool, I would prioritize a library that has

MobX - or even MobX-state-tree if you prefer

As for state imba doesn't impose any paradigm on you - you are free to bring your own state managment. So you could use a library like mobx-state-tree.

We have covered almost all required topics from MobeX-State-Tree. MobeX provided few sample example, download ToDoMVC - app using React and MST and Bookshop - app with references, identifiers, routing, testing etc.

MobX-State-Tree -> MobX is a state management "engine", and MobX-State-Tree gives it structure and common tools you need for your app.

Recoil is cool, I would also recommend mobx-state-tree which is not much more complex to use and gives you nice type safety and reactivity. You can easily get a snapshot of the whole store and restore from it.