Skip to content

Commit 186b6c0

Browse files
sureshgsureshg
committed
chore: web refactorings
1 parent cc7b0a5 commit 186b6c0

File tree

6 files changed

+158
-23
lines changed

6 files changed

+158
-23
lines changed

‎common/src/commonMain/kotlin/dev/suresh/Platform.kt

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,10 @@ expect val platform: String
1212

1313
class Greeting {
1414

15-
val json = Json { prettyPrint = true }
15+
val json = Json {
16+
isLenient = true
17+
prettyPrint = true
18+
}
1619

1720
fun greeting() =
1821
"""

‎gradle/libs.versions.toml

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,11 @@ ktor = "2.3.2"
4848
koin = "3.4.1"
4949
kotest = "5.6.2"
5050
ksp-auto-service = "1.0.0"
51-
ksp-redacted = "1.4.0"
51+
ksp-redacted = "1.6.0"
5252
ksp-powerassert = "0.13.0"
5353
slf4j = "2.0.7"
54+
logback = "1.2.6"
55+
log4j = "3.0.0-alpha1"
5456
ktfmt = "0.44"
5557
google-javaformat = "1.17.0"
5658
google-auto-service = "1.1.1"
@@ -70,6 +72,7 @@ kmp-store5 = "5.0.0-beta01"
7072
kmp-settings = "1.0.0"
7173
parsus = "0.4.0"
7274

75+
7376
# Plugin versions
7477
benmanes = "0.47.0"
7578
compose-mpp = "0.0.0"
@@ -201,6 +204,11 @@ jctools-core = { module = "org.jctools:jctools-core"
201204
slf4j-api = { module = "org.slf4j:slf4j-api" , version.ref = "slf4j"}
202205
slf4j-simple = { module = "org.slf4j:slf4j-simple" , version.ref = "slf4j"}
203206
slf4j-nop = { module = "org.slf4j:slf4j-nop" , version.ref = "slf4j"}
207+
logback-core = { module = "ch.qos.logback:logback-core" , version.ref = "logback"}
208+
slf4j-jpl = { module = "org.slf4j:slf4j-jdk-platform-logging" , version.ref = "slf4j"}
209+
log4j-bom = { module = "org.apache.logging.log4j:log4j-bom" , version.ref = "log4j"}
210+
log4j-core = { module = "org.apache.logging.log4j:log4j-core" , version.ref = "log4j"}
211+
log4j-jpl = { module = "org.apache.logging.log4j:log4j-jpl" , version.ref = "log4j"}
204212

205213
compose-routing = { module = "app.softwork:routing-compose" , version.ref = "compose-routing" }
206214

‎web/src/jsMain/kotlin/App.kt

Lines changed: 52 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
import dev.suresh.Greeting
22
import kotlin.js.Promise
3+
import kotlin.random.Random
4+
import kotlin.time.Duration.Companion.milliseconds
35
import kotlin.time.Duration.Companion.seconds
46
import kotlinx.browser.document
5-
import kotlinx.coroutines.await
6-
import kotlinx.coroutines.delay
7+
import kotlinx.coroutines.*
78
import kotlinx.dom.appendText
89
import kotlinx.html.div
910
import kotlinx.html.dom.append
11+
import kotlinx.html.dom.create
12+
import kotlinx.html.progress
13+
import org.w3c.dom.HTMLProgressElement
1014
import org.w3c.dom.Node
1115

1216
suspend fun main() {
13-
val text = "${BuildConfig.time}: Hello, ${Greeting().greeting()}!"
17+
val text = Greeting().greeting()
1418
val root = document.getElementById("root")
1519

1620
text.lines().forEach {
@@ -22,6 +26,51 @@ suspend fun main() {
2226
delay(1.seconds)
2327
val promise = Promise.resolve("Promise")
2428
root?.appendText(promise.await())
29+
30+
topLevelJsFun()
31+
runCoroutines()
32+
}
33+
34+
suspend fun runCoroutines() {
35+
val coroutinesElm = document.getElementById("coroutines")
36+
coroutineScope {
37+
val progressElms =
38+
listOf("primary", "link", "success", "warning", "danger", "info").map {
39+
val progress =
40+
document.create.progress(classes = "progress is-$it is-small") {
41+
max = "100"
42+
value = "0"
43+
} as HTMLProgressElement
44+
coroutinesElm?.appendChild(progress)
45+
progress
46+
}
47+
48+
progressElms.forEach { progress ->
49+
launch {
50+
var cancelled = false
51+
val pause = Random.nextLong(10, 300)
52+
53+
progress.onclick = {
54+
cancelled = !cancelled
55+
null
56+
}
57+
58+
while (cancelled.not()) {
59+
delay(pause.milliseconds)
60+
progress.value++
61+
if (progress.value >= progress.max) {
62+
break
63+
}
64+
}
65+
}
66+
}
67+
}
68+
69+
val notification =
70+
document.create.div(classes = "notification is-primary is-light") {
71+
+"All coroutines are completed!"
72+
}
73+
coroutinesElm?.appendChild(notification)
2574
}
2675

2776
fun Node.sayHello() {

‎web/src/jsMain/kotlin/JsInterop.kt

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/** Top level JS functions are defined in index.html script tag */
2+
external fun topLevelJsFun(): dynamic
3+
4+
fun jsTypeOf(o: Any) = js("typeof o") as String

‎web/src/jsMain/resources/css/bulma.min.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/src/jsMain/resources/index.html

Lines changed: 88 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -22,43 +22,113 @@
2222
<meta http-equiv="origin-trial"
2323
content="A27epJyCvnU5tH8G6r8KVE6SwHRYREj7as32y1sop9RVQO4zlYHMyFHsZCUkB5MUK24JS64KnNKdCkPQTQpxwAsAAAB4eyJvcmlnaW4iOiJodHRwczovL3N1cmVzaC5kZXY6NDQzIiwiZmVhdHVyZSI6IldlYkFzc2VtYmx5R0MiLCJleHBpcnkiOjE2OTg5Njk1OTksImlzU3ViZG9tYWluIjp0cnVlLCJpc1RoaXJkUGFydHkiOnRydWV9">
2424

25+
<meta name="description" content="Kotlin Multiplatform Web Application"/>
2526

2627
<link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon"/>
27-
<!-- Style for XTerm terminal -->
28-
<link rel="stylesheet" href="css/xterm.css"/>
28+
<link rel="stylesheet" href="css/bulma.min.css">
2929

30-
<!-- Google Fonts -->
31-
<link rel="dns-prefetch" href="//fonts.googleapis.com">
32-
<link rel="dns-prefetch" href="//fonts.gstatic.com">
30+
<!-- Material Fonts & Symbols-->
3331
<link rel="preconnect" href="https://fonts.googleapis.com">
3432
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
33+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter&display=swap">
3534
<link rel="stylesheet"
36-
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100&display=swap">
35+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"/>
36+
37+
<!-- HighlightJS styles -->
38+
<!-- <link class="codestyle" rel="stylesheet" href="css/hljs/github.min.css">-->
39+
<!-- <link class="codestyle" rel="prefetch alternate stylesheet" href="css/hljs/github-dark.min.css">-->
3740

38-
<!-- HighlightJS styles -->
39-
<link class="codestyle" rel="stylesheet" href="css/hljs/github.min.css">
40-
<link class="codestyle" rel="prefetch alternate stylesheet" href="css/hljs/github-dark.min.css">
41+
<!-- Style for XTerm terminal -->
42+
<!-- <link rel="stylesheet" href="css/xterm.css"/>-->
4143

4244
<title>Kotlin Multiplatform Web Module</title>
4345

4446
<style>
45-
html, body {
46-
width: 100%;
47-
height: 100%;
48-
margin: 0;
49-
padding: 0;
50-
background-color: white;
51-
overflow: hidden;
47+
body {
48+
font-family: 'Inter', sans-serif;
49+
}
50+
51+
.material-symbols-outlined {
52+
font-variation-settings: 'FILL' 0,
53+
'wght' 400,
54+
'GRAD' 0,
55+
'opsz' 24
5256
}
5357
</style>
58+
59+
<script>
60+
function topLevelJsFun() {
61+
console.log("Hello Kotlin Multiplatform!");
62+
}
63+
</script>
5464
</head>
5565

5666
<body>
5767
<noscript>
5868
This page requires JavaScript.
5969
</noscript>
60-
<div id="root"></div>
61-
<div id="terminal"></div>
70+
71+
<section class="section">
72+
<div class="container">
73+
<h1 class="title">
74+
<span class="icon-text">
75+
<span class="icon">
76+
<span class="material-symbols-outlined">code</span>
77+
</span>
78+
<span>Kotlin Multiplatform</span>
79+
</span>
80+
</h1>
81+
<hr>
82+
<p class="subtitle">
83+
A sample <a href="https://kotlinlang.org/docs/multiplatform.html">Kotlin Multiplatform</a> web application
84+
</p>
85+
86+
<div class="card">
87+
<div class="card-content">
88+
<div id="root"></div>
89+
</div>
90+
</div>
91+
</div>
92+
</section>
93+
94+
<section class="section">
95+
<div class="container">
96+
<h1 class="title">
97+
<span class="icon-text">
98+
<span class="icon">
99+
<span class="material-symbols-outlined">waves</span>
100+
</span>
101+
<span>Kotlin Coroutines</span>
102+
</span>
103+
</h1>
104+
<hr>
105+
<p class="subtitle">
106+
<a href="https://kotlinlang.org/docs/coroutines-guide.html">Kotlin Coroutines</a> demo.
107+
Click on progressBar to <mark>cancel</mark>
108+
</p>
109+
110+
<div class="box" id="coroutines">
111+
</div>
112+
</div>
113+
</section>
114+
115+
<footer class="footer is-small mt-auto">
116+
<div class="content has-text-centered">
117+
<span class="icon-text">
118+
<span>Built with ❤️ &nbsp;</span>
119+
<span> using <a href="https://kotlinlang.org/docs/multiplatform.html">Kotlin Multiplatform.</a></span>
120+
</span>
121+
<a href="https://github.com/sureshg/kotlin-mpp-playground">
122+
<span class="icon-text">
123+
<span class="icon">
124+
<span class="material-symbols-outlined">code</span>
125+
</span>
126+
<span>GitHib</span>
127+
</span>
128+
</a>
129+
</div>
130+
</footer>
131+
62132
<script src="web.js"></script>
63133
</body>
64134
</html>

0 commit comments

Comments
 (0)