feat: set up kotlin js wrapper for maplibre-gl and use it in desktop …

…webview, also fix loading compose resources in desktop (#201)

.gitattributes

@@ -1 +1,2 @@
 demo-app/src/commonMain/composeResources/files/* linguist-vendored
+kotlin-js-store/yarn.lock linguist-vendored

build.gradle.kts

@@ -65,11 +65,11 @@ spotless {
   }
   format("markdown") {
     target("**/*.md")
-    prettier().config(mapOf("proseWrap" to "always"))
+    prettier(libs.versions.tool.prettier.get()).config(mapOf("proseWrap" to "always"))
   }
   yaml {
     target("**/*.yml", "**/*.yaml")
-    prettier()
+    prettier(libs.versions.tool.prettier.get())
   }
 }
 

buildSrc/build.gradle.kts

@@ -9,16 +9,16 @@ repositories {
 dependencies {
   pluginImplementation(libs.plugins.android.application)
   pluginImplementation(libs.plugins.android.library)
+  pluginImplementation(libs.plugins.compose)
+  pluginImplementation(libs.plugins.dokka)
+  pluginImplementation(libs.plugins.jgitver)
   pluginImplementation(libs.plugins.kotlin.multiplatform)
   pluginImplementation(libs.plugins.kotlin.serialization)
   pluginImplementation(libs.plugins.kotlin.cocoapods)
   pluginImplementation(libs.plugins.kotlin.composeCompiler)
-  pluginImplementation(libs.plugins.compose)
-  pluginImplementation(libs.plugins.spotless)
-  pluginImplementation(libs.plugins.jgitver)
-  pluginImplementation(libs.plugins.dokka)
   pluginImplementation(libs.plugins.mkdocs)
   pluginImplementation(libs.plugins.mavenPublish)
+  pluginImplementation(libs.plugins.spotless)
 
   // noinspection GradleDynamicVersion: extra for jgitver imports
   compileOnly("fr.brouillard.oss:jgitver:+")

buildSrc/src/main/kotlin/library-conventions.gradle.kts

@@ -1,7 +1,6 @@
 plugins {
   id("module-conventions")
   id("org.jetbrains.kotlin.multiplatform")
-  id("org.jetbrains.kotlin.plugin.compose")
   id("org.jetbrains.kotlin.plugin.serialization")
   id("org.jetbrains.dokka")
   id("maven-publish")
@@ -18,8 +17,6 @@ kotlin {
   }
 }
 
-composeCompiler { reportsDestination = layout.buildDirectory.dir("compose/reports") }
-
 dokka {
   dokkaSourceSets {
     configureEach {

demo-app/src/desktopMain/kotlin/dev/sargunv/maplibrecompose/demoapp/Main.kt

@@ -1,11 +1,13 @@
 package dev.sargunv.maplibrecompose.demoapp
 
 import androidx.compose.material3.ColorScheme
+import androidx.compose.material3.Text
 import androidx.compose.material3.darkColorScheme
 import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.window.singleWindowApplication
-import dev.sargunv.maplibrecompose.compose.MaplibreContext
+import dev.sargunv.maplibrecompose.compose.KcefProvider
+import dev.sargunv.maplibrecompose.compose.MaplibreContextProvider
 
 // TODO This should enable support for blending Compose over Swing views
 // but it's just crashing on launch
@@ -14,7 +16,12 @@ import dev.sargunv.maplibrecompose.compose.MaplibreContext
 
 // -8<- [start:main]
 fun main() {
-  singleWindowApplication { MaplibreContext { DemoApp() } }
+  singleWindowApplication {
+    KcefProvider(
+      loading = { Text("Performing first time setup ...") },
+      content = { MaplibreContextProvider { DemoApp() } },
+    )
+  }
 }
 
 // -8<- [end:main]

docs/docs/getting-started.md

@@ -130,15 +130,14 @@ compose.desktop {
 }
 ```
 
-Wrap your app with the `MaplibreContext` composable:
+Wrap your app with `KcefProvider` to download KCEF on first lanch, and
+`MaplibreContext` to provide the library with context about the window your app
+is running in:
 
 ```kotlin title="Main.kt"
 -8<- "demo-app/src/desktopMain/kotlin/dev/sargunv/maplibrecompose/demoapp/Main.kt:main"
 ```
 
-When the app first launches, KCEF will be downloaded in the background before
-your UI is visible.
-
 ## Display your first map
 
 In your Composable UI, add a map:

docs/docs/index.md

@@ -27,6 +27,7 @@ Desktop support is implemented with [MapLibre GL JS][maplibre-js] and
 | Feature                                           | Android            | iOS                | Desktop            | Web |
 | ------------------------------------------------- | ------------------ | ------------------ | ------------------ | --- |
 | Render a map                                      | :white_check_mark: | :white_check_mark: | :white_check_mark: | :x: |
+| Load Compose resource URIs                        | :white_check_mark: | :white_check_mark: | :white_check_mark: | :x: |
 | Configure ornaments (compass, logo, attribution)  | :white_check_mark: | :white_check_mark: | :x:                | :x: |
 | Configure gestures (pan, zoom, rotate, pitch)     | :white_check_mark: | :white_check_mark: | :x:                | :x: |
 | Respond to a map click or long click              | :white_check_mark: | :white_check_mark: | :x:                | :x: |

gradle/libs.versions.toml

@@ -9,7 +9,10 @@ ktor = "3.0.3"
 maplibre-android-sdk = "11.7.1"
 maplibre-android-plugins = "3.0.2"
 maplibre-ios = "6.9.0"
+maplibre-js = "4.7.1"
 spatialk = "0.3.0"
+webpack-html = "5.6.3"
+webpack-htmlInlineScript = "3.2.1"
 
 gradle-android = "8.7.3"
 gradle-compose = "1.7.3"
@@ -20,6 +23,8 @@ gradle-mavenPublish = "0.30.0"
 gradle-mkdocs = "4.0.1"
 gradle-spotless = "7.0.0.BETA4"
 
+tool-prettier = "3.4.2"
+
 [libraries]
 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" }