⬆️ Bump Laminar to 17

README.md

@@ -239,7 +239,7 @@ In the `object`, add the following things:
 - add an object `RawImport` extending `js.Object` and annotated with both `@js.native` and `@JSImport`, specifying the correct import (available in the official docs), setting `JSImport.Default` as second argument
 - call `used(RawImport)` the line after (this is done to be sure that scala-js actually import the JS dependency)
 - define an alias `type Ref` as `dom.html.Element with RawElement`
-- define the protected `tag` variable of type `HtmlTag[Ref]` specifying the ui5 tag name from the doc (for example, for the Button component, it's `protected val tag: HtmlTag[Ref] = htmlTag("ui5-button")`). ⚠️: when copy-pasting from an existing component, this is usually the one we forget! When that happens, you will observe a component doing basically nothing. It's a sign you put the wrong import.
+- define the protected `tag` variable of type `CustomHtmlTag[Ref]` specifying the ui5 tag name from the doc (for example, for the Button component, it's `protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-button")`). ⚠️: when copy-pasting from an existing component, this is usually the one we forget! When that happens, you will observe a component doing basically nothing. It's a sign you put the wrong import.
 - create an empty object `slots`
 - create an empty object `events`
 - in the case where your component is linked to other components (for example a `TableCell` is always contained in `TableRow`, so the `TableRow` object will have a reference to the `TableCell` object)

build.sbt

@@ -24,7 +24,7 @@ val withSourceMaps = Def.task {
  Seq(s"${sourcesOptionName}:$localSourcesPath->$remoteSourcesPath") ++ usedScalacOptions.value
 }
 
-val laminarVersion = "16.0.0"
+val laminarVersion = "17.0.0-M2"
 
 inThisBuild(
  List(

web-components/src/main/scala/be/doeraene/webcomponents/WebComponent.scala

@@ -4,21 +4,21 @@ import com.raquo.laminar.api.L.*
 
 import org.scalajs.dom
 import com.raquo.laminar.nodes.ReactiveHtmlElement
-import com.raquo.laminar.tags.HtmlTag
+import com.raquo.laminar.tags.CustomHtmlTag
 
 /** Marker trait that all web components inherit.
  *
  * This can allow you to implement some shenanigans and abstract over some thins.
  */
 trait WebComponent {
- val id: HtmlProp[String] = idAttr
+ val id: HtmlProp[String, String] = idAttr
 
  type Ref <: dom.HTMLElement
 
- type ModFunction = this.type => Mod[ReactiveHtmlElement[Ref]]
+ type ModFunction  = this.type => Mod[ReactiveHtmlElement[Ref]]
  type ComponentMod = ModFunction | Mod[ReactiveHtmlElement[Ref]]
 
- protected def tag: HtmlTag[Ref]
+ protected def tag: CustomHtmlTag[Ref]
 
  /** Instantiate this component using the specified modifiers.
  *

web-components/src/main/scala/be/doeraene/webcomponents/ui5/Avatar.scala

@@ -3,7 +3,7 @@ package be.doeraene.webcomponents.ui5
 import be.doeraene.webcomponents.ui5.configkeys.{AvatarColorScheme, AvatarInitials, AvatarShape, AvatarSize, IconName}
 import com.raquo.laminar.codecs.{BooleanAsAttrPresenceCodec, StringAsIsCodec}
 import com.raquo.laminar.api.L.*
-//import com.raquo.laminar.tags.HtmlTag
+//import com.raquo.laminar.tags.CustomHtmlTag
 import com.raquo.laminar.keys.HtmlAttr
 import com.raquo.laminar.nodes.ReactiveHtmlElement
 import org.scalajs.dom
@@ -12,7 +12,7 @@ import scala.scalajs.js
 import scala.scalajs.js.annotation.JSImport
 import be.doeraene.webcomponents.WebComponent
 import be.doeraene.webcomponents.ui5.internal.Slot
-import com.raquo.laminar.tags.HtmlTag
+import com.raquo.laminar.tags.CustomHtmlTag
 
 /** An image-like component that has different display options for representing images and icons in different shapes and
  * sizes, depending on the use case. The shape can be circular or square. There are several predefined sizes, as well
@@ -35,7 +35,7 @@ object Avatar extends WebComponent with HasIcon {
 
  type Ref = dom.html.Element with RawElement
 
- protected val tag: HtmlTag[Ref] = htmlTag("ui5-avatar")
+ protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-avatar")
 
  lazy val accessibleName: HtmlAttr[String] = htmlAttr("accessible-name", StringAsIsCodec)
  lazy val colorScheme: HtmlAttr[AvatarColorScheme] = htmlAttr("color-scheme", AvatarColorScheme.AsStringCodec)

web-components/src/main/scala/be/doeraene/webcomponents/ui5/AvatarGroup.scala

@@ -4,7 +4,7 @@ import be.doeraene.webcomponents.ui5.configkeys.AvatarGroupType
 import be.doeraene.webcomponents.ui5.internal.Slot
 import com.raquo.laminar.codecs.{BooleanAsAttrPresenceCodec, StringAsIsCodec}
 import com.raquo.laminar.api.L.*
-import com.raquo.laminar.tags.HtmlTag
+import com.raquo.laminar.tags.CustomHtmlTag
 import com.raquo.laminar.keys.HtmlAttr
 import com.raquo.laminar.nodes.ReactiveHtmlElement
 import org.scalajs.dom
@@ -49,7 +49,7 @@ object AvatarGroup extends WebComponent {
 
  type Ref = dom.html.Element with RawElement
 
- protected val tag: HtmlTag[Ref] = htmlTag("ui5-avatar-group")
+ protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-avatar-group")
 
  lazy val tpe: HtmlAttr[AvatarGroupType] = htmlAttr("type", AvatarGroupType.AsStringCodec)
 

web-components/src/main/scala/be/doeraene/webcomponents/ui5/Badge.scala

@@ -4,8 +4,8 @@ import be.doeraene.webcomponents.ui5.configkeys.{ButtonDesign, ColourScheme, Ico
 import be.doeraene.webcomponents.ui5.internal.Slot
 import com.raquo.laminar.codecs.{BooleanAsAttrPresenceCodec, StringAsIsCodec}
 import com.raquo.laminar.api.L.*
-import com.raquo.laminar.tags.HtmlTag
-import com.raquo.laminar.keys.{HtmlAttr}
+import com.raquo.laminar.tags.CustomHtmlTag
+import com.raquo.laminar.keys.HtmlAttr
 import com.raquo.laminar.nodes.ReactiveHtmlElement
 import org.scalajs.dom
 
@@ -34,7 +34,7 @@ object Badge extends WebComponent {
 
  type Ref = dom.html.Element with RawElement
 
- protected val tag: HtmlTag[Ref] = htmlTag("ui5-badge")
+ protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-badge")
 
  lazy val colourScheme: HtmlAttr[ColourScheme] = htmlAttr("color-scheme", ColourScheme.AsStringCodec)
 
@@ -46,6 +46,4 @@ object Badge extends WebComponent {
 
  object events {}
 
-
-
 }

web-components/src/main/scala/be/doeraene/webcomponents/ui5/Bar.scala

@@ -4,8 +4,8 @@ import be.doeraene.webcomponents.ui5.configkeys.BarDesign
 import be.doeraene.webcomponents.ui5.internal.Slot
 import com.raquo.laminar.codecs.{BooleanAsAttrPresenceCodec, StringAsIsCodec}
 import com.raquo.laminar.api.L.*
-import com.raquo.laminar.tags.HtmlTag
-import com.raquo.laminar.keys.{HtmlAttr}
+import com.raquo.laminar.tags.CustomHtmlTag
+import com.raquo.laminar.keys.HtmlAttr
 import com.raquo.laminar.nodes.ReactiveHtmlElement
 import org.scalajs.dom
 
@@ -35,7 +35,7 @@ object Bar extends WebComponent {
 
  type Ref = dom.html.Element with RawElement
 
- protected val tag: HtmlTag[Ref] = htmlTag("ui5-bar")
+ protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-bar")
 
  lazy val design: HtmlAttr[BarDesign] = htmlAttr("design", BarDesign.AsStringCodec)
 
@@ -44,6 +44,4 @@ object Bar extends WebComponent {
  val startContent: Slot = new Slot("startContent")
  }
 
-
-
 }

web-components/src/main/scala/be/doeraene/webcomponents/ui5/BarcodeScannerDialog.scala

@@ -3,7 +3,7 @@ package be.doeraene.webcomponents.ui5
 import be.doeraene.webcomponents.ui5.internal.Slot
 import com.raquo.laminar.codecs.{BooleanAsAttrPresenceCodec, StringAsIsCodec}
 import com.raquo.laminar.api.L.*
-import com.raquo.laminar.tags.HtmlTag
+import com.raquo.laminar.tags.CustomHtmlTag
 import com.raquo.laminar.keys.HtmlAttr
 import com.raquo.laminar.nodes.ReactiveHtmlElement
 import org.scalajs.dom
@@ -39,7 +39,7 @@ object BarcodeScannerDialog extends WebComponent {
 
  type Ref = dom.html.Element with RawElement
 
- protected val tag: HtmlTag[Ref] = htmlTag("ui5-barcode-scanner-dialog")
+ protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-barcode-scanner-dialog")
 
  object slots {}
 

web-components/src/main/scala/be/doeraene/webcomponents/ui5/Breadcrumbs.scala

@@ -4,7 +4,7 @@ import be.doeraene.webcomponents.ui5.configkeys.{BreadcrumbsDesign, BreadcrumbsS
 import be.doeraene.webcomponents.ui5.eventtypes.EventWithPreciseTarget
 import com.raquo.laminar.codecs.{BooleanAsAttrPresenceCodec, StringAsIsCodec}
 import com.raquo.laminar.api.L.*
-import com.raquo.laminar.tags.HtmlTag
+import com.raquo.laminar.tags.CustomHtmlTag
 import com.raquo.laminar.keys.HtmlAttr
 import com.raquo.laminar.nodes.ReactiveHtmlElement
 import org.scalajs.dom
@@ -42,7 +42,7 @@ object Breadcrumbs extends WebComponent with HasIcon {
  }
  }
 
- protected val tag: HtmlTag[Ref] = htmlTag("ui5-breadcrumbs")
+ protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-breadcrumbs")
 
  lazy val separatorStyle: HtmlAttr[BreadcrumbsSeparatorStyle] =
  htmlAttr("separator-style", BreadcrumbsSeparatorStyle.AsStringCodec)

web-components/src/main/scala/be/doeraene/webcomponents/ui5/BreadcrumbsItem.scala

@@ -3,8 +3,8 @@ package be.doeraene.webcomponents.ui5
 import be.doeraene.webcomponents.ui5.configkeys.{ButtonDesign, IconName, LinkTarget}
 import com.raquo.laminar.codecs.{BooleanAsAttrPresenceCodec, StringAsIsCodec}
 import com.raquo.laminar.api.L.*
-import com.raquo.laminar.tags.HtmlTag
-import com.raquo.laminar.keys.{HtmlAttr}
+import com.raquo.laminar.tags.CustomHtmlTag
+import com.raquo.laminar.keys.HtmlAttr
 import com.raquo.laminar.nodes.ReactiveHtmlElement
 import org.scalajs.dom
 
@@ -32,7 +32,7 @@ object BreadcrumbsItem extends WebComponent with HasIcon {
 
  type Ref = dom.html.Element with RawElement
 
- protected val tag: HtmlTag[Ref] = htmlTag("ui5-breadcrumbs-item")
+ protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-breadcrumbs-item")
 
  lazy val accessibleName: HtmlAttr[String] =
  htmlAttr("accessible-name", StringAsIsCodec)
@@ -41,6 +41,4 @@ object BreadcrumbsItem extends WebComponent with HasIcon {
 
  lazy val target: HtmlAttr[LinkTarget] = htmlAttr("target", LinkTarget.AsStringCodec)
 
-
-
 }

web-components/src/main/scala/be/doeraene/webcomponents/ui5/BusyIndicator.scala

@@ -4,8 +4,8 @@ import be.doeraene.webcomponents.ui5.configkeys.{BusyIndicatorSize, ButtonDesign
 import be.doeraene.webcomponents.ui5.internal.Slot
 import com.raquo.laminar.codecs.{BooleanAsAttrPresenceCodec, StringAsIsCodec}
 import com.raquo.laminar.api.L.*
-import com.raquo.laminar.tags.HtmlTag
-import com.raquo.laminar.keys.{HtmlAttr}
+import com.raquo.laminar.tags.CustomHtmlTag
+import com.raquo.laminar.keys.HtmlAttr
 import com.raquo.laminar.nodes.ReactiveHtmlElement
 import org.scalajs.dom
 
@@ -36,7 +36,7 @@ object BusyIndicator extends WebComponent with HasText {
 
  type Ref = dom.html.Element with RawElement
 
- protected val tag: HtmlTag[Ref] = htmlTag("ui5-busy-indicator")
+ protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-busy-indicator")
 
  lazy val active: HtmlAttr[Boolean] = htmlAttr[Boolean]("active", BooleanAsAttrPresenceCodec)
 
@@ -45,6 +45,4 @@ object BusyIndicator extends WebComponent with HasText {
  lazy val size: HtmlAttr[BusyIndicatorSize] =
  htmlAttr[BusyIndicatorSize]("size", BusyIndicatorSize.AsStringCodec)
 
-
-
 }

web-components/src/main/scala/be/doeraene/webcomponents/ui5/Button.scala

@@ -4,7 +4,7 @@ import be.doeraene.webcomponents.ui5.configkeys.{ButtonDesign, ButtonType, IconN
 import be.doeraene.webcomponents.ui5.eventtypes.EventWithPreciseTarget
 import com.raquo.laminar.codecs.{BooleanAsAttrPresenceCodec, StringAsIsCodec}
 import com.raquo.laminar.api.L.*
-import com.raquo.laminar.tags.HtmlTag
+import com.raquo.laminar.tags.CustomHtmlTag
 import com.raquo.laminar.keys.HtmlAttr
 import com.raquo.laminar.nodes.ReactiveHtmlElement
 import org.scalajs.dom
@@ -33,7 +33,7 @@ object Button extends WebComponent with HasIcon {
 
  type Ref = dom.html.Element with RawElement
 
- protected val tag: HtmlTag[Ref] = htmlTag("ui5-button")
+ protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-button")
 
  lazy val design: HtmlAttr[ButtonDesign] = htmlAttr("design", ButtonDesign.AsStringCodec)
  lazy val disabled: HtmlAttr[Boolean] = htmlAttr("disabled", BooleanAsAttrPresenceCodec)

web-components/src/main/scala/be/doeraene/webcomponents/ui5/Calendar.scala

@@ -4,7 +4,7 @@ import be.doeraene.webcomponents.ui5.configkeys.{CalendarSelectionMode, Calendar
 import be.doeraene.webcomponents.ui5.internal.Slot
 import com.raquo.laminar.codecs.{BooleanAsAttrPresenceCodec, StringAsIsCodec}
 import com.raquo.laminar.api.L.*
-import com.raquo.laminar.tags.HtmlTag
+import com.raquo.laminar.tags.CustomHtmlTag
 import com.raquo.laminar.keys.HtmlAttr
 import com.raquo.laminar.nodes.ReactiveHtmlElement
 import org.scalajs.dom
@@ -41,7 +41,7 @@ object Calendar extends WebComponent {
 
  type Ref = dom.html.Element with RawElement
 
- protected val tag: HtmlTag[Ref] = htmlTag("ui5-calendar")
+ protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-calendar")
 
  lazy val hideWeekNumbers: HtmlAttr[Boolean] = htmlAttr("hide-week-numbers", BooleanAsAttrPresenceCodec)
 

web-components/src/main/scala/be/doeraene/webcomponents/ui5/CalendarDate.scala

@@ -3,8 +3,8 @@ package be.doeraene.webcomponents.ui5
 import be.doeraene.webcomponents.ui5.internal.Slot
 import com.raquo.laminar.codecs.{BooleanAsAttrPresenceCodec, StringAsIsCodec}
 import com.raquo.laminar.api.L.*
-import com.raquo.laminar.tags.HtmlTag
-import com.raquo.laminar.keys.{HtmlAttr}
+import com.raquo.laminar.tags.CustomHtmlTag
+import com.raquo.laminar.keys.HtmlAttr
 import com.raquo.laminar.nodes.ReactiveHtmlElement
 import org.scalajs.dom
 
@@ -27,12 +27,10 @@ object CalendarDate extends WebComponent with HasValue {
 
  type Ref = dom.html.Element with RawElement
 
- protected val tag: HtmlTag[Ref] = htmlTag("ui5-date")
+ protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-date")
 
  object slots {}
 
  object events {}
 
-
-
 }

web-components/src/main/scala/be/doeraene/webcomponents/ui5/Card.scala

@@ -4,8 +4,8 @@ import be.doeraene.webcomponents.ui5.configkeys.{ButtonDesign, ColourScheme, Ico
 import be.doeraene.webcomponents.ui5.internal.Slot
 import com.raquo.laminar.codecs.{BooleanAsAttrPresenceCodec, StringAsIsCodec}
 import com.raquo.laminar.api.L.*
-import com.raquo.laminar.tags.HtmlTag
-import com.raquo.laminar.keys.{HtmlAttr}
+import com.raquo.laminar.tags.CustomHtmlTag
+import com.raquo.laminar.keys.HtmlAttr
 import com.raquo.laminar.nodes.ReactiveHtmlElement
 import org.scalajs.dom
 
@@ -33,16 +33,14 @@ object Card extends WebComponent with HasAccessibleName {
 
  type Ref = dom.html.Element with RawElement
 
- protected val tag: HtmlTag[Ref] = htmlTag("ui5-card")
+ protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-card")
 
  object slots {
 
  /** Note: Use ui5-card-header for the intended design. */
  val header: Slot = new Slot("header")
  }
 
-
-
  def header: CardHeader.type = CardHeader
 
 }

web-components/src/main/scala/be/doeraene/webcomponents/ui5/CardHeader.scala

@@ -4,8 +4,8 @@ import be.doeraene.webcomponents.ui5.configkeys.{ButtonDesign, ColourScheme, Ico
 import be.doeraene.webcomponents.ui5.internal.Slot
 import com.raquo.laminar.codecs.{BooleanAsAttrPresenceCodec, StringAsIsCodec}
 import com.raquo.laminar.api.L.*
-import com.raquo.laminar.tags.HtmlTag
-import com.raquo.laminar.keys.{HtmlAttr}
+import com.raquo.laminar.tags.CustomHtmlTag
+import com.raquo.laminar.keys.HtmlAttr
 import com.raquo.laminar.nodes.ReactiveHtmlElement
 import org.scalajs.dom
 
@@ -32,7 +32,7 @@ object CardHeader extends WebComponent {
 
  type Ref = dom.html.Element with RawElement
 
- protected val tag: HtmlTag[Ref] = htmlTag("ui5-card-header")
+ protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-card-header")
 
  lazy val interactive: HtmlAttr[Boolean] = htmlAttr("interactive", BooleanAsAttrPresenceCodec)
 
@@ -52,6 +52,4 @@ object CardHeader extends WebComponent {
  val onClick: EventProp[dom.MouseEvent] = new EventProp("click")
  }
 
-
-
 }

web-components/src/main/scala/be/doeraene/webcomponents/ui5/Carousel.scala

@@ -5,7 +5,7 @@ import be.doeraene.webcomponents.ui5.eventtypes.{HasDetail, HasSelectedIndex}
 import be.doeraene.webcomponents.ui5.internal.Slot
 import com.raquo.laminar.codecs.{BooleanAsAttrPresenceCodec, IntAsStringCodec, StringAsIsCodec}
 import com.raquo.laminar.api.L.*
-import com.raquo.laminar.tags.HtmlTag
+import com.raquo.laminar.tags.CustomHtmlTag
 import com.raquo.laminar.keys.HtmlAttr
 import com.raquo.laminar.nodes.ReactiveHtmlElement
 import org.scalajs.dom
@@ -39,7 +39,7 @@ object Carousel extends WebComponent {
 
  type Ref = dom.html.Element with RawElement
 
- protected val tag: HtmlTag[Ref] = htmlTag("ui5-carousel")
+ protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-carousel")
 
  lazy val arrowsPlacement: HtmlAttr[CarouselArrowsPlacement] =
  htmlAttr("arrows-placement", CarouselArrowsPlacement.AsStringCodec)

web-components/src/main/scala/be/doeraene/webcomponents/ui5/CheckBox.scala

@@ -4,8 +4,8 @@ import be.doeraene.webcomponents.ui5.configkeys.{ButtonDesign, IconName, ValueSt
 import be.doeraene.webcomponents.ui5.eventtypes.EventWithPreciseTarget
 import com.raquo.laminar.codecs.{BooleanAsAttrPresenceCodec, StringAsIsCodec}
 import com.raquo.laminar.api.L.*
-import com.raquo.laminar.tags.HtmlTag
-import com.raquo.laminar.keys.{HtmlAttr}
+import com.raquo.laminar.tags.CustomHtmlTag
+import com.raquo.laminar.keys.HtmlAttr
 import com.raquo.laminar.nodes.ReactiveHtmlElement
 import org.scalajs.dom
 
@@ -35,7 +35,7 @@ object CheckBox extends WebComponent with HasIcon with HasAccessibleName with Ha
 
  type Ref = dom.html.Element with RawElement
 
- protected val tag: HtmlTag[Ref] = htmlTag("ui5-checkbox")
+ protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-checkbox")
 
  lazy val checked: HtmlAttr[Boolean] = htmlAttr("checked", BooleanAsAttrPresenceCodec)
  lazy val disabled: HtmlAttr[Boolean] = htmlAttr("disabled", BooleanAsAttrPresenceCodec)
@@ -53,6 +53,4 @@ object CheckBox extends WebComponent with HasIcon with HasAccessibleName with Ha
  val onChange: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("change")
  }
 
-
-
 }