htmx-ext-preserve-params

An extension for HTMX that provides the ability to add query parameters present in the URL to future requests.

Installation

Using the CDN

Work in progress: This extension has yet to be uploaded to CDN.

using NPM

Add this library to your package.json using your package manager of preference:

# With NPM
npm install htmx-ext-preserve-params
# With Yarn
yarn add htmx-ext-preserve-params

Then, load the extension in via JavaScript or TypeScript (TypeScript example given below):

let htmx: typeof import("htmx.org").default;
(async function main() {
  const htmxModule = await import('htmx.org');
  htmx = htmxModule.default;

  (window as any).htmx = htmx;

  await import("htmx-ext-preserve-params")

  htmx.process(document.body)
})()

export { htmx }

Usage

Use this extension when you would like to send query parameters present in the URL on new requests.

Load the extension once:

hx-ext="preserve-params"

Then, use the preserve-params attribute to activate it. The attribute is inherited by child elements. The value of the attribute can be:

• true or *: preserve all parameters
• false: do not preserve any parameters (basically disables the extension)
• A space-separated list of parameter names that should be preserved. Any parameter names not present in the list are not sent to future requests. Likewise, parameters with the same name given to the request have precedence over the query parameters in the URL.

Contribution

Installation and Running Tests

This project uses Yarn, and the extension is written using TypeScript. To install all dependencies using yarn, simply run yarn. Then, build the binary using yarn build.

Once you have a binary, you can run the test suite with yarn test.