qdsfdhvh · qdsfdhvh · May 22, 2023 · May 22, 2023 · May 22, 2023 · May 22, 2023
diff --git a/app/common/build.gradle.kts b/app/common/build.gradle.kts
@@ -1,7 +1,7 @@
 plugins {
  id("project-kmp")
  kotlin("plugin.serialization")
- alias(libs.plugins.moko.resources)
+ // alias(libs.plugins.moko.resources)
 }
 
 kotlin {
@@ -13,15 +13,16 @@ kotlin {
  api(compose.foundation)
  api(compose.ui)
  api(compose.material)
+ // api(compose.materialIconsExtended)
 
  api(projects.imageLoader)
  implementation(projects.extension.blur)
- implementation(projects.extension.mokoResources)
+ // implementation(projects.extension.mokoResources)
 
- implementation(libs.moko.resources)
+ // implementation(libs.moko.resources)
  implementation(libs.kotlinx.serialization.json)
  implementation(libs.ktor.client.logging)
- implementation(libs.kermit)
+ // implementation(libs.kermit)
  }
  }
  val androidMain by getting {
@@ -39,7 +40,7 @@ kotlin {
  implementation(libs.ktor.client.darwin)
  }
  }
- val jsMain by getting {
+ val jsWasmMain by getting {
  dependencies {
  implementation(libs.ktor.client.js)
  }
@@ -51,20 +52,20 @@ android {
  namespace = "io.github.qdsfdhvh.imageloader.demo.common"
 }
 
-multiplatformResources {
- multiplatformResourcesPackage = "com.seiko.imageloader.demo"
-}
-
-// workaround
-tasks.matching { it.name == "iosSimulatorArm64ProcessResources" }.configureEach {
- dependsOn(tasks.matching { it.name == "generateMRcommonMain" })
-}
-tasks.matching { it.name == "iosX64ProcessResources" }.configureEach {
- dependsOn(tasks.matching { it.name == "generateMRcommonMain" })
-}
-tasks.matching { it.name == "macosArm64ProcessResources" }.configureEach {
- dependsOn(tasks.matching { it.name == "generateMRcommonMain" })
-}
-tasks.matching { it.name == "macosX64ProcessResources" }.configureEach {
- dependsOn(tasks.matching { it.name == "generateMRcommonMain" })
-}
+// multiplatformResources {
+//  multiplatformResourcesPackage = "com.seiko.imageloader.demo"
+// }
+//
+// // workaround
+// tasks.matching { it.name == "iosSimulatorArm64ProcessResources" }.configureEach {
+//  dependsOn(tasks.matching { it.name == "generateMRcommonMain" })
+// }
+// tasks.matching { it.name == "iosX64ProcessResources" }.configureEach {
+//  dependsOn(tasks.matching { it.name == "generateMRcommonMain" })
+// }
+// tasks.matching { it.name == "macosArm64ProcessResources" }.configureEach {
+//  dependsOn(tasks.matching { it.name == "generateMRcommonMain" })
+// }
+// tasks.matching { it.name == "macosX64ProcessResources" }.configureEach {
+//  dependsOn(tasks.matching { it.name == "generateMRcommonMain" })
+// }
diff --git a/app/common/src/commonMain/kotlin/com/seiko/imageloader/demo/scene/OtherImagesScene.kt b/app/common/src/commonMain/kotlin/com/seiko/imageloader/demo/scene/OtherImagesScene.kt
@@ -24,8 +24,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.dp
-import co.touchlab.kermit.Logger
-import com.seiko.imageloader.demo.MR
 import com.seiko.imageloader.demo.data.imageJsonData
 import com.seiko.imageloader.rememberImagePainter
 
@@ -42,7 +40,7 @@ fun OtherImagesScene(
  val changeUrl by remember {
  derivedStateOf {
  (images.getOrNull(changeIndex)?.imageUrl ?: "").also {
- Logger.d { "changeUrl = $it" }
+ // Logger.d { "changeUrl = $it" }
  }
  }
  }
@@ -108,21 +106,21 @@ fun OtherImagesScene(
  item {
  Text("Moko Resource")
  }
- item {
- ImageItem(MR.files.cat)
- }
- item {
- ImageItem(MR.files.collection_logo)
- }
- item {
- ImageItem(MR.images.car_black)
- }
- item {
- ImageItem(MR.colors.valueColor)
- }
- item {
- ImageItem(MR.colors.valueColor2)
- }
+ // item {
+ //  ImageItem(MR.files.cat)
+ // }
+ // item {
+ //  ImageItem(MR.files.collection_logo)
+ // }
+ // item {
+ //  ImageItem(MR.images.car_black)
+ // }
+ // item {
+ //  ImageItem(MR.colors.valueColor)
+ // }
+ // item {
+ //  ImageItem(MR.colors.valueColor2)
+ // }
  }
  }
 }

diff --git a/app/common/src/commonMain/kotlin/com/seiko/imageloader/demo/util/CustomKtorUrlFetcher.kt b/app/common/src/commonMain/kotlin/com/seiko/imageloader/demo/util/CustomKtorUrlFetcher.kt
@@ -8,7 +8,7 @@ import io.ktor.client.plugins.logging.LogLevel
 import io.ktor.client.plugins.logging.Logger
 import io.ktor.client.plugins.logging.Logging
 import io.ktor.client.request.headers
-import co.touchlab.kermit.Logger as DebugLogger
+// import co.touchlab.kermit.Logger as DebugLogger
 
 val customKtorUrlFetcher = KtorUrlFetcher.Factory {
  HttpClient(httpEngine) {
@@ -21,7 +21,7 @@ val customKtorUrlFetcher = KtorUrlFetcher.Factory {
  level = LogLevel.HEADERS
  logger = object : Logger {
  override fun log(message: String) {
- DebugLogger.d(tag = "HttpClient") { message }
+ // DebugLogger.d(tag = "HttpClient") { message }
  }
  }
  }

diff --git a/app/common/src/commonMain/kotlin/com/seiko/imageloader/demo/util/ImageLoader.kt b/app/common/src/commonMain/kotlin/com/seiko/imageloader/demo/util/ImageLoader.kt
@@ -3,16 +3,13 @@ package com.seiko.imageloader.demo.util
 import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.drawscope.DrawScope
 import androidx.compose.ui.graphics.painter.Painter
-import co.touchlab.kermit.Severity
 import com.seiko.imageloader.ImageLoaderConfigBuilder
-import com.seiko.imageloader.component.fetcher.MokoResourceFetcher
 import com.seiko.imageloader.intercept.BlurInterceptor
 import com.seiko.imageloader.intercept.Interceptor
 import com.seiko.imageloader.model.ImageResult
 import com.seiko.imageloader.model.NullRequestData
 import com.seiko.imageloader.util.LogPriority
 import com.seiko.imageloader.util.Logger
-import co.touchlab.kermit.Logger as DebugLogger
 
 fun ImageLoaderConfigBuilder.commonConfig() {
  logger = object : Logger {
@@ -23,33 +20,33 @@ fun ImageLoaderConfigBuilder.commonConfig() {
  throwable: Throwable?,
  message: String,
  ) {
- DebugLogger.log(
- severity = when (priority) {
- LogPriority.VERBOSE -> Severity.Verbose
- LogPriority.DEBUG -> Severity.Debug
- LogPriority.INFO -> Severity.Info
- LogPriority.WARN -> Severity.Warn
- LogPriority.ERROR -> Severity.Error
- LogPriority.ASSERT -> Severity.Assert
- },
- tag = tag,
- throwable = throwable,
- message = buildString {
- if (data != null) {
- append("[image data] ")
- append(data.toString().take(100))
- append('\n')
- }
- append("[message] ")
- append(message)
- },
- )
+ // DebugLogger.log(
+ //  severity = when (priority) {
+ //  LogPriority.VERBOSE -> Severity.Verbose
+ //  LogPriority.DEBUG -> Severity.Debug
+ //  LogPriority.INFO -> Severity.Info
+ //  LogPriority.WARN -> Severity.Warn
+ //  LogPriority.ERROR -> Severity.Error
+ //  LogPriority.ASSERT -> Severity.Assert
+ //  },
+ //  tag = tag,
+ //  throwable = throwable,
+ //  message = buildString {
+ //  if (data != null) {
+ //  append("[image data] ")
+ //  append(data.toString().take(100))
+ //  append('\n')
+ //  }
+ //  append("[message] ")
+ //  append(message)
+ //  },
+ // )
  }
 
  override fun isLoggable(priority: LogPriority) = priority >= LogPriority.DEBUG
  }
  components {
- add(MokoResourceFetcher.Factory())
+ // add(MokoResourceFetcher.Factory())
  }
  interceptor {
  addInterceptor(BlurInterceptor())

diff --git a/app/common/src/commonMain/kotlin/com/seiko/imageloader/demo/util/Json.kt b/app/common/src/commonMain/kotlin/com/seiko/imageloader/demo/util/Json.kt
@@ -1,5 +1,6 @@
 package com.seiko.imageloader.demo.util
 
+import kotlinx.serialization.decodeFromString
 import kotlinx.serialization.json.Json
 
 val JSON = Json {

diff --git a/app/common/src/wasmMain/kotlin/com/seiko/imageloader/demo/util/HttpEngine.kt b/app/common/src/wasmMain/kotlin/com/seiko/imageloader/demo/util/HttpEngine.kt
@@ -0,0 +1,7 @@
+package com.seiko.imageloader.demo.util
+
+import io.ktor.client.engine.HttpClientEngine
+import io.ktor.client.engine.js.Js
+
+actual val httpEngine: HttpClientEngine
+ get() = Js.create()
diff --git a/app/desktop/build.gradle.kts b/app/desktop/build.gradle.kts
@@ -13,14 +13,14 @@ kotlin {
  }
  @Suppress("UNUSED_VARIABLE")
  sourceSets {
+ @Suppress("UNUSED_VARIABLE")
  val jvmMain by getting {
  dependencies {
  implementation(projects.app.common)
- implementation(projects.extension.imageio)
+ // implementation(projects.extension.imageio)
  implementation(compose.desktop.currentOs)
  }
  }
- val jvmTest by getting
  }
 }
 

diff --git a/app/intellij-plugin/build.gradle.kts b/app/intellij-plugin/build.gradle.kts
@@ -16,6 +16,8 @@ repositories {
  google()
  mavenCentral()
  maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
+ maven("https://maven.pkg.jetbrains.space/kotlin/p/wasm/experimental")
+ maven("https://maven.pkg.jetbrains.space/kotlin/p/kotlin/bootstrap")
 }
 
 java {

diff --git a/app/wasm/build.gradle.kts b/app/wasm/build.gradle.kts
@@ -0,0 +1,45 @@
+import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig
+
+plugins {
+ kotlin("multiplatform")
+ id("org.jetbrains.compose")
+}
+
+kotlin {
+ @Suppress("OPT_IN_USAGE")
+ wasm {
+ moduleName = "compose-imageloader-demo"
+ browser {
+ commonWebpackConfig {
+ devServer = (devServer ?: KotlinWebpackConfig.DevServer()).copy(
+ open = mapOf(
+ "app" to mapOf(
+ "name" to "google chrome",
+ ),
+ ),
+ )
+ }
+ }
+ binaries.executable()
+ }
+ sourceSets {
+ @Suppress("UNUSED_VARIABLE")
+ val wasmMain by getting {
+ dependencies {
+ implementation(projects.app.common)
+ implementation(compose.runtime)
+ implementation(compose.ui)
+ }
+ }
+ }
+}
+
+compose.experimental {
+ web.application {
+ }
+}
+
+// // See https://youtrack.jetbrains.com/issue/KT-57203 related issue
+// tasks.named("wasmDevelopmentExecutableCompileSync") {
+// dependsOn("wasmBrowserProductionWebpack")
+// }
diff --git a/app/wasm/src/wasmMain/kotlin/Main.kt b/app/wasm/src/wasmMain/kotlin/Main.kt
@@ -0,0 +1,10 @@
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.CanvasBasedWindow
+import com.seiko.imageloader.demo.App
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() {
+ CanvasBasedWindow("ComposeImageLoader") {
+ App()
+ }
+}
diff --git a/app/wasm/src/wasmMain/resources/index.html b/app/wasm/src/wasmMain/resources/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Compose ImageLoader (Kotlin/Wasm)</title>
+ <script src="skiko.js"></script>
+ <script type="module" src="load.mjs"></script>
+ <style>
+ html, body {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ }
+ </style>
+</head>
+<body>
+<canvas id="ComposeTarget"></canvas>
+</body>
+</html>
diff --git a/app/wasm/src/wasmMain/resources/load.mjs b/app/wasm/src/wasmMain/resources/load.mjs
@@ -0,0 +1,4 @@
+import { instantiate } from './compose-imageloader-demo.uninstantiated.mjs';
+
+await wasmSetup;
+instantiate({ skia: Module['asm'] });
diff --git a/app/web/build.gradle.kts b/app/web/build.gradle.kts
@@ -9,6 +9,7 @@ kotlin {
  binaries.executable()
  }
  sourceSets {
+ @Suppress("UNUSED_VARIABLE")
  val jsMain by getting {
  dependencies {
  implementation(projects.app.common)

diff --git a/app/web/src/jsMain/kotlin/Main.kt b/app/web/src/jsMain/kotlin/Main.kt
@@ -1,6 +1,7 @@
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
-import androidx.compose.ui.window.Window
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.CanvasBasedWindow
 import com.seiko.imageloader.ImageLoader
 import com.seiko.imageloader.LocalImageLoader
 import com.seiko.imageloader.component.setupDefaultComponents
@@ -10,9 +11,10 @@ import okio.FileSystem
 import okio.fakefilesystem.FakeFileSystem
 import org.jetbrains.skiko.wasm.onWasmReady
 
+@OptIn(ExperimentalComposeUiApi::class)
 fun main() {
  onWasmReady {
- Window("ComposeImageLoader") {
+ CanvasBasedWindow("ComposeImageLoader") {
  CompositionLocalProvider(
  LocalImageLoader provides remember { generateImageLoader() },
  ) {

diff --git a/app/web/src/jsMain/resources/index.html b/app/web/src/jsMain/resources/index.html
@@ -3,13 +3,10 @@
 <head>
  <meta charset="UTF-8">
  <title>ComposeImageLoader</title>
- <script src="skiko.js"> </script>
- <link type="text/css" rel="stylesheet" href="styles.css" />
+ <script src="skiko.js"></script>
 </head>
 <body>
- <div>
- <canvas id="ComposeTarget" width="600" height="800"></canvas>
- </div>
- <script src="web.js"> </script>
+<canvas id="ComposeTarget"></canvas>
+<script src="web.js"></script>
 </body>
 </html>