Skip to content

gtramontina/elysia-htmx

Repository files navigation

Elysia HTMX

Elysia plugin to support integration with HTMX.

Note

This package moved to a new scope. If you were using elysia-htmx, you should update dependency and your imports to @gtramontina.com/elysia-htmx going forward.

Installation

bun add --exact @gtramontina.com/elysia-htmx

Usage

import { htmx } from "@gtramontina.com/elysia-htmx"; // 1. Import
import Elysia from "elysia";

new Elysia()
  .use(htmx()) // 2. Use
  .get("/", ({ hx }) => {
    return {
      request: hx.request,
      boosted: hx.boosted,
      historyRestoreRequest: hx.historyRestoreRequest,
      currentURL: hx.currentURL,
      prompt: hx.prompt,
      target: hx.target,
      triggerName: hx.triggerName,
      trigger: hx.trigger,
      isHTMX: hx.isHTMX,
    }
  })
  .listen(3000);

API (Added Context)

type HtmxContext = {
    hx: {
        request: boolean;
        boosted: boolean;
        historyRestoreRequest: boolean;
        currentURL: string;
        prompt: string;
        target: string;
        triggerName: string;
        trigger: string;
        setLocation(url: string): void;
        pushURL(url: string): void;
        redirect(url: string): void;
        refresh(): void;
        replaceURL(url: string): void;
        reswap(value: HxSwap): void;
        retarget(elementSelector: string): void;
        reselect(elementSelector: string): void;
        triggerEvent(event: string | Record<string, unknown>): void;
        triggerEventAfterSettle(): void;
        triggerEventAfterSwap(): void;
        get isHTMX(): boolean;
        stopPolling(): void;
    };
};

For usage of the hx object, please refer to the htmx's Request and Response headers documentation.

About

Elysia HTMX Context

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published