partial()

partial() creates a request-aware HTML fragment endpoint for HTMX interactions. Register partials with mini(); MiniFW serves a partial named name at /partial/name.

Basic Partial

import { partial } from "@calvinbonner/minifw/core";
import { html } from "@calvinbonner/minifw/helpers";

const counter = partial(({ url }) => {
  const count = Number(url.searchParams.get("count") ?? "0") + 1;

  return html`<section id="counter">
    <p>Count: ${count}</p>
    <button
      hx-get="/partial/counter?count=${count}"
      hx-target="#counter"
      hx-swap="outerHTML"
    >
      Increment
    </button>
  </section>`;
});

mini({ partials: { counter } });

The render function receives the same request context as a page(): request, url, route, params, and isHtmx. Use query values from url.searchParams and route parameters from params.

HTMX Request Guard

Partials require HX-Request: true by default. A regular request receives a 400 MiniFW error, which your Bun error handler can identify with isMiniError().

Set allowNonHtmx: true when an endpoint should also support ordinary browser or server-to-server requests:

const status = partial(() => "<p>Ready</p>", { allowNonHtmx: true });

allowNonHtmx is useful for endpoints that progressively enhance a standard link or form. Keep the default for HTMX-only UI updates to avoid exposing an endpoint unintentionally.

Scoped Styles

The style-function overload works the same way as it does for pages:

const notice = partial(
  () => '<p class="notice">Saved</p>',
  () => ".notice { color: green; }",
);

MiniFW scopes the CSS to this partial's rendered elements. When HTMX swaps the response into the document, MiniFW's runtime promotes new scoped styles into the head. See Style Encapsulation.

Caching

Partials accept cache: true for an indefinite cache or cache: { ttl } for a millisecond time-to-live:

const productCount = partial(renderCount, { cache: { ttl: 5_000 } });

Cache keys include the partial name, URL path and query string, route parameters, and HTMX state. See Cache Management before caching personalized or mutable responses.

Redirects And Errors

Use redirectTo() for redirects determined while a partial renders, and error() for expected HTTP failures. Unexpected errors propagate to Bun's error handler.

Use fragment() for reusable markup that does not need a request endpoint.