github
/
compose-jb
mirror of https://gitee.com/github-sync-mirror/compose-jb.git
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

web: AttrsScope interface extraction (#1694) 

* AttrsScope interface extraction

* PR amendments

* resolve conflicts

* remove yarn lockfile

* move submodule back
pull/1777/head
Martynas Petuška 3 years ago committed by GitHub
parent
b83d681c1f
commit
f98dfbc761
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 732 additions and 605 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      .gitignore
  2. 2
      web/benchmark-core/build.gradle.kts
  3. 14
      web/build.gradle.kts
  4. 186
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/Attrs.kt
  5. 128
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/AttrsScope.kt
  6. 110
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/EventsListenerScope.kt
  7. 6
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/SyntheticEventListener.kt
  8. 37
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/builders/InputAttrsScope.kt
  9. 18
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/builders/SelectAttrsScope.kt
  10. 49
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/builders/TextAreaAttrsBuilder.kt
  11. 64
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/builders/TextAreaAttrsScope.kt
  12. 2
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSRules.kt
  13. 19
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/StyleScope.kt
  14. 21
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Base.kt
  15. 153
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt
  16. 42
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/InputElements.kt
  17. 4
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/RadioGroup.kt
  18. 42
      web/core/src/jsTest/kotlin/elements/AttributesTests.kt
  19. 5
      web/core/src/jsTest/kotlin/elements/ElementsTests.kt
  20. 2
      web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/tests/InputsTests.kt
  21. 78
      web/svg/src/jsMain/kotlin/org/jetbrains/compose/web/svg/svg.kt
  22. 8
      web/widgets/src/jsMain/kotlin/Modifier.kt
  23. 6
      web/widgets/src/jsMain/kotlin/internal/ActualModifier.kt

3
.gitignore vendored
Unescape View File

@ -16,3 +16,6 @@ build/
/captures /captures
.externalNativeBuild .externalNativeBuild
.cxx .cxx
# Ignoring the persistant lockfile until kotlin.js vulnerabilities are fixed
yarn.lock

2
web/benchmark-core/build.gradle.kts
Unescape View File

@ -6,7 +6,7 @@ plugins {
kotlin { kotlin {
js(IR) { js(IR) {
browser() { browser {
testTask { testTask {
useKarma { useKarma {
useChromeHeadless() useChromeHeadless()

14
web/build.gradle.kts
Unescape View File

@ -1,4 +1,3 @@
import org.gradle.api.tasks.testing.AbstractTestTask
import org.gradle.api.tasks.testing.logging.TestExceptionFormat import org.gradle.api.tasks.testing.logging.TestExceptionFormat
import org.jetbrains.compose.gradle.kotlinKarmaConfig import org.jetbrains.compose.gradle.kotlinKarmaConfig
@ -34,7 +33,7 @@ subprojects {
group = "org.jetbrains.compose.web" group = "org.jetbrains.compose.web"
version = COMPOSE_WEB_VERSION version = COMPOSE_WEB_VERSION
tasks.withType<org.jetbrains.kotlin.gradle.tasks.KotlinCompile>() { tasks.withType<org.jetbrains.kotlin.gradle.tasks.KotlinCompile> {
kotlinOptions.jvmTarget = "11" kotlinOptions.jvmTarget = "11"
} }
@ -54,6 +53,16 @@ subprojects {
} }
pluginManager.withPlugin("kotlin-multiplatform") { pluginManager.withPlugin("kotlin-multiplatform") {
configure<org.jetbrains.kotlin.gradle.dsl.KotlinMultiplatformExtension> {
sourceSets {
all {
languageSettings {
optIn("org.jetbrains.compose.web.internal.runtime.ComposeWebInternalApi")
optIn("kotlin.RequiresOptIn")
}
}
}
}
val printTestBundleSize by tasks.registering { val printTestBundleSize by tasks.registering {
dependsOn(tasks.named("jsTest")) dependsOn(tasks.named("jsTest"))
doLast { doLast {
@ -72,7 +81,6 @@ subprojects {
} }
} }
if (isSampleProject()) { if (isSampleProject()) {
val printBundleSize by tasks.registering { val printBundleSize by tasks.registering {
dependsOn(tasks.named("jsBrowserDistribution")) dependsOn(tasks.named("jsBrowserDistribution"))

186
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/Attrs.kt
Unescape View File

@ -15,284 +15,284 @@ import org.w3c.dom.HTMLTableCellElement
import org.w3c.dom.HTMLTableColElement import org.w3c.dom.HTMLTableColElement
import org.w3c.dom.HTMLTextAreaElement import org.w3c.dom.HTMLTextAreaElement
fun AttrsBuilder<HTMLAnchorElement>.href(value: String) = fun AttrsScope<HTMLAnchorElement>.href(value: String) =
attr("href", value) attr("href", value)
fun AttrsBuilder<HTMLAnchorElement>.target(value: ATarget = ATarget.Self) = fun AttrsScope<HTMLAnchorElement>.target(value: ATarget = ATarget.Self) =
attr("target", value.targetStr) attr("target", value.targetStr)
fun AttrsBuilder<HTMLAnchorElement>.ref(value: ARel) = fun AttrsScope<HTMLAnchorElement>.ref(value: ARel) =
attr("rel", value.relStr) attr("rel", value.relStr)
fun AttrsBuilder<HTMLAnchorElement>.ping(value: String) = fun AttrsScope<HTMLAnchorElement>.ping(value: String) =
attr("ping", value) attr("ping", value)
fun AttrsBuilder<HTMLAnchorElement>.ping(vararg urls: String) = fun AttrsScope<HTMLAnchorElement>.ping(vararg urls: String) =
attr("ping", urls.joinToString(" ")) attr("ping", urls.joinToString(" "))
fun AttrsBuilder<HTMLAnchorElement>.hreflang(value: String) = fun AttrsScope<HTMLAnchorElement>.hreflang(value: String) =
attr("hreflang", value) attr("hreflang", value)
fun AttrsBuilder<HTMLAnchorElement>.download(value: String = "") = fun AttrsScope<HTMLAnchorElement>.download(value: String = "") =
attr("download", value) attr("download", value)
/* Button attributes */ /* Button attributes */
fun AttrsBuilder<HTMLButtonElement>.autoFocus() = fun AttrsScope<HTMLButtonElement>.autoFocus() =
attr("autofocus", "") attr("autofocus", "")
fun AttrsBuilder<HTMLButtonElement>.disabled() = fun AttrsScope<HTMLButtonElement>.disabled() =
attr("disabled", "") attr("disabled", "")
fun AttrsBuilder<HTMLButtonElement>.form(formId: String) = fun AttrsScope<HTMLButtonElement>.form(formId: String) =
attr("form", formId) attr("form", formId)
fun AttrsBuilder<HTMLButtonElement>.formAction(url: String) = fun AttrsScope<HTMLButtonElement>.formAction(url: String) =
attr("formaction", url) attr("formaction", url)
fun AttrsBuilder<HTMLButtonElement>.formEncType(value: ButtonFormEncType) = fun AttrsScope<HTMLButtonElement>.formEncType(value: ButtonFormEncType) =
attr("formenctype", value.typeStr) attr("formenctype", value.typeStr)
fun AttrsBuilder<HTMLButtonElement>.formMethod(value: ButtonFormMethod) = fun AttrsScope<HTMLButtonElement>.formMethod(value: ButtonFormMethod) =
attr("formmethod", value.methodStr) attr("formmethod", value.methodStr)
fun AttrsBuilder<HTMLButtonElement>.formNoValidate() = fun AttrsScope<HTMLButtonElement>.formNoValidate() =
attr("formnovalidate", "") attr("formnovalidate", "")
fun AttrsBuilder<HTMLButtonElement>.formTarget(value: ButtonFormTarget) = fun AttrsScope<HTMLButtonElement>.formTarget(value: ButtonFormTarget) =
attr("formtarget", value.targetStr) attr("formtarget", value.targetStr)
fun AttrsBuilder<HTMLButtonElement>.name(value: String) = fun AttrsScope<HTMLButtonElement>.name(value: String) =
attr("name", value) attr("name", value)
fun AttrsBuilder<HTMLButtonElement>.type(value: ButtonType) = fun AttrsScope<HTMLButtonElement>.type(value: ButtonType) =
attr("type", value.str) attr("type", value.str)
fun AttrsBuilder<HTMLButtonElement>.value(value: String) = fun AttrsScope<HTMLButtonElement>.value(value: String) =
attr("value", value) attr("value", value)
/* Form attributes */ /* Form attributes */
fun AttrsBuilder<HTMLFormElement>.action(value: String) = fun AttrsScope<HTMLFormElement>.action(value: String) =
attr("action", value) attr("action", value)
fun AttrsBuilder<HTMLFormElement>.acceptCharset(value: String) = fun AttrsScope<HTMLFormElement>.acceptCharset(value: String) =
attr("accept-charset", value) attr("accept-charset", value)
fun AttrsBuilder<HTMLFormElement>.autoComplete(value: Boolean = true) = fun AttrsScope<HTMLFormElement>.autoComplete(value: Boolean = true) =
attr("autocomplete", if(value) "on" else "off") attr("autocomplete", if(value) "on" else "off")
fun AttrsBuilder<HTMLFormElement>.encType(value: FormEncType) = fun AttrsScope<HTMLFormElement>.encType(value: FormEncType) =
attr("enctype", value.typeStr) attr("enctype", value.typeStr)
fun AttrsBuilder<HTMLFormElement>.method(value: FormMethod) = fun AttrsScope<HTMLFormElement>.method(value: FormMethod) =
attr("method", value.methodStr) attr("method", value.methodStr)
fun AttrsBuilder<HTMLFormElement>.noValidate() = fun AttrsScope<HTMLFormElement>.noValidate() =
attr("novalidate", "") attr("novalidate", "")
fun AttrsBuilder<HTMLFormElement>.target(value: FormTarget) = fun AttrsScope<HTMLFormElement>.target(value: FormTarget) =
attr("target", value.targetStr) attr("target", value.targetStr)
fun AttrsBuilder<HTMLFormElement>.onSubmit( fun AttrsScope<HTMLFormElement>.onSubmit(
listener: (SyntheticSubmitEvent) -> Unit listener: (SyntheticSubmitEvent) -> Unit
) { ) {
addEventListener(eventName = EventsListenerBuilder.SUBMIT, listener = listener) addEventListener(eventName = EventsListenerScope.SUBMIT, listener = listener)
} }
fun AttrsBuilder<HTMLFormElement>.onReset( fun AttrsScope<HTMLFormElement>.onReset(
listener: (SyntheticSubmitEvent) -> Unit listener: (SyntheticSubmitEvent) -> Unit
) { ) {
addEventListener(eventName = EventsListenerBuilder.RESET, listener = listener) addEventListener(eventName = EventsListenerScope.RESET, listener = listener)
} }
/* Input attributes */ /* Input attributes */
fun AttrsBuilder<HTMLInputElement>.type(value: InputType<*>) = fun AttrsScope<HTMLInputElement>.type(value: InputType<*>) =
attr("type", value.typeStr) attr("type", value.typeStr)
fun AttrsBuilder<HTMLInputElement>.accept(value: String) = fun AttrsScope<HTMLInputElement>.accept(value: String) =
attr("accept", value) // type: file only attr("accept", value) // type: file only
fun AttrsBuilder<HTMLInputElement>.alt(value: String) = fun AttrsScope<HTMLInputElement>.alt(value: String) =
attr("alt", value) // type: image only attr("alt", value) // type: image only
fun AttrsBuilder<HTMLInputElement>.autoComplete(value: AutoComplete) = fun AttrsScope<HTMLInputElement>.autoComplete(value: AutoComplete) =
attr("autocomplete", value.unsafeCast<String>()) attr("autocomplete", value.unsafeCast<String>())
fun AttrsBuilder<HTMLInputElement>.autoFocus() = fun AttrsScope<HTMLInputElement>.autoFocus() =
attr("autofocus", "") attr("autofocus", "")
fun AttrsBuilder<HTMLInputElement>.capture(value: String) = fun AttrsScope<HTMLInputElement>.capture(value: String) =
attr("capture", value) // type: file only attr("capture", value) // type: file only
fun AttrsBuilder<HTMLInputElement>.dirName(value: String) = fun AttrsScope<HTMLInputElement>.dirName(value: String) =
attr("dirname", value) // text, search attr("dirname", value) // text, search
fun AttrsBuilder<HTMLInputElement>.disabled() = fun AttrsScope<HTMLInputElement>.disabled() =
attr("disabled", "") attr("disabled", "")
fun AttrsBuilder<HTMLInputElement>.form(id: String) = fun AttrsScope<HTMLInputElement>.form(id: String) =
attr("form", id) attr("form", id)
fun AttrsBuilder<HTMLInputElement>.formAction(url: String) = fun AttrsScope<HTMLInputElement>.formAction(url: String) =
attr("formaction", url) attr("formaction", url)
fun AttrsBuilder<HTMLInputElement>.formEncType(value: InputFormEncType) = fun AttrsScope<HTMLInputElement>.formEncType(value: InputFormEncType) =
attr("formenctype", value.typeStr) attr("formenctype", value.typeStr)
fun AttrsBuilder<HTMLInputElement>.formMethod(value: InputFormMethod) = fun AttrsScope<HTMLInputElement>.formMethod(value: InputFormMethod) =
attr("formmethod", value.methodStr) attr("formmethod", value.methodStr)
fun AttrsBuilder<HTMLInputElement>.formNoValidate() = fun AttrsScope<HTMLInputElement>.formNoValidate() =
attr("formnovalidate", "") attr("formnovalidate", "")
fun AttrsBuilder<HTMLInputElement>.formTarget(value: InputFormTarget) = fun AttrsScope<HTMLInputElement>.formTarget(value: InputFormTarget) =
attr("formtarget", value.targetStr) attr("formtarget", value.targetStr)
fun AttrsBuilder<HTMLInputElement>.height(value: Int) = fun AttrsScope<HTMLInputElement>.height(value: Int) =
attr("height", value.toString()) // image only attr("height", value.toString()) // image only
fun AttrsBuilder<HTMLInputElement>.width(value: Int) = fun AttrsScope<HTMLInputElement>.width(value: Int) =
attr("width", value.toString()) // image only attr("width", value.toString()) // image only
fun AttrsBuilder<HTMLInputElement>.list(dataListId: String) = fun AttrsScope<HTMLInputElement>.list(dataListId: String) =
attr("list", dataListId) attr("list", dataListId)
fun AttrsBuilder<HTMLInputElement>.max(value: String) = fun AttrsScope<HTMLInputElement>.max(value: String) =
attr("max", value) attr("max", value)
fun AttrsBuilder<HTMLInputElement>.maxLength(value: Int) = fun AttrsScope<HTMLInputElement>.maxLength(value: Int) =
attr("maxlength", value.toString()) attr("maxlength", value.toString())
fun AttrsBuilder<HTMLInputElement>.min(value: String) = fun AttrsScope<HTMLInputElement>.min(value: String) =
attr("min", value) attr("min", value)
fun AttrsBuilder<HTMLInputElement>.minLength(value: Int) = fun AttrsScope<HTMLInputElement>.minLength(value: Int) =
attr("minlength", value.toString()) attr("minlength", value.toString())
fun AttrsBuilder<HTMLInputElement>.multiple() = fun AttrsScope<HTMLInputElement>.multiple() =
attr("multiple", "") attr("multiple", "")
fun AttrsBuilder<HTMLInputElement>.name(value: String) = fun AttrsScope<HTMLInputElement>.name(value: String) =
attr("name", value) attr("name", value)
fun AttrsBuilder<HTMLInputElement>.pattern(value: String) = fun AttrsScope<HTMLInputElement>.pattern(value: String) =
attr("pattern", value) attr("pattern", value)
fun AttrsBuilder<HTMLInputElement>.placeholder(value: String) = fun AttrsScope<HTMLInputElement>.placeholder(value: String) =
attr("placeholder", value) attr("placeholder", value)
fun AttrsBuilder<HTMLInputElement>.readOnly() = fun AttrsScope<HTMLInputElement>.readOnly() =
attr("readonly", "") attr("readonly", "")
fun AttrsBuilder<HTMLInputElement>.required(value: Boolean = true) = fun AttrsScope<HTMLInputElement>.required(value: Boolean = true) =
attr("required", value.toString()) attr("required", value.toString())
fun AttrsBuilder<HTMLInputElement>.size(value: Int) = fun AttrsScope<HTMLInputElement>.size(value: Int) =
attr("size", value.toString()) attr("size", value.toString())
fun AttrsBuilder<HTMLInputElement>.src(value: String) = fun AttrsScope<HTMLInputElement>.src(value: String) =
attr("src", value) // image only attr("src", value) // image only
fun AttrsBuilder<HTMLInputElement>.step(value: Number) = fun AttrsScope<HTMLInputElement>.step(value: Number) =
attr("step", value.toString()) // numeric types only attr("step", value.toString()) // numeric types only
/* Option attributes */ /* Option attributes */
fun AttrsBuilder<HTMLOptionElement>.value(value: String) = fun AttrsScope<HTMLOptionElement>.value(value: String) =
attr("value", value) attr("value", value)
fun AttrsBuilder<HTMLOptionElement>.disabled() = fun AttrsScope<HTMLOptionElement>.disabled() =
attr("disabled", "") attr("disabled", "")
fun AttrsBuilder<HTMLOptionElement>.selected() = fun AttrsScope<HTMLOptionElement>.selected() =
attr("selected", "") attr("selected", "")
fun AttrsBuilder<HTMLOptionElement>.label(value: String) = fun AttrsScope<HTMLOptionElement>.label(value: String) =
attr("label", value) attr("label", value)
/* Select attributes */ /* Select attributes */
fun AttrsBuilder<HTMLSelectElement>.autoComplete(value: AutoComplete) = fun AttrsScope<HTMLSelectElement>.autoComplete(value: AutoComplete) =
attr("autocomplete", value.unsafeCast<String>()) attr("autocomplete", value.unsafeCast<String>())
fun AttrsBuilder<HTMLSelectElement>.autofocus() = fun AttrsScope<HTMLSelectElement>.autofocus() =
attr("autofocus", "") attr("autofocus", "")
fun AttrsBuilder<HTMLSelectElement>.disabled() = fun AttrsScope<HTMLSelectElement>.disabled() =
attr("disabled", "") attr("disabled", "")
fun AttrsBuilder<HTMLSelectElement>.form(formId: String) = fun AttrsScope<HTMLSelectElement>.form(formId: String) =
attr("form", formId) attr("form", formId)
fun AttrsBuilder<HTMLSelectElement>.multiple() = fun AttrsScope<HTMLSelectElement>.multiple() =
attr("multiple", "") attr("multiple", "")
fun AttrsBuilder<HTMLSelectElement>.name(value: String) = fun AttrsScope<HTMLSelectElement>.name(value: String) =
attr("name", value) attr("name", value)
fun AttrsBuilder<HTMLSelectElement>.required() = fun AttrsScope<HTMLSelectElement>.required() =
attr("required", "") attr("required", "")
fun AttrsBuilder<HTMLSelectElement>.size(numberOfRows: Int) = fun AttrsScope<HTMLSelectElement>.size(numberOfRows: Int) =
attr("size", numberOfRows.toString()) attr("size", numberOfRows.toString())
/* OptGroup attributes */ /* OptGroup attributes */
fun AttrsBuilder<HTMLOptGroupElement>.label(value: String) = fun AttrsScope<HTMLOptGroupElement>.label(value: String) =
attr("label", value) attr("label", value)
fun AttrsBuilder<HTMLOptGroupElement>.disabled() = fun AttrsScope<HTMLOptGroupElement>.disabled() =
attr("disabled", "") attr("disabled", "")
/* TextArea attributes */ /* TextArea attributes */
fun AttrsBuilder<HTMLTextAreaElement>.autoComplete(value: AutoComplete) = fun AttrsScope<HTMLTextAreaElement>.autoComplete(value: AutoComplete) =
attr("autocomplete", value.unsafeCast<String>()) attr("autocomplete", value.unsafeCast<String>())
fun AttrsBuilder<HTMLTextAreaElement>.autoFocus() = fun AttrsScope<HTMLTextAreaElement>.autoFocus() =
attr("autofocus", "") attr("autofocus", "")
fun AttrsBuilder<HTMLTextAreaElement>.cols(value: Int) = fun AttrsScope<HTMLTextAreaElement>.cols(value: Int) =
attr("cols", value.toString()) attr("cols", value.toString())
fun AttrsBuilder<HTMLTextAreaElement>.disabled() = fun AttrsScope<HTMLTextAreaElement>.disabled() =
attr("disabled", "") attr("disabled", "")
fun AttrsBuilder<HTMLTextAreaElement>.form(formId: String) = fun AttrsScope<HTMLTextAreaElement>.form(formId: String) =
attr("form", formId) attr("form", formId)
fun AttrsBuilder<HTMLTextAreaElement>.maxLength(value: Int) = fun AttrsScope<HTMLTextAreaElement>.maxLength(value: Int) =
attr("maxlength", value.toString()) attr("maxlength", value.toString())
fun AttrsBuilder<HTMLTextAreaElement>.minLength(value: Int) = fun AttrsScope<HTMLTextAreaElement>.minLength(value: Int) =
attr("minlength", value.toString()) attr("minlength", value.toString())
fun AttrsBuilder<HTMLTextAreaElement>.name(value: String) = fun AttrsScope<HTMLTextAreaElement>.name(value: String) =
attr("name", value) attr("name", value)
fun AttrsBuilder<HTMLTextAreaElement>.placeholder(value: String) = fun AttrsScope<HTMLTextAreaElement>.placeholder(value: String) =
attr("placeholder", value) attr("placeholder", value)
fun AttrsBuilder<HTMLTextAreaElement>.readOnly() = fun AttrsScope<HTMLTextAreaElement>.readOnly() =
attr("readonly", "") attr("readonly", "")
fun AttrsBuilder<HTMLTextAreaElement>.required() = fun AttrsScope<HTMLTextAreaElement>.required() =
attr("required", "") attr("required", "")
fun AttrsBuilder<HTMLTextAreaElement>.rows(value: Int) = fun AttrsScope<HTMLTextAreaElement>.rows(value: Int) =
attr("rows", value.toString()) attr("rows", value.toString())
fun AttrsBuilder<HTMLTextAreaElement>.wrap(value: TextAreaWrap) = fun AttrsScope<HTMLTextAreaElement>.wrap(value: TextAreaWrap) =
attr("wrap", value.str) attr("wrap", value.str)
/* Img attributes */ /* Img attributes */
fun AttrsBuilder<HTMLImageElement>.src(value: String): AttrsBuilder<HTMLImageElement> = fun AttrsScope<HTMLImageElement>.src(value: String): AttrsScope<HTMLImageElement> =
attr("src", value) attr("src", value)
fun AttrsBuilder<HTMLImageElement>.alt(value: String): AttrsBuilder<HTMLImageElement> = fun AttrsScope<HTMLImageElement>.alt(value: String): AttrsScope<HTMLImageElement> =
attr("alt", value) attr("alt", value)
@ -313,19 +313,19 @@ internal val setCheckedValue: (HTMLInputElement, Boolean) -> Unit = { e, v ->
} }
/* Img attributes */ /* Img attributes */
fun AttrsBuilder<HTMLLabelElement>.forId(value: String): AttrsBuilder<HTMLLabelElement> = fun AttrsScope<HTMLLabelElement>.forId(value: String): AttrsScope<HTMLLabelElement> =
attr("for", value) attr("for", value)
/* Table attributes */ /* Table attributes */
fun AttrsBuilder<HTMLTableColElement>.span(value: Int): AttrsBuilder<HTMLTableColElement> = fun AttrsScope<HTMLTableColElement>.span(value: Int): AttrsScope<HTMLTableColElement> =
attr("span", value.toString()) attr("span", value.toString())
fun AttrsBuilder<HTMLTableCellElement>.scope(value: Scope): AttrsBuilder<HTMLTableCellElement> = fun AttrsScope<HTMLTableCellElement>.scope(value: Scope): AttrsScope<HTMLTableCellElement> =
attr("scope", value.str) attr("scope", value.str)
fun AttrsBuilder<HTMLTableCellElement>.colspan(value: Int): AttrsBuilder<HTMLTableCellElement> = fun AttrsScope<HTMLTableCellElement>.colspan(value: Int): AttrsScope<HTMLTableCellElement> =
attr("colspan", value.toString()) attr("colspan", value.toString())
fun AttrsBuilder<HTMLTableCellElement>.rowspan(value: Int): AttrsBuilder<HTMLTableCellElement> = fun AttrsScope<HTMLTableCellElement>.rowspan(value: Int): AttrsScope<HTMLTableCellElement> =
attr("rowspan", value.toString()) attr("rowspan", value.toString())

128
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/AttrsBuilder.kt → web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/AttrsScope.kt
Unescape View File

@ -2,35 +2,35 @@ package org.jetbrains.compose.web.attributes
import androidx.compose.runtime.DisposableEffectResult import androidx.compose.runtime.DisposableEffectResult
import androidx.compose.runtime.DisposableEffectScope import androidx.compose.runtime.DisposableEffectScope
import org.jetbrains.compose.web.css.StyleBuilder import org.jetbrains.compose.web.css.StyleScope
import org.jetbrains.compose.web.css.StyleBuilderImpl import org.jetbrains.compose.web.css.StyleScopeBuilder
import org.jetbrains.compose.web.internal.runtime.ComposeWebInternalApi
import org.w3c.dom.Element import org.w3c.dom.Element
import org.w3c.dom.HTMLElement import org.w3c.dom.HTMLElement
/** /**
* [AttrsBuilder] is a class that is used (as a builder context, that is as AttrsBuilder<T>.() -> Unit) * [AttrsScope] is a class that is used (as a builder context, that is as AttrsBuilder<T>.() -> Unit)
* in all DOM-element creating API calls. It's used for adding attributes to the element created, * in all DOM-element creating API calls. It's used for adding attributes to the element created,
* adding inline style values (via [style]) and attaching events to the element (since AttrsBuilder * adding inline style values (via [style]) and attaching events to the element (since AttrsBuilder
* is an [EventsListenerBuilder]) * is an [EventsListenerScope])
* *
* In that aspect the most important method is [attr]. Setting the most frequently attributes, like [id], [tabIndex] * In that aspect the most important method is [attr]. Setting the most frequently attributes, like [id], [tabIndex]
* are extracted to a separate methods. * are extracted to a separate methods.
* *
*/ */
open class AttrsBuilder<TElement : Element> : EventsListenerBuilder() { interface AttrsScope<TElement : Element>: EventsListenerScope {
internal val attributesMap = mutableMapOf<String, String>() @ComposeWebInternalApi
internal val styleBuilder = StyleBuilderImpl() val attributesMap: Map<String, String>
@ComposeWebInternalApi
val styleScope: StyleScope
internal val propertyUpdates = mutableListOf<Pair<(Element, Any) -> Unit, Any>>() @ComposeWebInternalApi
internal var refEffect: (DisposableEffectScope.(TElement) -> DisposableEffectResult)? = null val propertyUpdates: List<Pair<(Element, Any) -> Unit, Any>>
@ComposeWebInternalApi
internal var inputControlledValueSet = false var refEffect: (DisposableEffectScope.(TElement) -> DisposableEffectResult)?
internal var inputDefaultValueSet = false
internal var inputControlledCheckedSet = false
internal var inputDefaultCheckedSet = false
/** /**
* [style] add inline CSS-style properties to the element via [StyleBuilder] context * [style] add inline CSS-style properties to the element via [StyleScope] context
* *
* Example: * Example:
* ``` * ```
@ -39,8 +39,8 @@ open class AttrsBuilder<TElement : Element> : EventsListenerBuilder() {
* }) * })
* ``` * ```
*/ */
fun style(builder: StyleBuilder.() -> Unit) { fun style(builder: StyleScope.() -> Unit) {
styleBuilder.apply(builder) styleScope.apply(builder)
} }
/** /**
@ -78,7 +78,70 @@ open class AttrsBuilder<TElement : Element> : EventsListenerBuilder() {
* *
* Under the hood, `ref` uses [DisposableEffect](https://developer.android.com/jetpack/compose/side-effects#disposableeffect) * Under the hood, `ref` uses [DisposableEffect](https://developer.android.com/jetpack/compose/side-effects#disposableeffect)
*/ */
fun ref(effect: DisposableEffectScope.(TElement) -> DisposableEffectResult) { fun ref(effect: DisposableEffectScope.(TElement) -> DisposableEffectResult)
/**
* [attr] adds arbitrary attribute to the Element.
* If it called twice for the same attribute name, attribute value will be resolved to the last call.
*
* @param attr - the name of the attribute
* @param value - the value of the attribute
*
* For boolean attributes cast boolean value to String and pass it as value.
*/
fun attr(attr: String, value: String): AttrsScope<TElement>
/**
* [prop] allows setting values of element's properties which can't be set by ussing [attr].
* [update] is a lambda with two parameters: `element` and `value`. `element` is a reference to a native element.
* Some examples of properties that can set using [prop]: `value`, `checked`, `innerText`.
*
* Unlike [ref], lambda passed to [prop] will be invoked every time when AttrsBuilder being called during recomposition.
* [prop] is not supposed to be used for adding listeners, subscriptions, etc.
* Also see [ref].
*
* Code Example:
* ```
* Input(type = InputType.Text, attrs = {
* // This is only an example. One doesn't need to set `value` like this, since [Input] has `value(v: String)`
* prop({ element: HTMLInputElement, value: String -> element.value = value }, "someTextInputValue")
* })
* ```
*/
@Suppress("UNCHECKED_CAST")
fun <E : HTMLElement, V> prop(update: (E, V) -> Unit, value: V)
fun copyFrom(attrsScope: AttrsScope<TElement>)
companion object {
const val CLASS = "class"
const val ID = "id"
const val HIDDEN = "hidden"
const val TITLE = "title"
const val DIR = "dir"
const val DRAGGABLE = "draggable"
const val CONTENT_EDITABLE = "contenteditable"
const val LANG = "lang"
const val TAB_INDEX = "tabindex"
const val SPELLCHECK = "spellcheck"
}
}
open class AttrsScopeBuilder<TElement : Element> : AttrsScope<TElement>, EventsListenerScope by EventsListenerScopeBuilder() {
override val attributesMap = mutableMapOf<String, String>()
override val styleScope: StyleScope = StyleScopeBuilder()
override val propertyUpdates = mutableListOf<Pair<(Element, Any) -> Unit, Any>>()
override var refEffect: (DisposableEffectScope.(TElement) -> DisposableEffectResult)? = null
/**
* [ref] can be used to retrieve a reference to a html element.
* The lambda that `ref` takes in is not Composable. It will be called only once when an element added into a composition.
* Likewise, the lambda passed in `onDispose` will be called only once when an element leaves the composition.
*
* Under the hood, `ref` uses [DisposableEffect](https://developer.android.com/jetpack/compose/side-effects#disposableeffect)
*/
override fun ref(effect: DisposableEffectScope.(TElement) -> DisposableEffectResult) {
this.refEffect = effect this.refEffect = effect
} }
@ -91,7 +154,7 @@ open class AttrsBuilder<TElement : Element> : EventsListenerBuilder() {
* *
* For boolean attributes cast boolean value to String and pass it as value. * For boolean attributes cast boolean value to String and pass it as value.
*/ */
fun attr(attr: String, value: String): AttrsBuilder<TElement> { override fun attr(attr: String, value: String): AttrsScope<TElement> {
attributesMap[attr] = value attributesMap[attr] = value
return this return this
} }
@ -114,7 +177,7 @@ open class AttrsBuilder<TElement : Element> : EventsListenerBuilder() {
* ``` * ```
*/ */
@Suppress("UNCHECKED_CAST") @Suppress("UNCHECKED_CAST")
fun <E : HTMLElement, V> prop(update: (E, V) -> Unit, value: V) { override fun <E : HTMLElement, V> prop(update: (E, V) -> Unit, value: V) {
propertyUpdates.add((update to value) as Pair<(Element, Any) -> Unit, Any>) propertyUpdates.add((update to value) as Pair<(Element, Any) -> Unit, Any>)
} }
@ -122,27 +185,14 @@ open class AttrsBuilder<TElement : Element> : EventsListenerBuilder() {
return attributesMap return attributesMap
} }
internal fun copyFrom(attrsBuilder: AttrsBuilder<TElement>) { override fun copyFrom(attrsScope: AttrsScope<TElement>) {
refEffect = attrsBuilder.refEffect refEffect = attrsScope.refEffect
styleBuilder.copyFrom(attrsBuilder.styleBuilder) styleScope.copyFrom(attrsScope.styleScope)
attributesMap.putAll(attrsBuilder.attributesMap) attributesMap.putAll(attrsScope.attributesMap)
propertyUpdates.addAll(attrsBuilder.propertyUpdates) propertyUpdates.addAll(attrsScope.propertyUpdates)
copyListenersFrom(attrsBuilder) copyListenersFrom(attrsScope)
}
companion object {
const val CLASS = "class"
const val ID = "id"
const val HIDDEN = "hidden"
const val TITLE = "title"
const val DIR = "dir"
const val DRAGGABLE = "draggable"
const val CONTENT_EDITABLE = "contenteditable"
const val LANG = "lang"
const val TAB_INDEX = "tabindex"
const val SPELLCHECK = "spellcheck"
} }
} }

110
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/EventsListenerBuilder.kt → web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/EventsListenerScope.kt
Unescape View File

@ -5,97 +5,106 @@ import androidx.compose.web.events.SyntheticEvent
import androidx.compose.web.events.SyntheticMouseEvent import androidx.compose.web.events.SyntheticMouseEvent
import androidx.compose.web.events.SyntheticWheelEvent import androidx.compose.web.events.SyntheticWheelEvent
import org.jetbrains.compose.web.events.* import org.jetbrains.compose.web.events.*
import org.w3c.dom.HTMLFormElement import org.jetbrains.compose.web.internal.runtime.ComposeWebInternalApi
import org.w3c.dom.events.EventTarget import org.w3c.dom.events.EventTarget
private typealias SyntheticMouseEventListener = (SyntheticMouseEvent) -> Unit private typealias SyntheticMouseEventListener = (SyntheticMouseEvent) -> Unit
private typealias SyntheticWheelEventListener = (SyntheticWheelEvent) -> Unit private typealias SyntheticWheelEventListener = (SyntheticWheelEvent) -> Unit
private typealias SyntheticDragEventListener = (SyntheticDragEvent) -> Unit private typealias SyntheticDragEventListener = (SyntheticDragEvent) -> Unit
@Deprecated(
message = "Renamed to EventsListenerScopeBuilder",
replaceWith = ReplaceWith("EventsListenerScopeBuilder", "org.jetbrains.compose.web.attributes.EventsListenerScopeBuilder")
)
typealias EventsListenerBuilder = EventsListenerScopeBuilder
/** /**
* [EventsListenerBuilder] is used most often not directly but via [AttrsBuilder]. * [EventsListenerScope] is used most often not directly but via [AttrsScope].
* Its purpose is to add events to the element. For all most frequently used events there * Its purpose is to add events to the element. For all most frequently used events there
* exist dedicated method. In case you need to support event that doesn't have such method, * exist dedicated method. In case you need to support event that doesn't have such method,
* use [addEventListener] * use [addEventListener]
*/ */
open class EventsListenerBuilder { interface EventsListenerScope {
@ComposeWebInternalApi
val listeners: List<SyntheticEventListener<*>>
protected val listeners = mutableListOf<SyntheticEventListener<*>>() @ComposeWebInternalApi
fun registerEventListener(listener: SyntheticEventListener<*>)
/* Mouse Events */ /* Mouse Events */
fun onContextMenu(listener: SyntheticMouseEventListener) { fun onContextMenu(listener: SyntheticMouseEventListener) {
listeners.add(MouseEventListener(CONTEXTMENU, listener)) registerEventListener(MouseEventListener(CONTEXTMENU, listener))
} }
fun onClick(listener: SyntheticMouseEventListener) { fun onClick(listener: SyntheticMouseEventListener) {
listeners.add(MouseEventListener(CLICK, listener)) registerEventListener(MouseEventListener(CLICK, listener))
} }
fun onDoubleClick(listener: SyntheticMouseEventListener) { fun onDoubleClick(listener: SyntheticMouseEventListener) {
listeners.add(MouseEventListener(DBLCLICK, listener)) registerEventListener(MouseEventListener(DBLCLICK, listener))
} }
fun onMouseDown(listener: SyntheticMouseEventListener) { fun onMouseDown(listener: SyntheticMouseEventListener) {
listeners.add(MouseEventListener(MOUSEDOWN, listener)) registerEventListener(MouseEventListener(MOUSEDOWN, listener))
} }
fun onMouseUp(listener: SyntheticMouseEventListener) { fun onMouseUp(listener: SyntheticMouseEventListener) {
listeners.add(MouseEventListener(MOUSEUP, listener)) registerEventListener(MouseEventListener(MOUSEUP, listener))
} }
fun onMouseEnter(listener: SyntheticMouseEventListener) { fun onMouseEnter(listener: SyntheticMouseEventListener) {
listeners.add(MouseEventListener(MOUSEENTER, listener)) registerEventListener(MouseEventListener(MOUSEENTER, listener))
} }
fun onMouseLeave(listener: SyntheticMouseEventListener) { fun onMouseLeave(listener: SyntheticMouseEventListener) {
listeners.add(MouseEventListener(MOUSELEAVE, listener)) registerEventListener(MouseEventListener(MOUSELEAVE, listener))
} }
fun onMouseMove(listener: SyntheticMouseEventListener) { fun onMouseMove(listener: SyntheticMouseEventListener) {
listeners.add(MouseEventListener(MOUSEMOVE, listener)) registerEventListener(MouseEventListener(MOUSEMOVE, listener))
} }
fun onMouseOut(listener: SyntheticMouseEventListener) { fun onMouseOut(listener: SyntheticMouseEventListener) {
listeners.add(MouseEventListener(MOUSEOUT, listener)) registerEventListener(MouseEventListener(MOUSEOUT, listener))
} }
fun onMouseOver(listener: SyntheticMouseEventListener) { fun onMouseOver(listener: SyntheticMouseEventListener) {
listeners.add(MouseEventListener(MOUSEOVER, listener)) registerEventListener(MouseEventListener(MOUSEOVER, listener))
} }
fun onWheel(listener: SyntheticWheelEventListener) { fun onWheel(listener: SyntheticWheelEventListener) {
listeners.add(MouseWheelEventListener(WHEEL, listener)) registerEventListener(MouseWheelEventListener(WHEEL, listener))
} }
/* Drag Events */ /* Drag Events */
fun onDrag(listener: SyntheticDragEventListener) { fun onDrag(listener: SyntheticDragEventListener) {
listeners.add(DragEventListener(DRAG, listener)) registerEventListener(DragEventListener(DRAG, listener))
} }
fun onDrop(listener: SyntheticDragEventListener) { fun onDrop(listener: SyntheticDragEventListener) {
listeners.add(DragEventListener(DROP, listener)) registerEventListener(DragEventListener(DROP, listener))
} }
fun onDragStart(listener: SyntheticDragEventListener) { fun onDragStart(listener: SyntheticDragEventListener) {
listeners.add(DragEventListener(DRAGSTART, listener)) registerEventListener(DragEventListener(DRAGSTART, listener))
} }
fun onDragEnd(listener: SyntheticDragEventListener) { fun onDragEnd(listener: SyntheticDragEventListener) {
listeners.add(DragEventListener(DRAGEND, listener)) registerEventListener(DragEventListener(DRAGEND, listener))
} }
fun onDragOver(listener: SyntheticDragEventListener) { fun onDragOver(listener: SyntheticDragEventListener) {
listeners.add(DragEventListener(DRAGOVER, listener)) registerEventListener(DragEventListener(DRAGOVER, listener))
} }
fun onDragEnter(listener: SyntheticDragEventListener) { fun onDragEnter(listener: SyntheticDragEventListener) {
listeners.add(DragEventListener(DRAGENTER, listener)) registerEventListener(DragEventListener(DRAGENTER, listener))
} }
fun onDragLeave(listener: SyntheticDragEventListener) { fun onDragLeave(listener: SyntheticDragEventListener) {
listeners.add(DragEventListener(DRAGLEAVE, listener)) registerEventListener(DragEventListener(DRAGLEAVE, listener))
} }
/* End of Drag Events */ /* End of Drag Events */
@ -103,15 +112,15 @@ open class EventsListenerBuilder {
/* Clipboard Events */ /* Clipboard Events */
fun onCopy(listener: (SyntheticClipboardEvent) -> Unit) { fun onCopy(listener: (SyntheticClipboardEvent) -> Unit) {
listeners.add(ClipboardEventListener(COPY, listener)) registerEventListener(ClipboardEventListener(COPY, listener))
} }
fun onCut(listener: (SyntheticClipboardEvent) -> Unit) { fun onCut(listener: (SyntheticClipboardEvent) -> Unit) {
listeners.add(ClipboardEventListener(CUT, listener)) registerEventListener(ClipboardEventListener(CUT, listener))
} }
fun onPaste(listener: (SyntheticClipboardEvent) -> Unit) { fun onPaste(listener: (SyntheticClipboardEvent) -> Unit) {
listeners.add(ClipboardEventListener(PASTE, listener)) registerEventListener(ClipboardEventListener(PASTE, listener))
} }
/* End of Clipboard Events */ /* End of Clipboard Events */
@ -119,11 +128,11 @@ open class EventsListenerBuilder {
/* Keyboard Events */ /* Keyboard Events */
fun onKeyDown(listener: (SyntheticKeyboardEvent) -> Unit) { fun onKeyDown(listener: (SyntheticKeyboardEvent) -> Unit) {
listeners.add(KeyboardEventListener(KEYDOWN, listener)) registerEventListener(KeyboardEventListener(KEYDOWN, listener))
} }
fun onKeyUp(listener: (SyntheticKeyboardEvent) -> Unit) { fun onKeyUp(listener: (SyntheticKeyboardEvent) -> Unit) {
listeners.add(KeyboardEventListener(KEYUP, listener)) registerEventListener(KeyboardEventListener(KEYUP, listener))
} }
/* End of Keyboard Events */ /* End of Keyboard Events */
@ -131,19 +140,19 @@ open class EventsListenerBuilder {
/* Focus Events */ /* Focus Events */
fun onFocus(listener: (SyntheticFocusEvent) -> Unit) { fun onFocus(listener: (SyntheticFocusEvent) -> Unit) {
listeners.add(FocusEventListener(FOCUS, listener)) registerEventListener(FocusEventListener(FOCUS, listener))
} }
fun onBlur(listener: (SyntheticFocusEvent) -> Unit) { fun onBlur(listener: (SyntheticFocusEvent) -> Unit) {
listeners.add(FocusEventListener(BLUR, listener)) registerEventListener(FocusEventListener(BLUR, listener))
} }
fun onFocusIn(listener: (SyntheticFocusEvent) -> Unit) { fun onFocusIn(listener: (SyntheticFocusEvent) -> Unit) {
listeners.add(FocusEventListener(FOCUSIN, listener)) registerEventListener(FocusEventListener(FOCUSIN, listener))
} }
fun onFocusOut(listener: (SyntheticFocusEvent) -> Unit) { fun onFocusOut(listener: (SyntheticFocusEvent) -> Unit) {
listeners.add(FocusEventListener(FOCUSOUT, listener)) registerEventListener(FocusEventListener(FOCUSOUT, listener))
} }
/* End of Focus Events */ /* End of Focus Events */
@ -151,19 +160,19 @@ open class EventsListenerBuilder {
/* Touch Events */ /* Touch Events */
fun onTouchCancel(listener: (SyntheticTouchEvent) -> Unit) { fun onTouchCancel(listener: (SyntheticTouchEvent) -> Unit) {
listeners.add(TouchEventListener(TOUCHCANCEL, listener)) registerEventListener(TouchEventListener(TOUCHCANCEL, listener))
} }
fun onTouchMove(listener: (SyntheticTouchEvent) -> Unit) { fun onTouchMove(listener: (SyntheticTouchEvent) -> Unit) {
listeners.add(TouchEventListener(TOUCHMOVE, listener)) registerEventListener(TouchEventListener(TOUCHMOVE, listener))
} }
fun onTouchEnd(listener: (SyntheticTouchEvent) -> Unit) { fun onTouchEnd(listener: (SyntheticTouchEvent) -> Unit) {
listeners.add(TouchEventListener(TOUCHEND, listener)) registerEventListener(TouchEventListener(TOUCHEND, listener))
} }
fun onTouchStart(listener: (SyntheticTouchEvent) -> Unit) { fun onTouchStart(listener: (SyntheticTouchEvent) -> Unit) {
listeners.add(TouchEventListener(TOUCHSTART, listener)) registerEventListener(TouchEventListener(TOUCHSTART, listener))
} }
/* End of Touch Events */ /* End of Touch Events */
@ -171,24 +180,24 @@ open class EventsListenerBuilder {
/* Animation Events */ /* Animation Events */
fun onAnimationEnd(listener: (SyntheticAnimationEvent) -> Unit) { fun onAnimationEnd(listener: (SyntheticAnimationEvent) -> Unit) {
listeners.add(AnimationEventListener(ANIMATIONEND, listener)) registerEventListener(AnimationEventListener(ANIMATIONEND, listener))
} }
fun onAnimationIteration(listener: (SyntheticAnimationEvent) -> Unit) { fun onAnimationIteration(listener: (SyntheticAnimationEvent) -> Unit) {
listeners.add(AnimationEventListener(ANIMATIONITERATION, listener)) registerEventListener(AnimationEventListener(ANIMATIONITERATION, listener))
} }
fun onAnimationStart(listener: (SyntheticAnimationEvent) -> Unit) { fun onAnimationStart(listener: (SyntheticAnimationEvent) -> Unit) {
listeners.add(AnimationEventListener(ANIMATIONSTART, listener)) registerEventListener(AnimationEventListener(ANIMATIONSTART, listener))
} }
/* End of Animation Events */ /* End of Animation Events */
fun onScroll(listener: (SyntheticEvent<EventTarget>) -> Unit) { fun onScroll(listener: (SyntheticEvent<EventTarget>) -> Unit) {
listeners.add(SyntheticEventListener(SCROLL, listener)) registerEventListener(SyntheticEventListener(SCROLL, listener))
} }
internal fun collectListeners(): List<SyntheticEventListener<*>> = listeners fun collectListeners(): List<SyntheticEventListener<*>> = listeners
/** /**
* [addEventListener] used for adding arbitrary events to the element. It resembles the standard DOM addEventListener method * [addEventListener] used for adding arbitrary events to the element. It resembles the standard DOM addEventListener method
@ -200,19 +209,18 @@ open class EventsListenerBuilder {
eventName: String, eventName: String,
listener: (T) -> Unit listener: (T) -> Unit
) { ) {
listeners.add(SyntheticEventListener(eventName, listener)) registerEventListener(SyntheticEventListener(eventName, listener))
} }
fun addEventListener( fun addEventListener(
eventName: String, eventName: String,
listener: (SyntheticEvent<EventTarget>) -> Unit listener: (SyntheticEvent<EventTarget>) -> Unit
) { ) {
listeners.add(SyntheticEventListener(eventName, listener)) registerEventListener(SyntheticEventListener(eventName, listener))
} }
internal fun copyListenersFrom(from: EventsListenerBuilder) { @ComposeWebInternalApi
listeners.addAll(from.listeners) fun copyListenersFrom(from: EventsListenerScope)
}
companion object { companion object {
const val COPY = "copy" const val COPY = "copy"
@ -267,3 +275,15 @@ open class EventsListenerBuilder {
const val RESET = "reset" const val RESET = "reset"
} }
} }
open class EventsListenerScopeBuilder: EventsListenerScope {
override val listeners: MutableList<SyntheticEventListener<*>> = mutableListOf()
override fun registerEventListener(listener: SyntheticEventListener<*>) {
listeners.add(listener)
}
override fun copyListenersFrom(from: EventsListenerScope) {
listeners.addAll(from.listeners)
}
}

6
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/SyntheticEventListener.kt
Unescape View File

@ -5,9 +5,9 @@ import androidx.compose.web.events.SyntheticDragEvent
import androidx.compose.web.events.SyntheticEvent import androidx.compose.web.events.SyntheticEvent
import androidx.compose.web.events.SyntheticMouseEvent import androidx.compose.web.events.SyntheticMouseEvent
import androidx.compose.web.events.SyntheticWheelEvent import androidx.compose.web.events.SyntheticWheelEvent
import org.jetbrains.compose.web.attributes.EventsListenerBuilder.Companion.CHANGE import org.jetbrains.compose.web.attributes.EventsListenerScope.Companion.CHANGE
import org.jetbrains.compose.web.attributes.EventsListenerBuilder.Companion.INPUT import org.jetbrains.compose.web.attributes.EventsListenerScope.Companion.INPUT
import org.jetbrains.compose.web.attributes.EventsListenerBuilder.Companion.SELECT import org.jetbrains.compose.web.attributes.EventsListenerScope.Companion.SELECT
import org.jetbrains.compose.web.events.* import org.jetbrains.compose.web.events.*
import org.jetbrains.compose.web.internal.runtime.ComposeWebInternalApi import org.jetbrains.compose.web.internal.runtime.ComposeWebInternalApi
import org.jetbrains.compose.web.internal.runtime.NamedEventListener import org.jetbrains.compose.web.internal.runtime.NamedEventListener

37
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/builders/InputAttrsBuilder.kt → web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/builders/InputAttrsScope.kt
Unescape View File

@ -7,13 +7,22 @@ package org.jetbrains.compose.web.attributes.builders
import androidx.compose.web.events.SyntheticEvent import androidx.compose.web.events.SyntheticEvent
import org.jetbrains.compose.web.attributes.* import org.jetbrains.compose.web.attributes.*
import org.jetbrains.compose.web.attributes.EventsListenerScope.Companion.BEFOREINPUT
import org.jetbrains.compose.web.attributes.EventsListenerScope.Companion.INPUT
import org.jetbrains.compose.web.attributes.EventsListenerScope.Companion.INVALID
import org.jetbrains.compose.web.events.SyntheticChangeEvent import org.jetbrains.compose.web.events.SyntheticChangeEvent
import org.jetbrains.compose.web.events.SyntheticInputEvent import org.jetbrains.compose.web.events.SyntheticInputEvent
import org.jetbrains.compose.web.events.SyntheticSelectEvent import org.jetbrains.compose.web.events.SyntheticSelectEvent
import org.w3c.dom.HTMLInputElement import org.w3c.dom.HTMLInputElement
@Deprecated(
message = "Renamed to InputAttrsScope<T>",
replaceWith = ReplaceWith("InputAttrsScope", "org.jetbrains.compose.web.attributes.builders.InputAttrsScope")
)
typealias InputAttrsBuilder<T> = InputAttrsScope<T>
/** /**
* An extension of [AttrsBuilder]. * An extension of [AttrsScope].
* This class provides a set of methods specific for [Input] element: * This class provides a set of methods specific for [Input] element:
* *
* [value] - sets the current input's value. * [value] - sets the current input's value.
@ -28,11 +37,11 @@ import org.w3c.dom.HTMLInputElement
* [onBeforeInput] - add `beforeinput` event listener * [onBeforeInput] - add `beforeinput` event listener
* [onSelect] - add `select` event listener * [onSelect] - add `select` event listener
*/ */
class InputAttrsBuilder<ValueType>( class InputAttrsScope<ValueType>(
val inputType: InputType<ValueType> val inputType: InputType<ValueType>
) : AttrsBuilder<HTMLInputElement>() { ) : AttrsScopeBuilder<HTMLInputElement>() {
fun value(value: String): InputAttrsBuilder<ValueType> { fun value(value: String): InputAttrsScope<ValueType> {
when (inputType) { when (inputType) {
InputType.Checkbox, InputType.Checkbox,
InputType.Radio, InputType.Radio,
@ -43,27 +52,27 @@ class InputAttrsBuilder<ValueType>(
return this return this
} }
fun value(value: Number): InputAttrsBuilder<ValueType> { fun value(value: Number): InputAttrsScope<ValueType> {
value(value.toString()) value(value.toString())
return this return this
} }
fun checked(checked: Boolean): InputAttrsBuilder<ValueType> { fun checked(checked: Boolean): InputAttrsScope<ValueType> {
prop(setCheckedValue, checked) prop(setCheckedValue, checked)
return this return this
} }
fun defaultChecked(): InputAttrsBuilder<ValueType> { fun defaultChecked(): InputAttrsScope<ValueType> {
attr("checked", "") attr("checked", "")
return this return this
} }
fun defaultValue(value: String): InputAttrsBuilder<ValueType> { fun defaultValue(value: String): InputAttrsScope<ValueType> {
attr("value", value) attr("value", value)
return this return this
} }
fun defaultValue(value: Number): InputAttrsBuilder<ValueType> { fun defaultValue(value: Number): InputAttrsScope<ValueType> {
attr("value", value.toString()) attr("value", value.toString())
return this return this
} }
@ -77,25 +86,25 @@ class InputAttrsBuilder<ValueType>(
fun onInput( fun onInput(
listener: (SyntheticInputEvent<ValueType, HTMLInputElement>) -> Unit listener: (SyntheticInputEvent<ValueType, HTMLInputElement>) -> Unit
) { ) {
listeners.add(InputEventListener(eventName = INPUT, inputType, listener)) registerEventListener(InputEventListener(eventName = INPUT, inputType, listener))
} }
fun onChange( fun onChange(
listener: (SyntheticChangeEvent<ValueType, HTMLInputElement>) -> Unit listener: (SyntheticChangeEvent<ValueType, HTMLInputElement>) -> Unit
) { ) {
listeners.add(ChangeEventListener(inputType, listener)) registerEventListener(ChangeEventListener(inputType, listener))
} }
fun onBeforeInput( fun onBeforeInput(
listener: (SyntheticInputEvent<ValueType, HTMLInputElement>) -> Unit listener: (SyntheticInputEvent<ValueType, HTMLInputElement>) -> Unit
) { ) {
listeners.add(InputEventListener(eventName = BEFOREINPUT, inputType, listener)) registerEventListener(InputEventListener(eventName = BEFOREINPUT, inputType, listener))
} }
fun onSelect( fun onSelect(
listener: (SyntheticSelectEvent<HTMLInputElement>) -> Unit listener: (SyntheticSelectEvent<HTMLInputElement>) -> Unit
) { ) {
listeners.add(SelectEventListener(listener)) registerEventListener(SelectEventListener(listener))
} }
} }
@ -105,5 +114,3 @@ internal external interface JsWeakMap {
fun has(key: Any): Boolean fun has(key: Any): Boolean
fun set(key: Any, value: Any): JsWeakMap fun set(key: Any, value: Any): JsWeakMap
} }

18
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/builders/SelectAttrsBuilder.kt → web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/builders/SelectAttrsScope.kt
Unescape View File

@ -5,27 +5,33 @@
package androidx.compose.web.attributes package androidx.compose.web.attributes
import org.jetbrains.compose.web.attributes.AttrsBuilder import org.jetbrains.compose.web.attributes.AttrsScopeBuilder
import org.jetbrains.compose.web.attributes.EventsListenerBuilder.Companion.CHANGE import org.jetbrains.compose.web.attributes.EventsListenerScope.Companion.CHANGE
import org.jetbrains.compose.web.attributes.EventsListenerBuilder.Companion.INPUT import org.jetbrains.compose.web.attributes.EventsListenerScope.Companion.INPUT
import org.jetbrains.compose.web.attributes.SyntheticEventListener import org.jetbrains.compose.web.attributes.SyntheticEventListener
import org.jetbrains.compose.web.events.SyntheticChangeEvent import org.jetbrains.compose.web.events.SyntheticChangeEvent
import org.jetbrains.compose.web.events.SyntheticInputEvent import org.jetbrains.compose.web.events.SyntheticInputEvent
import org.w3c.dom.HTMLSelectElement import org.w3c.dom.HTMLSelectElement
import org.w3c.dom.events.Event import org.w3c.dom.events.Event
class SelectAttrsBuilder : AttrsBuilder<HTMLSelectElement>() { @Deprecated(
message = "Renamed to SelectAttrsScope",
replaceWith = ReplaceWith("SelectAttrsScope", "org.jetbrains.compose.web.attributes.builders.SelectAttrsScope")
)
typealias SelectAttrsBuilder = SelectAttrsScope
class SelectAttrsScope : AttrsScopeBuilder<HTMLSelectElement>() {
fun onInput( fun onInput(
listener: (SyntheticInputEvent<String?, HTMLSelectElement>) -> Unit listener: (SyntheticInputEvent<String?, HTMLSelectElement>) -> Unit
) { ) {
listeners.add(SelectInputEventListener(INPUT, listener)) registerEventListener(SelectInputEventListener(INPUT, listener))
} }
fun onChange( fun onChange(
listener: (SyntheticChangeEvent<String?, HTMLSelectElement>) -> Unit listener: (SyntheticChangeEvent<String?, HTMLSelectElement>) -> Unit
) { ) {
listeners.add(SelectChangeEventListener(listener)) registerEventListener(SelectChangeEventListener(listener))
} }
} }

49
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/builders/TextAreaAttrsBuilder.kt
Unescape View File

@ -1,49 +0,0 @@
/*
* Copyright 2020-2021 JetBrains s.r.o. and respective authors and developers.
* Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file.
*/
package org.jetbrains.compose.web.attributes.builders
import org.jetbrains.compose.web.attributes.*
import org.jetbrains.compose.web.events.SyntheticChangeEvent
import org.jetbrains.compose.web.events.SyntheticSelectEvent
import org.jetbrains.compose.web.events.SyntheticInputEvent
import org.w3c.dom.HTMLTextAreaElement
class TextAreaAttrsBuilder : AttrsBuilder<HTMLTextAreaElement>() {
fun value(value: String): AttrsBuilder<HTMLTextAreaElement> {
prop(setInputValue, value)
return this
}
fun defaultValue(value: String): AttrsBuilder<HTMLTextAreaElement> {
prop(setTextAreaDefaultValue, value)
return this
}
fun onInput(
listener: (SyntheticInputEvent<String, HTMLTextAreaElement>) -> Unit
) {
listeners.add(InputEventListener(INPUT, InputType.Text, listener))
}
fun onChange(
listener: (SyntheticChangeEvent<String, HTMLTextAreaElement>) -> Unit
) {
listeners.add(ChangeEventListener(InputType.Text, listener))
}
fun onBeforeInput(
listener: (SyntheticInputEvent<String, HTMLTextAreaElement>) -> Unit
) {
listeners.add(InputEventListener(BEFOREINPUT, InputType.Text, listener))
}
fun onSelect(
listener: (SyntheticSelectEvent<HTMLTextAreaElement>) -> Unit
) {
listeners.add(SelectEventListener(listener))
}
}

64
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/builders/TextAreaAttrsScope.kt
Unescape View File

@ -0,0 +1,64 @@
/*
* Copyright 2020-2021 JetBrains s.r.o. and respective authors and developers.
* Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE.txt file.
*/
package org.jetbrains.compose.web.attributes.builders
import org.jetbrains.compose.web.attributes.AttrsScope
import org.jetbrains.compose.web.attributes.AttrsScopeBuilder
import org.jetbrains.compose.web.attributes.ChangeEventListener
import org.jetbrains.compose.web.attributes.EventsListenerScope.Companion.BEFOREINPUT
import org.jetbrains.compose.web.attributes.EventsListenerScope.Companion.INPUT
import org.jetbrains.compose.web.attributes.InputEventListener
import org.jetbrains.compose.web.attributes.InputType
import org.jetbrains.compose.web.attributes.SelectEventListener
import org.jetbrains.compose.web.attributes.setInputValue
import org.jetbrains.compose.web.attributes.setTextAreaDefaultValue
import org.jetbrains.compose.web.events.SyntheticChangeEvent
import org.jetbrains.compose.web.events.SyntheticInputEvent
import org.jetbrains.compose.web.events.SyntheticSelectEvent
import org.w3c.dom.HTMLTextAreaElement
@Deprecated(
message = "Renamed to TextAreaAttrsScope",
replaceWith = ReplaceWith("TextAreaAttrsScope", "org.jetbrains.compose.web.attributes.builders.TextAreaAttrsScope")
)
typealias TextAreaAttrsBuilder = TextAreaAttrsScope
class TextAreaAttrsScope : AttrsScopeBuilder<HTMLTextAreaElement>() {
fun value(value: String): AttrsScope<HTMLTextAreaElement> {
prop(setInputValue, value)
return this
}
fun defaultValue(value: String): AttrsScope<HTMLTextAreaElement> {
prop(setTextAreaDefaultValue, value)
return this
}
fun onInput(
listener: (SyntheticInputEvent<String, HTMLTextAreaElement>) -> Unit
) {
registerEventListener(InputEventListener(INPUT, InputType.Text, listener))
}
fun onChange(
listener: (SyntheticChangeEvent<String, HTMLTextAreaElement>) -> Unit
) {
registerEventListener(ChangeEventListener(InputType.Text, listener))
}
fun onBeforeInput(
listener: (SyntheticInputEvent<String, HTMLTextAreaElement>) -> Unit
) {
registerEventListener(InputEventListener(BEFOREINPUT, InputType.Text, listener))
}
fun onSelect(
listener: (SyntheticSelectEvent<HTMLTextAreaElement>) -> Unit
) {
registerEventListener(SelectEventListener(listener))
}
}

2
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSRules.kt
Unescape View File

@ -4,7 +4,7 @@ import org.jetbrains.compose.web.css.selectors.CSSSelector
interface CSSStyleRuleBuilder : StyleBuilder interface CSSStyleRuleBuilder : StyleBuilder
open class CSSRuleBuilderImpl : CSSStyleRuleBuilder, StyleBuilderImpl() open class CSSRuleBuilderImpl : CSSStyleRuleBuilder, StyleScopeBuilder()
@Suppress("EqualsOrHashCode") @Suppress("EqualsOrHashCode")
interface CSSRuleDeclaration { interface CSSRuleDeclaration {

19
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/StyleBuilder.kt → web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/StyleScope.kt
Unescape View File

@ -11,7 +11,7 @@ import org.jetbrains.compose.web.internal.runtime.ComposeWebInternalApi
import kotlin.properties.ReadOnlyProperty import kotlin.properties.ReadOnlyProperty
/** /**
* StyleBuilder serves for two main purposes. Passed as a builder context (in [AttrsBuilder]), it * StyleBuilder serves for two main purposes. Passed as a builder context (in [AttrsScope]), it
* makes it possible to: * makes it possible to:
* 1. Add inlined css properties to the element (@see [property]) * 1. Add inlined css properties to the element (@see [property])
* 2. Set values to CSS variables (@see [variable]) * 2. Set values to CSS variables (@see [variable])
@ -125,13 +125,26 @@ fun <TValue : StylePropertyValue> variable() =
} }
interface StyleHolder { interface StyleHolder {
@ComposeWebInternalApi
val properties: StylePropertyList val properties: StylePropertyList
@ComposeWebInternalApi
val variables: StylePropertyList val variables: StylePropertyList
} }
interface StyleScope : StyleBuilder, StyleHolder {
@ComposeWebInternalApi
fun copyFrom(sb: StyleScope)
}
@Deprecated(
message = "Renamed to StyleScopeBuilder",
replaceWith = ReplaceWith("StyleScopeBuilder", "org.jetbrains.compose.web.css.StyleScopeBuilder")
)
typealias StyleBuilderImpl = StyleScopeBuilder
@OptIn(ComposeWebInternalApi::class) @OptIn(ComposeWebInternalApi::class)
@Suppress("EqualsOrHashCode") @Suppress("EqualsOrHashCode")
open class StyleBuilderImpl : StyleBuilder, StyleHolder { open class StyleScopeBuilder : StyleScope {
override val properties: MutableStylePropertyList = mutableListOf() override val properties: MutableStylePropertyList = mutableListOf()
override val variables: MutableStylePropertyList = mutableListOf() override val variables: MutableStylePropertyList = mutableListOf()
@ -151,7 +164,7 @@ open class StyleBuilderImpl : StyleBuilder, StyleHolder {
} else false } else false
} }
internal fun copyFrom(sb: StyleBuilderImpl) { override fun copyFrom(sb: StyleScope) {
properties.addAll(sb.properties) properties.addAll(sb.properties)
variables.addAll(sb.variables) variables.addAll(sb.variables)
} }

21
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Base.kt
Unescape View File

@ -1,8 +1,9 @@
package org.jetbrains.compose.web.dom package org.jetbrains.compose.web.dom
import androidx.compose.runtime.* import androidx.compose.runtime.*
import org.jetbrains.compose.web.attributes.AttrsBuilder import org.jetbrains.compose.web.attributes.AttrsScope
import org.jetbrains.compose.web.ExperimentalComposeWebApi import org.jetbrains.compose.web.ExperimentalComposeWebApi
import org.jetbrains.compose.web.attributes.AttrsScopeBuilder
import org.jetbrains.compose.web.css.StyleHolder import org.jetbrains.compose.web.css.StyleHolder
import org.jetbrains.compose.web.internal.runtime.ComposeWebInternalApi import org.jetbrains.compose.web.internal.runtime.ComposeWebInternalApi
import org.jetbrains.compose.web.internal.runtime.DomNodeWrapper import org.jetbrains.compose.web.internal.runtime.DomNodeWrapper
@ -95,7 +96,7 @@ private class DomElementWrapper(override val node: Element): DomNodeWrapper(node
@Composable @Composable
fun <TElement : Element> TagElement( fun <TElement : Element> TagElement(
elementBuilder: ElementBuilder<TElement>, elementBuilder: ElementBuilder<TElement>,
applyAttrs: (AttrsBuilder<TElement>.() -> Unit)?, applyAttrs: (AttrsScope<TElement>.() -> Unit)?,
content: (@Composable ElementScope<TElement>.() -> Unit)? content: (@Composable ElementScope<TElement>.() -> Unit)?
) { ) {
val scope = remember { ElementScopeImpl<TElement>() } val scope = remember { ElementScopeImpl<TElement>() }
@ -108,16 +109,16 @@ fun <TElement : Element> TagElement(
DomElementWrapper(node) DomElementWrapper(node)
}, },
attrsSkippableUpdate = { attrsSkippableUpdate = {
val attrsBuilder = AttrsBuilder<TElement>() val attrsScope = AttrsScopeBuilder<TElement>()
applyAttrs?.invoke(attrsBuilder) applyAttrs?.invoke(attrsScope)
refEffect = attrsBuilder.refEffect refEffect = attrsScope.refEffect
update { update {
set(attrsBuilder.collect(), DomElementWrapper::updateAttrs) set(attrsScope.collect(), DomElementWrapper::updateAttrs)
set(attrsBuilder.collectListeners(), DomElementWrapper::updateEventListeners) set(attrsScope.collectListeners(), DomElementWrapper::updateEventListeners)
set(attrsBuilder.propertyUpdates, DomElementWrapper::updateProperties) set(attrsScope.propertyUpdates, DomElementWrapper::updateProperties)
set(attrsBuilder.styleBuilder, DomElementWrapper::updateStyleDeclarations) set(attrsScope.styleScope, DomElementWrapper::updateStyleDeclarations)
} }
}, },
elementScope = scope, elementScope = scope,
@ -135,7 +136,7 @@ fun <TElement : Element> TagElement(
@ExperimentalComposeWebApi @ExperimentalComposeWebApi
fun <TElement : Element> TagElement( fun <TElement : Element> TagElement(
tagName: String, tagName: String,
applyAttrs: AttrsBuilder<TElement>.() -> Unit, applyAttrs: AttrsScope<TElement>.() -> Unit,
content: (@Composable ElementScope<TElement>.() -> Unit)? content: (@Composable ElementScope<TElement>.() -> Unit)?
) = TagElement( ) = TagElement(
elementBuilder = ElementBuilder.createBuilder(tagName), elementBuilder = ElementBuilder.createBuilder(tagName),

153
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt
Unescape View File

@ -1,16 +1,16 @@
package org.jetbrains.compose.web.dom package org.jetbrains.compose.web.dom
import androidx.compose.runtime.* import androidx.compose.runtime.*
import androidx.compose.web.attributes.SelectAttrsBuilder import androidx.compose.web.attributes.SelectAttrsScope
import kotlinx.browser.document import kotlinx.browser.document
import org.jetbrains.compose.web.attributes.* import org.jetbrains.compose.web.attributes.*
import org.jetbrains.compose.web.attributes.builders.* import org.jetbrains.compose.web.attributes.builders.*
import org.jetbrains.compose.web.css.CSSRuleDeclarationList import org.jetbrains.compose.web.css.CSSRuleDeclarationList
import org.jetbrains.compose.web.css.StyleSheetBuilder import org.jetbrains.compose.web.css.StyleSheetBuilder
import org.jetbrains.compose.web.css.StyleSheetBuilderImpl import org.jetbrains.compose.web.css.StyleSheetBuilderImpl
import org.jetbrains.compose.web.internal.runtime.ComposeWebInternalApi
import org.jetbrains.compose.web.internal.runtime.DomApplier import org.jetbrains.compose.web.internal.runtime.DomApplier
import org.jetbrains.compose.web.internal.runtime.DomNodeWrapper import org.jetbrains.compose.web.internal.runtime.DomNodeWrapper
import org.jetbrains.compose.web.internal.runtime.ComposeWebInternalApi
import org.w3c.dom.Element import org.w3c.dom.Element
import org.w3c.dom.HTMLAnchorElement import org.w3c.dom.HTMLAnchorElement
import org.w3c.dom.HTMLAreaElement import org.w3c.dom.HTMLAreaElement
@ -23,8 +23,8 @@ import org.w3c.dom.HTMLElement
import org.w3c.dom.HTMLEmbedElement import org.w3c.dom.HTMLEmbedElement
import org.w3c.dom.HTMLFieldSetElement import org.w3c.dom.HTMLFieldSetElement
import org.w3c.dom.HTMLFormElement import org.w3c.dom.HTMLFormElement
import org.w3c.dom.HTMLHeadingElement
import org.w3c.dom.HTMLHRElement import org.w3c.dom.HTMLHRElement
import org.w3c.dom.HTMLHeadingElement
import org.w3c.dom.HTMLIFrameElement import org.w3c.dom.HTMLIFrameElement
import org.w3c.dom.HTMLImageElement import org.w3c.dom.HTMLImageElement
import org.w3c.dom.HTMLInputElement import org.w3c.dom.HTMLInputElement
@ -60,7 +60,12 @@ import org.w3c.dom.HTMLVideoElement
import org.w3c.dom.Text import org.w3c.dom.Text
import org.w3c.dom.css.CSSStyleSheet import org.w3c.dom.css.CSSStyleSheet
typealias AttrBuilderContext<T> = AttrsBuilder<T>.() -> Unit @Deprecated(
message = "Renamed to AttrsBuilder<T>",
replaceWith = ReplaceWith("AttrsBuilder<T>", "org.jetbrains.compose.web.dom.AttrsBuilder")
)
typealias AttrBuilderContext<T> = AttrsBuilder<T>
typealias AttrsBuilder<T> = AttrsScope<T>.() -> Unit
typealias ContentBuilder<T> = @Composable ElementScope<T>.() -> Unit typealias ContentBuilder<T> = @Composable ElementScope<T>.() -> Unit
private open class ElementBuilderImplementation<TElement : Element>(private val tagName: String) : ElementBuilder<TElement> { private open class ElementBuilderImplementation<TElement : Element>(private val tagName: String) : ElementBuilder<TElement> {
@ -163,7 +168,7 @@ fun interface ElementBuilder<TElement : Element> {
@Composable @Composable
fun Address( fun Address(
attrs: AttrBuilderContext<HTMLElement>? = null, attrs: AttrsBuilder<HTMLElement>? = null,
content: ContentBuilder<HTMLElement>? = null content: ContentBuilder<HTMLElement>? = null
) { ) {
TagElement( TagElement(
@ -175,7 +180,7 @@ fun Address(
@Composable @Composable
fun Article( fun Article(
attrs: AttrBuilderContext<HTMLElement>? = null, attrs: AttrsBuilder<HTMLElement>? = null,
content: ContentBuilder<HTMLElement>? = null content: ContentBuilder<HTMLElement>? = null
) { ) {
TagElement( TagElement(
@ -187,7 +192,7 @@ fun Article(
@Composable @Composable
fun Aside( fun Aside(
attrs: AttrBuilderContext<HTMLElement>? = null, attrs: AttrsBuilder<HTMLElement>? = null,
content: ContentBuilder<HTMLElement>? = null content: ContentBuilder<HTMLElement>? = null
) { ) {
TagElement( TagElement(
@ -199,7 +204,7 @@ fun Aside(
@Composable @Composable
fun Header( fun Header(
attrs: AttrBuilderContext<HTMLElement>? = null, attrs: AttrsBuilder<HTMLElement>? = null,
content: ContentBuilder<HTMLElement>? = null content: ContentBuilder<HTMLElement>? = null
) { ) {
TagElement( TagElement(
@ -211,7 +216,7 @@ fun Header(
@Composable @Composable
fun Area( fun Area(
attrs: AttrBuilderContext<HTMLAreaElement>? = null, attrs: AttrsBuilder<HTMLAreaElement>? = null,
content: ContentBuilder<HTMLAreaElement>? = null content: ContentBuilder<HTMLAreaElement>? = null
) { ) {
TagElement( TagElement(
@ -223,7 +228,7 @@ fun Area(
@Composable @Composable
fun Audio( fun Audio(
attrs: AttrBuilderContext<HTMLAudioElement>? = null, attrs: AttrsBuilder<HTMLAudioElement>? = null,
content: ContentBuilder<HTMLAudioElement>? = null content: ContentBuilder<HTMLAudioElement>? = null
) { ) {
TagElement( TagElement(
@ -235,7 +240,7 @@ fun Audio(
@Composable @Composable
fun HTMLMap( fun HTMLMap(
attrs: AttrBuilderContext<HTMLMapElement>? = null, attrs: AttrsBuilder<HTMLMapElement>? = null,
content: ContentBuilder<HTMLMapElement>? = null content: ContentBuilder<HTMLMapElement>? = null
) { ) {
TagElement( TagElement(
@ -247,7 +252,7 @@ fun HTMLMap(
@Composable @Composable
fun Track( fun Track(
attrs: AttrBuilderContext<HTMLTrackElement>? = null, attrs: AttrsBuilder<HTMLTrackElement>? = null,
content: ContentBuilder<HTMLTrackElement>? = null content: ContentBuilder<HTMLTrackElement>? = null
) { ) {
TagElement( TagElement(
@ -259,7 +264,7 @@ fun Track(
@Composable @Composable
fun Video( fun Video(
attrs: AttrBuilderContext<HTMLVideoElement>? = null, attrs: AttrsBuilder<HTMLVideoElement>? = null,
content: ContentBuilder<HTMLVideoElement>? = null content: ContentBuilder<HTMLVideoElement>? = null
) { ) {
TagElement( TagElement(
@ -271,7 +276,7 @@ fun Video(
@Composable @Composable
fun Datalist( fun Datalist(
attrs: AttrBuilderContext<HTMLDataListElement>? = null, attrs: AttrsBuilder<HTMLDataListElement>? = null,
content: ContentBuilder<HTMLDataListElement>? = null content: ContentBuilder<HTMLDataListElement>? = null
) { ) {
TagElement( TagElement(
@ -283,7 +288,7 @@ fun Datalist(
@Composable @Composable
fun Fieldset( fun Fieldset(
attrs: AttrBuilderContext<HTMLFieldSetElement>? = null, attrs: AttrsBuilder<HTMLFieldSetElement>? = null,
content: ContentBuilder<HTMLFieldSetElement>? = null content: ContentBuilder<HTMLFieldSetElement>? = null
) { ) {
TagElement( TagElement(
@ -295,7 +300,7 @@ fun Fieldset(
@Composable @Composable
fun Legend( fun Legend(
attrs: AttrBuilderContext<HTMLLegendElement>? = null, attrs: AttrsBuilder<HTMLLegendElement>? = null,
content: ContentBuilder<HTMLLegendElement>? = null content: ContentBuilder<HTMLLegendElement>? = null
) { ) {
TagElement( TagElement(
@ -307,7 +312,7 @@ fun Legend(
@Composable @Composable
fun Meter( fun Meter(
attrs: AttrBuilderContext<HTMLMeterElement>? = null, attrs: AttrsBuilder<HTMLMeterElement>? = null,
content: ContentBuilder<HTMLMeterElement>? = null content: ContentBuilder<HTMLMeterElement>? = null
) { ) {
TagElement( TagElement(
@ -319,7 +324,7 @@ fun Meter(
@Composable @Composable
fun Output( fun Output(
attrs: AttrBuilderContext<HTMLOutputElement>? = null, attrs: AttrsBuilder<HTMLOutputElement>? = null,
content: ContentBuilder<HTMLOutputElement>? = null content: ContentBuilder<HTMLOutputElement>? = null
) { ) {
TagElement( TagElement(
@ -331,7 +336,7 @@ fun Output(
@Composable @Composable
fun Progress( fun Progress(
attrs: AttrBuilderContext<HTMLProgressElement>? = null, attrs: AttrsBuilder<HTMLProgressElement>? = null,
content: ContentBuilder<HTMLProgressElement>? = null content: ContentBuilder<HTMLProgressElement>? = null
) { ) {
TagElement( TagElement(
@ -343,7 +348,7 @@ fun Progress(
@Composable @Composable
fun Embed( fun Embed(
attrs: AttrBuilderContext<HTMLEmbedElement>? = null, attrs: AttrsBuilder<HTMLEmbedElement>? = null,
content: ContentBuilder<HTMLEmbedElement>? = null content: ContentBuilder<HTMLEmbedElement>? = null
) { ) {
TagElement( TagElement(
@ -355,7 +360,7 @@ fun Embed(
@Composable @Composable
fun Iframe( fun Iframe(
attrs: AttrBuilderContext<HTMLIFrameElement>? = null, attrs: AttrsBuilder<HTMLIFrameElement>? = null,
content: ContentBuilder<HTMLIFrameElement>? = null content: ContentBuilder<HTMLIFrameElement>? = null
) { ) {
TagElement( TagElement(
@ -367,7 +372,7 @@ fun Iframe(
@Composable @Composable
fun Object( fun Object(
attrs: AttrBuilderContext<HTMLObjectElement>? = null, attrs: AttrsBuilder<HTMLObjectElement>? = null,
content: ContentBuilder<HTMLObjectElement>? = null content: ContentBuilder<HTMLObjectElement>? = null
) { ) {
TagElement( TagElement(
@ -379,7 +384,7 @@ fun Object(
@Composable @Composable
fun Param( fun Param(
attrs: AttrBuilderContext<HTMLParamElement>? = null, attrs: AttrsBuilder<HTMLParamElement>? = null,
content: ContentBuilder<HTMLParamElement>? = null content: ContentBuilder<HTMLParamElement>? = null
) { ) {
TagElement( TagElement(
@ -391,7 +396,7 @@ fun Param(
@Composable @Composable
fun Picture( fun Picture(
attrs: AttrBuilderContext<HTMLPictureElement>? = null, attrs: AttrsBuilder<HTMLPictureElement>? = null,
content: ContentBuilder<HTMLPictureElement>? = null content: ContentBuilder<HTMLPictureElement>? = null
) { ) {
TagElement( TagElement(
@ -403,7 +408,7 @@ fun Picture(
@Composable @Composable
fun Source( fun Source(
attrs: AttrBuilderContext<HTMLSourceElement>? = null, attrs: AttrsBuilder<HTMLSourceElement>? = null,
content: ContentBuilder<HTMLSourceElement>? = null content: ContentBuilder<HTMLSourceElement>? = null
) { ) {
TagElement( TagElement(
@ -426,7 +431,7 @@ fun Text(value: String) {
@Composable @Composable
fun Div( fun Div(
attrs: AttrBuilderContext<HTMLDivElement>? = null, attrs: AttrsBuilder<HTMLDivElement>? = null,
content: ContentBuilder<HTMLDivElement>? = null content: ContentBuilder<HTMLDivElement>? = null
) { ) {
TagElement( TagElement(
@ -439,7 +444,7 @@ fun Div(
@Composable @Composable
fun A( fun A(
href: String? = null, href: String? = null,
attrs: AttrBuilderContext<HTMLAnchorElement>? = null, attrs: AttrsBuilder<HTMLAnchorElement>? = null,
content: ContentBuilder<HTMLAnchorElement>? = null content: ContentBuilder<HTMLAnchorElement>? = null
) { ) {
TagElement( TagElement(
@ -458,101 +463,101 @@ fun A(
@Composable @Composable
fun Button( fun Button(
attrs: AttrBuilderContext<HTMLButtonElement>? = null, attrs: AttrsBuilder<HTMLButtonElement>? = null,
content: ContentBuilder<HTMLButtonElement>? = null content: ContentBuilder<HTMLButtonElement>? = null
) = TagElement(elementBuilder = Button, applyAttrs = attrs, content = content) ) = TagElement(elementBuilder = Button, applyAttrs = attrs, content = content)
@Composable @Composable
fun H1( fun H1(
attrs: AttrBuilderContext<HTMLHeadingElement>? = null, attrs: AttrsBuilder<HTMLHeadingElement>? = null,
content: ContentBuilder<HTMLHeadingElement>? = null content: ContentBuilder<HTMLHeadingElement>? = null
) = TagElement(elementBuilder = H1, applyAttrs = attrs, content = content) ) = TagElement(elementBuilder = H1, applyAttrs = attrs, content = content)
@Composable @Composable
fun H2( fun H2(
attrs: AttrBuilderContext<HTMLHeadingElement>? = null, attrs: AttrsBuilder<HTMLHeadingElement>? = null,
content: ContentBuilder<HTMLHeadingElement>? = null content: ContentBuilder<HTMLHeadingElement>? = null
) = TagElement(elementBuilder = H2, applyAttrs = attrs, content = content) ) = TagElement(elementBuilder = H2, applyAttrs = attrs, content = content)
@Composable @Composable
fun H3( fun H3(
attrs: AttrBuilderContext<HTMLHeadingElement>? = null, attrs: AttrsBuilder<HTMLHeadingElement>? = null,
content: ContentBuilder<HTMLHeadingElement>? = null content: ContentBuilder<HTMLHeadingElement>? = null
) = TagElement(elementBuilder = H3, applyAttrs = attrs, content = content) ) = TagElement(elementBuilder = H3, applyAttrs = attrs, content = content)
@Composable @Composable
fun H4( fun H4(
attrs: AttrBuilderContext<HTMLHeadingElement>? = null, attrs: AttrsBuilder<HTMLHeadingElement>? = null,
content: ContentBuilder<HTMLHeadingElement>? = null content: ContentBuilder<HTMLHeadingElement>? = null
) = TagElement(elementBuilder = H4, applyAttrs = attrs, content = content) ) = TagElement(elementBuilder = H4, applyAttrs = attrs, content = content)
@Composable @Composable
fun H5( fun H5(
attrs: AttrBuilderContext<HTMLHeadingElement>? = null, attrs: AttrsBuilder<HTMLHeadingElement>? = null,
content: ContentBuilder<HTMLHeadingElement>? = null content: ContentBuilder<HTMLHeadingElement>? = null
) = TagElement(elementBuilder = H5, applyAttrs = attrs, content = content) ) = TagElement(elementBuilder = H5, applyAttrs = attrs, content = content)
@Composable @Composable
fun H6( fun H6(
attrs: AttrBuilderContext<HTMLHeadingElement>? = null, attrs: AttrsBuilder<HTMLHeadingElement>? = null,
content: ContentBuilder<HTMLHeadingElement>? = null content: ContentBuilder<HTMLHeadingElement>? = null
) = TagElement(elementBuilder = H6, applyAttrs = attrs, content = content) ) = TagElement(elementBuilder = H6, applyAttrs = attrs, content = content)
@Composable @Composable
fun P( fun P(
attrs: AttrBuilderContext<HTMLParagraphElement>? = null, attrs: AttrsBuilder<HTMLParagraphElement>? = null,
content: ContentBuilder<HTMLParagraphElement>? = null content: ContentBuilder<HTMLParagraphElement>? = null
) = TagElement(elementBuilder = P, applyAttrs = attrs, content = content) ) = TagElement(elementBuilder = P, applyAttrs = attrs, content = content)
@Composable @Composable
fun Em( fun Em(
attrs: AttrBuilderContext<HTMLElement>? = null, attrs: AttrsBuilder<HTMLElement>? = null,
content: ContentBuilder<HTMLElement>? = null content: ContentBuilder<HTMLElement>? = null
) = TagElement(elementBuilder = Em, applyAttrs = attrs, content = content) ) = TagElement(elementBuilder = Em, applyAttrs = attrs, content = content)
@Composable @Composable
fun I( fun I(
attrs: AttrBuilderContext<HTMLElement>? = null, attrs: AttrsBuilder<HTMLElement>? = null,
content: ContentBuilder<HTMLElement>? = null content: ContentBuilder<HTMLElement>? = null
) = TagElement(elementBuilder = I, applyAttrs = attrs, content = content) ) = TagElement(elementBuilder = I, applyAttrs = attrs, content = content)
@Composable @Composable
fun B( fun B(
attrs: AttrBuilderContext<HTMLElement>? = null, attrs: AttrsBuilder<HTMLElement>? = null,
content: ContentBuilder<HTMLElement>? = null content: ContentBuilder<HTMLElement>? = null
) = TagElement(elementBuilder = B, applyAttrs = attrs, content = content) ) = TagElement(elementBuilder = B, applyAttrs = attrs, content = content)
@Composable @Composable
fun Small( fun Small(
attrs: AttrBuilderContext<HTMLElement>? = null, attrs: AttrsBuilder<HTMLElement>? = null,
content: ContentBuilder<HTMLElement>? = null content: ContentBuilder<HTMLElement>? = null
) = TagElement(elementBuilder = Small, applyAttrs = attrs, content = content) ) = TagElement(elementBuilder = Small, applyAttrs = attrs, content = content)
@Composable @Composable
fun Span( fun Span(
attrs: AttrBuilderContext<HTMLSpanElement>? = null, attrs: AttrsBuilder<HTMLSpanElement>? = null,
content: ContentBuilder<HTMLSpanElement>? = null content: ContentBuilder<HTMLSpanElement>? = null
) = TagElement(elementBuilder = Span, applyAttrs = attrs, content = content) ) = TagElement(elementBuilder = Span, applyAttrs = attrs, content = content)
@Composable @Composable
fun Br(attrs: AttrBuilderContext<HTMLBRElement>? = null) = fun Br(attrs: AttrsBuilder<HTMLBRElement>? = null) =
TagElement(elementBuilder = Br, applyAttrs = attrs, content = null) TagElement(elementBuilder = Br, applyAttrs = attrs, content = null)
@Composable @Composable
fun Ul( fun Ul(
attrs: AttrBuilderContext<HTMLUListElement>? = null, attrs: AttrsBuilder<HTMLUListElement>? = null,
content: ContentBuilder<HTMLUListElement>? = null content: ContentBuilder<HTMLUListElement>? = null
) = TagElement(elementBuilder = Ul, applyAttrs = attrs, content = content) ) = TagElement(elementBuilder = Ul, applyAttrs = attrs, content = content)
@Composable @Composable
fun Ol( fun Ol(
attrs: AttrBuilderContext<HTMLOListElement>? = null, attrs: AttrsBuilder<HTMLOListElement>? = null,
content: ContentBuilder<HTMLOListElement>? = null content: ContentBuilder<HTMLOListElement>? = null
) = TagElement(elementBuilder = Ol, applyAttrs = attrs, content = content) ) = TagElement(elementBuilder = Ol, applyAttrs = attrs, content = content)
@Composable @Composable
fun Li( fun Li(
attrs: AttrBuilderContext<HTMLLIElement>? = null, attrs: AttrsBuilder<HTMLLIElement>? = null,
content: ContentBuilder<HTMLLIElement>? = null content: ContentBuilder<HTMLLIElement>? = null
) = TagElement(elementBuilder = Li, applyAttrs = attrs, content = content) ) = TagElement(elementBuilder = Li, applyAttrs = attrs, content = content)
@ -560,7 +565,7 @@ fun Li(
fun Img( fun Img(
src: String, src: String,
alt: String = "", alt: String = "",
attrs: AttrBuilderContext<HTMLImageElement>? = null attrs: AttrsBuilder<HTMLImageElement>? = null
) = TagElement( ) = TagElement(
elementBuilder = Img, elementBuilder = Img,
applyAttrs = { applyAttrs = {
@ -575,7 +580,7 @@ fun Img(
@Composable @Composable
fun Form( fun Form(
action: String? = null, action: String? = null,
attrs: AttrBuilderContext<HTMLFormElement>? = null, attrs: AttrsBuilder<HTMLFormElement>? = null,
content: ContentBuilder<HTMLFormElement>? = null content: ContentBuilder<HTMLFormElement>? = null
) = TagElement( ) = TagElement(
elementBuilder = Form, elementBuilder = Form,
@ -590,7 +595,7 @@ fun Form(
@Composable @Composable
fun Select( fun Select(
attrs: (SelectAttrsBuilder.() -> Unit)? = null, attrs: (SelectAttrsScope.() -> Unit)? = null,
multiple: Boolean = false, multiple: Boolean = false,
content: ContentBuilder<HTMLSelectElement>? = null content: ContentBuilder<HTMLSelectElement>? = null
) = TagElement( ) = TagElement(
@ -598,7 +603,7 @@ fun Select(
applyAttrs = { applyAttrs = {
if (multiple) multiple() if (multiple) multiple()
if (attrs != null) { if (attrs != null) {
val selectAttrsBuilder = with(SelectAttrsBuilder()) { val selectAttrsBuilder = with(SelectAttrsScope()) {
attrs() attrs()
this this
} }
@ -611,7 +616,7 @@ fun Select(
@Composable @Composable
fun Option( fun Option(
value: String, value: String,
attrs: AttrBuilderContext<HTMLOptionElement>? = null, attrs: AttrsBuilder<HTMLOptionElement>? = null,
content: ContentBuilder<HTMLOptionElement>? = null content: ContentBuilder<HTMLOptionElement>? = null
) = TagElement( ) = TagElement(
elementBuilder = Option, elementBuilder = Option,
@ -627,7 +632,7 @@ fun Option(
@Composable @Composable
fun OptGroup( fun OptGroup(
label: String, label: String,
attrs: AttrBuilderContext<HTMLOptGroupElement>? = null, attrs: AttrsBuilder<HTMLOptGroupElement>? = null,
content: ContentBuilder<HTMLOptGroupElement>? = null content: ContentBuilder<HTMLOptGroupElement>? = null
) = TagElement( ) = TagElement(
elementBuilder = OptGroup, elementBuilder = OptGroup,
@ -642,7 +647,7 @@ fun OptGroup(
@Composable @Composable
fun Section( fun Section(
attrs: AttrBuilderContext<HTMLElement>? = null, attrs: AttrsBuilder<HTMLElement>? = null,
content: ContentBuilder<HTMLElement>? = null content: ContentBuilder<HTMLElement>? = null
) = TagElement( ) = TagElement(
elementBuilder = Section, elementBuilder = Section,
@ -671,7 +676,7 @@ fun Section(
@Composable @Composable
fun TextArea( fun TextArea(
value: String? = null, value: String? = null,
attrs: (TextAreaAttrsBuilder.() -> Unit)? = null attrs: (TextAreaAttrsScope.() -> Unit)? = null
) { ) {
// if firstProvidedValueWasNotNull then TextArea behaves as controlled input // if firstProvidedValueWasNotNull then TextArea behaves as controlled input
val firstProvidedValueWasNotNull = remember { value != null } val firstProvidedValueWasNotNull = remember { value != null }
@ -682,7 +687,7 @@ fun TextArea(
TagElement( TagElement(
elementBuilder = TextArea, elementBuilder = TextArea,
applyAttrs = { applyAttrs = {
val textAreaAttrsBuilder = TextAreaAttrsBuilder() val textAreaAttrsBuilder = TextAreaAttrsScope()
textAreaAttrsBuilder.onInput { textAreaAttrsBuilder.onInput {
// controlled state needs to be restored after every input // controlled state needs to be restored after every input
keyForRestoringControlledState.value = keyForRestoringControlledState.value + 1 keyForRestoringControlledState.value = keyForRestoringControlledState.value + 1
@ -708,7 +713,7 @@ private val textAreaRestoreControlledStateEffect: DomEffectScope.(HTMLTextAreaEl
@Composable @Composable
fun Nav( fun Nav(
attrs: AttrBuilderContext<HTMLElement>? = null, attrs: AttrsBuilder<HTMLElement>? = null,
content: ContentBuilder<HTMLElement>? = null content: ContentBuilder<HTMLElement>? = null
) = TagElement( ) = TagElement(
elementBuilder = Nav, elementBuilder = Nav,
@ -718,7 +723,7 @@ fun Nav(
@Composable @Composable
fun Pre( fun Pre(
attrs: AttrBuilderContext<HTMLPreElement>? = null, attrs: AttrsBuilder<HTMLPreElement>? = null,
content: ContentBuilder<HTMLPreElement>? = null content: ContentBuilder<HTMLPreElement>? = null
) { ) {
TagElement( TagElement(
@ -730,7 +735,7 @@ fun Pre(
@Composable @Composable
fun Code( fun Code(
attrs: AttrBuilderContext<HTMLElement>? = null, attrs: AttrsBuilder<HTMLElement>? = null,
content: ContentBuilder<HTMLElement>? = null content: ContentBuilder<HTMLElement>? = null
) { ) {
TagElement( TagElement(
@ -742,7 +747,7 @@ fun Code(
@Composable @Composable
fun Main( fun Main(
attrs: AttrBuilderContext<HTMLElement>? = null, attrs: AttrsBuilder<HTMLElement>? = null,
content: ContentBuilder<HTMLElement>? = null content: ContentBuilder<HTMLElement>? = null
) { ) {
TagElement( TagElement(
@ -754,7 +759,7 @@ fun Main(
@Composable @Composable
fun Footer( fun Footer(
attrs: AttrBuilderContext<HTMLElement>? = null, attrs: AttrsBuilder<HTMLElement>? = null,
content: ContentBuilder<HTMLElement>? = null content: ContentBuilder<HTMLElement>? = null
) { ) {
TagElement( TagElement(
@ -766,7 +771,7 @@ fun Footer(
@Composable @Composable
fun Hr( fun Hr(
attrs: AttrBuilderContext<HTMLHRElement>? = null attrs: AttrsBuilder<HTMLHRElement>? = null
) { ) {
TagElement( TagElement(
elementBuilder = Hr, elementBuilder = Hr,
@ -778,7 +783,7 @@ fun Hr(
@Composable @Composable
fun Label( fun Label(
forId: String? = null, forId: String? = null,
attrs: AttrBuilderContext<HTMLLabelElement>? = null, attrs: AttrsBuilder<HTMLLabelElement>? = null,
content: ContentBuilder<HTMLLabelElement>? = null content: ContentBuilder<HTMLLabelElement>? = null
) { ) {
TagElement( TagElement(
@ -797,7 +802,7 @@ fun Label(
@Composable @Composable
fun Table( fun Table(
attrs: AttrBuilderContext<HTMLTableElement>? = null, attrs: AttrsBuilder<HTMLTableElement>? = null,
content: ContentBuilder<HTMLTableElement>? = null content: ContentBuilder<HTMLTableElement>? = null
) { ) {
TagElement( TagElement(
@ -809,7 +814,7 @@ fun Table(
@Composable @Composable
fun Caption( fun Caption(
attrs: AttrBuilderContext<HTMLTableCaptionElement>? = null, attrs: AttrsBuilder<HTMLTableCaptionElement>? = null,
content: ContentBuilder<HTMLTableCaptionElement>? = null content: ContentBuilder<HTMLTableCaptionElement>? = null
) { ) {
TagElement( TagElement(
@ -821,7 +826,7 @@ fun Caption(
@Composable @Composable
fun Col( fun Col(
attrs: AttrBuilderContext<HTMLTableColElement>? = null attrs: AttrsBuilder<HTMLTableColElement>? = null
) { ) {
TagElement( TagElement(
elementBuilder = Col, elementBuilder = Col,
@ -832,7 +837,7 @@ fun Col(
@Composable @Composable
fun Colgroup( fun Colgroup(
attrs: AttrBuilderContext<HTMLTableColElement>? = null, attrs: AttrsBuilder<HTMLTableColElement>? = null,
content: ContentBuilder<HTMLTableColElement>? = null content: ContentBuilder<HTMLTableColElement>? = null
) { ) {
TagElement( TagElement(
@ -844,7 +849,7 @@ fun Colgroup(
@Composable @Composable
fun Tr( fun Tr(
attrs: AttrBuilderContext<HTMLTableRowElement>? = null, attrs: AttrsBuilder<HTMLTableRowElement>? = null,
content: ContentBuilder<HTMLTableRowElement>? = null content: ContentBuilder<HTMLTableRowElement>? = null
) { ) {
TagElement( TagElement(
@ -856,7 +861,7 @@ fun Tr(
@Composable @Composable
fun Thead( fun Thead(
attrs: AttrBuilderContext<HTMLTableSectionElement>? = null, attrs: AttrsBuilder<HTMLTableSectionElement>? = null,
content: ContentBuilder<HTMLTableSectionElement>? = null content: ContentBuilder<HTMLTableSectionElement>? = null
) { ) {
TagElement( TagElement(
@ -868,7 +873,7 @@ fun Thead(
@Composable @Composable
fun Th( fun Th(
attrs: AttrBuilderContext<HTMLTableCellElement>? = null, attrs: AttrsBuilder<HTMLTableCellElement>? = null,
content: ContentBuilder<HTMLTableCellElement>? = null content: ContentBuilder<HTMLTableCellElement>? = null
) { ) {
TagElement( TagElement(
@ -880,7 +885,7 @@ fun Th(
@Composable @Composable
fun Td( fun Td(
attrs: AttrBuilderContext<HTMLTableCellElement>? = null, attrs: AttrsBuilder<HTMLTableCellElement>? = null,
content: ContentBuilder<HTMLTableCellElement>? = null content: ContentBuilder<HTMLTableCellElement>? = null
) { ) {
TagElement( TagElement(
@ -892,7 +897,7 @@ fun Td(
@Composable @Composable
fun Tbody( fun Tbody(
attrs: AttrBuilderContext<HTMLTableSectionElement>? = null, attrs: AttrsBuilder<HTMLTableSectionElement>? = null,
content: ContentBuilder<HTMLTableSectionElement>? = null content: ContentBuilder<HTMLTableSectionElement>? = null
) { ) {
TagElement( TagElement(
@ -904,7 +909,7 @@ fun Tbody(
@Composable @Composable
fun Tfoot( fun Tfoot(
attrs: AttrBuilderContext<HTMLTableSectionElement>? = null, attrs: AttrsBuilder<HTMLTableSectionElement>? = null,
content: ContentBuilder<HTMLTableSectionElement>? = null content: ContentBuilder<HTMLTableSectionElement>? = null
) { ) {
TagElement( TagElement(
@ -922,7 +927,7 @@ fun Tfoot(
*/ */
@Composable @Composable
fun Style( fun Style(
applyAttrs: (AttrsBuilder<HTMLStyleElement>.() -> Unit)? = null, applyAttrs: (AttrsScope<HTMLStyleElement>.() -> Unit)? = null,
cssRules: CSSRuleDeclarationList cssRules: CSSRuleDeclarationList
) { ) {
TagElement( TagElement(
@ -951,7 +956,7 @@ fun Style(
*/ */
@Composable @Composable
inline fun Style( inline fun Style(
noinline applyAttrs: (AttrsBuilder<HTMLStyleElement>.() -> Unit)? = null, noinline applyAttrs: (AttrsScope<HTMLStyleElement>.() -> Unit)? = null,
rulesBuild: StyleSheetBuilder.() -> Unit rulesBuild: StyleSheetBuilder.() -> Unit
) { ) {
val builder = StyleSheetBuilderImpl() val builder = StyleSheetBuilderImpl()
@ -994,7 +999,7 @@ inline fun Style(
@Composable @Composable
fun <K> Input( fun <K> Input(
type: InputType<K>, type: InputType<K>,
attrs: InputAttrsBuilder<K>.() -> Unit attrs: InputAttrsScope<K>.() -> Unit
) { ) {
// changes to this key trigger [inputRestoreControlledStateEffect] // changes to this key trigger [inputRestoreControlledStateEffect]
val keyForRestoringControlledState: MutableState<Int> = remember { mutableStateOf(0) } val keyForRestoringControlledState: MutableState<Int> = remember { mutableStateOf(0) }
@ -1002,7 +1007,7 @@ fun <K> Input(
TagElement( TagElement(
elementBuilder = Input, elementBuilder = Input,
applyAttrs = { applyAttrs = {
val inputAttrsBuilder = InputAttrsBuilder(type) val inputAttrsBuilder = InputAttrsScope(type)
inputAttrsBuilder.type(type) inputAttrsBuilder.type(type)
inputAttrsBuilder.onInput { inputAttrsBuilder.onInput {
// controlled state needs to be restored after every input // controlled state needs to be restored after every input

42
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/InputElements.kt
Unescape View File

@ -2,12 +2,12 @@ package org.jetbrains.compose.web.dom
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.NonRestartableComposable import androidx.compose.runtime.NonRestartableComposable
import org.jetbrains.compose.web.attributes.builders.InputAttrsBuilder import org.jetbrains.compose.web.attributes.builders.InputAttrsScope
import org.jetbrains.compose.web.attributes.* import org.jetbrains.compose.web.attributes.*
private fun InputAttrsBuilder<String>.applyAttrsWithStringValue( private fun InputAttrsScope<String>.applyAttrsWithStringValue(
value: String, value: String,
attrs: InputAttrsBuilder<String>.() -> Unit attrs: InputAttrsScope<String>.() -> Unit
) { ) {
value(value) value(value)
attrs() attrs()
@ -22,7 +22,7 @@ private fun InputAttrsBuilder<String>.applyAttrsWithStringValue(
*/ */
@Composable @Composable
@NonRestartableComposable @NonRestartableComposable
fun CheckboxInput(checked: Boolean = false, attrs: InputAttrsBuilder<Boolean>.() -> Unit = {}) { fun CheckboxInput(checked: Boolean = false, attrs: InputAttrsScope<Boolean>.() -> Unit = {}) {
Input( Input(
type = InputType.Checkbox, type = InputType.Checkbox,
attrs = { attrs = {
@ -41,7 +41,7 @@ fun CheckboxInput(checked: Boolean = false, attrs: InputAttrsBuilder<Boolean>.()
*/ */
@Composable @Composable
@NonRestartableComposable @NonRestartableComposable
fun DateInput(value: String = "", attrs: InputAttrsBuilder<String>.() -> Unit = {}) { fun DateInput(value: String = "", attrs: InputAttrsScope<String>.() -> Unit = {}) {
Input(type = InputType.Date, attrs = { applyAttrsWithStringValue(value, attrs) }) Input(type = InputType.Date, attrs = { applyAttrsWithStringValue(value, attrs) })
} }
@ -54,7 +54,7 @@ fun DateInput(value: String = "", attrs: InputAttrsBuilder<String>.() -> Unit =
*/ */
@Composable @Composable
@NonRestartableComposable @NonRestartableComposable
fun DateTimeLocalInput(value: String = "", attrs: InputAttrsBuilder<String>.() -> Unit = {}) { fun DateTimeLocalInput(value: String = "", attrs: InputAttrsScope<String>.() -> Unit = {}) {
Input(type = InputType.DateTimeLocal, attrs = { applyAttrsWithStringValue(value, attrs) }) Input(type = InputType.DateTimeLocal, attrs = { applyAttrsWithStringValue(value, attrs) })
} }
@ -67,7 +67,7 @@ fun DateTimeLocalInput(value: String = "", attrs: InputAttrsBuilder<String>.() -
*/ */
@Composable @Composable
@NonRestartableComposable @NonRestartableComposable
fun EmailInput(value: String = "", attrs: InputAttrsBuilder<String>.() -> Unit = {}) { fun EmailInput(value: String = "", attrs: InputAttrsScope<String>.() -> Unit = {}) {
Input(type = InputType.Email, attrs = { applyAttrsWithStringValue(value, attrs) }) Input(type = InputType.Email, attrs = { applyAttrsWithStringValue(value, attrs) })
} }
@ -80,7 +80,7 @@ fun EmailInput(value: String = "", attrs: InputAttrsBuilder<String>.() -> Unit =
*/ */
@Composable @Composable
@NonRestartableComposable @NonRestartableComposable
fun FileInput(value: String = "", attrs: InputAttrsBuilder<String>.() -> Unit = {}) { fun FileInput(value: String = "", attrs: InputAttrsScope<String>.() -> Unit = {}) {
Input(type = InputType.File, attrs = { applyAttrsWithStringValue(value, attrs) }) Input(type = InputType.File, attrs = { applyAttrsWithStringValue(value, attrs) })
} }
@ -93,7 +93,7 @@ fun FileInput(value: String = "", attrs: InputAttrsBuilder<String>.() -> Unit =
*/ */
@Composable @Composable
@NonRestartableComposable @NonRestartableComposable
fun HiddenInput(attrs: InputAttrsBuilder<String>.() -> Unit = {}) { fun HiddenInput(attrs: InputAttrsScope<String>.() -> Unit = {}) {
Input(type = InputType.Hidden, attrs = attrs) Input(type = InputType.Hidden, attrs = attrs)
} }
@ -106,7 +106,7 @@ fun HiddenInput(attrs: InputAttrsBuilder<String>.() -> Unit = {}) {
*/ */
@Composable @Composable
@NonRestartableComposable @NonRestartableComposable
fun MonthInput(value: String = "", attrs: InputAttrsBuilder<String>.() -> Unit = {}) { fun MonthInput(value: String = "", attrs: InputAttrsScope<String>.() -> Unit = {}) {
Input(type = InputType.Month, attrs = { applyAttrsWithStringValue(value, attrs) }) Input(type = InputType.Month, attrs = { applyAttrsWithStringValue(value, attrs) })
} }
@ -123,7 +123,7 @@ fun NumberInput(
value: Number? = null, value: Number? = null,
min: Number? = null, min: Number? = null,
max: Number? = null, max: Number? = null,
attrs: InputAttrsBuilder<Number?>.() -> Unit = {} attrs: InputAttrsScope<Number?>.() -> Unit = {}
) { ) {
Input( Input(
type = InputType.Number, type = InputType.Number,
@ -145,7 +145,7 @@ fun NumberInput(
*/ */
@Composable @Composable
@NonRestartableComposable @NonRestartableComposable
fun PasswordInput(value: String = "", attrs: InputAttrsBuilder<String>.() -> Unit = {}) { fun PasswordInput(value: String = "", attrs: InputAttrsScope<String>.() -> Unit = {}) {
Input(type = InputType.Password, attrs = { applyAttrsWithStringValue(value, attrs) }) Input(type = InputType.Password, attrs = { applyAttrsWithStringValue(value, attrs) })
} }
@ -158,7 +158,7 @@ fun PasswordInput(value: String = "", attrs: InputAttrsBuilder<String>.() -> Uni
*/ */
@Composable @Composable
@NonRestartableComposable @NonRestartableComposable
fun RadioInput(checked: Boolean = false, attrs: InputAttrsBuilder<Boolean>.() -> Unit = {}) { fun RadioInput(checked: Boolean = false, attrs: InputAttrsScope<Boolean>.() -> Unit = {}) {
Input( Input(
type = InputType.Radio, type = InputType.Radio,
attrs = { attrs = {
@ -182,7 +182,7 @@ fun RangeInput(
min: Number? = null, min: Number? = null,
max: Number? = null, max: Number? = null,
step: Number = 1, step: Number = 1,
attrs: InputAttrsBuilder<Number?>.() -> Unit = {} attrs: InputAttrsScope<Number?>.() -> Unit = {}
) { ) {
Input( Input(
type = InputType.Range, type = InputType.Range,
@ -205,7 +205,7 @@ fun RangeInput(
*/ */
@Composable @Composable
@NonRestartableComposable @NonRestartableComposable
fun SearchInput(value: String = "", attrs: InputAttrsBuilder<String>.() -> Unit = {}) { fun SearchInput(value: String = "", attrs: InputAttrsScope<String>.() -> Unit = {}) {
Input(type = InputType.Search, attrs = { applyAttrsWithStringValue(value, attrs) }) Input(type = InputType.Search, attrs = { applyAttrsWithStringValue(value, attrs) })
} }
@ -215,7 +215,7 @@ fun SearchInput(value: String = "", attrs: InputAttrsBuilder<String>.() -> Unit
*/ */
@Composable @Composable
@NonRestartableComposable @NonRestartableComposable
fun SubmitInput(attrs: InputAttrsBuilder<Unit>.() -> Unit = {}) { fun SubmitInput(attrs: InputAttrsScope<Unit>.() -> Unit = {}) {
Input(type = InputType.Submit, attrs = attrs) Input(type = InputType.Submit, attrs = attrs)
} }
@ -228,7 +228,7 @@ fun SubmitInput(attrs: InputAttrsBuilder<Unit>.() -> Unit = {}) {
*/ */
@Composable @Composable
@NonRestartableComposable @NonRestartableComposable
fun TelInput(value: String = "", attrs: InputAttrsBuilder<String>.() -> Unit = {}) { fun TelInput(value: String = "", attrs: InputAttrsScope<String>.() -> Unit = {}) {
Input(type = InputType.Tel, attrs = { applyAttrsWithStringValue(value, attrs) }) Input(type = InputType.Tel, attrs = { applyAttrsWithStringValue(value, attrs) })
} }
@ -241,7 +241,7 @@ fun TelInput(value: String = "", attrs: InputAttrsBuilder<String>.() -> Unit = {
*/ */
@Composable @Composable
@NonRestartableComposable @NonRestartableComposable
fun TextInput(value: String = "", attrs: InputAttrsBuilder<String>.() -> Unit = {}) { fun TextInput(value: String = "", attrs: InputAttrsScope<String>.() -> Unit = {}) {
Input(type = InputType.Text, attrs = { applyAttrsWithStringValue(value, attrs) }) Input(type = InputType.Text, attrs = { applyAttrsWithStringValue(value, attrs) })
} }
@ -254,7 +254,7 @@ fun TextInput(value: String = "", attrs: InputAttrsBuilder<String>.() -> Unit =
*/ */
@Composable @Composable
@NonRestartableComposable @NonRestartableComposable
fun TimeInput(value: String = "", attrs: InputAttrsBuilder<String>.() -> Unit = {}) { fun TimeInput(value: String = "", attrs: InputAttrsScope<String>.() -> Unit = {}) {
Input(type = InputType.Time, attrs = { applyAttrsWithStringValue(value, attrs) }) Input(type = InputType.Time, attrs = { applyAttrsWithStringValue(value, attrs) })
} }
@ -267,7 +267,7 @@ fun TimeInput(value: String = "", attrs: InputAttrsBuilder<String>.() -> Unit =
*/ */
@Composable @Composable
@NonRestartableComposable @NonRestartableComposable
fun UrlInput(value: String = "", attrs: InputAttrsBuilder<String>.() -> Unit = {}) { fun UrlInput(value: String = "", attrs: InputAttrsScope<String>.() -> Unit = {}) {
Input(type = InputType.Url, attrs = { applyAttrsWithStringValue(value, attrs) }) Input(type = InputType.Url, attrs = { applyAttrsWithStringValue(value, attrs) })
} }
@ -280,6 +280,6 @@ fun UrlInput(value: String = "", attrs: InputAttrsBuilder<String>.() -> Unit = {
*/ */
@Composable @Composable
@NonRestartableComposable @NonRestartableComposable
fun WeekInput(value: String = "", attrs: InputAttrsBuilder<String>.() -> Unit = {}) { fun WeekInput(value: String = "", attrs: InputAttrsScope<String>.() -> Unit = {}) {
Input(type = InputType.Week, attrs = { applyAttrsWithStringValue(value, attrs) }) Input(type = InputType.Week, attrs = { applyAttrsWithStringValue(value, attrs) })
} }

4
web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/RadioGroup.kt
Unescape View File

@ -3,10 +3,10 @@ package org.jetbrains.compose.web.dom
import androidx.compose.runtime.* import androidx.compose.runtime.*
import org.jetbrains.compose.web.ExperimentalComposeWebApi import org.jetbrains.compose.web.ExperimentalComposeWebApi
import org.jetbrains.compose.web.attributes.InputType import org.jetbrains.compose.web.attributes.InputType
import org.jetbrains.compose.web.attributes.builders.InputAttrsBuilder import org.jetbrains.compose.web.attributes.builders.InputAttrsScope
import org.jetbrains.compose.web.attributes.name import org.jetbrains.compose.web.attributes.name
typealias RadioInputAttrsBuilder = (InputAttrsBuilder<Boolean>.() -> Unit) typealias RadioInputAttrsBuilder = (InputAttrsScope<Boolean>.() -> Unit)
/** /**
* @param value - sets `value` attribute * @param value - sets `value` attribute

42
web/core/src/jsTest/kotlin/elements/AttributesTests.kt
Unescape View File

@ -21,7 +21,7 @@ class AttributesTests {
@Test @Test
fun copyFromStyleBuilderCopiesCorrectly() { fun copyFromStyleBuilderCopiesCorrectly() {
val copyFromStyleBuilder = StyleBuilderImpl().apply { val copyFromStyleBuilder = StyleScopeBuilder().apply {
property("color", "red") property("color", "red")
property("height", 100.px) property("height", 100.px)
@ -29,7 +29,7 @@ class AttributesTests {
variable("var2", 100.px) variable("var2", 100.px)
} }
val copyToStyleBuilder = StyleBuilderImpl().apply { val copyToStyleBuilder = StyleScopeBuilder().apply {
copyFrom(copyFromStyleBuilder) copyFrom(copyFromStyleBuilder)
} }
@ -38,7 +38,7 @@ class AttributesTests {
@Test @Test
fun copyFromAttrsBuilderCopiesCorrectly() { fun copyFromAttrsBuilderCopiesCorrectly() {
val attrsBuilderCopyFrom = AttrsBuilder<HTMLElement>().apply { val attrsScopeCopyFrom = AttrsScopeBuilder<HTMLElement>().apply {
id("id1") id("id1")
classes("a b c") classes("a b c")
attr("title", "customTitle") attr("title", "customTitle")
@ -56,54 +56,54 @@ class AttributesTests {
onMouseEnter { } onMouseEnter { }
} }
val copyToAttrsBuilder = AttrsBuilder<HTMLElement>().apply { val copyToAttrsScope = AttrsScopeBuilder<HTMLElement>().apply {
copyFrom(attrsBuilderCopyFrom) copyFrom(attrsScopeCopyFrom)
} }
assertEquals(attrsBuilderCopyFrom.attributesMap, copyToAttrsBuilder.attributesMap) assertEquals(attrsScopeCopyFrom.attributesMap, copyToAttrsScope.attributesMap)
assertEquals(attrsBuilderCopyFrom.styleBuilder, copyToAttrsBuilder.styleBuilder) assertEquals(attrsScopeCopyFrom.styleScope, copyToAttrsScope.styleScope)
assertEquals(attrsBuilderCopyFrom.refEffect, copyToAttrsBuilder.refEffect) assertEquals(attrsScopeCopyFrom.refEffect, copyToAttrsScope.refEffect)
assertEquals(attrsBuilderCopyFrom.propertyUpdates, copyToAttrsBuilder.propertyUpdates) assertEquals(attrsScopeCopyFrom.propertyUpdates, copyToAttrsScope.propertyUpdates)
assertEquals(attrsBuilderCopyFrom.collectListeners(), copyToAttrsBuilder.collectListeners()) assertEquals(attrsScopeCopyFrom.collectListeners(), copyToAttrsScope.collectListeners())
} }
@Test @Test
fun attrsBuilderCopyFromPreservesExistingAttrs() { fun attrsBuilderCopyFromPreservesExistingAttrs() {
val attrsBuilderCopyFrom = AttrsBuilder<HTMLElement>().apply { val attrsScopeCopyFrom = AttrsScopeBuilder<HTMLElement>().apply {
attr("title", "customTitle") attr("title", "customTitle")
} }
val copyToAttrsBuilder = AttrsBuilder<HTMLElement>().apply { val copyToAttrsScope = AttrsScopeBuilder<HTMLElement>().apply {
id("id1") id("id1")
onClick { } onClick { }
style { style {
width(100.px) width(100.px)
} }
copyFrom(attrsBuilderCopyFrom) copyFrom(attrsScopeCopyFrom)
} }
assertEquals("id1", copyToAttrsBuilder.attributesMap["id"]) assertEquals("id1", copyToAttrsScope.attributesMap["id"])
assertEquals(StyleBuilderImpl().apply { width(100.px) }, copyToAttrsBuilder.styleBuilder) assertEquals(StyleScopeBuilder().apply { width(100.px) }, copyToAttrsScope.styleScope)
val listeners = copyToAttrsBuilder.collectListeners() val listeners = copyToAttrsScope.collectListeners()
assertEquals(1, listeners.size) assertEquals(1, listeners.size)
assertEquals("click", listeners[0].event) assertEquals("click", listeners[0].event)
} }
@Test @Test
fun attrsBuilderCopyFromOverridesSameAttrs() { fun attrsBuilderCopyFromOverridesSameAttrs() {
val attrsBuilderCopyFrom = AttrsBuilder<HTMLElement>().apply { val attrsScopeCopyFrom = AttrsScopeBuilder<HTMLElement>().apply {
attr("title", "customTitleNew") attr("title", "customTitleNew")
} }
val copyToAttrsBuilder = AttrsBuilder<HTMLElement>().apply { val copyToAttrsScope = AttrsScopeBuilder<HTMLElement>().apply {
attr("title", "customTitleOld") attr("title", "customTitleOld")
} }
assertEquals("customTitleOld", copyToAttrsBuilder.attributesMap["title"]) assertEquals("customTitleOld", copyToAttrsScope.attributesMap["title"])
copyToAttrsBuilder.copyFrom(attrsBuilderCopyFrom) copyToAttrsScope.copyFrom(attrsScopeCopyFrom)
assertEquals("customTitleNew", copyToAttrsBuilder.attributesMap["title"]) assertEquals("customTitleNew", copyToAttrsScope.attributesMap["title"])
} }
@Test @Test

5
web/core/src/jsTest/kotlin/elements/ElementsTests.kt
Unescape View File

@ -6,10 +6,9 @@
package org.jetbrains.compose.web.core.tests.elements package org.jetbrains.compose.web.core.tests.elements
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import kotlinx.browser.document import kotlinx.browser.document
import org.jetbrains.compose.web.ExperimentalComposeWebApi import org.jetbrains.compose.web.ExperimentalComposeWebApi
import org.jetbrains.compose.web.attributes.AttrsBuilder import org.jetbrains.compose.web.attributes.AttrsScope
import org.jetbrains.compose.web.testutils.* import org.jetbrains.compose.web.testutils.*
import org.jetbrains.compose.web.dom.* import org.jetbrains.compose.web.dom.*
import org.w3c.dom.HTMLElement import org.w3c.dom.HTMLElement
@ -113,7 +112,7 @@ class ElementsTests {
fun rawCreation() = runTest { fun rawCreation() = runTest {
@Composable @Composable
fun CustomElement( fun CustomElement(
attrs: AttrsBuilder<HTMLElement>.() -> Unit, attrs: AttrsScope<HTMLElement>.() -> Unit,
content: ContentBuilder<HTMLElement>? = null content: ContentBuilder<HTMLElement>? = null
) { ) {
TagElement( TagElement(

2
web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/tests/InputsTests.kt
Unescape View File

@ -343,7 +343,7 @@ class InputsTests {
}) })
Div(attrs = { Div(attrs = {
addEventListener(EventsListenerBuilder.INPUT) { addEventListener(EventsListenerScope.INPUT) {
state2 = "div caught an input" state2 = "div caught an input"
} }
}) { }) {

78
web/svg/src/jsMain/kotlin/org/jetbrains/compose/web/svg/svg.kt
Unescape View File

@ -62,7 +62,7 @@ private val View = ElementBuilderNS<SVGViewElement>("view", SVG_NS)
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun Svg( fun Svg(
viewBox: String? = null, viewBox: String? = null,
attrs: AttrBuilderContext<SVGElement>? = null, attrs: AttrsBuilder<SVGElement>? = null,
content: ContentBuilder<SVGElement>? = null content: ContentBuilder<SVGElement>? = null
) { ) {
TagElement( TagElement(
@ -79,7 +79,7 @@ fun Svg(
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun ElementScope<SVGElement>.SvgA( fun ElementScope<SVGElement>.SvgA(
href: String, href: String,
attrs: AttrBuilderContext<SVGAElement>? = null, attrs: AttrsBuilder<SVGAElement>? = null,
content: ContentBuilder<SVGAElement>? = null content: ContentBuilder<SVGAElement>? = null
) { ) {
TagElement( TagElement(
@ -98,7 +98,7 @@ fun ElementScope<SVGElement>.Circle(
cx: CSSLengthOrPercentageValue, cx: CSSLengthOrPercentageValue,
cy: CSSLengthOrPercentageValue, cy: CSSLengthOrPercentageValue,
r: CSSLengthOrPercentageValue, r: CSSLengthOrPercentageValue,
attrs: AttrBuilderContext<SVGCircleElement>? = null, attrs: AttrsBuilder<SVGCircleElement>? = null,
content: ContentBuilder<SVGCircleElement>? = null content: ContentBuilder<SVGCircleElement>? = null
) { ) {
TagElement( TagElement(
@ -120,7 +120,7 @@ fun ElementScope<SVGElement>.Circle(
cx: Number, cx: Number,
cy: Number, cy: Number,
r: Number, r: Number,
attrs: AttrBuilderContext<SVGCircleElement>? = null, attrs: AttrsBuilder<SVGCircleElement>? = null,
content: ContentBuilder<SVGCircleElement>? = null content: ContentBuilder<SVGCircleElement>? = null
) { ) {
TagElement( TagElement(
@ -142,7 +142,7 @@ fun ElementScope<SVGElement>.SvgText(
text: String, text: String,
x: Number = 0, x: Number = 0,
y: Number = 0, y: Number = 0,
attrs: AttrBuilderContext<SVGTextElement>? = null, attrs: AttrsBuilder<SVGTextElement>? = null,
) { ) {
TagElement( TagElement(
elementBuilder = Text, elementBuilder = Text,
@ -162,7 +162,7 @@ fun ElementScope<SVGElement>.SvgText(
fun ElementScope<SVGElement>.View( fun ElementScope<SVGElement>.View(
id: String, id: String,
viewBox: String, viewBox: String,
attrs: AttrBuilderContext<SVGViewElement>? = null, attrs: AttrsBuilder<SVGViewElement>? = null,
) { ) {
TagElement( TagElement(
elementBuilder = View, elementBuilder = View,
@ -182,7 +182,7 @@ fun ElementScope<SVGElement>.Rect(
y: Number, y: Number,
width: Number, width: Number,
height: Number, height: Number,
attrs: AttrBuilderContext<SVGRectElement>? = null, attrs: AttrsBuilder<SVGRectElement>? = null,
content: ContentBuilder<SVGRectElement>? = null content: ContentBuilder<SVGRectElement>? = null
) { ) {
TagElement( TagElement(
@ -205,7 +205,7 @@ fun ElementScope<SVGElement>.Rect(
y: CSSLengthOrPercentageValue, y: CSSLengthOrPercentageValue,
width: CSSLengthOrPercentageValue, width: CSSLengthOrPercentageValue,
height: CSSLengthOrPercentageValue, height: CSSLengthOrPercentageValue,
attrs: AttrBuilderContext<SVGRectElement>? = null, attrs: AttrsBuilder<SVGRectElement>? = null,
content: ContentBuilder<SVGRectElement>? = null content: ContentBuilder<SVGRectElement>? = null
) { ) {
TagElement( TagElement(
@ -228,7 +228,7 @@ fun ElementScope<SVGElement>.Ellipse(
cy: CSSLengthOrPercentageValue, cy: CSSLengthOrPercentageValue,
rx: CSSLengthOrPercentageValue, rx: CSSLengthOrPercentageValue,
ry: CSSLengthOrPercentageValue, ry: CSSLengthOrPercentageValue,
attrs: AttrBuilderContext<SVGEllipseElement>? = null, attrs: AttrsBuilder<SVGEllipseElement>? = null,
content: ContentBuilder<SVGEllipseElement>? = null content: ContentBuilder<SVGEllipseElement>? = null
) { ) {
TagElement( TagElement(
@ -251,7 +251,7 @@ fun ElementScope<SVGElement>.Ellipse(
cy: Number, cy: Number,
rx: Number, rx: Number,
ry: Number, ry: Number,
attrs: AttrBuilderContext<SVGEllipseElement>? = null, attrs: AttrsBuilder<SVGEllipseElement>? = null,
content: ContentBuilder<SVGEllipseElement>? = null content: ContentBuilder<SVGEllipseElement>? = null
) { ) {
TagElement( TagElement(
@ -272,7 +272,7 @@ fun ElementScope<SVGElement>.Ellipse(
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun ElementScope<SVGElement>.Symbol( fun ElementScope<SVGElement>.Symbol(
id: String? = null, id: String? = null,
attrs: AttrBuilderContext<SVGSymbolElement>? = null, attrs: AttrsBuilder<SVGSymbolElement>? = null,
content: ContentBuilder<SVGSymbolElement>? = null content: ContentBuilder<SVGSymbolElement>? = null
) { ) {
TagElement( TagElement(
@ -289,7 +289,7 @@ fun ElementScope<SVGElement>.Symbol(
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun ElementScope<SVGElement>.Use( fun ElementScope<SVGElement>.Use(
href: String, href: String,
attrs: AttrBuilderContext<SVGUseElement>? = null, attrs: AttrsBuilder<SVGUseElement>? = null,
content: ContentBuilder<SVGUseElement>? = null content: ContentBuilder<SVGUseElement>? = null
) { ) {
TagElement( TagElement(
@ -309,7 +309,7 @@ fun ElementScope<SVGElement>.Line(
y1: CSSLengthOrPercentageValue, y1: CSSLengthOrPercentageValue,
x2: CSSLengthOrPercentageValue, x2: CSSLengthOrPercentageValue,
y2: CSSLengthOrPercentageValue, y2: CSSLengthOrPercentageValue,
attrs: AttrBuilderContext<SVGLineElement>? = null, attrs: AttrsBuilder<SVGLineElement>? = null,
content: ContentBuilder<SVGLineElement>? = null content: ContentBuilder<SVGLineElement>? = null
) { ) {
TagElement( TagElement(
@ -332,7 +332,7 @@ fun ElementScope<SVGElement>.Line(
y1: Number, y1: Number,
x2: Number, x2: Number,
y2: Number, y2: Number,
attrs: AttrBuilderContext<SVGLineElement>? = null, attrs: AttrsBuilder<SVGLineElement>? = null,
content: ContentBuilder<SVGLineElement>? = null content: ContentBuilder<SVGLineElement>? = null
) { ) {
TagElement( TagElement(
@ -353,7 +353,7 @@ fun ElementScope<SVGElement>.Line(
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun ElementScope<SVGElement>.ClipPath( fun ElementScope<SVGElement>.ClipPath(
id: String, id: String,
attrs: AttrBuilderContext<SVGClipPathElement>? = null, attrs: AttrsBuilder<SVGClipPathElement>? = null,
content: ContentBuilder<SVGClipPathElement>? = null content: ContentBuilder<SVGClipPathElement>? = null
) { ) {
TagElement( TagElement(
@ -370,7 +370,7 @@ fun ElementScope<SVGElement>.ClipPath(
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun ElementScope<SVGElement>.Path( fun ElementScope<SVGElement>.Path(
d: String, d: String,
attrs: AttrBuilderContext<SVGPathElement>? = null, attrs: AttrsBuilder<SVGPathElement>? = null,
content: ContentBuilder<SVGPathElement>? = null content: ContentBuilder<SVGPathElement>? = null
) { ) {
TagElement( TagElement(
@ -386,7 +386,7 @@ fun ElementScope<SVGElement>.Path(
@Composable @Composable
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun ElementScope<SVGElement>.G( fun ElementScope<SVGElement>.G(
attrs: AttrBuilderContext<SVGElement>? = null, attrs: AttrsBuilder<SVGElement>? = null,
content: ContentBuilder<SVGElement>? = null content: ContentBuilder<SVGElement>? = null
) { ) {
TagElement( TagElement(
@ -400,7 +400,7 @@ fun ElementScope<SVGElement>.G(
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun ElementScope<SVGElement>.Image( fun ElementScope<SVGElement>.Image(
href: String, href: String,
attrs: AttrBuilderContext<SVGImageElement>? = null, attrs: AttrsBuilder<SVGImageElement>? = null,
content: ContentBuilder<SVGImageElement>? = null content: ContentBuilder<SVGImageElement>? = null
) { ) {
TagElement( TagElement(
@ -417,7 +417,7 @@ fun ElementScope<SVGElement>.Image(
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun ElementScope<SVGElement>.Mask( fun ElementScope<SVGElement>.Mask(
id: String? = null, id: String? = null,
attrs: AttrBuilderContext<SVGMaskElement>? = null, attrs: AttrsBuilder<SVGMaskElement>? = null,
content: ContentBuilder<SVGMaskElement>? = null content: ContentBuilder<SVGMaskElement>? = null
) { ) {
TagElement( TagElement(
@ -433,7 +433,7 @@ fun ElementScope<SVGElement>.Mask(
@Composable @Composable
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun ElementScope<SVGElement>.Defs( fun ElementScope<SVGElement>.Defs(
attrs: AttrBuilderContext<SVGDefsElement>? = null, attrs: AttrsBuilder<SVGDefsElement>? = null,
content: ContentBuilder<SVGDefsElement>? = null content: ContentBuilder<SVGDefsElement>? = null
) { ) {
TagElement( TagElement(
@ -447,7 +447,7 @@ fun ElementScope<SVGElement>.Defs(
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun ElementScope<SVGElement>.Pattern( fun ElementScope<SVGElement>.Pattern(
id: String, id: String,
attrs: AttrBuilderContext<SVGPatternElement>? = null, attrs: AttrsBuilder<SVGPatternElement>? = null,
content: ContentBuilder<SVGPatternElement>? = null content: ContentBuilder<SVGPatternElement>? = null
) { ) {
TagElement( TagElement(
@ -464,7 +464,7 @@ fun ElementScope<SVGElement>.Pattern(
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun ElementScope<SVGElement>.Polygon( fun ElementScope<SVGElement>.Polygon(
vararg points: Number, vararg points: Number,
attrs: AttrBuilderContext<SVGPolygonElement>? = null, attrs: AttrsBuilder<SVGPolygonElement>? = null,
content: ContentBuilder<SVGPolygonElement>? = null content: ContentBuilder<SVGPolygonElement>? = null
) { ) {
TagElement( TagElement(
@ -481,7 +481,7 @@ fun ElementScope<SVGElement>.Polygon(
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun ElementScope<SVGElement>.Polyline( fun ElementScope<SVGElement>.Polyline(
vararg points: Number, vararg points: Number,
attrs: AttrBuilderContext<SVGPolylineElement>? = null, attrs: AttrsBuilder<SVGPolylineElement>? = null,
content: ContentBuilder<SVGPolylineElement>? = null content: ContentBuilder<SVGPolylineElement>? = null
) { ) {
TagElement( TagElement(
@ -499,7 +499,7 @@ fun ElementScope<SVGElement>.Polyline(
fun ElementScope<SVGElement>.TextPath( fun ElementScope<SVGElement>.TextPath(
href: String, href: String,
text: String, text: String,
attrs: AttrBuilderContext<SVGTextPathElement>? = null, attrs: AttrsBuilder<SVGTextPathElement>? = null,
) { ) {
TagElement( TagElement(
elementBuilder = TextPath, elementBuilder = TextPath,
@ -516,7 +516,7 @@ fun ElementScope<SVGElement>.TextPath(
@Composable @Composable
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun ElementScope<SVGElement>.Animate( fun ElementScope<SVGElement>.Animate(
attrs: AttrBuilderContext<SVGElement>? = null, attrs: AttrsBuilder<SVGElement>? = null,
content: ContentBuilder<SVGElement>? = null content: ContentBuilder<SVGElement>? = null
) { ) {
TagElement( TagElement(
@ -529,7 +529,7 @@ fun ElementScope<SVGElement>.Animate(
@Composable @Composable
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun ElementScope<SVGElement>.AnimateMotion( fun ElementScope<SVGElement>.AnimateMotion(
attrs: AttrBuilderContext<SVGElement>? = null, attrs: AttrsBuilder<SVGElement>? = null,
content: ContentBuilder<SVGElement>? = null content: ContentBuilder<SVGElement>? = null
) { ) {
TagElement( TagElement(
@ -542,7 +542,7 @@ fun ElementScope<SVGElement>.AnimateMotion(
@Composable @Composable
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun ElementScope<SVGElement>.AnimateTransform( fun ElementScope<SVGElement>.AnimateTransform(
attrs: AttrBuilderContext<SVGElement>? = null, attrs: AttrsBuilder<SVGElement>? = null,
content: ContentBuilder<SVGElement>? = null content: ContentBuilder<SVGElement>? = null
) { ) {
TagElement( TagElement(
@ -556,7 +556,7 @@ fun ElementScope<SVGElement>.AnimateTransform(
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun ElementScope<SVGElement>.LinearGradient( fun ElementScope<SVGElement>.LinearGradient(
id: String? = null, id: String? = null,
attrs: AttrBuilderContext<SVGLinearGradientElement>? = null, attrs: AttrsBuilder<SVGLinearGradientElement>? = null,
content: ContentBuilder<SVGLinearGradientElement>? = null content: ContentBuilder<SVGLinearGradientElement>? = null
) { ) {
TagElement( TagElement(
@ -574,7 +574,7 @@ fun ElementScope<SVGElement>.LinearGradient(
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun ElementScope<SVGElement>.RadialGradient( fun ElementScope<SVGElement>.RadialGradient(
id: String? = null, id: String? = null,
attrs: AttrBuilderContext<SVGRadialGradientElement>? = null, attrs: AttrsBuilder<SVGRadialGradientElement>? = null,
content: ContentBuilder<SVGRadialGradientElement>? = null content: ContentBuilder<SVGRadialGradientElement>? = null
) { ) {
TagElement( TagElement(
@ -590,7 +590,7 @@ fun ElementScope<SVGElement>.RadialGradient(
@Composable @Composable
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun ElementScope<SVGElement>.Stop( fun ElementScope<SVGElement>.Stop(
attrs: AttrBuilderContext<SVGStopElement>? = null, attrs: AttrsBuilder<SVGStopElement>? = null,
content: ContentBuilder<SVGStopElement>? = null content: ContentBuilder<SVGStopElement>? = null
) { ) {
TagElement( TagElement(
@ -603,7 +603,7 @@ fun ElementScope<SVGElement>.Stop(
@Composable @Composable
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun ElementScope<SVGElement>.Switch( fun ElementScope<SVGElement>.Switch(
attrs: AttrBuilderContext<SVGSwitchElement>? = null, attrs: AttrsBuilder<SVGSwitchElement>? = null,
content: ContentBuilder<SVGSwitchElement>? = null content: ContentBuilder<SVGSwitchElement>? = null
) { ) {
TagElement( TagElement(
@ -617,7 +617,7 @@ fun ElementScope<SVGElement>.Switch(
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun ElementScope<SVGElement>.Title( fun ElementScope<SVGElement>.Title(
text: String, text: String,
attrs: AttrBuilderContext<SVGTitleElement>? = null, attrs: AttrsBuilder<SVGTitleElement>? = null,
) { ) {
TagElement( TagElement(
elementBuilder = Title, elementBuilder = Title,
@ -631,7 +631,7 @@ fun ElementScope<SVGElement>.Title(
@Composable @Composable
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun ElementScope<SVGElement>.Tspan( fun ElementScope<SVGElement>.Tspan(
attrs: AttrBuilderContext<SVGTSpanElement>? = null, attrs: AttrsBuilder<SVGTSpanElement>? = null,
content: ContentBuilder<SVGTSpanElement>? = null content: ContentBuilder<SVGTSpanElement>? = null
) { ) {
TagElement( TagElement(
@ -645,7 +645,7 @@ fun ElementScope<SVGElement>.Tspan(
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun ElementScope<SVGElement>.Desc( fun ElementScope<SVGElement>.Desc(
content: String, content: String,
attrs: AttrBuilderContext<SVGDescElement>? = null, attrs: AttrsBuilder<SVGDescElement>? = null,
) { ) {
TagElement( TagElement(
elementBuilder = Desc, elementBuilder = Desc,
@ -659,7 +659,7 @@ fun ElementScope<SVGElement>.Desc(
@Composable @Composable
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun ElementScope<SVGElement>.Marker( fun ElementScope<SVGElement>.Marker(
attrs: AttrBuilderContext<SVGMarkerElement>? = null, attrs: AttrsBuilder<SVGMarkerElement>? = null,
content: ContentBuilder<SVGMarkerElement>? = null content: ContentBuilder<SVGMarkerElement>? = null
) { ) {
TagElement( TagElement(
@ -672,7 +672,7 @@ fun ElementScope<SVGElement>.Marker(
@Composable @Composable
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun ElementScope<SVGElement>.Mpath( fun ElementScope<SVGElement>.Mpath(
attrs: AttrBuilderContext<SVGElement>? = null, attrs: AttrsBuilder<SVGElement>? = null,
content: ContentBuilder<SVGElement>? = null content: ContentBuilder<SVGElement>? = null
) { ) {
TagElement( TagElement(
@ -685,7 +685,7 @@ fun ElementScope<SVGElement>.Mpath(
@Composable @Composable
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun ElementScope<SVGElement>.Filter( fun ElementScope<SVGElement>.Filter(
attrs: AttrBuilderContext<SVGElement>? = null, attrs: AttrsBuilder<SVGElement>? = null,
content: ContentBuilder<SVGElement>? = null content: ContentBuilder<SVGElement>? = null
) { ) {
TagElement( TagElement(
@ -700,7 +700,7 @@ fun ElementScope<SVGElement>.Filter(
fun ElementScope<SVGElement>.Set( fun ElementScope<SVGElement>.Set(
attributeName: String, attributeName: String,
to: String, to: String,
attrs: AttrBuilderContext<SVGElement>? = null, attrs: AttrsBuilder<SVGElement>? = null,
content: ContentBuilder<SVGElement>? = null content: ContentBuilder<SVGElement>? = null
) { ) {
TagElement( TagElement(
@ -718,7 +718,7 @@ fun ElementScope<SVGElement>.Set(
@ExperimentalComposeWebSvgApi @ExperimentalComposeWebSvgApi
fun <T : SVGElement> SvgElement( fun <T : SVGElement> SvgElement(
name: String, name: String,
attrs: AttrBuilderContext<T>? = null, attrs: AttrsBuilder<T>? = null,
content: ContentBuilder<T>? = null content: ContentBuilder<T>? = null
) { ) {
TagElement( TagElement(

8
web/widgets/src/jsMain/kotlin/Modifier.kt
Unescape View File

@ -8,7 +8,7 @@ import org.jetbrains.compose.web.css.margin
import org.jetbrains.compose.web.css.px import org.jetbrains.compose.web.css.px
import org.jetbrains.compose.web.css.Color.RGB import org.jetbrains.compose.web.css.Color.RGB
import org.jetbrains.compose.common.internal.castOrCreate import org.jetbrains.compose.common.internal.castOrCreate
import org.jetbrains.compose.web.attributes.AttrsBuilder import org.jetbrains.compose.web.attributes.AttrsScope
@ExperimentalComposeWebWidgetsApi @ExperimentalComposeWebWidgetsApi
@Deprecated(message = webWidgetsDeprecationMessage) @Deprecated(message = webWidgetsDeprecationMessage)
@ -21,10 +21,10 @@ actual fun Modifier.background(color: Color): Modifier = castOrCreate().apply {
@ExperimentalComposeWebWidgetsApi @ExperimentalComposeWebWidgetsApi
@Deprecated(message = webWidgetsDeprecationMessage) @Deprecated(message = webWidgetsDeprecationMessage)
fun Modifier.asAttributeBuilderApplier( fun Modifier.asAttributeBuilderApplier(
passThroughHandler: (AttrsBuilder<*>.() -> Unit)? = null passThroughHandler: (AttrsScope<*>.() -> Unit)? = null
): AttrsBuilder<*>.() -> Unit = ): AttrsScope<*>.() -> Unit =
castOrCreate().let { modifier -> castOrCreate().let { modifier ->
val st: AttrsBuilder<*>.() -> Unit = { val st: AttrsScope<*>.() -> Unit = {
modifier.attrHandlers.forEach { it.invoke(this) } modifier.attrHandlers.forEach { it.invoke(this) }
style { style {

6
web/widgets/src/jsMain/kotlin/internal/ActualModifier.kt
Unescape View File

@ -4,19 +4,19 @@ import org.jetbrains.compose.annotations.webWidgetsDeprecationMessage
import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
import org.jetbrains.compose.common.ui.Modifier import org.jetbrains.compose.common.ui.Modifier
import org.jetbrains.compose.web.css.StyleBuilder import org.jetbrains.compose.web.css.StyleBuilder
import org.jetbrains.compose.web.attributes.AttrsBuilder import org.jetbrains.compose.web.attributes.AttrsScope
@ExperimentalComposeWebWidgetsApi @ExperimentalComposeWebWidgetsApi
@Deprecated(message = webWidgetsDeprecationMessage) @Deprecated(message = webWidgetsDeprecationMessage)
class ActualModifier : Modifier { class ActualModifier : Modifier {
val styleHandlers = mutableListOf<StyleBuilder.() -> Unit>() val styleHandlers = mutableListOf<StyleBuilder.() -> Unit>()
val attrHandlers = mutableListOf<AttrsBuilder<*>.() -> Unit>() val attrHandlers = mutableListOf<AttrsScope<*>.() -> Unit>()
fun add(builder: StyleBuilder.() -> Unit) { fun add(builder: StyleBuilder.() -> Unit) {
styleHandlers.add(builder) styleHandlers.add(builder)
} }
fun addAttributeBuilder(builder: AttrsBuilder<*>.() -> Unit) { fun addAttributeBuilder(builder: AttrsScope<*>.() -> Unit) {
attrHandlers.add(builder) attrHandlers.add(builder)
} }
} }

Write Preview
Loading…
Cancel
Save