chore: highlightjs support

Author: sureshg

common/src/commonMain/kotlin/dev/suresh/Greeting.kt

@@ -0,0 +1,42 @@
+package dev.suresh
+
+import BuildConfig
+import kotlinx.datetime.Clock
+import kotlinx.datetime.TimeZone
+import kotlinx.datetime.toLocalDateTime
+import kotlinx.io.bytestring.*
+import kotlinx.serialization.encodeToString
+import kotlinx.serialization.json.Json
+
+class Greeting {
+
+  val json = Json {
+    isLenient = true
+    prettyPrint = true
+  }
+
+  fun greeting() =
+      """
+      | ${BuildConfig.time} - ${KData("Foo", 20, "test")}: Kotlin $platform: ${KotlinVersion.CURRENT}!
+      | ${kotlinxTests()}
+      """
+          .trimMargin()
+
+  private fun kotlinxTests(): String {
+    val ba = "Kotlinx".encodeToByteArray()
+    val bs1 = ByteString(ba)
+    val bs2 = "IO".encodeToByteString()
+
+    val bs = buildByteString {
+      append(bs1)
+      append(bs2)
+    }
+
+    return """
+      |${Clock.System.now().toLocalDateTime(TimeZone.currentSystemDefault())}
+      |${json.encodeToString(KData("Bar", 22, "test"))}
+      |${bs.decodeToString()}
+    """
+        .trimMargin()
+  }
+}

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

@@ -1,44 +1,3 @@
 package dev.suresh
 
-import BuildConfig
-import kotlinx.datetime.Clock
-import kotlinx.datetime.TimeZone
-import kotlinx.datetime.toLocalDateTime
-import kotlinx.io.bytestring.*
-import kotlinx.serialization.encodeToString
-import kotlinx.serialization.json.Json
-
 expect val platform: String
-
-class Greeting {
-
-  val json = Json {
-    isLenient = true
-    prettyPrint = true
-  }
-
-  fun greeting() =
-      """
-      | ${BuildConfig.time} - ${KData("Foo", 123, "test")}: Kotlin $platform: ${KotlinVersion.CURRENT}!
-      | ${kotlinxTests()}
-      """
-          .trimMargin()
-
-  private fun kotlinxTests(): String {
-    val ba = "Kotlinx".encodeToByteArray()
-    val bs1 = ByteString(ba)
-    val bs2 = "IO".encodeToByteString()
-
-    val bs = buildByteString {
-      append(bs1)
-      append(bs2)
-    }
-
-    return """
-      |${Clock.System.now().toLocalDateTime(TimeZone.currentSystemDefault())}
-      |${json.encodeToString(KData("Bar", 123, "test"))}
-      |${bs.decodeToString()}
-    """
-        .trimMargin()
-  }
-}

compose-web/README.md

@@ -0,0 +1,10 @@
+### Run Web app
+
+```bash
+$ ./gradlew :web:jsBrowserProductionRun -t
+```
+
+### Resources
+
+- [Kotlin Multiplatform Package Search](https://package-search.jetbrains.com/search?query=http&onlyMpp=true)
+- [Compose Lint Rules](https://slackhq.github.io/compose-lints/rules/)

gradle.properties

@@ -22,6 +22,7 @@ kotlinx.atomicfu.enableJsIrTransformation=true
 
 # MPP
 kotlin.mpp.enableCInteropCommonization=true
+# kotlin.js.ir.output.granularity=whole-program
 
 # Compose
 org.jetbrains.compose.experimental.uikit.enabled=true

gradle/kotlin-js-store/yarn.lock

@@ -1308,6 +1308,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+[email protected]:
+  version "11.8.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.8.0.tgz#966518ea83257bae2e7c9a48596231856555bb65"
+  integrity sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==
+
 hpack.js@^2.1.6:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"

gradle/libs.versions.toml

@@ -47,7 +47,7 @@ junit                          = "5.10.0-RC1"
 ktor                           = "2.3.2"
 koin                           = "3.4.1"
 kotest                         = "5.6.2"
-ksp-auto-service               = "1.0.0"
+ksp-auto-service               = "1.1.0"
 ksp-redacted                   = "1.6.0"
 ksp-powerassert                = "0.13.0"
 slf4j                          = "2.0.7"

web/build.gradle.kts

@@ -27,8 +27,8 @@ dependencies {
 
   jsMainImplementation(projects.common)
   jsMainImplementation(libs.kotlinx.html)
+  jsMainImplementation(npm("highlight.js", "11.8.0"))
   // jsMainImplementation(npm("kotlin-playground", "1.28.0"))
-  // jsMainImplementation(npm("highlight.js", "11.8.0"))
   // jsMainImplementation(npm("xterm", "5.2.1"))
   // jsMainImplementation(npm("vega-lite", "5.13.0"))
 }

web/src/jsMain/kotlin/App.kt

@@ -10,22 +10,26 @@ import kotlinx.html.div
 import kotlinx.html.dom.append
 import kotlinx.html.dom.create
 import kotlinx.html.progress
+import org.w3c.dom.HTMLDivElement
 import org.w3c.dom.HTMLProgressElement
 import org.w3c.dom.Node
 
 suspend fun main() {
   val text = Greeting().greeting()
-  val root = document.getElementById("root")
+  val root = document.getElementById("root") as HTMLDivElement
 
   text.lines().forEach {
     println(it)
-    root?.appendText(it)
-    root?.appendChild(document.createElement("br"))
+    root.appendText(it)
+    root.appendChild(document.createElement("br"))
   }
 
+  // HighlightJs.highlightElement(root)
+
+  // Javascript Promise
   delay(1.seconds)
   val promise = Promise.resolve("Promise")
-  root?.appendText(promise.await())
+  root.appendText(promise.await())
 
   topLevelJsFun()
   runCoroutines()

web/src/jsMain/resources/index.html

@@ -35,7 +35,7 @@
           href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"/>
 
     <!--    HighlightJS styles -->
-    <!--    <link class="codestyle" rel="stylesheet" href="css/hljs/github.min.css">-->
+    <link class="codestyle" rel="stylesheet" href="css/hljs/github.min.css">
     <!--    <link class="codestyle" rel="prefetch alternate stylesheet" href="css/hljs/github-dark.min.css">-->
 
     <!-- Style for XTerm terminal -->
@@ -85,7 +85,7 @@ <h1 class="title">
 
         <div class="card">
             <div class="card-content">
-                <div id="root"></div>
+                <div id="root" class="language-json"></div>
             </div>
         </div>
     </div>
@@ -104,7 +104,8 @@ <h1 class="title">
         <hr>
         <p class="subtitle">
             <a href="https://kotlinlang.org/docs/coroutines-guide.html">Kotlin Coroutines</a> demo.
-            Click on progressBar to <mark>cancel</mark>
+            Click on progress bar to
+            <mark>cancel</mark>
         </p>
 
         <div class="box" id="coroutines">