Attempt at Kotlin frontend plugin

5 files changed, 111 insertions, 2 deletions

diff --git a/build.gradle.kts b/build.gradle.kts
index c52d8dcb..7fd3679c 100644
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -3,6 +3,8 @@ plugins {
     kotlin("jvm") version kotlinVersion apply false
     kotlin("multiplatform") version kotlinVersion apply false
     kotlin("plugin.spring") version kotlinVersion apply false
+    id("kotlin2js") version kotlinVersion apply false
+    id("org.jetbrains.kotlin.frontend") version "0.0.45" apply false
     id("org.jlleitschuh.gradle.ktlint") version "7.1.0" apply false
 }
 
diff --git a/settings.gradle b/settings.gradle
index 11887e42..49dfe419 100644
--- a/settings.gradle
+++ b/settings.gradle
@@ -1,9 +1,18 @@
 pluginManagement {
+//    repositories {
+//        gradlePluginPortal()
+//        jcenter()
+//        // this one is for kotlin-frontend-plugin
+//        maven { url "https://dl.bintray.com/kotlin/kotlin-eap" }
+//    }
     resolutionStrategy {
         eachPlugin {
-            if (requested.id.id == "kotlin-multiplatform") {
+            if (requested.id.id == "kotlin-multiplatform" || requested.id.id == "kotlin2js") {
                 useModule("org.jetbrains.kotlin:kotlin-gradle-plugin:${requested.version}")
             }
+//            if (requested.id.id == "org.jetbrains.kotlin.frontend") {
+//                useModule("org.jetbrains.kotlin:kotlin-frontend-plugin:${requested.version}")
+//            }
         }
     }
 }
@@ -15,5 +24,6 @@ include 'sw-engine'
 include 'sw-server'
 include 'sw-client'
 include 'sw-ui'
+include 'sw-ui-kt'
 
 enableFeaturePreview("GRADLE_METADATA")
diff --git a/sw-ui-kt/build.gradle.kts b/sw-ui-kt/build.gradle.kts
new file mode 100644
index 00000000..5c84a917
--- /dev/null
+++ b/sw-ui-kt/build.gradle.kts
@@ -0,0 +1,73 @@
+import org.jetbrains.kotlin.gradle.frontend.util.frontendExtension
+import org.jetbrains.kotlin.gradle.frontend.webpack.WebPackExtension
+import org.jetbrains.kotlin.gradle.tasks.Kotlin2JsCompile
+
+plugins {
+    id("kotlin2js")
+    id("org.jetbrains.kotlin.frontend") //version "0.0.45"
+}
+
+repositories {
+    jcenter()
+    maven(url = "https://kotlin.bintray.com/kotlin-js-wrappers")
+}
+
+dependencies {
+    implementation(kotlin("stdlib-js"))
+    implementation(project(":sw-common-model"))
+
+    implementation("org.jetbrains:kotlin-react-dom:16.6.0-pre.67-kotlin-1.3.11")
+}
+
+val staticFilesBuildDir = "${project.buildDir.path}/static"
+val staticFilesSrcDir = "$projectDir/src/main/web"
+
+tasks {
+    "compileKotlin2Js"(Kotlin2JsCompile::class)  {
+        kotlinOptions.metaInfo = true
+        kotlinOptions.outputFile = "${project.buildDir.path}/js/${project.name}.js"
+        kotlinOptions.sourceMap = true
+        kotlinOptions.moduleKind = "commonjs"
+        kotlinOptions.main = "call"
+    }
+
+    register<Copy>("copyStatic") {
+        dependsOn("bundle")
+        from("${project.buildDir.path}/bundle", staticFilesSrcDir)
+        into(staticFilesBuildDir)
+
+        val webpack = project.frontendExtension.bundles().first { it is WebPackExtension } as WebPackExtension
+        val bundleName = webpack.bundleName
+        val publicPath = webpack.publicPath
+        filesMatching("*.html") {
+            expand("bundle" to "$bundleName.bundle.js", "publicPath" to publicPath)
+        }
+    }
+
+    build {
+        dependsOn("copyStatic")
+    }
+}
+
+kotlinFrontend {
+
+    sourceMaps = true
+    
+    webpack {
+        bundleName = "seven-wonders-ui"
+        contentPath = file(staticFilesBuildDir)
+    }
+    
+    npm {
+//        dependency("@blueprintjs/core", "3.15.1")
+        dependency("react", "16.8.3")
+        dependency("react-dom", "16.8.3")
+        dependency("react-redux", "5.0.7")
+    }
+}
+
+fun org.jetbrains.kotlin.gradle.frontend.KotlinFrontendExtension.webpack(
+    configure: org.jetbrains.kotlin.gradle.frontend.webpack.WebPackExtension.() -> Unit
+) {
+    bundle("webpack", delegateClosureOf(configure))
+}
diff --git a/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/SevenWondersUi.kt b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/SevenWondersUi.kt
new file mode 100644
index 00000000..5d9d9be6
--- /dev/null
+++ b/sw-ui-kt/src/main/kotlin/org/luxons/sevenwonders/ui/SevenWondersUi.kt
@@ -0,0 +1,23 @@
+package org.luxons.sevenwonders.ui
+
+import react.RBuilder
+import react.dom.*
+import kotlin.browser.document
+import kotlin.browser.window
+
+fun main() {
+    window.onload = {
+        render(document.getElementById("root")!!) {
+            app()
+        }
+    }
+}
+
+fun RBuilder.app() = div {
+    h1 {
+        +"Seven Wonders"
+    }
+    p {
+        +"Great app!"
+    }
+}
diff --git a/sw-ui-kt/src/main/web/index.html b/sw-ui-kt/src/main/web/index.html
index 32b449cb..74cac462 100644
--- a/sw-ui-kt/src/main/web/index.html
+++ b/sw-ui-kt/src/main/web/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="shortcut icon" href="${publicPath}favicon.ico">
     <!--
       Notice the use of %PUBLIC_URL% in the tag above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -27,5 +27,6 @@
       To begin the development, run `npm start`.
       To create a production bundle, use `npm run build`.
     -->
+    <script src="${bundle}"></script>
   </body>
 </html>