⬆️ Move to scala 3.4 and laminar 17 rc1

README.md

@@ -238,7 +238,7 @@ In the `object`, add the following things:
 - create a trait `RawElement` extending `js.Object` and annotated with `@js.native`
 - 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 an alias `type Ref` as `dom.html.Element & RawElement`
 - 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`
@@ -288,7 +288,7 @@ All these events are represented as values of type `EventProp`. It takes a type
 
 Some common patterns are:
 
-- values have a `detail` field of a certain type. The library has a helper `HasDetail` trait, and in that case the complete type will look like `dom.Event with HasDetail[SomeOtherType]`. An example taken from the `Table` component is `val onSelectionChange = new EventProp[dom.Event with HasDetail[TableSelectionChangeDetail]]("selection-change")`.
+- values have a `detail` field of a certain type. The library has a helper `HasDetail` trait, and in that case the complete type will look like `dom.Event & HasDetail[SomeOtherType]`. An example taken from the `Table` component is `val onSelectionChange = new EventProp[dom.Event & HasDetail[TableSelectionChangeDetail]]("selection-change")`.
 - events with a more precise target type (when you need the precise type instead of just `HtmlElement`). This type is `EventWithPreciseTarget` and already extends `dom.Event`. An example from the `CheckBox` component is `val onChange: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("change")`
 - a combination of the above (combined with `&`)
 

build.sbt

@@ -1,5 +1,5 @@
 import java.nio.charset.StandardCharsets
-ThisBuild / scalaVersion := "3.3.0"
+ThisBuild / scalaVersion := "3.4.0"
 
 val usedScalacOptions = Def.task {
   Seq(
@@ -24,7 +24,7 @@ val withSourceMaps = Def.task {
   Seq(s"${sourcesOptionName}:$localSourcesPath->$remoteSourcesPath") ++ usedScalacOptions.value
 }
 
-val laminarVersion = "17.0.0-M2"
+val laminarVersion = "17.0.0-M8"
 
 inThisBuild(
   List(

demo/src/main/scala/demo/BarExample.scala

@@ -28,12 +28,12 @@ object BarExample extends Example("Bar") {
   ): HtmlElement = div(
     List(BarDesign.Header, BarDesign.Subheader).map(design =>
       DemoPanel(s"${design.value} Bar")(
-        Bar((headerBarContent(s"${design.value} Title") :+ (_.design := design)): _*)
+        Bar((headerBarContent(s"${design.value} Title") :+ (_.design := design))*)
       )
     ),
     List(BarDesign.Footer, BarDesign.FloatingFooter).map(design =>
       DemoPanel(s"${design.value} Bar")(
-        Bar(footerBarContent: _*)
+        Bar(footerBarContent*)
       )
     )
   )

demo/src/main/scala/demo/CalendarExample.scala

@@ -26,8 +26,8 @@ object CalendarExample extends Example("Calendar") {
       Calendar(_.minDateRaw := "7/7/2020", _.maxDateRaw := "20/10/2020", _.formatPattern := "dd/MM/yyyy")
       //-- End
     },
-    DemoPanel("Calendar with Hidden Week Numbers") {
-      //-- Begin: Calendar with Hidden Week Numbers
+    DemoPanel("Calendar & Hidden Week Numbers") {
+      //-- Begin: Calendar & Hidden Week Numbers
       Calendar(_.hideWeekNumbers := true)
       //-- End
     },

demo/src/main/scala/demo/CarouselExample.scala

@@ -29,7 +29,7 @@ object CarouselExample extends Example("Carousel") {
     |""".stripMargin),
     DemoPanel("Carousel With Single Item per Page")(
       //-- Begin: Carousel With Single Item per Page
-      Carousel(threeMagicWallpapers: _*)
+      Carousel(threeMagicWallpapers*)
       //-- End
     ),
     DemoPanel("Carousel with Multiple items per Page")(
@@ -45,7 +45,7 @@ object CarouselExample extends Example("Carousel") {
     DemoPanel("Carousel With Arrow Placement and Cyclic")(
       //-- Begin: Carousel With Arrow Placement and Cyclic
       Carousel(
-        threeMagicWallpapers ++ List(_.arrowsPlacement := CarouselArrowsPlacement.Navigation, _.cyclic := true): _*
+        threeMagicWallpapers ++ List(_.arrowsPlacement := CarouselArrowsPlacement.Navigation, _.cyclic := true)*
       )
       //-- End
     ),

demo/src/main/scala/demo/DynamicSideContentExample.scala

@@ -39,17 +39,17 @@ object DynamicSideContentExample extends Example("DynamicSideContent") {
       )
       //-- End
     },
-    DemoPanel("Dynamic Side Content with hideMainContent set") {
-      //-- Begin: Dynamic Side Content with hideMainContent set
+    DemoPanel("Dynamic Side Content & HideMainContent set") {
+      //-- Begin: Dynamic Side Content & HideMainContent set
       DynamicSideContent(
         _.hideMainContent := true,
         div(h1("Main Content"), p(mainContent)),
         _.slots.sideContent := div(h1("Side Content"), p(sideContent))
       )
       //-- End
     },
-    DemoPanel("Dynamic Side Content with hideSideContent set") {
-      //-- Begin: Dynamic Side Content with hideSideContent set
+    DemoPanel("Dynamic Side Content & HideSideContent set") {
+      //-- Begin: Dynamic Side Content & HideSideContent set
       DynamicSideContent(
         _.hideSideContent := true,
         div(h1("Main Content"), p(mainContent)),

demo/src/main/scala/demo/MenuExample.scala

@@ -19,7 +19,7 @@ object MenuExample extends Example("Menu") {
       div(
         Button("Open Menu", _.events.onClick.map(_.target) --> openMenuBus.writer),
         Menu(
-          inContext(el => openMenuBus.events.map(el.ref -> _) --> Observer[(Menu.Ref, HTMLElement)](_ showAt _)),
+          inContext(el => openMenuBus.events.map(el.ref -> _) --> Observer[(Menu.Ref, HTMLElement)](_.showAt(_))),
           _.item(_.text := "New File", _.icon    := IconName.`add-document`),
           _.item(_.text := "New Folder", _.icon  := IconName.`add-folder`, _.disabled           := true),
           _.item(_.text := "Open", _.icon        := IconName.`open-folder`, _.startsSection     := true),
@@ -38,7 +38,7 @@ object MenuExample extends Example("Menu") {
       div(
         Button("Open Menu", _.events.onClick.map(_.target) --> openMenuBus.writer),
         Menu(
-          inContext(el => openMenuBus.events.map(el.ref -> _) --> Observer[(Menu.Ref, HTMLElement)](_ showAt _)),
+          inContext(el => openMenuBus.events.map(el.ref -> _) --> Observer[(Menu.Ref, HTMLElement)](_.showAt(_))),
           _.item(_.text := "New File", _.icon   := IconName.`add-document`, _.additionalText := "Ctrl+N"),
           _.item(_.text := "New Folder", _.icon := IconName.`add-folder`, _.disabled         := true),
           _.item(

demo/src/main/scala/demo/SelectExample.scala

@@ -77,9 +77,9 @@ object SelectExample extends Example("Select") {
           options.map(t => Select.option(repr(t), dataAttr("key") := key(t))) +:
             (_.events.onChange.map(_.detail.selectedOption.dataset.get("key").get).map(keysToT.apply) --> Observer
               .combine(
-                observers: _*
+                observers*
               )) +:
-            mods: _*
+            mods*
         )
       }
 

demo/src/main/scala/demo/facades/highlightjs/HljsLanguage.scala

@@ -2,6 +2,6 @@ package demo.facades.highlightjs
 
 import scala.scalajs.js
 
-/** Marker trait for all js Object that represents languages to be registered with hljs
+/** Marker trait for all js Object that represents languages to be registered & Hljs
   */
 trait HljsLanguage extends js.Object

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

@@ -32,13 +32,13 @@ trait WebComponent {
         case mod: Mod[_ >: ReactiveHtmlElement[Ref]]                      => (_: this.type) => mod
         case mod: Function[_ >: this.type, _ <: ReactiveHtmlElement[Ref]] => mod
       }
-      .map(_(this)): _*
+      .map(_(this))*
   )
 
   /** Same as [[apply]], but accept only [[ModFunction]]s.
     *
     * This function is only there for people using the library with Scala 2.13.
     */
-  final def of(mods: ModFunction*): HtmlElement = tag(mods.map(_(this)): _*)
+  final def of(mods: ModFunction*): HtmlElement = tag(mods.map(_(this))*)
 
 }

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

@@ -33,7 +33,7 @@ object Avatar extends WebComponent with HasIcon {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref = dom.html.Element with RawElement
+  type Ref = dom.html.Element & RawElement
 
   protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-avatar")
 

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

@@ -47,7 +47,7 @@ object AvatarGroup extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref = dom.html.Element with RawElement
+  type Ref = dom.html.Element & RawElement
 
   protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-avatar-group")
 
@@ -63,7 +63,7 @@ object AvatarGroup extends WebComponent {
       def overflowButtonClicked: Boolean
     }
 
-    val onClick: EventProp[EventWithPreciseTarget[Ref] with HasDetail[AvatarClickInfo]] = new EventProp("click")
+    val onClick: EventProp[EventWithPreciseTarget[Ref] & HasDetail[AvatarClickInfo]] = new EventProp("click")
 
     val onOverflow: EventProp[EventWithPreciseTarget[Ref]] = new EventProp("overflow")
   }

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

@@ -32,7 +32,7 @@ object Badge extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref = dom.html.Element with RawElement
+  type Ref = dom.html.Element & RawElement
 
   protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-badge")
 

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

@@ -33,7 +33,7 @@ object Bar extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref = dom.html.Element with RawElement
+  type Ref = dom.html.Element & RawElement
 
   protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-bar")
 

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

@@ -37,7 +37,7 @@ object BarcodeScannerDialog extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref = dom.html.Element with RawElement
+  type Ref = dom.html.Element & RawElement
 
   protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-barcode-scanner-dialog")
 
@@ -48,14 +48,14 @@ object BarcodeScannerDialog extends WebComponent {
       def message: String
     }
 
-    val onScanError: EventProp[EventWithPreciseTarget[Ref] with HasDetail[ErrorInfo]] = new EventProp("scan-error")
+    val onScanError: EventProp[EventWithPreciseTarget[Ref] & HasDetail[ErrorInfo]] = new EventProp("scan-error")
 
     trait SuccessInfo extends js.Object {
       def text: String
       def rawBytes: js.typedarray.Uint8Array
     }
 
-    val onScanSuccess: EventProp[EventWithPreciseTarget[Ref] with HasDetail[SuccessInfo]] = new EventProp(
+    val onScanSuccess: EventProp[EventWithPreciseTarget[Ref] & HasDetail[SuccessInfo]] = new EventProp(
       "scan-success"
     )
   }

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

@@ -33,7 +33,7 @@ object Breadcrumbs extends WebComponent with HasIcon {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref = dom.html.Element with RawElement
+  type Ref = dom.html.Element & RawElement
 
   opaque type Breadcrumbs = HtmlElement
   object Breadcrumbs {
@@ -53,7 +53,7 @@ object Breadcrumbs extends WebComponent with HasIcon {
   object slots {}
 
   object events {
-    val onItemClick: EventProp[EventWithPreciseTarget[Ref] with HasDetail[HasItem[Item.Ref]]] = new EventProp(
+    val onItemClick: EventProp[EventWithPreciseTarget[Ref] & HasDetail[HasItem[Item.Ref]]] = new EventProp(
       "item-click"
     )
   }

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

@@ -30,7 +30,7 @@ object BreadcrumbsItem extends WebComponent with HasIcon {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref = dom.html.Element with RawElement
+  type Ref = dom.html.Element & RawElement
 
   protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-breadcrumbs-item")
 

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

@@ -34,7 +34,7 @@ object BusyIndicator extends WebComponent with HasText {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref = dom.html.Element with RawElement
+  type Ref = dom.html.Element & RawElement
 
   protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-busy-indicator")
 

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

@@ -31,7 +31,7 @@ object Button extends WebComponent with HasIcon {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref = dom.html.Element with RawElement
+  type Ref = dom.html.Element & RawElement
 
   protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-button")
 

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

@@ -39,7 +39,7 @@ object Calendar extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref = dom.html.Element with RawElement
+  type Ref = dom.html.Element & RawElement
 
   protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-calendar")
 
@@ -77,7 +77,7 @@ object Calendar extends WebComponent {
         def dates: List[Long]    = info.datesJS.toList
     }
 
-    val onSelectedDatesChange: EventProp[EventWithPreciseTarget[Ref] with HasDetail[SelectedDatesChangeInfo]] =
+    val onSelectedDatesChange: EventProp[EventWithPreciseTarget[Ref] & HasDetail[SelectedDatesChangeInfo]] =
       new EventProp(
         "selected-dates-change"
       )

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

@@ -25,7 +25,7 @@ object CalendarDate extends WebComponent with HasValue {
     def value: String = js.native
   }
 
-  type Ref = dom.html.Element with RawElement
+  type Ref = dom.html.Element & RawElement
 
   protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-date")
 

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

@@ -31,7 +31,7 @@ object Card extends WebComponent with HasAccessibleName {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref = dom.html.Element with RawElement
+  type Ref = dom.html.Element & RawElement
 
   protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-card")
 

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

@@ -30,7 +30,7 @@ object CardHeader extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref = dom.html.Element with RawElement
+  type Ref = dom.html.Element & RawElement
 
   protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-card-header")
 

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

@@ -37,7 +37,7 @@ object Carousel extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref = dom.html.Element with RawElement
+  type Ref = dom.html.Element & RawElement
 
   protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-carousel")
 
@@ -62,13 +62,13 @@ object Carousel extends WebComponent {
   object slots {}
 
   object events {
-    val onNavigate: EventProp[dom.Event with HasDetail[HasSelectedIndex]] = new EventProp("navigate")
+    val onNavigate: EventProp[dom.Event & HasDetail[HasSelectedIndex]] = new EventProp("navigate")
   }
 
-  def getCarouselById(carouselId: String): Option[dom.HTMLElement with RawElement] =
-    Option(dom.document.getElementById(carouselId)).map(_.asInstanceOf[dom.HTMLElement with RawElement])
+  def getCarouselById(carouselId: String): Option[dom.HTMLElement & RawElement] =
+    Option(dom.document.getElementById(carouselId)).map(_.asInstanceOf[dom.HTMLElement & RawElement])
 
-  def getCarousels: List[dom.HTMLElement with RawElement] =
-    dom.document.getElementsByTagName("ui5-carousel").toList.map(_.asInstanceOf[dom.HTMLElement with RawElement])
+  def getCarousels: List[dom.HTMLElement & RawElement] =
+    dom.document.getElementsByTagName("ui5-carousel").toList.map(_.asInstanceOf[dom.HTMLElement & RawElement])
 
 }

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

@@ -33,7 +33,7 @@ object CheckBox extends WebComponent with HasIcon with HasAccessibleName with Ha
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref = dom.html.Element with RawElement
+  type Ref = dom.html.Element & RawElement
 
   protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-checkbox")
 

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

@@ -33,14 +33,14 @@ object ColourPalette extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref = dom.html.Element with RawElement
+  type Ref = dom.html.Element & RawElement
 
   protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-color-palette")
 
   object slots {}
 
   object events {
-    val onItemClick: EventProp[dom.Event with HasDetail[HasColor]] = new EventProp("item-click")
+    val onItemClick: EventProp[dom.Event & HasDetail[HasColor]] = new EventProp("item-click")
   }
 
   def item: ColourPaletteItem.type = ColourPaletteItem

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

@@ -32,7 +32,7 @@ object ColourPaletteItem extends WebComponent {
   // object-s are lazy so you need to actually use them in your code to prevent dead code elimination
   used(RawImport)
 
-  type Ref = dom.html.Element with RawElement
+  type Ref = dom.html.Element & RawElement
 
   protected val tag: CustomHtmlTag[Ref] = CustomHtmlTag("ui5-color-palette-item")