Laminar v16.0.0

July 13, 2023

Nikita

This release fixes a few bugs, and adds a few small features.

Laminar is a Scala.js library for building web application interfaces and managing UI state. Learn more in a few short examples or one long video.

News

Releases: Laminar 16.0.0, Airstream 16.0.0, Waypoint 7.0.0, Scala DOM Types 17.1.0, Laminext 0.16.0, Frontroute 0.18.0

Official Scala.js tutorial explains how to make a Scala.js app with Vite, Laminar, and a JS charting library (using ScalablyTyped). Final code repo. Video version: part 1 (Vite), part 2 (Laminar & ScalablyTyped).

Full stack ZIO blog app with Laminar by Kyle Dinh

Network Threat Monitor Laminar app by Alexey Bityukov

Semagrams Laminar App by Owen Lynch + demo

New Laminar libraries by Blue Pitaya: Laminar dragging, Laminar color, Laminar contenteditable

Laminar TicTacToe tutorial in Japanese by 110416

Our sponsor HeartAI has shared a glimpse of their Laminar app. Great to see enterprise adoption of Scala.js!

Fun fact – Laminar is now featured on the Scala language home page.

New Features

• renderDetached(laminarElement, activateNow = true) method lets you pass manually managed DOM nodes to third party JS libraries that want to render them. You need to manually .deactivate() the node after it's no longer needed to stop its subscriptions. Basically it's similar to the render method, but does not require a container node upfront. See the new doc section for details.

• Support for passive event listeners (thanks, @fgoepel!)

• AjaxStream uploadProgressObserver (thanks, @Dennis4b!)

• A few more low level DOM manipulation methods: ParentNode.insertChildBefore, insertChildAfter, DomApi.insertAfter

• tabIndex attribute for SVG, startselect and selectionchange events

New Documentation Sections

• Network Requests

• Passing Laminar Elements to Third Party Libraries

• Troubleshooting

Bug Fixes

• The optional SVG xmlns attribute did not work in Firefox because its namespace was incorrectly specified (#143)

• FetchStream did not emit events if initialized outside a transaction (Airstream#106).

• stream1.mergeWith(stream2, stream3) helper method was ignoring the stream1 itself. Note: EventStream.merge(stream1, stream2, stream3) was unaffected.

Breaking Changes

• DomApi children-related methods like appendChild now accept raw dom.Node-s now instead of Laminar nodes.

  • Migration: if you use those methods directly, pass node.ref instead of node.

• Remove ParentNode.replaceChildren, replaceAllChildren, CollectionCommand.ReplaceAll

• Remove CollectionCommand.Move alias – use Insert

• Remove ChildNode.isNodeMounted method – use DomApi.isDescendantOf(node.ref, dom.document)

• Rename ParentNode.insertChild -> insertChildAtIndex

Other Changes

• Laminar no longer maintains its own list of children for every Laminar element (ParentNode._maybeChildren). This makes integrations easier, increases resilience to external DOM changes, and improves performance a bit in most cases.

• Laminar is now published for Scala 3.3.0 LTS and Scala.js 1.13.2, and scalajs-dom 2.6.0. By the way, we plan to drop support for Scala 2.12 in 2024.

Thank You

The development of Laminar is kindly sponsored by people who use it in their businesses and personal projects.

GOLD sponsors supporting Laminar:

Iurii Malchenko

Aurinko is an API platform for workplace addons and integrations.

HeartAI is a data and analytics platform for digital health and clinical care.

Thank you for supporting me! ❤️