Skip to content

Commit 28366fb

Browse files
agent-polyblankagent-polyblank
authored
WASM target (#42)
* add wasm target * add common for web versions
1 parent cf6af1a commit 28366fb

7 files changed

Lines changed: 195 additions & 1 deletion

File tree

‎kodeview/build.gradle.kts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import org.jetbrains.kotlin.gradle.ExperimentalWasmDsl
2+
13
@Suppress("DSL_SCOPE_VIOLATION")
24
plugins {
35
alias(libs.plugins.multiplatform)
@@ -26,6 +28,12 @@ dependencies {
2628
kotlin {
2729
jvm()
2830

31+
@OptIn(ExperimentalWasmDsl::class)
32+
wasmJs {
33+
browser()
34+
binaries.executable()
35+
}
36+
2937
js(IR) {
3038
browser()
3139
}

‎webExample/build.gradle.kts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import org.jetbrains.kotlin.gradle.ExperimentalWasmDsl
2+
13
@Suppress("DSL_SCOPE_VIOLATION")
24
plugins {
35
alias(libs.plugins.multiplatform)
@@ -11,8 +13,15 @@ kotlin {
1113
binaries.executable()
1214
}
1315

16+
@OptIn(ExperimentalWasmDsl::class)
17+
wasmJs {
18+
browser()
19+
binaries.executable()
20+
}
21+
1422
sourceSets {
15-
val jsMain by getting {
23+
24+
val commonMain by getting {
1625
dependencies {
1726
implementation(compose.ui)
1827
implementation(compose.foundation)

webExample/src/jsMain/kotlin/Dropdown.kt renamed to webExample/src/commonMain/kotlin/Dropdown.kt

File renamed without changes.

webExample/src/jsMain/kotlin/ThemeSwitcher.kt renamed to webExample/src/commonMain/kotlin/ThemeSwitcher.kt

File renamed without changes.

‎webExample/src/wasmJsMain/kotlin/main.js.kt‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
import androidx.compose.foundation.layout.Arrangement
2+
import androidx.compose.foundation.layout.Column
3+
import androidx.compose.foundation.layout.Spacer
4+
import androidx.compose.foundation.layout.fillMaxSize
5+
import androidx.compose.foundation.layout.fillMaxWidth
6+
import androidx.compose.foundation.layout.height
7+
import androidx.compose.foundation.layout.padding
8+
import androidx.compose.foundation.layout.size
9+
import androidx.compose.material3.Divider
10+
import androidx.compose.material3.MaterialTheme
11+
import androidx.compose.material3.Surface
12+
import androidx.compose.material3.Text
13+
import androidx.compose.material3.TextFieldDefaults
14+
import androidx.compose.material3.darkColorScheme
15+
import androidx.compose.material3.lightColorScheme
16+
import androidx.compose.runtime.mutableStateOf
17+
import androidx.compose.runtime.remember
18+
import androidx.compose.ui.Alignment
19+
import androidx.compose.ui.ExperimentalComposeUiApi
20+
import androidx.compose.ui.Modifier
21+
import androidx.compose.ui.graphics.Color
22+
import androidx.compose.ui.text.style.TextAlign
23+
import androidx.compose.ui.unit.dp
24+
import androidx.compose.ui.unit.sp
25+
import androidx.compose.ui.window.CanvasBasedWindow
26+
import dev.snipme.highlights.Highlights
27+
import dev.snipme.highlights.model.SyntaxLanguage
28+
import dev.snipme.highlights.model.SyntaxTheme
29+
import dev.snipme.highlights.model.SyntaxThemes
30+
import dev.snipme.highlights.model.SyntaxThemes.useDark
31+
import dev.snipme.kodeview.view.material3.CodeEditText
32+
import dev.snipme.kodeview.view.CodeTextView
33+
34+
private val sampleCode =
35+
"""
36+
class Main {
37+
public static void main(String[] args) {
38+
int abcd = 100;
39+
}
40+
}
41+
""".trimIndent()
42+
43+
@ExperimentalComposeUiApi
44+
fun main() {
45+
CanvasBasedWindow(
46+
title = "KodeView example",
47+
canvasElementId = "ComposeTarget",
48+
applyDefaultStyles = true,
49+
) {
50+
val isDarkModeState = remember { mutableStateOf(false) }
51+
val isDarkMode = isDarkModeState.value
52+
53+
val highlightsState = remember {
54+
mutableStateOf(
55+
Highlights.Builder(code = sampleCode).build()
56+
)
57+
}
58+
val highlights = highlightsState.value
59+
60+
fun updateSyntaxTheme(theme: SyntaxTheme) {
61+
highlightsState.value = highlights.getBuilder()
62+
.theme(theme)
63+
.build()
64+
}
65+
66+
fun updateSyntaxLanguage(language: SyntaxLanguage) {
67+
highlightsState.value = highlights.getBuilder()
68+
.language(language)
69+
.build()
70+
}
71+
72+
MaterialTheme(colorScheme = if (isDarkMode) darkColorScheme() else lightColorScheme()) {
73+
Surface {
74+
Column(
75+
modifier = Modifier
76+
.fillMaxSize()
77+
.padding(16.dp),
78+
horizontalAlignment = Alignment.Start,
79+
verticalArrangement = Arrangement.SpaceBetween
80+
) {
81+
Spacer(Modifier.height(8.dp))
82+
83+
ThemeSwitcher(
84+
isDarkMode,
85+
modifier = Modifier.fillMaxWidth(),
86+
) { setToDarkMode ->
87+
isDarkModeState.value = setToDarkMode
88+
updateSyntaxTheme(highlights.getTheme().useDark(setToDarkMode)!!)
89+
}
90+
91+
Spacer(Modifier.height(16.dp))
92+
93+
Text(
94+
modifier = Modifier.fillMaxWidth(),
95+
text = "KodeView",
96+
fontSize = 18.sp,
97+
textAlign = TextAlign.Center,
98+
)
99+
100+
Spacer(modifier = Modifier.size(16.dp))
101+
102+
CodeTextView(highlights = highlights)
103+
104+
Spacer(modifier = Modifier.size(16.dp))
105+
106+
Divider()
107+
108+
Spacer(modifier = Modifier.size(16.dp))
109+
110+
Text("Edit this...")
111+
CodeEditText(
112+
highlights = highlights,
113+
onValueChange = { textValue ->
114+
highlightsState.value = highlights.getBuilder()
115+
.code(textValue)
116+
.build()
117+
},
118+
colors = TextFieldDefaults.colors(
119+
unfocusedContainerColor = Color.Transparent,
120+
focusedContainerColor = Color.Transparent,
121+
focusedIndicatorColor = Color.Transparent,
122+
unfocusedIndicatorColor = Color.Transparent,
123+
disabledIndicatorColor = Color.Transparent,
124+
errorIndicatorColor = Color.Transparent,
125+
),
126+
)
127+
128+
Spacer(modifier = Modifier.size(16.dp))
129+
130+
Spacer(modifier = Modifier.weight(1f))
131+
132+
Dropdown(
133+
options = SyntaxThemes.getNames(),
134+
selected = SyntaxThemes.themes().keys.indexOf(highlights.getTheme().key),
135+
) { selectedThemeName ->
136+
updateSyntaxTheme(
137+
SyntaxThemes.themes(isDarkMode)[selectedThemeName.lowercase()]!!
138+
)
139+
}
140+
141+
Spacer(modifier = Modifier.size(16.dp))
142+
143+
Dropdown(
144+
options = SyntaxLanguage.getNames(),
145+
selected = SyntaxLanguage.getNames().indexOfFirst {
146+
it.equals(highlights.getLanguage().name, ignoreCase = true)
147+
}) { selectedLanguage ->
148+
updateSyntaxLanguage(SyntaxLanguage.getByName(selectedLanguage)!!)
149+
}
150+
}
151+
}
152+
}
153+
}
154+
}

‎webExample/src/wasmJsMain/resources/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>KodeView Example</title>
6+
<script src="skiko.js"></script>
7+
<link type="text/css" rel="stylesheet" href="styles.css"/>
8+
</head>
9+
<body>
10+
<div>
11+
<canvas id="ComposeTarget"></canvas>
12+
</div>
13+
<script src="webExample.js"></script>
14+
</body>
15+
</html>

‎webExample/src/wasmJsMain/resources/styles.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
#root {
2+
width: 100%;
3+
height: 100vh;
4+
}
5+
6+
#root > .compose-web-column > div {
7+
position: relative;
8+
}

0 commit comments

Comments
 (0)