Skip to content

Commit 470ea67

Browse files
jordondjordond
authored
Feature: Browser support (#89)
* add JS support * add JS demo * add README and run configurations
1 parent 650a5e1 commit 470ea67

18 files changed

+3060
-29
lines changed

‎.idea/runConfigurations/kmm_ios.xml

-7
This file was deleted.

‎.idea/runConfigurations/demo_android.xml ‎.run/demo.android.run.xml

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<option name="ALL_USERS" value="false" />
1010
<option name="ALWAYS_INSTALL_WITH_PM" value="false" />
1111
<option name="CLEAR_APP_STORAGE" value="false" />
12+
<option name="DYNAMIC_FEATURES_DISABLED_LIST" value="" />
1213
<option name="ACTIVITY_EXTRA_FLAGS" value="" />
1314
<option name="MODE" value="default_activity" />
1415
<option name="CLEAR_LOGCAT" value="false" />

‎.idea/runConfigurations/demo_kmm_androidApp.xml ‎.run/demo.androidApp.run.xml

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<component name="ProjectRunConfigurationManager">
2-
<configuration default="false" name="demo.kmm.androidApp" type="AndroidRunConfigurationType" factoryName="Android App">
2+
<configuration default="false" name="demo.androidApp" type="AndroidRunConfigurationType" factoryName="Android App">
33
<module name="DragSelectCompose.demo.kmm.androidApp.main" />
44
<option name="DEPLOY" value="true" />
55
<option name="DEPLOY_APK_FROM_BUNDLE" value="false" />
@@ -9,6 +9,7 @@
99
<option name="ALL_USERS" value="false" />
1010
<option name="ALWAYS_INSTALL_WITH_PM" value="false" />
1111
<option name="CLEAR_APP_STORAGE" value="false" />
12+
<option name="DYNAMIC_FEATURES_DISABLED_LIST" value="" />
1213
<option name="ACTIVITY_EXTRA_FLAGS" value="" />
1314
<option name="MODE" value="default_activity" />
1415
<option name="CLEAR_LOGCAT" value="false" />

‎.run/demo.browser.run.xml

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<component name="ProjectRunConfigurationManager">
2+
<configuration default="false" name="demo.browser" type="GradleRunConfiguration" factoryName="Gradle">
3+
<ExternalSystemSettings>
4+
<option name="executionName" />
5+
<option name="externalProjectPath" value="$PROJECT_DIR$" />
6+
<option name="externalSystemIdString" value="GRADLE" />
7+
<option name="scriptParameters" value="" />
8+
<option name="taskDescriptions">
9+
<list />
10+
</option>
11+
<option name="taskNames">
12+
<list>
13+
<option value=":demo:kmm:shared:jsBrowserDevelopmentRun" />
14+
</list>
15+
</option>
16+
<option name="vmOptions" />
17+
</ExternalSystemSettings>
18+
<ExternalSystemDebugServerProcess>true</ExternalSystemDebugServerProcess>
19+
<ExternalSystemReattachDebugProcess>true</ExternalSystemReattachDebugProcess>
20+
<DebugAllEnabled>false</DebugAllEnabled>
21+
<RunAsTest>false</RunAsTest>
22+
<method v="2" />
23+
</configuration>
24+
</component>

‎.run/desktopApp.run.xml ‎.run/demo.desktop.run.xml

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<component name="ProjectRunConfigurationManager">
2-
<configuration default="false" name="desktopApp" type="GradleRunConfiguration" factoryName="Gradle">
2+
<configuration default="false" name="demo.desktop" type="GradleRunConfiguration" factoryName="Gradle">
33
<ExternalSystemSettings>
44
<option name="executionName" />
55
<option name="externalProjectPath" value="$PROJECT_DIR$/demo/kmm/desktopApp" />
@@ -18,7 +18,7 @@
1818
<ExternalSystemDebugServerProcess>true</ExternalSystemDebugServerProcess>
1919
<ExternalSystemReattachDebugProcess>true</ExternalSystemReattachDebugProcess>
2020
<DebugAllEnabled>false</DebugAllEnabled>
21-
<ForceTestExec>false</ForceTestExec>
21+
<RunAsTest>false</RunAsTest>
2222
<method v="2" />
2323
</configuration>
2424
</component>

‎.run/demo.ios.run.xml

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<component name="ProjectRunConfigurationManager">
2+
<configuration default="false" name="demo.ios" type="KmmRunConfiguration" factoryName="iOS Application" CONFIG_VERSION="1" XCODE_PROJECT="$PROJECT_DIR$/demo/kmm/iosApp/iosApp.xcodeproj/project.xcworkspace" XCODE_CONFIGURATION="Debug" XCODE_SCHEME="iosApp">
3+
<method v="2">
4+
<option name="com.jetbrains.kmm.ios.BuildIOSAppTask" enabled="true" />
5+
</method>
6+
</configuration>
7+
</component>

‎README.md

+12-5
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
![badge-android](http://img.shields.io/badge/platform-android-6EDB8D.svg?style=flat)
1010
![badge-ios](http://img.shields.io/badge/platform-ios-CDCDCD.svg?style=flat)
1111
![badge-desktop](http://img.shields.io/badge/platform-desktop-DB413D.svg?style=flat)
12+
![badge-js](http://img.shields.io/badge/platform-js-FDD835.svg?style=flat)
1213

1314
This is a Compose Multiplatform library that allows you to easily implement a "Google Photos"-style
1415
multi-selection in your Compose apps.
@@ -19,6 +20,7 @@ You can view the KDocs at [docs.dragselectcompose.com](https://docs.dragselectco
1920

2021
## Table of Contents
2122

23+
- [Platforms](#platforms)
2224
- [Inspiration](#inspiration)
2325
- [Setup](#setup)
2426
- [Single Platform](#single-platform)
@@ -32,6 +34,15 @@ You can view the KDocs at [docs.dragselectcompose.com](https://docs.dragselectco
3234
- [Multiplatform](#multiplatform-demo)
3335
- [License](#license)
3436

37+
## Platforms
38+
39+
This library is written for Compose Multiplatform, and can be used on the following platforms:
40+
41+
- Android
42+
- iOS
43+
- JVM (Desktop)
44+
- JavaScript (Browser)
45+
3546
## Inspiration
3647

3748
This library was inspired by
@@ -281,11 +292,7 @@ Then install the `demo/android/build/outputs/apk/release/demo-release.apk` file
281292
The demo is inside of `:demo:kmm` module. In order to run it you should have the latest version of
282293
Android studio installed.
283294

284-
1. Clone the repository and open it in Android Studio.
285-
2. Let Gradle Sync
286-
3. From the target drop-down select `demo.kmm.androidApp` or `desktopApp`
287-
- In order to run the `kmm.ios` configuration you need to be on a Mac with Xcode installed.
288-
4. Run the application
295+
Check out [the README](demo/README.md) for more information.
289296

290297
## License
291298

‎core/build.gradle.kts

+5
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,13 @@ kotlin {
1212
androidTarget {
1313
publishLibraryVariants("release")
1414
}
15+
1516
jvm("desktop")
1617

18+
js(IR) {
19+
browser()
20+
}
21+
1722
listOf(
1823
iosX64(),
1924
iosArm64(),

‎demo/README.md

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# drag-select-compose Demo
2+
3+
## Before running!
4+
5+
- check your system with [KDoctor](https://github.com/Kotlin/kdoctor)
6+
- install JDK 8 on your machine
7+
- install
8+
the [Kotlin Multiplatform Mobile plugin](https://plugins.jetbrains.com/plugin/14936-kotlin-multiplatform-mobile)
9+
- add `local.properties` file to the project root and set a path to Android SDK there
10+
- run `./gradlew podInstall` in the project root
11+
12+
## Running
13+
14+
Open the project in Android Studio and let it sync the project. In the configuration dropdown should
15+
be the following:
16+
17+
- demo.androidApp
18+
- demo.ios
19+
- demo.desktop
20+
- demo.browser
21+
22+
You can select a configuration and run it, or follow the steps below.
23+
24+
### Android
25+
26+
To run the application on android device/emulator:
27+
28+
- open project in Android Studio and run imported android run configuration
29+
30+
To build the application bundle:
31+
32+
- run `./gradlew :demo:kmm:androidApp:assembleDebug`
33+
- find `.apk` file in `demo/kmm/androidApp/build/outputs/apk/debug/composeApp-debug.apk`
34+
35+
### Desktop
36+
37+
Run the desktop application: `./gradlew :demo:kmm:desktopApp:run`
38+
39+
### iOS
40+
41+
To run the application on iPhone device/simulator:
42+
43+
- Open `demo/kmm/iosApp/iosApp.xcworkspace` in Xcode and run standard configuration
44+
- Or
45+
use [Kotlin Multiplatform Mobile plugin](https://plugins.jetbrains.com/plugin/14936-kotlin-multiplatform-mobile)
46+
for Android Studio
47+
48+
### Browser
49+
50+
You can run the browser application by executing the following command:
51+
52+
```bash
53+
./gradlew :demo:kmm:shared:jsBrowserDevelopmentRun
54+
55+
```

‎demo/kmm/androidApp/build.gradle.kts

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
@file:Suppress("UNUSED_VARIABLE")
2-
31
plugins {
4-
kotlin("multiplatform")
2+
alias(libs.plugins.multiplatform)
53
alias(libs.plugins.androidApplication)
64
alias(libs.plugins.compose)
75
}
86

97
kotlin {
10-
android()
8+
androidTarget()
119
sourceSets {
1210
val androidMain by getting {
1311
dependencies {

‎demo/kmm/shared/build.gradle.kts

+16-10
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
11
plugins {
2-
kotlin("multiplatform")
2+
alias(libs.plugins.multiplatform)
33
kotlin("native.cocoapods")
44
alias(libs.plugins.androidLibrary)
55
alias(libs.plugins.compose)
66
}
77

88
kotlin {
9-
android()
9+
targetHierarchy.default()
10+
11+
androidTarget()
1012
jvm("desktop")
1113
iosX64()
1214
iosArm64()
1315
iosSimulatorArm64()
16+
js(IR) {
17+
browser()
18+
binaries.executable()
19+
}
1420

1521
cocoapods {
1622
version = "1.0.0"
@@ -42,6 +48,7 @@ kotlin {
4248
implementation(libs.ktor.core)
4349
}
4450
}
51+
4552
val androidMain by getting {
4653
dependencies {
4754
api(libs.activity.compose)
@@ -50,18 +57,13 @@ kotlin {
5057
implementation(libs.ktor.android)
5158
}
5259
}
53-
val iosX64Main by getting
54-
val iosArm64Main by getting
55-
val iosSimulatorArm64Main by getting
56-
val iosMain by creating {
57-
dependsOn(commonMain)
58-
iosX64Main.dependsOn(this)
59-
iosArm64Main.dependsOn(this)
60-
iosSimulatorArm64Main.dependsOn(this)
60+
61+
val iosMain by getting {
6162
dependencies {
6263
implementation(libs.ktor.darwin)
6364
}
6465
}
66+
6567
val desktopMain by getting {
6668
dependencies {
6769
implementation(compose.desktop.common)
@@ -91,3 +93,7 @@ android {
9193
jvmToolchain(jdkVersion = 17)
9294
}
9395
}
96+
97+
compose.experimental {
98+
web.application {}
99+
}

‎demo/kmm/shared/src/jsMain/kotlin/main.kt

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import androidx.compose.ui.ExperimentalComposeUiApi
2+
import androidx.compose.ui.window.CanvasBasedWindow
3+
import com.dragselectcompose.demo.App
4+
import org.jetbrains.skiko.wasm.onWasmReady
5+
6+
@OptIn(ExperimentalComposeUiApi::class)
7+
fun main() {
8+
onWasmReady {
9+
CanvasBasedWindow("Compose App") {
10+
App()
11+
}
12+
}
13+
}

‎demo/kmm/shared/src/jsMain/resources/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Compose App</title>
6+
<script src="skiko.js"></script>
7+
</head>
8+
<body>
9+
<div>
10+
<canvas id="ComposeTarget" width="800" height="600"></canvas>
11+
</div>
12+
<script src="shared.js"></script>
13+
</body>
14+
</html>

‎dragselect/build.gradle.kts

+5
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,13 @@ kotlin {
1111
androidTarget {
1212
publishLibraryVariants("release")
1313
}
14+
1415
jvm("desktop")
1516

17+
js(IR) {
18+
browser()
19+
}
20+
1621
listOf(
1722
iosX64(),
1823
iosArm64(),

‎extensions/build.gradle.kts

+5
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,13 @@ kotlin {
1212
androidTarget {
1313
publishLibraryVariants("release")
1414
}
15+
1516
jvm("desktop")
1617

18+
js(IR) {
19+
browser()
20+
}
21+
1722
listOf(
1823
iosX64(),
1924
iosArm64(),

‎gradle.properties

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ kotlin.mpp.androidSourceSetLayoutVersion=2
1515

1616
# Compose
1717
org.jetbrains.compose.experimental.uikit.enabled=true
18+
org.jetbrains.compose.experimental.jscanvas.enabled=true
1819

1920
# Maven
2021
SONATYPE_HOST=S01

‎grid/build.gradle.kts

+5
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,13 @@ kotlin {
1212
androidTarget() {
1313
publishLibraryVariants("release")
1414
}
15+
1516
jvm("desktop")
1617

18+
js(IR) {
19+
browser()
20+
}
21+
1722
listOf(
1823
iosX64(),
1924
iosArm64(),

0 commit comments

Comments
 (0)