CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/maven-org-jetbrains-kotlin--kotlin-stdlib-wasm-js

Kotlin Standard Library for experimental WebAssembly JS platform providing core functionality and JavaScript interoperability

Pending
Overview
Eval results
Files

js-annotations.mddocs/

JavaScript Annotations

Annotations for controlling JavaScript exports, imports, and naming to enable seamless JavaScript integration with Kotlin/Wasm.

Capabilities

JsExport Annotation

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.Ignore

Usage 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"
}

JsName Annotation

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 + y

JsModule Annotation

Denotes 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): JsString

JsQualifier Annotation

Adds 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
}

JsFun Annotation

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

Annotation Patterns

Module Integration

// 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?
}

Custom JavaScript Integration

// 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)
    }
}

Browser API Integration

@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

docs

index.md

js-annotations.md

js-types.md

platform-services.md

promises.md

type-conversion.md

tile.json