Posted on Leave a comment

kotlin_4_js_page5

Main.kt

package okoko
import kotlin.browser.document
import kotlin.browser.window
external fun jQuery(selector: dynamic): dynamic = definedExternally

fun log(){
    println("log from Kotlin for JavaScript!")
}

fun jtext(selector:dynamic,txt:dynamic) {
    jQuery(selector).text(txt)
}

fun boombayah() {
    jQuery(document).ready({
        jQuery("p").click( { jtext("p","Thank You, Sir!") })
        jtext("p","If you click on me, You will be mesmerized.")
    })
}

fun main(args: Array<String>) {
    println("Welcome to Kotlin for JavaScript!")
    boombayah()
}

build.gradle

buildscript {
    ext {
        kotlin_version = "1.3.11"
    }
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version")
    }
}

apply plugin: "kotlin2js"
apply plugin: "kotlin-dce-js"

repositories {
    mavenCentral()
}

dependencies {
    compile("org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version")
}

defaultTasks "ko4js"
assemble.dependsOn runDceKotlinJs

build.doLast {
    configurations.compile.each { File file ->
        copy {
            includeEmptyDirs = false

            from zipTree(file.absolutePath)
            into "${projectDir}/js"
            include { fileTreeElement ->
                def path = fileTreeElement.path
                path.endsWith(".js") && (path.startsWith("META-INF/resources/") || !path.startsWith("META-INF/"))
            }
        }
    }
}

task uglifyjs(type: Exec) {
    commandLine "uglifyjs", "build/kotlin-js-min/main/kotlin.js", "build/kotlin-js-min/main/ko4js.js", "-c","-m", "-o", "js/ko4js.core.js"
}

task ko4js {
    dependsOn build, uglifyjs, runDceKotlinJs
    uglifyjs.mustRunAfter runDceKotlinJs
}

compileKotlin2Js {
    kotlinOptions.outputFile = "${projectDir}/js/ko4js.js"
    kotlinOptions.moduleKind = "plain"
    kotlinOptions.sourceMap = false
    kotlinOptions.sourceMapEmbedSources = "never"
    kotlinOptions.metaInfo = false
}

clean {
    delete "js"
}

task wrapper(type: Wrapper,overwrite: true) {
    gradleVersion = "5.0"
    distributionType = Wrapper.DistributionType.ALL
}

ex4.html

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cloud.ibinti.com/file/ko4js/ko4js.core.js"></script>
</head>
<body>

<p>If you click on me, You will be blessed.</p>

</body>
</html>
Posted on Leave a comment

kotlin_4_js_page4

package okoko
import kotlin.browser.document
import kotlin.browser.window
external fun jQuery(selector: Any?): Unit

fun log(){
    println("log from Kotlin for JavaScript!")
}

fun jtext(selector:Any,txt:Any) {
    jQuery(selector).asDynamic().text(txt)
}

fun boombayah() {
    jQuery(document).asDynamic().ready({
        jQuery("p").asDynamic().click( { jtext("p","Thank You, Sir!") })
        jtext("p","If you click on me, You will be mesmerized.")
    })
}

fun main(args: Array<String>) {
    println("Welcome to Kotlin for JavaScript!")
}
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cloud.ibinti.com/file/ko4js/ko4js.core.js"></script>
<script>ko4js.okoko.boombayah()</script>
</head>
<body>

<p>If you click on me, You will be blessed.</p>

</body>
</html>
Posted on Leave a comment

kotlin_4_js_page3

buildscript {
    ext {
        kotlin_version = "1.3.11"
    }
    repositories {
        mavenCentral()
    }

    dependencies {
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version")
    }
}

apply plugin: "kotlin2js"
apply plugin: "kotlin-dce-js"

repositories {
    mavenCentral()
    maven {
        url("http://dl.bintray.com/kotlin/kotlinx.html/")
    }
}

dependencies {
    compile("org.jetbrains.kotlinx:kotlinx-html-js:0.6.3")
    compile("org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version")
}

defaultTasks "ko4js"
assemble.dependsOn runDceKotlinJs

build.doLast {
    configurations.compile.each { File file ->
        copy {
            includeEmptyDirs = false

            from zipTree(file.absolutePath)
            into "${projectDir}/js"
            include { fileTreeElement ->
                def path = fileTreeElement.path
                path.endsWith(".js") && (path.startsWith("META-INF/resources/") || !path.startsWith("META-INF/"))
            }
        }
    }
}
//Note that if your function has parameters, its name will be mangled, so the mangled name should be used in the keep directive.
runDceKotlinJs.keep "ko4js.okoko.log", "ko4js.okoko.jtext_wn2jw4\$"

