🚀 Brisa v0.2.8 is here! 🎉

This release includes new features, bug fixes, and a breaking change in response headers handling. Let’s dive into what’s new!

✨ New Features

useId in RequestContext

Now available in RequestContext, expanding its usability to Server Components too (already existed for Web Components). – @aralroca in #770

The useId method generates a unique identifier for the server component. It is useful for creating unique keys for elements in lists or for other purposes that require unique identifiers, like Server Action IDs to use insie the indicate. The generated ID is unique across all server components and after re-renders on the server actions.

Example to identify server actions for the pending state:

const id = useId();
const pending = indicate(`some-server-action-${id}`);
// ...
css`
 span { display: none }
 span.brisa-request { display: inline }
`
// ...
<>
  <button onClick={someAction} indicateClick={pending}>
    Run some action
  </button>
  <span indicator={pending}>Pending...</span>
</>

Docs: useId

headersSnapshot in responseHeaders (BREAKING CHANGE)

Improves header management but requires adjustments in existing implementations. – @aralroca in #772

The responseHeaders are in middleware, layout & page. We need to propagate accurately, and the headersSnapshot function is the new API that allows you to manage headers in a more predictable way.

Before (old API) 🟨

Previously, the function returned a plain object, which merged into existing headers (unnecessary magic).

export function responseHeaders(req: RequestContext, responseStatus: number) {
  return {
    "Set-Cookie":  req.store.get("new-cookies"),
  };
}

Now (new API) 🟩

We've introduced headersSnapshot(), which returns an immutable clone of the current headers. You must return the modified headers explicitly.

export function responseHeaders(request: RequestContext, { headersSnapshot, responseStatus }: ResponseHeaders) {
  const headers = headersSnapshot();

  headers.append('Set-Cookie', request.store.get("new-cookies"))

  return headers;
}

🔹 Alternative Usage: Passing HeadersInit to the Snapshot

You can pass a HeadersInit object to headersSnapshot() for convenience, automatically appending new entries:

export function responseHeaders(request, { headersSnapshot, responseStatus }) {
  return headersSnapshot({
    "Set-Cookie": request.store.get("new-cookies"),
  });
}

🐞 Bug Fixes

• Fixed "undefined" identifier issue when transpiling actions. – @aralroca in #767
• Fixed function parameter identifiers when transpiling actions. – @aralroca in #768
• Improved Server Actions registry – Better performance and bug fixes. – @aralroca in #775

📖 Documentation Updates

• Updated headersSnapshot docs to clarify its usage. – @aralroca in #773
• Fixed minor documentation mistakes for clarity. – @aralroca in #777

🔄 Maintenance

• Upgraded Bun to the latest version for better stability and performance. – @aralroca in #766, #776 in #776
• Upgraded TypeScript to improve type safety and development experience. – @aralroca in #779

Full Changelog

🔗 https://github.com/brisa-build/brisa/compare/0.2.7...0.2.8

❤️ Support Brisa: Visit our shop for Brisa swag! 🛍️