web: AttrsScope interface extraction (#1694)

* AttrsScope interface extraction

* PR amendments

* resolve conflicts

* remove yarn lockfile

* move submodule back

(cherry picked from commit f98dfbc761)

.gitignore

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

web/benchmark-core/build.gradle.kts

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

web/build.gradle.kts

@@ -1,4 +1,3 @@
-import org.gradle.api.tasks.testing.AbstractTestTask
 import org.gradle.api.tasks.testing.logging.TestExceptionFormat
 import org.jetbrains.compose.gradle.kotlinKarmaConfig
 
@@ -34,7 +33,7 @@ subprojects {
     group = "org.jetbrains.compose.web"
     version = COMPOSE_WEB_VERSION
 
-    tasks.withType<org.jetbrains.kotlin.gradle.tasks.KotlinCompile>() {
+    tasks.withType<org.jetbrains.kotlin.gradle.tasks.KotlinCompile> {
         kotlinOptions.jvmTarget = "11"
     }
 
@@ -54,6 +53,16 @@ subprojects {
     }
 
     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 {
             dependsOn(tasks.named("jsTest"))
             doLast {
@@ -72,7 +81,6 @@ subprojects {
         }
     }
 
-
     if (isSampleProject()) {
         val printBundleSize by tasks.registering {
             dependsOn(tasks.named("jsBrowserDistribution"))

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/Attrs.kt

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

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/AttrsScope.kt

@@ -2,35 +2,35 @@ package org.jetbrains.compose.web.attributes
 
 import androidx.compose.runtime.DisposableEffectResult
 import androidx.compose.runtime.DisposableEffectScope
-import org.jetbrains.compose.web.css.StyleBuilder
-import org.jetbrains.compose.web.css.StyleBuilderImpl
+import org.jetbrains.compose.web.css.StyleScope
+import org.jetbrains.compose.web.css.StyleScopeBuilder
+import org.jetbrains.compose.web.internal.runtime.ComposeWebInternalApi
 import org.w3c.dom.Element
 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,
  * 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]
  * are extracted to a separate methods.
  *
  */
-open class AttrsBuilder<TElement : Element> : EventsListenerBuilder() {
-    internal val attributesMap = mutableMapOf<String, String>()
-    internal val styleBuilder = StyleBuilderImpl()
+interface AttrsScope<TElement : Element>: EventsListenerScope {
+    @ComposeWebInternalApi
+    val attributesMap: Map<String, String>
+    @ComposeWebInternalApi
+    val styleScope: StyleScope
     
-    internal val propertyUpdates = mutableListOf<Pair<(Element, Any) -> Unit, Any>>()
-    internal var refEffect: (DisposableEffectScope.(TElement) -> DisposableEffectResult)? = null
-
-    internal var inputControlledValueSet = false
-    internal var inputDefaultValueSet = false
-    internal var inputControlledCheckedSet = false
-    internal var inputDefaultCheckedSet = false
+    @ComposeWebInternalApi
+    val propertyUpdates: List<Pair<(Element, Any) -> Unit, Any>>
+    @ComposeWebInternalApi
+    var refEffect: (DisposableEffectScope.(TElement) -> DisposableEffectResult)?
     
     /**
-     * [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:
      * ```
@@ -39,8 +39,8 @@ open class AttrsBuilder<TElement : Element> : EventsListenerBuilder() {
      * })
      * ```
      */
-    fun style(builder: StyleBuilder.() -> Unit) {
-        styleBuilder.apply(builder)
+    fun style(builder: StyleScope.() -> Unit) {
+        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)
      */
-    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
     }
 
@@ -91,7 +154,7 @@ open class AttrsBuilder<TElement : Element> : EventsListenerBuilder() {
      *
      * 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
         return this
     }
@@ -114,7 +177,7 @@ open class AttrsBuilder<TElement : Element> : EventsListenerBuilder() {
      * ```
      */
     @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>)
     }
 
@@ -122,27 +185,14 @@ open class AttrsBuilder<TElement : Element> : EventsListenerBuilder() {
         return attributesMap
     }
     
-    internal fun copyFrom(attrsBuilder: AttrsBuilder<TElement>) {
-        refEffect = attrsBuilder.refEffect
-        styleBuilder.copyFrom(attrsBuilder.styleBuilder)
+    override fun copyFrom(attrsScope: AttrsScope<TElement>) {
+        refEffect = attrsScope.refEffect
+        styleScope.copyFrom(attrsScope.styleScope)
         
-        attributesMap.putAll(attrsBuilder.attributesMap)
-        propertyUpdates.addAll(attrsBuilder.propertyUpdates)
+        attributesMap.putAll(attrsScope.attributesMap)
+        propertyUpdates.addAll(attrsScope.propertyUpdates)
         
-        copyListenersFrom(attrsBuilder)
-    }
-
-    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"
+        copyListenersFrom(attrsScope)
     }
 }
 

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/EventsListenerScope.kt

@@ -5,97 +5,106 @@ import androidx.compose.web.events.SyntheticEvent
 import androidx.compose.web.events.SyntheticMouseEvent
 import androidx.compose.web.events.SyntheticWheelEvent
 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
 
 private typealias SyntheticMouseEventListener = (SyntheticMouseEvent) -> Unit
 private typealias SyntheticWheelEventListener = (SyntheticWheelEvent) -> 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
  * exist dedicated method. In case you need to support event that doesn't have such method,
  * use [addEventListener]
  */
-open class EventsListenerBuilder {
+interface EventsListenerScope {
+    @ComposeWebInternalApi
+    val listeners: List<SyntheticEventListener<*>>
     
-    protected val listeners = mutableListOf<SyntheticEventListener<*>>()
+    @ComposeWebInternalApi
+    fun registerEventListener(listener: SyntheticEventListener<*>)
     
     /* Mouse Events */
     
     fun onContextMenu(listener: SyntheticMouseEventListener) {
-        listeners.add(MouseEventListener(CONTEXTMENU, listener))
+        registerEventListener(MouseEventListener(CONTEXTMENU, listener))
     }
     
     fun onClick(listener: SyntheticMouseEventListener) {
-        listeners.add(MouseEventListener(CLICK, listener))
+        registerEventListener(MouseEventListener(CLICK, listener))
     }
     
     fun onDoubleClick(listener: SyntheticMouseEventListener) {
-        listeners.add(MouseEventListener(DBLCLICK, listener))
+        registerEventListener(MouseEventListener(DBLCLICK, listener))
     }
     
     fun onMouseDown(listener: SyntheticMouseEventListener) {
-        listeners.add(MouseEventListener(MOUSEDOWN, listener))
+        registerEventListener(MouseEventListener(MOUSEDOWN, listener))
     }
     
     fun onMouseUp(listener: SyntheticMouseEventListener) {
-        listeners.add(MouseEventListener(MOUSEUP, listener))
+        registerEventListener(MouseEventListener(MOUSEUP, listener))
     }
     
     fun onMouseEnter(listener: SyntheticMouseEventListener) {
-        listeners.add(MouseEventListener(MOUSEENTER, listener))
+        registerEventListener(MouseEventListener(MOUSEENTER, listener))
     }
     
     fun onMouseLeave(listener: SyntheticMouseEventListener) {
-        listeners.add(MouseEventListener(MOUSELEAVE, listener))
+        registerEventListener(MouseEventListener(MOUSELEAVE, listener))
     }
     
     fun onMouseMove(listener: SyntheticMouseEventListener) {
-        listeners.add(MouseEventListener(MOUSEMOVE, listener))
+        registerEventListener(MouseEventListener(MOUSEMOVE, listener))
     }
     
     fun onMouseOut(listener: SyntheticMouseEventListener) {
-        listeners.add(MouseEventListener(MOUSEOUT, listener))
+        registerEventListener(MouseEventListener(MOUSEOUT, listener))
     }
     
     fun onMouseOver(listener: SyntheticMouseEventListener) {
-        listeners.add(MouseEventListener(MOUSEOVER, listener))
+        registerEventListener(MouseEventListener(MOUSEOVER, listener))
     }
     
     fun onWheel(listener: SyntheticWheelEventListener) {
-        listeners.add(MouseWheelEventListener(WHEEL, listener))
+        registerEventListener(MouseWheelEventListener(WHEEL, listener))
     }
     
     /* Drag Events */
     
     fun onDrag(listener: SyntheticDragEventListener) {
-        listeners.add(DragEventListener(DRAG, listener))
+        registerEventListener(DragEventListener(DRAG, listener))
     }
     
     fun onDrop(listener: SyntheticDragEventListener) {
-        listeners.add(DragEventListener(DROP, listener))
+        registerEventListener(DragEventListener(DROP, listener))
     }
     
     fun onDragStart(listener: SyntheticDragEventListener) {
-        listeners.add(DragEventListener(DRAGSTART, listener))
+        registerEventListener(DragEventListener(DRAGSTART, listener))
     }
     
     fun onDragEnd(listener: SyntheticDragEventListener) {
-        listeners.add(DragEventListener(DRAGEND, listener))
+        registerEventListener(DragEventListener(DRAGEND, listener))
     }
     
     fun onDragOver(listener: SyntheticDragEventListener) {
-        listeners.add(DragEventListener(DRAGOVER, listener))
+        registerEventListener(DragEventListener(DRAGOVER, listener))
     }
     
     fun onDragEnter(listener: SyntheticDragEventListener) {
-        listeners.add(DragEventListener(DRAGENTER, listener))
+        registerEventListener(DragEventListener(DRAGENTER, listener))
     }
     
     fun onDragLeave(listener: SyntheticDragEventListener) {
-        listeners.add(DragEventListener(DRAGLEAVE, listener))
+        registerEventListener(DragEventListener(DRAGLEAVE, listener))
     }
     
     /* End of Drag Events */
@@ -103,15 +112,15 @@ open class EventsListenerBuilder {
     /* Clipboard Events */
     
     fun onCopy(listener: (SyntheticClipboardEvent) -> Unit) {
-        listeners.add(ClipboardEventListener(COPY, listener))
+        registerEventListener(ClipboardEventListener(COPY, listener))
     }
     
     fun onCut(listener: (SyntheticClipboardEvent) -> Unit) {
-        listeners.add(ClipboardEventListener(CUT, listener))
+        registerEventListener(ClipboardEventListener(CUT, listener))
     }
     
     fun onPaste(listener: (SyntheticClipboardEvent) -> Unit) {
-        listeners.add(ClipboardEventListener(PASTE, listener))
+        registerEventListener(ClipboardEventListener(PASTE, listener))
     }
     
     /* End of Clipboard Events */
@@ -119,11 +128,11 @@ open class EventsListenerBuilder {
     /* Keyboard Events */
     
     fun onKeyDown(listener: (SyntheticKeyboardEvent) -> Unit) {
-        listeners.add(KeyboardEventListener(KEYDOWN, listener))
+        registerEventListener(KeyboardEventListener(KEYDOWN, listener))
     }
     
     fun onKeyUp(listener: (SyntheticKeyboardEvent) -> Unit) {
-        listeners.add(KeyboardEventListener(KEYUP, listener))
+        registerEventListener(KeyboardEventListener(KEYUP, listener))
     }
     
     /* End of Keyboard Events */
@@ -131,19 +140,19 @@ open class EventsListenerBuilder {
     /* Focus Events */
     
     fun onFocus(listener: (SyntheticFocusEvent) -> Unit) {
-        listeners.add(FocusEventListener(FOCUS, listener))
+        registerEventListener(FocusEventListener(FOCUS, listener))
     }
     
     fun onBlur(listener: (SyntheticFocusEvent) -> Unit) {
-        listeners.add(FocusEventListener(BLUR, listener))
+        registerEventListener(FocusEventListener(BLUR, listener))
     }
     
     fun onFocusIn(listener: (SyntheticFocusEvent) -> Unit) {
-        listeners.add(FocusEventListener(FOCUSIN, listener))
+        registerEventListener(FocusEventListener(FOCUSIN, listener))
     }
     
     fun onFocusOut(listener: (SyntheticFocusEvent) -> Unit) {
-        listeners.add(FocusEventListener(FOCUSOUT, listener))
+        registerEventListener(FocusEventListener(FOCUSOUT, listener))
     }
     
     /* End of Focus Events */
@@ -151,19 +160,19 @@ open class EventsListenerBuilder {
     /* Touch Events */
     
     fun onTouchCancel(listener: (SyntheticTouchEvent) -> Unit) {
-        listeners.add(TouchEventListener(TOUCHCANCEL, listener))
+        registerEventListener(TouchEventListener(TOUCHCANCEL, listener))
     }
     
     fun onTouchMove(listener: (SyntheticTouchEvent) -> Unit) {
-        listeners.add(TouchEventListener(TOUCHMOVE, listener))
+        registerEventListener(TouchEventListener(TOUCHMOVE, listener))
     }
     
     fun onTouchEnd(listener: (SyntheticTouchEvent) -> Unit) {
-        listeners.add(TouchEventListener(TOUCHEND, listener))
+        registerEventListener(TouchEventListener(TOUCHEND, listener))
     }
     
     fun onTouchStart(listener: (SyntheticTouchEvent) -> Unit) {
-        listeners.add(TouchEventListener(TOUCHSTART, listener))
+        registerEventListener(TouchEventListener(TOUCHSTART, listener))
     }
     
     /* End of Touch Events */
@@ -171,24 +180,24 @@ open class EventsListenerBuilder {
     /* Animation Events */
     
     fun onAnimationEnd(listener: (SyntheticAnimationEvent) -> Unit) {
-        listeners.add(AnimationEventListener(ANIMATIONEND, listener))
+        registerEventListener(AnimationEventListener(ANIMATIONEND, listener))
     }
     
     fun onAnimationIteration(listener: (SyntheticAnimationEvent) -> Unit) {
-        listeners.add(AnimationEventListener(ANIMATIONITERATION, listener))
+        registerEventListener(AnimationEventListener(ANIMATIONITERATION, listener))
     }
     
     fun onAnimationStart(listener: (SyntheticAnimationEvent) -> Unit) {
-        listeners.add(AnimationEventListener(ANIMATIONSTART, listener))
+        registerEventListener(AnimationEventListener(ANIMATIONSTART, listener))
     }
     
     /* End of Animation Events */
     
     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
@@ -200,19 +209,18 @@ open class EventsListenerBuilder {
         eventName: String,
         listener: (T) -> Unit
     ) {
-        listeners.add(SyntheticEventListener(eventName, listener))
+        registerEventListener(SyntheticEventListener(eventName, listener))
     }
     
     fun addEventListener(
         eventName: String,
         listener: (SyntheticEvent<EventTarget>) -> Unit
     ) {
-        listeners.add(SyntheticEventListener(eventName, listener))
+        registerEventListener(SyntheticEventListener(eventName, listener))
     }
     
-    internal fun copyListenersFrom(from: EventsListenerBuilder) {
-        listeners.addAll(from.listeners)
-    }
+    @ComposeWebInternalApi
+    fun copyListenersFrom(from: EventsListenerScope)
     
     companion object {
         const val COPY = "copy"
@@ -267,3 +275,15 @@ open class EventsListenerBuilder {
         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)
+    }
+}

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/SyntheticEventListener.kt

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

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/builders/InputAttrsScope.kt

@@ -7,13 +7,22 @@ package org.jetbrains.compose.web.attributes.builders
 
 import androidx.compose.web.events.SyntheticEvent
 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.SyntheticInputEvent
 import org.jetbrains.compose.web.events.SyntheticSelectEvent
 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:
  *
  * [value] - sets the current input's value.
@@ -28,11 +37,11 @@ import org.w3c.dom.HTMLInputElement
  * [onBeforeInput] - add `beforeinput` event listener
  * [onSelect] - add `select` event listener
  */
-class InputAttrsBuilder<ValueType>(
+class InputAttrsScope<ValueType>(
     val inputType: InputType<ValueType>
-) : AttrsBuilder<HTMLInputElement>() {
+) : AttrsScopeBuilder<HTMLInputElement>() {
 
-    fun value(value: String): InputAttrsBuilder<ValueType> {
+    fun value(value: String): InputAttrsScope<ValueType> {
         when (inputType) {
             InputType.Checkbox,
             InputType.Radio,
@@ -43,27 +52,27 @@ class InputAttrsBuilder<ValueType>(
         return this
     }
 
-    fun value(value: Number): InputAttrsBuilder<ValueType> {
+    fun value(value: Number): InputAttrsScope<ValueType> {
         value(value.toString())
         return this
     }
 
-    fun checked(checked: Boolean): InputAttrsBuilder<ValueType> {
+    fun checked(checked: Boolean): InputAttrsScope<ValueType> {
         prop(setCheckedValue, checked)
         return this
     }
 
-    fun defaultChecked(): InputAttrsBuilder<ValueType> {
+    fun defaultChecked(): InputAttrsScope<ValueType> {
         attr("checked", "")
         return this
     }
 
-    fun defaultValue(value: String): InputAttrsBuilder<ValueType> {
+    fun defaultValue(value: String): InputAttrsScope<ValueType> {
         attr("value", value)
         return this
     }
 
-    fun defaultValue(value: Number): InputAttrsBuilder<ValueType> {
+    fun defaultValue(value: Number): InputAttrsScope<ValueType> {
         attr("value", value.toString())
         return this
     }
@@ -77,25 +86,25 @@ class InputAttrsBuilder<ValueType>(
     fun onInput(
         listener: (SyntheticInputEvent<ValueType, HTMLInputElement>) -> Unit
     ) {
-        listeners.add(InputEventListener(eventName = INPUT, inputType, listener))
+        registerEventListener(InputEventListener(eventName = INPUT, inputType, listener))
     }
 
     fun onChange(
         listener: (SyntheticChangeEvent<ValueType, HTMLInputElement>) -> Unit
     ) {
-        listeners.add(ChangeEventListener(inputType, listener))
+        registerEventListener(ChangeEventListener(inputType, listener))
     }
 
     fun onBeforeInput(
         listener: (SyntheticInputEvent<ValueType, HTMLInputElement>) -> Unit
     ) {
-        listeners.add(InputEventListener(eventName = BEFOREINPUT, inputType, listener))
+        registerEventListener(InputEventListener(eventName = BEFOREINPUT, inputType, listener))
     }
 
     fun onSelect(
         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 set(key: Any, value: Any): JsWeakMap
 }
-
-

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/builders/SelectAttrsScope.kt

@@ -5,27 +5,33 @@
 
 package androidx.compose.web.attributes
 
-import org.jetbrains.compose.web.attributes.AttrsBuilder
-import org.jetbrains.compose.web.attributes.EventsListenerBuilder.Companion.CHANGE
-import org.jetbrains.compose.web.attributes.EventsListenerBuilder.Companion.INPUT
+import org.jetbrains.compose.web.attributes.AttrsScopeBuilder
+import org.jetbrains.compose.web.attributes.EventsListenerScope.Companion.CHANGE
+import org.jetbrains.compose.web.attributes.EventsListenerScope.Companion.INPUT
 import org.jetbrains.compose.web.attributes.SyntheticEventListener
 import org.jetbrains.compose.web.events.SyntheticChangeEvent
 import org.jetbrains.compose.web.events.SyntheticInputEvent
 import org.w3c.dom.HTMLSelectElement
 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(
         listener: (SyntheticInputEvent<String?, HTMLSelectElement>) -> Unit
     ) {
-        listeners.add(SelectInputEventListener(INPUT, listener))
+        registerEventListener(SelectInputEventListener(INPUT, listener))
     }
 
     fun onChange(
         listener: (SyntheticChangeEvent<String?, HTMLSelectElement>) -> Unit
     ) {
-        listeners.add(SelectChangeEventListener(listener))
+        registerEventListener(SelectChangeEventListener(listener))
     }
 }
 

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/builders/TextAreaAttrsBuilder.kt

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

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/builders/TextAreaAttrsScope.kt

@@ -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))
+    }
+}

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSRules.kt

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

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/StyleScope.kt

@@ -11,7 +11,7 @@ import org.jetbrains.compose.web.internal.runtime.ComposeWebInternalApi
 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:
  * 1. Add inlined css properties to the element (@see [property])
  * 2. Set values to CSS variables (@see [variable])
@@ -125,13 +125,26 @@ fun <TValue : StylePropertyValue> variable() =
     }
 
 interface StyleHolder {
+    @ComposeWebInternalApi
     val properties: StylePropertyList
+    @ComposeWebInternalApi
     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)
 @Suppress("EqualsOrHashCode")
-open class StyleBuilderImpl : StyleBuilder, StyleHolder {
+open class StyleScopeBuilder : StyleScope {
     override val properties: MutableStylePropertyList = mutableListOf()
     override val variables: MutableStylePropertyList = mutableListOf()
 
@@ -151,7 +164,7 @@ open class StyleBuilderImpl : StyleBuilder, StyleHolder {
         } else false
     }
 
-    internal fun copyFrom(sb: StyleBuilderImpl) {
+    override fun copyFrom(sb: StyleScope) {
         properties.addAll(sb.properties)
         variables.addAll(sb.variables)
     }

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Base.kt

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

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt

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

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/InputElements.kt

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

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/RadioGroup.kt

@@ -3,10 +3,10 @@ package org.jetbrains.compose.web.dom
 import androidx.compose.runtime.*
 import org.jetbrains.compose.web.ExperimentalComposeWebApi
 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
 
-typealias RadioInputAttrsBuilder = (InputAttrsBuilder<Boolean>.() -> Unit)
+typealias RadioInputAttrsBuilder = (InputAttrsScope<Boolean>.() -> Unit)
 
 /**
  * @param value - sets `value` attribute

web/core/src/jsTest/kotlin/elements/AttributesTests.kt

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

web/core/src/jsTest/kotlin/elements/ElementsTests.kt

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

web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/tests/InputsTests.kt

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

web/svg/src/jsMain/kotlin/org/jetbrains/compose/web/svg/svg.kt

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

web/widgets/src/jsMain/kotlin/Modifier.kt

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

web/widgets/src/jsMain/kotlin/internal/ActualModifier.kt

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