MPP: Example frontend JS application using nodejs and webpack

Author: elizarov

.gitignore

@@ -5,4 +5,5 @@
 build
 out
 target
-node_modules
+node_modules
+package-lock.json

build.gradle

@@ -52,6 +52,16 @@ configure(subprojects.findAll { !sourceless.contains(it.name)  }) {
 
     kotlin.experimental.coroutines "enable"
 
+    if (platform == "js") {
+        tasks.withType(compileKotlin2Js.getClass()) {
+            kotlinOptions {
+                moduleKind = "umd"
+                sourceMap = true
+                metaInfo = true
+            }
+        }
+    }
+    
     tasks.withType(Test) {
         testLogging {
             showStandardStreams = true
@@ -87,10 +97,6 @@ configure(subprojects.findAll { !sourceless.contains(it.name)  }) {
             testCompile "org.jetbrains.kotlin:kotlin-test-junit:$kotlin_version"
         }
     }
-
-    if (platform == "js") {
-        apply from: rootProject.file('gradle/test-js.gradle')
-    }
 }
 
 // --------------- Configure sub-projects that are part of the library ---------------
@@ -143,7 +149,7 @@ configure(subprojects.findAll { !internal.contains(it.name) && it.name != 'kotli
 
 // --------------- Configure sub-projects that are published ---------------
 
-def unpublished = internal + 'kotlinx-coroutines-rx-example'
+def unpublished = internal + ['kotlinx-coroutines-rx-example', 'example-frontend-js']
 
 def core_docs_url = "https://kotlin.github.io/kotlinx.coroutines/kotlinx-coroutines-core/"
 def core_docs_file = "$projectDir/core/kotlinx-coroutines-core/build/dokka/kotlinx-coroutines-core/package-list"

gradle.properties

@@ -3,8 +3,11 @@ version = 0.20-SNAPSHOT
 kotlin_version = 1.2.10
 junit_version = 4.12
 atomicFU_version = 0.9.2
+html_version = 0.6.8
 lincheck_version=1.9
 dokka_version = 0.9.16-dev-mpp-hacks-1
 bintray_version = 1.7.3
-gradle_node_version = 1.2.0
 
+gradle_node_version = 1.2.0
+node_version = 8.9.3
+npm_version = 5.5.1

gradle/test-js.gradle renamed to gradle/test-mocha-js.gradle

@@ -2,14 +2,6 @@
 
 apply plugin: 'com.moowork.node'
 
-tasks.withType(compileKotlin2Js.getClass()) {
-    kotlinOptions {
-        moduleKind = "umd"
-        sourceMap = true
-        metaInfo = true
-    }
-}
-
 task populateNodeModules(type: Copy, dependsOn: compileKotlin2Js) {
     from compileKotlin2Js.destinationDir
     into "${buildDir}/node_modules"
@@ -25,6 +17,8 @@ task populateNodeModules(type: Copy, dependsOn: compileKotlin2Js) {
 }
 
 node {
+    version = "$node_version"
+    npmVersion = "$npm_version"
     download = true
 }
 

js/example-frontend-js/README.md

@@ -0,0 +1,15 @@
+# Example JS frontend application with coroutines
+
+Build application with
+
+```
+gradlew :example-frontend-js:build
+```
+
+The resulting application can be found in `build/dist` subdirectory.
+
+You can start application with webpack-dev-server using:
+
+```
+gradlew :example-frontend-js:start
+```

js/example-frontend-js/build.gradle

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2016-2017 JetBrains s.r.o.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+apply plugin: 'kotlin-dce-js'
+apply plugin: 'com.moowork.node'
+
+dependencies {
+    compile "org.jetbrains.kotlinx:kotlinx-html-js:$html_version"
+}
+
+compileKotlin2Js {
+    kotlinOptions {
+        main = "call"
+    }
+}
+
+node {
+    version = "$node_version"
+    npmVersion = "$npm_version"
+    download = true
+}
+
+task bundle(type: NpmTask, dependsOn: [npmInstall, runDceKotlinJs]) {
+    args = ["run", "bundle"]
+}
+
+task start(type: NpmTask, dependsOn: bundle) {
+    args = ["run", "start"]
+}

js/example-frontend-js/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "example-frontend-js",
+  "dependencies": {
+    "webpack": "^3.10.0"
+  },
+  "devDependencies": {
+    "html-webpack-plugin": "^2.30.1",
+    "webpack-dev-server": "^2.9.7",
+    "style-loader": "^0.19.1",
+    "css-loader": "^0.28.7"
+  },
+  "scripts": {
+    "bundle": "webpack",
+    "start": "webpack-dev-server --open --no-inline"
+  }
+}

js/example-frontend-js/src/main/kotlin/ExampleMain.kt

@@ -0,0 +1,200 @@
+/*
+ * Copyright 2016-2017 JetBrains s.r.o.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import kotlinx.coroutines.experimental.*
+import kotlinx.html.*
+import kotlinx.html.div
+import kotlinx.html.dom.*
+import kotlinx.html.js.onClickFunction
+import org.w3c.dom.*
+import kotlin.browser.*
+import kotlin.math.*
+
+fun main(args: Array<String>) {
+    println("Starting example application...")
+    document.addEventListener("DOMContentLoaded", {
+        Application().start()
+    })
+}
+
+val Double.px get() = "${this}px"
+
+private fun HTMLElement.setSize(w: Double, h: Double) {
+    with(style) {
+        width = w.px
+        height = h.px
+    }
+}
+
+private fun HTMLElement.setPosition(x: Double, y: Double) {
+    with(style) {
+        left = x.px
+        top = y.px
+    }
+}
+
+@Suppress("DEPRECATION")
+fun random() = kotlin.js.Math.random()
+
+class Application {
+    private val body get() = document.body!!
+    private val scene get() = document.getElementById("scene") as HTMLElement
+    private val sw = 800.0
+    private val sh = 600.0
+    private var animationIndex = 0
+    private val animations = mutableSetOf<Job>()
+
+    fun start() {
+        body.append.div("content") {
+            h1 {
+                +"Kotlin Coroutines JS Example"
+            }
+            div {
+                button {
+                    +"Rect"
+                    onClickFunction = { onRect() }
+                }
+                button {
+                    +"Circle"
+                    onClickFunction = { onCircle() }
+                }
+                button {
+                    +"Clear"
+                    onClickFunction = { onClear() }
+                }
+            }
+            div {
+                id = "scene"
+            }
+        }
+        scene.setSize(sw, sh)
+    }
+
+    private fun animation(cls: String, size: Double, block: suspend CoroutineScope.(HTMLElement) -> Unit) {
+        val elem = scene.append.div(cls)
+        elem.setSize(size, size)
+        val job = launch {
+            block(elem)
+        }
+        animations += job
+        job.invokeOnCompletion {
+            animations -= job
+            scene.removeChild(elem)
+        }
+    }
+
+    private fun onRect() {
+        val index = ++animationIndex
+        val speed = 0.3
+        val rs = 20.0
+        val turnAfter = 5000.0 // seconds
+        animation("rect", rs) { rect ->
+            println("Started new 'rect' coroutine #$index")
+            val timer = AnimationTimer()
+            var turnAt = timer.time + turnAfter
+            var vx = speed
+            var vy = speed
+            var x = 0.0
+            var y = 0.0
+            while (true) {
+                val dt = timer.await()
+                x += vx * dt
+                y += vy * dt
+                val xRange = 0.0 .. sw - rs
+                val yRange = 0.0 .. sh - rs
+                if (x !in xRange ) {
+                    x = x.coerceIn(xRange)
+                    vx = -vx
+                }
+                if (y !in yRange) {
+                    y = y.coerceIn(yRange)
+                    vy = -vy
+                }
+                rect.setPosition(x, y)
+                if (timer.time >= turnAt) {
+                    delay(1000) // pause a bit
+                    // flip direction
+                    val t = vx
+                    if (random() > 0.5) {
+                        vx = vy
+                        vy = -t
+                    } else {
+                        vx = -vy
+                        vy = t
+                    }
+                    // reset time
+                    turnAt = timer.reset() + turnAfter
+                    println("Delayed #$index for a while at ${timer.time}, resumed and turned")
+                }
+            }
+
+        }
+    }
+
+    private fun onCircle() {
+        val index = ++animationIndex
+        val acceleration = 5e-4
+        val initialRange = 0.7
+        val maxSpeed = 0.4
+        val initialSpeed = 0.1
+        val radius = 20.0
+        animation("circle", radius) { circle ->
+            println("Started new 'circle' coroutine #$index")
+            val timer = AnimationTimer()
+            val initialAngle = random() * 2 * PI
+            var vx = sin(initialAngle) * initialSpeed
+            var vy = cos(initialAngle) * initialSpeed
+            var x = (random() * initialRange + (1 - initialRange) / 2) * sw
+            var y = (random() * initialRange + (1 - initialRange) / 2) * sh
+            while (true) {
+                val dt = timer.await()
+                val dx = sw / 2 - x
+                val dy = sh / 2 - y
+                val dn = sqrt(dx * dx + dy * dy)
+                vx += dx / dn * acceleration * dt
+                vy += dy / dn * acceleration * dt
+                val vn = sqrt(vx * vx + vy * vy)
+                val trim = vn.coerceAtMost(maxSpeed)
+                vx = vx / vn * trim
+                vy = vy / vn * trim
+                x += vx * dt
+                y += vy * dt
+                circle.setPosition(x, y)
+            }
+        }
+
+    }
+
+    private fun onClear() {
+        animations.forEach { it.cancel() }
+    }
+}
+
+class AnimationTimer {
+    var time = window.performance.now()
+
+    suspend fun await(): Double {
+        val newTime = window.awaitAnimationFrame()
+        val dt = newTime - time
+        time = newTime
+        return dt
+    }
+
+    fun reset(): Double {
+        time = window.performance.now()
+        return time
+    }
+}

js/example-frontend-js/src/main/web/main.js

@@ -0,0 +1,20 @@
+/*
+ * Copyright 2016-2017 JetBrains s.r.o.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// ------ Main bundle for example application ------
+
+require("example-frontend-js");
+require("style.css");