feat: replace rerenderInAction to: renderPage and renderComponent

[aralroca]

Fixes #648

🚨 BREAKING CHANGE: rerenderInAction is anymore supported. Replaced to renderPage and renderComponent

The renderComponent in this PR also allows to render a specific component on target location with replace / append / prepend / after / before support.

CC: @ansarizafar

renderComponent

Reference

renderComponent({ element, target, mode, withTransition }: RenderComponentProps): Never

The renderComponent method is used to rerender the component or render some component in an specific target location inside a server action. Outside of an action, it throws an error.

renderComponent needs to be called outside of the try/catch block:

export default function MyComponent({ text = "foo" }: { text: string }) {
  function handleClick() {
    // Just a component rerender:
    renderComponent();

    // Trigger a component rerender with new props
    renderComponent({ element: <MyComponent text="bar" />});

    // Render a specific component on target location
    renderComponent({
      element: <Component {...props} />,
      target: "#target-id",
      mode: "replace",
      withTransition: true,
    });
  }

  return (
    <div>
      <button onClick={handleClick}>{text}</button>
    </div>
  );
}

Note

See the differences between "Action Signals" and renderComponent in this documentation.

Types:

function renderComponent<PropsType>(
  props: RenderComponentProps<PropsType> = {},
): never;

type RenderComponentProps = {
  element?: JSX.Element;
  target?: string;
  placement?: 'replace' | 'before' | 'after' | 'append' | 'prepend';
  withTransition?: boolean;
};

Parameters:

• element (optional): The component to render. By default, it will rerender the target component that triggered the action.
• target (optional): The target location to render the component. It can be a CSS selector.
• placement (optional): The placement to render the component. It can be replace, before, after, append or prepend. Default is replace.
• withTransition (optional): If true, it will render the component with start view transition API. Default is false.

Returns:

• Never does not require you to use return renderComponent() due to using the TypeScript never type.

Caution

Avoid using the renderComponent inside a try/catch block. The navigate is a throwable function and will break the execution of the current function.

Tip

Updating Action Signals by default is going to use a renderComponent without you having to specify it. If you specify it, it will fulfill only the renderComponent you specify.

Support

Component	Support
Server Component	❌
Web Component	❌
SSR Web Component	❌
Actions	✅
Middleware	❌
Response headers	❌

---

renderPage

Reference

renderPage(): Never

The renderPage method is used to rerender the page inside a server action. Outside of an action, it throws an error.

renderPage needs to be called outside of the try/catch block:

import { renderPage } from "brisa/server";

// Inside a server action
function handleEvent() {
  try {
    // ...
  } catch (error) {
    // ...
  }

  // Trigger a full-page rerender
  renderPage();
}

Note

See the differences between "Action Signals" and renderPage in this documentation.

Parameters

• withTransition (optional): A boolean value that indicates whether the rerender should be done with start view transition. Default is false.

Types:

function renderPage(): never;

Returns:

• Never does not require you to use return rerenderInPage() due to using the TypeScript never type.

Caution

Avoid using the renderPage inside a try/catch block. The navigate is a throwable function and will break the execution of the current function.

Support

Component	Support
Server Component	❌
Web Component	❌
SSR Web Component	❌
Actions	✅
Middleware	❌
Response headers	❌

[pkg-pr-new]

Open in Stackblitz

brisa-adapter-vercel

npm i https://pkg.pr.new/brisa-build/brisa/brisa-adapter-vercel@682

brisa-pandacss

npm i https://pkg.pr.new/brisa-build/brisa/brisa-pandacss@682

brisa-tailwindcss

npm i https://pkg.pr.new/brisa-build/brisa/brisa-tailwindcss@682

brisa

npm i https://pkg.pr.new/brisa-build/brisa@682

create-brisa

npm i https://pkg.pr.new/brisa-build/brisa/create-brisa@682

www

npm i https://pkg.pr.new/brisa-build/brisa/www@682

commit: b6236e4