Add js target

TomislavMladenov · TomislavMladenov · commit f000a98aea4e · 2024-08-09T13:26:53.000+03:00
diff --git a/gradle.properties b/gradle.properties
@@ -1,4 +1,5 @@
 kotlin.code.style=official
+kotlin.js.compiler=ir
 
 #Gradle
 org.gradle.jvmargs=-Xmx2048M -Dfile.encoding=UTF-8 -Dkotlin.daemon.jvm.options\="-Xmx2048M"
@@ -9,4 +10,7 @@ android.useAndroidX=true
 
 #MPP
 kotlin.mpp.androidSourceSetLayoutVersion=2
-kotlin.mpp.enableCInteropCommonization=true
+kotlin.mpp.enableCInteropCommonization=true
+
+#Compose
+org.jetbrains.compose.experimental.jscanvas.enabled=true
diff --git a/kotlin-js-store/yarn.lock b/kotlin-js-store/yarn.lock
diff --git a/lazy-pagination-compose/build.gradle.kts b/lazy-pagination-compose/build.gradle.kts
@@ -1,6 +1,7 @@
 import org.jetbrains.compose.ExperimentalComposeLibrary
 import org.jetbrains.kotlin.gradle.ExperimentalKotlinGradlePluginApi
 import org.jetbrains.kotlin.gradle.dsl.JvmTarget
+import org.jetbrains.kotlin.ir.backend.js.compile
 
 plugins {
     alias(libs.plugins.kotlinMultiplatform)
@@ -23,6 +24,11 @@ kotlin {
     iosArm64()
     iosSimulatorArm64()
 
+    js {
+        browser()
+        binaries.executable()
+    }
+
     sourceSets {
         jvmMain.dependencies {
             implementation(compose.desktop.currentOs)
diff --git a/sample/composeApp/build.gradle.kts b/sample/composeApp/build.gradle.kts
@@ -18,7 +18,13 @@ kotlin {
     }
     
     jvm("desktop")
-    
+
+    js {
+        browser()
+        binaries.executable()
+    }
+
+
     listOf(
         iosX64(),
         iosArm64(),
diff --git a/sample/composeApp/src/jsMain/kotlin/main.kt b/sample/composeApp/src/jsMain/kotlin/main.kt
@@ -0,0 +1,12 @@
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.CanvasBasedWindow
+import org.jetbrains.skiko.wasm.onWasmReady
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() {
+    onWasmReady {
+        CanvasBasedWindow("Lazy Pagination") {
+            App()
+        }
+    }
+}
diff --git a/sample/composeApp/src/jsMain/resources/index.html b/sample/composeApp/src/jsMain/resources/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lazy Pagination</title>
+    <script src="skiko.js"></script>
+</head>
+<body>
+<div>
+    <canvas id="ComposeTarget"></canvas>
+</div>
+<script src="composeApp.js"></script>
+</body>
+</html>
diff --git a/sample/composeApp/src/jsMain/resources/styles.css b/sample/composeApp/src/jsMain/resources/styles.css
@@ -0,0 +1,14 @@
+html, body {
+    height: 100%;
+    margin: 0px;
+    padding: 0px;
+}
+
+canvas {
+  width: 100vw;
+  height: 100vh;
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
