https://kotlinlang.org logo
#getting-started
Title
# getting-started
r

Ray Rahke

03/02/2024, 4:16 PM
Unresolved reference: browser
why?
r

Robert Jaros

03/02/2024, 4:23 PM
Perhaps your project is not Kotlin/JS
e

ephemient

03/02/2024, 4:23 PM
https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.browser/ see how everything there has a yellow dot? it's only available in JS sourcesets
r

Ray Rahke

03/02/2024, 4:24 PM
how do I get the JS sourcesets?
e

ephemient

03/02/2024, 4:24 PM
did you follow the Kotlin/JS set up
r

Ray Rahke

03/02/2024, 4:25 PM
that is much more complicated than the guides I am finding online
I just want to write kotlin and compile it to js. I don't want anything fancy or heavy weight
like using multiplatform
I don't think i need that, do I?
e

ephemient

03/02/2024, 4:25 PM
you do
anything that's not Kotlin/JVM is multiplatform
r

Ray Rahke

03/02/2024, 4:28 PM
@ephemient so does this look right then? ``````
Copy code
plugins {
    kotlin("jvm") version "1.9.22"
    kotlin("multiplatform") version "1.9.22"
}

group = "org.example"
version = "1.0-SNAPSHOT"

repositories {
    mavenCentral()
}

dependencies {
    testImplementation("org.jetbrains.kotlin:kotlin-test")
    implementation("org.jetbrains.kotlin:kotlin-stdlib-js")
}

tasks.test {
    useJUnitPlatform()
}
kotlin {
    jvmToolchain(21)
    js {
        browser {
        }
        binaries.executable()
    }
    sourceSets {
        val jsMain by getting {
            dependencies {
                implementation("org.example.myproject:1.1.0")
            }
        }
    }
}
e

ephemient

03/02/2024, 4:29 PM
remove
kotlin("jvm")
, and
dependencies
block needs to move or be removed
r

Ray Rahke

03/02/2024, 4:30 PM
why remove dependencies?
i am confused as there are multiple referneces of this word
like in side the js sourceset
e

ephemient

03/02/2024, 4:30 PM
root
dependencies
is Gradle dependencies, which are no longer correct in multiplatform
r

Ray Rahke

03/02/2024, 4:31 PM
so each multiplatform target needs its own deps
are sourcesets multiplatform targets?
e

ephemient

03/02/2024, 4:31 PM
dependencies
inside the
sourceSet._name_
is a Kotlin Gradle Plugin API that manages multiplatform dependencies
you can have common dependencies too (shared among multiple sourcesets/targets)
each target has two sourcesets by default, main and test
r

Ray Rahke

03/02/2024, 4:33 PM
I dont reall yunderstnad this line
`
Copy code
dependencies {
    implementation("org.example.myproject:1.1.0")
}
`
why am I including my own project
when this is inside of that project
isnt that circular
e

ephemient

03/02/2024, 4:34 PM
you should not be doing that
r

Ray Rahke

03/02/2024, 4:35 PM
ohk misinterpreting the docs then
they must mean, this would be some secondary external project
that you include into this fake docs project
so then, what do I put here
Copy code
sourceSets {
        val jsMain by getting {
            dependencies {
                
            }
        }
    }
i dont really need any js dependencies
i just want native js stuff
and browser calls like canvas api
e

ephemient

03/02/2024, 4:36 PM
well you would put those in there too
r

Ray Rahke

03/02/2024, 4:37 PM
dont understand what you mean
e

ephemient

03/02/2024, 4:38 PM
NPM dependencies can be added to jsMain/jsTest dependencies, just like Kotlin/JS dependencies
r

Ray Rahke

03/02/2024, 4:38 PM
this?
Copy code
sourceSets {
        val jsMain by getting {
            dependencies {
                implementation("org.jetbrains.kotlin:kotlin-stdlib-js")
            }
        }
    }
e

ephemient

03/02/2024, 4:38 PM
you do not need that, kotlin-stdlib is set up by default
r

Ray Rahke

03/02/2024, 4:38 PM
yeah I dont need any NPM stuff, just native JS + the HTML dom elements
but this is
:kotlin-stdlib-js"
the
-js
is that setup by default?
e

ephemient

03/02/2024, 4:38 PM
yes
r

Ray Rahke

03/02/2024, 4:38 PM
oh ok
so if I dont need any NPM depenedencies, just JS + HTML, what do I put?
e

ephemient

03/02/2024, 4:39 PM
if you don't need any dependencies then you don't need to configure the sourceset at all
r

Ray Rahke

03/02/2024, 4:39 PM
but how do I get these lines working
Copy code
import kotlin.browser.document
import org.w3c.dom.*
those aren't npm dependencies
e

