« Changelog History


OutWatch v1.0.0-RC2 Release Notes

    • To use tags, attributes in scope you need to import the DSL:

      import outwatch.dom._
import outwatch.dom.dsl._

    • 💅 Outwatch now takes all its tags, attributes and styles from scala-dom-types (DomTypes.scala) - Thanks @raquo! Therefore we have a more complete collection of tags/attributes and it is now possible to use style-sheets in outwatch, like you may know from scalatags.

      div(border := "1px solid black")

    • 💅 Custom tags, attribues, properties and styles can also be used (OutwatchAttributes.scala):

      div(
  tag("svg")(
    tag("svg:path")(
      attr("d") := "M 0,-3 L 10,-0.5 L 10,0.5 L0,3",
      style("fill") := "#666"
    )
  )
)

      (SVG support doesn't exist in scala-dom-types yet: https://github.com/raquo/scala-dom-types/issues/20)

    • Referential transparent API using cats-effect:

      • Handler.create[T]() and Sink.create[T]() now return IO[Handler[T]] and IO[Sink[T]]. scala OutWatch.renderReplace("#container", vNode).unsafeRunSync() @LukaJCB, @mariusmuja please describe a bit more...

    • ⏱ Outwatch now exclusively uses Monix instead of rxscala-js. Be sure to provide a Scheduler.

    • Introducing managed subscriptions. When subscribing to Observables in your code outside of dom-elements, you have to handle the lifetime of subscriptions yourself. With managed subscriptions, you can instead bind it to the lifetime of a dom-element:

      val handler: Handler[Int] = ???
val sink: Sink[Int] = ???
div( managed(sink <-- handler) )

    or:

        val observable: Observable[Int] = ???
    div( managed(IO(observable.foreach(i => println(s"debug: $i")))) )

    In both cases, outwatch will only run the IO[Subscription] when the element is rendered in the dom and will unsubscribe when the element is removed from the dom.

    • Outwatch.render* is now explicit whether it replaces or inserts into the given dom element (OutWatch.scala):

      val vNode = div()
val node = document.querySelector("#container")
OutWatch.renderReplace(node, vNode).unsafeRunSync()
OutWatch.renderReplace("#container", vNode).unsafeRunSync()
OutWatch.renderInto(node, vNode).unsafeRunSync()
OutWatch.renderInto("#container", vNode).unsafeRunSync()

    • 📦 Handlers can be transformed using new methods including isomorphisms and lenses (package.scala):

      val handler = Handler.create[Int].unsafeRunSync()
val mapped = handler.imap[Int](_ - 1)(_ + 1)

    handler.unsafeOnNext(12) // mapped will be triggered with 13

    mapped.unsafeOnNext(15) // handler will be triggered with 16

    val handler = Handler.create[(String, Int)].unsafeRunSync() val zoomed = handler.lens[Int](("x", 0))(_._2)((tuple, num) => (tuple._1, num))

    handler.unsafeOnNext(("y", 1)) // zoomed will be triggered with 1

    zoomed.unsafeOnNext(2) // handler will be triggered with ("y", 2)

      @mariusmuja: please explain Pipes

* You can now manually write values into Sinks:
  ```scala
  val handler = Handler.create[Int].unsafeRunSync()
  handler.unsafeOnNext(5)

    • You can call apply on already created tags to add additional content (also inspired by scalatags):

      val hello = div("Hello World")
val helloInBlue = hello(color := "blue")

    • Event handlers and life cycle hooks now have an on-prefix like onClick and onInsert.

    • Event handlers and life cycle hooks can now be consistently transformed (EmitterBuilder.scal):

      div(
onClick(true) --> sink,
onUpdate.map(_._2) --> eventSink,
onKeyDown.collect { case e if e.keyCode == KeyCode.Enter && !e.shiftKey => e.preventDefault(); e }.value.filter(_.nonEmpty) --> userInputHandler
)

    • And there are helpers to cast the Event types from Emitters (EmitterOps.scala):

      textArea(
onInput.value --> stringHandler
)

    • There is a helper called sideEffect which constructs a Sink for in-place side-effect usage (SideEffects.scala):

      div(
onClick --> sideEffect( e => console.log("your click event: ", e) ),
onClick --> sideEffect{ println("you clicked!") }
)

    • ➕ Additional life cycle hooks from Snabbdom have been added (VDomModifier.scala:) 

      textArea(
onPostPatch --> sideEffect(_.asInstanceOf[dom.Element].focus())
)

    • Global events can be used via provided observables:

      events.window.onResize.foreach(_ => println("window resized"))

    • 🚀 Boolean and enumerated attributes are now properly handled. Quoting from the HTML5 spec: "A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value." Previously, attributes like draggable or disabled were wrongly rendered. Using scala-dom-types and a new release of snabbdom, we now adhere to the HTML spec.

    • It is possible to group modifiers with CompositeModifier:

      div(
CompositeModifier(
  Seq(
    div(),
    color := "blue"
  )
)
)

      @mariusmuja, please describe more

    • 💅 Extended styles for easy and composable CSS animations, example @mariusmuja

    • Accumulated Attributes @mariusmuja

    • 🏗 Source maps should now point to the correct commit and file on github (build.sbt).