task uglifyjs(type: Exec) {
    commandLine "uglifyjs", "build/kotlin-js-min/main/kotlin.js", "build/kotlin-js-min/main/ko4js.js", "-c","-m", "-o", "js/ko4js.core.js"
    // commandLine "uglifyjs", "build/kotlin-js-min/main/kotlin.js", "build/kotlin-js-min/main/ko4js.js", "-b", "-o", "js/ko4js.core.js"
}

task ko4js {
    dependsOn build, uglifyjs, runDceKotlinJs
    uglifyjs.mustRunAfter runDceKotlinJs
}
compileKotlin2Js {
    kotlinOptions.outputFile = "${projectDir}/js/ko4js.js"
    kotlinOptions.moduleKind = "plain"
    kotlinOptions.sourceMap = false
    kotlinOptions.sourceMapEmbedSources = "never"
    kotlinOptions.metaInfo = false
}

clean {
    delete "js"
}

task wrapper(type: Wrapper,overwrite: true) {
    gradleVersion = "5.0"
    distributionType = Wrapper.DistributionType.ALL
}
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cloud.ibinti.com/file/ko4js/ko4js.core.js"></script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    ko4js.okoko.jtext_wn2jw4$("p","Thank You, Sir!")
  });
  ko4js.okoko.jtext_wn2jw4$("p","If you click on me, You will be mesmerized.")
});
</script>
</head>
<body>

<p>If you click on me, You will be blessed.</p>

</body>
</html>
Posted on Leave a comment

Building BugVM

One needs a Mac running macOS 10.14. Download and install Java SE JDK 8 from Oracle. Make sure $JAVA_HOME is set properly by editing ~/.bash_profile

export JAVA_HOME=$(/usr/libexec/java_home)

Install Xcode from the Mac App Store.
Use xcode-select command line tool to select correct Xcode if there are multiple versions of Xcode.

xcode-select -s /Applications/Xcode.app
or
xcode-select -s /Applications/OtherVersion/Xcode.app

Installing Xcode Command Line Tools

xcode-select --install

You may need to install cmake, pkg-config, openssl if this is first time.

brew install pkg-config
brew install cmake
brew install openssl

Install any other missing components your build systems may complain about.
Clone GitHub repo.

git clone https://github.com/ibinti/bugvm bvm
cd bvm

BugVM uses Gradle build system. Little or no knowledge of Gradle is required to build BugVM. There is nothing you need to install or configure. Just simple one command line is all you need.

./gradlew all

Note: Gradle will self-configure and download necessary things from the Internet. It takes a few hours to complete all the build processes.

Building BugVM on Ubuntu 18.04.1 LTS (GNU/Linux 4.15.0-38-generic x86_64)

One may need:

apt -y install make
apt -y install cmake
apt -y install g++
apt -y install g++-multilib
apt -y install clang
apt -y install libcap-dev
apt -y install libxml2-dev
apt -y install zlib1g-dev
apt -y install openjdk-8-jdk

Clone GitHub and Build

git clone https://github.com/ibinti/bugvm bvm
cd bvm
./gradlew all
./gradlew install

Sample HelloWorld Console App

git clone https://github.com/ibinti/bugvm-console bcon
cd bcon/helloworld
./gradlew

Sample iOS Apps

git clone https://github.com/ibinti/bugvm-ios bios
Button App
cd bios/button
./gradlew sim
WebView App
cd bios/webview
./gradlew sim

Using Gradle Plugin

build.gradle

