Kotlin Standard Library for experimental WebAssembly JS platform providing core functionality and JavaScript interoperability
—
Annotations for controlling JavaScript exports, imports, and naming to enable seamless JavaScript integration with Kotlin/Wasm.
Exports top-level declarations to JavaScript platform. For Kotlin/Wasm, only functions can be exported.
/**
* Exports top-level declaration on JS platform (functions only for K/Wasm)
*/
@Target(AnnotationTarget.CLASS, AnnotationTarget.PROPERTY, AnnotationTarget.CONSTRUCTOR, AnnotationTarget.FUNCTION)
@ExperimentalJsExport
annotation class JsExport
/**
* Nested annotation to ignore declarations from export
*/
@Target(AnnotationTarget.FUNCTION)
@ExperimentalJsExport
annotation class JsExport.IgnoreUsage Examples:
@JsExport
fun calculateSum(a: Int, b: Int): Int {
return a + b
}
@JsExport
fun processData(data: String): String {
return data.uppercase()
}
// This function won't be exported
@JsExport.Ignore
fun internalHelper(): String {
return "internal"
}Specifies JavaScript name for external and imported declarations, allowing custom naming in JavaScript.
/**
* Specifies JavaScript name for external and imported declarations
* @param name The JavaScript name to use
*/
@Target(
AnnotationTarget.CLASS,
AnnotationTarget.FUNCTION,
AnnotationTarget.PROPERTY,
AnnotationTarget.CONSTRUCTOR,
AnnotationTarget.PROPERTY_GETTER,
AnnotationTarget.PROPERTY_SETTER
)
annotation class JsName(val name: String)Usage Examples:
// External JavaScript function with custom name
@JsName("getElementById")
external fun getElementByIdJs(id: String): JsAny?
// External JavaScript class with custom name
@JsName("XMLHttpRequest")
external class XmlHttpRequest {
fun open(method: String, url: String)
fun send(data: String?)
}
// Exported function with custom JavaScript name
@JsExport
@JsName("addNumbers")
fun kotlinAdd(x: Int, y: Int): Int = x + yDenotes external declaration that must be imported from a JavaScript module.
/**
* Denotes external declaration that must be imported from JavaScript module
* @param import The module import path
*/
@Target(
AnnotationTarget.CLASS,
AnnotationTarget.PROPERTY,
AnnotationTarget.FUNCTION,
AnnotationTarget.FILE
)
annotation class JsModule(val import: String)Usage Examples:
// Import from npm package
@JsModule("lodash")
@JsName("_")
external object Lodash {
fun map(collection: JsArray<JsAny>, iteratee: (JsAny) -> JsAny): JsArray<JsAny>
fun filter(collection: JsArray<JsAny>, predicate: (JsAny) -> Boolean): JsArray<JsAny>
}
// Import specific function from module
@JsModule("axios")
@JsName("default")
external fun axios(config: JsAny): Promise<JsAny>
// File-level module import
@file:JsModule("my-utils")
@JsName("formatDate")
external fun formatDate(date: JsAny): JsStringAdds prefix to external declarations in a source file.
/**
* Adds prefix to external declarations in a source file
* @param value The qualifier prefix
*/
@Target(AnnotationTarget.FILE)
annotation class JsQualifier(val value: String)Usage Example:
@file:JsQualifier("window.myLibrary")
// This will be accessed as window.myLibrary.helper
external fun helper(): JsString
// This will be accessed as window.myLibrary.Config
external class Config {
val version: JsString
fun init(): Unit
}Implements annotated function in JavaScript and automatically imports it to WebAssembly.
/**
* Implements annotated function in JavaScript and automatically imports to Wasm
* @param code The JavaScript code implementation
*/
@Target(
AnnotationTarget.FUNCTION,
AnnotationTarget.PROPERTY_GETTER,
AnnotationTarget.PROPERTY_SETTER
)
annotation class JsFun(val code: String)Usage Examples:
// Simple JavaScript function implementation
@JsFun("() => Date.now()")
external fun getCurrentTimestamp(): Double
// Function with parameters
@JsFun("(x, y) => x + y")
external fun addInJs(x: Double, y: Double): Double
// Property getter implemented in JavaScript
@get:JsFun("() => window.location.href")
external val currentUrl: String
// Property setter implemented in JavaScript
@set:JsFun("(value) => document.title = value")
external var documentTitle: String
// More complex JavaScript implementation
@JsFun("""
(element, eventType, callback) => {
element.addEventListener(eventType, callback);
return () => element.removeEventListener(eventType, callback);
}
""")
external fun addEventListener(
element: JsAny,
eventType: String,
callback: (JsAny) -> Unit
): () -> Unit// Complete integration with external JavaScript library
@file:JsModule("chart.js")
@JsName("Chart")
external class Chart(canvas: JsAny, config: ChartConfig) {
fun update(): Unit
fun destroy(): Unit
}
external interface ChartConfig {
val type: String
val data: ChartData
val options: JsAny?
}
external interface ChartData {
val labels: JsArray<String>
val datasets: JsArray<Dataset>
}
external interface Dataset {
val label: String
val data: JsArray<Double>
val backgroundColor: String?
}// Combining multiple annotation types for complex integration
@JsExport
@JsName("KotlinDataProcessor")
class DataProcessor {
@JsExport
@JsName("processJson")
fun processJsonData(jsonString: String): String {
return processData(jsonString)
}
@JsFun("(data) => JSON.parse(data)")
private external fun parseJson(data: String): JsAny
@JsFun("(obj) => JSON.stringify(obj)")
private external fun stringifyJson(obj: JsAny): String
private fun processData(json: String): String {
val parsed = parseJson(json)
// Process the data...
return stringifyJson(parsed)
}
}@file:JsQualifier("window")
@JsName("console")
external object Console {
fun log(message: JsAny)
fun error(message: JsAny)
fun warn(message: JsAny)
}
@JsName("document")
external object Document {
fun getElementById(id: String): JsAny?
fun createElement(tagName: String): JsAny
}
@JsName("fetch")
external fun fetch(url: String, options: JsAny?): Promise<JsAny>Install with Tessl CLI
npx tessl i tessl/maven-org-jetbrains-kotlin--kotlin-stdlib-wasm-js