feat: add Kotlin/JS browser target (SDK + sample app)#86
Merged
Conversation
Unlocks the SDK for legacy Kotlin/JS embedders. Both `js` and `wasmJs`
run on top of Skiko for the canvas backend, so the encoded-bytes →
ImageBitmap decode path is identical — kept in a single `webMain`
source set so the two targets share one actual and can't drift.
- DrawBox/build.gradle.kts: add `js { browser(); binaries.executable() }`.
- Move `wasmJsMain/io/ak1/drawbox/ImageDecoder.wasmJs.kt` →
`webMain/io/ak1/drawbox/ImageDecoder.web.kt`. Same implementation
(`org.jetbrains.skia.Image.makeFromEncoded(...).toComposeImageBitmap()`),
now shared.
Sample apps are unchanged — this is SDK-only. Embedders publishing
their own JS sample now have an `io.ak1:drawbox-js` artifact to depend
on after the next release.
Closes #85
Extends PR #85 / #86's SDK-only JS target to the sample app so `./gradlew :webApp:jsBrowserDevelopmentRun` renders DrawBox in a legacy Kotlin/JS browser, on top of the same Skiko backend the wasmJs sample already uses. - shared/build.gradle.kts: add js { browser(); binaries.executable() }. - shared/src/jsMain/.../ImageSaver.js.kt: legacy-JS actual for rememberImageSaver. Mirrors the WasmJS body but uses regular Array parts instead of JsArray<JsAny?> — the JS Blob ctor takes a dynamic-typed array directly, so WasmJS interop wrappers (`toJsString`, JsArray) aren't required here. - webApp/build.gradle.kts: add js { browser(); binaries.executable() } alongside the existing wasmJs. - webApp/src/jsMain/.../main.kt: ComposeViewport { App() } entry, mirroring the wasmJs main. - webApp/src/jsMain/resources/index.html: minimal page that loads webApp.js. Verified: webApp.js dev bundle serves at http://localhost:8080 (52 MB in dev mode, eval-source-map), Compose Multiplatform UI mounts via Skiko on legacy JS. Production bundle untested. Closes #85
akshay2211
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Two commits enable Kotlin/JS browser targeting end-to-end:
DrawBox) — addsjs { browser() }, movesImageDecoder.wasmJs.kt→webMain/ImageDecoder.web.ktso JS and WasmJS share the Skiko-based decode actual. One implementation, zero drift.shared+webApp) — adds the matching JS targets, ships a legacy-JSImageSaveractual, and gives the sample amain()+index.htmlso./gradlew :webApp:jsBrowserDevelopmentRunactually renders DrawBox in a browser.Both
jsandwasmJsrun on top of Skiko for the canvas, so the implementation cost was small and the maintenance footprint shrinks for the SDK (one decoder, not two).Closes #85.
Test plan
./gradlew :DrawBox:compileKotlinJs :DrawBox:compileKotlinWasmJs :DrawBox:compileKotlinJvm :DrawBox:compileAndroidMain :DrawBox:compileKotlinIosArm64 :DrawBox:compileKotlinIosSimulatorArm64— all SDK targets build../gradlew :DrawBox:jvmTest --rerun-tasks— domain tests pass../gradlew :shared:compileKotlinJs :webApp:compileKotlinJs— sample app compiles for the new target../gradlew :webApp:jsBrowserDevelopmentRun— dev server serves `index.html` + `webApp.js` (52 MB dev bundle) at http://localhost:8080.:webApp:jsBrowserProductionRun(untested in this PR).