lustre - v5.6.0

Lustre v5.6.0 released!

Earlier this month we gave a talk at FOSDEM about how Lustre’s component system builds on Web Components. This release sees tighter integration with the platform by supporting the custom element lifecycle callbacks, as well as the ability to prerender components when producing static HTML.

Lustre is maintained entirely by volunteer effort of two core maintainers and a small number of GitHub sponsors. To my existing sponsors on GitHub, thank you! Your support has fueled me with both motivation and caffeine to keep the project growing 💕.

If you or your company are using Lustre in production, please consider supporting the project financially over on GitHub sponsors or by reaching out to hayleigh[at]lustre.build. Support from production users is essential to the project’s survival, and support in any form is appreciated!

Component lifecycle events

It is common for Lustre components to have effects that require access to the DOM: sometimes to query the component’s Shadow DOM and sometimes to extract information from the component’s light DOM. When rendering the component in a Lustre application, it is sufficient to create an after_paint effect and return it from the component’s init function.

Because Lustre components are real Web Components however, it is perfectly possible to bundle and distribute these components for uses outside of Lustre. In these cases there’s no guarantee a component will be immediately added to the DOM once it’s created, and DOM-related effects returned from init may fail in those cases.

Fortunately, the custom element spec includes callbacks to hook into an element’s DOM-based lifecycle: the connectedCallback and the disconnectedCallback. These callbacks fire when an element is added or removed from a document respectively, and now Lustre components can use the new component.on_connect and component.on_disconnect options to set a message to dispatch.

The component.on_connect message can be handled to always safely trigger DOM-related effects, and the component.on_disconnect message can be handled to perform any effectul cleanup.

Server component events

The component.on_connect and component.on_disconnect options can also be used in server components. Here, these options correspond to new clients registering with the runtime through server_component.register_subject or register_callback and deregistering through the equivalent API. These messages can be handled to make sure the component doesn’t do unnecessary work while no clients are connected, or better handled workloads if many clients are connected simultaneously.

Prerendering components

Lustre components make use of the Shadow DOM to encapsulate the component’s view. Up until now it has been impossible to prerender the content of a component because the Shadow DOM doesn’t exist outside the browser, meaning components could not benefit from hydration and virtualisation.

This means server-rendering the typical counter component example might produce HTML that looks like this:

<my-counter count="10"></my-counter>

With this release, Lustre now includes component.prerender to render a declarative shadow DOM which works much in the same way a typical SPA prerender might work. When server-rendering the component with this new API, the produced HTML now looks like this:

<my-counter count="10">
  <template shadowrootmode="open">
    <button>-</button>
    <p>The count is: 10</p>
    <button>+</button>
  </template>
</my-counter>

The browser automatically handles cloning the template into the component’s Shadow DOM and Lustre can use it’s existing virtualisation mechanism to make sure the initial render is doing as little work as possible.

Note how attributes are handled correctly when prerendering here: the server-rendered HTML correctly says the count is 10 inside the template. Any attribute changes listened to by the component will be processed during prerendering.

Gleam Gathering

For those that might have missed it, Gleam Gathering is just around the corner now! Rebecca will be delivering a deep dive into how Lustre’s runtime works: exploring when and how the runtime updates the screen, what a virtual DOM is and how it works, and how Lustre makes purely functional UI updates not only possible, but surprisingly fast as well.

If you haven’t yet grabbed a ticket and you fancy making some last minute travel plans to Bristol, Gleam Gathering is on 21st February and tickets are still available here.

Code BEAM Vancouver

Looking to next month, Hayleigh is giving a talk at Code BEAM Lite Vancouver covering Lustre’s “universal” component system. In the talk we’ll take a look at how components in Lustre are just applications started in different ways, and how easy it is to take an application and register it as a Web Component or run it as a server component.

Code BEAM Lite Vancouver takes place on 23rd March and tickets are still available here. You can use discount code FriendOFaSPEAKER for a cool 15% off!

And the rest

This release has been a quiet one, but it still includes important bug fixes for some of Lustre’s production users. That includes a fix for a bug preventing context subscriptions working properly for server components,

✨ Search Document