build: bootstrap empty js app

sargunv · Dec 30, 2024 · 45b6c27 · 45b6c27
1 parent 723e692
commit 45b6c27
Show file tree

Hide file tree

Showing 39 changed files with 934 additions and 48 deletions.
diff --git a/.fleet/run.json b/.fleet/run.json
@@ -24,6 +24,14 @@
         ":demo-app:run"
       ]
     },
+    {
+      "name": "Js-App",
+      "type": "gradle",
+      "workingDir": "$PROJECT_DIR$",
+      "tasks": [
+        ":demo-app:jsRun"
+      ]
+    },
     {
       "name": "Reformat",
       "type": "gradle",

diff --git a/demo-app/build.gradle.kts b/demo-app/build.gradle.kts
@@ -47,6 +47,10 @@ kotlin {
   iosSimulatorArm64()
   iosX64()
   jvm("desktop")
+  js(IR) {
+    browser { commonWebpackConfig { outputFileName = "app.js" } }
+    binaries.executable()
+  }
 
   cocoapods {
     summary = "MapLibre Compose demo app"
@@ -94,8 +98,11 @@ kotlin {
     desktopMain.dependencies {
       implementation(compose.desktop.currentOs)
       implementation(libs.kotlinx.coroutines.swing)
+      implementation(libs.ktor.client.okhttp)
     }
 
+    jsMain.dependencies { implementation(libs.ktor.client.js) }
+
     commonTest.dependencies {
       implementation(kotlin("test"))
       implementation(kotlin("test-common"))

diff --git a/demo-app/src/commonMain/kotlin/dev/sargunv/maplibrecompose/demoapp/platform.kt b/demo-app/src/commonMain/kotlin/dev/sargunv/maplibrecompose/demoapp/platform.kt
diff --git a/demo-app/src/commonMain/kotlin/dev/sargunv/maplibrecompose/demoapp/util.kt b/demo-app/src/commonMain/kotlin/dev/sargunv/maplibrecompose/demoapp/util.kt
@@ -76,3 +76,10 @@ internal class FrameRateState(private val spinner: String = "◐◓◑◒") {
 }
 
 @Composable expect fun getDefaultColorScheme(isDark: Boolean = false): ColorScheme
+
+expect object Platform {
+  val supportsBlending: Boolean
+  val supportsFps: Boolean
+  val supportsCamera: Boolean
+  val supportsLayers: Boolean
+}
diff --git a/demo-app/src/desktopMain/kotlin/dev/sargunv/maplibrecompose/demoapp/Main.kt b/demo-app/src/desktopMain/kotlin/dev/sargunv/maplibrecompose/demoapp/Main.kt
@@ -30,3 +30,10 @@ fun main() {
 actual fun getDefaultColorScheme(isDark: Boolean): ColorScheme {
   return if (isDark) darkColorScheme() else lightColorScheme()
 }
+
+actual object Platform {
+  actual val supportsBlending = false
+  actual val supportsFps = false
+  actual val supportsCamera = false
+  actual val supportsLayers = false
+}
diff --git a/demo-app/src/desktopMain/kotlin/dev/sargunv/maplibrecompose/demoapp/platform.desktop.kt b/demo-app/src/desktopMain/kotlin/dev/sargunv/maplibrecompose/demoapp/platform.desktop.kt
diff --git a/demo-app/src/iosMain/kotlin/dev/sargunv/maplibrecompose/demoapp/MainViewController.kt b/demo-app/src/iosMain/kotlin/dev/sargunv/maplibrecompose/demoapp/MainViewController.kt
@@ -13,3 +13,10 @@ fun MainViewController() = ComposeUIViewController { DemoApp() }
 actual fun getDefaultColorScheme(isDark: Boolean): ColorScheme {
   return if (isDark) darkColorScheme() else lightColorScheme()
 }
+
+actual object Platform {
+  actual val supportsBlending = true
+  actual val supportsFps = true
+  actual val supportsCamera = true
+  actual val supportsLayers = true
+}
diff --git a/demo-app/src/iosMain/kotlin/dev/sargunv/maplibrecompose/demoapp/platform.ios.kt b/demo-app/src/iosMain/kotlin/dev/sargunv/maplibrecompose/demoapp/platform.ios.kt
diff --git a/demo-app/src/jsMain/kotlin/dev/sargunv/maplibrecompose/demoapp/main.kt b/demo-app/src/jsMain/kotlin/dev/sargunv/maplibrecompose/demoapp/main.kt
@@ -0,0 +1,27 @@
+package dev.sargunv.maplibrecompose.demoapp
+
+import androidx.compose.material3.ColorScheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.ComposeViewport
+import kotlinx.browser.document
+import org.jetbrains.skiko.wasm.onWasmReady
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() {
+  onWasmReady { ComposeViewport(document.body!!) { DemoApp() } }
+}
+
+@Composable
+actual fun getDefaultColorScheme(isDark: Boolean): ColorScheme {
+  return if (isDark) darkColorScheme() else lightColorScheme()
+}
+
+actual object Platform {
+  actual val supportsBlending = false
+  actual val supportsFps = false
+  actual val supportsCamera = false
+  actual val supportsLayers = false
+}
diff --git a/demo-app/src/jsMain/resources/index.html b/demo-app/src/jsMain/resources/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MapLibre Compose demo app</title>
+  <script src="skiko.js"></script>
+  <style>
+    html,
+    body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+    }
+  </style>
+</head>
+<body></body>
+<script src="app.js"></script>
+</html>
diff --git a/demo-app/src/jsMain/resources/styles.css b/demo-app/src/jsMain/resources/styles.css
@@ -0,0 +1,7 @@
+html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
diff --git a/gradle.properties b/gradle.properties
@@ -4,6 +4,8 @@ androidTargetSdk=35
 iosDeploymentTarget=12.0
 kotlin.code.style=official
 kotlin.daemon.jvmargs=-Xmx2048M
+kotlin.incremental.wasm=true
+org.jetbrains.compose.experimental.jscanvas.enabled=true
 org.jetbrains.dokka.experimental.gradle.pluginMode=V2Enabled
 org.jetbrains.dokka.experimental.gradle.pluginMode.noWarn=true
 # Blocker: https://github.com/diffplug/spotless/issues/2347

diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -2,8 +2,8 @@
 androidx-activity = "1.9.3"
 androidx-composeUi = "1.7.6"
 androidx-navigation = "2.8.0-alpha11"
-webview = "1.9.40"
 kermit = "2.0.5"
+kotlinx-browser = "0.3"
 kotlinx-coroutines = "1.9.0"
 ktor = "3.0.3"
 maplibre-android-sdk = "11.7.1"
@@ -13,6 +13,7 @@ maplibre-js = "4.7.1"
 spatialk = "0.3.0"
 webpack-html = "5.6.3"
 webpack-htmlInlineScript = "3.2.1"
+webview = "1.9.40"
 
 gradle-android = "8.7.3"
 gradle-compose = "1.7.3"
@@ -29,11 +30,13 @@ tool-prettier = "3.4.2"
 androidx-activity-compose = { module = "androidx.activity:activity-compose", version.ref = "androidx-activity" }
 androidx-composeUi-testManifest = { module = "androidx.compose.ui:ui-test-manifest", version.ref = "androidx-composeUi" }
 androidx-navigation-compose = { module = "org.jetbrains.androidx.navigation:navigation-compose", version.ref = "androidx-navigation" }
+kotlinx-browser = { module = "org.jetbrains.kotlinx:kotlinx-browser", version.ref = "kotlinx-browser" }
 webview = { module = "io.github.kevinnzou:compose-webview-multiplatform", version.ref = "webview" }
 kermit = { group = "co.touchlab", name = "kermit", version.ref = "kermit" }
 kotlinx-coroutines-swing = { group = "org.jetbrains.kotlinx", name = "kotlinx-coroutines-swing", version.ref = "kotlinx-coroutines" }
 ktor-client-core = { module = "io.ktor:ktor-client-core", version.ref = "ktor" }
 ktor-client-darwin = { module = "io.ktor:ktor-client-darwin", version.ref = "ktor" }
+ktor-client-js = { module = "io.ktor:ktor-client-js", version.ref = "ktor" }
 ktor-client-okhttp = { module = "io.ktor:ktor-client-okhttp", version.ref = "ktor" }
 ktor-client-contentNegotiation = { module = "io.ktor:ktor-client-content-negotiation", version.ref = "ktor" }
 ktor-serialization-kotlinxJson = { module = "io.ktor:ktor-serialization-kotlinx-json", version.ref = "ktor" }

diff --git a/iosApp/iosApp.xcodeproj/project.pbxproj b/iosApp/iosApp.xcodeproj/project.pbxproj
@@ -112,7 +112,6 @@
 				B92378962B6B1156000C7307 /* Frameworks */,
 				7555FF79242A565900829871 /* Resources */,
 				FB29095E4E4AE33FC6A4F030 /* [CP] Embed Pods Frameworks */,
-				E8A0EF8E3B4DDB502C870BB0 /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -192,23 +191,6 @@
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
-		E8A0EF8E3B4DDB502C870BB0 /* [CP] Copy Pods Resources */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-iosApp/Pods-iosApp-resources-${CONFIGURATION}-input-files.xcfilelist",
-			);
-			name = "[CP] Copy Pods Resources";
-			outputFileListPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-iosApp/Pods-iosApp-resources-${CONFIGURATION}-output-files.xcfilelist",
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-iosApp/Pods-iosApp-resources.sh\"\n";
-			showEnvVarsInLog = 0;
-		};
 		FB29095E4E4AE33FC6A4F030 /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;

diff --git a/kotlin-js-store/yarn.lock b/kotlin-js-store/yarn.lock
@@ -52,6 +52,11 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@js-joda/[email protected]":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@js-joda/core/-/core-3.2.0.tgz#3e61e21b7b2b8a6be746df1335cf91d70db2a273"
+  integrity sha512-PMqgJ0sw5B7FKb2d5bWYIoxjri+QlW/Pys7+Rw82jSH0QN3rB05jZ/VrrsUdh1w4+i2kw9JOejXGq/KhDOX7Kg==
+
 "@leichtgewicht/ip-codec@^2.0.1":
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz#4fc56c15c580b9adb7dc3c333a134e540b44bfb1"
@@ -3288,7 +3293,7 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
-ws@^8.13.0:
+ws@8.18.0, ws@^8.13.0:
   version "8.18.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.18.0.tgz#0d7505a6eafe2b0e712d232b42279f53bc289bbc"
   integrity sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==

diff --git a/lib/kotlin-maplibre-js/build.gradle.kts b/lib/kotlin-maplibre-js/build.gradle.kts
@@ -13,7 +13,7 @@ mavenPublishing {
 }
 
 kotlin {
-  js(IR) { browser {} }
+  js(IR) { browser() }
 
   sourceSets {
     commonMain.dependencies {

diff --git a/lib/maplibre-compose-expressions/build.gradle.kts b/lib/maplibre-compose-expressions/build.gradle.kts
@@ -1,7 +1,7 @@
-@file:OptIn(ExperimentalKotlinGradlePluginApi::class, ExperimentalComposeLibrary::class)
+@file:OptIn(ExperimentalKotlinGradlePluginApi::class, ExperimentalWasmDsl::class)
 
-import org.jetbrains.compose.ExperimentalComposeLibrary
 import org.jetbrains.kotlin.gradle.ExperimentalKotlinGradlePluginApi
+import org.jetbrains.kotlin.gradle.ExperimentalWasmDsl
 import org.jetbrains.kotlin.gradle.dsl.JvmTarget
 import org.jetbrains.kotlin.gradle.plugin.KotlinSourceSetTree
 
@@ -35,6 +35,8 @@ kotlin {
   iosSimulatorArm64()
   iosX64()
   jvm("desktop")
+  js(IR) { browser() }
+  wasmJs { browser() }
 
   sourceSets {
     commonMain.dependencies { implementation(compose.foundation) }

diff --git a/lib/maplibre-compose-material3/build.gradle.kts b/lib/maplibre-compose-material3/build.gradle.kts
@@ -36,6 +36,7 @@ kotlin {
   iosSimulatorArm64()
   iosX64()
   jvm("desktop")
+  js(IR) { browser() }
 
   cocoapods {
     noPodspec()

diff --git a/lib/maplibre-compose-webview/build.gradle.kts b/lib/maplibre-compose-webview/build.gradle.kts
@@ -6,7 +6,6 @@ plugins {
 kotlin {
   js(IR) {
     browser { webpackTask {} }
-
     useEsModules()
     binaries.executable()
     generateTypeScriptDefinitions()

diff --git a/lib/maplibre-compose/build.gradle.kts b/lib/maplibre-compose/build.gradle.kts
@@ -55,6 +55,7 @@ kotlin {
   iosSimulatorArm64()
   iosX64()
   jvm("desktop")
+  js(IR) { browser() }
 
   cocoapods {
     noPodspec()

diff --git a/lib/maplibre-compose/src/jsMain/kotlin/dev/sargunv/maplibrecompose/compose/WebMapView.kt b/lib/maplibre-compose/src/jsMain/kotlin/dev/sargunv/maplibrecompose/compose/WebMapView.kt
@@ -0,0 +1,39 @@
+package dev.sargunv.maplibrecompose.compose
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import co.touchlab.kermit.Logger
+import dev.sargunv.maplibrecompose.core.MaplibreMap
+
+@Composable
+internal actual fun ComposableMapView(
+  modifier: Modifier,
+  styleUri: String,
+  update: (map: MaplibreMap) -> Unit,
+  onReset: () -> Unit,
+  logger: Logger?,
+  callbacks: MaplibreMap.Callbacks,
+) =
+  WebMapView(
+    modifier = modifier,
+    styleUri = styleUri,
+    update = update,
+    onReset = onReset,
+    logger = logger,
+    callbacks = callbacks,
+  )
+
+@Composable
+internal fun WebMapView(
+  modifier: Modifier,
+  styleUri: String,
+  update: (map: MaplibreMap) -> Unit,
+  onReset: () -> Unit,
+  logger: Logger?,
+  callbacks: MaplibreMap.Callbacks,
+) {
+  Box(modifier = modifier.background(Color.Red))
+}
diff --git a/...libre-compose/src/jsMain/kotlin/dev/sargunv/maplibrecompose/core/layer/BackgroundLayer.kt b/...libre-compose/src/jsMain/kotlin/dev/sargunv/maplibrecompose/core/layer/BackgroundLayer.kt
@@ -0,0 +1,23 @@
+package dev.sargunv.maplibrecompose.core.layer
+
+import dev.sargunv.maplibrecompose.expressions.ast.CompiledExpression
+import dev.sargunv.maplibrecompose.expressions.value.ColorValue
+import dev.sargunv.maplibrecompose.expressions.value.FloatValue
+import dev.sargunv.maplibrecompose.expressions.value.ImageValue
+
+internal actual class BackgroundLayer actual constructor(id: String) : Layer() {
+
+  override val impl: Nothing = TODO()
+
+  actual fun setBackgroundColor(color: CompiledExpression<ColorValue>) {
+    TODO()
+  }
+
+  actual fun setBackgroundPattern(pattern: CompiledExpression<ImageValue>) {
+    TODO()
+  }
+
+  actual fun setBackgroundOpacity(opacity: CompiledExpression<FloatValue>) {
+    TODO()
+  }
+}