ephemient

03/02/2024, 4:40 PM
those are only available in a JS sourceset (e.g.
src/jsMain/kotlin/**
and
src/jsTest/kotlin/**
)
r

Ray Rahke

03/02/2024, 4:41 PM
do I have to download that somewhere?
e

ephemient

03/02/2024, 4:41 PM
no, just create the folders and write your Kotlin files in there
r

Ray Rahke

03/02/2024, 4:42 PM
image.png
so it is based on what I name the folder?
im a little confused on how that mechanically works
i guess it just only gives you access to js stuff in jsMain?
what if I want to name the folder something other than jsMain?
e

ephemient

03/02/2024, 4:43 PM
yes
don't
r

Ray Rahke

03/02/2024, 4:44 PM
its not allowed? or just a bad idea
e

ephemient

03/02/2024, 4:44 PM
it is possible to configure the sourceset to add more directories, but it's not a good idea to do so in a way that would cause collisions
r

Ray Rahke

03/02/2024, 4:44 PM
is the jsMain/kotlin necessary
i want to just do jsMain/main.kt
i never use java
just kotlin
e

ephemient

03/02/2024, 4:44 PM
it is the convention. yes it is necessary because
jsMain/resources
can also exist and have a different meaning
r

Ray Rahke

03/02/2024, 4:45 PM
ohk
the code in jsMain/kotlin can use classes I create in generalMain/kotlin too right?
they can share
e

ephemient

03/02/2024, 4:45 PM
commonMain, yes
r

Ray Rahke

03/02/2024, 4:45 PM
commonMain is also special name?
e

ephemient

03/02/2024, 4:45 PM
yes
r

Ray Rahke

03/02/2024, 4:46 PM
thanks for your help
oh btw
Copy code
sourceSets {
        val jsMain by getting {
            dependencies {

            }
        }
    }
can I just delete this whole thing then
e

ephemient

03/02/2024, 4:47 PM
yes. if you do not need to configure anything, you can delete the whole thing
you probably do want to at least add
Copy code
kotlin {
    sourceSets {
        commonTest {
            dependencies {
                implementation(kotlin("test")) // same as "org.jetbrains.kotlin:kotlin-test"
though
also
Copy code
kotlin {
    js {
        browser()
        binaries.executable()
if you want
./gradlew jsRun
r

Ray Rahke

03/02/2024, 5:28 PM
Where shoudl I put my html
in jsMain/resources?
e

ephemient

03/02/2024, 5:28 PM
yes
r

Ray Rahke

03/02/2024, 5:29 PM
is jsMain/resources where my compiled js will go
when i compile
the dist/ basically
e

ephemient

03/02/2024, 5:29 PM
they are effectively merged together
r

Ray Rahke

03/02/2024, 5:31 PM
what gets merged togethe
resources and jsMain?
e

ephemient

03/02/2024, 5:31 PM
the webpack output after processing the compiled kotlin, and resources
r

Ray Rahke

03/02/2024, 5:32 PM
so I can do script src="built.js"
and expect built.js to just be there
inside the html
e

ephemient

03/02/2024, 5:33 PM
it will default to
_modulename_.js
, and is configurable in webpack settings, but yes
r

Ray Rahke

03/02/2024, 5:33 PM
guide i am following now says to do
ktc-js -output canvas.js canvas1.kt
ktc-js is not a thing on my system
Copy code
./gradlew jsRun
oh ill try this
ok this does not compile any JS though
where do I tell my html to look for script
Copy code
<body>
    <canvas></canvas>
    <script src="???"></script>
</body>
e

ephemient

03/02/2024, 5:39 PM
_modulename_.js
like I just said, and as documented on https://kotlinlang.org/docs/running-kotlin-js.html#run-the-browser-target
r

Ray Rahke

03/02/2024, 5:39 PM
oh gotcha sorry
is there not a way to change the project name in a config file
as opposed to IDE menus
e

ephemient

03/02/2024, 5:42 PM
is this the root project or a subproject?
r

Ray Rahke

03/02/2024, 5:42 PM
root project
e

ephemient

03/02/2024, 5:42 PM
then it is
rootProject.name
in
settings.gradle(.kts)
.
but also I said the output filename is configurable in webpack settings, it does not need to be the same as the module name
r

Ray Rahke

03/02/2024, 5:42 PM
right, thanks
e

ephemient

03/02/2024, 5:44 PM
Copy code
kotlin {
    js {
        browser {
            commonWebpackConfig {
                outputFileName = "whatever.js"
r

Ray Rahke

03/02/2024, 5:46 PM
image.png
great, only issue is that intellij gets confused by the name
since the file does not exist yet
9 Views