Make :demo's desktop app and web app run

ShreckYe · ShreckYe · commit 2e3d994d24c9 · 2022-12-05T22:12:56.000+08:00
The icons are not shown in the web app.
diff --git a/compose-multiplatform-material/build.gradle.kts b/compose-multiplatform-material/build.gradle.kts
@@ -23,10 +23,18 @@ kotlin {
         }
         named("jsMain") {
             dependencies {
+                // copied from https://github.com/mpetuska/kmdc
+
                 // Be lazy and use the shortcut
                 implementation("dev.petuska:kmdc:0.0.5")
                 implementation("dev.petuska:kmdcx:0.0.5")
                 // TODO: pick and choose exact components to reduce bundle size
+
+                // SCSS dependencies
+                implementation(devNpm("style-loader", "^3.3.1"))
+                implementation(devNpm("css-loader", "^6.7.1"))
+                implementation(devNpm("sass-loader", "^13.0.0"))
+                implementation(devNpm("sass", "^1.52.1"))
             }
         }
     }
diff --git a/demo/build.gradle.kts b/demo/build.gradle.kts
@@ -3,7 +3,14 @@ plugins {
 }
 
 kotlin {
-    js(IR) { browser() }
+    js(IR) {
+        browser {
+            commonWebpackConfig {
+                outputFileName = "app.js"
+            }
+        }
+        binaries.executable()
+    }
 
     sourceSets {
         named("commonMain") {
@@ -17,5 +24,24 @@ kotlin {
                 implementation(compose.desktop.currentOs)
             }
         }
+        /* TODO: uncomment or remove
+        named("jsMain") {
+            dependencies {
+                // copied from https://github.com/mpetuska/kmdc
+
+                // SCSS dependencies
+                implementation(devNpm("style-loader", "^3.3.1"))
+                implementation(devNpm("css-loader", "^6.7.1"))
+                implementation(devNpm("sass-loader", "^13.0.0"))
+                implementation(devNpm("sass", "^1.52.1"))
+            }
+        }
+        */
+    }
+}
+
+compose.desktop {
+    application {
+        mainClass = "com.huanshankeji.compose.material.demo.MainKt"
     }
 }
diff --git a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Main.kt b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Main.kt
@@ -1,5 +1,3 @@
 package com.huanshankeji.compose.material.demo
 
-fun main() {
-    // TODO
-}
+expect fun main()
diff --git a/demo/src/jsMain/kotlin/com/huanshankeji/compose/material/demo/Main.kt b/demo/src/jsMain/kotlin/com/huanshankeji/compose/material/demo/Main.kt
@@ -0,0 +1,7 @@
+package com.huanshankeji.compose.material.demo
+
+import org.jetbrains.compose.web.renderComposableInBody
+
+actual fun main() {
+    renderComposableInBody { App() }
+}
diff --git a/demo/src/jsMain/resources/index.html b/demo/src/jsMain/resources/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta charset="UTF-8">
+    <title>Compose Multiplatform Material demo</title>
+</head>
+
+<body>
+    <script src="app.js"></script>
+</body>
+
+</html>
diff --git a/demo/src/jvmMain/kotlin/com/huanshankeji/compose/material/demo/Main.kt b/demo/src/jvmMain/kotlin/com/huanshankeji/compose/material/demo/Main.kt
@@ -0,0 +1,10 @@
+package com.huanshankeji.compose.material.demo
+
+import androidx.compose.ui.window.Window
+import androidx.compose.ui.window.application
+
+actual fun main() = application {
+    Window(::exitApplication) {
+        App()
+    }
+}
diff --git a/demo/webpack.config.d/scss.js b/demo/webpack.config.d/scss.js
@@ -0,0 +1,25 @@
+// copied from https://github.com/mpetuska/kmdc/blob/master/gradle/webpack.config.d/scss.js
+
+config.module.rules.push({
+  test: /\.(scss|sass)$/,
+  use: [
+    /**
+     *  fallback to style-loader in development
+     *  "style-loader" creates style nodes from JS strings
+     */
+    "style-loader",   // translates CSS into CommonJS
+    "css-loader",   // translates CSS into CommonJS
+    "sass-loader"   // compiles Sass to CSS, using Node Sass by default
+  ]
+});
+config.module.rules.push({
+  test: /\.css$/,
+  use: [
+    /**
+     *  fallback to style-loader in development
+     *  "style-loader" creates style nodes from JS strings
+     */
+    "style-loader",   // translates CSS into CommonJS
+    "css-loader",   // translates CSS into CommonJS
+  ]
+});
diff --git a/kotlin-js-store/yarn.lock b/kotlin-js-store/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -23,10 +23,18 @@ kotlin {`
`23`	`23`	`}`
`24`	`24`	`named("jsMain") {`
`25`	`25`	`dependencies {`
	`26`	`+ // copied from https://github.com/mpetuska/kmdc`
	`27`	`+`
`26`	`28`	`// Be lazy and use the shortcut`
`27`	`29`	`implementation("dev.petuska:kmdc:0.0.5")`
`28`	`30`	`implementation("dev.petuska:kmdcx:0.0.5")`
`29`	`31`	`// TODO: pick and choose exact components to reduce bundle size`
	`32`	`+`
	`33`	`+ // SCSS dependencies`
	`34`	`+ implementation(devNpm("style-loader", "^3.3.1"))`
	`35`	`+ implementation(devNpm("css-loader", "^6.7.1"))`
	`36`	`+ implementation(devNpm("sass-loader", "^13.0.0"))`
	`37`	`+ implementation(devNpm("sass", "^1.52.1"))`
`30`	`38`	`}`
`31`	`39`	`}`
`32`	`40`	`}`