Brisa 0.2.1

by Aral Roca

Brisa 0.2.1 introduces flexible rendering APIs, post-response hooks, and encryption utilities, along with essential bug fixes to streamline your development workflow.

Thanks to contributors:

By the way, glad Brisa is in one of the conclusions of the state of JS 2024! It's time for the community to grow! 🚀

🆕 New Features

1. Enhanced Rendering on Server Actions

The rerenderInAction function has been replaced with more flexible APIs:

🚨 BREAKING CHANGE: The rerenderInAction function has been removed. Use renderPage and renderComponent instead.

Apart from replacing it, as a novelty, any component can be rendered in any location.

The YouTube video demonstrates how to render and manage a modal's open/close actions using server-side functionality exclusively (See code example). Our goal is to enable the creation of a single-page application (SPA) without adding client-side code, keeping your project lightweight with just the 2KB required for the RPC communication.

This feature gives much more power, besides it works with streaming, you can use an async generator to control better the stream chunks if you want:

import { Database } from "bun:sqlite";
import { renderComponent } from "brisa/server";

export default function LoadMovies() {
  function streamMovies() {
    renderComponent({
      element: <MovieItems />,
      target: "ul",
      placement: "append",
    });
  }

  return (
    <>
      <button id="movies" onClick={streamMovies}>
        Click here to stream movies from a Server Action
      </button>
      <ul />
    </>
  )
}

const db = new Database("db.sqlite");

async function* MovieItems() {
  for (const movie of db.query("SELECT title, year FROM movies")) {
    yield (
      <li>
        {movie.title} ({movie.year})
      </li>
    );
  }
}

2. after Request Context Method

A new after method has been added to the request context, enabling you to schedule work to be executed after a response (or prerender) is finished. This is useful for tasks and other side effects that should not block the response, such as logging and analytics.

It can be used everywhere when you have access to the RequestContext (Middleware, API routes, Server components, etc).

Example:

import { type RequestContext } from "brisa";

export default function SomeComponent({}, { after }: RequestContext) {
  after(() => {
    console.log("The response is sent");
  });

  return <div>Some content</div>;
}

3. Encryption and Decryption Utilities

Introducing new encrypt and decrypt functions to simplify data security and management.

Brisa, unlike other frameworks that encrypt all external variables used in server actions by default, which has a high computational cost when rendering the page, we prefer that the developer decide which data needs to be encrypted and decrypted to consume within a Server Action.

In this version, we have added two functions to encrypt and decrypt data easily:

import { encrypt, decrypt } from "brisa/server";

// ...
<button
  onClick={(e) => {
    // Decrypt on the server action:
    console.log(
      decrypt(e.target.dataset.encrypted)
    )
  }}
  data-encrypted={encrypt("some sensible data")}
>
  Click to recover sensible data on the server
</button>

🐞 Bug Fixes

📝 What's Changed

🙌 New Contributors

Full Changelog: https://github.com/brisa-build/brisa/compare/0.2.0...0.2.1

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

Brisa Shop