htmx.ajax, HtmxAjaxHelperContext typedef requires target, specfying source element

[anentropic]

I'm using htmx.ajax in an event handler to load a new page.

I want the request to inherit the hx-* properties of the ancestor element like it would do if I was making it via an hx-get attribute.

The third arg to htmx.ajax accepts a context object with various properties... e.g. target, select and swap have the same effect as setting hx-target, hx-select, hx-swap attrs on the element or its ancestors.

It's not really spelled out in the docs but I also found that setting source element seems to allow the ajax request to inherit the hx-* properties (for example hx-push-url="true") of its ancestor - 👍 exactly what I wanted, rather than having to pass them down into my component in order to send them in the ajax context.

So I have an event handler that looks something like (e) => htmx.ajax("get", url, {event: e, source: e.target}) and it works as I want.

The only issue I have is when working in TypeScript, the third argument is typed as a HtmxAjaxHelperContext. The definition is like:

(alias) type HtmxAjaxHelperContext = {
    source?: string | Element | undefined;
    event?: Event | undefined;
    handler?: HtmxAjaxHandler | undefined;
    target: Element | string;
    swap?: string | undefined;
    values?: any | FormData;
    headers?: Record<...> | undefined;
    select?: string | undefined;
}
import HtmxAjaxHelperContext
/** @typedef HtmxAjaxHelperContext
 * @property {Element|string} [source]
 * @property {Event} [event]
 * @property {HtmxAjaxHandler} [handler]
 * @property {Element|string} target
 * @property {HtmxSwapStyle} [swap]
 * @property {Object|FormData} [values]
 * @property {Record<string,string>} [headers]
 * @property {string} [select]
 */

So this type makes target a required field. But I don't want to specify the target, I want it to inherit the hx-target from the ancestor of source.

And if I just ignore/workaround the typedef and pass {event: e, source: e.target} as my context then it seems to work fine.

So I'm asking if perhaps HtmxAjaxHelperContext typedef should make all fields optional?

[Telroshan]

Hey, I'm the one who wrote this JSDoc and you're right, this must have been an oversight, it's completely optional as htmx uses the regular hx-target as a fallback:

htmx/src/htmx.js

Line 4062 in 6c2f9ea

const target = etc.targetOverride || asElement(getTarget(elt))

I also agree that the context.source doc should include a little statement to make it clear that regular hx attributes will be retrieved from this source element.

Feel free to open a documentation fix PR if you feel like it!

[anentropic]

Thanks, have opened one here: #2701