Lustre v5.7.0 released!

Hey folks, it’s been a while since the last release: but that’s a good thing! Things are starting to wind down now that we’ve landed major performance improvements and many of the core features we wanted to see. If all goes to plan, this will likely be the last minor release until we hit v6.0.0 sometime in the future. Let’s see what’s inside.

Applications and the context api

In v5.3.0 we provided an implementation of the WCCG Context protocol. This allows components in Lustre (and Web Components in general) to provide data to slotted children without needing to know about them directly. There’s no reason Lustre apps can’t get in on the action though, so for v5.7.0 all types of Lustre app can use the new subscribe effect to subscribe to context changes from any parent elements.

Why might that be useful? We think the combination of Lustre’s server components along with a traditional client app unlocks a powerful pattern we’ve been interally calling the “store pattern.” This pattern involves a server component providing multiple context values for different server-side state: changes are broadcast using the provide effect and the client application can subscribe to any context values it needs. The client can emit events to communicate back to the server to request new data or trigger updates. This approach can completely replace traditional HTTP APIs and we’re excited to see how people run away with this idea: we’ll be writing more about this in the future!

This new API also includes an effect to unsubscribe from context changes; something that was not possible until now. As context subscriptions are no-longer a component-only feature, we’ve deprecated the component.on_context_change option in favour the new effects.

Be mindful that components should avoid calling the subscribe effect in their init function, and instead should use the component.on_connect option to be notified when the component is added to the DOM. Lustre components are Web Components and share the same lifecycle as any other Web Component: that means when the component is created, your init functions run but the component is not yet connected to the DOM. As the context protocol is built on top of event listeners, subscribing to context changes before the component is connected will an emit an event that nobody is listening for!

CSRF protection for server components

When the browser makes a HTTP request, it automatically includes any cookies and credentials associated with the request’s origin. In this past this has been an attack vector for cross-site request forgery (CSRF) attacks, where a malicious website can trick a user’s browser into making a request to a different site where they are authenticated.

These days, CORS headers can be used by browsers to mitigate these kinds of attacks by blocking cross-origin requests that don’t have the appropriate headers. For WebSocket connections, however, CORS headers don’t apply making it possible for a malicious site to establish a WebSocket connection as a user.

A common mitigation for this is to embed a CSRF token in the page’s HTML, and require that token to be included in the WebSocket connection request. The client <lustre-server-component> will now detect the presence of a <meta> tag containing a CSRF token or recognise if there is a csrf-token attribute on the component itself, and include that token in the connection request.

We recommend all applications using server components implement CSRF protection in their apps, as well as validating the origin of any incoming WebSocket connections on the server.

And the rest

Form associated components now can be notified when a containing form is disabled through the on_form_disabled configuration option, we’ve added a handful of new attributes to work with the new Command Invoker API, and a whole bunch of bug fixes.

To the future

Development of a big library like Lustre never really ends, but for now we’re turning our attention to building out the things that orbit the library. That means:

• Getting lustre/ui over the line. The library is a collection of unstyled components that we hope will serve as the foundation for new styled libraries and in-house design systems.

• Resurrecting fable: our version of Storybook to make it easy to develop components and view functions in isolation. The library has been functional for a while now, but we’re not very happy about the API currently and want to dedicate some time to polishing the developer experience.

• Finally have a place to call home at lustre.build. We’ve had the domain for two years now but never found the time to set up anything more than a redirect to Hex. We want to change that!

These are all exciting projects but they are also a lot of work. Lustre/ui in particular is a tremendous undertaking for a team of one-and-a-bit people. If you’re using Lustre in production, please consider supporting the project finanically through GitHub sponsors. That support helps keep the project m