fix(deps): update dependency org.jetbrains.compose:compose-gradle-plugin to v1.9.0 (#3178)

* fix(deps): update dependency org.jetbrains.compose:compose-gradle-plugin to v1.9.0

* Fix compilation.

* Fix web sample.

* Fix build and add favicon to sample.

* Fix build.

* Fix import.

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Colin White <colin@colinwhite.me>

Author: renovate[bot]

build.gradle.kts

@@ -13,6 +13,7 @@ import org.jetbrains.kotlin.gradle.dsl.KotlinMultiplatformExtension
 import org.jetbrains.kotlin.gradle.plugin.KotlinPlatformType.js
 import org.jetbrains.kotlin.gradle.plugin.KotlinPlatformType.wasm
 import org.jetbrains.kotlin.gradle.tasks.KotlinJvmCompile
+import org.jetbrains.kotlin.gradle.targets.js.testing.KotlinJsTest
 
 buildscript {
     repositories {
@@ -145,6 +146,15 @@ allprojects {
     }
 
     applyOkioJsTestWorkaround()
+
+    // Skiko's runtime files are ESM-only so preload our shim to let Node require them during tests.
+    tasks.withType<KotlinJsTest>().configureEach {
+        nodeJsArgs.add("--require")
+        val skikoMjsWorkaround = rootProject.layout.projectDirectory
+            .file("gradle/nodejs/registerSkikoMjsWorkaround.cjs")
+            .asFile
+        nodeJsArgs.add(skikoMjsWorkaround.absolutePath)
+    }
 }
 
 private val ktlintRules = buildMap {

buildSrc/src/main/kotlin/coil3/multiplatform.kt

@@ -66,9 +66,7 @@ fun Project.addAllMultiplatformTargets(skikoVersion: Provider<String>, enableWas
         }
 
         applyKotlinJsImplicitDependencyWorkaround(enableWasm)
-        if (enableWasm) {
-            createSkikoWasmJsRuntimeDependency(skikoVersion)
-        }
+        createSkikoWasmJsRuntimeDependency(skikoVersion)
     }
 }
 

gradle.properties

@@ -10,6 +10,7 @@ systemProp.org.gradle.internal.launcher.welcomeMessageEnabled=false
 
 kotlin.code.style=official
 kotlin.mpp.androidSourceSetLayoutVersion=2
+kotlin.native.jvmArgs=-Xmx8g
 
 kotlinx.atomicfu.enableJsIrTransformation=true
 kotlinx.atomicfu.enableJvmIrTransformation=true

gradle/libs.versions.toml

@@ -6,16 +6,16 @@ androidx-tracing-perfetto = "1.0.0"
 atomicfu = "0.29.0"
 coroutines = "1.10.2"
 dokka = "2.0.0"
-jetbrains-compose = "1.8.2"
+jetbrains-compose = "1.9.0"
 kotlin = "2.2.20"
 ktlint = "1.6.0"
 ktor2 = "2.3.13"
 ktor3 = "3.1.0"
 okhttp = "4.12.0"
 okio = "3.16.0"
-paparazzi = "1.3.5"
+paparazzi = "2.0.0-alpha02"
 roborazzi = "1.50.0"
-skiko = "0.9.4.2"
+skiko = "0.9.22.2"
 
 [plugins]
 baselineProfile = { id = "androidx.baselineprofile", version.ref = "androidx-benchmark" }

gradle/nodejs/registerSkikoMjsWorkaround.cjs

@@ -0,0 +1,53 @@
+const Module = require('module');
+const fs = require('fs');
+const path = require('path');
+
+const TARGET_FILES = new Set(['skiko.mjs', 'skikod8.mjs']);
+const ORIGINAL_MJS_HANDLER = Module._extensions['.mjs'];
+
+function transformModuleSource(source) {
+  let prelude = '';
+
+  if (source.includes('import.meta.url')) {
+    prelude += 'const { pathToFileURL } = require("url");\n';
+    source = source.replace(/import\.meta\.url/g, 'pathToFileURL(__filename).href');
+  }
+
+  const exportedNames = [];
+  source = source.replace(/export\s+(const|let|var)\s+([\w$]+)\s*=/g, (match, declaration, name) => {
+    exportedNames.push(name);
+    return `${declaration} ${name} =`;
+  });
+
+  let defaultExport = null;
+  source = source.replace(/export\s+default\s+([^;]+);?/g, (match, expression) => {
+    defaultExport = expression.trim().replace(/;+$/, '');
+    return '';
+  });
+
+  let transformed = prelude + 'const __exports = {};\n' + source + '\n';
+  for (const name of exportedNames) {
+    transformed += `__exports.${name} = ${name};\n`;
+  }
+  if (defaultExport !== null) {
+    transformed += `__exports.default = ${defaultExport};\n`;
+  }
+  transformed += 'module.exports = __exports;\n';
+  return transformed;
+}
+
+Module._extensions['.mjs'] = function registerSkikoMjs(module, filename) {
+  const baseName = path.basename(filename);
+  if (!TARGET_FILES.has(baseName)) {
+    if (ORIGINAL_MJS_HANDLER) {
+      return ORIGINAL_MJS_HANDLER(module, filename);
+    }
+    const error = new Error(`Cannot load ES module ${filename}`);
+    error.code = 'ERR_REQUIRE_ESM';
+    throw error;
+  }
+
+  const originalSource = fs.readFileSync(filename, 'utf8');
+  const transformedSource = transformModuleSource(originalSource);
+  module._compile(transformedSource, filename);
+};

samples/compose/src/jsMain/kotlin/sample/compose/main.kt

@@ -1,12 +1,13 @@
 package sample.compose
 
 import androidx.compose.ui.ExperimentalComposeUiApi
-import androidx.compose.ui.window.CanvasBasedWindow
-import org.jetbrains.skiko.wasm.onWasmReady
+import androidx.compose.ui.window.ComposeViewport
+import kotlinx.browser.document
 
 @OptIn(ExperimentalComposeUiApi::class)
-fun main() = onWasmReady {
-    CanvasBasedWindow(Title) {
+fun main() {
+    document.title = Title
+    ComposeViewport {
         App()
     }
 }

samples/compose/src/jsMain/resources/favicon.ico

@@ -3,10 +3,24 @@
 <head>
     <meta charset="UTF-8">
     <title>Coil</title>
+    <link rel="icon" href="favicon.svg" type="image/svg+xml">
+    <link rel="alternate icon" href="favicon.ico" type="image/x-icon">
     <script type="application/javascript" src="skiko.js"></script>
+    <style>
+        html,
+        body {
+            margin: 0;
+            height: 100%;
+        }
+
+        #ComposeTarget {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
 </head>
 <body>
-<canvas id="ComposeTarget"></canvas>
+<div id="ComposeTarget"></div>
 <script src="coilSample.js"></script>
 </body>
 </html>

samples/compose/src/jsMain/resources/favicon.svg

@@ -1,11 +1,13 @@
 package sample.compose
 
 import androidx.compose.ui.ExperimentalComposeUiApi
-import androidx.compose.ui.window.CanvasBasedWindow
+import androidx.compose.ui.window.ComposeViewport
+import kotlinx.browser.document
 
 @OptIn(ExperimentalComposeUiApi::class)
 fun main() {
-    CanvasBasedWindow(Title) {
+    document.title = Title
+    ComposeViewport {
         App()
     }
 }