Hello everyone, I'm pretty confused about kotlin/...

# javascript

[Bence Boros]

Hello everyone,

I'm pretty confused about kotlin/js and community resources are seemingly being scarce as of today..

So we are building up a project from scratch by using KMP.
We tought about sharing the majority of the codebase between Android, iOS and JS. All three platforms will have native UI written in Compose / SwiftUi / some React framework.
We don't have any issues regarding android, (ios is still in progress) but setup for JS seems to be a pain in the ass for some reason.

I'd be happy if you guys could clear some the fog in my mind so we can commit to / abandon this idea.

It's a heavily modularized project with most of it being shared code.

The idea is to have a singular module for the JS app which will depend on some of these shared modules.
Shared modules only have common code in there.
Js app only has jsMain and js target only with IR compiler, es modules, just the usual recommended basic JS setup.

The problem is for some reason I can't see any of the shared code from this JS module even though I'm depending on them..

Here's my JS build.gradle ->

plugins {
	kotlin("multiplatform")
	id("com.google.devtools.ksp")
}

dependencies {
	add("ksp", libs.koin.ksp)
}

kotlin {
	sourceSets.configureEach {
		kotlin.srcDir("$buildDir/generated/ksp/$name/kotlin/")
	}
}

kotlin {
	js(IR) {
		binaries.executable()
		useEsModules()
		nodejs()
		generateTypeScriptDefinitions()
	}

	sourceSets {
		val commonMain by getting {
			dependencies {
				// core
				implementation(projects.core.common)
				.... other common-kind modules

				// features
				implementation(projects.feature.login)
                .... other feature modules

				implementation(libs.decompose.core)
				implementation(libs.kotlinx.datetime)
				implementation(libs.koin.core)
				implementation(libs.koin.annotations)

				implementation(libs.coroutines.core)
			}
		}

		val jsMain by getting {
			dependsOn(commonMain)

			dependencies {
				implementation("org.jetbrains.kotlin:kotlin-stdlib-js")
				implementation(libs.coroutines.js)
			}
		}

		val commonTest by getting {
			dependencies {
				implementation(kotlin("test"))
			}
		}

		val jsTest by getting {
			dependsOn(commonTest)
			dependencies {
				implementation(kotlin("test"))
			}
		}
	}
}

I don't even know if it's any good though. I get all kind of testing related errors even though I have these testing configs in there.

Like I said I can't see common code from the js module which would be crucial for us. I can reach any code from the android target though. Doesn't matter if it's in the common jvm or common target if it has the right dependson config.

Why is it different in JS? How can I solve that?

FYI: If I use

kotlin("js") plugin instead of multiplatform and have src/main structure instead of src/jsMain it magically works!

The second part of my question:

Is it even feasable to have a single entry point for the JS app and they'll get all the dependencies from here? or what's the best practice if we'd like to write our web the traditional way and relying on the shared code? Thanks in advance guys!

[turansky]

I see 2 configurations of one extension (kotlin extension). Is it expected?

[Bence Boros]

woops, you are 100% right about that, thanks! What about the other stuff?

[turansky]

dependsOn(commonMain) and dependsOn(commonTest) are redundant

[turansky]

In jsMain I see implementation(libs.coroutines.js) dependency
Other dependencies you want to receive from common?

[Artem Kobzar]

Also, to see all the declarations from JS you need to annotate such declarations with JsExport

[Artem Kobzar]

I have a small example of such code sharing here: https://github.com/JSMonk/make-friends-with-kotlin-devs/tree/step-1-share-models

[Artem Kobzar]

If you have a question about it - ping me in DM

[Bence Boros]

@Artem Kobzar thanks! Seems like you only shared domain models which are insufficient for our usecase. We'd like to share way more than that.

[Artem Kobzar]

In other branches I also have shared request services, validations and even UI with Cimpose Multiplatform

[Artem Kobzar]

https://github.com/JSMonk/make-friends-with-kotlin-devs/tree/step-3-share-api-requests

[Artem Kobzar]

Here you can see shared requests and validations

[Bence Boros]

Awesome, I'll definitely check it out! thank you @Artem Kobzar