buildscript {
    ext {
        bugvm_version = "1.2.9"
        kotlin_version = "1.2.40"
    }
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath "com.bugvm:bugvm-gradle:$bugvm_version"
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}
apply plugin: "bugvm"
apply plugin: "kotlin"
kotlin {
    experimental {
        coroutines "enable"
    }
}
compileKotlin {
    kotlinOptions {
        jvmTarget = "1.8"
    }
}
compileTestKotlin {
    kotlinOptions {
        jvmTarget = "1.8"
    }
}
repositories {
    mavenCentral()
}
dependencies {
    compile "com.bugvm:bugvm-rt:$bugvm_version"
    compile "com.bugvm:bugvm-apple:$bugvm_version"
    compile "org.jetbrains.kotlin:kotlin-stdlib-jdk8:$kotlin_version"
    compile "org.jetbrains.kotlinx:kotlinx-coroutines-core:0.22.3"
}
task sim {
    dependsOn launchIPhoneSimulator, build, clean
    launchIPhoneSimulator.mustRunAfter build
    build.mustRunAfter clean
}
task pad {
    dependsOn launchIPadSimulator, build, clean
    launchIPadSimulator.mustRunAfter build
    build.mustRunAfter clean
}
task dev {
    dependsOn launchIOSDevice, build, clean
    launchIOSDevice.mustRunAfter build
    build.mustRunAfter clean
}
task dist {
    dependsOn createIPA
    doLast {
        println "The IPA should be in build/bugvm directory."
    }
}
/*
In order to install to device or to package for the app store, one needs to follow Apple's
signing requirements. Easy way to setup signing and all is to create a sample iOS project
with Xcode. Xcode will advise you if something is missing or not correct.
Once Xcode can build and upload to the iTunes Connect, all setup is good.
*/
gradle.taskGraph.whenReady { graph ->
    if (graph.hasTask(dev)) {
        bugvm.iosSignIdentity = "iPhone Developer"
    } else
    if (graph.hasTask(dist)) {
        bugvm.iosSignIdentity = "iPhone Distribution"
    }
}

Gradle Tasks

Launch to iPhone Simulator

./gradlew sim

Launch to iPad Simulator

./gradlew pad

Install to Device

./gradlew dev

Create App for App Store Distribution

./gradlew dist
Posted on Leave a comment

BugVM

You can build iOS App in Kotlin on macOS that runs on the simulator, on the device, and for the App Store distribution. Console applications in Kotlin on macOS 10.14 and 64-bit Ubuntu 18.04.1 LTS are supported.

Source Code at GitHub
Source Code at GitHub
Posted on Leave a comment

kotlin_4_js_page2

Gradle

build.gradle

buildscript {
    ext {
        kotlin_version = "1.3.11"
    }
    repositories {
        mavenCentral()
    }

    dependencies {
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version")
    }
}

apply plugin: "kotlin2js"

kotlin {
    experimental {
        coroutines "enable"
    }
}

repositories {
    mavenCentral()
    maven {
        url("http://dl.bintray.com/kotlin/kotlinx.html/")
    }
}

dependencies {
    compile("org.jetbrains.kotlinx:kotlinx-html-js:0.6.3")
    compile("org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version")
    compile 'org.jetbrains.kotlinx:kotlinx-coroutines-core-js:0.22.3'
}

defaultTasks "ko4js"
build.doLast {
    configurations.compile.each { File file ->
        copy {
            includeEmptyDirs = false

            from zipTree(file.absolutePath)
            into "${projectDir}/js"
            include { fileTreeElement ->
                def path = fileTreeElement.path
                path.endsWith(".js") && (path.startsWith("META-INF/resources/") || !path.startsWith("META-INF/"))
            }
        }
    }
}
task uglifyjs(type: Exec) {
    commandLine "uglifyjs", "js/kotlin.js", "js/kotlinx-coroutines-core-js.js", "js/kotlinx-html-js.js", "js/ko4js.js", "-b", "-o", "js/ko4js.core.js"
}

task ko4js {
    dependsOn build, uglifyjs
    uglifyjs.mustRunAfter build
}
compileKotlin2Js {
    kotlinOptions.outputFile = "${projectDir}/js/ko4js.js"
    kotlinOptions.moduleKind = "plain"
    kotlinOptions.sourceMap = false
    kotlinOptions.sourceMapEmbedSources = "never"
    kotlinOptions.metaInfo = false
}

clean {
    delete "js"
}

task wrapper(type: Wrapper,overwrite: true) {
    gradleVersion = "5.0"
    distributionType = Wrapper.DistributionType.ALL
}
Posted on Leave a comment

kotlin_4_js_page1

Unified coding model. Kotlin is an interesting programming language that can write codes for both web front-end JavaScript and back-end server side JavaScript as well as Java Virtual Machine (JVM). Kotlin can work things out with existing JavaScript and JVM ecosystems.

In this article, I would like to teach myself on how to target JavaScript with Kotlin.

Official Kotlin documents on the Web: here

Official document recommends to use Gradle build tool. So I will use Gradle to generate JavaScript code from Kotlin code.

Also I would like to use jQuery as an example of existing JavaScript library.

Here is a sample HTML with JavaScript

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).text("Bless You!");
  });
});
</script>
</head>
<body>

<p>If you click on me, You will be blessed.</p>

</body>
</html>

The JavaScript part of the example above is:

$(document).ready(function(){
  $("p").click(function(){
    $(this).text("Bless You!");
  });
});

I will produce above JavaScript code with Kotlin. Follow me next.