Guys, if I need these dependencies: ``` import ko...

# kotlin-native

[GarouDan]

Guys, if I need these dependencies:

import kotlinx.interop.wasm.dom.*
import kotlinx.wasm.jsinterop.*

which dependencies should I include in my build.gradle.kts configuration file?

I’m trying to follow the steps of this project but I didn’t find the correct dependencies yet:

https://github.com/JetBrains/kotlin-native/tree/master/samples/html5Canvas

[Dominaezzz]

You don't need a dependency.

[Dominaezzz]

Just make sure you're using the wasm target.

[Dominaezzz]

Can I see your current build.gradle?

[GarouDan]

import org.jetbrains.kotlin.gradle.tasks.KotlinNativeCompile
import java.nio.file.Paths

plugins {
	kotlin("multiplatform")
}

repositories {
	jcenter()
}

val packageName = "kotlinx.interop.wasm.dom"
val jsinteropKlibFileName = Paths.get(buildDir.toString(), "klib", "$packageName-jsinterop.klib").toString()

kotlin {
	wasm32 {
		compilations["main"].outputKinds("EXECUTABLE")
		compilations["main"].entryPoint("com.company.team.project.application.native_.wasm.main")
	}

	sourceSets {
		val wasm32Main by getting {
			kotlin.srcDir("src/main/kotlin")
			resources.srcDir("src/main/resources")

			dependencies {
				implementation(files(jsinteropKlibFileName))
			}
		}
		val wasm32Test by getting {
			kotlin.srcDir("src/test/kotlin")
			resources.srcDir("src/test/resources")

			dependencies {
			}
		}
	}
}

tasks {
	withType<KotlinNativeCompile>().configureEach {
		dependsOn("jsinterop")
	}
}

task("jsinterop") {
	val os = org.gradle.internal.os.OperatingSystem.current()!!
	val workingDir = projectDir
	val ext = if (os.isWindows) ".bat" else ""
	val distributionPath = project.properties["org.jetbrains.kotlin.native.home"] as String
	val jsinteropCommand = Paths.get(file(distributionPath).path, "bin", "jsinterop$ext").toString()

	inputs.property("jsinteropCommand", jsinteropCommand)
	inputs.property("jsinteropPackageName", packageName)
	outputs.file(jsinteropKlibFileName)

	exec {
		commandLine(
			jsinteropCommand,
			"-pkg",
			packageName,
			"-o",
			jsinteropKlibFileName,
			"-target",
			"wasm32"
		)
	}
}

[Dominaezzz]

Sorry, how is this not working? Build error? No auto-complete?

[GarouDan]

Example.kt:7:36: error: unresolved reference: textContent
	document.getElementById("target").textContent = "Test"

[GarouDan]

There are some red markers in my import:

package com.company.team.project.application.native_.wasm

import kotlinx.interop.wasm.dom.*
import kotlinx.wasm.jsinterop.*

fun main() {
	document.getElementById("target").textContent = "Test"
}

[Dominaezzz]

Hmm, not sure what's wrong. Someone with more knowledge will come by.

[GarouDan]

I was using document.getElementById("target").textContent for js, is this exists for wasm? Since my autocompletion is not working I can’t really know

[GarouDan]

In the example it uses this: document.getElementById("myCanvas").asCanvas but I would like to write just a text for now

[Dominaezzz]

Haven't used the wasm target before, so have no idea.

[GarouDan]

Ok. Thanks for helping 😃

[GarouDan]

Oh, it worked. Despite I don’t have autocompletion, using the main function of the example it worked.

fun main() {

	val canvas = document.getElementById("myCanvas").asCanvas
	val ctx = canvas.getContext("2d")
	val rect = canvas.getBoundingClientRect()
	val rectLeft = rect.left
	val rectTop = <http://rect.top|rect.top>

	var mouseX: Int = 0
	var mouseY: Int = 0
	var draw: Boolean = false

	document.setter("onmousemove") { arguments: ArrayList<JsValue> ->
		val event = MouseEvent(arguments[0])
		mouseX = event.getInt("clientX") - rectLeft
		mouseY = event.getInt("clientY") - rectTop

		if (mouseX < 0) mouseX = 0
		if (mouseX > 639) mouseX = 639
		if (mouseY < 0) mouseY = 0
		if (mouseY > 479) mouseY = 479
	}

	document.setter("onmousedown") {
		draw = true
	}

	document.setter("onmouseup") {
		draw = false
	}

	setInterval(10) {
		if (draw) {
			ctx.strokeStyle = "#222222"
			ctx.lineTo(mouseX, mouseY)
			ctx.stroke()
		} else {
			ctx.moveTo(mouseX, mouseY)
			ctx.stroke()
		}
	}
}