tessl/maven-org-jetbrains-compose-foundation--foundation-wasm-js

Compose Multiplatform foundation library for building web UIs with type-safe HTML DSL, CSS-in-Kotlin, and event handling, compiled for WebAssembly/JavaScript target

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Compose Web Foundation (WASM/JS)

Name: tessl/maven-org-jetbrains-compose-foundation--foundation-wasm-js
Author: tessl

Compose Web Foundation provides comprehensive support for building modern web user interfaces using Compose Multiplatform. Compiled for WebAssembly/JavaScript target, it offers a type-safe HTML DSL, CSS-in-Kotlin styling system, and robust event handling, enabling developers to create web applications with the same declarative patterns used in other Compose targets.

Package Information

Package Name: org.jetbrains.compose.foundation:foundation-wasm-js
Package Type: Maven
Language: Kotlin
Installation: Add to your build.gradle.kts:

dependencies {
    implementation("org.jetbrains.compose.foundation:foundation-wasm-js:1.8.2")
}

Core Imports

import org.jetbrains.compose.web.dom.*
import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.attributes.*
import org.jetbrains.compose.web.events.*

Basic Usage

import androidx.compose.runtime.*
import org.jetbrains.compose.web.dom.*
import org.jetbrains.compose.web.css.*

@Composable
fun App() {
    Div({
        style {
            padding(16.px)
            backgroundColor(Color.lightblue)
        }
    }) {
        H1 { Text("Welcome to Compose Web") }
        
        P({
            style {
                fontSize(18.px)
                color(Color.darkblue)
            }
        }) {
            Text("Building web UIs with type-safe HTML and CSS")
        }
        
        Button({
            onClick { event ->
                console.log("Button clicked!")
            }
        }) {
            Text("Click Me")
        }
    }
}

Architecture

Compose Web Foundation is organized around several key systems:

HTML DSL: Type-safe composable functions for all HTML elements with proper attribute handling
CSS System: Kotlin-based CSS with type-safe properties, units, and selectors
Event Handling: Synthetic event system providing type-safe event handling across all DOM events
Attribute Management: Comprehensive attribute system supporting HTML global attributes and element-specific attributes
Style Integration: Seamless integration between inline styles and CSS class-based styling

Capabilities

HTML Elements

Complete set of type-safe HTML element constructors with proper attribute scoping and content builders.

@Composable
fun Div(
    attrs: AttrBuilderContext<HTMLDivElement>? = null,
    content: ContentBuilder<HTMLDivElement>? = null
)

@Composable
fun Text(value: String)

@Composable
fun Button(
    attrs: AttrBuilderContext<HTMLButtonElement>? = null,
    content: ContentBuilder<HTMLButtonElement>? = null
)

HTML Elements

CSS Styling

Type-safe CSS-in-Kotlin system with comprehensive property support, units, and responsive design capabilities.

interface StyleScope {
    fun width(value: CSSNumeric)
    fun height(value: CSSNumeric)
    fun backgroundColor(value: CSSColorValue)
    fun padding(value: CSSNumeric)
    fun margin(value: CSSNumeric)
}

val Number.px: CSSSizeValue<CSSUnitLength>
val Number.em: CSSSizeValue<CSSUnitLength>
val Number.percent: CSSSizeValue<CSSUnitPercentage>

CSS Styling

HTML Attributes

Comprehensive attribute system supporting global HTML attributes and element-specific attributes with type safety.

interface AttrsScope<TElement> {
    fun id(value: String)
    fun classes(vararg classes: String)
    fun style(builder: StyleScope.() -> Unit)
    fun onClick(listener: (SyntheticMouseEvent) -> Unit)
    fun ref(effect: DisposableEffectScope.(TElement) -> DisposableEffectResult)
}

HTML Attributes

Event Handling

Synthetic event system providing type-safe event handling for all DOM events with proper event delegation and lifecycle management.

abstract class SyntheticEvent<out Element> {
    val target: Element
    val currentTarget: Element
    val bubbles: Boolean
    val cancelable: Boolean
    
    fun preventDefault()
    fun stopPropagation()
    fun stopImmediatePropagation()
}

interface SyntheticMouseEvent : SyntheticEvent<Element> {
    val clientX: Double
    val clientY: Double
    val button: Short
    val buttons: Short
}

Event Handling

Form Controls

Specialized form input components with controlled and uncontrolled patterns, validation support, and accessibility features.

@Composable
fun TextInput(
    value: String,
    attrs: AttrBuilderContext<HTMLInputElement>? = null
)

@Composable
fun CheckboxInput(
    checked: Boolean,
    attrs: AttrBuilderContext<HTMLInputElement>? = null
)

@Composable
fun Select(
    attrs: AttrBuilderContext<HTMLSelectElement>? = null,
    content: ContentBuilder<HTMLSelectElement>? = null
)

Form Controls

Types

typealias AttrBuilderContext<T> = AttrsScope<T>.() -> Unit
typealias ContentBuilder<T> = @Composable ElementScope<T>.() -> Unit

interface ElementScope<out TElement> {
    val scopeElement: TElement
}

interface CSSColorValue
interface CSSNumeric
interface CSSSizeValue<T> : CSSNumeric

sealed class DisplayStyle
sealed class Color : CSSColorValue

Workspace: tessl
Visibility: Public
Created: 6 months ago
Last updated: 2 months ago
Describes: pkg:maven/org.jetbrains.compose.foundation/foundation-wasm-js@1.8.x
Publish Source: CLI
Badge