summaryrefslogtreecommitdiffstatshomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--dist/htmx.amd.js1848
-rw-r--r--dist/htmx.cjs.js1848
-rw-r--r--dist/htmx.esm.js1848
-rw-r--r--dist/htmx.js1848
-rw-r--r--dist/htmx.min.js2
-rw-r--r--dist/htmx.min.js.gzbin15166 -> 15576 bytes
-rw-r--r--package.json2
-rwxr-xr-xscripts/www.sh2
-rw-r--r--www/content/posts/2024-03-15-htmx-2.0.0-beta1-is-released.md56
-rw-r--r--www/static/src/htmx.d.ts641
-rw-r--r--www/static/src/htmx.js1848
-rw-r--r--www/static/test/attributes/hx-swap-oob.js119
-rw-r--r--www/static/test/attributes/hx-swap.js47
-rw-r--r--www/themes/htmx-theme/static/js/htmx.js1848
14 files changed, 9422 insertions, 2535 deletions
diff --git a/dist/htmx.amd.js b/dist/htmx.amd.js
index 097b2496..ccc3a16b 100644
--- a/dist/htmx.amd.js
+++ b/dist/htmx.amd.js
@@ -3,81 +3,300 @@ var htmx = (function() {
'use strict'
// Public API
- //* * @type {import("./htmx").HtmxApi} */
const htmx = {
+ // Tsc madness here, assigning the functions directly results in an invalid TypeScript output, but reassigning is fine
/* Event processing */
- onLoad: onLoadHelper,
- process: processNode,
- on: addEventListenerImpl,
- off: removeEventListenerImpl,
- trigger: triggerEvent,
- ajax: ajaxHelper,
+ /** @type {typeof onLoadHelper} */
+ onLoad: null,
+ /** @type {typeof processNode} */
+ process: null,
+ /** @type {typeof addEventListenerImpl} */
+ on: null,
+ /** @type {typeof removeEventListenerImpl} */
+ off: null,
+ /** @type {typeof triggerEvent} */
+ trigger: null,
+ /** @type {typeof ajaxHelper} */
+ ajax: null,
/* DOM querying helpers */
- find,
- findAll,
- closest,
+ /** @type {typeof find} */
+ find: null,
+ /** @type {typeof findAll} */
+ findAll: null,
+ /** @type {typeof closest} */
+ closest: null,
+ /**
+ * Returns the input values that would resolve for a given element via the htmx value resolution mechanism
+ *
+ * @see https://htmx.org/api/#values
+ *
+ * @param {Element} elt the element to resolve values on
+ * @param {HttpVerb} type the request type (e.g. **get** or **post**) non-GET's will include the enclosing form of the element. Defaults to **post**
+ * @returns {Object}
+ */
values: function(elt, type) {
const inputValues = getInputValues(elt, type || 'post')
return inputValues.values
},
/* DOM manipulation helpers */
- remove: removeElement,
- addClass: addClassToElement,
- removeClass: removeClassFromElement,
- toggleClass: toggleClassOnElement,
- takeClass: takeClassForElement,
- swap,
+ /** @type {typeof removeElement} */
+ remove: null,
+ /** @type {typeof addClassToElement} */
+ addClass: null,
+ /** @type {typeof removeClassFromElement} */
+ removeClass: null,
+ /** @type {typeof toggleClassOnElement} */
+ toggleClass: null,
+ /** @type {typeof takeClassForElement} */
+ takeClass: null,
+ /** @type {typeof swap} */
+ swap: null,
/* Extension entrypoints */
- defineExtension,
- removeExtension,
+ /** @type {typeof defineExtension} */
+ defineExtension: null,
+ /** @type {typeof removeExtension} */
+ removeExtension: null,
+ /* Debugging */
+ /** @type {typeof logAll} */
+ logAll: null,
+ /** @type {typeof logNone} */
+ logNone: null,
/* Debugging */
- logAll,
- logNone,
+ /**
+ * The logger htmx uses to log with
+ *
+ * @see https://htmx.org/api/#logger
+ */
logger: null,
+ /**
+ * A property holding the configuration htmx uses at runtime.
+ *
+ * Note that using a [meta tag](https://htmx.org/docs/#config) is the preferred mechanism for setting these properties.
+ *
+ * @see https://htmx.org/api/#config
+ */
config: {
+ /**
+ * Whether to use history.
+ * @type boolean
+ * @default true
+ */
historyEnabled: true,
+ /**
+ * The number of pages to keep in **localStorage** for history support.
+ * @type number
+ * @default 10
+ */
historyCacheSize: 10,
+ /**
+ * @type boolean
+ * @default false
+ */
refreshOnHistoryMiss: false,
+ /**
+ * The default swap style to use if **[hx-swap](https://htmx.org/attributes/hx-swap)** is omitted.
+ * @type HtmxSwapStyle
+ * @default 'innerHTML'
+ */
defaultSwapStyle: 'innerHTML',
+ /**
+ * The default delay between receiving a response from the server and doing the swap.
+ * @type number
+ * @default 0
+ */
defaultSwapDelay: 0,
+ /**
+ * The default delay between completing the content swap and settling attributes.
+ * @type number
+ * @default 20
+ */
defaultSettleDelay: 20,
+ /**
+ * If true, htmx will inject a small amount of CSS into the page to make indicators invisible unless the **htmx-indicator** class is present.
+ * @type boolean
+ * @default true
+ */
includeIndicatorStyles: true,
+ /**
+ * The class to place on indicators when a request is in flight.
+ * @type string
+ * @default 'htmx-indicator'
+ */
indicatorClass: 'htmx-indicator',
+ /**
+ * The class to place on triggering elements when a request is in flight.
+ * @type string
+ * @default 'htmx-request'
+ */
requestClass: 'htmx-request',
+ /**
+ * The class to temporarily place on elements that htmx has added to the DOM.
+ * @type string
+ * @default 'htmx-added'
+ */
addedClass: 'htmx-added',
+ /**
+ * The class to place on target elements when htmx is in the settling phase.
+ * @type string
+ * @default 'htmx-settling'
+ */
settlingClass: 'htmx-settling',
+ /**
+ * The class to place on target elements when htmx is in the swapping phase.
+ * @type string
+ * @default 'htmx-swapping'
+ */
swappingClass: 'htmx-swapping',
+ /**
+ * Allows the use of eval-like functionality in htmx, to enable **hx-vars**, trigger conditions & script tag evaluation. Can be set to **false** for CSP compatibility.
+ * @type boolean
+ * @default true
+ */
allowEval: true,
+ /**
+ * If set to false, disables the interpretation of script tags.
+ * @type boolean
+ * @default true
+ */
allowScriptTags: true,
+ /**
+ * If set, the nonce will be added to inline scripts.
+ * @type string
+ * @default ''
+ */
inlineScriptNonce: '',
+ /**
+ * The attributes to settle during the settling phase.
+ * @type string[]
+ * @default ['class', 'style', 'width', 'height']
+ */
attributesToSettle: ['class', 'style', 'width', 'height'],
+ /**
+ * Allow cross-site Access-Control requests using credentials such as cookies, authorization headers or TLS client certificates.
+ * @type boolean
+ * @default false
+ */
withCredentials: false,
+ /**
+ * @type number
+ * @default 0
+ */
timeout: 0,
+ /**
+ * The default implementation of **getWebSocketReconnectDelay** for reconnecting after unexpected connection loss by the event code **Abnormal Closure**, **Service Restart** or **Try Again Later**.
+ * @type {'full-jitter' | ((retryCount:number) => number)}
+ * @default "full-jitter"
+ */
wsReconnectDelay: 'full-jitter',
+ /**
+ * The type of binary data being received over the WebSocket connection
+ * @type BinaryType
+ * @default 'blob'
+ */
wsBinaryType: 'blob',
+ /**
+ * @type string
+ * @default '[hx-disable], [data-hx-disable]'
+ */
disableSelector: '[hx-disable], [data-hx-disable]',
+ /**
+ * @type {'auto' | 'instant' | 'smooth'}
+ * @default 'smooth'
+ */
scrollBehavior: 'instant',
+ /**
+ * If the focused element should be scrolled into view.
+ * @type boolean
+ * @default false
+ */
defaultFocusScroll: false,
+ /**
+ * If set to true htmx will include a cache-busting parameter in GET requests to avoid caching partial responses by the browser
+ * @type boolean
+ * @default false
+ */
getCacheBusterParam: false,
+ /**
+ * If set to true, htmx will use the View Transition API when swapping in new content.
+ * @type boolean
+ * @default false
+ */
globalViewTransitions: false,
+ /**
+ * htmx will format requests with these methods by encoding their parameters in the URL, not the request body
+ * @type {(HttpVerb)[]}
+ * @default ['get', 'delete']
+ */
methodsThatUseUrlParams: ['get', 'delete'],
+ /**
+ * If set to true, disables htmx-based requests to non-origin hosts.
+ * @type boolean
+ * @default false
+ */
selfRequestsOnly: true,
+ /**
+ * If set to true htmx will not update the title of the document when a title tag is found in new content
+ * @type boolean
+ * @default false
+ */
ignoreTitle: false,
+ /**
+ * Whether the target of a boosted element is scrolled into the viewport.
+ * @type boolean
+ * @default true
+ */
scrollIntoViewOnBoost: true,
+ /**
+ * The cache to store evaluated trigger specifications into.
+ * You may define a simple object to use a never-clearing cache, or implement your own system using a [proxy object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
+ * @type {Object|null}
+ * @default null
+ */
triggerSpecsCache: null,
+ /** @type boolean */
disableInheritance: false,
+ /** @type HtmxResponseHandlingConfig[] */
responseHandling: [
{ code: '204', swap: false },
{ code: '[23]..', swap: true },
{ code: '[45]..', swap: false, error: true }
- ]
+ ],
+ /**
+ * Whether to process OOB swaps on elements that are nested within the main response element.
+ * @type boolean
+ * @default true
+ */
+ allowNestedOobSwaps: true
},
- parseInterval,
- _: internalEval,
+ /** @type {typeof parseInterval} */
+ parseInterval: null,
+ /** @type {typeof internalEval} */
+ _: null,
version: '2.0a'
}
+ // Tsc madness part 2
+ htmx.onLoad = onLoadHelper
+ htmx.process = processNode
+ htmx.on = addEventListenerImpl
+ htmx.off = removeEventListenerImpl
+ htmx.trigger = triggerEvent
+ htmx.ajax = ajaxHelper
+ htmx.find = find
+ htmx.findAll = findAll
+ htmx.closest = closest
+ htmx.remove = removeElement
+ htmx.addClass = addClassToElement
+ htmx.removeClass = removeClassFromElement
+ htmx.toggleClass = toggleClassOnElement
+ htmx.takeClass = takeClassForElement
+ htmx.swap = swap
+ htmx.defineExtension = defineExtension
+ htmx.removeExtension = removeExtension
+ htmx.logAll = logAll
+ htmx.logNone = logNone
+ htmx.parseInterval = parseInterval
+ htmx._ = internalEval
- /** @type {import("./htmx").HtmxInternalApi} */
const internalAPI = {
addTriggerHandler,
bodyContains,
@@ -129,6 +348,16 @@ var htmx = (function() {
global ? 'gim' : 'im')
}
+ /**
+ * Parses an interval string consistent with the way htmx does. Useful for plugins that have timing-related attributes.
+ *
+ * Caution: Accepts an int followed by either **s** or **ms**. All other values use **parseFloat**
+ *
+ * @see https://htmx.org/api/#parseInterval
+ *
+ * @param {string} str timing string
+ * @returns {number|undefined}
+ */
function parseInterval(str) {
if (str == undefined) {
return undefined
@@ -148,23 +377,28 @@ var htmx = (function() {
}
/**
- * @param {Element} elt
+ * @param {Node} elt
* @param {string} name
* @returns {(string | null)}
*/
function getRawAttribute(elt, name) {
- return elt.getAttribute && elt.getAttribute(name)
+ return elt instanceof Element && elt.getAttribute(name)
}
+ /**
+ * @param {Element} elt
+ * @param {string} qualifiedName
+ * @returns {boolean}
+ */
// resolve with both hx and data-hx prefixes
function hasAttribute(elt, qualifiedName) {
- return elt.hasAttribute && (elt.hasAttribute(qualifiedName) ||
+ return !!elt.hasAttribute && (elt.hasAttribute(qualifiedName) ||
elt.hasAttribute('data-' + qualifiedName))
}
/**
*
- * @param {HTMLElement} elt
+ * @param {Node} elt
* @param {string} qualifiedName
* @returns {(string | null)}
*/
@@ -173,8 +407,8 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
- * @returns {HTMLElement | ShadowRoot | null}
+ * @param {Node} elt
+ * @returns {Node | null}
*/
function parentElt(elt) {
const parent = elt.parentElement
@@ -190,16 +424,18 @@ var htmx = (function() {
}
/**
- * @returns {Document | ShadowRoot}
+ * @param {Node} elt
+ * @param {boolean} global
+ * @returns {Node|Document}
*/
function getRootNode(elt, global) {
return elt.getRootNode ? elt.getRootNode({ composed: global }) : getDocument()
}
/**
- * @param {HTMLElement} elt
- * @param {(e:HTMLElement) => boolean} condition
- * @returns {HTMLElement | null}
+ * @param {Node} elt
+ * @param {(e:Node) => boolean} condition
+ * @returns {Node | null}
*/
function getClosestMatch(elt, condition) {
while (elt && !condition(elt)) {
@@ -209,6 +445,12 @@ var htmx = (function() {
return elt || null
}
+ /**
+ * @param {Element} initialElement
+ * @param {Element} ancestor
+ * @param {string} attributeName
+ * @returns {string|null}
+ */
function getAttributeValueWithDisinheritance(initialElement, ancestor, attributeName) {
const attributeValue = getAttributeValue(ancestor, attributeName)
const disinherit = getAttributeValue(ancestor, 'hx-disinherit')
@@ -229,14 +471,14 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {string} attributeName
* @returns {string | null}
*/
function getClosestAttributeValue(elt, attributeName) {
let closestAttr = null
getClosestMatch(elt, function(e) {
- return closestAttr = getAttributeValueWithDisinheritance(elt, e, attributeName)
+ return !!(closestAttr = getAttributeValueWithDisinheritance(elt, asElement(e), attributeName))
})
if (closestAttr !== 'unset') {
return closestAttr
@@ -244,15 +486,15 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Node} elt
* @param {string} selector
* @returns {boolean}
*/
function matches(elt, selector) {
// @ts-ignore: non-standard properties for browser compatibility
// noinspection JSUnresolvedVariable
- const matchesFunction = elt.matches || elt.matchesSelector || elt.msMatchesSelector || elt.mozMatchesSelector || elt.webkitMatchesSelector || elt.oMatchesSelector
- return matchesFunction && matchesFunction.call(elt, selector)
+ const matchesFunction = elt instanceof Element && (elt.matches || elt.matchesSelector || elt.msMatchesSelector || elt.mozMatchesSelector || elt.webkitMatchesSelector || elt.oMatchesSelector)
+ return !!matchesFunction && matchesFunction.call(elt, selector)
}
/**
@@ -270,9 +512,7 @@ var htmx = (function() {
}
/**
- *
* @param {string} resp
- * @param {number} depth
* @returns {Document}
*/
function parseHTML(resp) {
@@ -280,12 +520,20 @@ var htmx = (function() {
return parser.parseFromString(resp, 'text/html')
}
+ /**
+ * @param {DocumentFragment} fragment
+ * @param {Node} elt
+ */
function takeChildrenFor(fragment, elt) {
while (elt.childNodes.length > 0) {
fragment.append(elt.childNodes[0])
}
}
+ /**
+ * @param {HTMLScriptElement} script
+ * @returns {HTMLScriptElement}
+ */
function duplicateScript(script) {
const newScript = getDocument().createElement('script')
forEach(script.attributes, function(attr) {
@@ -299,16 +547,23 @@ var htmx = (function() {
return newScript
}
+ /**
+ * @param {HTMLScriptElement} script
+ * @returns {boolean}
+ */
function isJavaScriptScriptNode(script) {
return script.matches('script') && (script.type === 'text/javascript' || script.type === 'module' || script.type === '')
}
- // we have to make new copies of script tags that we are going to insert because
- // SOME browsers (not saying who, but it involves an element and an animal) don't
- // execute scripts created in <template> tags when they are inserted into the DOM
- // and all the others do lmao
+ /**
+ * we have to make new copies of script tags that we are going to insert because
+ * SOME browsers (not saying who, but it involves an element and an animal) don't
+ * execute scripts created in <template> tags when they are inserted into the DOM
+ * and all the others do lmao
+ * @param {DocumentFragment} fragment
+ */
function normalizeScriptTags(fragment) {
- Array.from(fragment.querySelectorAll('script')).forEach((script) => {
+ Array.from(fragment.querySelectorAll('script')).forEach(/** @param {HTMLScriptElement} script */ (script) => {
if (isJavaScriptScriptNode(script)) {
const newScript = duplicateScript(script)
const parent = script.parentNode
@@ -324,31 +579,37 @@ var htmx = (function() {
}
/**
- * @param {string} response HTML
- * @returns {DocumentFragment & {title: string}} a document fragment representing the response HTML, including
+ * @typedef {DocumentFragment & {title?: string}} DocumentFragmentWithTitle
+ * @description a document fragment representing the response HTML, including
* a `title` property for any title information found
*/
+
+ /**
+ * @param {string} response HTML
+ * @returns {DocumentFragmentWithTitle}
+ */
function makeFragment(response) {
// strip head tag to determine shape of response we are dealing with
const responseWithNoHead = response.replace(HEAD_TAG_REGEX, '')
const startTag = getStartTag(responseWithNoHead)
- let fragment = null
+ /** @type DocumentFragmentWithTitle */
+ let fragment
if (startTag === 'html') {
// if it is a full document, parse it and return the body
- fragment = new DocumentFragment()
+ fragment = /** @type DocumentFragmentWithTitle */ (new DocumentFragment())
const doc = parseHTML(response)
takeChildrenFor(fragment, doc.body)
fragment.title = doc.title
} else if (startTag === 'body') {
// parse body w/o wrapping in template
- fragment = new DocumentFragment()
+ fragment = /** @type DocumentFragmentWithTitle */ (new DocumentFragment())
const doc = parseHTML(responseWithNoHead)
takeChildrenFor(fragment, doc.body)
fragment.title = doc.title
} else {
// otherwise we have non-body partial HTML content, so wrap it in a template to maximize parsing flexibility
const doc = parseHTML('<body><template class="internal-htmx-wrapper">' + responseWithNoHead + '</template></body>')
- fragment = doc.querySelector('template').content
+ fragment = /** @type DocumentFragmentWithTitle */ (doc.querySelector('template').content)
// extract title into fragment for later processing
fragment.title = doc.title
@@ -393,7 +654,7 @@ var htmx = (function() {
* @returns {o is Function}
*/
function isFunction(o) {
- return isType(o, 'Function')
+ return typeof o === 'function'
}
/**
@@ -405,9 +666,50 @@ var htmx = (function() {
}
/**
+ * @typedef {Object} OnHandler
+ * @property {(keyof HTMLElementEventMap)|string} event
+ * @property {EventListener} listener
+ */
+
+ /**
+ * @typedef {Object} ListenerInfo
+ * @property {string} trigger
+ * @property {EventListener} listener
+ * @property {EventTarget} on
+ */
+
+ /**
+ * @typedef {Object} HtmxNodeInternalData
+ * Element data
+ * @property {number} [initHash]
+ * @property {boolean} [boosted]
+ * @property {OnHandler[]} [onHandlers]
+ * @property {number} [timeout]
+ * @property {ListenerInfo[]} [listenerInfos]
+ * @property {boolean} [cancelled]
+ * @property {boolean} [triggeredOnce]
+ * @property {number} [delayed]
+ * @property {number|null} [throttle]
+ * @property {string} [lastValue]
+ * @property {boolean} [loaded]
+ * @property {string} [path]
+ * @property {string} [verb]
+ * @property {boolean} [polling]
+ * @property {HTMLButtonElement|HTMLInputElement|null} [lastButtonClicked]
+ * @property {number} [requestCount]
+ * @property {XMLHttpRequest} [xhr]
+ * @property {(() => void)[]} [queuedRequests]
+ * @property {boolean} [abortable]
+ *
+ * Event data
+ * @property {HtmxTriggerSpecification} [triggerSpec]
+ * @property {EventTarget[]} [handledFor]
+ */
+
+ /**
* getInternalData retrieves "private" data stored by htmx within an element
- * @param {HTMLElement} elt
- * @returns {*}
+ * @param {EventTarget|Event} elt
+ * @returns {HtmxNodeInternalData}
*/
function getInternalData(elt) {
const dataProp = 'htmx-internal-data'
@@ -420,8 +722,9 @@ var htmx = (function() {
/**
* toArray converts an ArrayLike object into a real array.
- * @param {ArrayLike} arr
- * @returns {any[]}
+ * @template T
+ * @param {ArrayLike<T>} arr
+ * @returns {T[]}
*/
function toArray(arr) {
const returnArr = []
@@ -435,13 +738,8 @@ var htmx = (function() {
/**
* @template T
- * @callback forEachCallback
- * @param {T} value
- */
- /**
- * @template T
- * @param {{[index: number]: T, length: number}} arr
- * @param {forEachCallback<T>} func
+ * @param {T[]|NamedNodeMap|HTMLCollection|HTMLFormControlsCollection|ArrayLike<T>} arr
+ * @param {(T) => void} func
*/
function forEach(arr, func) {
if (arr) {
@@ -451,6 +749,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} el
+ * @returns {boolean}
+ */
function isScrolledIntoView(el) {
const rect = el.getBoundingClientRect()
const elemTop = rect.top
@@ -458,35 +760,52 @@ var htmx = (function() {
return elemTop < window.innerHeight && elemBottom >= 0
}
+ /**
+ * @param {Node} elt
+ * @returns {boolean}
+ */
function bodyContains(elt) {
// IE Fix
- if (elt.getRootNode && elt.getRootNode() instanceof window.ShadowRoot) {
- return getDocument().body.contains(elt.getRootNode().host)
+ const rootNode = elt.getRootNode && elt.getRootNode()
+ if (rootNode && rootNode instanceof window.ShadowRoot) {
+ return getDocument().body.contains(rootNode.host)
} else {
return getDocument().body.contains(elt)
}
}
+ /**
+ * @param {string} trigger
+ * @returns {string[]}
+ */
function splitOnWhitespace(trigger) {
return trigger.trim().split(/\s+/)
}
/**
- * mergeObjects takes all of the keys from
+ * mergeObjects takes all the keys from
* obj2 and duplicates them into obj1
- * @param {Object} obj1
- * @param {Object} obj2
- * @returns {Object}
+ * @template T1
+ * @template T2
+ * @param {T1} obj1
+ * @param {T2} obj2
+ * @returns {T1 & T2}
*/
function mergeObjects(obj1, obj2) {
for (const key in obj2) {
if (obj2.hasOwnProperty(key)) {
+ // @ts-ignore tsc doesn't seem to properly handle types merging
obj1[key] = obj2[key]
}
}
+ // @ts-ignore tsc doesn't seem to properly handle types merging
return obj1
}
+ /**
+ * @param {string} jString
+ * @returns {any|null}
+ */
function parseJSON(jString) {
try {
return JSON.parse(jString)
@@ -496,6 +815,9 @@ var htmx = (function() {
}
}
+ /**
+ * @returns {boolean}
+ */
function canAccessLocalStorage() {
const test = 'htmx:localStorageTest'
try {
@@ -507,6 +829,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {string} path
+ * @returns {string}
+ */
function normalizePath(path) {
try {
const url = new URL(path)
@@ -528,19 +854,36 @@ var htmx = (function() {
// public API
//= =========================================================================================
+ /**
+ * @param {string} str
+ * @returns {any}
+ */
function internalEval(str) {
return maybeEval(getDocument().body, function() {
return eval(str)
})
}
+ /**
+ * Adds a callback for the **htmx:load** event. This can be used to process new content, for example initializing the content with a javascript library
+ *
+ * @see https://htmx.org/api/#onLoad
+ *
+ * @param {(elt: Node) => void} callback the callback to call on newly loaded content
+ * @returns {EventListener}
+ */
function onLoadHelper(callback) {
- const value = htmx.on('htmx:load', function(evt) {
+ const value = htmx.on('htmx:load', /** @param {CustomEvent} evt */ function(evt) {
callback(evt.detail.elt)
})
return value
}
+ /**
+ * Log all htmx events, useful for debugging.
+ *
+ * @see https://htmx.org/api/#logAll
+ */
function logAll() {
htmx.logger = function(elt, event, data) {
if (console) {
@@ -553,26 +896,59 @@ var htmx = (function() {
htmx.logger = null
}
+ /**
+ * Finds an element matching the selector
+ *
+ * @see https://htmx.org/api/#find
+ *
+ * @param {ParentNode|string} eltOrSelector the root element to find the matching element in, inclusive | the selector to match
+ * @param {string} [selector] the selector to match
+ * @returns {Element|null}
+ */
function find(eltOrSelector, selector) {
- if (selector) {
+ if (typeof eltOrSelector !== 'string') {
return eltOrSelector.querySelector(selector)
} else {
return find(getDocument(), eltOrSelector)
}
}
+ /**
+ * Finds all elements matching the selector
+ *
+ * @see https://htmx.org/api/#findAll
+ *
+ * @param {ParentNode|string} eltOrSelector the root element to find the matching elements in, inclusive | the selector to match
+ * @param {string} [selector] the selector to match
+ * @returns {NodeListOf<Element>}
+ */
function findAll(eltOrSelector, selector) {
- if (selector) {
+ if (typeof eltOrSelector !== 'string') {
return eltOrSelector.querySelectorAll(selector)
} else {
return findAll(getDocument(), eltOrSelector)
}
}
+ /**
+ * @returns Window
+ */
+ function getWindow() {
+ return window
+ }
+
+ /**
+ * Removes an element from the DOM
+ *
+ * @see https://htmx.org/api/#remove
+ *
+ * @param {Node} elt
+ * @param {number} [delay]
+ */
function removeElement(elt, delay) {
elt = resolveTarget(elt)
if (delay) {
- setTimeout(function() {
+ getWindow().setTimeout(function() {
removeElement(elt)
elt = null
}, delay)
@@ -581,10 +957,54 @@ var htmx = (function() {
}
}
+ /**
+ * @param {any} elt
+ * @return {Element|null}
+ */
+ function asElement(elt) {
+ return elt instanceof Element ? elt : null
+ }
+
+ /**
+ * @param {any} elt
+ * @return {HTMLElement|null}
+ */
+ function asHtmlElement(elt) {
+ return elt instanceof HTMLElement ? elt : null
+ }
+
+ /**
+ * @param {any} value
+ * @return {string|null}
+ */
+ function asString(value) {
+ return typeof value === 'string' ? value : null
+ }
+
+ /**
+ * @param {EventTarget} elt
+ * @return {ParentNode|null}
+ */
+ function asParentNode(elt) {
+ return elt instanceof Element || elt instanceof Document || elt instanceof DocumentFragment ? elt : null
+ }
+
+ /**
+ * This method adds a class to the given element.
+ *
+ * @see https://htmx.org/api/#addClass
+ *
+ * @param {Element|string} elt the element to add the class to
+ * @param {string} clazz the class to add
+ * @param {number} [delay] the delay (in milliseconds) before class is added
+ */
function addClassToElement(elt, clazz, delay) {
- elt = resolveTarget(elt)
+ elt = asElement(resolveTarget(elt))
+ if (!elt) {
+ return
+ }
if (delay) {
- setTimeout(function() {
+ getWindow().setTimeout(function() {
addClassToElement(elt, clazz)
elt = null
}, delay)
@@ -593,10 +1013,22 @@ var htmx = (function() {
}
}
- function removeClassFromElement(elt, clazz, delay) {
- elt = resolveTarget(elt)
+ /**
+ * Removes a class from the given element
+ *
+ * @see https://htmx.org/api/#removeClass
+ *
+ * @param {Node|string} node element to remove the class from
+ * @param {string} clazz the class to remove
+ * @param {number} [delay] the delay (in milliseconds before class is removed)
+ */
+ function removeClassFromElement(node, clazz, delay) {
+ let elt = asElement(resolveTarget(node))
+ if (!elt) {
+ return
+ }
if (delay) {
- setTimeout(function() {
+ getWindow().setTimeout(function() {
removeClassFromElement(elt, clazz)
elt = null
}, delay)
@@ -611,22 +1043,47 @@ var htmx = (function() {
}
}
+ /**
+ * Toggles the given class on an element
+ *
+ * @see https://htmx.org/api/#toggleClass
+ *
+ * @param {Element|string} elt the element to toggle the class on
+ * @param {string} clazz the class to toggle
+ */
function toggleClassOnElement(elt, clazz) {
elt = resolveTarget(elt)
elt.classList.toggle(clazz)
}
+ /**
+ * Takes the given class from its siblings, so that among its siblings, only the given element will have the class.
+ *
+ * @see https://htmx.org/api/#takeClass
+ *
+ * @param {Node|string} elt the element that will take the class
+ * @param {string} clazz the class to take
+ */
function takeClassForElement(elt, clazz) {
elt = resolveTarget(elt)
forEach(elt.parentElement.children, function(child) {
removeClassFromElement(child, clazz)
})
- addClassToElement(elt, clazz)
+ addClassToElement(asElement(elt), clazz)
}
+ /**
+ * Finds the closest matching element in the given elements parentage, inclusive of the element
+ *
+ * @see https://htmx.org/api/#closest
+ *
+ * @param {Element|string} elt the element to find the selector from
+ * @param {string} selector the selector to find
+ * @returns {Element|null}
+ */
function closest(elt, selector) {
- elt = resolveTarget(elt)
- if (elt.closest) {
+ elt = asElement(resolveTarget(elt))
+ if (elt && elt.closest) {
return elt.closest(selector)
} else {
// TODO remove when IE goes away
@@ -635,19 +1092,33 @@ var htmx = (function() {
return elt
}
}
- while (elt = elt && parentElt(elt))
+ while (elt = elt && asElement(parentElt(elt)))
return null
}
}
+ /**
+ * @param {string} str
+ * @param {string} prefix
+ * @returns {boolean}
+ */
function startsWith(str, prefix) {
return str.substring(0, prefix.length) === prefix
}
+ /**
+ * @param {string} str
+ * @param {string} suffix
+ * @returns {boolean}
+ */
function endsWith(str, suffix) {
return str.substring(str.length - suffix.length) === suffix
}
+ /**
+ * @param {string} selector
+ * @returns {string}
+ */
function normalizeSelector(selector) {
const trimmedSelector = selector.trim()
if (startsWith(trimmedSelector, '<') && endsWith(trimmedSelector, '/>')) {
@@ -657,17 +1128,24 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Node|Element|Document|string} elt
+ * @param {string} selector
+ * @param {boolean=} global
+ * @returns {(Node|Window)[]}
+ */
function querySelectorAllExt(elt, selector, global) {
+ elt = resolveTarget(elt)
if (selector.indexOf('closest ') === 0) {
- return [closest(elt, normalizeSelector(selector.substr(8)))]
+ return [closest(asElement(elt), normalizeSelector(selector.substr(8)))]
} else if (selector.indexOf('find ') === 0) {
- return [find(elt, normalizeSelector(selector.substr(5)))]
+ return [find(asParentNode(elt), normalizeSelector(selector.substr(5)))]
} else if (selector === 'next') {
- return [elt.nextElementSibling]
+ return [asElement(elt).nextElementSibling]
} else if (selector.indexOf('next ') === 0) {
return [scanForwardQuery(elt, normalizeSelector(selector.substr(5)), !!global)]
} else if (selector === 'previous') {
- return [elt.previousElementSibling]
+ return [asElement(elt).previousElementSibling]
} else if (selector.indexOf('previous ') === 0) {
return [scanBackwardsQuery(elt, normalizeSelector(selector.substr(9)), !!global)]
} else if (selector === 'document') {
@@ -681,12 +1159,18 @@ var htmx = (function() {
} else if (selector.indexOf('global ') === 0) {
return querySelectorAllExt(elt, selector.slice(7), true)
} else {
- return getRootNode(elt, !!global).querySelectorAll(normalizeSelector(selector))
+ return toArray(asParentNode(getRootNode(elt, !!global)).querySelectorAll(normalizeSelector(selector)))
}
}
+ /**
+ * @param {Node} start
+ * @param {string} match
+ * @param {boolean} global
+ * @returns {Element}
+ */
var scanForwardQuery = function(start, match, global) {
- const results = getRootNode(start, global).querySelectorAll(match)
+ const results = asParentNode(getRootNode(start, global)).querySelectorAll(match)
for (let i = 0; i < results.length; i++) {
const elt = results[i]
if (elt.compareDocumentPosition(start) === Node.DOCUMENT_POSITION_PRECEDING) {
@@ -695,8 +1179,14 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Node} start
+ * @param {string} match
+ * @param {boolean} global
+ * @returns {Element}
+ */
var scanBackwardsQuery = function(start, match, global) {
- const results = getRootNode(start, global).querySelectorAll(match)
+ const results = asParentNode(getRootNode(start, global)).querySelectorAll(match)
for (let i = results.length - 1; i >= 0; i--) {
const elt = results[i]
if (elt.compareDocumentPosition(start) === Node.DOCUMENT_POSITION_FOLLOWING) {
@@ -705,8 +1195,13 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Node|string} eltOrSelector
+ * @param {string=} selector
+ * @returns {Node|Window}
+ */
function querySelectorExt(eltOrSelector, selector) {
- if (selector) {
+ if (typeof eltOrSelector !== 'string') {
return querySelectorAllExt(eltOrSelector, selector)[0]
} else {
return querySelectorAllExt(getDocument().body, eltOrSelector)[0]
@@ -714,36 +1209,62 @@ var htmx = (function() {
}
/**
- *
- * @param {string|Element} arg2
- * @param {Element} [context]
- * @returns {Element}
+ * @template {EventTarget} T
+ * @param {T|string} eltOrSelector
+ * @param {T} [context]
+ * @returns {Element|T|null}
*/
- function resolveTarget(arg2, context) {
- if (isType(arg2, 'String')) {
- return find(context || document, arg2)
+ function resolveTarget(eltOrSelector, context) {
+ if (typeof eltOrSelector === 'string') {
+ return find(asParentNode(context) || document, eltOrSelector)
} else {
- // @ts-ignore
- return arg2
+ return eltOrSelector
}
}
+ /**
+ * @typedef {keyof HTMLElementEventMap|string} AnyEventName
+ */
+
+ /**
+ * @typedef {Object} EventArgs
+ * @property {EventTarget} target
+ * @property {AnyEventName} event
+ * @property {EventListener} listener
+ */
+
+ /**
+ * @param {EventTarget|AnyEventName} arg1
+ * @param {AnyEventName|EventListener} arg2
+ * @param {EventListener} [arg3]
+ * @returns {EventArgs}
+ */
function processEventArgs(arg1, arg2, arg3) {
if (isFunction(arg2)) {
return {
target: getDocument().body,
- event: arg1,
+ event: asString(arg1),
listener: arg2
}
} else {
return {
target: resolveTarget(arg1),
- event: arg2,
+ event: asString(arg2),
listener: arg3
}
}
}
+ /**
+ * Adds an event listener to an element
+ *
+ * @see https://htmx.org/api/#on
+ *
+ * @param {EventTarget|string} arg1 the element to add the listener to | the event name to add the listener for
+ * @param {string|EventListener} arg2 the event name to add the listener for | the listener to add
+ * @param {EventListener} [arg3] the listener to add
+ * @returns {EventListener}
+ */
function addEventListenerImpl(arg1, arg2, arg3) {
ready(function() {
const eventArgs = processEventArgs(arg1, arg2, arg3)
@@ -753,6 +1274,16 @@ var htmx = (function() {
return b ? arg2 : arg3
}
+ /**
+ * Removes an event listener from an element
+ *
+ * @see https://htmx.org/api/#off
+ *
+ * @param {EventTarget|string} arg1 the element to remove the listener from | the event name to remove the listener from
+ * @param {string|EventListener} arg2 the event name to remove the listener from | the listener to remove
+ * @param {EventListener} [arg3] the listener to remove
+ * @returns {EventListener}
+ */
function removeEventListenerImpl(arg1, arg2, arg3) {
ready(function() {
const eventArgs = processEventArgs(arg1, arg2, arg3)
@@ -766,6 +1297,11 @@ var htmx = (function() {
//= ===================================================================
const DUMMY_ELT = getDocument().createElement('output') // dummy element for bad selectors
+ /**
+ * @param {Element} elt
+ * @param {string} attrName
+ * @returns {(Node|Window)[]}
+ */
function findAttributeTargets(elt, attrName) {
const attrTarget = getClosestAttributeValue(elt, attrName)
if (attrTarget) {
@@ -783,12 +1319,21 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @param {string} attribute
+ * @returns {Element|null}
+ */
function findThisElement(elt, attribute) {
- return getClosestMatch(elt, function(elt) {
- return getAttributeValue(elt, attribute) != null
- })
+ return asElement(getClosestMatch(elt, function(elt) {
+ return getAttributeValue(asElement(elt), attribute) != null
+ }))
}
+ /**
+ * @param {Element} elt
+ * @returns {Node|Window|null}
+ */
function getTarget(elt) {
const targetStr = getClosestAttributeValue(elt, 'hx-target')
if (targetStr) {
@@ -807,6 +1352,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {string} name
+ * @returns {boolean}
+ */
function shouldSettleAttribute(name) {
const attributesToSettle = htmx.config.attributesToSettle
for (let i = 0; i < attributesToSettle.length; i++) {
@@ -817,6 +1366,10 @@ var htmx = (function() {
return false
}
+ /**
+ * @param {Element} mergeTo
+ * @param {Element} mergeFrom
+ */
function cloneAttributes(mergeTo, mergeFrom) {
forEach(mergeTo.attributes, function(attr) {
if (!mergeFrom.hasAttribute(attr.name) && shouldSettleAttribute(attr.name)) {
@@ -830,6 +1383,11 @@ var htmx = (function() {
})
}
+ /**
+ * @param {HtmxSwapStyle} swapStyle
+ * @param {Element} target
+ * @returns {boolean}
+ */
function isInlineSwap(swapStyle, target) {
const extensions = getExtensions(target)
for (let i = 0; i < extensions.length; i++) {
@@ -846,14 +1404,14 @@ var htmx = (function() {
}
/**
- *
* @param {string} oobValue
* @param {Element} oobElement
- * @param {*} settleInfo
+ * @param {HtmxSettleInfo} settleInfo
* @returns
*/
function oobSwap(oobValue, oobElement, settleInfo) {
let selector = '#' + getRawAttribute(oobElement, 'id')
+ /** @type HtmxSwapStyle */
let swapStyle = 'outerHTML'
if (oobValue === 'true') {
// do nothing
@@ -874,7 +1432,7 @@ var htmx = (function() {
fragment = getDocument().createDocumentFragment()
fragment.appendChild(oobElementClone)
if (!isInlineSwap(swapStyle, target)) {
- fragment = oobElementClone // if this is not an inline swap, we use the content of the node, not the node itself
+ fragment = asParentNode(oobElementClone) // if this is not an inline swap, we use the content of the node, not the node itself
}
const beforeSwapDetails = { shouldSwap: true, target, fragment }
@@ -897,6 +1455,9 @@ var htmx = (function() {
return oobValue
}
+ /**
+ * @param {DocumentFragment} fragment
+ */
function handlePreservedElements(fragment) {
forEach(findAll(fragment, '[hx-preserve], [data-hx-preserve]'), function(preservedElt) {
const id = getAttributeValue(preservedElt, 'id')
@@ -907,14 +1468,20 @@ var htmx = (function() {
})
}
+ /**
+ * @param {Node} parentNode
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function handleAttributes(parentNode, fragment, settleInfo) {
forEach(fragment.querySelectorAll('[id]'), function(newNode) {
const id = getRawAttribute(newNode, 'id')
if (id && id.length > 0) {
const normalizedId = id.replace("'", "\\'")
const normalizedTag = newNode.tagName.replace(':', '\\:')
- const oldNode = parentNode.querySelector(normalizedTag + "[id='" + normalizedId + "']")
- if (oldNode && oldNode !== parentNode) {
+ const parentElt = asParentNode(parentNode)
+ const oldNode = parentElt && parentElt.querySelector(normalizedTag + "[id='" + normalizedId + "']")
+ if (oldNode && oldNode !== parentElt) {
const newAttributes = newNode.cloneNode()
cloneAttributes(newNode, oldNode)
settleInfo.tasks.push(function() {
@@ -925,28 +1492,41 @@ var htmx = (function() {
})
}
+ /**
+ * @param {Node} child
+ * @returns {HtmxSettleTask}
+ */
function makeAjaxLoadTask(child) {
return function() {
removeClassFromElement(child, htmx.config.addedClass)
- processNode(child)
- processFocus(child)
+ processNode(asElement(child))
+ processFocus(asParentNode(child))
triggerEvent(child, 'htmx:load')
}
}
+ /**
+ * @param {ParentNode} child
+ */
function processFocus(child) {
const autofocus = '[autofocus]'
- const autoFocusedElt = matches(child, autofocus) ? child : child.querySelector(autofocus)
+ const autoFocusedElt = asHtmlElement(matches(child, autofocus) ? child : child.querySelector(autofocus))
if (autoFocusedElt != null) {
autoFocusedElt.focus()
}
}
+ /**
+ * @param {Node} parentNode
+ * @param {Node} insertBefore
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function insertNodesBefore(parentNode, insertBefore, fragment, settleInfo) {
handleAttributes(parentNode, fragment, settleInfo)
while (fragment.childNodes.length > 0) {
const child = fragment.firstChild
- addClassToElement(child, htmx.config.addedClass)
+ addClassToElement(asElement(child), htmx.config.addedClass)
parentNode.insertBefore(child, insertBefore)
if (child.nodeType !== Node.TEXT_NODE && child.nodeType !== Node.COMMENT_NODE) {
settleInfo.tasks.push(makeAjaxLoadTask(child))
@@ -954,8 +1534,13 @@ var htmx = (function() {
}
}
- // based on https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0,
- // derived from Java's string hashcode implementation
+ /**
+ * based on https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0,
+ * derived from Java's string hashcode implementation
+ * @param {string} string
+ * @param {number} hash
+ * @returns {number}
+ */
function stringHash(string, hash) {
let char = 0
while (char < string.length) {
@@ -964,6 +1549,10 @@ var htmx = (function() {
return hash
}
+ /**
+ * @param {Element} elt
+ * @returns {number}
+ */
function attributeHash(elt) {
let hash = 0
// IE fix
@@ -979,17 +1568,23 @@ var htmx = (function() {
return hash
}
+ /**
+ * @param {EventTarget} elt
+ */
function deInitOnHandlers(elt) {
const internalData = getInternalData(elt)
if (internalData.onHandlers) {
for (let i = 0; i < internalData.onHandlers.length; i++) {
const handlerInfo = internalData.onHandlers[i]
- elt.removeEventListener(handlerInfo.event, handlerInfo.listener)
+ removeEventListenerImpl(elt, handlerInfo.event, handlerInfo.listener)
}
delete internalData.onHandlers
}
}
+ /**
+ * @param {Node} element
+ */
function deInitNode(element) {
const internalData = getInternalData(element)
if (internalData.timeout) {
@@ -998,7 +1593,7 @@ var htmx = (function() {
if (internalData.listenerInfos) {
forEach(internalData.listenerInfos, function(info) {
if (info.on) {
- info.on.removeEventListener(info.trigger, info.listener)
+ removeEventListenerImpl(info.on, info.trigger, info.listener)
}
})
}
@@ -1006,16 +1601,27 @@ var htmx = (function() {
forEach(Object.keys(internalData), function(key) { delete internalData[key] })
}
+ /**
+ * @param {Node} element
+ */
function cleanUpElement(element) {
triggerEvent(element, 'htmx:beforeCleanupElement')
deInitNode(element)
+ // @ts-ignore IE11 code
+ // noinspection JSUnresolvedReference
if (element.children) { // IE
+ // @ts-ignore
forEach(element.children, function(child) { cleanUpElement(child) })
}
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapOuterHTML(target, fragment, settleInfo) {
- // @type {HTMLElement}
+ /** @type {Node} */
let newElt
const eltBeforeNewContent = target.previousSibling
insertNodesBefore(parentElt(target), target, fragment, settleInfo)
@@ -1026,35 +1632,70 @@ var htmx = (function() {
}
settleInfo.elts = settleInfo.elts.filter(function(e) { return e !== target })
while (newElt && newElt !== target) {
- if (newElt.nodeType === Node.ELEMENT_NODE) {
+ if (newElt instanceof Element) {
settleInfo.elts.push(newElt)
+ newElt = newElt.nextElementSibling
+ } else {
+ newElt = null
}
- newElt = newElt.nextElementSibling
}
cleanUpElement(target)
- target.remove()
+ if (target instanceof Element) {
+ target.remove()
+ } else {
+ target.parentNode.removeChild(target)
+ }
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapAfterBegin(target, fragment, settleInfo) {
return insertNodesBefore(target, target.firstChild, fragment, settleInfo)
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapBeforeBegin(target, fragment, settleInfo) {
return insertNodesBefore(parentElt(target), target, fragment, settleInfo)
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapBeforeEnd(target, fragment, settleInfo) {
return insertNodesBefore(target, null, fragment, settleInfo)
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapAfterEnd(target, fragment, settleInfo) {
return insertNodesBefore(parentElt(target), target.nextSibling, fragment, settleInfo)
}
- function swapDelete(target, fragment, settleInfo) {
+
+ /**
+ * @param {Node} target
+ */
+ function swapDelete(target) {
cleanUpElement(target)
return parentElt(target).removeChild(target)
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapInnerHTML(target, fragment, settleInfo) {
const firstChild = target.firstChild
insertNodesBefore(target, firstChild, fragment, settleInfo)
@@ -1069,11 +1710,11 @@ var htmx = (function() {
}
/**
- * @param {string} swapStyle
- * @param {HTMLElement} elt
- * @param {HTMLElement} target
- * @param {Node} fragment
- * @param {{ tasks: (() => void)[]; }} settleInfo
+ * @param {HtmxSwapStyle} swapStyle
+ * @param {Element} elt
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
*/
function swapWithStyle(swapStyle, elt, target, fragment, settleInfo) {
switch (swapStyle) {
@@ -1095,7 +1736,7 @@ var htmx = (function() {
swapAfterEnd(target, fragment, settleInfo)
return
case 'delete':
- swapDelete(target, fragment, settleInfo)
+ swapDelete(target)
return
default:
var extensions = getExtensions(elt)
@@ -1127,37 +1768,31 @@ var htmx = (function() {
}
}
+ /**
+ * @param {DocumentFragment} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function findAndSwapOobElements(fragment, settleInfo) {
forEach(findAll(fragment, '[hx-swap-oob], [data-hx-swap-oob]'), function(oobElement) {
- const oobValue = getAttributeValue(oobElement, 'hx-swap-oob')
- if (oobValue != null) {
- oobSwap(oobValue, oobElement, settleInfo)
+ if (htmx.config.allowNestedOobSwaps || oobElement.parentElement === null) {
+ const oobValue = getAttributeValue(oobElement, 'hx-swap-oob')
+ if (oobValue != null) {
+ oobSwap(oobValue, oobElement, settleInfo)
+ }
+ } else {
+ oobElement.removeAttribute('hx-swap-oob')
+ oobElement.removeAttribute('data-hx-swap-oob')
}
})
}
/**
- * @callback swapCallback
- */
-
- /**
- * @typedef {Object} SwapOptions
- * @property {?string} select
- * @property {?string} selectOOB
- * @property {?*} eventInfo
- * @property {?*} anchor
- * @property {?HTMLElement} contextElement
- * @property {?swapCallback} afterSwapCallback
- * @property {?swapCallback} afterSettleCallback
- */
-
- /**
* Implements complete swapping pipeline, including: focus and selection preservation,
* title updates, scroll, OOB swapping, normal swapping and settling
* @param {string|Element} target
* @param {string} content
- * @param {import("./htmx").HtmxSwapSpecification} swapSpec
- * @param {SwapOptions} swapOptions
+ * @param {HtmxSwapSpecification} swapSpec
+ * @param {SwapOptions} [swapOptions]
*/
function swap(target, content, swapSpec, swapOptions) {
if (!swapOptions) {
@@ -1182,51 +1817,57 @@ var htmx = (function() {
}
const settleInfo = makeSettleInfo(target)
- let fragment = makeFragment(content)
-
- settleInfo.title = fragment.title
-
- // select-oob swaps
- if (swapOptions.selectOOB) {
- const oobSelectValues = swapOptions.selectOOB.split(',')
- for (let i = 0; i < oobSelectValues.length; i++) {
- const oobSelectValue = oobSelectValues[i].split(':', 2)
- let id = oobSelectValue[0].trim()
- if (id.indexOf('#') === 0) {
- id = id.substring(1)
- }
- const oobValue = oobSelectValue[1] || 'true'
- const oobElement = fragment.querySelector('#' + id)
- if (oobElement) {
- oobSwap(oobValue, oobElement, settleInfo)
+ // For text content swaps, don't parse the response as HTML, just insert it
+ if (swapSpec.swapStyle === 'textContent') {
+ target.textContent = content
+ // Otherwise, make the fragment and process it
+ } else {
+ let fragment = makeFragment(content)
+
+ settleInfo.title = fragment.title
+
+ // select-oob swaps
+ if (swapOptions.selectOOB) {
+ const oobSelectValues = swapOptions.selectOOB.split(',')
+ for (let i = 0; i < oobSelectValues.length; i++) {
+ const oobSelectValue = oobSelectValues[i].split(':', 2)
+ let id = oobSelectValue[0].trim()
+ if (id.indexOf('#') === 0) {
+ id = id.substring(1)
+ }
+ const oobValue = oobSelectValue[1] || 'true'
+ const oobElement = fragment.querySelector('#' + id)
+ if (oobElement) {
+ oobSwap(oobValue, oobElement, settleInfo)
+ }
}
}
- }
- // oob swaps
- findAndSwapOobElements(fragment, settleInfo)
- forEach(findAll(fragment, 'template'), function(template) {
- findAndSwapOobElements(template.content, settleInfo)
- if (template.content.childElementCount === 0) {
+ // oob swaps
+ findAndSwapOobElements(fragment, settleInfo)
+ forEach(findAll(fragment, 'template'), /** @param {HTMLTemplateElement} template */function(template) {
+ findAndSwapOobElements(template.content, settleInfo)
+ if (template.content.childElementCount === 0) {
// Avoid polluting the DOM with empty templates that were only used to encapsulate oob swap
- template.remove()
- }
- })
-
- // normal swap
- if (swapOptions.select) {
- const newFragment = getDocument().createDocumentFragment()
- forEach(fragment.querySelectorAll(swapOptions.select), function(node) {
- newFragment.appendChild(node)
+ template.remove()
+ }
})
- fragment = newFragment
+
+ // normal swap
+ if (swapOptions.select) {
+ const newFragment = getDocument().createDocumentFragment()
+ forEach(fragment.querySelectorAll(swapOptions.select), function(node) {
+ newFragment.appendChild(node)
+ })
+ fragment = newFragment
+ }
+ handlePreservedElements(fragment)
+ swapWithStyle(swapSpec.swapStyle, swapOptions.contextElement, target, fragment, settleInfo)
}
- handlePreservedElements(fragment)
- swapWithStyle(swapSpec.swapStyle, swapOptions.contextElement, target, fragment, settleInfo)
// apply saved focus and selection information to swapped content
if (selectionInfo.elt &&
- !bodyContains(selectionInfo.elt) &&
- getRawAttribute(selectionInfo.elt, 'id')) {
+ !bodyContains(selectionInfo.elt) &&
+ getRawAttribute(selectionInfo.elt, 'id')) {
const newActiveElt = document.getElementById(getRawAttribute(selectionInfo.elt, 'id'))
const focusOptions = { preventScroll: swapSpec.focusScroll !== undefined ? !swapSpec.focusScroll : !htmx.config.defaultFocusScroll }
if (newActiveElt) {
@@ -1272,7 +1913,7 @@ var htmx = (function() {
})
if (swapOptions.anchor) {
- const anchorTarget = resolveTarget('#' + swapOptions.anchor)
+ const anchorTarget = asElement(resolveTarget('#' + swapOptions.anchor))
if (anchorTarget) {
anchorTarget.scrollIntoView({ block: 'start', behavior: 'auto' })
}
@@ -1285,12 +1926,17 @@ var htmx = (function() {
}
if (swapSpec.settleDelay > 0) {
- setTimeout(doSettle, swapSpec.settleDelay)
+ getWindow().setTimeout(doSettle, swapSpec.settleDelay)
} else {
doSettle()
}
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @param {string} header
+ * @param {EventTarget} elt
+ */
function handleTriggerHeader(xhr, header, elt) {
const triggerBody = xhr.getResponseHeader(header)
if (triggerBody.indexOf('{') === 0) {
@@ -1320,7 +1966,13 @@ var htmx = (function() {
const NOT_WHITESPACE = /[^\s]/
const COMBINED_SELECTOR_START = /[{(]/
const COMBINED_SELECTOR_END = /[})]/
+
+ /**
+ * @param {string} str
+ * @returns {string[]}
+ */
function tokenizeString(str) {
+ /** @type string[] */
const tokens = []
let position = 0
while (position < str.length) {
@@ -1350,6 +2002,12 @@ var htmx = (function() {
return tokens
}
+ /**
+ * @param {string} token
+ * @param {string|null} last
+ * @param {string} paramName
+ * @returns {boolean}
+ */
function isPossibleRelativeReference(token, last, paramName) {
return SYMBOL_START.exec(token.charAt(0)) &&
token !== 'true' &&
@@ -1359,6 +2017,12 @@ var htmx = (function() {
last !== '.'
}
+ /**
+ * @param {EventTarget|string} elt
+ * @param {string[]} tokens
+ * @param {string} paramName
+ * @returns {ConditionalFunction|null}
+ */
function maybeGenerateConditional(elt, tokens, paramName) {
if (tokens[0] === '[') {
tokens.shift()
@@ -1367,6 +2031,7 @@ var htmx = (function() {
let last = null
while (tokens.length > 0) {
const token = tokens[0]
+ // @ts-ignore For some reason tsc doesn't understand the shift call, and thinks we're comparing the same value here, i.e. '[' vs ']'
if (token === ']') {
bracketCount--
if (bracketCount === 0) {
@@ -1400,6 +2065,11 @@ var htmx = (function() {
}
}
+ /**
+ * @param {string[]} tokens
+ * @param {RegExp} match
+ * @returns {string}
+ */
function consumeUntil(tokens, match) {
let result = ''
while (tokens.length > 0 && !match.test(tokens[0])) {
@@ -1408,6 +2078,10 @@ var htmx = (function() {
return result
}
+ /**
+ * @param {string[]} tokens
+ * @returns {string}
+ */
function consumeCSSSelector(tokens) {
let result
if (tokens.length > 0 && COMBINED_SELECTOR_START.test(tokens[0])) {
@@ -1423,12 +2097,13 @@ var htmx = (function() {
const INPUT_SELECTOR = 'input, textarea, select'
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {string} explicitTrigger
- * @param {cache} cache for trigger specs
- * @returns {import("./htmx").HtmxTriggerSpecification[]}
+ * @param {Object} cache for trigger specs
+ * @returns {HtmxTriggerSpecification[]}
*/
function parseAndCacheTrigger(elt, explicitTrigger, cache) {
+ /** @type HtmxTriggerSpecification[] */
const triggerSpecs = []
const tokens = tokenizeString(explicitTrigger)
do {
@@ -1437,6 +2112,7 @@ var htmx = (function() {
const trigger = consumeUntil(tokens, /[,\[\s]/)
if (trigger !== '') {
if (trigger === 'every') {
+ /** @type HtmxTriggerSpecification */
const every = { trigger: 'every' }
consumeUntil(tokens, NOT_WHITESPACE)
every.pollInterval = parseInterval(consumeUntil(tokens, /[,\[\s]/))
@@ -1447,6 +2123,7 @@ var htmx = (function() {
}
triggerSpecs.push(every)
} else {
+ /** @type HtmxTriggerSpecification */
const triggerSpec = { trigger }
var eventFilter = maybeGenerateConditional(elt, tokens, 'event')
if (eventFilter) {
@@ -1514,8 +2191,8 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
- * @returns {import("./htmx").HtmxTriggerSpecification[]}
+ * @param {Element} elt
+ * @returns {HtmxTriggerSpecification[]}
*/
function getTriggerSpecs(elt) {
const explicitTrigger = getAttributeValue(elt, 'hx-trigger')
@@ -1538,13 +2215,21 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ */
function cancelPolling(elt) {
getInternalData(elt).cancelled = true
}
+ /**
+ * @param {Element} elt
+ * @param {TriggerHandler} handler
+ * @param {HtmxTriggerSpecification} spec
+ */
function processPolling(elt, handler, spec) {
const nodeData = getInternalData(elt)
- nodeData.timeout = setTimeout(function() {
+ nodeData.timeout = getWindow().setTimeout(function() {
if (bodyContains(elt) && nodeData.cancelled !== true) {
if (!maybeFilterEvent(spec, elt, makeEvent('hx:poll:trigger', {
triggerSpec: spec,
@@ -1557,14 +2242,23 @@ var htmx = (function() {
}, spec.pollInterval)
}
+ /**
+ * @param {HTMLAnchorElement} elt
+ * @returns {boolean}
+ */
function isLocalLink(elt) {
return location.hostname === elt.hostname &&
getRawAttribute(elt, 'href') &&
getRawAttribute(elt, 'href').indexOf('#') !== 0
}
+ /**
+ * @param {Element} elt
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {HtmxTriggerSpecification[]} triggerSpecs
+ */
function boostElement(elt, nodeData, triggerSpecs) {
- if ((elt.tagName === 'A' && isLocalLink(elt) && (elt.target === '' || elt.target === '_self')) || elt.tagName === 'FORM') {
+ if ((elt instanceof HTMLAnchorElement && isLocalLink(elt) && (elt.target === '' || elt.target === '_self')) || elt.tagName === 'FORM') {
nodeData.boosted = true
let verb, path
if (elt.tagName === 'A') {
@@ -1578,7 +2272,8 @@ var htmx = (function() {
path = getRawAttribute(elt, 'action')
}
triggerSpecs.forEach(function(triggerSpec) {
- addEventListener(elt, function(elt, evt) {
+ addEventListener(elt, function(node, evt) {
+ const elt = asElement(node)
if (closest(elt, htmx.config.disableSelector)) {
cleanUpElement(elt)
return
@@ -1590,12 +2285,15 @@ var htmx = (function() {
}
/**
- *
* @param {Event} evt
- * @param {HTMLElement} elt
- * @returns
+ * @param {Node} node
+ * @returns {boolean}
*/
- function shouldCancel(evt, elt) {
+ function shouldCancel(evt, node) {
+ const elt = asElement(node)
+ if (!elt) {
+ return false
+ }
if (evt.type === 'submit' || evt.type === 'click') {
if (elt.tagName === 'FORM') {
return true
@@ -1603,7 +2301,7 @@ var htmx = (function() {
if (matches(elt, 'input[type="submit"], button') && closest(elt, 'form') !== null) {
return true
}
- if (elt.tagName === 'A' && elt.href &&
+ if (elt instanceof HTMLAnchorElement && elt.href &&
(elt.getAttribute('href') === '#' || elt.getAttribute('href').indexOf('#') !== 0)) {
return true
}
@@ -1611,25 +2309,47 @@ var htmx = (function() {
return false
}
+ /**
+ * @param {Node} elt
+ * @param {Event|MouseEvent|KeyboardEvent|TouchEvent} evt
+ * @returns {boolean}
+ */
function ignoreBoostedAnchorCtrlClick(elt, evt) {
- return getInternalData(elt).boosted && elt.tagName === 'A' && evt.type === 'click' && (evt.ctrlKey || evt.metaKey)
+ return getInternalData(elt).boosted && elt instanceof HTMLAnchorElement && evt.type === 'click' &&
+ // @ts-ignore this will resolve to undefined for events that don't define those properties, which is fine
+ (evt.ctrlKey || evt.metaKey)
}
+ /**
+ * @param {HtmxTriggerSpecification} triggerSpec
+ * @param {Node} elt
+ * @param {Event} evt
+ * @returns {boolean}
+ */
function maybeFilterEvent(triggerSpec, elt, evt) {
const eventFilter = triggerSpec.eventFilter
if (eventFilter) {
try {
return eventFilter.call(elt, evt) !== true
} catch (e) {
- triggerErrorEvent(getDocument().body, 'htmx:eventFilter:error', { error: e, source: eventFilter.source })
+ const source = eventFilter.source
+ triggerErrorEvent(getDocument().body, 'htmx:eventFilter:error', { error: e, source })
return true
}
}
return false
}
+ /**
+ * @param {Node} elt
+ * @param {TriggerHandler} handler
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {HtmxTriggerSpecification} triggerSpec
+ * @param {boolean} [explicitCancel]
+ */
function addEventListener(elt, handler, nodeData, triggerSpec, explicitCancel) {
const elementData = getInternalData(elt)
+ /** @type {(Node|Window)[]} */
let eltsToListenOn
if (triggerSpec.from) {
eltsToListenOn = querySelectorAllExt(elt, triggerSpec.from)
@@ -1640,10 +2360,12 @@ var htmx = (function() {
if (triggerSpec.changed) {
eltsToListenOn.forEach(function(eltToListenOn) {
const eltToListenOnData = getInternalData(eltToListenOn)
+ // @ts-ignore value will be undefined for non-input elements, which is fine
eltToListenOnData.lastValue = eltToListenOn.value
})
}
forEach(eltsToListenOn, function(eltToListenOn) {
+ /** @type EventListener */
const eventListener = function(evt) {
if (!bodyContains(elt)) {
eltToListenOn.removeEventListener(triggerSpec.trigger, eventListener)
@@ -1669,7 +2391,7 @@ var htmx = (function() {
evt.stopPropagation()
}
if (triggerSpec.target && evt.target) {
- if (!matches(evt.target, triggerSpec.target)) {
+ if (!matches(asElement(evt.target), triggerSpec.target)) {
return
}
}
@@ -1682,10 +2404,12 @@ var htmx = (function() {
}
if (triggerSpec.changed) {
const eltToListenOnData = getInternalData(eltToListenOn)
- if (eltToListenOnData.lastValue === eltToListenOn.value) {
+ // @ts-ignore value will be undefined for non-input elements, which is fine
+ const value = eltToListenOn.value
+ if (eltToListenOnData.lastValue === value) {
return
}
- eltToListenOnData.lastValue = eltToListenOn.value
+ eltToListenOnData.lastValue = value
}
if (elementData.delayed) {
clearTimeout(elementData.delayed)
@@ -1697,12 +2421,12 @@ var htmx = (function() {
if (triggerSpec.throttle > 0) {
if (!elementData.throttle) {
handler(elt, evt)
- elementData.throttle = setTimeout(function() {
+ elementData.throttle = getWindow().setTimeout(function() {
elementData.throttle = null
}, triggerSpec.throttle)
}
} else if (triggerSpec.delay > 0) {
- elementData.delayed = setTimeout(function() { handler(elt, evt) }, triggerSpec.delay)
+ elementData.delayed = getWindow().setTimeout(function() { handler(elt, evt) }, triggerSpec.delay)
} else {
triggerEvent(elt, 'htmx:trigger')
handler(elt, evt)
@@ -1740,6 +2464,9 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ */
function maybeReveal(elt) {
if (!hasAttribute(elt, 'data-hx-revealed') && isScrolledIntoView(elt)) {
elt.setAttribute('data-hx-revealed', 'true')
@@ -1748,13 +2475,19 @@ var htmx = (function() {
triggerEvent(elt, 'revealed')
} else {
// if the node isn't initialized, wait for it before triggering the request
- elt.addEventListener('htmx:afterProcessNode', function(evt) { triggerEvent(elt, 'revealed') }, { once: true })
+ elt.addEventListener('htmx:afterProcessNode', function() { triggerEvent(elt, 'revealed') }, { once: true })
}
}
}
//= ===================================================================
+ /**
+ * @param {Element} elt
+ * @param {TriggerHandler} handler
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {number} delay
+ */
function loadImmediately(elt, handler, nodeData, delay) {
const load = function() {
if (!nodeData.loaded) {
@@ -1763,12 +2496,18 @@ var htmx = (function() {
}
}
if (delay > 0) {
- setTimeout(load, delay)
+ getWindow().setTimeout(load, delay)
} else {
load()
}
}
+ /**
+ * @param {Element} elt
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {HtmxTriggerSpecification[]} triggerSpecs
+ * @returns {boolean}
+ */
function processVerbs(elt, nodeData, triggerSpecs) {
let explicitAction = false
forEach(VERBS, function(verb) {
@@ -1778,7 +2517,8 @@ var htmx = (function() {
nodeData.path = path
nodeData.verb = verb
triggerSpecs.forEach(function(triggerSpec) {
- addTriggerHandler(elt, triggerSpec, nodeData, function(elt, evt) {
+ addTriggerHandler(elt, triggerSpec, nodeData, function(node, evt) {
+ const elt = asElement(node)
if (closest(elt, htmx.config.disableSelector)) {
cleanUpElement(elt)
return
@@ -1791,11 +2531,23 @@ var htmx = (function() {
return explicitAction
}
+ /**
+ * @callback TriggerHandler
+ * @param {Node} elt
+ * @param {Event} [evt]
+ */
+
+ /**
+ * @param {Node} elt
+ * @param {HtmxTriggerSpecification} triggerSpec
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {TriggerHandler} handler
+ */
function addTriggerHandler(elt, triggerSpec, nodeData, handler) {
if (triggerSpec.trigger === 'revealed') {
initScrollHandler()
addEventListener(elt, handler, nodeData, triggerSpec)
- maybeReveal(elt)
+ maybeReveal(asElement(elt))
} else if (triggerSpec.trigger === 'intersect') {
const observerOptions = {}
if (triggerSpec.root) {
@@ -1813,21 +2565,29 @@ var htmx = (function() {
}
}
}, observerOptions)
- observer.observe(elt)
- addEventListener(elt, handler, nodeData, triggerSpec)
+ observer.observe(asElement(elt))
+ addEventListener(asElement(elt), handler, nodeData, triggerSpec)
} else if (triggerSpec.trigger === 'load') {
if (!maybeFilterEvent(triggerSpec, elt, makeEvent('load', { elt }))) {
- loadImmediately(elt, handler, nodeData, triggerSpec.delay)
+ loadImmediately(asElement(elt), handler, nodeData, triggerSpec.delay)
}
} else if (triggerSpec.pollInterval > 0) {
nodeData.polling = true
- processPolling(elt, handler, triggerSpec)
+ processPolling(asElement(elt), handler, triggerSpec)
} else {
addEventListener(elt, handler, nodeData, triggerSpec)
}
}
- function shouldProcessHxOn(elt) {
+ /**
+ * @param {Node} node
+ * @returns {boolean}
+ */
+ function shouldProcessHxOn(node) {
+ const elt = asElement(node)
+ if (!elt) {
+ return false
+ }
const attributes = elt.attributes
for (let j = 0; j < attributes.length; j++) {
const attrName = attributes[j].name
@@ -1839,22 +2599,31 @@ var htmx = (function() {
return false
}
+ /**
+ * @param {Node} elt
+ * @returns {Element[]}
+ */
function findHxOnWildcardElements(elt) {
let node = null
+ /** @type {Element[]} */
const elements = []
if (!(elt instanceof ShadowRoot)) {
if (shouldProcessHxOn(elt)) {
- elements.push(elt)
+ elements.push(asElement(elt))
}
const iter = document.evaluate('.//*[@*[ starts-with(name(), "hx-on:") or starts-with(name(), "data-hx-on:") or' +
' starts-with(name(), "hx-on-") or starts-with(name(), "data-hx-on-") ]]', elt)
- while (node = iter.iterateNext()) elements.push(node)
+ while (node = iter.iterateNext()) elements.push(asElement(node))
}
return elements
}
+ /**
+ * @param {Element} elt
+ * @returns {NodeListOf<Element>|[]}
+ */
function findElementsToProcess(elt) {
if (elt.querySelectorAll) {
const boostedSelector = ', [hx-boost] a, [data-hx-boost] a, a[hx-boost], a[data-hx-boost]'
@@ -1866,23 +2635,35 @@ var htmx = (function() {
}
}
- // Handle submit buttons/inputs that have the form attribute set
- // see https://developer.mozilla.org/docs/Web/HTML/Element/button
+ /**
+ * Handle submit buttons/inputs that have the form attribute set
+ * see https://developer.mozilla.org/docs/Web/HTML/Element/button
+ * @param {Event} evt
+ */
function maybeSetLastButtonClicked(evt) {
- const elt = closest(evt.target, "button, input[type='submit']")
+ const elt = /** @type {HTMLButtonElement|HTMLInputElement} */ (closest(asElement(evt.target), "button, input[type='submit']"))
const internalData = getRelatedFormData(evt)
if (internalData) {
internalData.lastButtonClicked = elt
}
- };
+ }
+
+ /**
+ * @param {Event} evt
+ */
function maybeUnsetLastButtonClicked(evt) {
const internalData = getRelatedFormData(evt)
if (internalData) {
internalData.lastButtonClicked = null
}
}
+
+ /**
+ * @param {Event} evt
+ * @returns {HtmxNodeInternalData|undefined}
+ */
function getRelatedFormData(evt) {
- const elt = closest(evt.target, "button, input[type='submit']")
+ const elt = closest(asElement(evt.target), "button, input[type='submit']")
if (!elt) {
return
}
@@ -1892,6 +2673,10 @@ var htmx = (function() {
}
return getInternalData(form)
}
+
+ /**
+ * @param {EventTarget} elt
+ */
function initButtonTracking(elt) {
// need to handle both click and focus in:
// focusin - in case someone tabs in to a button and hits the space bar
@@ -1901,28 +2686,20 @@ var htmx = (function() {
elt.addEventListener('focusout', maybeUnsetLastButtonClicked)
}
- function countCurlies(line) {
- const tokens = tokenizeString(line)
- let netCurlies = 0
- for (let i = 0; i < tokens.length; i++) {
- const token = tokens[i]
- if (token === '{') {
- netCurlies++
- } else if (token === '}') {
- netCurlies--
- }
- }
- return netCurlies
- }
-
+ /**
+ * @param {EventTarget} elt
+ * @param {string} eventName
+ * @param {string} code
+ */
function addHxOnEventHandler(elt, eventName, code) {
const nodeData = getInternalData(elt)
if (!Array.isArray(nodeData.onHandlers)) {
nodeData.onHandlers = []
}
let func
+ /** @type EventListener */
const listener = function(e) {
- return maybeEval(elt, function() {
+ maybeEval(elt, function() {
if (!func) {
func = new Function('event', code)
}
@@ -1933,6 +2710,9 @@ var htmx = (function() {
nodeData.onHandlers.push({ event: eventName, listener })
}
+ /**
+ * @param {Element} elt
+ */
function processHxOnWildcard(elt) {
// wipe any previous on handlers so that this function takes precedence
deInitOnHandlers(elt)
@@ -1960,6 +2740,9 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element|HTMLInputElement} elt
+ */
function initNode(elt) {
if (closest(elt, htmx.config.disableSelector)) {
cleanUpElement(elt)
@@ -1974,7 +2757,9 @@ var htmx = (function() {
triggerEvent(elt, 'htmx:beforeProcessNode')
+ // @ts-ignore value will be undefined for non-input elements, which is fine
if (elt.value) {
+ // @ts-ignore
nodeData.lastValue = elt.value
}
@@ -2003,6 +2788,13 @@ var htmx = (function() {
}
}
+ /**
+ * Processes new content, enabling htmx behavior. This can be useful if you have content that is added to the DOM outside of the normal htmx request cycle but still want htmx attributes to work.
+ *
+ * @see https://htmx.org/api/#process
+ *
+ * @param {Element|string} elt element to process
+ */
function processNode(elt) {
elt = resolveTarget(elt)
if (closest(elt, htmx.config.disableSelector)) {
@@ -2018,10 +2810,19 @@ var htmx = (function() {
// Event/Log Support
//= ===================================================================
+ /**
+ * @param {string} str
+ * @returns {string}
+ */
function kebabEventName(str) {
return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
}
+ /**
+ * @param {string} eventName
+ * @param {any} detail
+ * @returns {CustomEvent}
+ */
function makeEvent(eventName, detail) {
let evt
if (window.CustomEvent && typeof window.CustomEvent === 'function') {
@@ -2035,10 +2836,19 @@ var htmx = (function() {
return evt
}
+ /**
+ * @param {EventTarget|string} elt
+ * @param {string} eventName
+ * @param {any=} detail
+ */
function triggerErrorEvent(elt, eventName, detail) {
triggerEvent(elt, eventName, mergeObjects({ error: eventName }, detail))
}
+ /**
+ * @param {string} eventName
+ * @returns {boolean}
+ */
function ignoreEventForLogging(eventName) {
return eventName === 'htmx:afterProcessNode'
}
@@ -2048,8 +2858,8 @@ var htmx = (function() {
* executes the provided function using each of the active extensions. It should
* be called internally at every extendable execution point in htmx.
*
- * @param {HTMLElement} elt
- * @param {(extension:import("./htmx").HtmxExtension) => void} toDo
+ * @param {Element} elt
+ * @param {(extension:HtmxExtension) => void} toDo
* @returns void
*/
function withExtensions(elt, toDo) {
@@ -2070,6 +2880,16 @@ var htmx = (function() {
}
}
+ /**
+ * Triggers a given event on an element
+ *
+ * @see https://htmx.org/api/#trigger
+ *
+ * @param {EventTarget|string} elt the element to trigger the event on
+ * @param {string} eventName the name of the event to trigger
+ * @param {any=} detail details for the event
+ * @returns {boolean}
+ */
function triggerEvent(elt, eventName, detail) {
elt = resolveTarget(elt)
if (detail == null) {
@@ -2090,7 +2910,7 @@ var htmx = (function() {
const kebabedEvent = makeEvent(kebabName, event.detail)
eventResult = eventResult && elt.dispatchEvent(kebabedEvent)
}
- withExtensions(elt, function(extension) {
+ withExtensions(asElement(elt), function(extension) {
eventResult = eventResult && (extension.onEvent(eventName, event) !== false && !event.defaultPrevented)
})
return eventResult
@@ -2101,11 +2921,18 @@ var htmx = (function() {
//= ===================================================================
let currentPathForHistory = location.pathname + location.search
+ /**
+ * @returns {Element}
+ */
function getHistoryElement() {
const historyElt = getDocument().querySelector('[hx-history-elt],[data-hx-history-elt]')
return historyElt || getDocument().body
}
+ /**
+ * @param {string} url
+ * @param {Element} rootElt
+ */
function saveToHistoryCache(url, rootElt) {
if (!canAccessLocalStorage()) {
return
@@ -2132,6 +2959,7 @@ var htmx = (function() {
}
}
+ /** @type HtmxHistoryItem */
const newHistoryItem = { url, content: innerHTML, title, scroll }
triggerEvent(getDocument().body, 'htmx:historyItemCreated', { item: newHistoryItem, cache: historyCache })
@@ -2153,6 +2981,18 @@ var htmx = (function() {
}
}
+ /**
+ * @typedef {Object} HtmxHistoryItem
+ * @property {string} url
+ * @property {string} content
+ * @property {string} title
+ * @property {number} scroll
+ */
+
+ /**
+ * @param {string} url
+ * @returns {HtmxHistoryItem|null}
+ */
function getCachedHistory(url) {
if (!canAccessLocalStorage()) {
return null
@@ -2169,9 +3009,13 @@ var htmx = (function() {
return null
}
+ /**
+ * @param {Element} elt
+ * @returns {string}
+ */
function cleanInnerHtmlForHistory(elt) {
const className = htmx.config.requestClass
- const clone = elt.cloneNode(true)
+ const clone = /** @type Element */ (elt.cloneNode(true))
forEach(findAll(clone, '.' + className), function(child) {
removeClassFromElement(child, className)
})
@@ -2202,6 +3046,9 @@ var htmx = (function() {
if (htmx.config.historyEnabled) history.replaceState({ htmx: true }, getDocument().title, window.location.href)
}
+ /**
+ * @param {string} path
+ */
function pushUrlIntoHistory(path) {
// remove the cache buster parameter, if any
if (htmx.config.getCacheBusterParam) {
@@ -2216,17 +3063,26 @@ var htmx = (function() {
currentPathForHistory = path
}
+ /**
+ * @param {string} path
+ */
function replaceUrlInHistory(path) {
if (htmx.config.historyEnabled) history.replaceState({ htmx: true }, '', path)
currentPathForHistory = path
}
+ /**
+ * @param {HtmxSettleTask[]} tasks
+ */
function settleImmediately(tasks) {
forEach(tasks, function(task) {
- task.call()
+ task.call(undefined)
})
}
+ /**
+ * @param {string} path
+ */
function loadHistoryFromServer(path) {
const request = new XMLHttpRequest()
const details = { path, xhr: request }
@@ -2239,13 +3095,12 @@ var htmx = (function() {
if (this.status >= 200 && this.status < 400) {
triggerEvent(getDocument().body, 'htmx:historyCacheMissLoad', details)
const fragment = makeFragment(this.response)
- // @ts-ignore
+ /** @type ParentNode */
const content = fragment.querySelector('[hx-history-elt],[data-hx-history-elt]') || fragment
const historyElement = getHistoryElement()
const settleInfo = makeSettleInfo(historyElement)
handleTitle(fragment.title)
- // @ts-ignore
swapInnerHTML(historyElement, content, settleInfo)
settleImmediately(settleInfo.tasks)
currentPathForHistory = path
@@ -2257,6 +3112,9 @@ var htmx = (function() {
request.send()
}
+ /**
+ * @param {string} [path]
+ */
function restoreHistory(path) {
saveCurrentPageToHistory()
path = path || location.pathname + location.search
@@ -2268,14 +3126,15 @@ var htmx = (function() {
handleTitle(fragment.title)
swapInnerHTML(historyElement, fragment, settleInfo)
settleImmediately(settleInfo.tasks)
- setTimeout(function() {
+ getWindow().setTimeout(function() {
window.scrollTo(0, cached.scroll)
}, 0) // next 'tick', so browser has time to render layout
currentPathForHistory = path
triggerEvent(getDocument().body, 'htmx:historyRestore', { path, item: cached })
} else {
if (htmx.config.refreshOnHistoryMiss) {
- // @ts-ignore: optional parameter in reload() function throws error
+ // @ts-ignore: optional parameter in reload() function throws error
+ // noinspection JSUnresolvedReference
window.location.reload(true)
} else {
loadHistoryFromServer(path)
@@ -2283,8 +3142,12 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @returns {Element[]}
+ */
function addRequestIndicatorClasses(elt) {
- let indicators = findAttributeTargets(elt, 'hx-indicator')
+ let indicators = /** @type Element[] */ (findAttributeTargets(elt, 'hx-indicator'))
if (indicators == null) {
indicators = [elt]
}
@@ -2296,8 +3159,12 @@ var htmx = (function() {
return indicators
}
+ /**
+ * @param {Element} elt
+ * @returns {Element[]}
+ */
function disableElements(elt) {
- let disabledElts = findAttributeTargets(elt, 'hx-disabled-elt')
+ let disabledElts = /** @type Element[] */ (findAttributeTargets(elt, 'hx-disabled-elt'))
if (disabledElts == null) {
disabledElts = []
}
@@ -2309,6 +3176,10 @@ var htmx = (function() {
return disabledElts
}
+ /**
+ * @param {Element[]} indicators
+ * @param {Element[]} disabled
+ */
function removeRequestIndicators(indicators, disabled) {
forEach(indicators, function(ic) {
const internalData = getInternalData(ic)
@@ -2331,8 +3202,8 @@ var htmx = (function() {
//= ===================================================================
/**
- * @param {HTMLElement[]} processed
- * @param {HTMLElement} elt
+ * @param {Element[]} processed
+ * @param {Element} elt
* @returns {boolean}
*/
function haveSeenNode(processed, elt) {
@@ -2345,7 +3216,13 @@ var htmx = (function() {
return false
}
- function shouldInclude(elt) {
+ /**
+ * @param {Element} element
+ * @return {boolean}
+ */
+ function shouldInclude(element) {
+ // Cast to trick tsc, undefined values will work fine here
+ const elt = /** @type {HTMLInputElement} */ (element)
if (elt.name === '' || elt.name == null || elt.disabled || closest(elt, 'fieldset[disabled]')) {
return false
}
@@ -2360,7 +3237,7 @@ var htmx = (function() {
}
/** @param {string} name
- * @param {string|Array} value
+ * @param {string|Array|FormDataEntryValue} value
* @param {FormData} formData */
function addValueToFormData(name, value, formData) {
if (name != null && value != null) {
@@ -2389,10 +3266,10 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement[]} processed
+ * @param {Element[]} processed
* @param {FormData} formData
* @param {HtmxElementValidationError[]} errors
- * @param {HTMLElement|HTMLInputElement|HTMLFormElement} elt
+ * @param {Element|HTMLInputElement|HTMLSelectElement|HTMLFormElement} elt
* @param {boolean} validate
*/
function processInputValue(processed, formData, errors, elt, validate) {
@@ -2403,12 +3280,13 @@ var htmx = (function() {
}
if (shouldInclude(elt)) {
const name = getRawAttribute(elt, 'name')
+ // @ts-ignore value will be undefined for non-input elements, which is fine
let value = elt.value
- if (elt.multiple && elt.tagName === 'SELECT') {
- value = toArray(elt.querySelectorAll('option:checked')).map(function(e) { return e.value })
+ if (elt instanceof HTMLSelectElement && elt.multiple) {
+ value = toArray(elt.querySelectorAll('option:checked')).map(function(e) { return (/** @type HTMLOptionElement */(e)).value })
}
// include file inputs
- if (elt.files) {
+ if (elt instanceof HTMLInputElement && elt.files) {
value = toArray(elt.files)
}
addValueToFormData(name, value, formData)
@@ -2416,7 +3294,7 @@ var htmx = (function() {
validateElement(elt, errors)
}
}
- if (matches(elt, 'form')) {
+ if (elt instanceof HTMLFormElement) {
forEach(elt.elements, function(input) {
if (processed.indexOf(input) >= 0) {
// The input has already been processed and added to the values, but the FormData that will be
@@ -2437,15 +3315,12 @@ var htmx = (function() {
}
/**
- * @typedef {{elt: HTMLElement, message: string, validity: ValidityState}} HtmxElementValidationError
- */
-
- /**
*
- * @param {HTMLElement|HTMLObjectElement} element
+ * @param {Element} elt
* @param {HtmxElementValidationError[]} errors
*/
- function validateElement(element, errors) {
+ function validateElement(elt, errors) {
+ const element = /** @type {HTMLElement & ElementInternals} */ (elt)
if (element.willValidate) {
triggerEvent(element, 'htmx:validation:validate')
if (!element.checkValidity()) {
@@ -2472,12 +3347,12 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement|HTMLFormElement} elt
- * @param {string} verb
+ * @param {Element|HTMLFormElement} elt
+ * @param {HttpVerb} verb
* @returns {{errors: HtmxElementValidationError[], formData: FormData, values: Object}}
*/
function getInputValues(elt, verb) {
- /** @type HTMLElement[] */
+ /** @type Element[] */
const processed = []
const formData = new FormData()
const priorityFormData = new FormData()
@@ -2490,7 +3365,7 @@ var htmx = (function() {
// only validate when form is directly submitted and novalidate or formnovalidate are not set
// or if the element has an explicit hx-validate="true" on it
- let validate = (matches(elt, 'form') && elt.noValidate !== true) || getAttributeValue(elt, 'hx-validate') === 'true'
+ let validate = (elt instanceof HTMLFormElement && elt.noValidate !== true) || getAttributeValue(elt, 'hx-validate') === 'true'
if (internalData.lastButtonClicked) {
validate = validate && internalData.lastButtonClicked.formNoValidate !== true
}
@@ -2506,7 +3381,7 @@ var htmx = (function() {
// if a button or submit was clicked last, include its value
if (internalData.lastButtonClicked || elt.tagName === 'BUTTON' ||
(elt.tagName === 'INPUT' && getRawAttribute(elt, 'type') === 'submit')) {
- const button = internalData.lastButtonClicked || elt
+ const button = internalData.lastButtonClicked || (/** @type HTMLInputElement|HTMLButtonElement */(elt))
const name = getRawAttribute(button, 'name')
addValueToFormData(name, button.value, priorityFormData)
}
@@ -2514,10 +3389,10 @@ var htmx = (function() {
// include any explicit includes
const includes = findAttributeTargets(elt, 'hx-include')
forEach(includes, function(node) {
- processInputValue(processed, formData, errors, node, validate)
+ processInputValue(processed, formData, errors, asElement(node), validate)
// if a non-form is included, include any input values within it
if (!matches(node, 'form')) {
- forEach(node.querySelectorAll(INPUT_SELECTOR), function(descendant) {
+ forEach(asParentNode(node).querySelectorAll(INPUT_SELECTOR), function(descendant) {
processInputValue(processed, formData, errors, descendant, validate)
})
}
@@ -2565,12 +3440,13 @@ var htmx = (function() {
//= ===================================================================
/**
- * @param {HTMLElement} elt
- * @param {HTMLElement} target
+ * @param {Element} elt
+ * @param {Element} target
* @param {string} prompt
- * @returns {Object} // TODO: Define/Improve HtmxHeaderSpecification
+ * @returns {HtmxHeaderSpecification}
*/
function getHeaders(elt, target, prompt) {
+ /** @type HtmxHeaderSpecification */
const headers = {
'HX-Request': 'true',
'HX-Trigger': getRawAttribute(elt, 'id'),
@@ -2593,7 +3469,7 @@ var htmx = (function() {
* and returns a new object that only contains keys that are
* specified by the closest "hx-params" attribute
* @param {FormData} inputValues
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @returns {FormData}
*/
function filterValues(inputValues, elt) {
@@ -2624,19 +3500,22 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @return {boolean}
+ */
function isAnchorLink(elt) {
- return getRawAttribute(elt, 'href') && getRawAttribute(elt, 'href').indexOf('#') >= 0
+ return !!getRawAttribute(elt, 'href') && getRawAttribute(elt, 'href').indexOf('#') >= 0
}
/**
- *
- * @param {HTMLElement} elt
- * @param {import("./htmx").HtmxSwapStyle} swapInfoOverride
- * @returns {import("./htmx").HtmxSwapSpecification}
+ * @param {Element} elt
+ * @param {HtmxSwapStyle} [swapInfoOverride]
+ * @returns {HtmxSwapSpecification}
*/
function getSwapSpecification(elt, swapInfoOverride) {
const swapInfo = swapInfoOverride || getClosestAttributeValue(elt, 'hx-swap')
- /** @type import("./htmx").HtmxSwapSpecification */
+ /** @type HtmxSwapSpecification */
const swapSpec = {
swapStyle: getInternalData(elt).boosted ? 'innerHTML' : htmx.config.defaultSwapStyle,
swapDelay: htmx.config.defaultSwapDelay,
@@ -2663,6 +3542,7 @@ var htmx = (function() {
var splitSpec = scrollSpec.split(':')
const scrollVal = splitSpec.pop()
var selectorVal = splitSpec.length > 0 ? splitSpec.join(':') : null
+ // @ts-ignore
swapSpec.scroll = scrollVal
swapSpec.scrollTarget = selectorVal
} else if (value.indexOf('show:') === 0) {
@@ -2686,6 +3566,10 @@ var htmx = (function() {
return swapSpec
}
+ /**
+ * @param {Element} elt
+ * @return {boolean}
+ */
function usesFormData(elt) {
return getClosestAttributeValue(elt, 'hx-encoding') === 'multipart/form-data' ||
(matches(elt, 'form') && getRawAttribute(elt, 'enctype') === 'multipart/form-data')
@@ -2693,7 +3577,7 @@ var htmx = (function() {
/**
* @param {XMLHttpRequest} xhr
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {FormData} filteredParameters
* @returns {*|string|null}
*/
@@ -2718,19 +3602,23 @@ var htmx = (function() {
/**
*
* @param {Element} target
- * @returns {import("./htmx").HtmxSettleInfo}
+ * @returns {HtmxSettleInfo}
*/
function makeSettleInfo(target) {
return { tasks: [], elts: [target] }
}
+ /**
+ * @param {Element[]} content
+ * @param {HtmxSwapSpecification} swapSpec
+ */
function updateScrollState(content, swapSpec) {
const first = content[0]
const last = content[content.length - 1]
if (swapSpec.scroll) {
var target = null
if (swapSpec.scrollTarget) {
- target = querySelectorExt(first, swapSpec.scrollTarget)
+ target = asElement(querySelectorExt(first, swapSpec.scrollTarget))
}
if (swapSpec.scroll === 'top' && (first || target)) {
target = target || first
@@ -2748,21 +3636,23 @@ var htmx = (function() {
if (swapSpec.showTarget === 'window') {
targetStr = 'body'
}
- target = querySelectorExt(first, targetStr)
+ target = asElement(querySelectorExt(first, targetStr))
}
if (swapSpec.show === 'top' && (first || target)) {
target = target || first
+ // @ts-ignore For some reason tsc doesn't recognize "instant" as a valid option for now
target.scrollIntoView({ block: 'start', behavior: htmx.config.scrollBehavior })
}
if (swapSpec.show === 'bottom' && (last || target)) {
target = target || last
+ // @ts-ignore For some reason tsc doesn't recognize "instant" as a valid option for now
target.scrollIntoView({ block: 'end', behavior: htmx.config.scrollBehavior })
}
}
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {string} attr
* @param {boolean=} evalAsDefault
* @param {Object=} values
@@ -2806,9 +3696,15 @@ var htmx = (function() {
}
}
}
- return getValuesForElement(parentElt(elt), attr, evalAsDefault, values)
+ return getValuesForElement(asElement(parentElt(elt)), attr, evalAsDefault, values)
}
+ /**
+ * @param {EventTarget|string} elt
+ * @param {() => any} toEval
+ * @param {any=} defaultVal
+ * @returns {any}
+ */
function maybeEval(elt, toEval, defaultVal) {
if (htmx.config.allowEval) {
return toEval()
@@ -2819,7 +3715,7 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {*?} expressionVars
* @returns
*/
@@ -2828,7 +3724,7 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {*?} expressionVars
* @returns
*/
@@ -2837,13 +3733,18 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @returns {FormData}
*/
function getExpressionVars(elt) {
return formDataFromObject(mergeObjects(getHXVarsForElement(elt), getHXValsForElement(elt)))
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @param {string} header
+ * @param {string|null} headerValue
+ */
function safelySetHeaderValue(xhr, header, headerValue) {
if (headerValue !== null) {
try {
@@ -2856,6 +3757,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @return {string}
+ */
function getPathFromResponse(xhr) {
// NB: IE11 does not support this stuff
if (xhr.responseURL && typeof (URL) !== 'undefined') {
@@ -2868,14 +3773,29 @@ var htmx = (function() {
}
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @param {RegExp} regexp
+ * @return {boolean}
+ */
function hasHeader(xhr, regexp) {
return regexp.test(xhr.getAllResponseHeaders())
}
+ /**
+ * Issues an htmx-style AJAX request
+ *
+ * @see https://htmx.org/api/#ajax
+ *
+ * @param {HttpVerb} verb
+ * @param {string} path the URL path to make the AJAX
+ * @param {Element|string|HtmxAjaxHelperContext} context the element to target (defaults to the **body**) | a selector for the target | a context object that contains any of the following
+ * @return {Promise<void>} Promise that resolves immediately if no request is sent, or when the request is complete
+ */
function ajaxHelper(verb, path, context) {
- verb = verb.toLowerCase()
+ verb = (/** @type HttpVerb */(verb.toLowerCase()))
if (context) {
- if (context instanceof Element || isType(context, 'String')) {
+ if (context instanceof Element || typeof context === 'string') {
return issueAjaxRequest(verb, path, null, null, {
targetOverride: resolveTarget(context),
returnPromise: true
@@ -2899,6 +3819,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @return {Element[]}
+ */
function hierarchyForElt(elt) {
const arr = []
while (elt) {
@@ -2908,6 +3832,12 @@ var htmx = (function() {
return arr
}
+ /**
+ * @param {Element} elt
+ * @param {string} path
+ * @param {HtmxRequestConfig} requestConfig
+ * @return {boolean}
+ */
function verifyPath(elt, path, requestConfig) {
let sameHost
let url
@@ -2929,6 +3859,10 @@ var htmx = (function() {
return triggerEvent(elt, 'htmx:validateUrl', mergeObjects({ url, sameHost }, requestConfig))
}
+ /**
+ * @param {Object|FormData} obj
+ * @return {FormData}
+ */
function formDataFromObject(obj) {
if (obj instanceof FormData) return obj
const formData = new FormData()
@@ -2948,7 +3882,7 @@ var htmx = (function() {
/**
* @param {FormData} formData
- * @param {string|Symbol} name
+ * @param {string} name
* @param {Array} array
* @returns {Array}
*/
@@ -2996,7 +3930,7 @@ var htmx = (function() {
get: function(target, name) {
if (typeof name === 'symbol') {
// Forward symbol calls to the FormData itself directly
- return Reflect.get(...arguments)
+ return Reflect.get(target, name)
}
if (name === 'toJSON') {
// Support JSON.stringify call on proxy
@@ -3023,6 +3957,9 @@ var htmx = (function() {
}
},
set: function(target, name, value) {
+ if (typeof name !== 'string') {
+ return false
+ }
target.delete(name)
if (typeof value.forEach === 'function') {
value.forEach(function(v) { target.append(name, v) })
@@ -3032,7 +3969,9 @@ var htmx = (function() {
return true
},
deleteProperty: function(target, name) {
- target.delete(name)
+ if (typeof name === 'string') {
+ target.delete(name)
+ }
return true
},
// Support Object.assign call from proxy
@@ -3045,6 +3984,15 @@ var htmx = (function() {
})
}
+ /**
+ * @param {HttpVerb} verb
+ * @param {string} path
+ * @param {Element} elt
+ * @param {Event} event
+ * @param {HtmxAjaxEtc} [etc]
+ * @param {boolean} [confirmed]
+ * @return {Promise<void>}
+ */
function issueAjaxRequest(verb, path, elt, event, etc, confirmed) {
let resolve = null
let reject = null
@@ -3066,7 +4014,7 @@ var htmx = (function() {
maybeCall(resolve)
return promise
}
- const target = etc.targetOverride || getTarget(elt)
+ const target = etc.targetOverride || asElement(getTarget(elt))
if (target == null || target == DUMMY_ELT) {
triggerErrorEvent(elt, 'htmx:targetError', { target: getAttributeValue(elt, 'hx-target') })
maybeCall(reject)
@@ -3086,7 +4034,7 @@ var htmx = (function() {
if (buttonVerb != null) {
// ignore buttons with formmethod="dialog"
if (buttonVerb.toLowerCase() !== 'dialog') {
- verb = buttonVerb
+ verb = (/** @type HttpVerb */(buttonVerb))
}
}
}
@@ -3114,7 +4062,7 @@ var htmx = (function() {
if (selector === 'this') {
syncElt = findThisElement(elt, 'hx-sync')
} else {
- syncElt = querySelectorExt(elt, selector)
+ syncElt = asElement(querySelectorExt(elt, selector))
}
// default to the drop strategy
syncStrategy = (syncStrings[1] || 'drop').trim()
@@ -3234,12 +4182,19 @@ var htmx = (function() {
path = getDocument().location.href
}
+ /**
+ * @type {Object}
+ * @property {boolean} [credentials]
+ * @property {number} [timeout]
+ * @property {boolean} [noHeaders]
+ */
const requestAttrValues = getValuesForElement(elt, 'hx-request')
const eltIsBoosted = getInternalData(elt).boosted
let useUrlParams = htmx.config.methodsThatUseUrlParams.indexOf(verb) >= 0
+ /** @type HtmxRequestConfig */
const requestConfig = {
boosted: eltIsBoosted,
useUrlParams,
@@ -3303,7 +4258,7 @@ var htmx = (function() {
triggerErrorEvent(elt, 'htmx:invalidPath', requestConfig)
maybeCall(reject)
return promise
- };
+ }
xhr.open(verb.toUpperCase(), finalPath, true)
xhr.overrideMimeType('text/html')
@@ -3322,6 +4277,7 @@ var htmx = (function() {
}
}
+ /** @type {HtmxResponseInfo} */
const responseInfo = {
xhr,
target,
@@ -3332,6 +4288,7 @@ var htmx = (function() {
pathInfo: {
requestPath: path,
finalRequestPath: finalPath,
+ responsePath: null,
anchor
}
}
@@ -3412,6 +4369,17 @@ var htmx = (function() {
return promise
}
+ /**
+ * @typedef {Object} HtmxHistoryUpdate
+ * @property {string|null} [type]
+ * @property {string|null} [path]
+ */
+
+ /**
+ * @param {Element} elt
+ * @param {HtmxResponseInfo} responseInfo
+ * @return {HtmxHistoryUpdate}
+ */
function determineHistoryUpdates(elt, responseInfo) {
const xhr = responseInfo.xhr
@@ -3492,13 +4460,23 @@ var htmx = (function() {
}
}
+ /**
+ * @param {HtmxResponseHandlingConfig} responseHandlingConfig
+ * @param {number} status
+ * @return {boolean}
+ */
function codeMatches(responseHandlingConfig, status) {
var regExp = new RegExp(responseHandlingConfig.code)
- return regExp.test(status)
+ return regExp.test(status.toString(10))
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @return {HtmxResponseHandlingConfig}
+ */
function resolveResponseHandling(xhr) {
for (var i = 0; i < htmx.config.responseHandling.length; i++) {
+ /** @type HtmxResponseHandlingConfig */
var responseHandlingElement = htmx.config.responseHandling[i]
if (codeMatches(responseHandlingElement, xhr.status)) {
return responseHandlingElement
@@ -3510,6 +4488,9 @@ var htmx = (function() {
}
}
+ /**
+ * @param {string} title
+ */
function handleTitle(title) {
if (title) {
const titleElt = find('title')
@@ -3521,6 +4502,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @param {HtmxResponseInfo} responseInfo
+ */
function handleAjaxResponse(elt, responseInfo) {
const xhr = responseInfo.xhr
let target = responseInfo.target
@@ -3536,14 +4521,15 @@ var htmx = (function() {
if (hasHeader(xhr, /HX-Location:/i)) {
saveCurrentPageToHistory()
let redirectPath = xhr.getResponseHeader('HX-Location')
- var swapSpec
+ /** @type {HtmxAjaxHelperContext&{path:string}} */
+ var redirectSwapSpec
if (redirectPath.indexOf('{') === 0) {
- swapSpec = parseJSON(redirectPath)
+ redirectSwapSpec = parseJSON(redirectPath)
// what's the best way to throw an error if the user didn't include this
- redirectPath = swapSpec.path
- delete swapSpec.path
+ redirectPath = redirectSwapSpec.path
+ delete redirectSwapSpec.path
}
- ajaxHelper('GET', redirectPath, swapSpec).then(function() {
+ ajaxHelper('get', redirectPath, redirectSwapSpec).then(function() {
pushUrlIntoHistory(redirectPath)
})
return
@@ -3566,7 +4552,7 @@ var htmx = (function() {
if (xhr.getResponseHeader('HX-Retarget') === 'this') {
responseInfo.target = elt
} else {
- responseInfo.target = querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget'))
+ responseInfo.target = asElement(querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget')))
}
}
@@ -3578,7 +4564,7 @@ var htmx = (function() {
let ignoreTitle = htmx.config.ignoreTitle || responseHandling.ignoreTitle
let selectOverride = responseHandling.select
if (responseHandling.target) {
- responseInfo.target = querySelectorExt(elt, responseHandling.target)
+ responseInfo.target = asElement(querySelectorExt(elt, responseHandling.target))
}
var swapOverride = etc.swapOverride
if (swapOverride == null && responseHandling.swapOverride) {
@@ -3590,7 +4576,7 @@ var htmx = (function() {
if (xhr.getResponseHeader('HX-Retarget') === 'this') {
responseInfo.target = elt
} else {
- responseInfo.target = querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget'))
+ responseInfo.target = asElement(querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget')))
}
}
if (hasHeader(xhr, /HX-Reswap:/i)) {
@@ -3598,6 +4584,7 @@ var htmx = (function() {
}
var serverResponse = xhr.response
+ /** @type HtmxBeforeSwapDetails */
var beforeSwapDetails = mergeObjects({
shouldSwap,
serverResponse,
@@ -3714,7 +4701,9 @@ var htmx = (function() {
if (shouldTransition &&
triggerEvent(elt, 'htmx:beforeTransition', responseInfo) &&
- typeof Promise !== 'undefined' && document.startViewTransition) {
+ typeof Promise !== 'undefined' &&
+ // @ts-ignore experimental feature atm
+ document.startViewTransition) {
const settlePromise = new Promise(function(_resolve, _reject) {
settleResolve = _resolve
settleReject = _reject
@@ -3722,6 +4711,7 @@ var htmx = (function() {
// wrap the original doSwap() in a call to startViewTransition()
const innerDoSwap = doSwap
doSwap = function() {
+ // @ts-ignore experimental feature atm
document.startViewTransition(function() {
innerDoSwap()
return settlePromise
@@ -3730,7 +4720,7 @@ var htmx = (function() {
}
if (swapSpec.swapDelay > 0) {
- setTimeout(doSwap, swapSpec.swapDelay)
+ getWindow().setTimeout(doSwap, swapSpec.swapDelay)
} else {
doSwap()
}
@@ -3744,13 +4734,13 @@ var htmx = (function() {
// Extensions API
//= ===================================================================
- /** @type {Object<string, import("./htmx").HtmxExtension>} */
+ /** @type {Object<string, HtmxExtension>} */
const extensions = {}
/**
- * extensionBase defines the default functions for all extensions.
- * @returns {import("./htmx").HtmxExtension}
- */
+ * extensionBase defines the default functions for all extensions.
+ * @returns {HtmxExtension}
+ */
function extensionBase() {
return {
init: function(api) { return null },
@@ -3763,11 +4753,13 @@ var htmx = (function() {
}
/**
- * defineExtension initializes the extension and adds it to the htmx registry
- *
- * @param {string} name
- * @param {import("./htmx").HtmxExtension} extension
- */
+ * defineExtension initializes the extension and adds it to the htmx registry
+ *
+ * @see https://htmx.org/api/#defineExtension
+ *
+ * @param {string} name the extension name
+ * @param {HtmxExtension} extension the extension definition
+ */
function defineExtension(name, extension) {
if (extension.init) {
extension.init(internalAPI)
@@ -3776,21 +4768,24 @@ var htmx = (function() {
}
/**
- * removeExtension removes an extension from the htmx registry
- *
- * @param {string} name
- */
+ * removeExtension removes an extension from the htmx registry
+ *
+ * @see https://htmx.org/api/#removeExtension
+ *
+ * @param {string} name
+ */
function removeExtension(name) {
delete extensions[name]
}
/**
- * getExtensions searches up the DOM tree to return all extensions that can be applied to a given element
- *
- * @param {HTMLElement} elt
- * @param {import("./htmx").HtmxExtension[]=} extensionsToReturn
- * @param {import("./htmx").HtmxExtension[]=} extensionsToIgnore
- */
+ * getExtensions searches up the DOM tree to return all extensions that can be applied to a given element
+ *
+ * @param {Element} elt
+ * @param {HtmxExtension[]=} extensionsToReturn
+ * @param {string[]=} extensionsToIgnore
+ * @returns {HtmxExtension[]}
+ */
function getExtensions(elt, extensionsToReturn, extensionsToIgnore) {
if (extensionsToReturn == undefined) {
extensionsToReturn = []
@@ -3817,7 +4812,7 @@ var htmx = (function() {
}
})
}
- return getExtensions(parentElt(elt), extensionsToReturn, extensionsToIgnore)
+ return getExtensions(asElement(parentElt(elt)), extensionsToReturn, extensionsToIgnore)
}
//= ===================================================================
@@ -3829,12 +4824,12 @@ var htmx = (function() {
})
/**
- * Execute a function now if DOMContentLoaded has fired, otherwise listen for it.
- *
- * This function uses isReady because there is no realiable way to ask the browswer whether
- * the DOMContentLoaded event has already been fired; there's a gap between DOMContentLoaded
- * firing and readystate=complete.
- */
+ * Execute a function now if DOMContentLoaded has fired, otherwise listen for it.
+ *
+ * This function uses isReady because there is no reliable way to ask the browser whether
+ * the DOMContentLoaded event has already been fired; there's a gap between DOMContentLoaded
+ * firing and readystate=complete.
+ */
function ready(fn) {
// Checking readyState here is a failsafe in case the htmx script tag entered the DOM by
// some means other than the initial page load.
@@ -3857,9 +4852,9 @@ var htmx = (function() {
}
function getMetaConfig() {
+ /** @type HTMLMetaElement */
const element = getDocument().querySelector('meta[name="htmx-config"]')
if (element) {
- // @ts-ignore
return parseJSON(element.content)
} else {
return null
@@ -3907,7 +4902,7 @@ var htmx = (function() {
}
}
}
- setTimeout(function() {
+ getWindow().setTimeout(function() {
triggerEvent(body, 'htmx:load', {}) // give ready handlers a chance to load up before firing this event
body = null // kill reference for gc
}, 0)
@@ -3915,5 +4910,178 @@ var htmx = (function() {
return htmx
})()
+
+/** @typedef {'get'|'head'|'post'|'put'|'delete'|'connect'|'options'|'trace'|'patch'} HttpVerb */
+
+/**
+ * @typedef {Object} SwapOptions
+ * @property {string} [select]
+ * @property {string} [selectOOB]
+ * @property {*} [eventInfo]
+ * @property {string} [anchor]
+ * @property {Element} [contextElement]
+ * @property {swapCallback} [afterSwapCallback]
+ * @property {swapCallback} [afterSettleCallback]
+ */
+
+/**
+ * @callback swapCallback
+ */
+
+/**
+ * @typedef {'innerHTML' | 'outerHTML' | 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'delete' | 'none' | string} HtmxSwapStyle
+ */
+
+/**
+ * @typedef HtmxSwapSpecification
+ * @property {HtmxSwapStyle} swapStyle
+ * @property {number} swapDelay
+ * @property {number} settleDelay
+ * @property {boolean} [transition]
+ * @property {boolean} [ignoreTitle]
+ * @property {string} [head]
+ * @property {'top' | 'bottom'} [scroll]
+ * @property {string} [scrollTarget]
+ * @property {string} [show]
+ * @property {string} [showTarget]
+ * @property {boolean} [focusScroll]
+ */
+
+/**
+ * @typedef {((this:Node, evt:Event) => boolean) & {source: string}} ConditionalFunction
+ */
+
+/**
+ * @typedef {Object} HtmxTriggerSpecification
+ * @property {string} trigger
+ * @property {number} [pollInterval]
+ * @property {ConditionalFunction} [eventFilter]
+ * @property {boolean} [changed]
+ * @property {boolean} [once]
+ * @property {boolean} [consume]
+ * @property {number} [delay]
+ * @property {string} [from]
+ * @property {string} [target]
+ * @property {number} [throttle]
+ * @property {string} [queue]
+ * @property {string} [root]
+ * @property {string} [threshold]
+ */
+
+/**
+ * @typedef {{elt: Element, message: string, validity: ValidityState}} HtmxElementValidationError
+ */
+
+/**
+ * @typedef {Record<string, string>} HtmxHeaderSpecification
+ * @property {'true'} HX-Request
+ * @property {string|null} HX-Trigger
+ * @property {string|null} HX-Trigger-Name
+ * @property {string|null} HX-Target
+ * @property {string} HX-Current-URL
+ * @property {string} [HX-Prompt]
+ * @property {'true'} [HX-Boosted]
+ * @property {string} [Content-Type]
+ * @property {'true'} [HX-History-Restore-Request]
+ */
+
+/** @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]
+ */
+
+/**
+ * @typedef {Object} HtmxRequestConfig
+ * @property {boolean} boosted
+ * @property {boolean} useUrlParams
+ * @property {FormData} formData
+ * @property {Object} parameters formData proxy
+ * @property {FormData} unfilteredFormData
+ * @property {Object} unfilteredParameters unfilteredFormData proxy
+ * @property {HtmxHeaderSpecification} headers
+ * @property {Element} target
+ * @property {HttpVerb} verb
+ * @property {HtmxElementValidationError[]} errors
+ * @property {boolean} withCredentials
+ * @property {number} timeout
+ * @property {string} path
+ * @property {Event} triggeringEvent
+ */
+
+/**
+ * @typedef {Object} HtmxResponseInfo
+ * @property {XMLHttpRequest} xhr
+ * @property {Element} target
+ * @property {HtmxRequestConfig} requestConfig
+ * @property {HtmxAjaxEtc} etc
+ * @property {boolean} boosted
+ * @property {string} select
+ * @property {{requestPath: string, finalRequestPath: string, responsePath: string|null, anchor: string}} pathInfo
+ * @property {boolean} [failed]
+ * @property {boolean} [successful]
+ */
+
+/**
+ * @typedef {Object} HtmxAjaxEtc
+ * @property {boolean} [returnPromise]
+ * @property {HtmxAjaxHandler} [handler]
+ * @property {string} [select]
+ * @property {Element} [targetOverride]
+ * @property {HtmxSwapStyle} [swapOverride]
+ * @property {Record<string,string>} [headers]
+ * @property {Object|FormData} [values]
+ * @property {boolean} [credentials]
+ * @property {number} [timeout]
+ */
+
+/**
+ * @typedef {Object} HtmxResponseHandlingConfig
+ * @property {string} [code]
+ * @property {boolean} swap
+ * @property {boolean} [error]
+ * @property {boolean} [ignoreTitle]
+ * @property {string} [select]
+ * @property {string} [target]
+ * @property {string} [swapOverride]
+ * @property {string} [event]
+ */
+
+/**
+ * @typedef {HtmxResponseInfo & {shouldSwap: boolean, serverResponse: any, isError: boolean, ignoreTitle: boolean, selectOverride:string}} HtmxBeforeSwapDetails
+ */
+
+/**
+ * @callback HtmxAjaxHandler
+ * @param {Element} elt
+ * @param {HtmxResponseInfo} responseInfo
+ */
+
+/**
+ * @typedef {(() => void)} HtmxSettleTask
+ */
+
+/**
+ * @typedef {Object} HtmxSettleInfo
+ * @property {HtmxSettleTask[]} tasks
+ * @property {Element[]} elts
+ * @property {string} [title]
+ */
+
+/**
+ * @typedef {Object} HtmxExtension
+ * @see https://htmx.org/extensions/#defining
+ * @property {(api: any) => void} init
+ * @property {(name: string, event: Event|CustomEvent) => boolean} onEvent
+ * @property {(text: string, xhr: XMLHttpRequest, elt: Element) => string} transformResponse
+ * @property {(swapStyle: HtmxSwapStyle) => boolean} isInlineSwap
+ * @property {(swapStyle: HtmxSwapStyle, target: Element, fragment: Node, settleInfo: HtmxSettleInfo) => boolean} handleSwap
+ * @property {(xhr: XMLHttpRequest, parameters: FormData, elt: Element) => *|string|null} encodeParameters
+ */
return htmx
})
diff --git a/dist/htmx.cjs.js b/dist/htmx.cjs.js
index f418df88..81cd8773 100644
--- a/dist/htmx.cjs.js
+++ b/dist/htmx.cjs.js
@@ -2,81 +2,300 @@ var htmx = (function() {
'use strict'
// Public API
- //* * @type {import("./htmx").HtmxApi} */
const htmx = {
+ // Tsc madness here, assigning the functions directly results in an invalid TypeScript output, but reassigning is fine
/* Event processing */
- onLoad: onLoadHelper,
- process: processNode,
- on: addEventListenerImpl,
- off: removeEventListenerImpl,
- trigger: triggerEvent,
- ajax: ajaxHelper,
+ /** @type {typeof onLoadHelper} */
+ onLoad: null,
+ /** @type {typeof processNode} */
+ process: null,
+ /** @type {typeof addEventListenerImpl} */
+ on: null,
+ /** @type {typeof removeEventListenerImpl} */
+ off: null,
+ /** @type {typeof triggerEvent} */
+ trigger: null,
+ /** @type {typeof ajaxHelper} */
+ ajax: null,
/* DOM querying helpers */
- find,
- findAll,
- closest,
+ /** @type {typeof find} */
+ find: null,
+ /** @type {typeof findAll} */
+ findAll: null,
+ /** @type {typeof closest} */
+ closest: null,
+ /**
+ * Returns the input values that would resolve for a given element via the htmx value resolution mechanism
+ *
+ * @see https://htmx.org/api/#values
+ *
+ * @param {Element} elt the element to resolve values on
+ * @param {HttpVerb} type the request type (e.g. **get** or **post**) non-GET's will include the enclosing form of the element. Defaults to **post**
+ * @returns {Object}
+ */
values: function(elt, type) {
const inputValues = getInputValues(elt, type || 'post')
return inputValues.values
},
/* DOM manipulation helpers */
- remove: removeElement,
- addClass: addClassToElement,
- removeClass: removeClassFromElement,
- toggleClass: toggleClassOnElement,
- takeClass: takeClassForElement,
- swap,
+ /** @type {typeof removeElement} */
+ remove: null,
+ /** @type {typeof addClassToElement} */
+ addClass: null,
+ /** @type {typeof removeClassFromElement} */
+ removeClass: null,
+ /** @type {typeof toggleClassOnElement} */
+ toggleClass: null,
+ /** @type {typeof takeClassForElement} */
+ takeClass: null,
+ /** @type {typeof swap} */
+ swap: null,
/* Extension entrypoints */
- defineExtension,
- removeExtension,
+ /** @type {typeof defineExtension} */
+ defineExtension: null,
+ /** @type {typeof removeExtension} */
+ removeExtension: null,
+ /* Debugging */
+ /** @type {typeof logAll} */
+ logAll: null,
+ /** @type {typeof logNone} */
+ logNone: null,
/* Debugging */
- logAll,
- logNone,
+ /**
+ * The logger htmx uses to log with
+ *
+ * @see https://htmx.org/api/#logger
+ */
logger: null,
+ /**
+ * A property holding the configuration htmx uses at runtime.
+ *
+ * Note that using a [meta tag](https://htmx.org/docs/#config) is the preferred mechanism for setting these properties.
+ *
+ * @see https://htmx.org/api/#config
+ */
config: {
+ /**
+ * Whether to use history.
+ * @type boolean
+ * @default true
+ */
historyEnabled: true,
+ /**
+ * The number of pages to keep in **localStorage** for history support.
+ * @type number
+ * @default 10
+ */
historyCacheSize: 10,
+ /**
+ * @type boolean
+ * @default false
+ */
refreshOnHistoryMiss: false,
+ /**
+ * The default swap style to use if **[hx-swap](https://htmx.org/attributes/hx-swap)** is omitted.
+ * @type HtmxSwapStyle
+ * @default 'innerHTML'
+ */
defaultSwapStyle: 'innerHTML',
+ /**
+ * The default delay between receiving a response from the server and doing the swap.
+ * @type number
+ * @default 0
+ */
defaultSwapDelay: 0,
+ /**
+ * The default delay between completing the content swap and settling attributes.
+ * @type number
+ * @default 20
+ */
defaultSettleDelay: 20,
+ /**
+ * If true, htmx will inject a small amount of CSS into the page to make indicators invisible unless the **htmx-indicator** class is present.
+ * @type boolean
+ * @default true
+ */
includeIndicatorStyles: true,
+ /**
+ * The class to place on indicators when a request is in flight.
+ * @type string
+ * @default 'htmx-indicator'
+ */
indicatorClass: 'htmx-indicator',
+ /**
+ * The class to place on triggering elements when a request is in flight.
+ * @type string
+ * @default 'htmx-request'
+ */
requestClass: 'htmx-request',
+ /**
+ * The class to temporarily place on elements that htmx has added to the DOM.
+ * @type string
+ * @default 'htmx-added'
+ */
addedClass: 'htmx-added',
+ /**
+ * The class to place on target elements when htmx is in the settling phase.
+ * @type string
+ * @default 'htmx-settling'
+ */
settlingClass: 'htmx-settling',
+ /**
+ * The class to place on target elements when htmx is in the swapping phase.
+ * @type string
+ * @default 'htmx-swapping'
+ */
swappingClass: 'htmx-swapping',
+ /**
+ * Allows the use of eval-like functionality in htmx, to enable **hx-vars**, trigger conditions & script tag evaluation. Can be set to **false** for CSP compatibility.
+ * @type boolean
+ * @default true
+ */
allowEval: true,
+ /**
+ * If set to false, disables the interpretation of script tags.
+ * @type boolean
+ * @default true
+ */
allowScriptTags: true,
+ /**
+ * If set, the nonce will be added to inline scripts.
+ * @type string
+ * @default ''
+ */
inlineScriptNonce: '',
+ /**
+ * The attributes to settle during the settling phase.
+ * @type string[]
+ * @default ['class', 'style', 'width', 'height']
+ */
attributesToSettle: ['class', 'style', 'width', 'height'],
+ /**
+ * Allow cross-site Access-Control requests using credentials such as cookies, authorization headers or TLS client certificates.
+ * @type boolean
+ * @default false
+ */
withCredentials: false,
+ /**
+ * @type number
+ * @default 0
+ */
timeout: 0,
+ /**
+ * The default implementation of **getWebSocketReconnectDelay** for reconnecting after unexpected connection loss by the event code **Abnormal Closure**, **Service Restart** or **Try Again Later**.
+ * @type {'full-jitter' | ((retryCount:number) => number)}
+ * @default "full-jitter"
+ */
wsReconnectDelay: 'full-jitter',
+ /**
+ * The type of binary data being received over the WebSocket connection
+ * @type BinaryType
+ * @default 'blob'
+ */
wsBinaryType: 'blob',
+ /**
+ * @type string
+ * @default '[hx-disable], [data-hx-disable]'
+ */
disableSelector: '[hx-disable], [data-hx-disable]',
+ /**
+ * @type {'auto' | 'instant' | 'smooth'}
+ * @default 'smooth'
+ */
scrollBehavior: 'instant',
+ /**
+ * If the focused element should be scrolled into view.
+ * @type boolean
+ * @default false
+ */
defaultFocusScroll: false,
+ /**
+ * If set to true htmx will include a cache-busting parameter in GET requests to avoid caching partial responses by the browser
+ * @type boolean
+ * @default false
+ */
getCacheBusterParam: false,
+ /**
+ * If set to true, htmx will use the View Transition API when swapping in new content.
+ * @type boolean
+ * @default false
+ */
globalViewTransitions: false,
+ /**
+ * htmx will format requests with these methods by encoding their parameters in the URL, not the request body
+ * @type {(HttpVerb)[]}
+ * @default ['get', 'delete']
+ */
methodsThatUseUrlParams: ['get', 'delete'],
+ /**
+ * If set to true, disables htmx-based requests to non-origin hosts.
+ * @type boolean
+ * @default false
+ */
selfRequestsOnly: true,
+ /**
+ * If set to true htmx will not update the title of the document when a title tag is found in new content
+ * @type boolean
+ * @default false
+ */
ignoreTitle: false,
+ /**
+ * Whether the target of a boosted element is scrolled into the viewport.
+ * @type boolean
+ * @default true
+ */
scrollIntoViewOnBoost: true,
+ /**
+ * The cache to store evaluated trigger specifications into.
+ * You may define a simple object to use a never-clearing cache, or implement your own system using a [proxy object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
+ * @type {Object|null}
+ * @default null
+ */
triggerSpecsCache: null,
+ /** @type boolean */
disableInheritance: false,
+ /** @type HtmxResponseHandlingConfig[] */
responseHandling: [
{ code: '204', swap: false },
{ code: '[23]..', swap: true },
{ code: '[45]..', swap: false, error: true }
- ]
+ ],
+ /**
+ * Whether to process OOB swaps on elements that are nested within the main response element.
+ * @type boolean
+ * @default true
+ */
+ allowNestedOobSwaps: true
},
- parseInterval,
- _: internalEval,
+ /** @type {typeof parseInterval} */
+ parseInterval: null,
+ /** @type {typeof internalEval} */
+ _: null,
version: '2.0a'
}
+ // Tsc madness part 2
+ htmx.onLoad = onLoadHelper
+ htmx.process = processNode
+ htmx.on = addEventListenerImpl
+ htmx.off = removeEventListenerImpl
+ htmx.trigger = triggerEvent
+ htmx.ajax = ajaxHelper
+ htmx.find = find
+ htmx.findAll = findAll
+ htmx.closest = closest
+ htmx.remove = removeElement
+ htmx.addClass = addClassToElement
+ htmx.removeClass = removeClassFromElement
+ htmx.toggleClass = toggleClassOnElement
+ htmx.takeClass = takeClassForElement
+ htmx.swap = swap
+ htmx.defineExtension = defineExtension
+ htmx.removeExtension = removeExtension
+ htmx.logAll = logAll
+ htmx.logNone = logNone
+ htmx.parseInterval = parseInterval
+ htmx._ = internalEval
- /** @type {import("./htmx").HtmxInternalApi} */
const internalAPI = {
addTriggerHandler,
bodyContains,
@@ -128,6 +347,16 @@ var htmx = (function() {
global ? 'gim' : 'im')
}
+ /**
+ * Parses an interval string consistent with the way htmx does. Useful for plugins that have timing-related attributes.
+ *
+ * Caution: Accepts an int followed by either **s** or **ms**. All other values use **parseFloat**
+ *
+ * @see https://htmx.org/api/#parseInterval
+ *
+ * @param {string} str timing string
+ * @returns {number|undefined}
+ */
function parseInterval(str) {
if (str == undefined) {
return undefined
@@ -147,23 +376,28 @@ var htmx = (function() {
}
/**
- * @param {Element} elt
+ * @param {Node} elt
* @param {string} name
* @returns {(string | null)}
*/
function getRawAttribute(elt, name) {
- return elt.getAttribute && elt.getAttribute(name)
+ return elt instanceof Element && elt.getAttribute(name)
}
+ /**
+ * @param {Element} elt
+ * @param {string} qualifiedName
+ * @returns {boolean}
+ */
// resolve with both hx and data-hx prefixes
function hasAttribute(elt, qualifiedName) {
- return elt.hasAttribute && (elt.hasAttribute(qualifiedName) ||
+ return !!elt.hasAttribute && (elt.hasAttribute(qualifiedName) ||
elt.hasAttribute('data-' + qualifiedName))
}
/**
*
- * @param {HTMLElement} elt
+ * @param {Node} elt
* @param {string} qualifiedName
* @returns {(string | null)}
*/
@@ -172,8 +406,8 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
- * @returns {HTMLElement | ShadowRoot | null}
+ * @param {Node} elt
+ * @returns {Node | null}
*/
function parentElt(elt) {
const parent = elt.parentElement
@@ -189,16 +423,18 @@ var htmx = (function() {
}
/**
- * @returns {Document | ShadowRoot}
+ * @param {Node} elt
+ * @param {boolean} global
+ * @returns {Node|Document}
*/
function getRootNode(elt, global) {
return elt.getRootNode ? elt.getRootNode({ composed: global }) : getDocument()
}
/**
- * @param {HTMLElement} elt
- * @param {(e:HTMLElement) => boolean} condition
- * @returns {HTMLElement | null}
+ * @param {Node} elt
+ * @param {(e:Node) => boolean} condition
+ * @returns {Node | null}
*/
function getClosestMatch(elt, condition) {
while (elt && !condition(elt)) {
@@ -208,6 +444,12 @@ var htmx = (function() {
return elt || null
}
+ /**
+ * @param {Element} initialElement
+ * @param {Element} ancestor
+ * @param {string} attributeName
+ * @returns {string|null}
+ */
function getAttributeValueWithDisinheritance(initialElement, ancestor, attributeName) {
const attributeValue = getAttributeValue(ancestor, attributeName)
const disinherit = getAttributeValue(ancestor, 'hx-disinherit')
@@ -228,14 +470,14 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {string} attributeName
* @returns {string | null}
*/
function getClosestAttributeValue(elt, attributeName) {
let closestAttr = null
getClosestMatch(elt, function(e) {
- return closestAttr = getAttributeValueWithDisinheritance(elt, e, attributeName)
+ return !!(closestAttr = getAttributeValueWithDisinheritance(elt, asElement(e), attributeName))
})
if (closestAttr !== 'unset') {
return closestAttr
@@ -243,15 +485,15 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Node} elt
* @param {string} selector
* @returns {boolean}
*/
function matches(elt, selector) {
// @ts-ignore: non-standard properties for browser compatibility
// noinspection JSUnresolvedVariable
- const matchesFunction = elt.matches || elt.matchesSelector || elt.msMatchesSelector || elt.mozMatchesSelector || elt.webkitMatchesSelector || elt.oMatchesSelector
- return matchesFunction && matchesFunction.call(elt, selector)
+ const matchesFunction = elt instanceof Element && (elt.matches || elt.matchesSelector || elt.msMatchesSelector || elt.mozMatchesSelector || elt.webkitMatchesSelector || elt.oMatchesSelector)
+ return !!matchesFunction && matchesFunction.call(elt, selector)
}
/**
@@ -269,9 +511,7 @@ var htmx = (function() {
}
/**
- *
* @param {string} resp
- * @param {number} depth
* @returns {Document}
*/
function parseHTML(resp) {
@@ -279,12 +519,20 @@ var htmx = (function() {
return parser.parseFromString(resp, 'text/html')
}
+ /**
+ * @param {DocumentFragment} fragment
+ * @param {Node} elt
+ */
function takeChildrenFor(fragment, elt) {
while (elt.childNodes.length > 0) {
fragment.append(elt.childNodes[0])
}
}
+ /**
+ * @param {HTMLScriptElement} script
+ * @returns {HTMLScriptElement}
+ */
function duplicateScript(script) {
const newScript = getDocument().createElement('script')
forEach(script.attributes, function(attr) {
@@ -298,16 +546,23 @@ var htmx = (function() {
return newScript
}
+ /**
+ * @param {HTMLScriptElement} script
+ * @returns {boolean}
+ */
function isJavaScriptScriptNode(script) {
return script.matches('script') && (script.type === 'text/javascript' || script.type === 'module' || script.type === '')
}
- // we have to make new copies of script tags that we are going to insert because
- // SOME browsers (not saying who, but it involves an element and an animal) don't
- // execute scripts created in <template> tags when they are inserted into the DOM
- // and all the others do lmao
+ /**
+ * we have to make new copies of script tags that we are going to insert because
+ * SOME browsers (not saying who, but it involves an element and an animal) don't
+ * execute scripts created in <template> tags when they are inserted into the DOM
+ * and all the others do lmao
+ * @param {DocumentFragment} fragment
+ */
function normalizeScriptTags(fragment) {
- Array.from(fragment.querySelectorAll('script')).forEach((script) => {
+ Array.from(fragment.querySelectorAll('script')).forEach(/** @param {HTMLScriptElement} script */ (script) => {
if (isJavaScriptScriptNode(script)) {
const newScript = duplicateScript(script)
const parent = script.parentNode
@@ -323,31 +578,37 @@ var htmx = (function() {
}
/**
- * @param {string} response HTML
- * @returns {DocumentFragment & {title: string}} a document fragment representing the response HTML, including
+ * @typedef {DocumentFragment & {title?: string}} DocumentFragmentWithTitle
+ * @description a document fragment representing the response HTML, including
* a `title` property for any title information found
*/
+
+ /**
+ * @param {string} response HTML
+ * @returns {DocumentFragmentWithTitle}
+ */
function makeFragment(response) {
// strip head tag to determine shape of response we are dealing with
const responseWithNoHead = response.replace(HEAD_TAG_REGEX, '')
const startTag = getStartTag(responseWithNoHead)
- let fragment = null
+ /** @type DocumentFragmentWithTitle */
+ let fragment
if (startTag === 'html') {
// if it is a full document, parse it and return the body
- fragment = new DocumentFragment()
+ fragment = /** @type DocumentFragmentWithTitle */ (new DocumentFragment())
const doc = parseHTML(response)
takeChildrenFor(fragment, doc.body)
fragment.title = doc.title
} else if (startTag === 'body') {
// parse body w/o wrapping in template
- fragment = new DocumentFragment()
+ fragment = /** @type DocumentFragmentWithTitle */ (new DocumentFragment())
const doc = parseHTML(responseWithNoHead)
takeChildrenFor(fragment, doc.body)
fragment.title = doc.title
} else {
// otherwise we have non-body partial HTML content, so wrap it in a template to maximize parsing flexibility
const doc = parseHTML('<body><template class="internal-htmx-wrapper">' + responseWithNoHead + '</template></body>')
- fragment = doc.querySelector('template').content
+ fragment = /** @type DocumentFragmentWithTitle */ (doc.querySelector('template').content)
// extract title into fragment for later processing
fragment.title = doc.title
@@ -392,7 +653,7 @@ var htmx = (function() {
* @returns {o is Function}
*/
function isFunction(o) {
- return isType(o, 'Function')
+ return typeof o === 'function'
}
/**
@@ -404,9 +665,50 @@ var htmx = (function() {
}
/**
+ * @typedef {Object} OnHandler
+ * @property {(keyof HTMLElementEventMap)|string} event
+ * @property {EventListener} listener
+ */
+
+ /**
+ * @typedef {Object} ListenerInfo
+ * @property {string} trigger
+ * @property {EventListener} listener
+ * @property {EventTarget} on
+ */
+
+ /**
+ * @typedef {Object} HtmxNodeInternalData
+ * Element data
+ * @property {number} [initHash]
+ * @property {boolean} [boosted]
+ * @property {OnHandler[]} [onHandlers]
+ * @property {number} [timeout]
+ * @property {ListenerInfo[]} [listenerInfos]
+ * @property {boolean} [cancelled]
+ * @property {boolean} [triggeredOnce]
+ * @property {number} [delayed]
+ * @property {number|null} [throttle]
+ * @property {string} [lastValue]
+ * @property {boolean} [loaded]
+ * @property {string} [path]
+ * @property {string} [verb]
+ * @property {boolean} [polling]
+ * @property {HTMLButtonElement|HTMLInputElement|null} [lastButtonClicked]
+ * @property {number} [requestCount]
+ * @property {XMLHttpRequest} [xhr]
+ * @property {(() => void)[]} [queuedRequests]
+ * @property {boolean} [abortable]
+ *
+ * Event data
+ * @property {HtmxTriggerSpecification} [triggerSpec]
+ * @property {EventTarget[]} [handledFor]
+ */
+
+ /**
* getInternalData retrieves "private" data stored by htmx within an element
- * @param {HTMLElement} elt
- * @returns {*}
+ * @param {EventTarget|Event} elt
+ * @returns {HtmxNodeInternalData}
*/
function getInternalData(elt) {
const dataProp = 'htmx-internal-data'
@@ -419,8 +721,9 @@ var htmx = (function() {
/**
* toArray converts an ArrayLike object into a real array.
- * @param {ArrayLike} arr
- * @returns {any[]}
+ * @template T
+ * @param {ArrayLike<T>} arr
+ * @returns {T[]}
*/
function toArray(arr) {
const returnArr = []
@@ -434,13 +737,8 @@ var htmx = (function() {
/**
* @template T
- * @callback forEachCallback
- * @param {T} value
- */
- /**
- * @template T
- * @param {{[index: number]: T, length: number}} arr
- * @param {forEachCallback<T>} func
+ * @param {T[]|NamedNodeMap|HTMLCollection|HTMLFormControlsCollection|ArrayLike<T>} arr
+ * @param {(T) => void} func
*/
function forEach(arr, func) {
if (arr) {
@@ -450,6 +748,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} el
+ * @returns {boolean}
+ */
function isScrolledIntoView(el) {
const rect = el.getBoundingClientRect()
const elemTop = rect.top
@@ -457,35 +759,52 @@ var htmx = (function() {
return elemTop < window.innerHeight && elemBottom >= 0
}
+ /**
+ * @param {Node} elt
+ * @returns {boolean}
+ */
function bodyContains(elt) {
// IE Fix
- if (elt.getRootNode && elt.getRootNode() instanceof window.ShadowRoot) {
- return getDocument().body.contains(elt.getRootNode().host)
+ const rootNode = elt.getRootNode && elt.getRootNode()
+ if (rootNode && rootNode instanceof window.ShadowRoot) {
+ return getDocument().body.contains(rootNode.host)
} else {
return getDocument().body.contains(elt)
}
}
+ /**
+ * @param {string} trigger
+ * @returns {string[]}
+ */
function splitOnWhitespace(trigger) {
return trigger.trim().split(/\s+/)
}
/**
- * mergeObjects takes all of the keys from
+ * mergeObjects takes all the keys from
* obj2 and duplicates them into obj1
- * @param {Object} obj1
- * @param {Object} obj2
- * @returns {Object}
+ * @template T1
+ * @template T2
+ * @param {T1} obj1
+ * @param {T2} obj2
+ * @returns {T1 & T2}
*/
function mergeObjects(obj1, obj2) {
for (const key in obj2) {
if (obj2.hasOwnProperty(key)) {
+ // @ts-ignore tsc doesn't seem to properly handle types merging
obj1[key] = obj2[key]
}
}
+ // @ts-ignore tsc doesn't seem to properly handle types merging
return obj1
}
+ /**
+ * @param {string} jString
+ * @returns {any|null}
+ */
function parseJSON(jString) {
try {
return JSON.parse(jString)
@@ -495,6 +814,9 @@ var htmx = (function() {
}
}
+ /**
+ * @returns {boolean}
+ */
function canAccessLocalStorage() {
const test = 'htmx:localStorageTest'
try {
@@ -506,6 +828,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {string} path
+ * @returns {string}
+ */
function normalizePath(path) {
try {
const url = new URL(path)
@@ -527,19 +853,36 @@ var htmx = (function() {
// public API
//= =========================================================================================
+ /**
+ * @param {string} str
+ * @returns {any}
+ */
function internalEval(str) {
return maybeEval(getDocument().body, function() {
return eval(str)
})
}
+ /**
+ * Adds a callback for the **htmx:load** event. This can be used to process new content, for example initializing the content with a javascript library
+ *
+ * @see https://htmx.org/api/#onLoad
+ *
+ * @param {(elt: Node) => void} callback the callback to call on newly loaded content
+ * @returns {EventListener}
+ */
function onLoadHelper(callback) {
- const value = htmx.on('htmx:load', function(evt) {
+ const value = htmx.on('htmx:load', /** @param {CustomEvent} evt */ function(evt) {
callback(evt.detail.elt)
})
return value
}
+ /**
+ * Log all htmx events, useful for debugging.
+ *
+ * @see https://htmx.org/api/#logAll
+ */
function logAll() {
htmx.logger = function(elt, event, data) {
if (console) {
@@ -552,26 +895,59 @@ var htmx = (function() {
htmx.logger = null
}
+ /**
+ * Finds an element matching the selector
+ *
+ * @see https://htmx.org/api/#find
+ *
+ * @param {ParentNode|string} eltOrSelector the root element to find the matching element in, inclusive | the selector to match
+ * @param {string} [selector] the selector to match
+ * @returns {Element|null}
+ */
function find(eltOrSelector, selector) {
- if (selector) {
+ if (typeof eltOrSelector !== 'string') {
return eltOrSelector.querySelector(selector)
} else {
return find(getDocument(), eltOrSelector)
}
}
+ /**
+ * Finds all elements matching the selector
+ *
+ * @see https://htmx.org/api/#findAll
+ *
+ * @param {ParentNode|string} eltOrSelector the root element to find the matching elements in, inclusive | the selector to match
+ * @param {string} [selector] the selector to match
+ * @returns {NodeListOf<Element>}
+ */
function findAll(eltOrSelector, selector) {
- if (selector) {
+ if (typeof eltOrSelector !== 'string') {
return eltOrSelector.querySelectorAll(selector)
} else {
return findAll(getDocument(), eltOrSelector)
}
}
+ /**
+ * @returns Window
+ */
+ function getWindow() {
+ return window
+ }
+
+ /**
+ * Removes an element from the DOM
+ *
+ * @see https://htmx.org/api/#remove
+ *
+ * @param {Node} elt
+ * @param {number} [delay]
+ */
function removeElement(elt, delay) {
elt = resolveTarget(elt)
if (delay) {
- setTimeout(function() {
+ getWindow().setTimeout(function() {
removeElement(elt)
elt = null
}, delay)
@@ -580,10 +956,54 @@ var htmx = (function() {
}
}
+ /**
+ * @param {any} elt
+ * @return {Element|null}
+ */
+ function asElement(elt) {
+ return elt instanceof Element ? elt : null
+ }
+
+ /**
+ * @param {any} elt
+ * @return {HTMLElement|null}
+ */
+ function asHtmlElement(elt) {
+ return elt instanceof HTMLElement ? elt : null
+ }
+
+ /**
+ * @param {any} value
+ * @return {string|null}
+ */
+ function asString(value) {
+ return typeof value === 'string' ? value : null
+ }
+
+ /**
+ * @param {EventTarget} elt
+ * @return {ParentNode|null}
+ */
+ function asParentNode(elt) {
+ return elt instanceof Element || elt instanceof Document || elt instanceof DocumentFragment ? elt : null
+ }
+
+ /**
+ * This method adds a class to the given element.
+ *
+ * @see https://htmx.org/api/#addClass
+ *
+ * @param {Element|string} elt the element to add the class to
+ * @param {string} clazz the class to add
+ * @param {number} [delay] the delay (in milliseconds) before class is added
+ */
function addClassToElement(elt, clazz, delay) {
- elt = resolveTarget(elt)
+ elt = asElement(resolveTarget(elt))
+ if (!elt) {
+ return
+ }
if (delay) {
- setTimeout(function() {
+ getWindow().setTimeout(function() {
addClassToElement(elt, clazz)
elt = null
}, delay)
@@ -592,10 +1012,22 @@ var htmx = (function() {
}
}
- function removeClassFromElement(elt, clazz, delay) {
- elt = resolveTarget(elt)
+ /**
+ * Removes a class from the given element
+ *
+ * @see https://htmx.org/api/#removeClass
+ *
+ * @param {Node|string} node element to remove the class from
+ * @param {string} clazz the class to remove
+ * @param {number} [delay] the delay (in milliseconds before class is removed)
+ */
+ function removeClassFromElement(node, clazz, delay) {
+ let elt = asElement(resolveTarget(node))
+ if (!elt) {
+ return
+ }
if (delay) {
- setTimeout(function() {
+ getWindow().setTimeout(function() {
removeClassFromElement(elt, clazz)
elt = null
}, delay)
@@ -610,22 +1042,47 @@ var htmx = (function() {
}
}
+ /**
+ * Toggles the given class on an element
+ *
+ * @see https://htmx.org/api/#toggleClass
+ *
+ * @param {Element|string} elt the element to toggle the class on
+ * @param {string} clazz the class to toggle
+ */
function toggleClassOnElement(elt, clazz) {
elt = resolveTarget(elt)
elt.classList.toggle(clazz)
}
+ /**
+ * Takes the given class from its siblings, so that among its siblings, only the given element will have the class.
+ *
+ * @see https://htmx.org/api/#takeClass
+ *
+ * @param {Node|string} elt the element that will take the class
+ * @param {string} clazz the class to take
+ */
function takeClassForElement(elt, clazz) {
elt = resolveTarget(elt)
forEach(elt.parentElement.children, function(child) {
removeClassFromElement(child, clazz)
})
- addClassToElement(elt, clazz)
+ addClassToElement(asElement(elt), clazz)
}
+ /**
+ * Finds the closest matching element in the given elements parentage, inclusive of the element
+ *
+ * @see https://htmx.org/api/#closest
+ *
+ * @param {Element|string} elt the element to find the selector from
+ * @param {string} selector the selector to find
+ * @returns {Element|null}
+ */
function closest(elt, selector) {
- elt = resolveTarget(elt)
- if (elt.closest) {
+ elt = asElement(resolveTarget(elt))
+ if (elt && elt.closest) {
return elt.closest(selector)
} else {
// TODO remove when IE goes away
@@ -634,19 +1091,33 @@ var htmx = (function() {
return elt
}
}
- while (elt = elt && parentElt(elt))
+ while (elt = elt && asElement(parentElt(elt)))
return null
}
}
+ /**
+ * @param {string} str
+ * @param {string} prefix
+ * @returns {boolean}
+ */
function startsWith(str, prefix) {
return str.substring(0, prefix.length) === prefix
}
+ /**
+ * @param {string} str
+ * @param {string} suffix
+ * @returns {boolean}
+ */
function endsWith(str, suffix) {
return str.substring(str.length - suffix.length) === suffix
}
+ /**
+ * @param {string} selector
+ * @returns {string}
+ */
function normalizeSelector(selector) {
const trimmedSelector = selector.trim()
if (startsWith(trimmedSelector, '<') && endsWith(trimmedSelector, '/>')) {
@@ -656,17 +1127,24 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Node|Element|Document|string} elt
+ * @param {string} selector
+ * @param {boolean=} global
+ * @returns {(Node|Window)[]}
+ */
function querySelectorAllExt(elt, selector, global) {
+ elt = resolveTarget(elt)
if (selector.indexOf('closest ') === 0) {
- return [closest(elt, normalizeSelector(selector.substr(8)))]
+ return [closest(asElement(elt), normalizeSelector(selector.substr(8)))]
} else if (selector.indexOf('find ') === 0) {
- return [find(elt, normalizeSelector(selector.substr(5)))]
+ return [find(asParentNode(elt), normalizeSelector(selector.substr(5)))]
} else if (selector === 'next') {
- return [elt.nextElementSibling]
+ return [asElement(elt).nextElementSibling]
} else if (selector.indexOf('next ') === 0) {
return [scanForwardQuery(elt, normalizeSelector(selector.substr(5)), !!global)]
} else if (selector === 'previous') {
- return [elt.previousElementSibling]
+ return [asElement(elt).previousElementSibling]
} else if (selector.indexOf('previous ') === 0) {
return [scanBackwardsQuery(elt, normalizeSelector(selector.substr(9)), !!global)]
} else if (selector === 'document') {
@@ -680,12 +1158,18 @@ var htmx = (function() {
} else if (selector.indexOf('global ') === 0) {
return querySelectorAllExt(elt, selector.slice(7), true)
} else {
- return getRootNode(elt, !!global).querySelectorAll(normalizeSelector(selector))
+ return toArray(asParentNode(getRootNode(elt, !!global)).querySelectorAll(normalizeSelector(selector)))
}
}
+ /**
+ * @param {Node} start
+ * @param {string} match
+ * @param {boolean} global
+ * @returns {Element}
+ */
var scanForwardQuery = function(start, match, global) {
- const results = getRootNode(start, global).querySelectorAll(match)
+ const results = asParentNode(getRootNode(start, global)).querySelectorAll(match)
for (let i = 0; i < results.length; i++) {
const elt = results[i]
if (elt.compareDocumentPosition(start) === Node.DOCUMENT_POSITION_PRECEDING) {
@@ -694,8 +1178,14 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Node} start
+ * @param {string} match
+ * @param {boolean} global
+ * @returns {Element}
+ */
var scanBackwardsQuery = function(start, match, global) {
- const results = getRootNode(start, global).querySelectorAll(match)
+ const results = asParentNode(getRootNode(start, global)).querySelectorAll(match)
for (let i = results.length - 1; i >= 0; i--) {
const elt = results[i]
if (elt.compareDocumentPosition(start) === Node.DOCUMENT_POSITION_FOLLOWING) {
@@ -704,8 +1194,13 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Node|string} eltOrSelector
+ * @param {string=} selector
+ * @returns {Node|Window}
+ */
function querySelectorExt(eltOrSelector, selector) {
- if (selector) {
+ if (typeof eltOrSelector !== 'string') {
return querySelectorAllExt(eltOrSelector, selector)[0]
} else {
return querySelectorAllExt(getDocument().body, eltOrSelector)[0]
@@ -713,36 +1208,62 @@ var htmx = (function() {
}
/**
- *
- * @param {string|Element} arg2
- * @param {Element} [context]
- * @returns {Element}
+ * @template {EventTarget} T
+ * @param {T|string} eltOrSelector
+ * @param {T} [context]
+ * @returns {Element|T|null}
*/
- function resolveTarget(arg2, context) {
- if (isType(arg2, 'String')) {
- return find(context || document, arg2)
+ function resolveTarget(eltOrSelector, context) {
+ if (typeof eltOrSelector === 'string') {
+ return find(asParentNode(context) || document, eltOrSelector)
} else {
- // @ts-ignore
- return arg2
+ return eltOrSelector
}
}
+ /**
+ * @typedef {keyof HTMLElementEventMap|string} AnyEventName
+ */
+
+ /**
+ * @typedef {Object} EventArgs
+ * @property {EventTarget} target
+ * @property {AnyEventName} event
+ * @property {EventListener} listener
+ */
+
+ /**
+ * @param {EventTarget|AnyEventName} arg1
+ * @param {AnyEventName|EventListener} arg2
+ * @param {EventListener} [arg3]
+ * @returns {EventArgs}
+ */
function processEventArgs(arg1, arg2, arg3) {
if (isFunction(arg2)) {
return {
target: getDocument().body,
- event: arg1,
+ event: asString(arg1),
listener: arg2
}
} else {
return {
target: resolveTarget(arg1),
- event: arg2,
+ event: asString(arg2),
listener: arg3
}
}
}
+ /**
+ * Adds an event listener to an element
+ *
+ * @see https://htmx.org/api/#on
+ *
+ * @param {EventTarget|string} arg1 the element to add the listener to | the event name to add the listener for
+ * @param {string|EventListener} arg2 the event name to add the listener for | the listener to add
+ * @param {EventListener} [arg3] the listener to add
+ * @returns {EventListener}
+ */
function addEventListenerImpl(arg1, arg2, arg3) {
ready(function() {
const eventArgs = processEventArgs(arg1, arg2, arg3)
@@ -752,6 +1273,16 @@ var htmx = (function() {
return b ? arg2 : arg3
}
+ /**
+ * Removes an event listener from an element
+ *
+ * @see https://htmx.org/api/#off
+ *
+ * @param {EventTarget|string} arg1 the element to remove the listener from | the event name to remove the listener from
+ * @param {string|EventListener} arg2 the event name to remove the listener from | the listener to remove
+ * @param {EventListener} [arg3] the listener to remove
+ * @returns {EventListener}
+ */
function removeEventListenerImpl(arg1, arg2, arg3) {
ready(function() {
const eventArgs = processEventArgs(arg1, arg2, arg3)
@@ -765,6 +1296,11 @@ var htmx = (function() {
//= ===================================================================
const DUMMY_ELT = getDocument().createElement('output') // dummy element for bad selectors
+ /**
+ * @param {Element} elt
+ * @param {string} attrName
+ * @returns {(Node|Window)[]}
+ */
function findAttributeTargets(elt, attrName) {
const attrTarget = getClosestAttributeValue(elt, attrName)
if (attrTarget) {
@@ -782,12 +1318,21 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @param {string} attribute
+ * @returns {Element|null}
+ */
function findThisElement(elt, attribute) {
- return getClosestMatch(elt, function(elt) {
- return getAttributeValue(elt, attribute) != null
- })
+ return asElement(getClosestMatch(elt, function(elt) {
+ return getAttributeValue(asElement(elt), attribute) != null
+ }))
}
+ /**
+ * @param {Element} elt
+ * @returns {Node|Window|null}
+ */
function getTarget(elt) {
const targetStr = getClosestAttributeValue(elt, 'hx-target')
if (targetStr) {
@@ -806,6 +1351,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {string} name
+ * @returns {boolean}
+ */
function shouldSettleAttribute(name) {
const attributesToSettle = htmx.config.attributesToSettle
for (let i = 0; i < attributesToSettle.length; i++) {
@@ -816,6 +1365,10 @@ var htmx = (function() {
return false
}
+ /**
+ * @param {Element} mergeTo
+ * @param {Element} mergeFrom
+ */
function cloneAttributes(mergeTo, mergeFrom) {
forEach(mergeTo.attributes, function(attr) {
if (!mergeFrom.hasAttribute(attr.name) && shouldSettleAttribute(attr.name)) {
@@ -829,6 +1382,11 @@ var htmx = (function() {
})
}
+ /**
+ * @param {HtmxSwapStyle} swapStyle
+ * @param {Element} target
+ * @returns {boolean}
+ */
function isInlineSwap(swapStyle, target) {
const extensions = getExtensions(target)
for (let i = 0; i < extensions.length; i++) {
@@ -845,14 +1403,14 @@ var htmx = (function() {
}
/**
- *
* @param {string} oobValue
* @param {Element} oobElement
- * @param {*} settleInfo
+ * @param {HtmxSettleInfo} settleInfo
* @returns
*/
function oobSwap(oobValue, oobElement, settleInfo) {
let selector = '#' + getRawAttribute(oobElement, 'id')
+ /** @type HtmxSwapStyle */
let swapStyle = 'outerHTML'
if (oobValue === 'true') {
// do nothing
@@ -873,7 +1431,7 @@ var htmx = (function() {
fragment = getDocument().createDocumentFragment()
fragment.appendChild(oobElementClone)
if (!isInlineSwap(swapStyle, target)) {
- fragment = oobElementClone // if this is not an inline swap, we use the content of the node, not the node itself
+ fragment = asParentNode(oobElementClone) // if this is not an inline swap, we use the content of the node, not the node itself
}
const beforeSwapDetails = { shouldSwap: true, target, fragment }
@@ -896,6 +1454,9 @@ var htmx = (function() {
return oobValue
}
+ /**
+ * @param {DocumentFragment} fragment
+ */
function handlePreservedElements(fragment) {
forEach(findAll(fragment, '[hx-preserve], [data-hx-preserve]'), function(preservedElt) {
const id = getAttributeValue(preservedElt, 'id')
@@ -906,14 +1467,20 @@ var htmx = (function() {
})
}
+ /**
+ * @param {Node} parentNode
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function handleAttributes(parentNode, fragment, settleInfo) {
forEach(fragment.querySelectorAll('[id]'), function(newNode) {
const id = getRawAttribute(newNode, 'id')
if (id && id.length > 0) {
const normalizedId = id.replace("'", "\\'")
const normalizedTag = newNode.tagName.replace(':', '\\:')
- const oldNode = parentNode.querySelector(normalizedTag + "[id='" + normalizedId + "']")
- if (oldNode && oldNode !== parentNode) {
+ const parentElt = asParentNode(parentNode)
+ const oldNode = parentElt && parentElt.querySelector(normalizedTag + "[id='" + normalizedId + "']")
+ if (oldNode && oldNode !== parentElt) {
const newAttributes = newNode.cloneNode()
cloneAttributes(newNode, oldNode)
settleInfo.tasks.push(function() {
@@ -924,28 +1491,41 @@ var htmx = (function() {
})
}
+ /**
+ * @param {Node} child
+ * @returns {HtmxSettleTask}
+ */
function makeAjaxLoadTask(child) {
return function() {
removeClassFromElement(child, htmx.config.addedClass)
- processNode(child)
- processFocus(child)
+ processNode(asElement(child))
+ processFocus(asParentNode(child))
triggerEvent(child, 'htmx:load')
}
}
+ /**
+ * @param {ParentNode} child
+ */
function processFocus(child) {
const autofocus = '[autofocus]'
- const autoFocusedElt = matches(child, autofocus) ? child : child.querySelector(autofocus)
+ const autoFocusedElt = asHtmlElement(matches(child, autofocus) ? child : child.querySelector(autofocus))
if (autoFocusedElt != null) {
autoFocusedElt.focus()
}
}
+ /**
+ * @param {Node} parentNode
+ * @param {Node} insertBefore
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function insertNodesBefore(parentNode, insertBefore, fragment, settleInfo) {
handleAttributes(parentNode, fragment, settleInfo)
while (fragment.childNodes.length > 0) {
const child = fragment.firstChild
- addClassToElement(child, htmx.config.addedClass)
+ addClassToElement(asElement(child), htmx.config.addedClass)
parentNode.insertBefore(child, insertBefore)
if (child.nodeType !== Node.TEXT_NODE && child.nodeType !== Node.COMMENT_NODE) {
settleInfo.tasks.push(makeAjaxLoadTask(child))
@@ -953,8 +1533,13 @@ var htmx = (function() {
}
}
- // based on https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0,
- // derived from Java's string hashcode implementation
+ /**
+ * based on https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0,
+ * derived from Java's string hashcode implementation
+ * @param {string} string
+ * @param {number} hash
+ * @returns {number}
+ */
function stringHash(string, hash) {
let char = 0
while (char < string.length) {
@@ -963,6 +1548,10 @@ var htmx = (function() {
return hash
}
+ /**
+ * @param {Element} elt
+ * @returns {number}
+ */
function attributeHash(elt) {
let hash = 0
// IE fix
@@ -978,17 +1567,23 @@ var htmx = (function() {
return hash
}
+ /**
+ * @param {EventTarget} elt
+ */
function deInitOnHandlers(elt) {
const internalData = getInternalData(elt)
if (internalData.onHandlers) {
for (let i = 0; i < internalData.onHandlers.length; i++) {
const handlerInfo = internalData.onHandlers[i]
- elt.removeEventListener(handlerInfo.event, handlerInfo.listener)
+ removeEventListenerImpl(elt, handlerInfo.event, handlerInfo.listener)
}
delete internalData.onHandlers
}
}
+ /**
+ * @param {Node} element
+ */
function deInitNode(element) {
const internalData = getInternalData(element)
if (internalData.timeout) {
@@ -997,7 +1592,7 @@ var htmx = (function() {
if (internalData.listenerInfos) {
forEach(internalData.listenerInfos, function(info) {
if (info.on) {
- info.on.removeEventListener(info.trigger, info.listener)
+ removeEventListenerImpl(info.on, info.trigger, info.listener)
}
})
}
@@ -1005,16 +1600,27 @@ var htmx = (function() {
forEach(Object.keys(internalData), function(key) { delete internalData[key] })
}
+ /**
+ * @param {Node} element
+ */
function cleanUpElement(element) {
triggerEvent(element, 'htmx:beforeCleanupElement')
deInitNode(element)
+ // @ts-ignore IE11 code
+ // noinspection JSUnresolvedReference
if (element.children) { // IE
+ // @ts-ignore
forEach(element.children, function(child) { cleanUpElement(child) })
}
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapOuterHTML(target, fragment, settleInfo) {
- // @type {HTMLElement}
+ /** @type {Node} */
let newElt
const eltBeforeNewContent = target.previousSibling
insertNodesBefore(parentElt(target), target, fragment, settleInfo)
@@ -1025,35 +1631,70 @@ var htmx = (function() {
}
settleInfo.elts = settleInfo.elts.filter(function(e) { return e !== target })
while (newElt && newElt !== target) {
- if (newElt.nodeType === Node.ELEMENT_NODE) {
+ if (newElt instanceof Element) {
settleInfo.elts.push(newElt)
+ newElt = newElt.nextElementSibling
+ } else {
+ newElt = null
}
- newElt = newElt.nextElementSibling
}
cleanUpElement(target)
- target.remove()
+ if (target instanceof Element) {
+ target.remove()
+ } else {
+ target.parentNode.removeChild(target)
+ }
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapAfterBegin(target, fragment, settleInfo) {
return insertNodesBefore(target, target.firstChild, fragment, settleInfo)
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapBeforeBegin(target, fragment, settleInfo) {
return insertNodesBefore(parentElt(target), target, fragment, settleInfo)
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapBeforeEnd(target, fragment, settleInfo) {
return insertNodesBefore(target, null, fragment, settleInfo)
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapAfterEnd(target, fragment, settleInfo) {
return insertNodesBefore(parentElt(target), target.nextSibling, fragment, settleInfo)
}
- function swapDelete(target, fragment, settleInfo) {
+
+ /**
+ * @param {Node} target
+ */
+ function swapDelete(target) {
cleanUpElement(target)
return parentElt(target).removeChild(target)
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapInnerHTML(target, fragment, settleInfo) {
const firstChild = target.firstChild
insertNodesBefore(target, firstChild, fragment, settleInfo)
@@ -1068,11 +1709,11 @@ var htmx = (function() {
}
/**
- * @param {string} swapStyle
- * @param {HTMLElement} elt
- * @param {HTMLElement} target
- * @param {Node} fragment
- * @param {{ tasks: (() => void)[]; }} settleInfo
+ * @param {HtmxSwapStyle} swapStyle
+ * @param {Element} elt
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
*/
function swapWithStyle(swapStyle, elt, target, fragment, settleInfo) {
switch (swapStyle) {
@@ -1094,7 +1735,7 @@ var htmx = (function() {
swapAfterEnd(target, fragment, settleInfo)
return
case 'delete':
- swapDelete(target, fragment, settleInfo)
+ swapDelete(target)
return
default:
var extensions = getExtensions(elt)
@@ -1126,37 +1767,31 @@ var htmx = (function() {
}
}
+ /**
+ * @param {DocumentFragment} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function findAndSwapOobElements(fragment, settleInfo) {
forEach(findAll(fragment, '[hx-swap-oob], [data-hx-swap-oob]'), function(oobElement) {
- const oobValue = getAttributeValue(oobElement, 'hx-swap-oob')
- if (oobValue != null) {
- oobSwap(oobValue, oobElement, settleInfo)
+ if (htmx.config.allowNestedOobSwaps || oobElement.parentElement === null) {
+ const oobValue = getAttributeValue(oobElement, 'hx-swap-oob')
+ if (oobValue != null) {
+ oobSwap(oobValue, oobElement, settleInfo)
+ }
+ } else {
+ oobElement.removeAttribute('hx-swap-oob')
+ oobElement.removeAttribute('data-hx-swap-oob')
}
})
}
/**
- * @callback swapCallback
- */
-
- /**
- * @typedef {Object} SwapOptions
- * @property {?string} select
- * @property {?string} selectOOB
- * @property {?*} eventInfo
- * @property {?*} anchor
- * @property {?HTMLElement} contextElement
- * @property {?swapCallback} afterSwapCallback
- * @property {?swapCallback} afterSettleCallback
- */
-
- /**
* Implements complete swapping pipeline, including: focus and selection preservation,
* title updates, scroll, OOB swapping, normal swapping and settling
* @param {string|Element} target
* @param {string} content
- * @param {import("./htmx").HtmxSwapSpecification} swapSpec
- * @param {SwapOptions} swapOptions
+ * @param {HtmxSwapSpecification} swapSpec
+ * @param {SwapOptions} [swapOptions]
*/
function swap(target, content, swapSpec, swapOptions) {
if (!swapOptions) {
@@ -1181,51 +1816,57 @@ var htmx = (function() {
}
const settleInfo = makeSettleInfo(target)
- let fragment = makeFragment(content)
-
- settleInfo.title = fragment.title
-
- // select-oob swaps
- if (swapOptions.selectOOB) {
- const oobSelectValues = swapOptions.selectOOB.split(',')
- for (let i = 0; i < oobSelectValues.length; i++) {
- const oobSelectValue = oobSelectValues[i].split(':', 2)
- let id = oobSelectValue[0].trim()
- if (id.indexOf('#') === 0) {
- id = id.substring(1)
- }
- const oobValue = oobSelectValue[1] || 'true'
- const oobElement = fragment.querySelector('#' + id)
- if (oobElement) {
- oobSwap(oobValue, oobElement, settleInfo)
+ // For text content swaps, don't parse the response as HTML, just insert it
+ if (swapSpec.swapStyle === 'textContent') {
+ target.textContent = content
+ // Otherwise, make the fragment and process it
+ } else {
+ let fragment = makeFragment(content)
+
+ settleInfo.title = fragment.title
+
+ // select-oob swaps
+ if (swapOptions.selectOOB) {
+ const oobSelectValues = swapOptions.selectOOB.split(',')
+ for (let i = 0; i < oobSelectValues.length; i++) {
+ const oobSelectValue = oobSelectValues[i].split(':', 2)
+ let id = oobSelectValue[0].trim()
+ if (id.indexOf('#') === 0) {
+ id = id.substring(1)
+ }
+ const oobValue = oobSelectValue[1] || 'true'
+ const oobElement = fragment.querySelector('#' + id)
+ if (oobElement) {
+ oobSwap(oobValue, oobElement, settleInfo)
+ }
}
}
- }
- // oob swaps
- findAndSwapOobElements(fragment, settleInfo)
- forEach(findAll(fragment, 'template'), function(template) {
- findAndSwapOobElements(template.content, settleInfo)
- if (template.content.childElementCount === 0) {
+ // oob swaps
+ findAndSwapOobElements(fragment, settleInfo)
+ forEach(findAll(fragment, 'template'), /** @param {HTMLTemplateElement} template */function(template) {
+ findAndSwapOobElements(template.content, settleInfo)
+ if (template.content.childElementCount === 0) {
// Avoid polluting the DOM with empty templates that were only used to encapsulate oob swap
- template.remove()
- }
- })
-
- // normal swap
- if (swapOptions.select) {
- const newFragment = getDocument().createDocumentFragment()
- forEach(fragment.querySelectorAll(swapOptions.select), function(node) {
- newFragment.appendChild(node)
+ template.remove()
+ }
})
- fragment = newFragment
+
+ // normal swap
+ if (swapOptions.select) {
+ const newFragment = getDocument().createDocumentFragment()
+ forEach(fragment.querySelectorAll(swapOptions.select), function(node) {
+ newFragment.appendChild(node)
+ })
+ fragment = newFragment
+ }
+ handlePreservedElements(fragment)
+ swapWithStyle(swapSpec.swapStyle, swapOptions.contextElement, target, fragment, settleInfo)
}
- handlePreservedElements(fragment)
- swapWithStyle(swapSpec.swapStyle, swapOptions.contextElement, target, fragment, settleInfo)
// apply saved focus and selection information to swapped content
if (selectionInfo.elt &&
- !bodyContains(selectionInfo.elt) &&
- getRawAttribute(selectionInfo.elt, 'id')) {
+ !bodyContains(selectionInfo.elt) &&
+ getRawAttribute(selectionInfo.elt, 'id')) {
const newActiveElt = document.getElementById(getRawAttribute(selectionInfo.elt, 'id'))
const focusOptions = { preventScroll: swapSpec.focusScroll !== undefined ? !swapSpec.focusScroll : !htmx.config.defaultFocusScroll }
if (newActiveElt) {
@@ -1271,7 +1912,7 @@ var htmx = (function() {
})
if (swapOptions.anchor) {
- const anchorTarget = resolveTarget('#' + swapOptions.anchor)
+ const anchorTarget = asElement(resolveTarget('#' + swapOptions.anchor))
if (anchorTarget) {
anchorTarget.scrollIntoView({ block: 'start', behavior: 'auto' })
}
@@ -1284,12 +1925,17 @@ var htmx = (function() {
}
if (swapSpec.settleDelay > 0) {
- setTimeout(doSettle, swapSpec.settleDelay)
+ getWindow().setTimeout(doSettle, swapSpec.settleDelay)
} else {
doSettle()
}
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @param {string} header
+ * @param {EventTarget} elt
+ */
function handleTriggerHeader(xhr, header, elt) {
const triggerBody = xhr.getResponseHeader(header)
if (triggerBody.indexOf('{') === 0) {
@@ -1319,7 +1965,13 @@ var htmx = (function() {
const NOT_WHITESPACE = /[^\s]/
const COMBINED_SELECTOR_START = /[{(]/
const COMBINED_SELECTOR_END = /[})]/
+
+ /**
+ * @param {string} str
+ * @returns {string[]}
+ */
function tokenizeString(str) {
+ /** @type string[] */
const tokens = []
let position = 0
while (position < str.length) {
@@ -1349,6 +2001,12 @@ var htmx = (function() {
return tokens
}
+ /**
+ * @param {string} token
+ * @param {string|null} last
+ * @param {string} paramName
+ * @returns {boolean}
+ */
function isPossibleRelativeReference(token, last, paramName) {
return SYMBOL_START.exec(token.charAt(0)) &&
token !== 'true' &&
@@ -1358,6 +2016,12 @@ var htmx = (function() {
last !== '.'
}
+ /**
+ * @param {EventTarget|string} elt
+ * @param {string[]} tokens
+ * @param {string} paramName
+ * @returns {ConditionalFunction|null}
+ */
function maybeGenerateConditional(elt, tokens, paramName) {
if (tokens[0] === '[') {
tokens.shift()
@@ -1366,6 +2030,7 @@ var htmx = (function() {
let last = null
while (tokens.length > 0) {
const token = tokens[0]
+ // @ts-ignore For some reason tsc doesn't understand the shift call, and thinks we're comparing the same value here, i.e. '[' vs ']'
if (token === ']') {
bracketCount--
if (bracketCount === 0) {
@@ -1399,6 +2064,11 @@ var htmx = (function() {
}
}
+ /**
+ * @param {string[]} tokens
+ * @param {RegExp} match
+ * @returns {string}
+ */
function consumeUntil(tokens, match) {
let result = ''
while (tokens.length > 0 && !match.test(tokens[0])) {
@@ -1407,6 +2077,10 @@ var htmx = (function() {
return result
}
+ /**
+ * @param {string[]} tokens
+ * @returns {string}
+ */
function consumeCSSSelector(tokens) {
let result
if (tokens.length > 0 && COMBINED_SELECTOR_START.test(tokens[0])) {
@@ -1422,12 +2096,13 @@ var htmx = (function() {
const INPUT_SELECTOR = 'input, textarea, select'
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {string} explicitTrigger
- * @param {cache} cache for trigger specs
- * @returns {import("./htmx").HtmxTriggerSpecification[]}
+ * @param {Object} cache for trigger specs
+ * @returns {HtmxTriggerSpecification[]}
*/
function parseAndCacheTrigger(elt, explicitTrigger, cache) {
+ /** @type HtmxTriggerSpecification[] */
const triggerSpecs = []
const tokens = tokenizeString(explicitTrigger)
do {
@@ -1436,6 +2111,7 @@ var htmx = (function() {
const trigger = consumeUntil(tokens, /[,\[\s]/)
if (trigger !== '') {
if (trigger === 'every') {
+ /** @type HtmxTriggerSpecification */
const every = { trigger: 'every' }
consumeUntil(tokens, NOT_WHITESPACE)
every.pollInterval = parseInterval(consumeUntil(tokens, /[,\[\s]/))
@@ -1446,6 +2122,7 @@ var htmx = (function() {
}
triggerSpecs.push(every)
} else {
+ /** @type HtmxTriggerSpecification */
const triggerSpec = { trigger }
var eventFilter = maybeGenerateConditional(elt, tokens, 'event')
if (eventFilter) {
@@ -1513,8 +2190,8 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
- * @returns {import("./htmx").HtmxTriggerSpecification[]}
+ * @param {Element} elt
+ * @returns {HtmxTriggerSpecification[]}
*/
function getTriggerSpecs(elt) {
const explicitTrigger = getAttributeValue(elt, 'hx-trigger')
@@ -1537,13 +2214,21 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ */
function cancelPolling(elt) {
getInternalData(elt).cancelled = true
}
+ /**
+ * @param {Element} elt
+ * @param {TriggerHandler} handler
+ * @param {HtmxTriggerSpecification} spec
+ */
function processPolling(elt, handler, spec) {
const nodeData = getInternalData(elt)
- nodeData.timeout = setTimeout(function() {
+ nodeData.timeout = getWindow().setTimeout(function() {
if (bodyContains(elt) && nodeData.cancelled !== true) {
if (!maybeFilterEvent(spec, elt, makeEvent('hx:poll:trigger', {
triggerSpec: spec,
@@ -1556,14 +2241,23 @@ var htmx = (function() {
}, spec.pollInterval)
}
+ /**
+ * @param {HTMLAnchorElement} elt
+ * @returns {boolean}
+ */
function isLocalLink(elt) {
return location.hostname === elt.hostname &&
getRawAttribute(elt, 'href') &&
getRawAttribute(elt, 'href').indexOf('#') !== 0
}
+ /**
+ * @param {Element} elt
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {HtmxTriggerSpecification[]} triggerSpecs
+ */
function boostElement(elt, nodeData, triggerSpecs) {
- if ((elt.tagName === 'A' && isLocalLink(elt) && (elt.target === '' || elt.target === '_self')) || elt.tagName === 'FORM') {
+ if ((elt instanceof HTMLAnchorElement && isLocalLink(elt) && (elt.target === '' || elt.target === '_self')) || elt.tagName === 'FORM') {
nodeData.boosted = true
let verb, path
if (elt.tagName === 'A') {
@@ -1577,7 +2271,8 @@ var htmx = (function() {
path = getRawAttribute(elt, 'action')
}
triggerSpecs.forEach(function(triggerSpec) {
- addEventListener(elt, function(elt, evt) {
+ addEventListener(elt, function(node, evt) {
+ const elt = asElement(node)
if (closest(elt, htmx.config.disableSelector)) {
cleanUpElement(elt)
return
@@ -1589,12 +2284,15 @@ var htmx = (function() {
}
/**
- *
* @param {Event} evt
- * @param {HTMLElement} elt
- * @returns
+ * @param {Node} node
+ * @returns {boolean}
*/
- function shouldCancel(evt, elt) {
+ function shouldCancel(evt, node) {
+ const elt = asElement(node)
+ if (!elt) {
+ return false
+ }
if (evt.type === 'submit' || evt.type === 'click') {
if (elt.tagName === 'FORM') {
return true
@@ -1602,7 +2300,7 @@ var htmx = (function() {
if (matches(elt, 'input[type="submit"], button') && closest(elt, 'form') !== null) {
return true
}
- if (elt.tagName === 'A' && elt.href &&
+ if (elt instanceof HTMLAnchorElement && elt.href &&
(elt.getAttribute('href') === '#' || elt.getAttribute('href').indexOf('#') !== 0)) {
return true
}
@@ -1610,25 +2308,47 @@ var htmx = (function() {
return false
}
+ /**
+ * @param {Node} elt
+ * @param {Event|MouseEvent|KeyboardEvent|TouchEvent} evt
+ * @returns {boolean}
+ */
function ignoreBoostedAnchorCtrlClick(elt, evt) {
- return getInternalData(elt).boosted && elt.tagName === 'A' && evt.type === 'click' && (evt.ctrlKey || evt.metaKey)
+ return getInternalData(elt).boosted && elt instanceof HTMLAnchorElement && evt.type === 'click' &&
+ // @ts-ignore this will resolve to undefined for events that don't define those properties, which is fine
+ (evt.ctrlKey || evt.metaKey)
}
+ /**
+ * @param {HtmxTriggerSpecification} triggerSpec
+ * @param {Node} elt
+ * @param {Event} evt
+ * @returns {boolean}
+ */
function maybeFilterEvent(triggerSpec, elt, evt) {
const eventFilter = triggerSpec.eventFilter
if (eventFilter) {
try {
return eventFilter.call(elt, evt) !== true
} catch (e) {
- triggerErrorEvent(getDocument().body, 'htmx:eventFilter:error', { error: e, source: eventFilter.source })
+ const source = eventFilter.source
+ triggerErrorEvent(getDocument().body, 'htmx:eventFilter:error', { error: e, source })
return true
}
}
return false
}
+ /**
+ * @param {Node} elt
+ * @param {TriggerHandler} handler
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {HtmxTriggerSpecification} triggerSpec
+ * @param {boolean} [explicitCancel]
+ */
function addEventListener(elt, handler, nodeData, triggerSpec, explicitCancel) {
const elementData = getInternalData(elt)
+ /** @type {(Node|Window)[]} */
let eltsToListenOn
if (triggerSpec.from) {
eltsToListenOn = querySelectorAllExt(elt, triggerSpec.from)
@@ -1639,10 +2359,12 @@ var htmx = (function() {
if (triggerSpec.changed) {
eltsToListenOn.forEach(function(eltToListenOn) {
const eltToListenOnData = getInternalData(eltToListenOn)
+ // @ts-ignore value will be undefined for non-input elements, which is fine
eltToListenOnData.lastValue = eltToListenOn.value
})
}
forEach(eltsToListenOn, function(eltToListenOn) {
+ /** @type EventListener */
const eventListener = function(evt) {
if (!bodyContains(elt)) {
eltToListenOn.removeEventListener(triggerSpec.trigger, eventListener)
@@ -1668,7 +2390,7 @@ var htmx = (function() {
evt.stopPropagation()
}
if (triggerSpec.target && evt.target) {
- if (!matches(evt.target, triggerSpec.target)) {
+ if (!matches(asElement(evt.target), triggerSpec.target)) {
return
}
}
@@ -1681,10 +2403,12 @@ var htmx = (function() {
}
if (triggerSpec.changed) {
const eltToListenOnData = getInternalData(eltToListenOn)
- if (eltToListenOnData.lastValue === eltToListenOn.value) {
+ // @ts-ignore value will be undefined for non-input elements, which is fine
+ const value = eltToListenOn.value
+ if (eltToListenOnData.lastValue === value) {
return
}
- eltToListenOnData.lastValue = eltToListenOn.value
+ eltToListenOnData.lastValue = value
}
if (elementData.delayed) {
clearTimeout(elementData.delayed)
@@ -1696,12 +2420,12 @@ var htmx = (function() {
if (triggerSpec.throttle > 0) {
if (!elementData.throttle) {
handler(elt, evt)
- elementData.throttle = setTimeout(function() {
+ elementData.throttle = getWindow().setTimeout(function() {
elementData.throttle = null
}, triggerSpec.throttle)
}
} else if (triggerSpec.delay > 0) {
- elementData.delayed = setTimeout(function() { handler(elt, evt) }, triggerSpec.delay)
+ elementData.delayed = getWindow().setTimeout(function() { handler(elt, evt) }, triggerSpec.delay)
} else {
triggerEvent(elt, 'htmx:trigger')
handler(elt, evt)
@@ -1739,6 +2463,9 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ */
function maybeReveal(elt) {
if (!hasAttribute(elt, 'data-hx-revealed') && isScrolledIntoView(elt)) {
elt.setAttribute('data-hx-revealed', 'true')
@@ -1747,13 +2474,19 @@ var htmx = (function() {
triggerEvent(elt, 'revealed')
} else {
// if the node isn't initialized, wait for it before triggering the request
- elt.addEventListener('htmx:afterProcessNode', function(evt) { triggerEvent(elt, 'revealed') }, { once: true })
+ elt.addEventListener('htmx:afterProcessNode', function() { triggerEvent(elt, 'revealed') }, { once: true })
}
}
}
//= ===================================================================
+ /**
+ * @param {Element} elt
+ * @param {TriggerHandler} handler
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {number} delay
+ */
function loadImmediately(elt, handler, nodeData, delay) {
const load = function() {
if (!nodeData.loaded) {
@@ -1762,12 +2495,18 @@ var htmx = (function() {
}
}
if (delay > 0) {
- setTimeout(load, delay)
+ getWindow().setTimeout(load, delay)
} else {
load()
}
}
+ /**
+ * @param {Element} elt
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {HtmxTriggerSpecification[]} triggerSpecs
+ * @returns {boolean}
+ */
function processVerbs(elt, nodeData, triggerSpecs) {
let explicitAction = false
forEach(VERBS, function(verb) {
@@ -1777,7 +2516,8 @@ var htmx = (function() {
nodeData.path = path
nodeData.verb = verb
triggerSpecs.forEach(function(triggerSpec) {
- addTriggerHandler(elt, triggerSpec, nodeData, function(elt, evt) {
+ addTriggerHandler(elt, triggerSpec, nodeData, function(node, evt) {
+ const elt = asElement(node)
if (closest(elt, htmx.config.disableSelector)) {
cleanUpElement(elt)
return
@@ -1790,11 +2530,23 @@ var htmx = (function() {
return explicitAction
}
+ /**
+ * @callback TriggerHandler
+ * @param {Node} elt
+ * @param {Event} [evt]
+ */
+
+ /**
+ * @param {Node} elt
+ * @param {HtmxTriggerSpecification} triggerSpec
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {TriggerHandler} handler
+ */
function addTriggerHandler(elt, triggerSpec, nodeData, handler) {
if (triggerSpec.trigger === 'revealed') {
initScrollHandler()
addEventListener(elt, handler, nodeData, triggerSpec)
- maybeReveal(elt)
+ maybeReveal(asElement(elt))
} else if (triggerSpec.trigger === 'intersect') {
const observerOptions = {}
if (triggerSpec.root) {
@@ -1812,21 +2564,29 @@ var htmx = (function() {
}
}
}, observerOptions)
- observer.observe(elt)
- addEventListener(elt, handler, nodeData, triggerSpec)
+ observer.observe(asElement(elt))
+ addEventListener(asElement(elt), handler, nodeData, triggerSpec)
} else if (triggerSpec.trigger === 'load') {
if (!maybeFilterEvent(triggerSpec, elt, makeEvent('load', { elt }))) {
- loadImmediately(elt, handler, nodeData, triggerSpec.delay)
+ loadImmediately(asElement(elt), handler, nodeData, triggerSpec.delay)
}
} else if (triggerSpec.pollInterval > 0) {
nodeData.polling = true
- processPolling(elt, handler, triggerSpec)
+ processPolling(asElement(elt), handler, triggerSpec)
} else {
addEventListener(elt, handler, nodeData, triggerSpec)
}
}
- function shouldProcessHxOn(elt) {
+ /**
+ * @param {Node} node
+ * @returns {boolean}
+ */
+ function shouldProcessHxOn(node) {
+ const elt = asElement(node)
+ if (!elt) {
+ return false
+ }
const attributes = elt.attributes
for (let j = 0; j < attributes.length; j++) {
const attrName = attributes[j].name
@@ -1838,22 +2598,31 @@ var htmx = (function() {
return false
}
+ /**
+ * @param {Node} elt
+ * @returns {Element[]}
+ */
function findHxOnWildcardElements(elt) {
let node = null
+ /** @type {Element[]} */
const elements = []
if (!(elt instanceof ShadowRoot)) {
if (shouldProcessHxOn(elt)) {
- elements.push(elt)
+ elements.push(asElement(elt))
}
const iter = document.evaluate('.//*[@*[ starts-with(name(), "hx-on:") or starts-with(name(), "data-hx-on:") or' +
' starts-with(name(), "hx-on-") or starts-with(name(), "data-hx-on-") ]]', elt)
- while (node = iter.iterateNext()) elements.push(node)
+ while (node = iter.iterateNext()) elements.push(asElement(node))
}
return elements
}
+ /**
+ * @param {Element} elt
+ * @returns {NodeListOf<Element>|[]}
+ */
function findElementsToProcess(elt) {
if (elt.querySelectorAll) {
const boostedSelector = ', [hx-boost] a, [data-hx-boost] a, a[hx-boost], a[data-hx-boost]'
@@ -1865,23 +2634,35 @@ var htmx = (function() {
}
}
- // Handle submit buttons/inputs that have the form attribute set
- // see https://developer.mozilla.org/docs/Web/HTML/Element/button
+ /**
+ * Handle submit buttons/inputs that have the form attribute set
+ * see https://developer.mozilla.org/docs/Web/HTML/Element/button
+ * @param {Event} evt
+ */
function maybeSetLastButtonClicked(evt) {
- const elt = closest(evt.target, "button, input[type='submit']")
+ const elt = /** @type {HTMLButtonElement|HTMLInputElement} */ (closest(asElement(evt.target), "button, input[type='submit']"))
const internalData = getRelatedFormData(evt)
if (internalData) {
internalData.lastButtonClicked = elt
}
- };
+ }
+
+ /**
+ * @param {Event} evt
+ */
function maybeUnsetLastButtonClicked(evt) {
const internalData = getRelatedFormData(evt)
if (internalData) {
internalData.lastButtonClicked = null
}
}
+
+ /**
+ * @param {Event} evt
+ * @returns {HtmxNodeInternalData|undefined}
+ */
function getRelatedFormData(evt) {
- const elt = closest(evt.target, "button, input[type='submit']")
+ const elt = closest(asElement(evt.target), "button, input[type='submit']")
if (!elt) {
return
}
@@ -1891,6 +2672,10 @@ var htmx = (function() {
}
return getInternalData(form)
}
+
+ /**
+ * @param {EventTarget} elt
+ */
function initButtonTracking(elt) {
// need to handle both click and focus in:
// focusin - in case someone tabs in to a button and hits the space bar
@@ -1900,28 +2685,20 @@ var htmx = (function() {
elt.addEventListener('focusout', maybeUnsetLastButtonClicked)
}
- function countCurlies(line) {
- const tokens = tokenizeString(line)
- let netCurlies = 0
- for (let i = 0; i < tokens.length; i++) {
- const token = tokens[i]
- if (token === '{') {
- netCurlies++
- } else if (token === '}') {
- netCurlies--
- }
- }
- return netCurlies
- }
-
+ /**
+ * @param {EventTarget} elt
+ * @param {string} eventName
+ * @param {string} code
+ */
function addHxOnEventHandler(elt, eventName, code) {
const nodeData = getInternalData(elt)
if (!Array.isArray(nodeData.onHandlers)) {
nodeData.onHandlers = []
}
let func
+ /** @type EventListener */
const listener = function(e) {
- return maybeEval(elt, function() {
+ maybeEval(elt, function() {
if (!func) {
func = new Function('event', code)
}
@@ -1932,6 +2709,9 @@ var htmx = (function() {
nodeData.onHandlers.push({ event: eventName, listener })
}
+ /**
+ * @param {Element} elt
+ */
function processHxOnWildcard(elt) {
// wipe any previous on handlers so that this function takes precedence
deInitOnHandlers(elt)
@@ -1959,6 +2739,9 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element|HTMLInputElement} elt
+ */
function initNode(elt) {
if (closest(elt, htmx.config.disableSelector)) {
cleanUpElement(elt)
@@ -1973,7 +2756,9 @@ var htmx = (function() {
triggerEvent(elt, 'htmx:beforeProcessNode')
+ // @ts-ignore value will be undefined for non-input elements, which is fine
if (elt.value) {
+ // @ts-ignore
nodeData.lastValue = elt.value
}
@@ -2002,6 +2787,13 @@ var htmx = (function() {
}
}
+ /**
+ * Processes new content, enabling htmx behavior. This can be useful if you have content that is added to the DOM outside of the normal htmx request cycle but still want htmx attributes to work.
+ *
+ * @see https://htmx.org/api/#process
+ *
+ * @param {Element|string} elt element to process
+ */
function processNode(elt) {
elt = resolveTarget(elt)
if (closest(elt, htmx.config.disableSelector)) {
@@ -2017,10 +2809,19 @@ var htmx = (function() {
// Event/Log Support
//= ===================================================================
+ /**
+ * @param {string} str
+ * @returns {string}
+ */
function kebabEventName(str) {
return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
}
+ /**
+ * @param {string} eventName
+ * @param {any} detail
+ * @returns {CustomEvent}
+ */
function makeEvent(eventName, detail) {
let evt
if (window.CustomEvent && typeof window.CustomEvent === 'function') {
@@ -2034,10 +2835,19 @@ var htmx = (function() {
return evt
}
+ /**
+ * @param {EventTarget|string} elt
+ * @param {string} eventName
+ * @param {any=} detail
+ */
function triggerErrorEvent(elt, eventName, detail) {
triggerEvent(elt, eventName, mergeObjects({ error: eventName }, detail))
}
+ /**
+ * @param {string} eventName
+ * @returns {boolean}
+ */
function ignoreEventForLogging(eventName) {
return eventName === 'htmx:afterProcessNode'
}
@@ -2047,8 +2857,8 @@ var htmx = (function() {
* executes the provided function using each of the active extensions. It should
* be called internally at every extendable execution point in htmx.
*
- * @param {HTMLElement} elt
- * @param {(extension:import("./htmx").HtmxExtension) => void} toDo
+ * @param {Element} elt
+ * @param {(extension:HtmxExtension) => void} toDo
* @returns void
*/
function withExtensions(elt, toDo) {
@@ -2069,6 +2879,16 @@ var htmx = (function() {
}
}
+ /**
+ * Triggers a given event on an element
+ *
+ * @see https://htmx.org/api/#trigger
+ *
+ * @param {EventTarget|string} elt the element to trigger the event on
+ * @param {string} eventName the name of the event to trigger
+ * @param {any=} detail details for the event
+ * @returns {boolean}
+ */
function triggerEvent(elt, eventName, detail) {
elt = resolveTarget(elt)
if (detail == null) {
@@ -2089,7 +2909,7 @@ var htmx = (function() {
const kebabedEvent = makeEvent(kebabName, event.detail)
eventResult = eventResult && elt.dispatchEvent(kebabedEvent)
}
- withExtensions(elt, function(extension) {
+ withExtensions(asElement(elt), function(extension) {
eventResult = eventResult && (extension.onEvent(eventName, event) !== false && !event.defaultPrevented)
})
return eventResult
@@ -2100,11 +2920,18 @@ var htmx = (function() {
//= ===================================================================
let currentPathForHistory = location.pathname + location.search
+ /**
+ * @returns {Element}
+ */
function getHistoryElement() {
const historyElt = getDocument().querySelector('[hx-history-elt],[data-hx-history-elt]')
return historyElt || getDocument().body
}
+ /**
+ * @param {string} url
+ * @param {Element} rootElt
+ */
function saveToHistoryCache(url, rootElt) {
if (!canAccessLocalStorage()) {
return
@@ -2131,6 +2958,7 @@ var htmx = (function() {
}
}
+ /** @type HtmxHistoryItem */
const newHistoryItem = { url, content: innerHTML, title, scroll }
triggerEvent(getDocument().body, 'htmx:historyItemCreated', { item: newHistoryItem, cache: historyCache })
@@ -2152,6 +2980,18 @@ var htmx = (function() {
}
}
+ /**
+ * @typedef {Object} HtmxHistoryItem
+ * @property {string} url
+ * @property {string} content
+ * @property {string} title
+ * @property {number} scroll
+ */
+
+ /**
+ * @param {string} url
+ * @returns {HtmxHistoryItem|null}
+ */
function getCachedHistory(url) {
if (!canAccessLocalStorage()) {
return null
@@ -2168,9 +3008,13 @@ var htmx = (function() {
return null
}
+ /**
+ * @param {Element} elt
+ * @returns {string}
+ */
function cleanInnerHtmlForHistory(elt) {
const className = htmx.config.requestClass
- const clone = elt.cloneNode(true)
+ const clone = /** @type Element */ (elt.cloneNode(true))
forEach(findAll(clone, '.' + className), function(child) {
removeClassFromElement(child, className)
})
@@ -2201,6 +3045,9 @@ var htmx = (function() {
if (htmx.config.historyEnabled) history.replaceState({ htmx: true }, getDocument().title, window.location.href)
}
+ /**
+ * @param {string} path
+ */
function pushUrlIntoHistory(path) {
// remove the cache buster parameter, if any
if (htmx.config.getCacheBusterParam) {
@@ -2215,17 +3062,26 @@ var htmx = (function() {
currentPathForHistory = path
}
+ /**
+ * @param {string} path
+ */
function replaceUrlInHistory(path) {
if (htmx.config.historyEnabled) history.replaceState({ htmx: true }, '', path)
currentPathForHistory = path
}
+ /**
+ * @param {HtmxSettleTask[]} tasks
+ */
function settleImmediately(tasks) {
forEach(tasks, function(task) {
- task.call()
+ task.call(undefined)
})
}
+ /**
+ * @param {string} path
+ */
function loadHistoryFromServer(path) {
const request = new XMLHttpRequest()
const details = { path, xhr: request }
@@ -2238,13 +3094,12 @@ var htmx = (function() {
if (this.status >= 200 && this.status < 400) {
triggerEvent(getDocument().body, 'htmx:historyCacheMissLoad', details)
const fragment = makeFragment(this.response)
- // @ts-ignore
+ /** @type ParentNode */
const content = fragment.querySelector('[hx-history-elt],[data-hx-history-elt]') || fragment
const historyElement = getHistoryElement()
const settleInfo = makeSettleInfo(historyElement)
handleTitle(fragment.title)
- // @ts-ignore
swapInnerHTML(historyElement, content, settleInfo)
settleImmediately(settleInfo.tasks)
currentPathForHistory = path
@@ -2256,6 +3111,9 @@ var htmx = (function() {
request.send()
}
+ /**
+ * @param {string} [path]
+ */
function restoreHistory(path) {
saveCurrentPageToHistory()
path = path || location.pathname + location.search
@@ -2267,14 +3125,15 @@ var htmx = (function() {
handleTitle(fragment.title)
swapInnerHTML(historyElement, fragment, settleInfo)
settleImmediately(settleInfo.tasks)
- setTimeout(function() {
+ getWindow().setTimeout(function() {
window.scrollTo(0, cached.scroll)
}, 0) // next 'tick', so browser has time to render layout
currentPathForHistory = path
triggerEvent(getDocument().body, 'htmx:historyRestore', { path, item: cached })
} else {
if (htmx.config.refreshOnHistoryMiss) {
- // @ts-ignore: optional parameter in reload() function throws error
+ // @ts-ignore: optional parameter in reload() function throws error
+ // noinspection JSUnresolvedReference
window.location.reload(true)
} else {
loadHistoryFromServer(path)
@@ -2282,8 +3141,12 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @returns {Element[]}
+ */
function addRequestIndicatorClasses(elt) {
- let indicators = findAttributeTargets(elt, 'hx-indicator')
+ let indicators = /** @type Element[] */ (findAttributeTargets(elt, 'hx-indicator'))
if (indicators == null) {
indicators = [elt]
}
@@ -2295,8 +3158,12 @@ var htmx = (function() {
return indicators
}
+ /**
+ * @param {Element} elt
+ * @returns {Element[]}
+ */
function disableElements(elt) {
- let disabledElts = findAttributeTargets(elt, 'hx-disabled-elt')
+ let disabledElts = /** @type Element[] */ (findAttributeTargets(elt, 'hx-disabled-elt'))
if (disabledElts == null) {
disabledElts = []
}
@@ -2308,6 +3175,10 @@ var htmx = (function() {
return disabledElts
}
+ /**
+ * @param {Element[]} indicators
+ * @param {Element[]} disabled
+ */
function removeRequestIndicators(indicators, disabled) {
forEach(indicators, function(ic) {
const internalData = getInternalData(ic)
@@ -2330,8 +3201,8 @@ var htmx = (function() {
//= ===================================================================
/**
- * @param {HTMLElement[]} processed
- * @param {HTMLElement} elt
+ * @param {Element[]} processed
+ * @param {Element} elt
* @returns {boolean}
*/
function haveSeenNode(processed, elt) {
@@ -2344,7 +3215,13 @@ var htmx = (function() {
return false
}
- function shouldInclude(elt) {
+ /**
+ * @param {Element} element
+ * @return {boolean}
+ */
+ function shouldInclude(element) {
+ // Cast to trick tsc, undefined values will work fine here
+ const elt = /** @type {HTMLInputElement} */ (element)
if (elt.name === '' || elt.name == null || elt.disabled || closest(elt, 'fieldset[disabled]')) {
return false
}
@@ -2359,7 +3236,7 @@ var htmx = (function() {
}
/** @param {string} name
- * @param {string|Array} value
+ * @param {string|Array|FormDataEntryValue} value
* @param {FormData} formData */
function addValueToFormData(name, value, formData) {
if (name != null && value != null) {
@@ -2388,10 +3265,10 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement[]} processed
+ * @param {Element[]} processed
* @param {FormData} formData
* @param {HtmxElementValidationError[]} errors
- * @param {HTMLElement|HTMLInputElement|HTMLFormElement} elt
+ * @param {Element|HTMLInputElement|HTMLSelectElement|HTMLFormElement} elt
* @param {boolean} validate
*/
function processInputValue(processed, formData, errors, elt, validate) {
@@ -2402,12 +3279,13 @@ var htmx = (function() {
}
if (shouldInclude(elt)) {
const name = getRawAttribute(elt, 'name')
+ // @ts-ignore value will be undefined for non-input elements, which is fine
let value = elt.value
- if (elt.multiple && elt.tagName === 'SELECT') {
- value = toArray(elt.querySelectorAll('option:checked')).map(function(e) { return e.value })
+ if (elt instanceof HTMLSelectElement && elt.multiple) {
+ value = toArray(elt.querySelectorAll('option:checked')).map(function(e) { return (/** @type HTMLOptionElement */(e)).value })
}
// include file inputs
- if (elt.files) {
+ if (elt instanceof HTMLInputElement && elt.files) {
value = toArray(elt.files)
}
addValueToFormData(name, value, formData)
@@ -2415,7 +3293,7 @@ var htmx = (function() {
validateElement(elt, errors)
}
}
- if (matches(elt, 'form')) {
+ if (elt instanceof HTMLFormElement) {
forEach(elt.elements, function(input) {
if (processed.indexOf(input) >= 0) {
// The input has already been processed and added to the values, but the FormData that will be
@@ -2436,15 +3314,12 @@ var htmx = (function() {
}
/**
- * @typedef {{elt: HTMLElement, message: string, validity: ValidityState}} HtmxElementValidationError
- */
-
- /**
*
- * @param {HTMLElement|HTMLObjectElement} element
+ * @param {Element} elt
* @param {HtmxElementValidationError[]} errors
*/
- function validateElement(element, errors) {
+ function validateElement(elt, errors) {
+ const element = /** @type {HTMLElement & ElementInternals} */ (elt)
if (element.willValidate) {
triggerEvent(element, 'htmx:validation:validate')
if (!element.checkValidity()) {
@@ -2471,12 +3346,12 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement|HTMLFormElement} elt
- * @param {string} verb
+ * @param {Element|HTMLFormElement} elt
+ * @param {HttpVerb} verb
* @returns {{errors: HtmxElementValidationError[], formData: FormData, values: Object}}
*/
function getInputValues(elt, verb) {
- /** @type HTMLElement[] */
+ /** @type Element[] */
const processed = []
const formData = new FormData()
const priorityFormData = new FormData()
@@ -2489,7 +3364,7 @@ var htmx = (function() {
// only validate when form is directly submitted and novalidate or formnovalidate are not set
// or if the element has an explicit hx-validate="true" on it
- let validate = (matches(elt, 'form') && elt.noValidate !== true) || getAttributeValue(elt, 'hx-validate') === 'true'
+ let validate = (elt instanceof HTMLFormElement && elt.noValidate !== true) || getAttributeValue(elt, 'hx-validate') === 'true'
if (internalData.lastButtonClicked) {
validate = validate && internalData.lastButtonClicked.formNoValidate !== true
}
@@ -2505,7 +3380,7 @@ var htmx = (function() {
// if a button or submit was clicked last, include its value
if (internalData.lastButtonClicked || elt.tagName === 'BUTTON' ||
(elt.tagName === 'INPUT' && getRawAttribute(elt, 'type') === 'submit')) {
- const button = internalData.lastButtonClicked || elt
+ const button = internalData.lastButtonClicked || (/** @type HTMLInputElement|HTMLButtonElement */(elt))
const name = getRawAttribute(button, 'name')
addValueToFormData(name, button.value, priorityFormData)
}
@@ -2513,10 +3388,10 @@ var htmx = (function() {
// include any explicit includes
const includes = findAttributeTargets(elt, 'hx-include')
forEach(includes, function(node) {
- processInputValue(processed, formData, errors, node, validate)
+ processInputValue(processed, formData, errors, asElement(node), validate)
// if a non-form is included, include any input values within it
if (!matches(node, 'form')) {
- forEach(node.querySelectorAll(INPUT_SELECTOR), function(descendant) {
+ forEach(asParentNode(node).querySelectorAll(INPUT_SELECTOR), function(descendant) {
processInputValue(processed, formData, errors, descendant, validate)
})
}
@@ -2564,12 +3439,13 @@ var htmx = (function() {
//= ===================================================================
/**
- * @param {HTMLElement} elt
- * @param {HTMLElement} target
+ * @param {Element} elt
+ * @param {Element} target
* @param {string} prompt
- * @returns {Object} // TODO: Define/Improve HtmxHeaderSpecification
+ * @returns {HtmxHeaderSpecification}
*/
function getHeaders(elt, target, prompt) {
+ /** @type HtmxHeaderSpecification */
const headers = {
'HX-Request': 'true',
'HX-Trigger': getRawAttribute(elt, 'id'),
@@ -2592,7 +3468,7 @@ var htmx = (function() {
* and returns a new object that only contains keys that are
* specified by the closest "hx-params" attribute
* @param {FormData} inputValues
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @returns {FormData}
*/
function filterValues(inputValues, elt) {
@@ -2623,19 +3499,22 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @return {boolean}
+ */
function isAnchorLink(elt) {
- return getRawAttribute(elt, 'href') && getRawAttribute(elt, 'href').indexOf('#') >= 0
+ return !!getRawAttribute(elt, 'href') && getRawAttribute(elt, 'href').indexOf('#') >= 0
}
/**
- *
- * @param {HTMLElement} elt
- * @param {import("./htmx").HtmxSwapStyle} swapInfoOverride
- * @returns {import("./htmx").HtmxSwapSpecification}
+ * @param {Element} elt
+ * @param {HtmxSwapStyle} [swapInfoOverride]
+ * @returns {HtmxSwapSpecification}
*/
function getSwapSpecification(elt, swapInfoOverride) {
const swapInfo = swapInfoOverride || getClosestAttributeValue(elt, 'hx-swap')
- /** @type import("./htmx").HtmxSwapSpecification */
+ /** @type HtmxSwapSpecification */
const swapSpec = {
swapStyle: getInternalData(elt).boosted ? 'innerHTML' : htmx.config.defaultSwapStyle,
swapDelay: htmx.config.defaultSwapDelay,
@@ -2662,6 +3541,7 @@ var htmx = (function() {
var splitSpec = scrollSpec.split(':')
const scrollVal = splitSpec.pop()
var selectorVal = splitSpec.length > 0 ? splitSpec.join(':') : null
+ // @ts-ignore
swapSpec.scroll = scrollVal
swapSpec.scrollTarget = selectorVal
} else if (value.indexOf('show:') === 0) {
@@ -2685,6 +3565,10 @@ var htmx = (function() {
return swapSpec
}
+ /**
+ * @param {Element} elt
+ * @return {boolean}
+ */
function usesFormData(elt) {
return getClosestAttributeValue(elt, 'hx-encoding') === 'multipart/form-data' ||
(matches(elt, 'form') && getRawAttribute(elt, 'enctype') === 'multipart/form-data')
@@ -2692,7 +3576,7 @@ var htmx = (function() {
/**
* @param {XMLHttpRequest} xhr
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {FormData} filteredParameters
* @returns {*|string|null}
*/
@@ -2717,19 +3601,23 @@ var htmx = (function() {
/**
*
* @param {Element} target
- * @returns {import("./htmx").HtmxSettleInfo}
+ * @returns {HtmxSettleInfo}
*/
function makeSettleInfo(target) {
return { tasks: [], elts: [target] }
}
+ /**
+ * @param {Element[]} content
+ * @param {HtmxSwapSpecification} swapSpec
+ */
function updateScrollState(content, swapSpec) {
const first = content[0]
const last = content[content.length - 1]
if (swapSpec.scroll) {
var target = null
if (swapSpec.scrollTarget) {
- target = querySelectorExt(first, swapSpec.scrollTarget)
+ target = asElement(querySelectorExt(first, swapSpec.scrollTarget))
}
if (swapSpec.scroll === 'top' && (first || target)) {
target = target || first
@@ -2747,21 +3635,23 @@ var htmx = (function() {
if (swapSpec.showTarget === 'window') {
targetStr = 'body'
}
- target = querySelectorExt(first, targetStr)
+ target = asElement(querySelectorExt(first, targetStr))
}
if (swapSpec.show === 'top' && (first || target)) {
target = target || first
+ // @ts-ignore For some reason tsc doesn't recognize "instant" as a valid option for now
target.scrollIntoView({ block: 'start', behavior: htmx.config.scrollBehavior })
}
if (swapSpec.show === 'bottom' && (last || target)) {
target = target || last
+ // @ts-ignore For some reason tsc doesn't recognize "instant" as a valid option for now
target.scrollIntoView({ block: 'end', behavior: htmx.config.scrollBehavior })
}
}
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {string} attr
* @param {boolean=} evalAsDefault
* @param {Object=} values
@@ -2805,9 +3695,15 @@ var htmx = (function() {
}
}
}
- return getValuesForElement(parentElt(elt), attr, evalAsDefault, values)
+ return getValuesForElement(asElement(parentElt(elt)), attr, evalAsDefault, values)
}
+ /**
+ * @param {EventTarget|string} elt
+ * @param {() => any} toEval
+ * @param {any=} defaultVal
+ * @returns {any}
+ */
function maybeEval(elt, toEval, defaultVal) {
if (htmx.config.allowEval) {
return toEval()
@@ -2818,7 +3714,7 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {*?} expressionVars
* @returns
*/
@@ -2827,7 +3723,7 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {*?} expressionVars
* @returns
*/
@@ -2836,13 +3732,18 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @returns {FormData}
*/
function getExpressionVars(elt) {
return formDataFromObject(mergeObjects(getHXVarsForElement(elt), getHXValsForElement(elt)))
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @param {string} header
+ * @param {string|null} headerValue
+ */
function safelySetHeaderValue(xhr, header, headerValue) {
if (headerValue !== null) {
try {
@@ -2855,6 +3756,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @return {string}
+ */
function getPathFromResponse(xhr) {
// NB: IE11 does not support this stuff
if (xhr.responseURL && typeof (URL) !== 'undefined') {
@@ -2867,14 +3772,29 @@ var htmx = (function() {
}
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @param {RegExp} regexp
+ * @return {boolean}
+ */
function hasHeader(xhr, regexp) {
return regexp.test(xhr.getAllResponseHeaders())
}
+ /**
+ * Issues an htmx-style AJAX request
+ *
+ * @see https://htmx.org/api/#ajax
+ *
+ * @param {HttpVerb} verb
+ * @param {string} path the URL path to make the AJAX
+ * @param {Element|string|HtmxAjaxHelperContext} context the element to target (defaults to the **body**) | a selector for the target | a context object that contains any of the following
+ * @return {Promise<void>} Promise that resolves immediately if no request is sent, or when the request is complete
+ */
function ajaxHelper(verb, path, context) {
- verb = verb.toLowerCase()
+ verb = (/** @type HttpVerb */(verb.toLowerCase()))
if (context) {
- if (context instanceof Element || isType(context, 'String')) {
+ if (context instanceof Element || typeof context === 'string') {
return issueAjaxRequest(verb, path, null, null, {
targetOverride: resolveTarget(context),
returnPromise: true
@@ -2898,6 +3818,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @return {Element[]}
+ */
function hierarchyForElt(elt) {
const arr = []
while (elt) {
@@ -2907,6 +3831,12 @@ var htmx = (function() {
return arr
}
+ /**
+ * @param {Element} elt
+ * @param {string} path
+ * @param {HtmxRequestConfig} requestConfig
+ * @return {boolean}
+ */
function verifyPath(elt, path, requestConfig) {
let sameHost
let url
@@ -2928,6 +3858,10 @@ var htmx = (function() {
return triggerEvent(elt, 'htmx:validateUrl', mergeObjects({ url, sameHost }, requestConfig))
}
+ /**
+ * @param {Object|FormData} obj
+ * @return {FormData}
+ */
function formDataFromObject(obj) {
if (obj instanceof FormData) return obj
const formData = new FormData()
@@ -2947,7 +3881,7 @@ var htmx = (function() {
/**
* @param {FormData} formData
- * @param {string|Symbol} name
+ * @param {string} name
* @param {Array} array
* @returns {Array}
*/
@@ -2995,7 +3929,7 @@ var htmx = (function() {
get: function(target, name) {
if (typeof name === 'symbol') {
// Forward symbol calls to the FormData itself directly
- return Reflect.get(...arguments)
+ return Reflect.get(target, name)
}
if (name === 'toJSON') {
// Support JSON.stringify call on proxy
@@ -3022,6 +3956,9 @@ var htmx = (function() {
}
},
set: function(target, name, value) {
+ if (typeof name !== 'string') {
+ return false
+ }
target.delete(name)
if (typeof value.forEach === 'function') {
value.forEach(function(v) { target.append(name, v) })
@@ -3031,7 +3968,9 @@ var htmx = (function() {
return true
},
deleteProperty: function(target, name) {
- target.delete(name)
+ if (typeof name === 'string') {
+ target.delete(name)
+ }
return true
},
// Support Object.assign call from proxy
@@ -3044,6 +3983,15 @@ var htmx = (function() {
})
}
+ /**
+ * @param {HttpVerb} verb
+ * @param {string} path
+ * @param {Element} elt
+ * @param {Event} event
+ * @param {HtmxAjaxEtc} [etc]
+ * @param {boolean} [confirmed]
+ * @return {Promise<void>}
+ */
function issueAjaxRequest(verb, path, elt, event, etc, confirmed) {
let resolve = null
let reject = null
@@ -3065,7 +4013,7 @@ var htmx = (function() {
maybeCall(resolve)
return promise
}
- const target = etc.targetOverride || getTarget(elt)
+ const target = etc.targetOverride || asElement(getTarget(elt))
if (target == null || target == DUMMY_ELT) {
triggerErrorEvent(elt, 'htmx:targetError', { target: getAttributeValue(elt, 'hx-target') })
maybeCall(reject)
@@ -3085,7 +4033,7 @@ var htmx = (function() {
if (buttonVerb != null) {
// ignore buttons with formmethod="dialog"
if (buttonVerb.toLowerCase() !== 'dialog') {
- verb = buttonVerb
+ verb = (/** @type HttpVerb */(buttonVerb))
}
}
}
@@ -3113,7 +4061,7 @@ var htmx = (function() {
if (selector === 'this') {
syncElt = findThisElement(elt, 'hx-sync')
} else {
- syncElt = querySelectorExt(elt, selector)
+ syncElt = asElement(querySelectorExt(elt, selector))
}
// default to the drop strategy
syncStrategy = (syncStrings[1] || 'drop').trim()
@@ -3233,12 +4181,19 @@ var htmx = (function() {
path = getDocument().location.href
}
+ /**
+ * @type {Object}
+ * @property {boolean} [credentials]
+ * @property {number} [timeout]
+ * @property {boolean} [noHeaders]
+ */
const requestAttrValues = getValuesForElement(elt, 'hx-request')
const eltIsBoosted = getInternalData(elt).boosted
let useUrlParams = htmx.config.methodsThatUseUrlParams.indexOf(verb) >= 0
+ /** @type HtmxRequestConfig */
const requestConfig = {
boosted: eltIsBoosted,
useUrlParams,
@@ -3302,7 +4257,7 @@ var htmx = (function() {
triggerErrorEvent(elt, 'htmx:invalidPath', requestConfig)
maybeCall(reject)
return promise
- };
+ }
xhr.open(verb.toUpperCase(), finalPath, true)
xhr.overrideMimeType('text/html')
@@ -3321,6 +4276,7 @@ var htmx = (function() {
}
}
+ /** @type {HtmxResponseInfo} */
const responseInfo = {
xhr,
target,
@@ -3331,6 +4287,7 @@ var htmx = (function() {
pathInfo: {
requestPath: path,
finalRequestPath: finalPath,
+ responsePath: null,
anchor
}
}
@@ -3411,6 +4368,17 @@ var htmx = (function() {
return promise
}
+ /**
+ * @typedef {Object} HtmxHistoryUpdate
+ * @property {string|null} [type]
+ * @property {string|null} [path]
+ */
+
+ /**
+ * @param {Element} elt
+ * @param {HtmxResponseInfo} responseInfo
+ * @return {HtmxHistoryUpdate}
+ */
function determineHistoryUpdates(elt, responseInfo) {
const xhr = responseInfo.xhr
@@ -3491,13 +4459,23 @@ var htmx = (function() {
}
}
+ /**
+ * @param {HtmxResponseHandlingConfig} responseHandlingConfig
+ * @param {number} status
+ * @return {boolean}
+ */
function codeMatches(responseHandlingConfig, status) {
var regExp = new RegExp(responseHandlingConfig.code)
- return regExp.test(status)
+ return regExp.test(status.toString(10))
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @return {HtmxResponseHandlingConfig}
+ */
function resolveResponseHandling(xhr) {
for (var i = 0; i < htmx.config.responseHandling.length; i++) {
+ /** @type HtmxResponseHandlingConfig */
var responseHandlingElement = htmx.config.responseHandling[i]
if (codeMatches(responseHandlingElement, xhr.status)) {
return responseHandlingElement
@@ -3509,6 +4487,9 @@ var htmx = (function() {
}
}
+ /**
+ * @param {string} title
+ */
function handleTitle(title) {
if (title) {
const titleElt = find('title')
@@ -3520,6 +4501,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @param {HtmxResponseInfo} responseInfo
+ */
function handleAjaxResponse(elt, responseInfo) {
const xhr = responseInfo.xhr
let target = responseInfo.target
@@ -3535,14 +4520,15 @@ var htmx = (function() {
if (hasHeader(xhr, /HX-Location:/i)) {
saveCurrentPageToHistory()
let redirectPath = xhr.getResponseHeader('HX-Location')
- var swapSpec
+ /** @type {HtmxAjaxHelperContext&{path:string}} */
+ var redirectSwapSpec
if (redirectPath.indexOf('{') === 0) {
- swapSpec = parseJSON(redirectPath)
+ redirectSwapSpec = parseJSON(redirectPath)
// what's the best way to throw an error if the user didn't include this
- redirectPath = swapSpec.path
- delete swapSpec.path
+ redirectPath = redirectSwapSpec.path
+ delete redirectSwapSpec.path
}
- ajaxHelper('GET', redirectPath, swapSpec).then(function() {
+ ajaxHelper('get', redirectPath, redirectSwapSpec).then(function() {
pushUrlIntoHistory(redirectPath)
})
return
@@ -3565,7 +4551,7 @@ var htmx = (function() {
if (xhr.getResponseHeader('HX-Retarget') === 'this') {
responseInfo.target = elt
} else {
- responseInfo.target = querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget'))
+ responseInfo.target = asElement(querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget')))
}
}
@@ -3577,7 +4563,7 @@ var htmx = (function() {
let ignoreTitle = htmx.config.ignoreTitle || responseHandling.ignoreTitle
let selectOverride = responseHandling.select
if (responseHandling.target) {
- responseInfo.target = querySelectorExt(elt, responseHandling.target)
+ responseInfo.target = asElement(querySelectorExt(elt, responseHandling.target))
}
var swapOverride = etc.swapOverride
if (swapOverride == null && responseHandling.swapOverride) {
@@ -3589,7 +4575,7 @@ var htmx = (function() {
if (xhr.getResponseHeader('HX-Retarget') === 'this') {
responseInfo.target = elt
} else {
- responseInfo.target = querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget'))
+ responseInfo.target = asElement(querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget')))
}
}
if (hasHeader(xhr, /HX-Reswap:/i)) {
@@ -3597,6 +4583,7 @@ var htmx = (function() {
}
var serverResponse = xhr.response
+ /** @type HtmxBeforeSwapDetails */
var beforeSwapDetails = mergeObjects({
shouldSwap,
serverResponse,
@@ -3713,7 +4700,9 @@ var htmx = (function() {
if (shouldTransition &&
triggerEvent(elt, 'htmx:beforeTransition', responseInfo) &&
- typeof Promise !== 'undefined' && document.startViewTransition) {
+ typeof Promise !== 'undefined' &&
+ // @ts-ignore experimental feature atm
+ document.startViewTransition) {
const settlePromise = new Promise(function(_resolve, _reject) {
settleResolve = _resolve
settleReject = _reject
@@ -3721,6 +4710,7 @@ var htmx = (function() {
// wrap the original doSwap() in a call to startViewTransition()
const innerDoSwap = doSwap
doSwap = function() {
+ // @ts-ignore experimental feature atm
document.startViewTransition(function() {
innerDoSwap()
return settlePromise
@@ -3729,7 +4719,7 @@ var htmx = (function() {
}
if (swapSpec.swapDelay > 0) {
- setTimeout(doSwap, swapSpec.swapDelay)
+ getWindow().setTimeout(doSwap, swapSpec.swapDelay)
} else {
doSwap()
}
@@ -3743,13 +4733,13 @@ var htmx = (function() {
// Extensions API
//= ===================================================================
- /** @type {Object<string, import("./htmx").HtmxExtension>} */
+ /** @type {Object<string, HtmxExtension>} */
const extensions = {}
/**
- * extensionBase defines the default functions for all extensions.
- * @returns {import("./htmx").HtmxExtension}
- */
+ * extensionBase defines the default functions for all extensions.
+ * @returns {HtmxExtension}
+ */
function extensionBase() {
return {
init: function(api) { return null },
@@ -3762,11 +4752,13 @@ var htmx = (function() {
}
/**
- * defineExtension initializes the extension and adds it to the htmx registry
- *
- * @param {string} name
- * @param {import("./htmx").HtmxExtension} extension
- */
+ * defineExtension initializes the extension and adds it to the htmx registry
+ *
+ * @see https://htmx.org/api/#defineExtension
+ *
+ * @param {string} name the extension name
+ * @param {HtmxExtension} extension the extension definition
+ */
function defineExtension(name, extension) {
if (extension.init) {
extension.init(internalAPI)
@@ -3775,21 +4767,24 @@ var htmx = (function() {
}
/**
- * removeExtension removes an extension from the htmx registry
- *
- * @param {string} name
- */
+ * removeExtension removes an extension from the htmx registry
+ *
+ * @see https://htmx.org/api/#removeExtension
+ *
+ * @param {string} name
+ */
function removeExtension(name) {
delete extensions[name]
}
/**
- * getExtensions searches up the DOM tree to return all extensions that can be applied to a given element
- *
- * @param {HTMLElement} elt
- * @param {import("./htmx").HtmxExtension[]=} extensionsToReturn
- * @param {import("./htmx").HtmxExtension[]=} extensionsToIgnore
- */
+ * getExtensions searches up the DOM tree to return all extensions that can be applied to a given element
+ *
+ * @param {Element} elt
+ * @param {HtmxExtension[]=} extensionsToReturn
+ * @param {string[]=} extensionsToIgnore
+ * @returns {HtmxExtension[]}
+ */
function getExtensions(elt, extensionsToReturn, extensionsToIgnore) {
if (extensionsToReturn == undefined) {
extensionsToReturn = []
@@ -3816,7 +4811,7 @@ var htmx = (function() {
}
})
}
- return getExtensions(parentElt(elt), extensionsToReturn, extensionsToIgnore)
+ return getExtensions(asElement(parentElt(elt)), extensionsToReturn, extensionsToIgnore)
}
//= ===================================================================
@@ -3828,12 +4823,12 @@ var htmx = (function() {
})
/**
- * Execute a function now if DOMContentLoaded has fired, otherwise listen for it.
- *
- * This function uses isReady because there is no realiable way to ask the browswer whether
- * the DOMContentLoaded event has already been fired; there's a gap between DOMContentLoaded
- * firing and readystate=complete.
- */
+ * Execute a function now if DOMContentLoaded has fired, otherwise listen for it.
+ *
+ * This function uses isReady because there is no reliable way to ask the browser whether
+ * the DOMContentLoaded event has already been fired; there's a gap between DOMContentLoaded
+ * firing and readystate=complete.
+ */
function ready(fn) {
// Checking readyState here is a failsafe in case the htmx script tag entered the DOM by
// some means other than the initial page load.
@@ -3856,9 +4851,9 @@ var htmx = (function() {
}
function getMetaConfig() {
+ /** @type HTMLMetaElement */
const element = getDocument().querySelector('meta[name="htmx-config"]')
if (element) {
- // @ts-ignore
return parseJSON(element.content)
} else {
return null
@@ -3906,7 +4901,7 @@ var htmx = (function() {
}
}
}
- setTimeout(function() {
+ getWindow().setTimeout(function() {
triggerEvent(body, 'htmx:load', {}) // give ready handlers a chance to load up before firing this event
body = null // kill reference for gc
}, 0)
@@ -3914,4 +4909,177 @@ var htmx = (function() {
return htmx
})()
+
+/** @typedef {'get'|'head'|'post'|'put'|'delete'|'connect'|'options'|'trace'|'patch'} HttpVerb */
+
+/**
+ * @typedef {Object} SwapOptions
+ * @property {string} [select]
+ * @property {string} [selectOOB]
+ * @property {*} [eventInfo]
+ * @property {string} [anchor]
+ * @property {Element} [contextElement]
+ * @property {swapCallback} [afterSwapCallback]
+ * @property {swapCallback} [afterSettleCallback]
+ */
+
+/**
+ * @callback swapCallback
+ */
+
+/**
+ * @typedef {'innerHTML' | 'outerHTML' | 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'delete' | 'none' | string} HtmxSwapStyle
+ */
+
+/**
+ * @typedef HtmxSwapSpecification
+ * @property {HtmxSwapStyle} swapStyle
+ * @property {number} swapDelay
+ * @property {number} settleDelay
+ * @property {boolean} [transition]
+ * @property {boolean} [ignoreTitle]
+ * @property {string} [head]
+ * @property {'top' | 'bottom'} [scroll]
+ * @property {string} [scrollTarget]
+ * @property {string} [show]
+ * @property {string} [showTarget]
+ * @property {boolean} [focusScroll]
+ */
+
+/**
+ * @typedef {((this:Node, evt:Event) => boolean) & {source: string}} ConditionalFunction
+ */
+
+/**
+ * @typedef {Object} HtmxTriggerSpecification
+ * @property {string} trigger
+ * @property {number} [pollInterval]
+ * @property {ConditionalFunction} [eventFilter]
+ * @property {boolean} [changed]
+ * @property {boolean} [once]
+ * @property {boolean} [consume]
+ * @property {number} [delay]
+ * @property {string} [from]
+ * @property {string} [target]
+ * @property {number} [throttle]
+ * @property {string} [queue]
+ * @property {string} [root]
+ * @property {string} [threshold]
+ */
+
+/**
+ * @typedef {{elt: Element, message: string, validity: ValidityState}} HtmxElementValidationError
+ */
+
+/**
+ * @typedef {Record<string, string>} HtmxHeaderSpecification
+ * @property {'true'} HX-Request
+ * @property {string|null} HX-Trigger
+ * @property {string|null} HX-Trigger-Name
+ * @property {string|null} HX-Target
+ * @property {string} HX-Current-URL
+ * @property {string} [HX-Prompt]
+ * @property {'true'} [HX-Boosted]
+ * @property {string} [Content-Type]
+ * @property {'true'} [HX-History-Restore-Request]
+ */
+
+/** @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]
+ */
+
+/**
+ * @typedef {Object} HtmxRequestConfig
+ * @property {boolean} boosted
+ * @property {boolean} useUrlParams
+ * @property {FormData} formData
+ * @property {Object} parameters formData proxy
+ * @property {FormData} unfilteredFormData
+ * @property {Object} unfilteredParameters unfilteredFormData proxy
+ * @property {HtmxHeaderSpecification} headers
+ * @property {Element} target
+ * @property {HttpVerb} verb
+ * @property {HtmxElementValidationError[]} errors
+ * @property {boolean} withCredentials
+ * @property {number} timeout
+ * @property {string} path
+ * @property {Event} triggeringEvent
+ */
+
+/**
+ * @typedef {Object} HtmxResponseInfo
+ * @property {XMLHttpRequest} xhr
+ * @property {Element} target
+ * @property {HtmxRequestConfig} requestConfig
+ * @property {HtmxAjaxEtc} etc
+ * @property {boolean} boosted
+ * @property {string} select
+ * @property {{requestPath: string, finalRequestPath: string, responsePath: string|null, anchor: string}} pathInfo
+ * @property {boolean} [failed]
+ * @property {boolean} [successful]
+ */
+
+/**
+ * @typedef {Object} HtmxAjaxEtc
+ * @property {boolean} [returnPromise]
+ * @property {HtmxAjaxHandler} [handler]
+ * @property {string} [select]
+ * @property {Element} [targetOverride]
+ * @property {HtmxSwapStyle} [swapOverride]
+ * @property {Record<string,string>} [headers]
+ * @property {Object|FormData} [values]
+ * @property {boolean} [credentials]
+ * @property {number} [timeout]
+ */
+
+/**
+ * @typedef {Object} HtmxResponseHandlingConfig
+ * @property {string} [code]
+ * @property {boolean} swap
+ * @property {boolean} [error]
+ * @property {boolean} [ignoreTitle]
+ * @property {string} [select]
+ * @property {string} [target]
+ * @property {string} [swapOverride]
+ * @property {string} [event]
+ */
+
+/**
+ * @typedef {HtmxResponseInfo & {shouldSwap: boolean, serverResponse: any, isError: boolean, ignoreTitle: boolean, selectOverride:string}} HtmxBeforeSwapDetails
+ */
+
+/**
+ * @callback HtmxAjaxHandler
+ * @param {Element} elt
+ * @param {HtmxResponseInfo} responseInfo
+ */
+
+/**
+ * @typedef {(() => void)} HtmxSettleTask
+ */
+
+/**
+ * @typedef {Object} HtmxSettleInfo
+ * @property {HtmxSettleTask[]} tasks
+ * @property {Element[]} elts
+ * @property {string} [title]
+ */
+
+/**
+ * @typedef {Object} HtmxExtension
+ * @see https://htmx.org/extensions/#defining
+ * @property {(api: any) => void} init
+ * @property {(name: string, event: Event|CustomEvent) => boolean} onEvent
+ * @property {(text: string, xhr: XMLHttpRequest, elt: Element) => string} transformResponse
+ * @property {(swapStyle: HtmxSwapStyle) => boolean} isInlineSwap
+ * @property {(swapStyle: HtmxSwapStyle, target: Element, fragment: Node, settleInfo: HtmxSettleInfo) => boolean} handleSwap
+ * @property {(xhr: XMLHttpRequest, parameters: FormData, elt: Element) => *|string|null} encodeParameters
+ */
module.exports = htmx;
diff --git a/dist/htmx.esm.js b/dist/htmx.esm.js
index 927e84e2..c72452eb 100644
--- a/dist/htmx.esm.js
+++ b/dist/htmx.esm.js
@@ -2,81 +2,300 @@ var htmx = (function() {
'use strict'
// Public API
- //* * @type {import("./htmx").HtmxApi} */
const htmx = {
+ // Tsc madness here, assigning the functions directly results in an invalid TypeScript output, but reassigning is fine
/* Event processing */
- onLoad: onLoadHelper,
- process: processNode,
- on: addEventListenerImpl,
- off: removeEventListenerImpl,
- trigger: triggerEvent,
- ajax: ajaxHelper,
+ /** @type {typeof onLoadHelper} */
+ onLoad: null,
+ /** @type {typeof processNode} */
+ process: null,
+ /** @type {typeof addEventListenerImpl} */
+ on: null,
+ /** @type {typeof removeEventListenerImpl} */
+ off: null,
+ /** @type {typeof triggerEvent} */
+ trigger: null,
+ /** @type {typeof ajaxHelper} */
+ ajax: null,
/* DOM querying helpers */
- find,
- findAll,
- closest,
+ /** @type {typeof find} */
+ find: null,
+ /** @type {typeof findAll} */
+ findAll: null,
+ /** @type {typeof closest} */
+ closest: null,
+ /**
+ * Returns the input values that would resolve for a given element via the htmx value resolution mechanism
+ *
+ * @see https://htmx.org/api/#values
+ *
+ * @param {Element} elt the element to resolve values on
+ * @param {HttpVerb} type the request type (e.g. **get** or **post**) non-GET's will include the enclosing form of the element. Defaults to **post**
+ * @returns {Object}
+ */
values: function(elt, type) {
const inputValues = getInputValues(elt, type || 'post')
return inputValues.values
},
/* DOM manipulation helpers */
- remove: removeElement,
- addClass: addClassToElement,
- removeClass: removeClassFromElement,
- toggleClass: toggleClassOnElement,
- takeClass: takeClassForElement,
- swap,
+ /** @type {typeof removeElement} */
+ remove: null,
+ /** @type {typeof addClassToElement} */
+ addClass: null,
+ /** @type {typeof removeClassFromElement} */
+ removeClass: null,
+ /** @type {typeof toggleClassOnElement} */
+ toggleClass: null,
+ /** @type {typeof takeClassForElement} */
+ takeClass: null,
+ /** @type {typeof swap} */
+ swap: null,
/* Extension entrypoints */
- defineExtension,
- removeExtension,
+ /** @type {typeof defineExtension} */
+ defineExtension: null,
+ /** @type {typeof removeExtension} */
+ removeExtension: null,
+ /* Debugging */
+ /** @type {typeof logAll} */
+ logAll: null,
+ /** @type {typeof logNone} */
+ logNone: null,
/* Debugging */
- logAll,
- logNone,
+ /**
+ * The logger htmx uses to log with
+ *
+ * @see https://htmx.org/api/#logger
+ */
logger: null,
+ /**
+ * A property holding the configuration htmx uses at runtime.
+ *
+ * Note that using a [meta tag](https://htmx.org/docs/#config) is the preferred mechanism for setting these properties.
+ *
+ * @see https://htmx.org/api/#config
+ */
config: {
+ /**
+ * Whether to use history.
+ * @type boolean
+ * @default true
+ */
historyEnabled: true,
+ /**
+ * The number of pages to keep in **localStorage** for history support.
+ * @type number
+ * @default 10
+ */
historyCacheSize: 10,
+ /**
+ * @type boolean
+ * @default false
+ */
refreshOnHistoryMiss: false,
+ /**
+ * The default swap style to use if **[hx-swap](https://htmx.org/attributes/hx-swap)** is omitted.
+ * @type HtmxSwapStyle
+ * @default 'innerHTML'
+ */
defaultSwapStyle: 'innerHTML',
+ /**
+ * The default delay between receiving a response from the server and doing the swap.
+ * @type number
+ * @default 0
+ */
defaultSwapDelay: 0,
+ /**
+ * The default delay between completing the content swap and settling attributes.
+ * @type number
+ * @default 20
+ */
defaultSettleDelay: 20,
+ /**
+ * If true, htmx will inject a small amount of CSS into the page to make indicators invisible unless the **htmx-indicator** class is present.
+ * @type boolean
+ * @default true
+ */
includeIndicatorStyles: true,
+ /**
+ * The class to place on indicators when a request is in flight.
+ * @type string
+ * @default 'htmx-indicator'
+ */
indicatorClass: 'htmx-indicator',
+ /**
+ * The class to place on triggering elements when a request is in flight.
+ * @type string
+ * @default 'htmx-request'
+ */
requestClass: 'htmx-request',
+ /**
+ * The class to temporarily place on elements that htmx has added to the DOM.
+ * @type string
+ * @default 'htmx-added'
+ */
addedClass: 'htmx-added',
+ /**
+ * The class to place on target elements when htmx is in the settling phase.
+ * @type string
+ * @default 'htmx-settling'
+ */
settlingClass: 'htmx-settling',
+ /**
+ * The class to place on target elements when htmx is in the swapping phase.
+ * @type string
+ * @default 'htmx-swapping'
+ */
swappingClass: 'htmx-swapping',
+ /**
+ * Allows the use of eval-like functionality in htmx, to enable **hx-vars**, trigger conditions & script tag evaluation. Can be set to **false** for CSP compatibility.
+ * @type boolean
+ * @default true
+ */
allowEval: true,
+ /**
+ * If set to false, disables the interpretation of script tags.
+ * @type boolean
+ * @default true
+ */
allowScriptTags: true,
+ /**
+ * If set, the nonce will be added to inline scripts.
+ * @type string
+ * @default ''
+ */
inlineScriptNonce: '',
+ /**
+ * The attributes to settle during the settling phase.
+ * @type string[]
+ * @default ['class', 'style', 'width', 'height']
+ */
attributesToSettle: ['class', 'style', 'width', 'height'],
+ /**
+ * Allow cross-site Access-Control requests using credentials such as cookies, authorization headers or TLS client certificates.
+ * @type boolean
+ * @default false
+ */
withCredentials: false,
+ /**
+ * @type number
+ * @default 0
+ */
timeout: 0,
+ /**
+ * The default implementation of **getWebSocketReconnectDelay** for reconnecting after unexpected connection loss by the event code **Abnormal Closure**, **Service Restart** or **Try Again Later**.
+ * @type {'full-jitter' | ((retryCount:number) => number)}
+ * @default "full-jitter"
+ */
wsReconnectDelay: 'full-jitter',
+ /**
+ * The type of binary data being received over the WebSocket connection
+ * @type BinaryType
+ * @default 'blob'
+ */
wsBinaryType: 'blob',
+ /**
+ * @type string
+ * @default '[hx-disable], [data-hx-disable]'
+ */
disableSelector: '[hx-disable], [data-hx-disable]',
+ /**
+ * @type {'auto' | 'instant' | 'smooth'}
+ * @default 'smooth'
+ */
scrollBehavior: 'instant',
+ /**
+ * If the focused element should be scrolled into view.
+ * @type boolean
+ * @default false
+ */
defaultFocusScroll: false,
+ /**
+ * If set to true htmx will include a cache-busting parameter in GET requests to avoid caching partial responses by the browser
+ * @type boolean
+ * @default false
+ */
getCacheBusterParam: false,
+ /**
+ * If set to true, htmx will use the View Transition API when swapping in new content.
+ * @type boolean
+ * @default false
+ */
globalViewTransitions: false,
+ /**
+ * htmx will format requests with these methods by encoding their parameters in the URL, not the request body
+ * @type {(HttpVerb)[]}
+ * @default ['get', 'delete']
+ */
methodsThatUseUrlParams: ['get', 'delete'],
+ /**
+ * If set to true, disables htmx-based requests to non-origin hosts.
+ * @type boolean
+ * @default false
+ */
selfRequestsOnly: true,
+ /**
+ * If set to true htmx will not update the title of the document when a title tag is found in new content
+ * @type boolean
+ * @default false
+ */
ignoreTitle: false,
+ /**
+ * Whether the target of a boosted element is scrolled into the viewport.
+ * @type boolean
+ * @default true
+ */
scrollIntoViewOnBoost: true,
+ /**
+ * The cache to store evaluated trigger specifications into.
+ * You may define a simple object to use a never-clearing cache, or implement your own system using a [proxy object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
+ * @type {Object|null}
+ * @default null
+ */
triggerSpecsCache: null,
+ /** @type boolean */
disableInheritance: false,
+ /** @type HtmxResponseHandlingConfig[] */
responseHandling: [
{ code: '204', swap: false },
{ code: '[23]..', swap: true },
{ code: '[45]..', swap: false, error: true }
- ]
+ ],
+ /**
+ * Whether to process OOB swaps on elements that are nested within the main response element.
+ * @type boolean
+ * @default true
+ */
+ allowNestedOobSwaps: true
},
- parseInterval,
- _: internalEval,
+ /** @type {typeof parseInterval} */
+ parseInterval: null,
+ /** @type {typeof internalEval} */
+ _: null,
version: '2.0a'
}
+ // Tsc madness part 2
+ htmx.onLoad = onLoadHelper
+ htmx.process = processNode
+ htmx.on = addEventListenerImpl
+ htmx.off = removeEventListenerImpl
+ htmx.trigger = triggerEvent
+ htmx.ajax = ajaxHelper
+ htmx.find = find
+ htmx.findAll = findAll
+ htmx.closest = closest
+ htmx.remove = removeElement
+ htmx.addClass = addClassToElement
+ htmx.removeClass = removeClassFromElement
+ htmx.toggleClass = toggleClassOnElement
+ htmx.takeClass = takeClassForElement
+ htmx.swap = swap
+ htmx.defineExtension = defineExtension
+ htmx.removeExtension = removeExtension
+ htmx.logAll = logAll
+ htmx.logNone = logNone
+ htmx.parseInterval = parseInterval
+ htmx._ = internalEval
- /** @type {import("./htmx").HtmxInternalApi} */
const internalAPI = {
addTriggerHandler,
bodyContains,
@@ -128,6 +347,16 @@ var htmx = (function() {
global ? 'gim' : 'im')
}
+ /**
+ * Parses an interval string consistent with the way htmx does. Useful for plugins that have timing-related attributes.
+ *
+ * Caution: Accepts an int followed by either **s** or **ms**. All other values use **parseFloat**
+ *
+ * @see https://htmx.org/api/#parseInterval
+ *
+ * @param {string} str timing string
+ * @returns {number|undefined}
+ */
function parseInterval(str) {
if (str == undefined) {
return undefined
@@ -147,23 +376,28 @@ var htmx = (function() {
}
/**
- * @param {Element} elt
+ * @param {Node} elt
* @param {string} name
* @returns {(string | null)}
*/
function getRawAttribute(elt, name) {
- return elt.getAttribute && elt.getAttribute(name)
+ return elt instanceof Element && elt.getAttribute(name)
}
+ /**
+ * @param {Element} elt
+ * @param {string} qualifiedName
+ * @returns {boolean}
+ */
// resolve with both hx and data-hx prefixes
function hasAttribute(elt, qualifiedName) {
- return elt.hasAttribute && (elt.hasAttribute(qualifiedName) ||
+ return !!elt.hasAttribute && (elt.hasAttribute(qualifiedName) ||
elt.hasAttribute('data-' + qualifiedName))
}
/**
*
- * @param {HTMLElement} elt
+ * @param {Node} elt
* @param {string} qualifiedName
* @returns {(string | null)}
*/
@@ -172,8 +406,8 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
- * @returns {HTMLElement | ShadowRoot | null}
+ * @param {Node} elt
+ * @returns {Node | null}
*/
function parentElt(elt) {
const parent = elt.parentElement
@@ -189,16 +423,18 @@ var htmx = (function() {
}
/**
- * @returns {Document | ShadowRoot}
+ * @param {Node} elt
+ * @param {boolean} global
+ * @returns {Node|Document}
*/
function getRootNode(elt, global) {
return elt.getRootNode ? elt.getRootNode({ composed: global }) : getDocument()
}
/**
- * @param {HTMLElement} elt
- * @param {(e:HTMLElement) => boolean} condition
- * @returns {HTMLElement | null}
+ * @param {Node} elt
+ * @param {(e:Node) => boolean} condition
+ * @returns {Node | null}
*/
function getClosestMatch(elt, condition) {
while (elt && !condition(elt)) {
@@ -208,6 +444,12 @@ var htmx = (function() {
return elt || null
}
+ /**
+ * @param {Element} initialElement
+ * @param {Element} ancestor
+ * @param {string} attributeName
+ * @returns {string|null}
+ */
function getAttributeValueWithDisinheritance(initialElement, ancestor, attributeName) {
const attributeValue = getAttributeValue(ancestor, attributeName)
const disinherit = getAttributeValue(ancestor, 'hx-disinherit')
@@ -228,14 +470,14 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {string} attributeName
* @returns {string | null}
*/
function getClosestAttributeValue(elt, attributeName) {
let closestAttr = null
getClosestMatch(elt, function(e) {
- return closestAttr = getAttributeValueWithDisinheritance(elt, e, attributeName)
+ return !!(closestAttr = getAttributeValueWithDisinheritance(elt, asElement(e), attributeName))
})
if (closestAttr !== 'unset') {
return closestAttr
@@ -243,15 +485,15 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Node} elt
* @param {string} selector
* @returns {boolean}
*/
function matches(elt, selector) {
// @ts-ignore: non-standard properties for browser compatibility
// noinspection JSUnresolvedVariable
- const matchesFunction = elt.matches || elt.matchesSelector || elt.msMatchesSelector || elt.mozMatchesSelector || elt.webkitMatchesSelector || elt.oMatchesSelector
- return matchesFunction && matchesFunction.call(elt, selector)
+ const matchesFunction = elt instanceof Element && (elt.matches || elt.matchesSelector || elt.msMatchesSelector || elt.mozMatchesSelector || elt.webkitMatchesSelector || elt.oMatchesSelector)
+ return !!matchesFunction && matchesFunction.call(elt, selector)
}
/**
@@ -269,9 +511,7 @@ var htmx = (function() {
}
/**
- *
* @param {string} resp
- * @param {number} depth
* @returns {Document}
*/
function parseHTML(resp) {
@@ -279,12 +519,20 @@ var htmx = (function() {
return parser.parseFromString(resp, 'text/html')
}
+ /**
+ * @param {DocumentFragment} fragment
+ * @param {Node} elt
+ */
function takeChildrenFor(fragment, elt) {
while (elt.childNodes.length > 0) {
fragment.append(elt.childNodes[0])
}
}
+ /**
+ * @param {HTMLScriptElement} script
+ * @returns {HTMLScriptElement}
+ */
function duplicateScript(script) {
const newScript = getDocument().createElement('script')
forEach(script.attributes, function(attr) {
@@ -298,16 +546,23 @@ var htmx = (function() {
return newScript
}
+ /**
+ * @param {HTMLScriptElement} script
+ * @returns {boolean}
+ */
function isJavaScriptScriptNode(script) {
return script.matches('script') && (script.type === 'text/javascript' || script.type === 'module' || script.type === '')
}
- // we have to make new copies of script tags that we are going to insert because
- // SOME browsers (not saying who, but it involves an element and an animal) don't
- // execute scripts created in <template> tags when they are inserted into the DOM
- // and all the others do lmao
+ /**
+ * we have to make new copies of script tags that we are going to insert because
+ * SOME browsers (not saying who, but it involves an element and an animal) don't
+ * execute scripts created in <template> tags when they are inserted into the DOM
+ * and all the others do lmao
+ * @param {DocumentFragment} fragment
+ */
function normalizeScriptTags(fragment) {
- Array.from(fragment.querySelectorAll('script')).forEach((script) => {
+ Array.from(fragment.querySelectorAll('script')).forEach(/** @param {HTMLScriptElement} script */ (script) => {
if (isJavaScriptScriptNode(script)) {
const newScript = duplicateScript(script)
const parent = script.parentNode
@@ -323,31 +578,37 @@ var htmx = (function() {
}
/**
- * @param {string} response HTML
- * @returns {DocumentFragment & {title: string}} a document fragment representing the response HTML, including
+ * @typedef {DocumentFragment & {title?: string}} DocumentFragmentWithTitle
+ * @description a document fragment representing the response HTML, including
* a `title` property for any title information found
*/
+
+ /**
+ * @param {string} response HTML
+ * @returns {DocumentFragmentWithTitle}
+ */
function makeFragment(response) {
// strip head tag to determine shape of response we are dealing with
const responseWithNoHead = response.replace(HEAD_TAG_REGEX, '')
const startTag = getStartTag(responseWithNoHead)
- let fragment = null
+ /** @type DocumentFragmentWithTitle */
+ let fragment
if (startTag === 'html') {
// if it is a full document, parse it and return the body
- fragment = new DocumentFragment()
+ fragment = /** @type DocumentFragmentWithTitle */ (new DocumentFragment())
const doc = parseHTML(response)
takeChildrenFor(fragment, doc.body)
fragment.title = doc.title
} else if (startTag === 'body') {
// parse body w/o wrapping in template
- fragment = new DocumentFragment()
+ fragment = /** @type DocumentFragmentWithTitle */ (new DocumentFragment())
const doc = parseHTML(responseWithNoHead)
takeChildrenFor(fragment, doc.body)
fragment.title = doc.title
} else {
// otherwise we have non-body partial HTML content, so wrap it in a template to maximize parsing flexibility
const doc = parseHTML('<body><template class="internal-htmx-wrapper">' + responseWithNoHead + '</template></body>')
- fragment = doc.querySelector('template').content
+ fragment = /** @type DocumentFragmentWithTitle */ (doc.querySelector('template').content)
// extract title into fragment for later processing
fragment.title = doc.title
@@ -392,7 +653,7 @@ var htmx = (function() {
* @returns {o is Function}
*/
function isFunction(o) {
- return isType(o, 'Function')
+ return typeof o === 'function'
}
/**
@@ -404,9 +665,50 @@ var htmx = (function() {
}
/**
+ * @typedef {Object} OnHandler
+ * @property {(keyof HTMLElementEventMap)|string} event
+ * @property {EventListener} listener
+ */
+
+ /**
+ * @typedef {Object} ListenerInfo
+ * @property {string} trigger
+ * @property {EventListener} listener
+ * @property {EventTarget} on
+ */
+
+ /**
+ * @typedef {Object} HtmxNodeInternalData
+ * Element data
+ * @property {number} [initHash]
+ * @property {boolean} [boosted]
+ * @property {OnHandler[]} [onHandlers]
+ * @property {number} [timeout]
+ * @property {ListenerInfo[]} [listenerInfos]
+ * @property {boolean} [cancelled]
+ * @property {boolean} [triggeredOnce]
+ * @property {number} [delayed]
+ * @property {number|null} [throttle]
+ * @property {string} [lastValue]
+ * @property {boolean} [loaded]
+ * @property {string} [path]
+ * @property {string} [verb]
+ * @property {boolean} [polling]
+ * @property {HTMLButtonElement|HTMLInputElement|null} [lastButtonClicked]
+ * @property {number} [requestCount]
+ * @property {XMLHttpRequest} [xhr]
+ * @property {(() => void)[]} [queuedRequests]
+ * @property {boolean} [abortable]
+ *
+ * Event data
+ * @property {HtmxTriggerSpecification} [triggerSpec]
+ * @property {EventTarget[]} [handledFor]
+ */
+
+ /**
* getInternalData retrieves "private" data stored by htmx within an element
- * @param {HTMLElement} elt
- * @returns {*}
+ * @param {EventTarget|Event} elt
+ * @returns {HtmxNodeInternalData}
*/
function getInternalData(elt) {
const dataProp = 'htmx-internal-data'
@@ -419,8 +721,9 @@ var htmx = (function() {
/**
* toArray converts an ArrayLike object into a real array.
- * @param {ArrayLike} arr
- * @returns {any[]}
+ * @template T
+ * @param {ArrayLike<T>} arr
+ * @returns {T[]}
*/
function toArray(arr) {
const returnArr = []
@@ -434,13 +737,8 @@ var htmx = (function() {
/**
* @template T
- * @callback forEachCallback
- * @param {T} value
- */
- /**
- * @template T
- * @param {{[index: number]: T, length: number}} arr
- * @param {forEachCallback<T>} func
+ * @param {T[]|NamedNodeMap|HTMLCollection|HTMLFormControlsCollection|ArrayLike<T>} arr
+ * @param {(T) => void} func
*/
function forEach(arr, func) {
if (arr) {
@@ -450,6 +748,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} el
+ * @returns {boolean}
+ */
function isScrolledIntoView(el) {
const rect = el.getBoundingClientRect()
const elemTop = rect.top
@@ -457,35 +759,52 @@ var htmx = (function() {
return elemTop < window.innerHeight && elemBottom >= 0
}
+ /**
+ * @param {Node} elt
+ * @returns {boolean}
+ */
function bodyContains(elt) {
// IE Fix
- if (elt.getRootNode && elt.getRootNode() instanceof window.ShadowRoot) {
- return getDocument().body.contains(elt.getRootNode().host)
+ const rootNode = elt.getRootNode && elt.getRootNode()
+ if (rootNode && rootNode instanceof window.ShadowRoot) {
+ return getDocument().body.contains(rootNode.host)
} else {
return getDocument().body.contains(elt)
}
}
+ /**
+ * @param {string} trigger
+ * @returns {string[]}
+ */
function splitOnWhitespace(trigger) {
return trigger.trim().split(/\s+/)
}
/**
- * mergeObjects takes all of the keys from
+ * mergeObjects takes all the keys from
* obj2 and duplicates them into obj1
- * @param {Object} obj1
- * @param {Object} obj2
- * @returns {Object}
+ * @template T1
+ * @template T2
+ * @param {T1} obj1
+ * @param {T2} obj2
+ * @returns {T1 & T2}
*/
function mergeObjects(obj1, obj2) {
for (const key in obj2) {
if (obj2.hasOwnProperty(key)) {
+ // @ts-ignore tsc doesn't seem to properly handle types merging
obj1[key] = obj2[key]
}
}
+ // @ts-ignore tsc doesn't seem to properly handle types merging
return obj1
}
+ /**
+ * @param {string} jString
+ * @returns {any|null}
+ */
function parseJSON(jString) {
try {
return JSON.parse(jString)
@@ -495,6 +814,9 @@ var htmx = (function() {
}
}
+ /**
+ * @returns {boolean}
+ */
function canAccessLocalStorage() {
const test = 'htmx:localStorageTest'
try {
@@ -506,6 +828,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {string} path
+ * @returns {string}
+ */
function normalizePath(path) {
try {
const url = new URL(path)
@@ -527,19 +853,36 @@ var htmx = (function() {
// public API
//= =========================================================================================
+ /**
+ * @param {string} str
+ * @returns {any}
+ */
function internalEval(str) {
return maybeEval(getDocument().body, function() {
return eval(str)
})
}
+ /**
+ * Adds a callback for the **htmx:load** event. This can be used to process new content, for example initializing the content with a javascript library
+ *
+ * @see https://htmx.org/api/#onLoad
+ *
+ * @param {(elt: Node) => void} callback the callback to call on newly loaded content
+ * @returns {EventListener}
+ */
function onLoadHelper(callback) {
- const value = htmx.on('htmx:load', function(evt) {
+ const value = htmx.on('htmx:load', /** @param {CustomEvent} evt */ function(evt) {
callback(evt.detail.elt)
})
return value
}
+ /**
+ * Log all htmx events, useful for debugging.
+ *
+ * @see https://htmx.org/api/#logAll
+ */
function logAll() {
htmx.logger = function(elt, event, data) {
if (console) {
@@ -552,26 +895,59 @@ var htmx = (function() {
htmx.logger = null
}
+ /**
+ * Finds an element matching the selector
+ *
+ * @see https://htmx.org/api/#find
+ *
+ * @param {ParentNode|string} eltOrSelector the root element to find the matching element in, inclusive | the selector to match
+ * @param {string} [selector] the selector to match
+ * @returns {Element|null}
+ */
function find(eltOrSelector, selector) {
- if (selector) {
+ if (typeof eltOrSelector !== 'string') {
return eltOrSelector.querySelector(selector)
} else {
return find(getDocument(), eltOrSelector)
}
}
+ /**
+ * Finds all elements matching the selector
+ *
+ * @see https://htmx.org/api/#findAll
+ *
+ * @param {ParentNode|string} eltOrSelector the root element to find the matching elements in, inclusive | the selector to match
+ * @param {string} [selector] the selector to match
+ * @returns {NodeListOf<Element>}
+ */
function findAll(eltOrSelector, selector) {
- if (selector) {
+ if (typeof eltOrSelector !== 'string') {
return eltOrSelector.querySelectorAll(selector)
} else {
return findAll(getDocument(), eltOrSelector)
}
}
+ /**
+ * @returns Window
+ */
+ function getWindow() {
+ return window
+ }
+
+ /**
+ * Removes an element from the DOM
+ *
+ * @see https://htmx.org/api/#remove
+ *
+ * @param {Node} elt
+ * @param {number} [delay]
+ */
function removeElement(elt, delay) {
elt = resolveTarget(elt)
if (delay) {
- setTimeout(function() {
+ getWindow().setTimeout(function() {
removeElement(elt)
elt = null
}, delay)
@@ -580,10 +956,54 @@ var htmx = (function() {
}
}
+ /**
+ * @param {any} elt
+ * @return {Element|null}
+ */
+ function asElement(elt) {
+ return elt instanceof Element ? elt : null
+ }
+
+ /**
+ * @param {any} elt
+ * @return {HTMLElement|null}
+ */
+ function asHtmlElement(elt) {
+ return elt instanceof HTMLElement ? elt : null
+ }
+
+ /**
+ * @param {any} value
+ * @return {string|null}
+ */
+ function asString(value) {
+ return typeof value === 'string' ? value : null
+ }
+
+ /**
+ * @param {EventTarget} elt
+ * @return {ParentNode|null}
+ */
+ function asParentNode(elt) {
+ return elt instanceof Element || elt instanceof Document || elt instanceof DocumentFragment ? elt : null
+ }
+
+ /**
+ * This method adds a class to the given element.
+ *
+ * @see https://htmx.org/api/#addClass
+ *
+ * @param {Element|string} elt the element to add the class to
+ * @param {string} clazz the class to add
+ * @param {number} [delay] the delay (in milliseconds) before class is added
+ */
function addClassToElement(elt, clazz, delay) {
- elt = resolveTarget(elt)
+ elt = asElement(resolveTarget(elt))
+ if (!elt) {
+ return
+ }
if (delay) {
- setTimeout(function() {
+ getWindow().setTimeout(function() {
addClassToElement(elt, clazz)
elt = null
}, delay)
@@ -592,10 +1012,22 @@ var htmx = (function() {
}
}
- function removeClassFromElement(elt, clazz, delay) {
- elt = resolveTarget(elt)
+ /**
+ * Removes a class from the given element
+ *
+ * @see https://htmx.org/api/#removeClass
+ *
+ * @param {Node|string} node element to remove the class from
+ * @param {string} clazz the class to remove
+ * @param {number} [delay] the delay (in milliseconds before class is removed)
+ */
+ function removeClassFromElement(node, clazz, delay) {
+ let elt = asElement(resolveTarget(node))
+ if (!elt) {
+ return
+ }
if (delay) {
- setTimeout(function() {
+ getWindow().setTimeout(function() {
removeClassFromElement(elt, clazz)
elt = null
}, delay)
@@ -610,22 +1042,47 @@ var htmx = (function() {
}
}
+ /**
+ * Toggles the given class on an element
+ *
+ * @see https://htmx.org/api/#toggleClass
+ *
+ * @param {Element|string} elt the element to toggle the class on
+ * @param {string} clazz the class to toggle
+ */
function toggleClassOnElement(elt, clazz) {
elt = resolveTarget(elt)
elt.classList.toggle(clazz)
}
+ /**
+ * Takes the given class from its siblings, so that among its siblings, only the given element will have the class.
+ *
+ * @see https://htmx.org/api/#takeClass
+ *
+ * @param {Node|string} elt the element that will take the class
+ * @param {string} clazz the class to take
+ */
function takeClassForElement(elt, clazz) {
elt = resolveTarget(elt)
forEach(elt.parentElement.children, function(child) {
removeClassFromElement(child, clazz)
})
- addClassToElement(elt, clazz)
+ addClassToElement(asElement(elt), clazz)
}
+ /**
+ * Finds the closest matching element in the given elements parentage, inclusive of the element
+ *
+ * @see https://htmx.org/api/#closest
+ *
+ * @param {Element|string} elt the element to find the selector from
+ * @param {string} selector the selector to find
+ * @returns {Element|null}
+ */
function closest(elt, selector) {
- elt = resolveTarget(elt)
- if (elt.closest) {
+ elt = asElement(resolveTarget(elt))
+ if (elt && elt.closest) {
return elt.closest(selector)
} else {
// TODO remove when IE goes away
@@ -634,19 +1091,33 @@ var htmx = (function() {
return elt
}
}
- while (elt = elt && parentElt(elt))
+ while (elt = elt && asElement(parentElt(elt)))
return null
}
}
+ /**
+ * @param {string} str
+ * @param {string} prefix
+ * @returns {boolean}
+ */
function startsWith(str, prefix) {
return str.substring(0, prefix.length) === prefix
}
+ /**
+ * @param {string} str
+ * @param {string} suffix
+ * @returns {boolean}
+ */
function endsWith(str, suffix) {
return str.substring(str.length - suffix.length) === suffix
}
+ /**
+ * @param {string} selector
+ * @returns {string}
+ */
function normalizeSelector(selector) {
const trimmedSelector = selector.trim()
if (startsWith(trimmedSelector, '<') && endsWith(trimmedSelector, '/>')) {
@@ -656,17 +1127,24 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Node|Element|Document|string} elt
+ * @param {string} selector
+ * @param {boolean=} global
+ * @returns {(Node|Window)[]}
+ */
function querySelectorAllExt(elt, selector, global) {
+ elt = resolveTarget(elt)
if (selector.indexOf('closest ') === 0) {
- return [closest(elt, normalizeSelector(selector.substr(8)))]
+ return [closest(asElement(elt), normalizeSelector(selector.substr(8)))]
} else if (selector.indexOf('find ') === 0) {
- return [find(elt, normalizeSelector(selector.substr(5)))]
+ return [find(asParentNode(elt), normalizeSelector(selector.substr(5)))]
} else if (selector === 'next') {
- return [elt.nextElementSibling]
+ return [asElement(elt).nextElementSibling]
} else if (selector.indexOf('next ') === 0) {
return [scanForwardQuery(elt, normalizeSelector(selector.substr(5)), !!global)]
} else if (selector === 'previous') {
- return [elt.previousElementSibling]
+ return [asElement(elt).previousElementSibling]
} else if (selector.indexOf('previous ') === 0) {
return [scanBackwardsQuery(elt, normalizeSelector(selector.substr(9)), !!global)]
} else if (selector === 'document') {
@@ -680,12 +1158,18 @@ var htmx = (function() {
} else if (selector.indexOf('global ') === 0) {
return querySelectorAllExt(elt, selector.slice(7), true)
} else {
- return getRootNode(elt, !!global).querySelectorAll(normalizeSelector(selector))
+ return toArray(asParentNode(getRootNode(elt, !!global)).querySelectorAll(normalizeSelector(selector)))
}
}
+ /**
+ * @param {Node} start
+ * @param {string} match
+ * @param {boolean} global
+ * @returns {Element}
+ */
var scanForwardQuery = function(start, match, global) {
- const results = getRootNode(start, global).querySelectorAll(match)
+ const results = asParentNode(getRootNode(start, global)).querySelectorAll(match)
for (let i = 0; i < results.length; i++) {
const elt = results[i]
if (elt.compareDocumentPosition(start) === Node.DOCUMENT_POSITION_PRECEDING) {
@@ -694,8 +1178,14 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Node} start
+ * @param {string} match
+ * @param {boolean} global
+ * @returns {Element}
+ */
var scanBackwardsQuery = function(start, match, global) {
- const results = getRootNode(start, global).querySelectorAll(match)
+ const results = asParentNode(getRootNode(start, global)).querySelectorAll(match)
for (let i = results.length - 1; i >= 0; i--) {
const elt = results[i]
if (elt.compareDocumentPosition(start) === Node.DOCUMENT_POSITION_FOLLOWING) {
@@ -704,8 +1194,13 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Node|string} eltOrSelector
+ * @param {string=} selector
+ * @returns {Node|Window}
+ */
function querySelectorExt(eltOrSelector, selector) {
- if (selector) {
+ if (typeof eltOrSelector !== 'string') {
return querySelectorAllExt(eltOrSelector, selector)[0]
} else {
return querySelectorAllExt(getDocument().body, eltOrSelector)[0]
@@ -713,36 +1208,62 @@ var htmx = (function() {
}
/**
- *
- * @param {string|Element} arg2
- * @param {Element} [context]
- * @returns {Element}
+ * @template {EventTarget} T
+ * @param {T|string} eltOrSelector
+ * @param {T} [context]
+ * @returns {Element|T|null}
*/
- function resolveTarget(arg2, context) {
- if (isType(arg2, 'String')) {
- return find(context || document, arg2)
+ function resolveTarget(eltOrSelector, context) {
+ if (typeof eltOrSelector === 'string') {
+ return find(asParentNode(context) || document, eltOrSelector)
} else {
- // @ts-ignore
- return arg2
+ return eltOrSelector
}
}
+ /**
+ * @typedef {keyof HTMLElementEventMap|string} AnyEventName
+ */
+
+ /**
+ * @typedef {Object} EventArgs
+ * @property {EventTarget} target
+ * @property {AnyEventName} event
+ * @property {EventListener} listener
+ */
+
+ /**
+ * @param {EventTarget|AnyEventName} arg1
+ * @param {AnyEventName|EventListener} arg2
+ * @param {EventListener} [arg3]
+ * @returns {EventArgs}
+ */
function processEventArgs(arg1, arg2, arg3) {
if (isFunction(arg2)) {
return {
target: getDocument().body,
- event: arg1,
+ event: asString(arg1),
listener: arg2
}
} else {
return {
target: resolveTarget(arg1),
- event: arg2,
+ event: asString(arg2),
listener: arg3
}
}
}
+ /**
+ * Adds an event listener to an element
+ *
+ * @see https://htmx.org/api/#on
+ *
+ * @param {EventTarget|string} arg1 the element to add the listener to | the event name to add the listener for
+ * @param {string|EventListener} arg2 the event name to add the listener for | the listener to add
+ * @param {EventListener} [arg3] the listener to add
+ * @returns {EventListener}
+ */
function addEventListenerImpl(arg1, arg2, arg3) {
ready(function() {
const eventArgs = processEventArgs(arg1, arg2, arg3)
@@ -752,6 +1273,16 @@ var htmx = (function() {
return b ? arg2 : arg3
}
+ /**
+ * Removes an event listener from an element
+ *
+ * @see https://htmx.org/api/#off
+ *
+ * @param {EventTarget|string} arg1 the element to remove the listener from | the event name to remove the listener from
+ * @param {string|EventListener} arg2 the event name to remove the listener from | the listener to remove
+ * @param {EventListener} [arg3] the listener to remove
+ * @returns {EventListener}
+ */
function removeEventListenerImpl(arg1, arg2, arg3) {
ready(function() {
const eventArgs = processEventArgs(arg1, arg2, arg3)
@@ -765,6 +1296,11 @@ var htmx = (function() {
//= ===================================================================
const DUMMY_ELT = getDocument().createElement('output') // dummy element for bad selectors
+ /**
+ * @param {Element} elt
+ * @param {string} attrName
+ * @returns {(Node|Window)[]}
+ */
function findAttributeTargets(elt, attrName) {
const attrTarget = getClosestAttributeValue(elt, attrName)
if (attrTarget) {
@@ -782,12 +1318,21 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @param {string} attribute
+ * @returns {Element|null}
+ */
function findThisElement(elt, attribute) {
- return getClosestMatch(elt, function(elt) {
- return getAttributeValue(elt, attribute) != null
- })
+ return asElement(getClosestMatch(elt, function(elt) {
+ return getAttributeValue(asElement(elt), attribute) != null
+ }))
}
+ /**
+ * @param {Element} elt
+ * @returns {Node|Window|null}
+ */
function getTarget(elt) {
const targetStr = getClosestAttributeValue(elt, 'hx-target')
if (targetStr) {
@@ -806,6 +1351,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {string} name
+ * @returns {boolean}
+ */
function shouldSettleAttribute(name) {
const attributesToSettle = htmx.config.attributesToSettle
for (let i = 0; i < attributesToSettle.length; i++) {
@@ -816,6 +1365,10 @@ var htmx = (function() {
return false
}
+ /**
+ * @param {Element} mergeTo
+ * @param {Element} mergeFrom
+ */
function cloneAttributes(mergeTo, mergeFrom) {
forEach(mergeTo.attributes, function(attr) {
if (!mergeFrom.hasAttribute(attr.name) && shouldSettleAttribute(attr.name)) {
@@ -829,6 +1382,11 @@ var htmx = (function() {
})
}
+ /**
+ * @param {HtmxSwapStyle} swapStyle
+ * @param {Element} target
+ * @returns {boolean}
+ */
function isInlineSwap(swapStyle, target) {
const extensions = getExtensions(target)
for (let i = 0; i < extensions.length; i++) {
@@ -845,14 +1403,14 @@ var htmx = (function() {
}
/**
- *
* @param {string} oobValue
* @param {Element} oobElement
- * @param {*} settleInfo
+ * @param {HtmxSettleInfo} settleInfo
* @returns
*/
function oobSwap(oobValue, oobElement, settleInfo) {
let selector = '#' + getRawAttribute(oobElement, 'id')
+ /** @type HtmxSwapStyle */
let swapStyle = 'outerHTML'
if (oobValue === 'true') {
// do nothing
@@ -873,7 +1431,7 @@ var htmx = (function() {
fragment = getDocument().createDocumentFragment()
fragment.appendChild(oobElementClone)
if (!isInlineSwap(swapStyle, target)) {
- fragment = oobElementClone // if this is not an inline swap, we use the content of the node, not the node itself
+ fragment = asParentNode(oobElementClone) // if this is not an inline swap, we use the content of the node, not the node itself
}
const beforeSwapDetails = { shouldSwap: true, target, fragment }
@@ -896,6 +1454,9 @@ var htmx = (function() {
return oobValue
}
+ /**
+ * @param {DocumentFragment} fragment
+ */
function handlePreservedElements(fragment) {
forEach(findAll(fragment, '[hx-preserve], [data-hx-preserve]'), function(preservedElt) {
const id = getAttributeValue(preservedElt, 'id')
@@ -906,14 +1467,20 @@ var htmx = (function() {
})
}
+ /**
+ * @param {Node} parentNode
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function handleAttributes(parentNode, fragment, settleInfo) {
forEach(fragment.querySelectorAll('[id]'), function(newNode) {
const id = getRawAttribute(newNode, 'id')
if (id && id.length > 0) {
const normalizedId = id.replace("'", "\\'")
const normalizedTag = newNode.tagName.replace(':', '\\:')
- const oldNode = parentNode.querySelector(normalizedTag + "[id='" + normalizedId + "']")
- if (oldNode && oldNode !== parentNode) {
+ const parentElt = asParentNode(parentNode)
+ const oldNode = parentElt && parentElt.querySelector(normalizedTag + "[id='" + normalizedId + "']")
+ if (oldNode && oldNode !== parentElt) {
const newAttributes = newNode.cloneNode()
cloneAttributes(newNode, oldNode)
settleInfo.tasks.push(function() {
@@ -924,28 +1491,41 @@ var htmx = (function() {
})
}
+ /**
+ * @param {Node} child
+ * @returns {HtmxSettleTask}
+ */
function makeAjaxLoadTask(child) {
return function() {
removeClassFromElement(child, htmx.config.addedClass)
- processNode(child)
- processFocus(child)
+ processNode(asElement(child))
+ processFocus(asParentNode(child))
triggerEvent(child, 'htmx:load')
}
}
+ /**
+ * @param {ParentNode} child
+ */
function processFocus(child) {
const autofocus = '[autofocus]'
- const autoFocusedElt = matches(child, autofocus) ? child : child.querySelector(autofocus)
+ const autoFocusedElt = asHtmlElement(matches(child, autofocus) ? child : child.querySelector(autofocus))
if (autoFocusedElt != null) {
autoFocusedElt.focus()
}
}
+ /**
+ * @param {Node} parentNode
+ * @param {Node} insertBefore
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function insertNodesBefore(parentNode, insertBefore, fragment, settleInfo) {
handleAttributes(parentNode, fragment, settleInfo)
while (fragment.childNodes.length > 0) {
const child = fragment.firstChild
- addClassToElement(child, htmx.config.addedClass)
+ addClassToElement(asElement(child), htmx.config.addedClass)
parentNode.insertBefore(child, insertBefore)
if (child.nodeType !== Node.TEXT_NODE && child.nodeType !== Node.COMMENT_NODE) {
settleInfo.tasks.push(makeAjaxLoadTask(child))
@@ -953,8 +1533,13 @@ var htmx = (function() {
}
}
- // based on https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0,
- // derived from Java's string hashcode implementation
+ /**
+ * based on https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0,
+ * derived from Java's string hashcode implementation
+ * @param {string} string
+ * @param {number} hash
+ * @returns {number}
+ */
function stringHash(string, hash) {
let char = 0
while (char < string.length) {
@@ -963,6 +1548,10 @@ var htmx = (function() {
return hash
}
+ /**
+ * @param {Element} elt
+ * @returns {number}
+ */
function attributeHash(elt) {
let hash = 0
// IE fix
@@ -978,17 +1567,23 @@ var htmx = (function() {
return hash
}
+ /**
+ * @param {EventTarget} elt
+ */
function deInitOnHandlers(elt) {
const internalData = getInternalData(elt)
if (internalData.onHandlers) {
for (let i = 0; i < internalData.onHandlers.length; i++) {
const handlerInfo = internalData.onHandlers[i]
- elt.removeEventListener(handlerInfo.event, handlerInfo.listener)
+ removeEventListenerImpl(elt, handlerInfo.event, handlerInfo.listener)
}
delete internalData.onHandlers
}
}
+ /**
+ * @param {Node} element
+ */
function deInitNode(element) {
const internalData = getInternalData(element)
if (internalData.timeout) {
@@ -997,7 +1592,7 @@ var htmx = (function() {
if (internalData.listenerInfos) {
forEach(internalData.listenerInfos, function(info) {
if (info.on) {
- info.on.removeEventListener(info.trigger, info.listener)
+ removeEventListenerImpl(info.on, info.trigger, info.listener)
}
})
}
@@ -1005,16 +1600,27 @@ var htmx = (function() {
forEach(Object.keys(internalData), function(key) { delete internalData[key] })
}
+ /**
+ * @param {Node} element
+ */
function cleanUpElement(element) {
triggerEvent(element, 'htmx:beforeCleanupElement')
deInitNode(element)
+ // @ts-ignore IE11 code
+ // noinspection JSUnresolvedReference
if (element.children) { // IE
+ // @ts-ignore
forEach(element.children, function(child) { cleanUpElement(child) })
}
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapOuterHTML(target, fragment, settleInfo) {
- // @type {HTMLElement}
+ /** @type {Node} */
let newElt
const eltBeforeNewContent = target.previousSibling
insertNodesBefore(parentElt(target), target, fragment, settleInfo)
@@ -1025,35 +1631,70 @@ var htmx = (function() {
}
settleInfo.elts = settleInfo.elts.filter(function(e) { return e !== target })
while (newElt && newElt !== target) {
- if (newElt.nodeType === Node.ELEMENT_NODE) {
+ if (newElt instanceof Element) {
settleInfo.elts.push(newElt)
+ newElt = newElt.nextElementSibling
+ } else {
+ newElt = null
}
- newElt = newElt.nextElementSibling
}
cleanUpElement(target)
- target.remove()
+ if (target instanceof Element) {
+ target.remove()
+ } else {
+ target.parentNode.removeChild(target)
+ }
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapAfterBegin(target, fragment, settleInfo) {
return insertNodesBefore(target, target.firstChild, fragment, settleInfo)
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapBeforeBegin(target, fragment, settleInfo) {
return insertNodesBefore(parentElt(target), target, fragment, settleInfo)
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapBeforeEnd(target, fragment, settleInfo) {
return insertNodesBefore(target, null, fragment, settleInfo)
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapAfterEnd(target, fragment, settleInfo) {
return insertNodesBefore(parentElt(target), target.nextSibling, fragment, settleInfo)
}
- function swapDelete(target, fragment, settleInfo) {
+
+ /**
+ * @param {Node} target
+ */
+ function swapDelete(target) {
cleanUpElement(target)
return parentElt(target).removeChild(target)
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapInnerHTML(target, fragment, settleInfo) {
const firstChild = target.firstChild
insertNodesBefore(target, firstChild, fragment, settleInfo)
@@ -1068,11 +1709,11 @@ var htmx = (function() {
}
/**
- * @param {string} swapStyle
- * @param {HTMLElement} elt
- * @param {HTMLElement} target
- * @param {Node} fragment
- * @param {{ tasks: (() => void)[]; }} settleInfo
+ * @param {HtmxSwapStyle} swapStyle
+ * @param {Element} elt
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
*/
function swapWithStyle(swapStyle, elt, target, fragment, settleInfo) {
switch (swapStyle) {
@@ -1094,7 +1735,7 @@ var htmx = (function() {
swapAfterEnd(target, fragment, settleInfo)
return
case 'delete':
- swapDelete(target, fragment, settleInfo)
+ swapDelete(target)
return
default:
var extensions = getExtensions(elt)
@@ -1126,37 +1767,31 @@ var htmx = (function() {
}
}
+ /**
+ * @param {DocumentFragment} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function findAndSwapOobElements(fragment, settleInfo) {
forEach(findAll(fragment, '[hx-swap-oob], [data-hx-swap-oob]'), function(oobElement) {
- const oobValue = getAttributeValue(oobElement, 'hx-swap-oob')
- if (oobValue != null) {
- oobSwap(oobValue, oobElement, settleInfo)
+ if (htmx.config.allowNestedOobSwaps || oobElement.parentElement === null) {
+ const oobValue = getAttributeValue(oobElement, 'hx-swap-oob')
+ if (oobValue != null) {
+ oobSwap(oobValue, oobElement, settleInfo)
+ }
+ } else {
+ oobElement.removeAttribute('hx-swap-oob')
+ oobElement.removeAttribute('data-hx-swap-oob')
}
})
}
/**
- * @callback swapCallback
- */
-
- /**
- * @typedef {Object} SwapOptions
- * @property {?string} select
- * @property {?string} selectOOB
- * @property {?*} eventInfo
- * @property {?*} anchor
- * @property {?HTMLElement} contextElement
- * @property {?swapCallback} afterSwapCallback
- * @property {?swapCallback} afterSettleCallback
- */
-
- /**
* Implements complete swapping pipeline, including: focus and selection preservation,
* title updates, scroll, OOB swapping, normal swapping and settling
* @param {string|Element} target
* @param {string} content
- * @param {import("./htmx").HtmxSwapSpecification} swapSpec
- * @param {SwapOptions} swapOptions
+ * @param {HtmxSwapSpecification} swapSpec
+ * @param {SwapOptions} [swapOptions]
*/
function swap(target, content, swapSpec, swapOptions) {
if (!swapOptions) {
@@ -1181,51 +1816,57 @@ var htmx = (function() {
}
const settleInfo = makeSettleInfo(target)
- let fragment = makeFragment(content)
-
- settleInfo.title = fragment.title
-
- // select-oob swaps
- if (swapOptions.selectOOB) {
- const oobSelectValues = swapOptions.selectOOB.split(',')
- for (let i = 0; i < oobSelectValues.length; i++) {
- const oobSelectValue = oobSelectValues[i].split(':', 2)
- let id = oobSelectValue[0].trim()
- if (id.indexOf('#') === 0) {
- id = id.substring(1)
- }
- const oobValue = oobSelectValue[1] || 'true'
- const oobElement = fragment.querySelector('#' + id)
- if (oobElement) {
- oobSwap(oobValue, oobElement, settleInfo)
+ // For text content swaps, don't parse the response as HTML, just insert it
+ if (swapSpec.swapStyle === 'textContent') {
+ target.textContent = content
+ // Otherwise, make the fragment and process it
+ } else {
+ let fragment = makeFragment(content)
+
+ settleInfo.title = fragment.title
+
+ // select-oob swaps
+ if (swapOptions.selectOOB) {
+ const oobSelectValues = swapOptions.selectOOB.split(',')
+ for (let i = 0; i < oobSelectValues.length; i++) {
+ const oobSelectValue = oobSelectValues[i].split(':', 2)
+ let id = oobSelectValue[0].trim()
+ if (id.indexOf('#') === 0) {
+ id = id.substring(1)
+ }
+ const oobValue = oobSelectValue[1] || 'true'
+ const oobElement = fragment.querySelector('#' + id)
+ if (oobElement) {
+ oobSwap(oobValue, oobElement, settleInfo)
+ }
}
}
- }
- // oob swaps
- findAndSwapOobElements(fragment, settleInfo)
- forEach(findAll(fragment, 'template'), function(template) {
- findAndSwapOobElements(template.content, settleInfo)
- if (template.content.childElementCount === 0) {
+ // oob swaps
+ findAndSwapOobElements(fragment, settleInfo)
+ forEach(findAll(fragment, 'template'), /** @param {HTMLTemplateElement} template */function(template) {
+ findAndSwapOobElements(template.content, settleInfo)
+ if (template.content.childElementCount === 0) {
// Avoid polluting the DOM with empty templates that were only used to encapsulate oob swap
- template.remove()
- }
- })
-
- // normal swap
- if (swapOptions.select) {
- const newFragment = getDocument().createDocumentFragment()
- forEach(fragment.querySelectorAll(swapOptions.select), function(node) {
- newFragment.appendChild(node)
+ template.remove()
+ }
})
- fragment = newFragment
+
+ // normal swap
+ if (swapOptions.select) {
+ const newFragment = getDocument().createDocumentFragment()
+ forEach(fragment.querySelectorAll(swapOptions.select), function(node) {
+ newFragment.appendChild(node)
+ })
+ fragment = newFragment
+ }
+ handlePreservedElements(fragment)
+ swapWithStyle(swapSpec.swapStyle, swapOptions.contextElement, target, fragment, settleInfo)
}
- handlePreservedElements(fragment)
- swapWithStyle(swapSpec.swapStyle, swapOptions.contextElement, target, fragment, settleInfo)
// apply saved focus and selection information to swapped content
if (selectionInfo.elt &&
- !bodyContains(selectionInfo.elt) &&
- getRawAttribute(selectionInfo.elt, 'id')) {
+ !bodyContains(selectionInfo.elt) &&
+ getRawAttribute(selectionInfo.elt, 'id')) {
const newActiveElt = document.getElementById(getRawAttribute(selectionInfo.elt, 'id'))
const focusOptions = { preventScroll: swapSpec.focusScroll !== undefined ? !swapSpec.focusScroll : !htmx.config.defaultFocusScroll }
if (newActiveElt) {
@@ -1271,7 +1912,7 @@ var htmx = (function() {
})
if (swapOptions.anchor) {
- const anchorTarget = resolveTarget('#' + swapOptions.anchor)
+ const anchorTarget = asElement(resolveTarget('#' + swapOptions.anchor))
if (anchorTarget) {
anchorTarget.scrollIntoView({ block: 'start', behavior: 'auto' })
}
@@ -1284,12 +1925,17 @@ var htmx = (function() {
}
if (swapSpec.settleDelay > 0) {
- setTimeout(doSettle, swapSpec.settleDelay)
+ getWindow().setTimeout(doSettle, swapSpec.settleDelay)
} else {
doSettle()
}
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @param {string} header
+ * @param {EventTarget} elt
+ */
function handleTriggerHeader(xhr, header, elt) {
const triggerBody = xhr.getResponseHeader(header)
if (triggerBody.indexOf('{') === 0) {
@@ -1319,7 +1965,13 @@ var htmx = (function() {
const NOT_WHITESPACE = /[^\s]/
const COMBINED_SELECTOR_START = /[{(]/
const COMBINED_SELECTOR_END = /[})]/
+
+ /**
+ * @param {string} str
+ * @returns {string[]}
+ */
function tokenizeString(str) {
+ /** @type string[] */
const tokens = []
let position = 0
while (position < str.length) {
@@ -1349,6 +2001,12 @@ var htmx = (function() {
return tokens
}
+ /**
+ * @param {string} token
+ * @param {string|null} last
+ * @param {string} paramName
+ * @returns {boolean}
+ */
function isPossibleRelativeReference(token, last, paramName) {
return SYMBOL_START.exec(token.charAt(0)) &&
token !== 'true' &&
@@ -1358,6 +2016,12 @@ var htmx = (function() {
last !== '.'
}
+ /**
+ * @param {EventTarget|string} elt
+ * @param {string[]} tokens
+ * @param {string} paramName
+ * @returns {ConditionalFunction|null}
+ */
function maybeGenerateConditional(elt, tokens, paramName) {
if (tokens[0] === '[') {
tokens.shift()
@@ -1366,6 +2030,7 @@ var htmx = (function() {
let last = null
while (tokens.length > 0) {
const token = tokens[0]
+ // @ts-ignore For some reason tsc doesn't understand the shift call, and thinks we're comparing the same value here, i.e. '[' vs ']'
if (token === ']') {
bracketCount--
if (bracketCount === 0) {
@@ -1399,6 +2064,11 @@ var htmx = (function() {
}
}
+ /**
+ * @param {string[]} tokens
+ * @param {RegExp} match
+ * @returns {string}
+ */
function consumeUntil(tokens, match) {
let result = ''
while (tokens.length > 0 && !match.test(tokens[0])) {
@@ -1407,6 +2077,10 @@ var htmx = (function() {
return result
}
+ /**
+ * @param {string[]} tokens
+ * @returns {string}
+ */
function consumeCSSSelector(tokens) {
let result
if (tokens.length > 0 && COMBINED_SELECTOR_START.test(tokens[0])) {
@@ -1422,12 +2096,13 @@ var htmx = (function() {
const INPUT_SELECTOR = 'input, textarea, select'
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {string} explicitTrigger
- * @param {cache} cache for trigger specs
- * @returns {import("./htmx").HtmxTriggerSpecification[]}
+ * @param {Object} cache for trigger specs
+ * @returns {HtmxTriggerSpecification[]}
*/
function parseAndCacheTrigger(elt, explicitTrigger, cache) {
+ /** @type HtmxTriggerSpecification[] */
const triggerSpecs = []
const tokens = tokenizeString(explicitTrigger)
do {
@@ -1436,6 +2111,7 @@ var htmx = (function() {
const trigger = consumeUntil(tokens, /[,\[\s]/)
if (trigger !== '') {
if (trigger === 'every') {
+ /** @type HtmxTriggerSpecification */
const every = { trigger: 'every' }
consumeUntil(tokens, NOT_WHITESPACE)
every.pollInterval = parseInterval(consumeUntil(tokens, /[,\[\s]/))
@@ -1446,6 +2122,7 @@ var htmx = (function() {
}
triggerSpecs.push(every)
} else {
+ /** @type HtmxTriggerSpecification */
const triggerSpec = { trigger }
var eventFilter = maybeGenerateConditional(elt, tokens, 'event')
if (eventFilter) {
@@ -1513,8 +2190,8 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
- * @returns {import("./htmx").HtmxTriggerSpecification[]}
+ * @param {Element} elt
+ * @returns {HtmxTriggerSpecification[]}
*/
function getTriggerSpecs(elt) {
const explicitTrigger = getAttributeValue(elt, 'hx-trigger')
@@ -1537,13 +2214,21 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ */
function cancelPolling(elt) {
getInternalData(elt).cancelled = true
}
+ /**
+ * @param {Element} elt
+ * @param {TriggerHandler} handler
+ * @param {HtmxTriggerSpecification} spec
+ */
function processPolling(elt, handler, spec) {
const nodeData = getInternalData(elt)
- nodeData.timeout = setTimeout(function() {
+ nodeData.timeout = getWindow().setTimeout(function() {
if (bodyContains(elt) && nodeData.cancelled !== true) {
if (!maybeFilterEvent(spec, elt, makeEvent('hx:poll:trigger', {
triggerSpec: spec,
@@ -1556,14 +2241,23 @@ var htmx = (function() {
}, spec.pollInterval)
}
+ /**
+ * @param {HTMLAnchorElement} elt
+ * @returns {boolean}
+ */
function isLocalLink(elt) {
return location.hostname === elt.hostname &&
getRawAttribute(elt, 'href') &&
getRawAttribute(elt, 'href').indexOf('#') !== 0
}
+ /**
+ * @param {Element} elt
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {HtmxTriggerSpecification[]} triggerSpecs
+ */
function boostElement(elt, nodeData, triggerSpecs) {
- if ((elt.tagName === 'A' && isLocalLink(elt) && (elt.target === '' || elt.target === '_self')) || elt.tagName === 'FORM') {
+ if ((elt instanceof HTMLAnchorElement && isLocalLink(elt) && (elt.target === '' || elt.target === '_self')) || elt.tagName === 'FORM') {
nodeData.boosted = true
let verb, path
if (elt.tagName === 'A') {
@@ -1577,7 +2271,8 @@ var htmx = (function() {
path = getRawAttribute(elt, 'action')
}
triggerSpecs.forEach(function(triggerSpec) {
- addEventListener(elt, function(elt, evt) {
+ addEventListener(elt, function(node, evt) {
+ const elt = asElement(node)
if (closest(elt, htmx.config.disableSelector)) {
cleanUpElement(elt)
return
@@ -1589,12 +2284,15 @@ var htmx = (function() {
}
/**
- *
* @param {Event} evt
- * @param {HTMLElement} elt
- * @returns
+ * @param {Node} node
+ * @returns {boolean}
*/
- function shouldCancel(evt, elt) {
+ function shouldCancel(evt, node) {
+ const elt = asElement(node)
+ if (!elt) {
+ return false
+ }
if (evt.type === 'submit' || evt.type === 'click') {
if (elt.tagName === 'FORM') {
return true
@@ -1602,7 +2300,7 @@ var htmx = (function() {
if (matches(elt, 'input[type="submit"], button') && closest(elt, 'form') !== null) {
return true
}
- if (elt.tagName === 'A' && elt.href &&
+ if (elt instanceof HTMLAnchorElement && elt.href &&
(elt.getAttribute('href') === '#' || elt.getAttribute('href').indexOf('#') !== 0)) {
return true
}
@@ -1610,25 +2308,47 @@ var htmx = (function() {
return false
}
+ /**
+ * @param {Node} elt
+ * @param {Event|MouseEvent|KeyboardEvent|TouchEvent} evt
+ * @returns {boolean}
+ */
function ignoreBoostedAnchorCtrlClick(elt, evt) {
- return getInternalData(elt).boosted && elt.tagName === 'A' && evt.type === 'click' && (evt.ctrlKey || evt.metaKey)
+ return getInternalData(elt).boosted && elt instanceof HTMLAnchorElement && evt.type === 'click' &&
+ // @ts-ignore this will resolve to undefined for events that don't define those properties, which is fine
+ (evt.ctrlKey || evt.metaKey)
}
+ /**
+ * @param {HtmxTriggerSpecification} triggerSpec
+ * @param {Node} elt
+ * @param {Event} evt
+ * @returns {boolean}
+ */
function maybeFilterEvent(triggerSpec, elt, evt) {
const eventFilter = triggerSpec.eventFilter
if (eventFilter) {
try {
return eventFilter.call(elt, evt) !== true
} catch (e) {
- triggerErrorEvent(getDocument().body, 'htmx:eventFilter:error', { error: e, source: eventFilter.source })
+ const source = eventFilter.source
+ triggerErrorEvent(getDocument().body, 'htmx:eventFilter:error', { error: e, source })
return true
}
}
return false
}
+ /**
+ * @param {Node} elt
+ * @param {TriggerHandler} handler
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {HtmxTriggerSpecification} triggerSpec
+ * @param {boolean} [explicitCancel]
+ */
function addEventListener(elt, handler, nodeData, triggerSpec, explicitCancel) {
const elementData = getInternalData(elt)
+ /** @type {(Node|Window)[]} */
let eltsToListenOn
if (triggerSpec.from) {
eltsToListenOn = querySelectorAllExt(elt, triggerSpec.from)
@@ -1639,10 +2359,12 @@ var htmx = (function() {
if (triggerSpec.changed) {
eltsToListenOn.forEach(function(eltToListenOn) {
const eltToListenOnData = getInternalData(eltToListenOn)
+ // @ts-ignore value will be undefined for non-input elements, which is fine
eltToListenOnData.lastValue = eltToListenOn.value
})
}
forEach(eltsToListenOn, function(eltToListenOn) {
+ /** @type EventListener */
const eventListener = function(evt) {
if (!bodyContains(elt)) {
eltToListenOn.removeEventListener(triggerSpec.trigger, eventListener)
@@ -1668,7 +2390,7 @@ var htmx = (function() {
evt.stopPropagation()
}
if (triggerSpec.target && evt.target) {
- if (!matches(evt.target, triggerSpec.target)) {
+ if (!matches(asElement(evt.target), triggerSpec.target)) {
return
}
}
@@ -1681,10 +2403,12 @@ var htmx = (function() {
}
if (triggerSpec.changed) {
const eltToListenOnData = getInternalData(eltToListenOn)
- if (eltToListenOnData.lastValue === eltToListenOn.value) {
+ // @ts-ignore value will be undefined for non-input elements, which is fine
+ const value = eltToListenOn.value
+ if (eltToListenOnData.lastValue === value) {
return
}
- eltToListenOnData.lastValue = eltToListenOn.value
+ eltToListenOnData.lastValue = value
}
if (elementData.delayed) {
clearTimeout(elementData.delayed)
@@ -1696,12 +2420,12 @@ var htmx = (function() {
if (triggerSpec.throttle > 0) {
if (!elementData.throttle) {
handler(elt, evt)
- elementData.throttle = setTimeout(function() {
+ elementData.throttle = getWindow().setTimeout(function() {
elementData.throttle = null
}, triggerSpec.throttle)
}
} else if (triggerSpec.delay > 0) {
- elementData.delayed = setTimeout(function() { handler(elt, evt) }, triggerSpec.delay)
+ elementData.delayed = getWindow().setTimeout(function() { handler(elt, evt) }, triggerSpec.delay)
} else {
triggerEvent(elt, 'htmx:trigger')
handler(elt, evt)
@@ -1739,6 +2463,9 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ */
function maybeReveal(elt) {
if (!hasAttribute(elt, 'data-hx-revealed') && isScrolledIntoView(elt)) {
elt.setAttribute('data-hx-revealed', 'true')
@@ -1747,13 +2474,19 @@ var htmx = (function() {
triggerEvent(elt, 'revealed')
} else {
// if the node isn't initialized, wait for it before triggering the request
- elt.addEventListener('htmx:afterProcessNode', function(evt) { triggerEvent(elt, 'revealed') }, { once: true })
+ elt.addEventListener('htmx:afterProcessNode', function() { triggerEvent(elt, 'revealed') }, { once: true })
}
}
}
//= ===================================================================
+ /**
+ * @param {Element} elt
+ * @param {TriggerHandler} handler
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {number} delay
+ */
function loadImmediately(elt, handler, nodeData, delay) {
const load = function() {
if (!nodeData.loaded) {
@@ -1762,12 +2495,18 @@ var htmx = (function() {
}
}
if (delay > 0) {
- setTimeout(load, delay)
+ getWindow().setTimeout(load, delay)
} else {
load()
}
}
+ /**
+ * @param {Element} elt
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {HtmxTriggerSpecification[]} triggerSpecs
+ * @returns {boolean}
+ */
function processVerbs(elt, nodeData, triggerSpecs) {
let explicitAction = false
forEach(VERBS, function(verb) {
@@ -1777,7 +2516,8 @@ var htmx = (function() {
nodeData.path = path
nodeData.verb = verb
triggerSpecs.forEach(function(triggerSpec) {
- addTriggerHandler(elt, triggerSpec, nodeData, function(elt, evt) {
+ addTriggerHandler(elt, triggerSpec, nodeData, function(node, evt) {
+ const elt = asElement(node)
if (closest(elt, htmx.config.disableSelector)) {
cleanUpElement(elt)
return
@@ -1790,11 +2530,23 @@ var htmx = (function() {
return explicitAction
}
+ /**
+ * @callback TriggerHandler
+ * @param {Node} elt
+ * @param {Event} [evt]
+ */
+
+ /**
+ * @param {Node} elt
+ * @param {HtmxTriggerSpecification} triggerSpec
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {TriggerHandler} handler
+ */
function addTriggerHandler(elt, triggerSpec, nodeData, handler) {
if (triggerSpec.trigger === 'revealed') {
initScrollHandler()
addEventListener(elt, handler, nodeData, triggerSpec)
- maybeReveal(elt)
+ maybeReveal(asElement(elt))
} else if (triggerSpec.trigger === 'intersect') {
const observerOptions = {}
if (triggerSpec.root) {
@@ -1812,21 +2564,29 @@ var htmx = (function() {
}
}
}, observerOptions)
- observer.observe(elt)
- addEventListener(elt, handler, nodeData, triggerSpec)
+ observer.observe(asElement(elt))
+ addEventListener(asElement(elt), handler, nodeData, triggerSpec)
} else if (triggerSpec.trigger === 'load') {
if (!maybeFilterEvent(triggerSpec, elt, makeEvent('load', { elt }))) {
- loadImmediately(elt, handler, nodeData, triggerSpec.delay)
+ loadImmediately(asElement(elt), handler, nodeData, triggerSpec.delay)
}
} else if (triggerSpec.pollInterval > 0) {
nodeData.polling = true
- processPolling(elt, handler, triggerSpec)
+ processPolling(asElement(elt), handler, triggerSpec)
} else {
addEventListener(elt, handler, nodeData, triggerSpec)
}
}
- function shouldProcessHxOn(elt) {
+ /**
+ * @param {Node} node
+ * @returns {boolean}
+ */
+ function shouldProcessHxOn(node) {
+ const elt = asElement(node)
+ if (!elt) {
+ return false
+ }
const attributes = elt.attributes
for (let j = 0; j < attributes.length; j++) {
const attrName = attributes[j].name
@@ -1838,22 +2598,31 @@ var htmx = (function() {
return false
}
+ /**
+ * @param {Node} elt
+ * @returns {Element[]}
+ */
function findHxOnWildcardElements(elt) {
let node = null
+ /** @type {Element[]} */
const elements = []
if (!(elt instanceof ShadowRoot)) {
if (shouldProcessHxOn(elt)) {
- elements.push(elt)
+ elements.push(asElement(elt))
}
const iter = document.evaluate('.//*[@*[ starts-with(name(), "hx-on:") or starts-with(name(), "data-hx-on:") or' +
' starts-with(name(), "hx-on-") or starts-with(name(), "data-hx-on-") ]]', elt)
- while (node = iter.iterateNext()) elements.push(node)
+ while (node = iter.iterateNext()) elements.push(asElement(node))
}
return elements
}
+ /**
+ * @param {Element} elt
+ * @returns {NodeListOf<Element>|[]}
+ */
function findElementsToProcess(elt) {
if (elt.querySelectorAll) {
const boostedSelector = ', [hx-boost] a, [data-hx-boost] a, a[hx-boost], a[data-hx-boost]'
@@ -1865,23 +2634,35 @@ var htmx = (function() {
}
}
- // Handle submit buttons/inputs that have the form attribute set
- // see https://developer.mozilla.org/docs/Web/HTML/Element/button
+ /**
+ * Handle submit buttons/inputs that have the form attribute set
+ * see https://developer.mozilla.org/docs/Web/HTML/Element/button
+ * @param {Event} evt
+ */
function maybeSetLastButtonClicked(evt) {
- const elt = closest(evt.target, "button, input[type='submit']")
+ const elt = /** @type {HTMLButtonElement|HTMLInputElement} */ (closest(asElement(evt.target), "button, input[type='submit']"))
const internalData = getRelatedFormData(evt)
if (internalData) {
internalData.lastButtonClicked = elt
}
- };
+ }
+
+ /**
+ * @param {Event} evt
+ */
function maybeUnsetLastButtonClicked(evt) {
const internalData = getRelatedFormData(evt)
if (internalData) {
internalData.lastButtonClicked = null
}
}
+
+ /**
+ * @param {Event} evt
+ * @returns {HtmxNodeInternalData|undefined}
+ */
function getRelatedFormData(evt) {
- const elt = closest(evt.target, "button, input[type='submit']")
+ const elt = closest(asElement(evt.target), "button, input[type='submit']")
if (!elt) {
return
}
@@ -1891,6 +2672,10 @@ var htmx = (function() {
}
return getInternalData(form)
}
+
+ /**
+ * @param {EventTarget} elt
+ */
function initButtonTracking(elt) {
// need to handle both click and focus in:
// focusin - in case someone tabs in to a button and hits the space bar
@@ -1900,28 +2685,20 @@ var htmx = (function() {
elt.addEventListener('focusout', maybeUnsetLastButtonClicked)
}
- function countCurlies(line) {
- const tokens = tokenizeString(line)
- let netCurlies = 0
- for (let i = 0; i < tokens.length; i++) {
- const token = tokens[i]
- if (token === '{') {
- netCurlies++
- } else if (token === '}') {
- netCurlies--
- }
- }
- return netCurlies
- }
-
+ /**
+ * @param {EventTarget} elt
+ * @param {string} eventName
+ * @param {string} code
+ */
function addHxOnEventHandler(elt, eventName, code) {
const nodeData = getInternalData(elt)
if (!Array.isArray(nodeData.onHandlers)) {
nodeData.onHandlers = []
}
let func
+ /** @type EventListener */
const listener = function(e) {
- return maybeEval(elt, function() {
+ maybeEval(elt, function() {
if (!func) {
func = new Function('event', code)
}
@@ -1932,6 +2709,9 @@ var htmx = (function() {
nodeData.onHandlers.push({ event: eventName, listener })
}
+ /**
+ * @param {Element} elt
+ */
function processHxOnWildcard(elt) {
// wipe any previous on handlers so that this function takes precedence
deInitOnHandlers(elt)
@@ -1959,6 +2739,9 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element|HTMLInputElement} elt
+ */
function initNode(elt) {
if (closest(elt, htmx.config.disableSelector)) {
cleanUpElement(elt)
@@ -1973,7 +2756,9 @@ var htmx = (function() {
triggerEvent(elt, 'htmx:beforeProcessNode')
+ // @ts-ignore value will be undefined for non-input elements, which is fine
if (elt.value) {
+ // @ts-ignore
nodeData.lastValue = elt.value
}
@@ -2002,6 +2787,13 @@ var htmx = (function() {
}
}
+ /**
+ * Processes new content, enabling htmx behavior. This can be useful if you have content that is added to the DOM outside of the normal htmx request cycle but still want htmx attributes to work.
+ *
+ * @see https://htmx.org/api/#process
+ *
+ * @param {Element|string} elt element to process
+ */
function processNode(elt) {
elt = resolveTarget(elt)
if (closest(elt, htmx.config.disableSelector)) {
@@ -2017,10 +2809,19 @@ var htmx = (function() {
// Event/Log Support
//= ===================================================================
+ /**
+ * @param {string} str
+ * @returns {string}
+ */
function kebabEventName(str) {
return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
}
+ /**
+ * @param {string} eventName
+ * @param {any} detail
+ * @returns {CustomEvent}
+ */
function makeEvent(eventName, detail) {
let evt
if (window.CustomEvent && typeof window.CustomEvent === 'function') {
@@ -2034,10 +2835,19 @@ var htmx = (function() {
return evt
}
+ /**
+ * @param {EventTarget|string} elt
+ * @param {string} eventName
+ * @param {any=} detail
+ */
function triggerErrorEvent(elt, eventName, detail) {
triggerEvent(elt, eventName, mergeObjects({ error: eventName }, detail))
}
+ /**
+ * @param {string} eventName
+ * @returns {boolean}
+ */
function ignoreEventForLogging(eventName) {
return eventName === 'htmx:afterProcessNode'
}
@@ -2047,8 +2857,8 @@ var htmx = (function() {
* executes the provided function using each of the active extensions. It should
* be called internally at every extendable execution point in htmx.
*
- * @param {HTMLElement} elt
- * @param {(extension:import("./htmx").HtmxExtension) => void} toDo
+ * @param {Element} elt
+ * @param {(extension:HtmxExtension) => void} toDo
* @returns void
*/
function withExtensions(elt, toDo) {
@@ -2069,6 +2879,16 @@ var htmx = (function() {
}
}
+ /**
+ * Triggers a given event on an element
+ *
+ * @see https://htmx.org/api/#trigger
+ *
+ * @param {EventTarget|string} elt the element to trigger the event on
+ * @param {string} eventName the name of the event to trigger
+ * @param {any=} detail details for the event
+ * @returns {boolean}
+ */
function triggerEvent(elt, eventName, detail) {
elt = resolveTarget(elt)
if (detail == null) {
@@ -2089,7 +2909,7 @@ var htmx = (function() {
const kebabedEvent = makeEvent(kebabName, event.detail)
eventResult = eventResult && elt.dispatchEvent(kebabedEvent)
}
- withExtensions(elt, function(extension) {
+ withExtensions(asElement(elt), function(extension) {
eventResult = eventResult && (extension.onEvent(eventName, event) !== false && !event.defaultPrevented)
})
return eventResult
@@ -2100,11 +2920,18 @@ var htmx = (function() {
//= ===================================================================
let currentPathForHistory = location.pathname + location.search
+ /**
+ * @returns {Element}
+ */
function getHistoryElement() {
const historyElt = getDocument().querySelector('[hx-history-elt],[data-hx-history-elt]')
return historyElt || getDocument().body
}
+ /**
+ * @param {string} url
+ * @param {Element} rootElt
+ */
function saveToHistoryCache(url, rootElt) {
if (!canAccessLocalStorage()) {
return
@@ -2131,6 +2958,7 @@ var htmx = (function() {
}
}
+ /** @type HtmxHistoryItem */
const newHistoryItem = { url, content: innerHTML, title, scroll }
triggerEvent(getDocument().body, 'htmx:historyItemCreated', { item: newHistoryItem, cache: historyCache })
@@ -2152,6 +2980,18 @@ var htmx = (function() {
}
}
+ /**
+ * @typedef {Object} HtmxHistoryItem
+ * @property {string} url
+ * @property {string} content
+ * @property {string} title
+ * @property {number} scroll
+ */
+
+ /**
+ * @param {string} url
+ * @returns {HtmxHistoryItem|null}
+ */
function getCachedHistory(url) {
if (!canAccessLocalStorage()) {
return null
@@ -2168,9 +3008,13 @@ var htmx = (function() {
return null
}
+ /**
+ * @param {Element} elt
+ * @returns {string}
+ */
function cleanInnerHtmlForHistory(elt) {
const className = htmx.config.requestClass
- const clone = elt.cloneNode(true)
+ const clone = /** @type Element */ (elt.cloneNode(true))
forEach(findAll(clone, '.' + className), function(child) {
removeClassFromElement(child, className)
})
@@ -2201,6 +3045,9 @@ var htmx = (function() {
if (htmx.config.historyEnabled) history.replaceState({ htmx: true }, getDocument().title, window.location.href)
}
+ /**
+ * @param {string} path
+ */
function pushUrlIntoHistory(path) {
// remove the cache buster parameter, if any
if (htmx.config.getCacheBusterParam) {
@@ -2215,17 +3062,26 @@ var htmx = (function() {
currentPathForHistory = path
}
+ /**
+ * @param {string} path
+ */
function replaceUrlInHistory(path) {
if (htmx.config.historyEnabled) history.replaceState({ htmx: true }, '', path)
currentPathForHistory = path
}
+ /**
+ * @param {HtmxSettleTask[]} tasks
+ */
function settleImmediately(tasks) {
forEach(tasks, function(task) {
- task.call()
+ task.call(undefined)
})
}
+ /**
+ * @param {string} path
+ */
function loadHistoryFromServer(path) {
const request = new XMLHttpRequest()
const details = { path, xhr: request }
@@ -2238,13 +3094,12 @@ var htmx = (function() {
if (this.status >= 200 && this.status < 400) {
triggerEvent(getDocument().body, 'htmx:historyCacheMissLoad', details)
const fragment = makeFragment(this.response)
- // @ts-ignore
+ /** @type ParentNode */
const content = fragment.querySelector('[hx-history-elt],[data-hx-history-elt]') || fragment
const historyElement = getHistoryElement()
const settleInfo = makeSettleInfo(historyElement)
handleTitle(fragment.title)
- // @ts-ignore
swapInnerHTML(historyElement, content, settleInfo)
settleImmediately(settleInfo.tasks)
currentPathForHistory = path
@@ -2256,6 +3111,9 @@ var htmx = (function() {
request.send()
}
+ /**
+ * @param {string} [path]
+ */
function restoreHistory(path) {
saveCurrentPageToHistory()
path = path || location.pathname + location.search
@@ -2267,14 +3125,15 @@ var htmx = (function() {
handleTitle(fragment.title)
swapInnerHTML(historyElement, fragment, settleInfo)
settleImmediately(settleInfo.tasks)
- setTimeout(function() {
+ getWindow().setTimeout(function() {
window.scrollTo(0, cached.scroll)
}, 0) // next 'tick', so browser has time to render layout
currentPathForHistory = path
triggerEvent(getDocument().body, 'htmx:historyRestore', { path, item: cached })
} else {
if (htmx.config.refreshOnHistoryMiss) {
- // @ts-ignore: optional parameter in reload() function throws error
+ // @ts-ignore: optional parameter in reload() function throws error
+ // noinspection JSUnresolvedReference
window.location.reload(true)
} else {
loadHistoryFromServer(path)
@@ -2282,8 +3141,12 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @returns {Element[]}
+ */
function addRequestIndicatorClasses(elt) {
- let indicators = findAttributeTargets(elt, 'hx-indicator')
+ let indicators = /** @type Element[] */ (findAttributeTargets(elt, 'hx-indicator'))
if (indicators == null) {
indicators = [elt]
}
@@ -2295,8 +3158,12 @@ var htmx = (function() {
return indicators
}
+ /**
+ * @param {Element} elt
+ * @returns {Element[]}
+ */
function disableElements(elt) {
- let disabledElts = findAttributeTargets(elt, 'hx-disabled-elt')
+ let disabledElts = /** @type Element[] */ (findAttributeTargets(elt, 'hx-disabled-elt'))
if (disabledElts == null) {
disabledElts = []
}
@@ -2308,6 +3175,10 @@ var htmx = (function() {
return disabledElts
}
+ /**
+ * @param {Element[]} indicators
+ * @param {Element[]} disabled
+ */
function removeRequestIndicators(indicators, disabled) {
forEach(indicators, function(ic) {
const internalData = getInternalData(ic)
@@ -2330,8 +3201,8 @@ var htmx = (function() {
//= ===================================================================
/**
- * @param {HTMLElement[]} processed
- * @param {HTMLElement} elt
+ * @param {Element[]} processed
+ * @param {Element} elt
* @returns {boolean}
*/
function haveSeenNode(processed, elt) {
@@ -2344,7 +3215,13 @@ var htmx = (function() {
return false
}
- function shouldInclude(elt) {
+ /**
+ * @param {Element} element
+ * @return {boolean}
+ */
+ function shouldInclude(element) {
+ // Cast to trick tsc, undefined values will work fine here
+ const elt = /** @type {HTMLInputElement} */ (element)
if (elt.name === '' || elt.name == null || elt.disabled || closest(elt, 'fieldset[disabled]')) {
return false
}
@@ -2359,7 +3236,7 @@ var htmx = (function() {
}
/** @param {string} name
- * @param {string|Array} value
+ * @param {string|Array|FormDataEntryValue} value
* @param {FormData} formData */
function addValueToFormData(name, value, formData) {
if (name != null && value != null) {
@@ -2388,10 +3265,10 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement[]} processed
+ * @param {Element[]} processed
* @param {FormData} formData
* @param {HtmxElementValidationError[]} errors
- * @param {HTMLElement|HTMLInputElement|HTMLFormElement} elt
+ * @param {Element|HTMLInputElement|HTMLSelectElement|HTMLFormElement} elt
* @param {boolean} validate
*/
function processInputValue(processed, formData, errors, elt, validate) {
@@ -2402,12 +3279,13 @@ var htmx = (function() {
}
if (shouldInclude(elt)) {
const name = getRawAttribute(elt, 'name')
+ // @ts-ignore value will be undefined for non-input elements, which is fine
let value = elt.value
- if (elt.multiple && elt.tagName === 'SELECT') {
- value = toArray(elt.querySelectorAll('option:checked')).map(function(e) { return e.value })
+ if (elt instanceof HTMLSelectElement && elt.multiple) {
+ value = toArray(elt.querySelectorAll('option:checked')).map(function(e) { return (/** @type HTMLOptionElement */(e)).value })
}
// include file inputs
- if (elt.files) {
+ if (elt instanceof HTMLInputElement && elt.files) {
value = toArray(elt.files)
}
addValueToFormData(name, value, formData)
@@ -2415,7 +3293,7 @@ var htmx = (function() {
validateElement(elt, errors)
}
}
- if (matches(elt, 'form')) {
+ if (elt instanceof HTMLFormElement) {
forEach(elt.elements, function(input) {
if (processed.indexOf(input) >= 0) {
// The input has already been processed and added to the values, but the FormData that will be
@@ -2436,15 +3314,12 @@ var htmx = (function() {
}
/**
- * @typedef {{elt: HTMLElement, message: string, validity: ValidityState}} HtmxElementValidationError
- */
-
- /**
*
- * @param {HTMLElement|HTMLObjectElement} element
+ * @param {Element} elt
* @param {HtmxElementValidationError[]} errors
*/
- function validateElement(element, errors) {
+ function validateElement(elt, errors) {
+ const element = /** @type {HTMLElement & ElementInternals} */ (elt)
if (element.willValidate) {
triggerEvent(element, 'htmx:validation:validate')
if (!element.checkValidity()) {
@@ -2471,12 +3346,12 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement|HTMLFormElement} elt
- * @param {string} verb
+ * @param {Element|HTMLFormElement} elt
+ * @param {HttpVerb} verb
* @returns {{errors: HtmxElementValidationError[], formData: FormData, values: Object}}
*/
function getInputValues(elt, verb) {
- /** @type HTMLElement[] */
+ /** @type Element[] */
const processed = []
const formData = new FormData()
const priorityFormData = new FormData()
@@ -2489,7 +3364,7 @@ var htmx = (function() {
// only validate when form is directly submitted and novalidate or formnovalidate are not set
// or if the element has an explicit hx-validate="true" on it
- let validate = (matches(elt, 'form') && elt.noValidate !== true) || getAttributeValue(elt, 'hx-validate') === 'true'
+ let validate = (elt instanceof HTMLFormElement && elt.noValidate !== true) || getAttributeValue(elt, 'hx-validate') === 'true'
if (internalData.lastButtonClicked) {
validate = validate && internalData.lastButtonClicked.formNoValidate !== true
}
@@ -2505,7 +3380,7 @@ var htmx = (function() {
// if a button or submit was clicked last, include its value
if (internalData.lastButtonClicked || elt.tagName === 'BUTTON' ||
(elt.tagName === 'INPUT' && getRawAttribute(elt, 'type') === 'submit')) {
- const button = internalData.lastButtonClicked || elt
+ const button = internalData.lastButtonClicked || (/** @type HTMLInputElement|HTMLButtonElement */(elt))
const name = getRawAttribute(button, 'name')
addValueToFormData(name, button.value, priorityFormData)
}
@@ -2513,10 +3388,10 @@ var htmx = (function() {
// include any explicit includes
const includes = findAttributeTargets(elt, 'hx-include')
forEach(includes, function(node) {
- processInputValue(processed, formData, errors, node, validate)
+ processInputValue(processed, formData, errors, asElement(node), validate)
// if a non-form is included, include any input values within it
if (!matches(node, 'form')) {
- forEach(node.querySelectorAll(INPUT_SELECTOR), function(descendant) {
+ forEach(asParentNode(node).querySelectorAll(INPUT_SELECTOR), function(descendant) {
processInputValue(processed, formData, errors, descendant, validate)
})
}
@@ -2564,12 +3439,13 @@ var htmx = (function() {
//= ===================================================================
/**
- * @param {HTMLElement} elt
- * @param {HTMLElement} target
+ * @param {Element} elt
+ * @param {Element} target
* @param {string} prompt
- * @returns {Object} // TODO: Define/Improve HtmxHeaderSpecification
+ * @returns {HtmxHeaderSpecification}
*/
function getHeaders(elt, target, prompt) {
+ /** @type HtmxHeaderSpecification */
const headers = {
'HX-Request': 'true',
'HX-Trigger': getRawAttribute(elt, 'id'),
@@ -2592,7 +3468,7 @@ var htmx = (function() {
* and returns a new object that only contains keys that are
* specified by the closest "hx-params" attribute
* @param {FormData} inputValues
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @returns {FormData}
*/
function filterValues(inputValues, elt) {
@@ -2623,19 +3499,22 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @return {boolean}
+ */
function isAnchorLink(elt) {
- return getRawAttribute(elt, 'href') && getRawAttribute(elt, 'href').indexOf('#') >= 0
+ return !!getRawAttribute(elt, 'href') && getRawAttribute(elt, 'href').indexOf('#') >= 0
}
/**
- *
- * @param {HTMLElement} elt
- * @param {import("./htmx").HtmxSwapStyle} swapInfoOverride
- * @returns {import("./htmx").HtmxSwapSpecification}
+ * @param {Element} elt
+ * @param {HtmxSwapStyle} [swapInfoOverride]
+ * @returns {HtmxSwapSpecification}
*/
function getSwapSpecification(elt, swapInfoOverride) {
const swapInfo = swapInfoOverride || getClosestAttributeValue(elt, 'hx-swap')
- /** @type import("./htmx").HtmxSwapSpecification */
+ /** @type HtmxSwapSpecification */
const swapSpec = {
swapStyle: getInternalData(elt).boosted ? 'innerHTML' : htmx.config.defaultSwapStyle,
swapDelay: htmx.config.defaultSwapDelay,
@@ -2662,6 +3541,7 @@ var htmx = (function() {
var splitSpec = scrollSpec.split(':')
const scrollVal = splitSpec.pop()
var selectorVal = splitSpec.length > 0 ? splitSpec.join(':') : null
+ // @ts-ignore
swapSpec.scroll = scrollVal
swapSpec.scrollTarget = selectorVal
} else if (value.indexOf('show:') === 0) {
@@ -2685,6 +3565,10 @@ var htmx = (function() {
return swapSpec
}
+ /**
+ * @param {Element} elt
+ * @return {boolean}
+ */
function usesFormData(elt) {
return getClosestAttributeValue(elt, 'hx-encoding') === 'multipart/form-data' ||
(matches(elt, 'form') && getRawAttribute(elt, 'enctype') === 'multipart/form-data')
@@ -2692,7 +3576,7 @@ var htmx = (function() {
/**
* @param {XMLHttpRequest} xhr
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {FormData} filteredParameters
* @returns {*|string|null}
*/
@@ -2717,19 +3601,23 @@ var htmx = (function() {
/**
*
* @param {Element} target
- * @returns {import("./htmx").HtmxSettleInfo}
+ * @returns {HtmxSettleInfo}
*/
function makeSettleInfo(target) {
return { tasks: [], elts: [target] }
}
+ /**
+ * @param {Element[]} content
+ * @param {HtmxSwapSpecification} swapSpec
+ */
function updateScrollState(content, swapSpec) {
const first = content[0]
const last = content[content.length - 1]
if (swapSpec.scroll) {
var target = null
if (swapSpec.scrollTarget) {
- target = querySelectorExt(first, swapSpec.scrollTarget)
+ target = asElement(querySelectorExt(first, swapSpec.scrollTarget))
}
if (swapSpec.scroll === 'top' && (first || target)) {
target = target || first
@@ -2747,21 +3635,23 @@ var htmx = (function() {
if (swapSpec.showTarget === 'window') {
targetStr = 'body'
}
- target = querySelectorExt(first, targetStr)
+ target = asElement(querySelectorExt(first, targetStr))
}
if (swapSpec.show === 'top' && (first || target)) {
target = target || first
+ // @ts-ignore For some reason tsc doesn't recognize "instant" as a valid option for now
target.scrollIntoView({ block: 'start', behavior: htmx.config.scrollBehavior })
}
if (swapSpec.show === 'bottom' && (last || target)) {
target = target || last
+ // @ts-ignore For some reason tsc doesn't recognize "instant" as a valid option for now
target.scrollIntoView({ block: 'end', behavior: htmx.config.scrollBehavior })
}
}
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {string} attr
* @param {boolean=} evalAsDefault
* @param {Object=} values
@@ -2805,9 +3695,15 @@ var htmx = (function() {
}
}
}
- return getValuesForElement(parentElt(elt), attr, evalAsDefault, values)
+ return getValuesForElement(asElement(parentElt(elt)), attr, evalAsDefault, values)
}
+ /**
+ * @param {EventTarget|string} elt
+ * @param {() => any} toEval
+ * @param {any=} defaultVal
+ * @returns {any}
+ */
function maybeEval(elt, toEval, defaultVal) {
if (htmx.config.allowEval) {
return toEval()
@@ -2818,7 +3714,7 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {*?} expressionVars
* @returns
*/
@@ -2827,7 +3723,7 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {*?} expressionVars
* @returns
*/
@@ -2836,13 +3732,18 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @returns {FormData}
*/
function getExpressionVars(elt) {
return formDataFromObject(mergeObjects(getHXVarsForElement(elt), getHXValsForElement(elt)))
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @param {string} header
+ * @param {string|null} headerValue
+ */
function safelySetHeaderValue(xhr, header, headerValue) {
if (headerValue !== null) {
try {
@@ -2855,6 +3756,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @return {string}
+ */
function getPathFromResponse(xhr) {
// NB: IE11 does not support this stuff
if (xhr.responseURL && typeof (URL) !== 'undefined') {
@@ -2867,14 +3772,29 @@ var htmx = (function() {
}
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @param {RegExp} regexp
+ * @return {boolean}
+ */
function hasHeader(xhr, regexp) {
return regexp.test(xhr.getAllResponseHeaders())
}
+ /**
+ * Issues an htmx-style AJAX request
+ *
+ * @see https://htmx.org/api/#ajax
+ *
+ * @param {HttpVerb} verb
+ * @param {string} path the URL path to make the AJAX
+ * @param {Element|string|HtmxAjaxHelperContext} context the element to target (defaults to the **body**) | a selector for the target | a context object that contains any of the following
+ * @return {Promise<void>} Promise that resolves immediately if no request is sent, or when the request is complete
+ */
function ajaxHelper(verb, path, context) {
- verb = verb.toLowerCase()
+ verb = (/** @type HttpVerb */(verb.toLowerCase()))
if (context) {
- if (context instanceof Element || isType(context, 'String')) {
+ if (context instanceof Element || typeof context === 'string') {
return issueAjaxRequest(verb, path, null, null, {
targetOverride: resolveTarget(context),
returnPromise: true
@@ -2898,6 +3818,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @return {Element[]}
+ */
function hierarchyForElt(elt) {
const arr = []
while (elt) {
@@ -2907,6 +3831,12 @@ var htmx = (function() {
return arr
}
+ /**
+ * @param {Element} elt
+ * @param {string} path
+ * @param {HtmxRequestConfig} requestConfig
+ * @return {boolean}
+ */
function verifyPath(elt, path, requestConfig) {
let sameHost
let url
@@ -2928,6 +3858,10 @@ var htmx = (function() {
return triggerEvent(elt, 'htmx:validateUrl', mergeObjects({ url, sameHost }, requestConfig))
}
+ /**
+ * @param {Object|FormData} obj
+ * @return {FormData}
+ */
function formDataFromObject(obj) {
if (obj instanceof FormData) return obj
const formData = new FormData()
@@ -2947,7 +3881,7 @@ var htmx = (function() {
/**
* @param {FormData} formData
- * @param {string|Symbol} name
+ * @param {string} name
* @param {Array} array
* @returns {Array}
*/
@@ -2995,7 +3929,7 @@ var htmx = (function() {
get: function(target, name) {
if (typeof name === 'symbol') {
// Forward symbol calls to the FormData itself directly
- return Reflect.get(...arguments)
+ return Reflect.get(target, name)
}
if (name === 'toJSON') {
// Support JSON.stringify call on proxy
@@ -3022,6 +3956,9 @@ var htmx = (function() {
}
},
set: function(target, name, value) {
+ if (typeof name !== 'string') {
+ return false
+ }
target.delete(name)
if (typeof value.forEach === 'function') {
value.forEach(function(v) { target.append(name, v) })
@@ -3031,7 +3968,9 @@ var htmx = (function() {
return true
},
deleteProperty: function(target, name) {
- target.delete(name)
+ if (typeof name === 'string') {
+ target.delete(name)
+ }
return true
},
// Support Object.assign call from proxy
@@ -3044,6 +3983,15 @@ var htmx = (function() {
})
}
+ /**
+ * @param {HttpVerb} verb
+ * @param {string} path
+ * @param {Element} elt
+ * @param {Event} event
+ * @param {HtmxAjaxEtc} [etc]
+ * @param {boolean} [confirmed]
+ * @return {Promise<void>}
+ */
function issueAjaxRequest(verb, path, elt, event, etc, confirmed) {
let resolve = null
let reject = null
@@ -3065,7 +4013,7 @@ var htmx = (function() {
maybeCall(resolve)
return promise
}
- const target = etc.targetOverride || getTarget(elt)
+ const target = etc.targetOverride || asElement(getTarget(elt))
if (target == null || target == DUMMY_ELT) {
triggerErrorEvent(elt, 'htmx:targetError', { target: getAttributeValue(elt, 'hx-target') })
maybeCall(reject)
@@ -3085,7 +4033,7 @@ var htmx = (function() {
if (buttonVerb != null) {
// ignore buttons with formmethod="dialog"
if (buttonVerb.toLowerCase() !== 'dialog') {
- verb = buttonVerb
+ verb = (/** @type HttpVerb */(buttonVerb))
}
}
}
@@ -3113,7 +4061,7 @@ var htmx = (function() {
if (selector === 'this') {
syncElt = findThisElement(elt, 'hx-sync')
} else {
- syncElt = querySelectorExt(elt, selector)
+ syncElt = asElement(querySelectorExt(elt, selector))
}
// default to the drop strategy
syncStrategy = (syncStrings[1] || 'drop').trim()
@@ -3233,12 +4181,19 @@ var htmx = (function() {
path = getDocument().location.href
}
+ /**
+ * @type {Object}
+ * @property {boolean} [credentials]
+ * @property {number} [timeout]
+ * @property {boolean} [noHeaders]
+ */
const requestAttrValues = getValuesForElement(elt, 'hx-request')
const eltIsBoosted = getInternalData(elt).boosted
let useUrlParams = htmx.config.methodsThatUseUrlParams.indexOf(verb) >= 0
+ /** @type HtmxRequestConfig */
const requestConfig = {
boosted: eltIsBoosted,
useUrlParams,
@@ -3302,7 +4257,7 @@ var htmx = (function() {
triggerErrorEvent(elt, 'htmx:invalidPath', requestConfig)
maybeCall(reject)
return promise
- };
+ }
xhr.open(verb.toUpperCase(), finalPath, true)
xhr.overrideMimeType('text/html')
@@ -3321,6 +4276,7 @@ var htmx = (function() {
}
}
+ /** @type {HtmxResponseInfo} */
const responseInfo = {
xhr,
target,
@@ -3331,6 +4287,7 @@ var htmx = (function() {
pathInfo: {
requestPath: path,
finalRequestPath: finalPath,
+ responsePath: null,
anchor
}
}
@@ -3411,6 +4368,17 @@ var htmx = (function() {
return promise
}
+ /**
+ * @typedef {Object} HtmxHistoryUpdate
+ * @property {string|null} [type]
+ * @property {string|null} [path]
+ */
+
+ /**
+ * @param {Element} elt
+ * @param {HtmxResponseInfo} responseInfo
+ * @return {HtmxHistoryUpdate}
+ */
function determineHistoryUpdates(elt, responseInfo) {
const xhr = responseInfo.xhr
@@ -3491,13 +4459,23 @@ var htmx = (function() {
}
}
+ /**
+ * @param {HtmxResponseHandlingConfig} responseHandlingConfig
+ * @param {number} status
+ * @return {boolean}
+ */
function codeMatches(responseHandlingConfig, status) {
var regExp = new RegExp(responseHandlingConfig.code)
- return regExp.test(status)
+ return regExp.test(status.toString(10))
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @return {HtmxResponseHandlingConfig}
+ */
function resolveResponseHandling(xhr) {
for (var i = 0; i < htmx.config.responseHandling.length; i++) {
+ /** @type HtmxResponseHandlingConfig */
var responseHandlingElement = htmx.config.responseHandling[i]
if (codeMatches(responseHandlingElement, xhr.status)) {
return responseHandlingElement
@@ -3509,6 +4487,9 @@ var htmx = (function() {
}
}
+ /**
+ * @param {string} title
+ */
function handleTitle(title) {
if (title) {
const titleElt = find('title')
@@ -3520,6 +4501,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @param {HtmxResponseInfo} responseInfo
+ */
function handleAjaxResponse(elt, responseInfo) {
const xhr = responseInfo.xhr
let target = responseInfo.target
@@ -3535,14 +4520,15 @@ var htmx = (function() {
if (hasHeader(xhr, /HX-Location:/i)) {
saveCurrentPageToHistory()
let redirectPath = xhr.getResponseHeader('HX-Location')
- var swapSpec
+ /** @type {HtmxAjaxHelperContext&{path:string}} */
+ var redirectSwapSpec
if (redirectPath.indexOf('{') === 0) {
- swapSpec = parseJSON(redirectPath)
+ redirectSwapSpec = parseJSON(redirectPath)
// what's the best way to throw an error if the user didn't include this
- redirectPath = swapSpec.path
- delete swapSpec.path
+ redirectPath = redirectSwapSpec.path
+ delete redirectSwapSpec.path
}
- ajaxHelper('GET', redirectPath, swapSpec).then(function() {
+ ajaxHelper('get', redirectPath, redirectSwapSpec).then(function() {
pushUrlIntoHistory(redirectPath)
})
return
@@ -3565,7 +4551,7 @@ var htmx = (function() {
if (xhr.getResponseHeader('HX-Retarget') === 'this') {
responseInfo.target = elt
} else {
- responseInfo.target = querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget'))
+ responseInfo.target = asElement(querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget')))
}
}
@@ -3577,7 +4563,7 @@ var htmx = (function() {
let ignoreTitle = htmx.config.ignoreTitle || responseHandling.ignoreTitle
let selectOverride = responseHandling.select
if (responseHandling.target) {
- responseInfo.target = querySelectorExt(elt, responseHandling.target)
+ responseInfo.target = asElement(querySelectorExt(elt, responseHandling.target))
}
var swapOverride = etc.swapOverride
if (swapOverride == null && responseHandling.swapOverride) {
@@ -3589,7 +4575,7 @@ var htmx = (function() {
if (xhr.getResponseHeader('HX-Retarget') === 'this') {
responseInfo.target = elt
} else {
- responseInfo.target = querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget'))
+ responseInfo.target = asElement(querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget')))
}
}
if (hasHeader(xhr, /HX-Reswap:/i)) {
@@ -3597,6 +4583,7 @@ var htmx = (function() {
}
var serverResponse = xhr.response
+ /** @type HtmxBeforeSwapDetails */
var beforeSwapDetails = mergeObjects({
shouldSwap,
serverResponse,
@@ -3713,7 +4700,9 @@ var htmx = (function() {
if (shouldTransition &&
triggerEvent(elt, 'htmx:beforeTransition', responseInfo) &&
- typeof Promise !== 'undefined' && document.startViewTransition) {
+ typeof Promise !== 'undefined' &&
+ // @ts-ignore experimental feature atm
+ document.startViewTransition) {
const settlePromise = new Promise(function(_resolve, _reject) {
settleResolve = _resolve
settleReject = _reject
@@ -3721,6 +4710,7 @@ var htmx = (function() {
// wrap the original doSwap() in a call to startViewTransition()
const innerDoSwap = doSwap
doSwap = function() {
+ // @ts-ignore experimental feature atm
document.startViewTransition(function() {
innerDoSwap()
return settlePromise
@@ -3729,7 +4719,7 @@ var htmx = (function() {
}
if (swapSpec.swapDelay > 0) {
- setTimeout(doSwap, swapSpec.swapDelay)
+ getWindow().setTimeout(doSwap, swapSpec.swapDelay)
} else {
doSwap()
}
@@ -3743,13 +4733,13 @@ var htmx = (function() {
// Extensions API
//= ===================================================================
- /** @type {Object<string, import("./htmx").HtmxExtension>} */
+ /** @type {Object<string, HtmxExtension>} */
const extensions = {}
/**
- * extensionBase defines the default functions for all extensions.
- * @returns {import("./htmx").HtmxExtension}
- */
+ * extensionBase defines the default functions for all extensions.
+ * @returns {HtmxExtension}
+ */
function extensionBase() {
return {
init: function(api) { return null },
@@ -3762,11 +4752,13 @@ var htmx = (function() {
}
/**
- * defineExtension initializes the extension and adds it to the htmx registry
- *
- * @param {string} name
- * @param {import("./htmx").HtmxExtension} extension
- */
+ * defineExtension initializes the extension and adds it to the htmx registry
+ *
+ * @see https://htmx.org/api/#defineExtension
+ *
+ * @param {string} name the extension name
+ * @param {HtmxExtension} extension the extension definition
+ */
function defineExtension(name, extension) {
if (extension.init) {
extension.init(internalAPI)
@@ -3775,21 +4767,24 @@ var htmx = (function() {
}
/**
- * removeExtension removes an extension from the htmx registry
- *
- * @param {string} name
- */
+ * removeExtension removes an extension from the htmx registry
+ *
+ * @see https://htmx.org/api/#removeExtension
+ *
+ * @param {string} name
+ */
function removeExtension(name) {
delete extensions[name]
}
/**
- * getExtensions searches up the DOM tree to return all extensions that can be applied to a given element
- *
- * @param {HTMLElement} elt
- * @param {import("./htmx").HtmxExtension[]=} extensionsToReturn
- * @param {import("./htmx").HtmxExtension[]=} extensionsToIgnore
- */
+ * getExtensions searches up the DOM tree to return all extensions that can be applied to a given element
+ *
+ * @param {Element} elt
+ * @param {HtmxExtension[]=} extensionsToReturn
+ * @param {string[]=} extensionsToIgnore
+ * @returns {HtmxExtension[]}
+ */
function getExtensions(elt, extensionsToReturn, extensionsToIgnore) {
if (extensionsToReturn == undefined) {
extensionsToReturn = []
@@ -3816,7 +4811,7 @@ var htmx = (function() {
}
})
}
- return getExtensions(parentElt(elt), extensionsToReturn, extensionsToIgnore)
+ return getExtensions(asElement(parentElt(elt)), extensionsToReturn, extensionsToIgnore)
}
//= ===================================================================
@@ -3828,12 +4823,12 @@ var htmx = (function() {
})
/**
- * Execute a function now if DOMContentLoaded has fired, otherwise listen for it.
- *
- * This function uses isReady because there is no realiable way to ask the browswer whether
- * the DOMContentLoaded event has already been fired; there's a gap between DOMContentLoaded
- * firing and readystate=complete.
- */
+ * Execute a function now if DOMContentLoaded has fired, otherwise listen for it.
+ *
+ * This function uses isReady because there is no reliable way to ask the browser whether
+ * the DOMContentLoaded event has already been fired; there's a gap between DOMContentLoaded
+ * firing and readystate=complete.
+ */
function ready(fn) {
// Checking readyState here is a failsafe in case the htmx script tag entered the DOM by
// some means other than the initial page load.
@@ -3856,9 +4851,9 @@ var htmx = (function() {
}
function getMetaConfig() {
+ /** @type HTMLMetaElement */
const element = getDocument().querySelector('meta[name="htmx-config"]')
if (element) {
- // @ts-ignore
return parseJSON(element.content)
} else {
return null
@@ -3906,7 +4901,7 @@ var htmx = (function() {
}
}
}
- setTimeout(function() {
+ getWindow().setTimeout(function() {
triggerEvent(body, 'htmx:load', {}) // give ready handlers a chance to load up before firing this event
body = null // kill reference for gc
}, 0)
@@ -3914,4 +4909,177 @@ var htmx = (function() {
return htmx
})()
+
+/** @typedef {'get'|'head'|'post'|'put'|'delete'|'connect'|'options'|'trace'|'patch'} HttpVerb */
+
+/**
+ * @typedef {Object} SwapOptions
+ * @property {string} [select]
+ * @property {string} [selectOOB]
+ * @property {*} [eventInfo]
+ * @property {string} [anchor]
+ * @property {Element} [contextElement]
+ * @property {swapCallback} [afterSwapCallback]
+ * @property {swapCallback} [afterSettleCallback]
+ */
+
+/**
+ * @callback swapCallback
+ */
+
+/**
+ * @typedef {'innerHTML' | 'outerHTML' | 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'delete' | 'none' | string} HtmxSwapStyle
+ */
+
+/**
+ * @typedef HtmxSwapSpecification
+ * @property {HtmxSwapStyle} swapStyle
+ * @property {number} swapDelay
+ * @property {number} settleDelay
+ * @property {boolean} [transition]
+ * @property {boolean} [ignoreTitle]
+ * @property {string} [head]
+ * @property {'top' | 'bottom'} [scroll]
+ * @property {string} [scrollTarget]
+ * @property {string} [show]
+ * @property {string} [showTarget]
+ * @property {boolean} [focusScroll]
+ */
+
+/**
+ * @typedef {((this:Node, evt:Event) => boolean) & {source: string}} ConditionalFunction
+ */
+
+/**
+ * @typedef {Object} HtmxTriggerSpecification
+ * @property {string} trigger
+ * @property {number} [pollInterval]
+ * @property {ConditionalFunction} [eventFilter]
+ * @property {boolean} [changed]
+ * @property {boolean} [once]
+ * @property {boolean} [consume]
+ * @property {number} [delay]
+ * @property {string} [from]
+ * @property {string} [target]
+ * @property {number} [throttle]
+ * @property {string} [queue]
+ * @property {string} [root]
+ * @property {string} [threshold]
+ */
+
+/**
+ * @typedef {{elt: Element, message: string, validity: ValidityState}} HtmxElementValidationError
+ */
+
+/**
+ * @typedef {Record<string, string>} HtmxHeaderSpecification
+ * @property {'true'} HX-Request
+ * @property {string|null} HX-Trigger
+ * @property {string|null} HX-Trigger-Name
+ * @property {string|null} HX-Target
+ * @property {string} HX-Current-URL
+ * @property {string} [HX-Prompt]
+ * @property {'true'} [HX-Boosted]
+ * @property {string} [Content-Type]
+ * @property {'true'} [HX-History-Restore-Request]
+ */
+
+/** @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]
+ */
+
+/**
+ * @typedef {Object} HtmxRequestConfig
+ * @property {boolean} boosted
+ * @property {boolean} useUrlParams
+ * @property {FormData} formData
+ * @property {Object} parameters formData proxy
+ * @property {FormData} unfilteredFormData
+ * @property {Object} unfilteredParameters unfilteredFormData proxy
+ * @property {HtmxHeaderSpecification} headers
+ * @property {Element} target
+ * @property {HttpVerb} verb
+ * @property {HtmxElementValidationError[]} errors
+ * @property {boolean} withCredentials
+ * @property {number} timeout
+ * @property {string} path
+ * @property {Event} triggeringEvent
+ */
+
+/**
+ * @typedef {Object} HtmxResponseInfo
+ * @property {XMLHttpRequest} xhr
+ * @property {Element} target
+ * @property {HtmxRequestConfig} requestConfig
+ * @property {HtmxAjaxEtc} etc
+ * @property {boolean} boosted
+ * @property {string} select
+ * @property {{requestPath: string, finalRequestPath: string, responsePath: string|null, anchor: string}} pathInfo
+ * @property {boolean} [failed]
+ * @property {boolean} [successful]
+ */
+
+/**
+ * @typedef {Object} HtmxAjaxEtc
+ * @property {boolean} [returnPromise]
+ * @property {HtmxAjaxHandler} [handler]
+ * @property {string} [select]
+ * @property {Element} [targetOverride]
+ * @property {HtmxSwapStyle} [swapOverride]
+ * @property {Record<string,string>} [headers]
+ * @property {Object|FormData} [values]
+ * @property {boolean} [credentials]
+ * @property {number} [timeout]
+ */
+
+/**
+ * @typedef {Object} HtmxResponseHandlingConfig
+ * @property {string} [code]
+ * @property {boolean} swap
+ * @property {boolean} [error]
+ * @property {boolean} [ignoreTitle]
+ * @property {string} [select]
+ * @property {string} [target]
+ * @property {string} [swapOverride]
+ * @property {string} [event]
+ */
+
+/**
+ * @typedef {HtmxResponseInfo & {shouldSwap: boolean, serverResponse: any, isError: boolean, ignoreTitle: boolean, selectOverride:string}} HtmxBeforeSwapDetails
+ */
+
+/**
+ * @callback HtmxAjaxHandler
+ * @param {Element} elt
+ * @param {HtmxResponseInfo} responseInfo
+ */
+
+/**
+ * @typedef {(() => void)} HtmxSettleTask
+ */
+
+/**
+ * @typedef {Object} HtmxSettleInfo
+ * @property {HtmxSettleTask[]} tasks
+ * @property {Element[]} elts
+ * @property {string} [title]
+ */
+
+/**
+ * @typedef {Object} HtmxExtension
+ * @see https://htmx.org/extensions/#defining
+ * @property {(api: any) => void} init
+ * @property {(name: string, event: Event|CustomEvent) => boolean} onEvent
+ * @property {(text: string, xhr: XMLHttpRequest, elt: Element) => string} transformResponse
+ * @property {(swapStyle: HtmxSwapStyle) => boolean} isInlineSwap
+ * @property {(swapStyle: HtmxSwapStyle, target: Element, fragment: Node, settleInfo: HtmxSettleInfo) => boolean} handleSwap
+ * @property {(xhr: XMLHttpRequest, parameters: FormData, elt: Element) => *|string|null} encodeParameters
+ */
export { htmx }
diff --git a/dist/htmx.js b/dist/htmx.js
index 7ba3237e..b5b4f24e 100644
--- a/dist/htmx.js
+++ b/dist/htmx.js
@@ -2,81 +2,300 @@ var htmx = (function() {
'use strict'
// Public API
- //* * @type {import("./htmx").HtmxApi} */
const htmx = {
+ // Tsc madness here, assigning the functions directly results in an invalid TypeScript output, but reassigning is fine
/* Event processing */
- onLoad: onLoadHelper,
- process: processNode,
- on: addEventListenerImpl,
- off: removeEventListenerImpl,
- trigger: triggerEvent,
- ajax: ajaxHelper,
+ /** @type {typeof onLoadHelper} */
+ onLoad: null,
+ /** @type {typeof processNode} */
+ process: null,
+ /** @type {typeof addEventListenerImpl} */
+ on: null,
+ /** @type {typeof removeEventListenerImpl} */
+ off: null,
+ /** @type {typeof triggerEvent} */
+ trigger: null,
+ /** @type {typeof ajaxHelper} */
+ ajax: null,
/* DOM querying helpers */
- find,
- findAll,
- closest,
+ /** @type {typeof find} */
+ find: null,
+ /** @type {typeof findAll} */
+ findAll: null,
+ /** @type {typeof closest} */
+ closest: null,
+ /**
+ * Returns the input values that would resolve for a given element via the htmx value resolution mechanism
+ *
+ * @see https://htmx.org/api/#values
+ *
+ * @param {Element} elt the element to resolve values on
+ * @param {HttpVerb} type the request type (e.g. **get** or **post**) non-GET's will include the enclosing form of the element. Defaults to **post**
+ * @returns {Object}
+ */
values: function(elt, type) {
const inputValues = getInputValues(elt, type || 'post')
return inputValues.values
},
/* DOM manipulation helpers */
- remove: removeElement,
- addClass: addClassToElement,
- removeClass: removeClassFromElement,
- toggleClass: toggleClassOnElement,
- takeClass: takeClassForElement,
- swap,
+ /** @type {typeof removeElement} */
+ remove: null,
+ /** @type {typeof addClassToElement} */
+ addClass: null,
+ /** @type {typeof removeClassFromElement} */
+ removeClass: null,
+ /** @type {typeof toggleClassOnElement} */
+ toggleClass: null,
+ /** @type {typeof takeClassForElement} */
+ takeClass: null,
+ /** @type {typeof swap} */
+ swap: null,
/* Extension entrypoints */
- defineExtension,
- removeExtension,
+ /** @type {typeof defineExtension} */
+ defineExtension: null,
+ /** @type {typeof removeExtension} */
+ removeExtension: null,
+ /* Debugging */
+ /** @type {typeof logAll} */
+ logAll: null,
+ /** @type {typeof logNone} */
+ logNone: null,
/* Debugging */
- logAll,
- logNone,
+ /**
+ * The logger htmx uses to log with
+ *
+ * @see https://htmx.org/api/#logger
+ */
logger: null,
+ /**
+ * A property holding the configuration htmx uses at runtime.
+ *
+ * Note that using a [meta tag](https://htmx.org/docs/#config) is the preferred mechanism for setting these properties.
+ *
+ * @see https://htmx.org/api/#config
+ */
config: {
+ /**
+ * Whether to use history.
+ * @type boolean
+ * @default true
+ */
historyEnabled: true,
+ /**
+ * The number of pages to keep in **localStorage** for history support.
+ * @type number
+ * @default 10
+ */
historyCacheSize: 10,
+ /**
+ * @type boolean
+ * @default false
+ */
refreshOnHistoryMiss: false,
+ /**
+ * The default swap style to use if **[hx-swap](https://htmx.org/attributes/hx-swap)** is omitted.
+ * @type HtmxSwapStyle
+ * @default 'innerHTML'
+ */
defaultSwapStyle: 'innerHTML',
+ /**
+ * The default delay between receiving a response from the server and doing the swap.
+ * @type number
+ * @default 0
+ */
defaultSwapDelay: 0,
+ /**
+ * The default delay between completing the content swap and settling attributes.
+ * @type number
+ * @default 20
+ */
defaultSettleDelay: 20,
+ /**
+ * If true, htmx will inject a small amount of CSS into the page to make indicators invisible unless the **htmx-indicator** class is present.
+ * @type boolean
+ * @default true
+ */
includeIndicatorStyles: true,
+ /**
+ * The class to place on indicators when a request is in flight.
+ * @type string
+ * @default 'htmx-indicator'
+ */
indicatorClass: 'htmx-indicator',
+ /**
+ * The class to place on triggering elements when a request is in flight.
+ * @type string
+ * @default 'htmx-request'
+ */
requestClass: 'htmx-request',
+ /**
+ * The class to temporarily place on elements that htmx has added to the DOM.
+ * @type string
+ * @default 'htmx-added'
+ */
addedClass: 'htmx-added',
+ /**
+ * The class to place on target elements when htmx is in the settling phase.
+ * @type string
+ * @default 'htmx-settling'
+ */
settlingClass: 'htmx-settling',
+ /**
+ * The class to place on target elements when htmx is in the swapping phase.
+ * @type string
+ * @default 'htmx-swapping'
+ */
swappingClass: 'htmx-swapping',
+ /**
+ * Allows the use of eval-like functionality in htmx, to enable **hx-vars**, trigger conditions & script tag evaluation. Can be set to **false** for CSP compatibility.
+ * @type boolean
+ * @default true
+ */
allowEval: true,
+ /**
+ * If set to false, disables the interpretation of script tags.
+ * @type boolean
+ * @default true
+ */
allowScriptTags: true,
+ /**
+ * If set, the nonce will be added to inline scripts.
+ * @type string
+ * @default ''
+ */
inlineScriptNonce: '',
+ /**
+ * The attributes to settle during the settling phase.
+ * @type string[]
+ * @default ['class', 'style', 'width', 'height']
+ */
attributesToSettle: ['class', 'style', 'width', 'height'],
+ /**
+ * Allow cross-site Access-Control requests using credentials such as cookies, authorization headers or TLS client certificates.
+ * @type boolean
+ * @default false
+ */
withCredentials: false,
+ /**
+ * @type number
+ * @default 0
+ */
timeout: 0,
+ /**
+ * The default implementation of **getWebSocketReconnectDelay** for reconnecting after unexpected connection loss by the event code **Abnormal Closure**, **Service Restart** or **Try Again Later**.
+ * @type {'full-jitter' | ((retryCount:number) => number)}
+ * @default "full-jitter"
+ */
wsReconnectDelay: 'full-jitter',
+ /**
+ * The type of binary data being received over the WebSocket connection
+ * @type BinaryType
+ * @default 'blob'
+ */
wsBinaryType: 'blob',
+ /**
+ * @type string
+ * @default '[hx-disable], [data-hx-disable]'
+ */
disableSelector: '[hx-disable], [data-hx-disable]',
+ /**
+ * @type {'auto' | 'instant' | 'smooth'}
+ * @default 'smooth'
+ */
scrollBehavior: 'instant',
+ /**
+ * If the focused element should be scrolled into view.
+ * @type boolean
+ * @default false
+ */
defaultFocusScroll: false,
+ /**
+ * If set to true htmx will include a cache-busting parameter in GET requests to avoid caching partial responses by the browser
+ * @type boolean
+ * @default false
+ */
getCacheBusterParam: false,
+ /**
+ * If set to true, htmx will use the View Transition API when swapping in new content.
+ * @type boolean
+ * @default false
+ */
globalViewTransitions: false,
+ /**
+ * htmx will format requests with these methods by encoding their parameters in the URL, not the request body
+ * @type {(HttpVerb)[]}
+ * @default ['get', 'delete']
+ */
methodsThatUseUrlParams: ['get', 'delete'],
+ /**
+ * If set to true, disables htmx-based requests to non-origin hosts.
+ * @type boolean
+ * @default false
+ */
selfRequestsOnly: true,
+ /**
+ * If set to true htmx will not update the title of the document when a title tag is found in new content
+ * @type boolean
+ * @default false
+ */
ignoreTitle: false,
+ /**
+ * Whether the target of a boosted element is scrolled into the viewport.
+ * @type boolean
+ * @default true
+ */
scrollIntoViewOnBoost: true,
+ /**
+ * The cache to store evaluated trigger specifications into.
+ * You may define a simple object to use a never-clearing cache, or implement your own system using a [proxy object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
+ * @type {Object|null}
+ * @default null
+ */
triggerSpecsCache: null,
+ /** @type boolean */
disableInheritance: false,
+ /** @type HtmxResponseHandlingConfig[] */
responseHandling: [
{ code: '204', swap: false },
{ code: '[23]..', swap: true },
{ code: '[45]..', swap: false, error: true }
- ]
+ ],
+ /**
+ * Whether to process OOB swaps on elements that are nested within the main response element.
+ * @type boolean
+ * @default true
+ */
+ allowNestedOobSwaps: true
},
- parseInterval,
- _: internalEval,
+ /** @type {typeof parseInterval} */
+ parseInterval: null,
+ /** @type {typeof internalEval} */
+ _: null,
version: '2.0a'
}
+ // Tsc madness part 2
+ htmx.onLoad = onLoadHelper
+ htmx.process = processNode
+ htmx.on = addEventListenerImpl
+ htmx.off = removeEventListenerImpl
+ htmx.trigger = triggerEvent
+ htmx.ajax = ajaxHelper
+ htmx.find = find
+ htmx.findAll = findAll
+ htmx.closest = closest
+ htmx.remove = removeElement
+ htmx.addClass = addClassToElement
+ htmx.removeClass = removeClassFromElement
+ htmx.toggleClass = toggleClassOnElement
+ htmx.takeClass = takeClassForElement
+ htmx.swap = swap
+ htmx.defineExtension = defineExtension
+ htmx.removeExtension = removeExtension
+ htmx.logAll = logAll
+ htmx.logNone = logNone
+ htmx.parseInterval = parseInterval
+ htmx._ = internalEval
- /** @type {import("./htmx").HtmxInternalApi} */
const internalAPI = {
addTriggerHandler,
bodyContains,
@@ -128,6 +347,16 @@ var htmx = (function() {
global ? 'gim' : 'im')
}
+ /**
+ * Parses an interval string consistent with the way htmx does. Useful for plugins that have timing-related attributes.
+ *
+ * Caution: Accepts an int followed by either **s** or **ms**. All other values use **parseFloat**
+ *
+ * @see https://htmx.org/api/#parseInterval
+ *
+ * @param {string} str timing string
+ * @returns {number|undefined}
+ */
function parseInterval(str) {
if (str == undefined) {
return undefined
@@ -147,23 +376,28 @@ var htmx = (function() {
}
/**
- * @param {Element} elt
+ * @param {Node} elt
* @param {string} name
* @returns {(string | null)}
*/
function getRawAttribute(elt, name) {
- return elt.getAttribute && elt.getAttribute(name)
+ return elt instanceof Element && elt.getAttribute(name)
}
+ /**
+ * @param {Element} elt
+ * @param {string} qualifiedName
+ * @returns {boolean}
+ */
// resolve with both hx and data-hx prefixes
function hasAttribute(elt, qualifiedName) {
- return elt.hasAttribute && (elt.hasAttribute(qualifiedName) ||
+ return !!elt.hasAttribute && (elt.hasAttribute(qualifiedName) ||
elt.hasAttribute('data-' + qualifiedName))
}
/**
*
- * @param {HTMLElement} elt
+ * @param {Node} elt
* @param {string} qualifiedName
* @returns {(string | null)}
*/
@@ -172,8 +406,8 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
- * @returns {HTMLElement | ShadowRoot | null}
+ * @param {Node} elt
+ * @returns {Node | null}
*/
function parentElt(elt) {
const parent = elt.parentElement
@@ -189,16 +423,18 @@ var htmx = (function() {
}
/**
- * @returns {Document | ShadowRoot}
+ * @param {Node} elt
+ * @param {boolean} global
+ * @returns {Node|Document}
*/
function getRootNode(elt, global) {
return elt.getRootNode ? elt.getRootNode({ composed: global }) : getDocument()
}
/**
- * @param {HTMLElement} elt
- * @param {(e:HTMLElement) => boolean} condition
- * @returns {HTMLElement | null}
+ * @param {Node} elt
+ * @param {(e:Node) => boolean} condition
+ * @returns {Node | null}
*/
function getClosestMatch(elt, condition) {
while (elt && !condition(elt)) {
@@ -208,6 +444,12 @@ var htmx = (function() {
return elt || null
}
+ /**
+ * @param {Element} initialElement
+ * @param {Element} ancestor
+ * @param {string} attributeName
+ * @returns {string|null}
+ */
function getAttributeValueWithDisinheritance(initialElement, ancestor, attributeName) {
const attributeValue = getAttributeValue(ancestor, attributeName)
const disinherit = getAttributeValue(ancestor, 'hx-disinherit')
@@ -228,14 +470,14 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {string} attributeName
* @returns {string | null}
*/
function getClosestAttributeValue(elt, attributeName) {
let closestAttr = null
getClosestMatch(elt, function(e) {
- return closestAttr = getAttributeValueWithDisinheritance(elt, e, attributeName)
+ return !!(closestAttr = getAttributeValueWithDisinheritance(elt, asElement(e), attributeName))
})
if (closestAttr !== 'unset') {
return closestAttr
@@ -243,15 +485,15 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Node} elt
* @param {string} selector
* @returns {boolean}
*/
function matches(elt, selector) {
// @ts-ignore: non-standard properties for browser compatibility
// noinspection JSUnresolvedVariable
- const matchesFunction = elt.matches || elt.matchesSelector || elt.msMatchesSelector || elt.mozMatchesSelector || elt.webkitMatchesSelector || elt.oMatchesSelector
- return matchesFunction && matchesFunction.call(elt, selector)
+ const matchesFunction = elt instanceof Element && (elt.matches || elt.matchesSelector || elt.msMatchesSelector || elt.mozMatchesSelector || elt.webkitMatchesSelector || elt.oMatchesSelector)
+ return !!matchesFunction && matchesFunction.call(elt, selector)
}
/**
@@ -269,9 +511,7 @@ var htmx = (function() {
}
/**
- *
* @param {string} resp
- * @param {number} depth
* @returns {Document}
*/
function parseHTML(resp) {
@@ -279,12 +519,20 @@ var htmx = (function() {
return parser.parseFromString(resp, 'text/html')
}
+ /**
+ * @param {DocumentFragment} fragment
+ * @param {Node} elt
+ */
function takeChildrenFor(fragment, elt) {
while (elt.childNodes.length > 0) {
fragment.append(elt.childNodes[0])
}
}
+ /**
+ * @param {HTMLScriptElement} script
+ * @returns {HTMLScriptElement}
+ */
function duplicateScript(script) {
const newScript = getDocument().createElement('script')
forEach(script.attributes, function(attr) {
@@ -298,16 +546,23 @@ var htmx = (function() {
return newScript
}
+ /**
+ * @param {HTMLScriptElement} script
+ * @returns {boolean}
+ */
function isJavaScriptScriptNode(script) {
return script.matches('script') && (script.type === 'text/javascript' || script.type === 'module' || script.type === '')
}
- // we have to make new copies of script tags that we are going to insert because
- // SOME browsers (not saying who, but it involves an element and an animal) don't
- // execute scripts created in <template> tags when they are inserted into the DOM
- // and all the others do lmao
+ /**
+ * we have to make new copies of script tags that we are going to insert because
+ * SOME browsers (not saying who, but it involves an element and an animal) don't
+ * execute scripts created in <template> tags when they are inserted into the DOM
+ * and all the others do lmao
+ * @param {DocumentFragment} fragment
+ */
function normalizeScriptTags(fragment) {
- Array.from(fragment.querySelectorAll('script')).forEach((script) => {
+ Array.from(fragment.querySelectorAll('script')).forEach(/** @param {HTMLScriptElement} script */ (script) => {
if (isJavaScriptScriptNode(script)) {
const newScript = duplicateScript(script)
const parent = script.parentNode
@@ -323,31 +578,37 @@ var htmx = (function() {
}
/**
- * @param {string} response HTML
- * @returns {DocumentFragment & {title: string}} a document fragment representing the response HTML, including
+ * @typedef {DocumentFragment & {title?: string}} DocumentFragmentWithTitle
+ * @description a document fragment representing the response HTML, including
* a `title` property for any title information found
*/
+
+ /**
+ * @param {string} response HTML
+ * @returns {DocumentFragmentWithTitle}
+ */
function makeFragment(response) {
// strip head tag to determine shape of response we are dealing with
const responseWithNoHead = response.replace(HEAD_TAG_REGEX, '')
const startTag = getStartTag(responseWithNoHead)
- let fragment = null
+ /** @type DocumentFragmentWithTitle */
+ let fragment
if (startTag === 'html') {
// if it is a full document, parse it and return the body
- fragment = new DocumentFragment()
+ fragment = /** @type DocumentFragmentWithTitle */ (new DocumentFragment())
const doc = parseHTML(response)
takeChildrenFor(fragment, doc.body)
fragment.title = doc.title
} else if (startTag === 'body') {
// parse body w/o wrapping in template
- fragment = new DocumentFragment()
+ fragment = /** @type DocumentFragmentWithTitle */ (new DocumentFragment())
const doc = parseHTML(responseWithNoHead)
takeChildrenFor(fragment, doc.body)
fragment.title = doc.title
} else {
// otherwise we have non-body partial HTML content, so wrap it in a template to maximize parsing flexibility
const doc = parseHTML('<body><template class="internal-htmx-wrapper">' + responseWithNoHead + '</template></body>')
- fragment = doc.querySelector('template').content
+ fragment = /** @type DocumentFragmentWithTitle */ (doc.querySelector('template').content)
// extract title into fragment for later processing
fragment.title = doc.title
@@ -392,7 +653,7 @@ var htmx = (function() {
* @returns {o is Function}
*/
function isFunction(o) {
- return isType(o, 'Function')
+ return typeof o === 'function'
}
/**
@@ -404,9 +665,50 @@ var htmx = (function() {
}
/**
+ * @typedef {Object} OnHandler
+ * @property {(keyof HTMLElementEventMap)|string} event
+ * @property {EventListener} listener
+ */
+
+ /**
+ * @typedef {Object} ListenerInfo
+ * @property {string} trigger
+ * @property {EventListener} listener
+ * @property {EventTarget} on
+ */
+
+ /**
+ * @typedef {Object} HtmxNodeInternalData
+ * Element data
+ * @property {number} [initHash]
+ * @property {boolean} [boosted]
+ * @property {OnHandler[]} [onHandlers]
+ * @property {number} [timeout]
+ * @property {ListenerInfo[]} [listenerInfos]
+ * @property {boolean} [cancelled]
+ * @property {boolean} [triggeredOnce]
+ * @property {number} [delayed]
+ * @property {number|null} [throttle]
+ * @property {string} [lastValue]
+ * @property {boolean} [loaded]
+ * @property {string} [path]
+ * @property {string} [verb]
+ * @property {boolean} [polling]
+ * @property {HTMLButtonElement|HTMLInputElement|null} [lastButtonClicked]
+ * @property {number} [requestCount]
+ * @property {XMLHttpRequest} [xhr]
+ * @property {(() => void)[]} [queuedRequests]
+ * @property {boolean} [abortable]
+ *
+ * Event data
+ * @property {HtmxTriggerSpecification} [triggerSpec]
+ * @property {EventTarget[]} [handledFor]
+ */
+
+ /**
* getInternalData retrieves "private" data stored by htmx within an element
- * @param {HTMLElement} elt
- * @returns {*}
+ * @param {EventTarget|Event} elt
+ * @returns {HtmxNodeInternalData}
*/
function getInternalData(elt) {
const dataProp = 'htmx-internal-data'
@@ -419,8 +721,9 @@ var htmx = (function() {
/**
* toArray converts an ArrayLike object into a real array.
- * @param {ArrayLike} arr
- * @returns {any[]}
+ * @template T
+ * @param {ArrayLike<T>} arr
+ * @returns {T[]}
*/
function toArray(arr) {
const returnArr = []
@@ -434,13 +737,8 @@ var htmx = (function() {
/**
* @template T
- * @callback forEachCallback
- * @param {T} value
- */
- /**
- * @template T
- * @param {{[index: number]: T, length: number}} arr
- * @param {forEachCallback<T>} func
+ * @param {T[]|NamedNodeMap|HTMLCollection|HTMLFormControlsCollection|ArrayLike<T>} arr
+ * @param {(T) => void} func
*/
function forEach(arr, func) {
if (arr) {
@@ -450,6 +748,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} el
+ * @returns {boolean}
+ */
function isScrolledIntoView(el) {
const rect = el.getBoundingClientRect()
const elemTop = rect.top
@@ -457,35 +759,52 @@ var htmx = (function() {
return elemTop < window.innerHeight && elemBottom >= 0
}
+ /**
+ * @param {Node} elt
+ * @returns {boolean}
+ */
function bodyContains(elt) {
// IE Fix
- if (elt.getRootNode && elt.getRootNode() instanceof window.ShadowRoot) {
- return getDocument().body.contains(elt.getRootNode().host)
+ const rootNode = elt.getRootNode && elt.getRootNode()
+ if (rootNode && rootNode instanceof window.ShadowRoot) {
+ return getDocument().body.contains(rootNode.host)
} else {
return getDocument().body.contains(elt)
}
}
+ /**
+ * @param {string} trigger
+ * @returns {string[]}
+ */
function splitOnWhitespace(trigger) {
return trigger.trim().split(/\s+/)
}
/**
- * mergeObjects takes all of the keys from
+ * mergeObjects takes all the keys from
* obj2 and duplicates them into obj1
- * @param {Object} obj1
- * @param {Object} obj2
- * @returns {Object}
+ * @template T1
+ * @template T2
+ * @param {T1} obj1
+ * @param {T2} obj2
+ * @returns {T1 & T2}
*/
function mergeObjects(obj1, obj2) {
for (const key in obj2) {
if (obj2.hasOwnProperty(key)) {
+ // @ts-ignore tsc doesn't seem to properly handle types merging
obj1[key] = obj2[key]
}
}
+ // @ts-ignore tsc doesn't seem to properly handle types merging
return obj1
}
+ /**
+ * @param {string} jString
+ * @returns {any|null}
+ */
function parseJSON(jString) {
try {
return JSON.parse(jString)
@@ -495,6 +814,9 @@ var htmx = (function() {
}
}
+ /**
+ * @returns {boolean}
+ */
function canAccessLocalStorage() {
const test = 'htmx:localStorageTest'
try {
@@ -506,6 +828,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {string} path
+ * @returns {string}
+ */
function normalizePath(path) {
try {
const url = new URL(path)
@@ -527,19 +853,36 @@ var htmx = (function() {
// public API
//= =========================================================================================
+ /**
+ * @param {string} str
+ * @returns {any}
+ */
function internalEval(str) {
return maybeEval(getDocument().body, function() {
return eval(str)
})
}
+ /**
+ * Adds a callback for the **htmx:load** event. This can be used to process new content, for example initializing the content with a javascript library
+ *
+ * @see https://htmx.org/api/#onLoad
+ *
+ * @param {(elt: Node) => void} callback the callback to call on newly loaded content
+ * @returns {EventListener}
+ */
function onLoadHelper(callback) {
- const value = htmx.on('htmx:load', function(evt) {
+ const value = htmx.on('htmx:load', /** @param {CustomEvent} evt */ function(evt) {
callback(evt.detail.elt)
})
return value
}
+ /**
+ * Log all htmx events, useful for debugging.
+ *
+ * @see https://htmx.org/api/#logAll
+ */
function logAll() {
htmx.logger = function(elt, event, data) {
if (console) {
@@ -552,26 +895,59 @@ var htmx = (function() {
htmx.logger = null
}
+ /**
+ * Finds an element matching the selector
+ *
+ * @see https://htmx.org/api/#find
+ *
+ * @param {ParentNode|string} eltOrSelector the root element to find the matching element in, inclusive | the selector to match
+ * @param {string} [selector] the selector to match
+ * @returns {Element|null}
+ */
function find(eltOrSelector, selector) {
- if (selector) {
+ if (typeof eltOrSelector !== 'string') {
return eltOrSelector.querySelector(selector)
} else {
return find(getDocument(), eltOrSelector)
}
}
+ /**
+ * Finds all elements matching the selector
+ *
+ * @see https://htmx.org/api/#findAll
+ *
+ * @param {ParentNode|string} eltOrSelector the root element to find the matching elements in, inclusive | the selector to match
+ * @param {string} [selector] the selector to match
+ * @returns {NodeListOf<Element>}
+ */
function findAll(eltOrSelector, selector) {
- if (selector) {
+ if (typeof eltOrSelector !== 'string') {
return eltOrSelector.querySelectorAll(selector)
} else {
return findAll(getDocument(), eltOrSelector)
}
}
+ /**
+ * @returns Window
+ */
+ function getWindow() {
+ return window
+ }
+
+ /**
+ * Removes an element from the DOM
+ *
+ * @see https://htmx.org/api/#remove
+ *
+ * @param {Node} elt
+ * @param {number} [delay]
+ */
function removeElement(elt, delay) {
elt = resolveTarget(elt)
if (delay) {
- setTimeout(function() {
+ getWindow().setTimeout(function() {
removeElement(elt)
elt = null
}, delay)
@@ -580,10 +956,54 @@ var htmx = (function() {
}
}
+ /**
+ * @param {any} elt
+ * @return {Element|null}
+ */
+ function asElement(elt) {
+ return elt instanceof Element ? elt : null
+ }
+
+ /**
+ * @param {any} elt
+ * @return {HTMLElement|null}
+ */
+ function asHtmlElement(elt) {
+ return elt instanceof HTMLElement ? elt : null
+ }
+
+ /**
+ * @param {any} value
+ * @return {string|null}
+ */
+ function asString(value) {
+ return typeof value === 'string' ? value : null
+ }
+
+ /**
+ * @param {EventTarget} elt
+ * @return {ParentNode|null}
+ */
+ function asParentNode(elt) {
+ return elt instanceof Element || elt instanceof Document || elt instanceof DocumentFragment ? elt : null
+ }
+
+ /**
+ * This method adds a class to the given element.
+ *
+ * @see https://htmx.org/api/#addClass
+ *
+ * @param {Element|string} elt the element to add the class to
+ * @param {string} clazz the class to add
+ * @param {number} [delay] the delay (in milliseconds) before class is added
+ */
function addClassToElement(elt, clazz, delay) {
- elt = resolveTarget(elt)
+ elt = asElement(resolveTarget(elt))
+ if (!elt) {
+ return
+ }
if (delay) {
- setTimeout(function() {
+ getWindow().setTimeout(function() {
addClassToElement(elt, clazz)
elt = null
}, delay)
@@ -592,10 +1012,22 @@ var htmx = (function() {
}
}
- function removeClassFromElement(elt, clazz, delay) {
- elt = resolveTarget(elt)
+ /**
+ * Removes a class from the given element
+ *
+ * @see https://htmx.org/api/#removeClass
+ *
+ * @param {Node|string} node element to remove the class from
+ * @param {string} clazz the class to remove
+ * @param {number} [delay] the delay (in milliseconds before class is removed)
+ */
+ function removeClassFromElement(node, clazz, delay) {
+ let elt = asElement(resolveTarget(node))
+ if (!elt) {
+ return
+ }
if (delay) {
- setTimeout(function() {
+ getWindow().setTimeout(function() {
removeClassFromElement(elt, clazz)
elt = null
}, delay)
@@ -610,22 +1042,47 @@ var htmx = (function() {
}
}
+ /**
+ * Toggles the given class on an element
+ *
+ * @see https://htmx.org/api/#toggleClass
+ *
+ * @param {Element|string} elt the element to toggle the class on
+ * @param {string} clazz the class to toggle
+ */
function toggleClassOnElement(elt, clazz) {
elt = resolveTarget(elt)
elt.classList.toggle(clazz)
}
+ /**
+ * Takes the given class from its siblings, so that among its siblings, only the given element will have the class.
+ *
+ * @see https://htmx.org/api/#takeClass
+ *
+ * @param {Node|string} elt the element that will take the class
+ * @param {string} clazz the class to take
+ */
function takeClassForElement(elt, clazz) {
elt = resolveTarget(elt)
forEach(elt.parentElement.children, function(child) {
removeClassFromElement(child, clazz)
})
- addClassToElement(elt, clazz)
+ addClassToElement(asElement(elt), clazz)
}
+ /**
+ * Finds the closest matching element in the given elements parentage, inclusive of the element
+ *
+ * @see https://htmx.org/api/#closest
+ *
+ * @param {Element|string} elt the element to find the selector from
+ * @param {string} selector the selector to find
+ * @returns {Element|null}
+ */
function closest(elt, selector) {
- elt = resolveTarget(elt)
- if (elt.closest) {
+ elt = asElement(resolveTarget(elt))
+ if (elt && elt.closest) {
return elt.closest(selector)
} else {
// TODO remove when IE goes away
@@ -634,19 +1091,33 @@ var htmx = (function() {
return elt
}
}
- while (elt = elt && parentElt(elt))
+ while (elt = elt && asElement(parentElt(elt)))
return null
}
}
+ /**
+ * @param {string} str
+ * @param {string} prefix
+ * @returns {boolean}
+ */
function startsWith(str, prefix) {
return str.substring(0, prefix.length) === prefix
}
+ /**
+ * @param {string} str
+ * @param {string} suffix
+ * @returns {boolean}
+ */
function endsWith(str, suffix) {
return str.substring(str.length - suffix.length) === suffix
}
+ /**
+ * @param {string} selector
+ * @returns {string}
+ */
function normalizeSelector(selector) {
const trimmedSelector = selector.trim()
if (startsWith(trimmedSelector, '<') && endsWith(trimmedSelector, '/>')) {
@@ -656,17 +1127,24 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Node|Element|Document|string} elt
+ * @param {string} selector
+ * @param {boolean=} global
+ * @returns {(Node|Window)[]}
+ */
function querySelectorAllExt(elt, selector, global) {
+ elt = resolveTarget(elt)
if (selector.indexOf('closest ') === 0) {
- return [closest(elt, normalizeSelector(selector.substr(8)))]
+ return [closest(asElement(elt), normalizeSelector(selector.substr(8)))]
} else if (selector.indexOf('find ') === 0) {
- return [find(elt, normalizeSelector(selector.substr(5)))]
+ return [find(asParentNode(elt), normalizeSelector(selector.substr(5)))]
} else if (selector === 'next') {
- return [elt.nextElementSibling]
+ return [asElement(elt).nextElementSibling]
} else if (selector.indexOf('next ') === 0) {
return [scanForwardQuery(elt, normalizeSelector(selector.substr(5)), !!global)]
} else if (selector === 'previous') {
- return [elt.previousElementSibling]
+ return [asElement(elt).previousElementSibling]
} else if (selector.indexOf('previous ') === 0) {
return [scanBackwardsQuery(elt, normalizeSelector(selector.substr(9)), !!global)]
} else if (selector === 'document') {
@@ -680,12 +1158,18 @@ var htmx = (function() {
} else if (selector.indexOf('global ') === 0) {
return querySelectorAllExt(elt, selector.slice(7), true)
} else {
- return getRootNode(elt, !!global).querySelectorAll(normalizeSelector(selector))
+ return toArray(asParentNode(getRootNode(elt, !!global)).querySelectorAll(normalizeSelector(selector)))
}
}
+ /**
+ * @param {Node} start
+ * @param {string} match
+ * @param {boolean} global
+ * @returns {Element}
+ */
var scanForwardQuery = function(start, match, global) {
- const results = getRootNode(start, global).querySelectorAll(match)
+ const results = asParentNode(getRootNode(start, global)).querySelectorAll(match)
for (let i = 0; i < results.length; i++) {
const elt = results[i]
if (elt.compareDocumentPosition(start) === Node.DOCUMENT_POSITION_PRECEDING) {
@@ -694,8 +1178,14 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Node} start
+ * @param {string} match
+ * @param {boolean} global
+ * @returns {Element}
+ */
var scanBackwardsQuery = function(start, match, global) {
- const results = getRootNode(start, global).querySelectorAll(match)
+ const results = asParentNode(getRootNode(start, global)).querySelectorAll(match)
for (let i = results.length - 1; i >= 0; i--) {
const elt = results[i]
if (elt.compareDocumentPosition(start) === Node.DOCUMENT_POSITION_FOLLOWING) {
@@ -704,8 +1194,13 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Node|string} eltOrSelector
+ * @param {string=} selector
+ * @returns {Node|Window}
+ */
function querySelectorExt(eltOrSelector, selector) {
- if (selector) {
+ if (typeof eltOrSelector !== 'string') {
return querySelectorAllExt(eltOrSelector, selector)[0]
} else {
return querySelectorAllExt(getDocument().body, eltOrSelector)[0]
@@ -713,36 +1208,62 @@ var htmx = (function() {
}
/**
- *
- * @param {string|Element} arg2
- * @param {Element} [context]
- * @returns {Element}
+ * @template {EventTarget} T
+ * @param {T|string} eltOrSelector
+ * @param {T} [context]
+ * @returns {Element|T|null}
*/
- function resolveTarget(arg2, context) {
- if (isType(arg2, 'String')) {
- return find(context || document, arg2)
+ function resolveTarget(eltOrSelector, context) {
+ if (typeof eltOrSelector === 'string') {
+ return find(asParentNode(context) || document, eltOrSelector)
} else {
- // @ts-ignore
- return arg2
+ return eltOrSelector
}
}
+ /**
+ * @typedef {keyof HTMLElementEventMap|string} AnyEventName
+ */
+
+ /**
+ * @typedef {Object} EventArgs
+ * @property {EventTarget} target
+ * @property {AnyEventName} event
+ * @property {EventListener} listener
+ */
+
+ /**
+ * @param {EventTarget|AnyEventName} arg1
+ * @param {AnyEventName|EventListener} arg2
+ * @param {EventListener} [arg3]
+ * @returns {EventArgs}
+ */
function processEventArgs(arg1, arg2, arg3) {
if (isFunction(arg2)) {
return {
target: getDocument().body,
- event: arg1,
+ event: asString(arg1),
listener: arg2
}
} else {
return {
target: resolveTarget(arg1),
- event: arg2,
+ event: asString(arg2),
listener: arg3
}
}
}
+ /**
+ * Adds an event listener to an element
+ *
+ * @see https://htmx.org/api/#on
+ *
+ * @param {EventTarget|string} arg1 the element to add the listener to | the event name to add the listener for
+ * @param {string|EventListener} arg2 the event name to add the listener for | the listener to add
+ * @param {EventListener} [arg3] the listener to add
+ * @returns {EventListener}
+ */
function addEventListenerImpl(arg1, arg2, arg3) {
ready(function() {
const eventArgs = processEventArgs(arg1, arg2, arg3)
@@ -752,6 +1273,16 @@ var htmx = (function() {
return b ? arg2 : arg3
}
+ /**
+ * Removes an event listener from an element
+ *
+ * @see https://htmx.org/api/#off
+ *
+ * @param {EventTarget|string} arg1 the element to remove the listener from | the event name to remove the listener from
+ * @param {string|EventListener} arg2 the event name to remove the listener from | the listener to remove
+ * @param {EventListener} [arg3] the listener to remove
+ * @returns {EventListener}
+ */
function removeEventListenerImpl(arg1, arg2, arg3) {
ready(function() {
const eventArgs = processEventArgs(arg1, arg2, arg3)
@@ -765,6 +1296,11 @@ var htmx = (function() {
//= ===================================================================
const DUMMY_ELT = getDocument().createElement('output') // dummy element for bad selectors
+ /**
+ * @param {Element} elt
+ * @param {string} attrName
+ * @returns {(Node|Window)[]}
+ */
function findAttributeTargets(elt, attrName) {
const attrTarget = getClosestAttributeValue(elt, attrName)
if (attrTarget) {
@@ -782,12 +1318,21 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @param {string} attribute
+ * @returns {Element|null}
+ */
function findThisElement(elt, attribute) {
- return getClosestMatch(elt, function(elt) {
- return getAttributeValue(elt, attribute) != null
- })
+ return asElement(getClosestMatch(elt, function(elt) {
+ return getAttributeValue(asElement(elt), attribute) != null
+ }))
}
+ /**
+ * @param {Element} elt
+ * @returns {Node|Window|null}
+ */
function getTarget(elt) {
const targetStr = getClosestAttributeValue(elt, 'hx-target')
if (targetStr) {
@@ -806,6 +1351,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {string} name
+ * @returns {boolean}
+ */
function shouldSettleAttribute(name) {
const attributesToSettle = htmx.config.attributesToSettle
for (let i = 0; i < attributesToSettle.length; i++) {
@@ -816,6 +1365,10 @@ var htmx = (function() {
return false
}
+ /**
+ * @param {Element} mergeTo
+ * @param {Element} mergeFrom
+ */
function cloneAttributes(mergeTo, mergeFrom) {
forEach(mergeTo.attributes, function(attr) {
if (!mergeFrom.hasAttribute(attr.name) && shouldSettleAttribute(attr.name)) {
@@ -829,6 +1382,11 @@ var htmx = (function() {
})
}
+ /**
+ * @param {HtmxSwapStyle} swapStyle
+ * @param {Element} target
+ * @returns {boolean}
+ */
function isInlineSwap(swapStyle, target) {
const extensions = getExtensions(target)
for (let i = 0; i < extensions.length; i++) {
@@ -845,14 +1403,14 @@ var htmx = (function() {
}
/**
- *
* @param {string} oobValue
* @param {Element} oobElement
- * @param {*} settleInfo
+ * @param {HtmxSettleInfo} settleInfo
* @returns
*/
function oobSwap(oobValue, oobElement, settleInfo) {
let selector = '#' + getRawAttribute(oobElement, 'id')
+ /** @type HtmxSwapStyle */
let swapStyle = 'outerHTML'
if (oobValue === 'true') {
// do nothing
@@ -873,7 +1431,7 @@ var htmx = (function() {
fragment = getDocument().createDocumentFragment()
fragment.appendChild(oobElementClone)
if (!isInlineSwap(swapStyle, target)) {
- fragment = oobElementClone // if this is not an inline swap, we use the content of the node, not the node itself
+ fragment = asParentNode(oobElementClone) // if this is not an inline swap, we use the content of the node, not the node itself
}
const beforeSwapDetails = { shouldSwap: true, target, fragment }
@@ -896,6 +1454,9 @@ var htmx = (function() {
return oobValue
}
+ /**
+ * @param {DocumentFragment} fragment
+ */
function handlePreservedElements(fragment) {
forEach(findAll(fragment, '[hx-preserve], [data-hx-preserve]'), function(preservedElt) {
const id = getAttributeValue(preservedElt, 'id')
@@ -906,14 +1467,20 @@ var htmx = (function() {
})
}
+ /**
+ * @param {Node} parentNode
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function handleAttributes(parentNode, fragment, settleInfo) {
forEach(fragment.querySelectorAll('[id]'), function(newNode) {
const id = getRawAttribute(newNode, 'id')
if (id && id.length > 0) {
const normalizedId = id.replace("'", "\\'")
const normalizedTag = newNode.tagName.replace(':', '\\:')
- const oldNode = parentNode.querySelector(normalizedTag + "[id='" + normalizedId + "']")
- if (oldNode && oldNode !== parentNode) {
+ const parentElt = asParentNode(parentNode)
+ const oldNode = parentElt && parentElt.querySelector(normalizedTag + "[id='" + normalizedId + "']")
+ if (oldNode && oldNode !== parentElt) {
const newAttributes = newNode.cloneNode()
cloneAttributes(newNode, oldNode)
settleInfo.tasks.push(function() {
@@ -924,28 +1491,41 @@ var htmx = (function() {
})
}
+ /**
+ * @param {Node} child
+ * @returns {HtmxSettleTask}
+ */
function makeAjaxLoadTask(child) {
return function() {
removeClassFromElement(child, htmx.config.addedClass)
- processNode(child)
- processFocus(child)
+ processNode(asElement(child))
+ processFocus(asParentNode(child))
triggerEvent(child, 'htmx:load')
}
}
+ /**
+ * @param {ParentNode} child
+ */
function processFocus(child) {
const autofocus = '[autofocus]'
- const autoFocusedElt = matches(child, autofocus) ? child : child.querySelector(autofocus)
+ const autoFocusedElt = asHtmlElement(matches(child, autofocus) ? child : child.querySelector(autofocus))
if (autoFocusedElt != null) {
autoFocusedElt.focus()
}
}
+ /**
+ * @param {Node} parentNode
+ * @param {Node} insertBefore
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function insertNodesBefore(parentNode, insertBefore, fragment, settleInfo) {
handleAttributes(parentNode, fragment, settleInfo)
while (fragment.childNodes.length > 0) {
const child = fragment.firstChild
- addClassToElement(child, htmx.config.addedClass)
+ addClassToElement(asElement(child), htmx.config.addedClass)
parentNode.insertBefore(child, insertBefore)
if (child.nodeType !== Node.TEXT_NODE && child.nodeType !== Node.COMMENT_NODE) {
settleInfo.tasks.push(makeAjaxLoadTask(child))
@@ -953,8 +1533,13 @@ var htmx = (function() {
}
}
- // based on https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0,
- // derived from Java's string hashcode implementation
+ /**
+ * based on https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0,
+ * derived from Java's string hashcode implementation
+ * @param {string} string
+ * @param {number} hash
+ * @returns {number}
+ */
function stringHash(string, hash) {
let char = 0
while (char < string.length) {
@@ -963,6 +1548,10 @@ var htmx = (function() {
return hash
}
+ /**
+ * @param {Element} elt
+ * @returns {number}
+ */
function attributeHash(elt) {
let hash = 0
// IE fix
@@ -978,17 +1567,23 @@ var htmx = (function() {
return hash
}
+ /**
+ * @param {EventTarget} elt
+ */
function deInitOnHandlers(elt) {
const internalData = getInternalData(elt)
if (internalData.onHandlers) {
for (let i = 0; i < internalData.onHandlers.length; i++) {
const handlerInfo = internalData.onHandlers[i]
- elt.removeEventListener(handlerInfo.event, handlerInfo.listener)
+ removeEventListenerImpl(elt, handlerInfo.event, handlerInfo.listener)
}
delete internalData.onHandlers
}
}
+ /**
+ * @param {Node} element
+ */
function deInitNode(element) {
const internalData = getInternalData(element)
if (internalData.timeout) {
@@ -997,7 +1592,7 @@ var htmx = (function() {
if (internalData.listenerInfos) {
forEach(internalData.listenerInfos, function(info) {
if (info.on) {
- info.on.removeEventListener(info.trigger, info.listener)
+ removeEventListenerImpl(info.on, info.trigger, info.listener)
}
})
}
@@ -1005,16 +1600,27 @@ var htmx = (function() {
forEach(Object.keys(internalData), function(key) { delete internalData[key] })
}
+ /**
+ * @param {Node} element
+ */
function cleanUpElement(element) {
triggerEvent(element, 'htmx:beforeCleanupElement')
deInitNode(element)
+ // @ts-ignore IE11 code
+ // noinspection JSUnresolvedReference
if (element.children) { // IE
+ // @ts-ignore
forEach(element.children, function(child) { cleanUpElement(child) })
}
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapOuterHTML(target, fragment, settleInfo) {
- // @type {HTMLElement}
+ /** @type {Node} */
let newElt
const eltBeforeNewContent = target.previousSibling
insertNodesBefore(parentElt(target), target, fragment, settleInfo)
@@ -1025,35 +1631,70 @@ var htmx = (function() {
}
settleInfo.elts = settleInfo.elts.filter(function(e) { return e !== target })
while (newElt && newElt !== target) {
- if (newElt.nodeType === Node.ELEMENT_NODE) {
+ if (newElt instanceof Element) {
settleInfo.elts.push(newElt)
+ newElt = newElt.nextElementSibling
+ } else {
+ newElt = null
}
- newElt = newElt.nextElementSibling
}
cleanUpElement(target)
- target.remove()
+ if (target instanceof Element) {
+ target.remove()
+ } else {
+ target.parentNode.removeChild(target)
+ }
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapAfterBegin(target, fragment, settleInfo) {
return insertNodesBefore(target, target.firstChild, fragment, settleInfo)
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapBeforeBegin(target, fragment, settleInfo) {
return insertNodesBefore(parentElt(target), target, fragment, settleInfo)
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapBeforeEnd(target, fragment, settleInfo) {
return insertNodesBefore(target, null, fragment, settleInfo)
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapAfterEnd(target, fragment, settleInfo) {
return insertNodesBefore(parentElt(target), target.nextSibling, fragment, settleInfo)
}
- function swapDelete(target, fragment, settleInfo) {
+
+ /**
+ * @param {Node} target
+ */
+ function swapDelete(target) {
cleanUpElement(target)
return parentElt(target).removeChild(target)
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapInnerHTML(target, fragment, settleInfo) {
const firstChild = target.firstChild
insertNodesBefore(target, firstChild, fragment, settleInfo)
@@ -1068,11 +1709,11 @@ var htmx = (function() {
}
/**
- * @param {string} swapStyle
- * @param {HTMLElement} elt
- * @param {HTMLElement} target
- * @param {Node} fragment
- * @param {{ tasks: (() => void)[]; }} settleInfo
+ * @param {HtmxSwapStyle} swapStyle
+ * @param {Element} elt
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
*/
function swapWithStyle(swapStyle, elt, target, fragment, settleInfo) {
switch (swapStyle) {
@@ -1094,7 +1735,7 @@ var htmx = (function() {
swapAfterEnd(target, fragment, settleInfo)
return
case 'delete':
- swapDelete(target, fragment, settleInfo)
+ swapDelete(target)
return
default:
var extensions = getExtensions(elt)
@@ -1126,37 +1767,31 @@ var htmx = (function() {
}
}
+ /**
+ * @param {DocumentFragment} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function findAndSwapOobElements(fragment, settleInfo) {
forEach(findAll(fragment, '[hx-swap-oob], [data-hx-swap-oob]'), function(oobElement) {
- const oobValue = getAttributeValue(oobElement, 'hx-swap-oob')
- if (oobValue != null) {
- oobSwap(oobValue, oobElement, settleInfo)
+ if (htmx.config.allowNestedOobSwaps || oobElement.parentElement === null) {
+ const oobValue = getAttributeValue(oobElement, 'hx-swap-oob')
+ if (oobValue != null) {
+ oobSwap(oobValue, oobElement, settleInfo)
+ }
+ } else {
+ oobElement.removeAttribute('hx-swap-oob')
+ oobElement.removeAttribute('data-hx-swap-oob')
}
})
}
/**
- * @callback swapCallback
- */
-
- /**
- * @typedef {Object} SwapOptions
- * @property {?string} select
- * @property {?string} selectOOB
- * @property {?*} eventInfo
- * @property {?*} anchor
- * @property {?HTMLElement} contextElement
- * @property {?swapCallback} afterSwapCallback
- * @property {?swapCallback} afterSettleCallback
- */
-
- /**
* Implements complete swapping pipeline, including: focus and selection preservation,
* title updates, scroll, OOB swapping, normal swapping and settling
* @param {string|Element} target
* @param {string} content
- * @param {import("./htmx").HtmxSwapSpecification} swapSpec
- * @param {SwapOptions} swapOptions
+ * @param {HtmxSwapSpecification} swapSpec
+ * @param {SwapOptions} [swapOptions]
*/
function swap(target, content, swapSpec, swapOptions) {
if (!swapOptions) {
@@ -1181,51 +1816,57 @@ var htmx = (function() {
}
const settleInfo = makeSettleInfo(target)
- let fragment = makeFragment(content)
-
- settleInfo.title = fragment.title
-
- // select-oob swaps
- if (swapOptions.selectOOB) {
- const oobSelectValues = swapOptions.selectOOB.split(',')
- for (let i = 0; i < oobSelectValues.length; i++) {
- const oobSelectValue = oobSelectValues[i].split(':', 2)
- let id = oobSelectValue[0].trim()
- if (id.indexOf('#') === 0) {
- id = id.substring(1)
- }
- const oobValue = oobSelectValue[1] || 'true'
- const oobElement = fragment.querySelector('#' + id)
- if (oobElement) {
- oobSwap(oobValue, oobElement, settleInfo)
+ // For text content swaps, don't parse the response as HTML, just insert it
+ if (swapSpec.swapStyle === 'textContent') {
+ target.textContent = content
+ // Otherwise, make the fragment and process it
+ } else {
+ let fragment = makeFragment(content)
+
+ settleInfo.title = fragment.title
+
+ // select-oob swaps
+ if (swapOptions.selectOOB) {
+ const oobSelectValues = swapOptions.selectOOB.split(',')
+ for (let i = 0; i < oobSelectValues.length; i++) {
+ const oobSelectValue = oobSelectValues[i].split(':', 2)
+ let id = oobSelectValue[0].trim()
+ if (id.indexOf('#') === 0) {
+ id = id.substring(1)
+ }
+ const oobValue = oobSelectValue[1] || 'true'
+ const oobElement = fragment.querySelector('#' + id)
+ if (oobElement) {
+ oobSwap(oobValue, oobElement, settleInfo)
+ }
}
}
- }
- // oob swaps
- findAndSwapOobElements(fragment, settleInfo)
- forEach(findAll(fragment, 'template'), function(template) {
- findAndSwapOobElements(template.content, settleInfo)
- if (template.content.childElementCount === 0) {
+ // oob swaps
+ findAndSwapOobElements(fragment, settleInfo)
+ forEach(findAll(fragment, 'template'), /** @param {HTMLTemplateElement} template */function(template) {
+ findAndSwapOobElements(template.content, settleInfo)
+ if (template.content.childElementCount === 0) {
// Avoid polluting the DOM with empty templates that were only used to encapsulate oob swap
- template.remove()
- }
- })
-
- // normal swap
- if (swapOptions.select) {
- const newFragment = getDocument().createDocumentFragment()
- forEach(fragment.querySelectorAll(swapOptions.select), function(node) {
- newFragment.appendChild(node)
+ template.remove()
+ }
})
- fragment = newFragment
+
+ // normal swap
+ if (swapOptions.select) {
+ const newFragment = getDocument().createDocumentFragment()
+ forEach(fragment.querySelectorAll(swapOptions.select), function(node) {
+ newFragment.appendChild(node)
+ })
+ fragment = newFragment
+ }
+ handlePreservedElements(fragment)
+ swapWithStyle(swapSpec.swapStyle, swapOptions.contextElement, target, fragment, settleInfo)
}
- handlePreservedElements(fragment)
- swapWithStyle(swapSpec.swapStyle, swapOptions.contextElement, target, fragment, settleInfo)
// apply saved focus and selection information to swapped content
if (selectionInfo.elt &&
- !bodyContains(selectionInfo.elt) &&
- getRawAttribute(selectionInfo.elt, 'id')) {
+ !bodyContains(selectionInfo.elt) &&
+ getRawAttribute(selectionInfo.elt, 'id')) {
const newActiveElt = document.getElementById(getRawAttribute(selectionInfo.elt, 'id'))
const focusOptions = { preventScroll: swapSpec.focusScroll !== undefined ? !swapSpec.focusScroll : !htmx.config.defaultFocusScroll }
if (newActiveElt) {
@@ -1271,7 +1912,7 @@ var htmx = (function() {
})
if (swapOptions.anchor) {
- const anchorTarget = resolveTarget('#' + swapOptions.anchor)
+ const anchorTarget = asElement(resolveTarget('#' + swapOptions.anchor))
if (anchorTarget) {
anchorTarget.scrollIntoView({ block: 'start', behavior: 'auto' })
}
@@ -1284,12 +1925,17 @@ var htmx = (function() {
}
if (swapSpec.settleDelay > 0) {
- setTimeout(doSettle, swapSpec.settleDelay)
+ getWindow().setTimeout(doSettle, swapSpec.settleDelay)
} else {
doSettle()
}
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @param {string} header
+ * @param {EventTarget} elt
+ */
function handleTriggerHeader(xhr, header, elt) {
const triggerBody = xhr.getResponseHeader(header)
if (triggerBody.indexOf('{') === 0) {
@@ -1319,7 +1965,13 @@ var htmx = (function() {
const NOT_WHITESPACE = /[^\s]/
const COMBINED_SELECTOR_START = /[{(]/
const COMBINED_SELECTOR_END = /[})]/
+
+ /**
+ * @param {string} str
+ * @returns {string[]}
+ */
function tokenizeString(str) {
+ /** @type string[] */
const tokens = []
let position = 0
while (position < str.length) {
@@ -1349,6 +2001,12 @@ var htmx = (function() {
return tokens
}
+ /**
+ * @param {string} token
+ * @param {string|null} last
+ * @param {string} paramName
+ * @returns {boolean}
+ */
function isPossibleRelativeReference(token, last, paramName) {
return SYMBOL_START.exec(token.charAt(0)) &&
token !== 'true' &&
@@ -1358,6 +2016,12 @@ var htmx = (function() {
last !== '.'
}
+ /**
+ * @param {EventTarget|string} elt
+ * @param {string[]} tokens
+ * @param {string} paramName
+ * @returns {ConditionalFunction|null}
+ */
function maybeGenerateConditional(elt, tokens, paramName) {
if (tokens[0] === '[') {
tokens.shift()
@@ -1366,6 +2030,7 @@ var htmx = (function() {
let last = null
while (tokens.length > 0) {
const token = tokens[0]
+ // @ts-ignore For some reason tsc doesn't understand the shift call, and thinks we're comparing the same value here, i.e. '[' vs ']'
if (token === ']') {
bracketCount--
if (bracketCount === 0) {
@@ -1399,6 +2064,11 @@ var htmx = (function() {
}
}
+ /**
+ * @param {string[]} tokens
+ * @param {RegExp} match
+ * @returns {string}
+ */
function consumeUntil(tokens, match) {
let result = ''
while (tokens.length > 0 && !match.test(tokens[0])) {
@@ -1407,6 +2077,10 @@ var htmx = (function() {
return result
}
+ /**
+ * @param {string[]} tokens
+ * @returns {string}
+ */
function consumeCSSSelector(tokens) {
let result
if (tokens.length > 0 && COMBINED_SELECTOR_START.test(tokens[0])) {
@@ -1422,12 +2096,13 @@ var htmx = (function() {
const INPUT_SELECTOR = 'input, textarea, select'
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {string} explicitTrigger
- * @param {cache} cache for trigger specs
- * @returns {import("./htmx").HtmxTriggerSpecification[]}
+ * @param {Object} cache for trigger specs
+ * @returns {HtmxTriggerSpecification[]}
*/
function parseAndCacheTrigger(elt, explicitTrigger, cache) {
+ /** @type HtmxTriggerSpecification[] */
const triggerSpecs = []
const tokens = tokenizeString(explicitTrigger)
do {
@@ -1436,6 +2111,7 @@ var htmx = (function() {
const trigger = consumeUntil(tokens, /[,\[\s]/)
if (trigger !== '') {
if (trigger === 'every') {
+ /** @type HtmxTriggerSpecification */
const every = { trigger: 'every' }
consumeUntil(tokens, NOT_WHITESPACE)
every.pollInterval = parseInterval(consumeUntil(tokens, /[,\[\s]/))
@@ -1446,6 +2122,7 @@ var htmx = (function() {
}
triggerSpecs.push(every)
} else {
+ /** @type HtmxTriggerSpecification */
const triggerSpec = { trigger }
var eventFilter = maybeGenerateConditional(elt, tokens, 'event')
if (eventFilter) {
@@ -1513,8 +2190,8 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
- * @returns {import("./htmx").HtmxTriggerSpecification[]}
+ * @param {Element} elt
+ * @returns {HtmxTriggerSpecification[]}
*/
function getTriggerSpecs(elt) {
const explicitTrigger = getAttributeValue(elt, 'hx-trigger')
@@ -1537,13 +2214,21 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ */
function cancelPolling(elt) {
getInternalData(elt).cancelled = true
}
+ /**
+ * @param {Element} elt
+ * @param {TriggerHandler} handler
+ * @param {HtmxTriggerSpecification} spec
+ */
function processPolling(elt, handler, spec) {
const nodeData = getInternalData(elt)
- nodeData.timeout = setTimeout(function() {
+ nodeData.timeout = getWindow().setTimeout(function() {
if (bodyContains(elt) && nodeData.cancelled !== true) {
if (!maybeFilterEvent(spec, elt, makeEvent('hx:poll:trigger', {
triggerSpec: spec,
@@ -1556,14 +2241,23 @@ var htmx = (function() {
}, spec.pollInterval)
}
+ /**
+ * @param {HTMLAnchorElement} elt
+ * @returns {boolean}
+ */
function isLocalLink(elt) {
return location.hostname === elt.hostname &&
getRawAttribute(elt, 'href') &&
getRawAttribute(elt, 'href').indexOf('#') !== 0
}
+ /**
+ * @param {Element} elt
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {HtmxTriggerSpecification[]} triggerSpecs
+ */
function boostElement(elt, nodeData, triggerSpecs) {
- if ((elt.tagName === 'A' && isLocalLink(elt) && (elt.target === '' || elt.target === '_self')) || elt.tagName === 'FORM') {
+ if ((elt instanceof HTMLAnchorElement && isLocalLink(elt) && (elt.target === '' || elt.target === '_self')) || elt.tagName === 'FORM') {
nodeData.boosted = true
let verb, path
if (elt.tagName === 'A') {
@@ -1577,7 +2271,8 @@ var htmx = (function() {
path = getRawAttribute(elt, 'action')
}
triggerSpecs.forEach(function(triggerSpec) {
- addEventListener(elt, function(elt, evt) {
+ addEventListener(elt, function(node, evt) {
+ const elt = asElement(node)
if (closest(elt, htmx.config.disableSelector)) {
cleanUpElement(elt)
return
@@ -1589,12 +2284,15 @@ var htmx = (function() {
}
/**
- *
* @param {Event} evt
- * @param {HTMLElement} elt
- * @returns
+ * @param {Node} node
+ * @returns {boolean}
*/
- function shouldCancel(evt, elt) {
+ function shouldCancel(evt, node) {
+ const elt = asElement(node)
+ if (!elt) {
+ return false
+ }
if (evt.type === 'submit' || evt.type === 'click') {
if (elt.tagName === 'FORM') {
return true
@@ -1602,7 +2300,7 @@ var htmx = (function() {
if (matches(elt, 'input[type="submit"], button') && closest(elt, 'form') !== null) {
return true
}
- if (elt.tagName === 'A' && elt.href &&
+ if (elt instanceof HTMLAnchorElement && elt.href &&
(elt.getAttribute('href') === '#' || elt.getAttribute('href').indexOf('#') !== 0)) {
return true
}
@@ -1610,25 +2308,47 @@ var htmx = (function() {
return false
}
+ /**
+ * @param {Node} elt
+ * @param {Event|MouseEvent|KeyboardEvent|TouchEvent} evt
+ * @returns {boolean}
+ */
function ignoreBoostedAnchorCtrlClick(elt, evt) {
- return getInternalData(elt).boosted && elt.tagName === 'A' && evt.type === 'click' && (evt.ctrlKey || evt.metaKey)
+ return getInternalData(elt).boosted && elt instanceof HTMLAnchorElement && evt.type === 'click' &&
+ // @ts-ignore this will resolve to undefined for events that don't define those properties, which is fine
+ (evt.ctrlKey || evt.metaKey)
}
+ /**
+ * @param {HtmxTriggerSpecification} triggerSpec
+ * @param {Node} elt
+ * @param {Event} evt
+ * @returns {boolean}
+ */
function maybeFilterEvent(triggerSpec, elt, evt) {
const eventFilter = triggerSpec.eventFilter
if (eventFilter) {
try {
return eventFilter.call(elt, evt) !== true
} catch (e) {
- triggerErrorEvent(getDocument().body, 'htmx:eventFilter:error', { error: e, source: eventFilter.source })
+ const source = eventFilter.source
+ triggerErrorEvent(getDocument().body, 'htmx:eventFilter:error', { error: e, source })
return true
}
}
return false
}
+ /**
+ * @param {Node} elt
+ * @param {TriggerHandler} handler
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {HtmxTriggerSpecification} triggerSpec
+ * @param {boolean} [explicitCancel]
+ */
function addEventListener(elt, handler, nodeData, triggerSpec, explicitCancel) {
const elementData = getInternalData(elt)
+ /** @type {(Node|Window)[]} */
let eltsToListenOn
if (triggerSpec.from) {
eltsToListenOn = querySelectorAllExt(elt, triggerSpec.from)
@@ -1639,10 +2359,12 @@ var htmx = (function() {
if (triggerSpec.changed) {
eltsToListenOn.forEach(function(eltToListenOn) {
const eltToListenOnData = getInternalData(eltToListenOn)
+ // @ts-ignore value will be undefined for non-input elements, which is fine
eltToListenOnData.lastValue = eltToListenOn.value
})
}
forEach(eltsToListenOn, function(eltToListenOn) {
+ /** @type EventListener */
const eventListener = function(evt) {
if (!bodyContains(elt)) {
eltToListenOn.removeEventListener(triggerSpec.trigger, eventListener)
@@ -1668,7 +2390,7 @@ var htmx = (function() {
evt.stopPropagation()
}
if (triggerSpec.target && evt.target) {
- if (!matches(evt.target, triggerSpec.target)) {
+ if (!matches(asElement(evt.target), triggerSpec.target)) {
return
}
}
@@ -1681,10 +2403,12 @@ var htmx = (function() {
}
if (triggerSpec.changed) {
const eltToListenOnData = getInternalData(eltToListenOn)
- if (eltToListenOnData.lastValue === eltToListenOn.value) {
+ // @ts-ignore value will be undefined for non-input elements, which is fine
+ const value = eltToListenOn.value
+ if (eltToListenOnData.lastValue === value) {
return
}
- eltToListenOnData.lastValue = eltToListenOn.value
+ eltToListenOnData.lastValue = value
}
if (elementData.delayed) {
clearTimeout(elementData.delayed)
@@ -1696,12 +2420,12 @@ var htmx = (function() {
if (triggerSpec.throttle > 0) {
if (!elementData.throttle) {
handler(elt, evt)
- elementData.throttle = setTimeout(function() {
+ elementData.throttle = getWindow().setTimeout(function() {
elementData.throttle = null
}, triggerSpec.throttle)
}
} else if (triggerSpec.delay > 0) {
- elementData.delayed = setTimeout(function() { handler(elt, evt) }, triggerSpec.delay)
+ elementData.delayed = getWindow().setTimeout(function() { handler(elt, evt) }, triggerSpec.delay)
} else {
triggerEvent(elt, 'htmx:trigger')
handler(elt, evt)
@@ -1739,6 +2463,9 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ */
function maybeReveal(elt) {
if (!hasAttribute(elt, 'data-hx-revealed') && isScrolledIntoView(elt)) {
elt.setAttribute('data-hx-revealed', 'true')
@@ -1747,13 +2474,19 @@ var htmx = (function() {
triggerEvent(elt, 'revealed')
} else {
// if the node isn't initialized, wait for it before triggering the request
- elt.addEventListener('htmx:afterProcessNode', function(evt) { triggerEvent(elt, 'revealed') }, { once: true })
+ elt.addEventListener('htmx:afterProcessNode', function() { triggerEvent(elt, 'revealed') }, { once: true })
}
}
}
//= ===================================================================
+ /**
+ * @param {Element} elt
+ * @param {TriggerHandler} handler
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {number} delay
+ */
function loadImmediately(elt, handler, nodeData, delay) {
const load = function() {
if (!nodeData.loaded) {
@@ -1762,12 +2495,18 @@ var htmx = (function() {
}
}
if (delay > 0) {
- setTimeout(load, delay)
+ getWindow().setTimeout(load, delay)
} else {
load()
}
}
+ /**
+ * @param {Element} elt
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {HtmxTriggerSpecification[]} triggerSpecs
+ * @returns {boolean}
+ */
function processVerbs(elt, nodeData, triggerSpecs) {
let explicitAction = false
forEach(VERBS, function(verb) {
@@ -1777,7 +2516,8 @@ var htmx = (function() {
nodeData.path = path
nodeData.verb = verb
triggerSpecs.forEach(function(triggerSpec) {
- addTriggerHandler(elt, triggerSpec, nodeData, function(elt, evt) {
+ addTriggerHandler(elt, triggerSpec, nodeData, function(node, evt) {
+ const elt = asElement(node)
if (closest(elt, htmx.config.disableSelector)) {
cleanUpElement(elt)
return
@@ -1790,11 +2530,23 @@ var htmx = (function() {
return explicitAction
}
+ /**
+ * @callback TriggerHandler
+ * @param {Node} elt
+ * @param {Event} [evt]
+ */
+
+ /**
+ * @param {Node} elt
+ * @param {HtmxTriggerSpecification} triggerSpec
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {TriggerHandler} handler
+ */
function addTriggerHandler(elt, triggerSpec, nodeData, handler) {
if (triggerSpec.trigger === 'revealed') {
initScrollHandler()
addEventListener(elt, handler, nodeData, triggerSpec)
- maybeReveal(elt)
+ maybeReveal(asElement(elt))
} else if (triggerSpec.trigger === 'intersect') {
const observerOptions = {}
if (triggerSpec.root) {
@@ -1812,21 +2564,29 @@ var htmx = (function() {
}
}
}, observerOptions)
- observer.observe(elt)
- addEventListener(elt, handler, nodeData, triggerSpec)
+ observer.observe(asElement(elt))
+ addEventListener(asElement(elt), handler, nodeData, triggerSpec)
} else if (triggerSpec.trigger === 'load') {
if (!maybeFilterEvent(triggerSpec, elt, makeEvent('load', { elt }))) {
- loadImmediately(elt, handler, nodeData, triggerSpec.delay)
+ loadImmediately(asElement(elt), handler, nodeData, triggerSpec.delay)
}
} else if (triggerSpec.pollInterval > 0) {
nodeData.polling = true
- processPolling(elt, handler, triggerSpec)
+ processPolling(asElement(elt), handler, triggerSpec)
} else {
addEventListener(elt, handler, nodeData, triggerSpec)
}
}
- function shouldProcessHxOn(elt) {
+ /**
+ * @param {Node} node
+ * @returns {boolean}
+ */
+ function shouldProcessHxOn(node) {
+ const elt = asElement(node)
+ if (!elt) {
+ return false
+ }
const attributes = elt.attributes
for (let j = 0; j < attributes.length; j++) {
const attrName = attributes[j].name
@@ -1838,22 +2598,31 @@ var htmx = (function() {
return false
}
+ /**
+ * @param {Node} elt
+ * @returns {Element[]}
+ */
function findHxOnWildcardElements(elt) {
let node = null
+ /** @type {Element[]} */
const elements = []
if (!(elt instanceof ShadowRoot)) {
if (shouldProcessHxOn(elt)) {
- elements.push(elt)
+ elements.push(asElement(elt))
}
const iter = document.evaluate('.//*[@*[ starts-with(name(), "hx-on:") or starts-with(name(), "data-hx-on:") or' +
' starts-with(name(), "hx-on-") or starts-with(name(), "data-hx-on-") ]]', elt)
- while (node = iter.iterateNext()) elements.push(node)
+ while (node = iter.iterateNext()) elements.push(asElement(node))
}
return elements
}
+ /**
+ * @param {Element} elt
+ * @returns {NodeListOf<Element>|[]}
+ */
function findElementsToProcess(elt) {
if (elt.querySelectorAll) {
const boostedSelector = ', [hx-boost] a, [data-hx-boost] a, a[hx-boost], a[data-hx-boost]'
@@ -1865,23 +2634,35 @@ var htmx = (function() {
}
}
- // Handle submit buttons/inputs that have the form attribute set
- // see https://developer.mozilla.org/docs/Web/HTML/Element/button
+ /**
+ * Handle submit buttons/inputs that have the form attribute set
+ * see https://developer.mozilla.org/docs/Web/HTML/Element/button
+ * @param {Event} evt
+ */
function maybeSetLastButtonClicked(evt) {
- const elt = closest(evt.target, "button, input[type='submit']")
+ const elt = /** @type {HTMLButtonElement|HTMLInputElement} */ (closest(asElement(evt.target), "button, input[type='submit']"))
const internalData = getRelatedFormData(evt)
if (internalData) {
internalData.lastButtonClicked = elt
}
- };
+ }
+
+ /**
+ * @param {Event} evt
+ */
function maybeUnsetLastButtonClicked(evt) {
const internalData = getRelatedFormData(evt)
if (internalData) {
internalData.lastButtonClicked = null
}
}
+
+ /**
+ * @param {Event} evt
+ * @returns {HtmxNodeInternalData|undefined}
+ */
function getRelatedFormData(evt) {
- const elt = closest(evt.target, "button, input[type='submit']")
+ const elt = closest(asElement(evt.target), "button, input[type='submit']")
if (!elt) {
return
}
@@ -1891,6 +2672,10 @@ var htmx = (function() {
}
return getInternalData(form)
}
+
+ /**
+ * @param {EventTarget} elt
+ */
function initButtonTracking(elt) {
// need to handle both click and focus in:
// focusin - in case someone tabs in to a button and hits the space bar
@@ -1900,28 +2685,20 @@ var htmx = (function() {
elt.addEventListener('focusout', maybeUnsetLastButtonClicked)
}
- function countCurlies(line) {
- const tokens = tokenizeString(line)
- let netCurlies = 0
- for (let i = 0; i < tokens.length; i++) {
- const token = tokens[i]
- if (token === '{') {
- netCurlies++
- } else if (token === '}') {
- netCurlies--
- }
- }
- return netCurlies
- }
-
+ /**
+ * @param {EventTarget} elt
+ * @param {string} eventName
+ * @param {string} code
+ */
function addHxOnEventHandler(elt, eventName, code) {
const nodeData = getInternalData(elt)
if (!Array.isArray(nodeData.onHandlers)) {
nodeData.onHandlers = []
}
let func
+ /** @type EventListener */
const listener = function(e) {
- return maybeEval(elt, function() {
+ maybeEval(elt, function() {
if (!func) {
func = new Function('event', code)
}
@@ -1932,6 +2709,9 @@ var htmx = (function() {
nodeData.onHandlers.push({ event: eventName, listener })
}
+ /**
+ * @param {Element} elt
+ */
function processHxOnWildcard(elt) {
// wipe any previous on handlers so that this function takes precedence
deInitOnHandlers(elt)
@@ -1959,6 +2739,9 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element|HTMLInputElement} elt
+ */
function initNode(elt) {
if (closest(elt, htmx.config.disableSelector)) {
cleanUpElement(elt)
@@ -1973,7 +2756,9 @@ var htmx = (function() {
triggerEvent(elt, 'htmx:beforeProcessNode')
+ // @ts-ignore value will be undefined for non-input elements, which is fine
if (elt.value) {
+ // @ts-ignore
nodeData.lastValue = elt.value
}
@@ -2002,6 +2787,13 @@ var htmx = (function() {
}
}
+ /**
+ * Processes new content, enabling htmx behavior. This can be useful if you have content that is added to the DOM outside of the normal htmx request cycle but still want htmx attributes to work.
+ *
+ * @see https://htmx.org/api/#process
+ *
+ * @param {Element|string} elt element to process
+ */
function processNode(elt) {
elt = resolveTarget(elt)
if (closest(elt, htmx.config.disableSelector)) {
@@ -2017,10 +2809,19 @@ var htmx = (function() {
// Event/Log Support
//= ===================================================================
+ /**
+ * @param {string} str
+ * @returns {string}
+ */
function kebabEventName(str) {
return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
}
+ /**
+ * @param {string} eventName
+ * @param {any} detail
+ * @returns {CustomEvent}
+ */
function makeEvent(eventName, detail) {
let evt
if (window.CustomEvent && typeof window.CustomEvent === 'function') {
@@ -2034,10 +2835,19 @@ var htmx = (function() {
return evt
}
+ /**
+ * @param {EventTarget|string} elt
+ * @param {string} eventName
+ * @param {any=} detail
+ */
function triggerErrorEvent(elt, eventName, detail) {
triggerEvent(elt, eventName, mergeObjects({ error: eventName }, detail))
}
+ /**
+ * @param {string} eventName
+ * @returns {boolean}
+ */
function ignoreEventForLogging(eventName) {
return eventName === 'htmx:afterProcessNode'
}
@@ -2047,8 +2857,8 @@ var htmx = (function() {
* executes the provided function using each of the active extensions. It should
* be called internally at every extendable execution point in htmx.
*
- * @param {HTMLElement} elt
- * @param {(extension:import("./htmx").HtmxExtension) => void} toDo
+ * @param {Element} elt
+ * @param {(extension:HtmxExtension) => void} toDo
* @returns void
*/
function withExtensions(elt, toDo) {
@@ -2069,6 +2879,16 @@ var htmx = (function() {
}
}
+ /**
+ * Triggers a given event on an element
+ *
+ * @see https://htmx.org/api/#trigger
+ *
+ * @param {EventTarget|string} elt the element to trigger the event on
+ * @param {string} eventName the name of the event to trigger
+ * @param {any=} detail details for the event
+ * @returns {boolean}
+ */
function triggerEvent(elt, eventName, detail) {
elt = resolveTarget(elt)
if (detail == null) {
@@ -2089,7 +2909,7 @@ var htmx = (function() {
const kebabedEvent = makeEvent(kebabName, event.detail)
eventResult = eventResult && elt.dispatchEvent(kebabedEvent)
}
- withExtensions(elt, function(extension) {
+ withExtensions(asElement(elt), function(extension) {
eventResult = eventResult && (extension.onEvent(eventName, event) !== false && !event.defaultPrevented)
})
return eventResult
@@ -2100,11 +2920,18 @@ var htmx = (function() {
//= ===================================================================
let currentPathForHistory = location.pathname + location.search
+ /**
+ * @returns {Element}
+ */
function getHistoryElement() {
const historyElt = getDocument().querySelector('[hx-history-elt],[data-hx-history-elt]')
return historyElt || getDocument().body
}
+ /**
+ * @param {string} url
+ * @param {Element} rootElt
+ */
function saveToHistoryCache(url, rootElt) {
if (!canAccessLocalStorage()) {
return
@@ -2131,6 +2958,7 @@ var htmx = (function() {
}
}
+ /** @type HtmxHistoryItem */
const newHistoryItem = { url, content: innerHTML, title, scroll }
triggerEvent(getDocument().body, 'htmx:historyItemCreated', { item: newHistoryItem, cache: historyCache })
@@ -2152,6 +2980,18 @@ var htmx = (function() {
}
}
+ /**
+ * @typedef {Object} HtmxHistoryItem
+ * @property {string} url
+ * @property {string} content
+ * @property {string} title
+ * @property {number} scroll
+ */
+
+ /**
+ * @param {string} url
+ * @returns {HtmxHistoryItem|null}
+ */
function getCachedHistory(url) {
if (!canAccessLocalStorage()) {
return null
@@ -2168,9 +3008,13 @@ var htmx = (function() {
return null
}
+ /**
+ * @param {Element} elt
+ * @returns {string}
+ */
function cleanInnerHtmlForHistory(elt) {
const className = htmx.config.requestClass
- const clone = elt.cloneNode(true)
+ const clone = /** @type Element */ (elt.cloneNode(true))
forEach(findAll(clone, '.' + className), function(child) {
removeClassFromElement(child, className)
})
@@ -2201,6 +3045,9 @@ var htmx = (function() {
if (htmx.config.historyEnabled) history.replaceState({ htmx: true }, getDocument().title, window.location.href)
}
+ /**
+ * @param {string} path
+ */
function pushUrlIntoHistory(path) {
// remove the cache buster parameter, if any
if (htmx.config.getCacheBusterParam) {
@@ -2215,17 +3062,26 @@ var htmx = (function() {
currentPathForHistory = path
}
+ /**
+ * @param {string} path
+ */
function replaceUrlInHistory(path) {
if (htmx.config.historyEnabled) history.replaceState({ htmx: true }, '', path)
currentPathForHistory = path
}
+ /**
+ * @param {HtmxSettleTask[]} tasks
+ */
function settleImmediately(tasks) {
forEach(tasks, function(task) {
- task.call()
+ task.call(undefined)
})
}
+ /**
+ * @param {string} path
+ */
function loadHistoryFromServer(path) {
const request = new XMLHttpRequest()
const details = { path, xhr: request }
@@ -2238,13 +3094,12 @@ var htmx = (function() {
if (this.status >= 200 && this.status < 400) {
triggerEvent(getDocument().body, 'htmx:historyCacheMissLoad', details)
const fragment = makeFragment(this.response)
- // @ts-ignore
+ /** @type ParentNode */
const content = fragment.querySelector('[hx-history-elt],[data-hx-history-elt]') || fragment
const historyElement = getHistoryElement()
const settleInfo = makeSettleInfo(historyElement)
handleTitle(fragment.title)
- // @ts-ignore
swapInnerHTML(historyElement, content, settleInfo)
settleImmediately(settleInfo.tasks)
currentPathForHistory = path
@@ -2256,6 +3111,9 @@ var htmx = (function() {
request.send()
}
+ /**
+ * @param {string} [path]
+ */
function restoreHistory(path) {
saveCurrentPageToHistory()
path = path || location.pathname + location.search
@@ -2267,14 +3125,15 @@ var htmx = (function() {
handleTitle(fragment.title)
swapInnerHTML(historyElement, fragment, settleInfo)
settleImmediately(settleInfo.tasks)
- setTimeout(function() {
+ getWindow().setTimeout(function() {
window.scrollTo(0, cached.scroll)
}, 0) // next 'tick', so browser has time to render layout
currentPathForHistory = path
triggerEvent(getDocument().body, 'htmx:historyRestore', { path, item: cached })
} else {
if (htmx.config.refreshOnHistoryMiss) {
- // @ts-ignore: optional parameter in reload() function throws error
+ // @ts-ignore: optional parameter in reload() function throws error
+ // noinspection JSUnresolvedReference
window.location.reload(true)
} else {
loadHistoryFromServer(path)
@@ -2282,8 +3141,12 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @returns {Element[]}
+ */
function addRequestIndicatorClasses(elt) {
- let indicators = findAttributeTargets(elt, 'hx-indicator')
+ let indicators = /** @type Element[] */ (findAttributeTargets(elt, 'hx-indicator'))
if (indicators == null) {
indicators = [elt]
}
@@ -2295,8 +3158,12 @@ var htmx = (function() {
return indicators
}
+ /**
+ * @param {Element} elt
+ * @returns {Element[]}
+ */
function disableElements(elt) {
- let disabledElts = findAttributeTargets(elt, 'hx-disabled-elt')
+ let disabledElts = /** @type Element[] */ (findAttributeTargets(elt, 'hx-disabled-elt'))
if (disabledElts == null) {
disabledElts = []
}
@@ -2308,6 +3175,10 @@ var htmx = (function() {
return disabledElts
}
+ /**
+ * @param {Element[]} indicators
+ * @param {Element[]} disabled
+ */
function removeRequestIndicators(indicators, disabled) {
forEach(indicators, function(ic) {
const internalData = getInternalData(ic)
@@ -2330,8 +3201,8 @@ var htmx = (function() {
//= ===================================================================
/**
- * @param {HTMLElement[]} processed
- * @param {HTMLElement} elt
+ * @param {Element[]} processed
+ * @param {Element} elt
* @returns {boolean}
*/
function haveSeenNode(processed, elt) {
@@ -2344,7 +3215,13 @@ var htmx = (function() {
return false
}
- function shouldInclude(elt) {
+ /**
+ * @param {Element} element
+ * @return {boolean}
+ */
+ function shouldInclude(element) {
+ // Cast to trick tsc, undefined values will work fine here
+ const elt = /** @type {HTMLInputElement} */ (element)
if (elt.name === '' || elt.name == null || elt.disabled || closest(elt, 'fieldset[disabled]')) {
return false
}
@@ -2359,7 +3236,7 @@ var htmx = (function() {
}
/** @param {string} name
- * @param {string|Array} value
+ * @param {string|Array|FormDataEntryValue} value
* @param {FormData} formData */
function addValueToFormData(name, value, formData) {
if (name != null && value != null) {
@@ -2388,10 +3265,10 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement[]} processed
+ * @param {Element[]} processed
* @param {FormData} formData
* @param {HtmxElementValidationError[]} errors
- * @param {HTMLElement|HTMLInputElement|HTMLFormElement} elt
+ * @param {Element|HTMLInputElement|HTMLSelectElement|HTMLFormElement} elt
* @param {boolean} validate
*/
function processInputValue(processed, formData, errors, elt, validate) {
@@ -2402,12 +3279,13 @@ var htmx = (function() {
}
if (shouldInclude(elt)) {
const name = getRawAttribute(elt, 'name')
+ // @ts-ignore value will be undefined for non-input elements, which is fine
let value = elt.value
- if (elt.multiple && elt.tagName === 'SELECT') {
- value = toArray(elt.querySelectorAll('option:checked')).map(function(e) { return e.value })
+ if (elt instanceof HTMLSelectElement && elt.multiple) {
+ value = toArray(elt.querySelectorAll('option:checked')).map(function(e) { return (/** @type HTMLOptionElement */(e)).value })
}
// include file inputs
- if (elt.files) {
+ if (elt instanceof HTMLInputElement && elt.files) {
value = toArray(elt.files)
}
addValueToFormData(name, value, formData)
@@ -2415,7 +3293,7 @@ var htmx = (function() {
validateElement(elt, errors)
}
}
- if (matches(elt, 'form')) {
+ if (elt instanceof HTMLFormElement) {
forEach(elt.elements, function(input) {
if (processed.indexOf(input) >= 0) {
// The input has already been processed and added to the values, but the FormData that will be
@@ -2436,15 +3314,12 @@ var htmx = (function() {
}
/**
- * @typedef {{elt: HTMLElement, message: string, validity: ValidityState}} HtmxElementValidationError
- */
-
- /**
*
- * @param {HTMLElement|HTMLObjectElement} element
+ * @param {Element} elt
* @param {HtmxElementValidationError[]} errors
*/
- function validateElement(element, errors) {
+ function validateElement(elt, errors) {
+ const element = /** @type {HTMLElement & ElementInternals} */ (elt)
if (element.willValidate) {
triggerEvent(element, 'htmx:validation:validate')
if (!element.checkValidity()) {
@@ -2471,12 +3346,12 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement|HTMLFormElement} elt
- * @param {string} verb
+ * @param {Element|HTMLFormElement} elt
+ * @param {HttpVerb} verb
* @returns {{errors: HtmxElementValidationError[], formData: FormData, values: Object}}
*/
function getInputValues(elt, verb) {
- /** @type HTMLElement[] */
+ /** @type Element[] */
const processed = []
const formData = new FormData()
const priorityFormData = new FormData()
@@ -2489,7 +3364,7 @@ var htmx = (function() {
// only validate when form is directly submitted and novalidate or formnovalidate are not set
// or if the element has an explicit hx-validate="true" on it
- let validate = (matches(elt, 'form') && elt.noValidate !== true) || getAttributeValue(elt, 'hx-validate') === 'true'
+ let validate = (elt instanceof HTMLFormElement && elt.noValidate !== true) || getAttributeValue(elt, 'hx-validate') === 'true'
if (internalData.lastButtonClicked) {
validate = validate && internalData.lastButtonClicked.formNoValidate !== true
}
@@ -2505,7 +3380,7 @@ var htmx = (function() {
// if a button or submit was clicked last, include its value
if (internalData.lastButtonClicked || elt.tagName === 'BUTTON' ||
(elt.tagName === 'INPUT' && getRawAttribute(elt, 'type') === 'submit')) {
- const button = internalData.lastButtonClicked || elt
+ const button = internalData.lastButtonClicked || (/** @type HTMLInputElement|HTMLButtonElement */(elt))
const name = getRawAttribute(button, 'name')
addValueToFormData(name, button.value, priorityFormData)
}
@@ -2513,10 +3388,10 @@ var htmx = (function() {
// include any explicit includes
const includes = findAttributeTargets(elt, 'hx-include')
forEach(includes, function(node) {
- processInputValue(processed, formData, errors, node, validate)
+ processInputValue(processed, formData, errors, asElement(node), validate)
// if a non-form is included, include any input values within it
if (!matches(node, 'form')) {
- forEach(node.querySelectorAll(INPUT_SELECTOR), function(descendant) {
+ forEach(asParentNode(node).querySelectorAll(INPUT_SELECTOR), function(descendant) {
processInputValue(processed, formData, errors, descendant, validate)
})
}
@@ -2564,12 +3439,13 @@ var htmx = (function() {
//= ===================================================================
/**
- * @param {HTMLElement} elt
- * @param {HTMLElement} target
+ * @param {Element} elt
+ * @param {Element} target
* @param {string} prompt
- * @returns {Object} // TODO: Define/Improve HtmxHeaderSpecification
+ * @returns {HtmxHeaderSpecification}
*/
function getHeaders(elt, target, prompt) {
+ /** @type HtmxHeaderSpecification */
const headers = {
'HX-Request': 'true',
'HX-Trigger': getRawAttribute(elt, 'id'),
@@ -2592,7 +3468,7 @@ var htmx = (function() {
* and returns a new object that only contains keys that are
* specified by the closest "hx-params" attribute
* @param {FormData} inputValues
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @returns {FormData}
*/
function filterValues(inputValues, elt) {
@@ -2623,19 +3499,22 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @return {boolean}
+ */
function isAnchorLink(elt) {
- return getRawAttribute(elt, 'href') && getRawAttribute(elt, 'href').indexOf('#') >= 0
+ return !!getRawAttribute(elt, 'href') && getRawAttribute(elt, 'href').indexOf('#') >= 0
}
/**
- *
- * @param {HTMLElement} elt
- * @param {import("./htmx").HtmxSwapStyle} swapInfoOverride
- * @returns {import("./htmx").HtmxSwapSpecification}
+ * @param {Element} elt
+ * @param {HtmxSwapStyle} [swapInfoOverride]
+ * @returns {HtmxSwapSpecification}
*/
function getSwapSpecification(elt, swapInfoOverride) {
const swapInfo = swapInfoOverride || getClosestAttributeValue(elt, 'hx-swap')
- /** @type import("./htmx").HtmxSwapSpecification */
+ /** @type HtmxSwapSpecification */
const swapSpec = {
swapStyle: getInternalData(elt).boosted ? 'innerHTML' : htmx.config.defaultSwapStyle,
swapDelay: htmx.config.defaultSwapDelay,
@@ -2662,6 +3541,7 @@ var htmx = (function() {
var splitSpec = scrollSpec.split(':')
const scrollVal = splitSpec.pop()
var selectorVal = splitSpec.length > 0 ? splitSpec.join(':') : null
+ // @ts-ignore
swapSpec.scroll = scrollVal
swapSpec.scrollTarget = selectorVal
} else if (value.indexOf('show:') === 0) {
@@ -2685,6 +3565,10 @@ var htmx = (function() {
return swapSpec
}
+ /**
+ * @param {Element} elt
+ * @return {boolean}
+ */
function usesFormData(elt) {
return getClosestAttributeValue(elt, 'hx-encoding') === 'multipart/form-data' ||
(matches(elt, 'form') && getRawAttribute(elt, 'enctype') === 'multipart/form-data')
@@ -2692,7 +3576,7 @@ var htmx = (function() {
/**
* @param {XMLHttpRequest} xhr
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {FormData} filteredParameters
* @returns {*|string|null}
*/
@@ -2717,19 +3601,23 @@ var htmx = (function() {
/**
*
* @param {Element} target
- * @returns {import("./htmx").HtmxSettleInfo}
+ * @returns {HtmxSettleInfo}
*/
function makeSettleInfo(target) {
return { tasks: [], elts: [target] }
}
+ /**
+ * @param {Element[]} content
+ * @param {HtmxSwapSpecification} swapSpec
+ */
function updateScrollState(content, swapSpec) {
const first = content[0]
const last = content[content.length - 1]
if (swapSpec.scroll) {
var target = null
if (swapSpec.scrollTarget) {
- target = querySelectorExt(first, swapSpec.scrollTarget)
+ target = asElement(querySelectorExt(first, swapSpec.scrollTarget))
}
if (swapSpec.scroll === 'top' && (first || target)) {
target = target || first
@@ -2747,21 +3635,23 @@ var htmx = (function() {
if (swapSpec.showTarget === 'window') {
targetStr = 'body'
}
- target = querySelectorExt(first, targetStr)
+ target = asElement(querySelectorExt(first, targetStr))
}
if (swapSpec.show === 'top' && (first || target)) {
target = target || first
+ // @ts-ignore For some reason tsc doesn't recognize "instant" as a valid option for now
target.scrollIntoView({ block: 'start', behavior: htmx.config.scrollBehavior })
}
if (swapSpec.show === 'bottom' && (last || target)) {
target = target || last
+ // @ts-ignore For some reason tsc doesn't recognize "instant" as a valid option for now
target.scrollIntoView({ block: 'end', behavior: htmx.config.scrollBehavior })
}
}
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {string} attr
* @param {boolean=} evalAsDefault
* @param {Object=} values
@@ -2805,9 +3695,15 @@ var htmx = (function() {
}
}
}
- return getValuesForElement(parentElt(elt), attr, evalAsDefault, values)
+ return getValuesForElement(asElement(parentElt(elt)), attr, evalAsDefault, values)
}
+ /**
+ * @param {EventTarget|string} elt
+ * @param {() => any} toEval
+ * @param {any=} defaultVal
+ * @returns {any}
+ */
function maybeEval(elt, toEval, defaultVal) {
if (htmx.config.allowEval) {
return toEval()
@@ -2818,7 +3714,7 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {*?} expressionVars
* @returns
*/
@@ -2827,7 +3723,7 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {*?} expressionVars
* @returns
*/
@@ -2836,13 +3732,18 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @returns {FormData}
*/
function getExpressionVars(elt) {
return formDataFromObject(mergeObjects(getHXVarsForElement(elt), getHXValsForElement(elt)))
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @param {string} header
+ * @param {string|null} headerValue
+ */
function safelySetHeaderValue(xhr, header, headerValue) {
if (headerValue !== null) {
try {
@@ -2855,6 +3756,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @return {string}
+ */
function getPathFromResponse(xhr) {
// NB: IE11 does not support this stuff
if (xhr.responseURL && typeof (URL) !== 'undefined') {
@@ -2867,14 +3772,29 @@ var htmx = (function() {
}
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @param {RegExp} regexp
+ * @return {boolean}
+ */
function hasHeader(xhr, regexp) {
return regexp.test(xhr.getAllResponseHeaders())
}
+ /**
+ * Issues an htmx-style AJAX request
+ *
+ * @see https://htmx.org/api/#ajax
+ *
+ * @param {HttpVerb} verb
+ * @param {string} path the URL path to make the AJAX
+ * @param {Element|string|HtmxAjaxHelperContext} context the element to target (defaults to the **body**) | a selector for the target | a context object that contains any of the following
+ * @return {Promise<void>} Promise that resolves immediately if no request is sent, or when the request is complete
+ */
function ajaxHelper(verb, path, context) {
- verb = verb.toLowerCase()
+ verb = (/** @type HttpVerb */(verb.toLowerCase()))
if (context) {
- if (context instanceof Element || isType(context, 'String')) {
+ if (context instanceof Element || typeof context === 'string') {
return issueAjaxRequest(verb, path, null, null, {
targetOverride: resolveTarget(context),
returnPromise: true
@@ -2898,6 +3818,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @return {Element[]}
+ */
function hierarchyForElt(elt) {
const arr = []
while (elt) {
@@ -2907,6 +3831,12 @@ var htmx = (function() {
return arr
}
+ /**
+ * @param {Element} elt
+ * @param {string} path
+ * @param {HtmxRequestConfig} requestConfig
+ * @return {boolean}
+ */
function verifyPath(elt, path, requestConfig) {
let sameHost
let url
@@ -2928,6 +3858,10 @@ var htmx = (function() {
return triggerEvent(elt, 'htmx:validateUrl', mergeObjects({ url, sameHost }, requestConfig))
}
+ /**
+ * @param {Object|FormData} obj
+ * @return {FormData}
+ */
function formDataFromObject(obj) {
if (obj instanceof FormData) return obj
const formData = new FormData()
@@ -2947,7 +3881,7 @@ var htmx = (function() {
/**
* @param {FormData} formData
- * @param {string|Symbol} name
+ * @param {string} name
* @param {Array} array
* @returns {Array}
*/
@@ -2995,7 +3929,7 @@ var htmx = (function() {
get: function(target, name) {
if (typeof name === 'symbol') {
// Forward symbol calls to the FormData itself directly
- return Reflect.get(...arguments)
+ return Reflect.get(target, name)
}
if (name === 'toJSON') {
// Support JSON.stringify call on proxy
@@ -3022,6 +3956,9 @@ var htmx = (function() {
}
},
set: function(target, name, value) {
+ if (typeof name !== 'string') {
+ return false
+ }
target.delete(name)
if (typeof value.forEach === 'function') {
value.forEach(function(v) { target.append(name, v) })
@@ -3031,7 +3968,9 @@ var htmx = (function() {
return true
},
deleteProperty: function(target, name) {
- target.delete(name)
+ if (typeof name === 'string') {
+ target.delete(name)
+ }
return true
},
// Support Object.assign call from proxy
@@ -3044,6 +3983,15 @@ var htmx = (function() {
})
}
+ /**
+ * @param {HttpVerb} verb
+ * @param {string} path
+ * @param {Element} elt
+ * @param {Event} event
+ * @param {HtmxAjaxEtc} [etc]
+ * @param {boolean} [confirmed]
+ * @return {Promise<void>}
+ */
function issueAjaxRequest(verb, path, elt, event, etc, confirmed) {
let resolve = null
let reject = null
@@ -3065,7 +4013,7 @@ var htmx = (function() {
maybeCall(resolve)
return promise
}
- const target = etc.targetOverride || getTarget(elt)
+ const target = etc.targetOverride || asElement(getTarget(elt))
if (target == null || target == DUMMY_ELT) {
triggerErrorEvent(elt, 'htmx:targetError', { target: getAttributeValue(elt, 'hx-target') })
maybeCall(reject)
@@ -3085,7 +4033,7 @@ var htmx = (function() {
if (buttonVerb != null) {
// ignore buttons with formmethod="dialog"
if (buttonVerb.toLowerCase() !== 'dialog') {
- verb = buttonVerb
+ verb = (/** @type HttpVerb */(buttonVerb))
}
}
}
@@ -3113,7 +4061,7 @@ var htmx = (function() {
if (selector === 'this') {
syncElt = findThisElement(elt, 'hx-sync')
} else {
- syncElt = querySelectorExt(elt, selector)
+ syncElt = asElement(querySelectorExt(elt, selector))
}
// default to the drop strategy
syncStrategy = (syncStrings[1] || 'drop').trim()
@@ -3233,12 +4181,19 @@ var htmx = (function() {
path = getDocument().location.href
}
+ /**
+ * @type {Object}
+ * @property {boolean} [credentials]
+ * @property {number} [timeout]
+ * @property {boolean} [noHeaders]
+ */
const requestAttrValues = getValuesForElement(elt, 'hx-request')
const eltIsBoosted = getInternalData(elt).boosted
let useUrlParams = htmx.config.methodsThatUseUrlParams.indexOf(verb) >= 0
+ /** @type HtmxRequestConfig */
const requestConfig = {
boosted: eltIsBoosted,
useUrlParams,
@@ -3302,7 +4257,7 @@ var htmx = (function() {
triggerErrorEvent(elt, 'htmx:invalidPath', requestConfig)
maybeCall(reject)
return promise
- };
+ }
xhr.open(verb.toUpperCase(), finalPath, true)
xhr.overrideMimeType('text/html')
@@ -3321,6 +4276,7 @@ var htmx = (function() {
}
}
+ /** @type {HtmxResponseInfo} */
const responseInfo = {
xhr,
target,
@@ -3331,6 +4287,7 @@ var htmx = (function() {
pathInfo: {
requestPath: path,
finalRequestPath: finalPath,
+ responsePath: null,
anchor
}
}
@@ -3411,6 +4368,17 @@ var htmx = (function() {
return promise
}
+ /**
+ * @typedef {Object} HtmxHistoryUpdate
+ * @property {string|null} [type]
+ * @property {string|null} [path]
+ */
+
+ /**
+ * @param {Element} elt
+ * @param {HtmxResponseInfo} responseInfo
+ * @return {HtmxHistoryUpdate}
+ */
function determineHistoryUpdates(elt, responseInfo) {
const xhr = responseInfo.xhr
@@ -3491,13 +4459,23 @@ var htmx = (function() {
}
}
+ /**
+ * @param {HtmxResponseHandlingConfig} responseHandlingConfig
+ * @param {number} status
+ * @return {boolean}
+ */
function codeMatches(responseHandlingConfig, status) {
var regExp = new RegExp(responseHandlingConfig.code)
- return regExp.test(status)
+ return regExp.test(status.toString(10))
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @return {HtmxResponseHandlingConfig}
+ */
function resolveResponseHandling(xhr) {
for (var i = 0; i < htmx.config.responseHandling.length; i++) {
+ /** @type HtmxResponseHandlingConfig */
var responseHandlingElement = htmx.config.responseHandling[i]
if (codeMatches(responseHandlingElement, xhr.status)) {
return responseHandlingElement
@@ -3509,6 +4487,9 @@ var htmx = (function() {
}
}
+ /**
+ * @param {string} title
+ */
function handleTitle(title) {
if (title) {
const titleElt = find('title')
@@ -3520,6 +4501,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @param {HtmxResponseInfo} responseInfo
+ */
function handleAjaxResponse(elt, responseInfo) {
const xhr = responseInfo.xhr
let target = responseInfo.target
@@ -3535,14 +4520,15 @@ var htmx = (function() {
if (hasHeader(xhr, /HX-Location:/i)) {
saveCurrentPageToHistory()
let redirectPath = xhr.getResponseHeader('HX-Location')
- var swapSpec
+ /** @type {HtmxAjaxHelperContext&{path:string}} */
+ var redirectSwapSpec
if (redirectPath.indexOf('{') === 0) {
- swapSpec = parseJSON(redirectPath)
+ redirectSwapSpec = parseJSON(redirectPath)
// what's the best way to throw an error if the user didn't include this
- redirectPath = swapSpec.path
- delete swapSpec.path
+ redirectPath = redirectSwapSpec.path
+ delete redirectSwapSpec.path
}
- ajaxHelper('GET', redirectPath, swapSpec).then(function() {
+ ajaxHelper('get', redirectPath, redirectSwapSpec).then(function() {
pushUrlIntoHistory(redirectPath)
})
return
@@ -3565,7 +4551,7 @@ var htmx = (function() {
if (xhr.getResponseHeader('HX-Retarget') === 'this') {
responseInfo.target = elt
} else {
- responseInfo.target = querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget'))
+ responseInfo.target = asElement(querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget')))
}
}
@@ -3577,7 +4563,7 @@ var htmx = (function() {
let ignoreTitle = htmx.config.ignoreTitle || responseHandling.ignoreTitle
let selectOverride = responseHandling.select
if (responseHandling.target) {
- responseInfo.target = querySelectorExt(elt, responseHandling.target)
+ responseInfo.target = asElement(querySelectorExt(elt, responseHandling.target))
}
var swapOverride = etc.swapOverride
if (swapOverride == null && responseHandling.swapOverride) {
@@ -3589,7 +4575,7 @@ var htmx = (function() {
if (xhr.getResponseHeader('HX-Retarget') === 'this') {
responseInfo.target = elt
} else {
- responseInfo.target = querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget'))
+ responseInfo.target = asElement(querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget')))
}
}
if (hasHeader(xhr, /HX-Reswap:/i)) {
@@ -3597,6 +4583,7 @@ var htmx = (function() {
}
var serverResponse = xhr.response
+ /** @type HtmxBeforeSwapDetails */
var beforeSwapDetails = mergeObjects({
shouldSwap,
serverResponse,
@@ -3713,7 +4700,9 @@ var htmx = (function() {
if (shouldTransition &&
triggerEvent(elt, 'htmx:beforeTransition', responseInfo) &&
- typeof Promise !== 'undefined' && document.startViewTransition) {
+ typeof Promise !== 'undefined' &&
+ // @ts-ignore experimental feature atm
+ document.startViewTransition) {
const settlePromise = new Promise(function(_resolve, _reject) {
settleResolve = _resolve
settleReject = _reject
@@ -3721,6 +4710,7 @@ var htmx = (function() {
// wrap the original doSwap() in a call to startViewTransition()
const innerDoSwap = doSwap
doSwap = function() {
+ // @ts-ignore experimental feature atm
document.startViewTransition(function() {
innerDoSwap()
return settlePromise
@@ -3729,7 +4719,7 @@ var htmx = (function() {
}
if (swapSpec.swapDelay > 0) {
- setTimeout(doSwap, swapSpec.swapDelay)
+ getWindow().setTimeout(doSwap, swapSpec.swapDelay)
} else {
doSwap()
}
@@ -3743,13 +4733,13 @@ var htmx = (function() {
// Extensions API
//= ===================================================================
- /** @type {Object<string, import("./htmx").HtmxExtension>} */
+ /** @type {Object<string, HtmxExtension>} */
const extensions = {}
/**
- * extensionBase defines the default functions for all extensions.
- * @returns {import("./htmx").HtmxExtension}
- */
+ * extensionBase defines the default functions for all extensions.
+ * @returns {HtmxExtension}
+ */
function extensionBase() {
return {
init: function(api) { return null },
@@ -3762,11 +4752,13 @@ var htmx = (function() {
}
/**
- * defineExtension initializes the extension and adds it to the htmx registry
- *
- * @param {string} name
- * @param {import("./htmx").HtmxExtension} extension
- */
+ * defineExtension initializes the extension and adds it to the htmx registry
+ *
+ * @see https://htmx.org/api/#defineExtension
+ *
+ * @param {string} name the extension name
+ * @param {HtmxExtension} extension the extension definition
+ */
function defineExtension(name, extension) {
if (extension.init) {
extension.init(internalAPI)
@@ -3775,21 +4767,24 @@ var htmx = (function() {
}
/**
- * removeExtension removes an extension from the htmx registry
- *
- * @param {string} name
- */
+ * removeExtension removes an extension from the htmx registry
+ *
+ * @see https://htmx.org/api/#removeExtension
+ *
+ * @param {string} name
+ */
function removeExtension(name) {
delete extensions[name]
}
/**
- * getExtensions searches up the DOM tree to return all extensions that can be applied to a given element
- *
- * @param {HTMLElement} elt
- * @param {import("./htmx").HtmxExtension[]=} extensionsToReturn
- * @param {import("./htmx").HtmxExtension[]=} extensionsToIgnore
- */
+ * getExtensions searches up the DOM tree to return all extensions that can be applied to a given element
+ *
+ * @param {Element} elt
+ * @param {HtmxExtension[]=} extensionsToReturn
+ * @param {string[]=} extensionsToIgnore
+ * @returns {HtmxExtension[]}
+ */
function getExtensions(elt, extensionsToReturn, extensionsToIgnore) {
if (extensionsToReturn == undefined) {
extensionsToReturn = []
@@ -3816,7 +4811,7 @@ var htmx = (function() {
}
})
}
- return getExtensions(parentElt(elt), extensionsToReturn, extensionsToIgnore)
+ return getExtensions(asElement(parentElt(elt)), extensionsToReturn, extensionsToIgnore)
}
//= ===================================================================
@@ -3828,12 +4823,12 @@ var htmx = (function() {
})
/**
- * Execute a function now if DOMContentLoaded has fired, otherwise listen for it.
- *
- * This function uses isReady because there is no realiable way to ask the browswer whether
- * the DOMContentLoaded event has already been fired; there's a gap between DOMContentLoaded
- * firing and readystate=complete.
- */
+ * Execute a function now if DOMContentLoaded has fired, otherwise listen for it.
+ *
+ * This function uses isReady because there is no reliable way to ask the browser whether
+ * the DOMContentLoaded event has already been fired; there's a gap between DOMContentLoaded
+ * firing and readystate=complete.
+ */
function ready(fn) {
// Checking readyState here is a failsafe in case the htmx script tag entered the DOM by
// some means other than the initial page load.
@@ -3856,9 +4851,9 @@ var htmx = (function() {
}
function getMetaConfig() {
+ /** @type HTMLMetaElement */
const element = getDocument().querySelector('meta[name="htmx-config"]')
if (element) {
- // @ts-ignore
return parseJSON(element.content)
} else {
return null
@@ -3906,7 +4901,7 @@ var htmx = (function() {
}
}
}
- setTimeout(function() {
+ getWindow().setTimeout(function() {
triggerEvent(body, 'htmx:load', {}) // give ready handlers a chance to load up before firing this event
body = null // kill reference for gc
}, 0)
@@ -3914,3 +4909,176 @@ var htmx = (function() {
return htmx
})()
+
+/** @typedef {'get'|'head'|'post'|'put'|'delete'|'connect'|'options'|'trace'|'patch'} HttpVerb */
+
+/**
+ * @typedef {Object} SwapOptions
+ * @property {string} [select]
+ * @property {string} [selectOOB]
+ * @property {*} [eventInfo]
+ * @property {string} [anchor]
+ * @property {Element} [contextElement]
+ * @property {swapCallback} [afterSwapCallback]
+ * @property {swapCallback} [afterSettleCallback]
+ */
+
+/**
+ * @callback swapCallback
+ */
+
+/**
+ * @typedef {'innerHTML' | 'outerHTML' | 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'delete' | 'none' | string} HtmxSwapStyle
+ */
+
+/**
+ * @typedef HtmxSwapSpecification
+ * @property {HtmxSwapStyle} swapStyle
+ * @property {number} swapDelay
+ * @property {number} settleDelay
+ * @property {boolean} [transition]
+ * @property {boolean} [ignoreTitle]
+ * @property {string} [head]
+ * @property {'top' | 'bottom'} [scroll]
+ * @property {string} [scrollTarget]
+ * @property {string} [show]
+ * @property {string} [showTarget]
+ * @property {boolean} [focusScroll]
+ */
+
+/**
+ * @typedef {((this:Node, evt:Event) => boolean) & {source: string}} ConditionalFunction
+ */
+
+/**
+ * @typedef {Object} HtmxTriggerSpecification
+ * @property {string} trigger
+ * @property {number} [pollInterval]
+ * @property {ConditionalFunction} [eventFilter]
+ * @property {boolean} [changed]
+ * @property {boolean} [once]
+ * @property {boolean} [consume]
+ * @property {number} [delay]
+ * @property {string} [from]
+ * @property {string} [target]
+ * @property {number} [throttle]
+ * @property {string} [queue]
+ * @property {string} [root]
+ * @property {string} [threshold]
+ */
+
+/**
+ * @typedef {{elt: Element, message: string, validity: ValidityState}} HtmxElementValidationError
+ */
+
+/**
+ * @typedef {Record<string, string>} HtmxHeaderSpecification
+ * @property {'true'} HX-Request
+ * @property {string|null} HX-Trigger
+ * @property {string|null} HX-Trigger-Name
+ * @property {string|null} HX-Target
+ * @property {string} HX-Current-URL
+ * @property {string} [HX-Prompt]
+ * @property {'true'} [HX-Boosted]
+ * @property {string} [Content-Type]
+ * @property {'true'} [HX-History-Restore-Request]
+ */
+
+/** @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]
+ */
+
+/**
+ * @typedef {Object} HtmxRequestConfig
+ * @property {boolean} boosted
+ * @property {boolean} useUrlParams
+ * @property {FormData} formData
+ * @property {Object} parameters formData proxy
+ * @property {FormData} unfilteredFormData
+ * @property {Object} unfilteredParameters unfilteredFormData proxy
+ * @property {HtmxHeaderSpecification} headers
+ * @property {Element} target
+ * @property {HttpVerb} verb
+ * @property {HtmxElementValidationError[]} errors
+ * @property {boolean} withCredentials
+ * @property {number} timeout
+ * @property {string} path
+ * @property {Event} triggeringEvent
+ */
+
+/**
+ * @typedef {Object} HtmxResponseInfo
+ * @property {XMLHttpRequest} xhr
+ * @property {Element} target
+ * @property {HtmxRequestConfig} requestConfig
+ * @property {HtmxAjaxEtc} etc
+ * @property {boolean} boosted
+ * @property {string} select
+ * @property {{requestPath: string, finalRequestPath: string, responsePath: string|null, anchor: string}} pathInfo
+ * @property {boolean} [failed]
+ * @property {boolean} [successful]
+ */
+
+/**
+ * @typedef {Object} HtmxAjaxEtc
+ * @property {boolean} [returnPromise]
+ * @property {HtmxAjaxHandler} [handler]
+ * @property {string} [select]
+ * @property {Element} [targetOverride]
+ * @property {HtmxSwapStyle} [swapOverride]
+ * @property {Record<string,string>} [headers]
+ * @property {Object|FormData} [values]
+ * @property {boolean} [credentials]
+ * @property {number} [timeout]
+ */
+
+/**
+ * @typedef {Object} HtmxResponseHandlingConfig
+ * @property {string} [code]
+ * @property {boolean} swap
+ * @property {boolean} [error]
+ * @property {boolean} [ignoreTitle]
+ * @property {string} [select]
+ * @property {string} [target]
+ * @property {string} [swapOverride]
+ * @property {string} [event]
+ */
+
+/**
+ * @typedef {HtmxResponseInfo & {shouldSwap: boolean, serverResponse: any, isError: boolean, ignoreTitle: boolean, selectOverride:string}} HtmxBeforeSwapDetails
+ */
+
+/**
+ * @callback HtmxAjaxHandler
+ * @param {Element} elt
+ * @param {HtmxResponseInfo} responseInfo
+ */
+
+/**
+ * @typedef {(() => void)} HtmxSettleTask
+ */
+
+/**
+ * @typedef {Object} HtmxSettleInfo
+ * @property {HtmxSettleTask[]} tasks
+ * @property {Element[]} elts
+ * @property {string} [title]
+ */
+
+/**
+ * @typedef {Object} HtmxExtension
+ * @see https://htmx.org/extensions/#defining
+ * @property {(api: any) => void} init
+ * @property {(name: string, event: Event|CustomEvent) => boolean} onEvent
+ * @property {(text: string, xhr: XMLHttpRequest, elt: Element) => string} transformResponse
+ * @property {(swapStyle: HtmxSwapStyle) => boolean} isInlineSwap
+ * @property {(swapStyle: HtmxSwapStyle, target: Element, fragment: Node, settleInfo: HtmxSettleInfo) => boolean} handleSwap
+ * @property {(xhr: XMLHttpRequest, parameters: FormData, elt: Element) => *|string|null} encodeParameters
+ */
diff --git a/dist/htmx.min.js b/dist/htmx.min.js
index 06994dde..61cbf1b5 100644
--- a/dist/htmx.min.js
+++ b/dist/htmx.min.js
@@ -1 +1 @@
-var htmx=function(){"use strict";const Q={onLoad:z,process:Lt,on:xe,off:ye,trigger:fe,ajax:vn,find:r,findAll:m,closest:h,values:function(e,t){const n=nn(e,t||"post");return n.values},remove:G,addClass:K,removeClass:o,toggleClass:Z,takeClass:W,swap:_e,defineExtension:In,removeExtension:Pn,logAll:$,logNone:J,logger:null,config:{historyEnabled:true,historyCacheSize:10,refreshOnHistoryMiss:false,defaultSwapStyle:"innerHTML",defaultSwapDelay:0,defaultSettleDelay:20,includeIndicatorStyles:true,indicatorClass:"htmx-indicator",requestClass:"htmx-request",addedClass:"htmx-added",settlingClass:"htmx-settling",swappingClass:"htmx-swapping",allowEval:true,allowScriptTags:true,inlineScriptNonce:"",attributesToSettle:["class","style","width","height"],withCredentials:false,timeout:0,wsReconnectDelay:"full-jitter",wsBinaryType:"blob",disableSelector:"[hx-disable], [data-hx-disable]",scrollBehavior:"instant",defaultFocusScroll:false,getCacheBusterParam:false,globalViewTransitions:false,methodsThatUseUrlParams:["get","delete"],selfRequestsOnly:true,ignoreTitle:false,scrollIntoViewOnBoost:true,triggerSpecsCache:null,disableInheritance:false,responseHandling:[{code:"204",swap:false},{code:"[23]..",swap:true},{code:"[45]..",swap:false,error:true}]},parseInterval:d,_:t,version:"2.0a"};const n={addTriggerHandler:bt,bodyContains:le,canAccessLocalStorage:j,findThisElement:we,filterValues:ln,swap:_e,hasAttribute:s,getAttributeValue:te,getClosestAttributeValue:re,getClosestMatch:q,getExpressionVars:xn,getHeaders:sn,getInputValues:nn,getInternalData:ie,getSwapSpecification:cn,getTriggerSpecs:ot,getTarget:Se,makeFragment:D,mergeObjects:ue,makeSettleInfo:hn,oobSwap:Oe,querySelectorExt:ce,settleImmediately:jt,shouldCancel:ct,triggerEvent:fe,triggerErrorEvent:ae,withExtensions:kt};const E=["get","post","put","delete","patch"];const R=E.map(function(e){return"[hx-"+e+"], [data-hx-"+e+"]"}).join(", ");const O=e("head");function e(e,t=false){return new RegExp(`<${e}(\\s[^>]*>|>)([\\s\\S]*?)<\\/${e}>`,t?"gim":"im")}function d(e){if(e==undefined){return undefined}let t=NaN;if(e.slice(-2)=="ms"){t=parseFloat(e.slice(0,-2))}else if(e.slice(-1)=="s"){t=parseFloat(e.slice(0,-1))*1e3}else if(e.slice(-1)=="m"){t=parseFloat(e.slice(0,-1))*1e3*60}else{t=parseFloat(e)}return isNaN(t)?undefined:t}function ee(e,t){return e.getAttribute&&e.getAttribute(t)}function s(e,t){return e.hasAttribute&&(e.hasAttribute(t)||e.hasAttribute("data-"+t))}function te(e,t){return ee(e,t)||ee(e,"data-"+t)}function u(e){const t=e.parentElement;if(!t&&e.parentNode instanceof ShadowRoot)return e.parentNode;return t}function ne(){return document}function H(e,t){return e.getRootNode?e.getRootNode({composed:t}):ne()}function q(e,t){while(e&&!t(e)){e=u(e)}return e||null}function T(e,t,n){const r=te(t,n);const o=te(t,"hx-disinherit");var i=te(t,"hx-inherit");if(e!==t){if(Q.config.disableInheritance){if(i&&(i==="*"||i.split(" ").indexOf(n)>=0)){return r}else{return null}}if(o&&(o==="*"||o.split(" ").indexOf(n)>=0)){return"unset"}}return r}function re(t,n){let r=null;q(t,function(e){return r=T(t,e,n)});if(r!=="unset"){return r}}function f(e,t){const n=e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||e.oMatchesSelector;return n&&n.call(e,t)}function N(e){const t=/<([a-z][^\/\0>\x20\t\r\n\f]*)/i;const n=t.exec(e);if(n){return n[1].toLowerCase()}else{return""}}function L(e){const t=new DOMParser;return t.parseFromString(e,"text/html")}function A(e,t){while(t.childNodes.length>0){e.append(t.childNodes[0])}}function I(e){const t=ne().createElement("script");se(e.attributes,function(e){t.setAttribute(e.name,e.value)});t.textContent=e.textContent;t.async=false;if(Q.config.inlineScriptNonce){t.nonce=Q.config.inlineScriptNonce}return t}function P(e){return e.matches("script")&&(e.type==="text/javascript"||e.type==="module"||e.type==="")}function k(e){Array.from(e.querySelectorAll("script")).forEach(e=>{if(P(e)){const t=I(e);const n=e.parentNode;try{n.insertBefore(t,e)}catch(e){v(e)}finally{e.remove()}}})}function D(e){const t=e.replace(O,"");const n=N(t);let r=null;if(n==="html"){r=new DocumentFragment;const i=L(e);A(r,i.body);r.title=i.title}else if(n==="body"){r=new DocumentFragment;const i=L(t);A(r,i.body);r.title=i.title}else{const i=L('<body><template class="internal-htmx-wrapper">'+t+"</template></body>");r=i.querySelector("template").content;r.title=i.title;var o=r.querySelector("title");if(o&&o.parentNode===r){o.remove();r.title=o.innerText}}if(r){if(Q.config.allowScriptTags){k(r)}else{r.querySelectorAll("script").forEach(e=>e.remove())}}return r}function oe(e){if(e){e()}}function X(e,t){return Object.prototype.toString.call(e)==="[object "+t+"]"}function M(e){return X(e,"Function")}function F(e){return X(e,"Object")}function ie(e){const t="htmx-internal-data";let n=e[t];if(!n){n=e[t]={}}return n}function U(t){const n=[];if(t){for(let e=0;e<t.length;e++){n.push(t[e])}}return n}function se(t,n){if(t){for(let e=0;e<t.length;e++){n(t[e])}}}function B(e){const t=e.getBoundingClientRect();const n=t.top;const r=t.bottom;return n<window.innerHeight&&r>=0}function le(e){if(e.getRootNode&&e.getRootNode()instanceof window.ShadowRoot){return ne().body.contains(e.getRootNode().host)}else{return ne().body.contains(e)}}function V(e){return e.trim().split(/\s+/)}function ue(e,t){for(const n in t){if(t.hasOwnProperty(n)){e[n]=t[n]}}return e}function w(e){try{return JSON.parse(e)}catch(e){v(e);return null}}function j(){const e="htmx:localStorageTest";try{localStorage.setItem(e,e);localStorage.removeItem(e);return true}catch(e){return false}}function _(t){try{const e=new URL(t);if(e){t=e.pathname+e.search}if(!/^\/$/.test(t)){t=t.replace(/\/+$/,"")}return t}catch(e){return t}}function t(e){return gn(ne().body,function(){return eval(e)})}function z(t){const e=Q.on("htmx:load",function(e){t(e.detail.elt)});return e}function $(){Q.logger=function(e,t,n){if(console){console.log(t,e,n)}}}function J(){Q.logger=null}function r(e,t){if(t){return e.querySelector(t)}else{return r(ne(),e)}}function m(e,t){if(t){return e.querySelectorAll(t)}else{return m(ne(),e)}}function G(e,t){e=x(e);if(t){setTimeout(function(){G(e);e=null},t)}else{u(e).removeChild(e)}}function K(e,t,n){e=x(e);if(n){setTimeout(function(){K(e,t);e=null},n)}else{e.classList&&e.classList.add(t)}}function o(e,t,n){e=x(e);if(n){setTimeout(function(){o(e,t);e=null},n)}else{if(e.classList){e.classList.remove(t);if(e.classList.length===0){e.removeAttribute("class")}}}}function Z(e,t){e=x(e);e.classList.toggle(t)}function W(e,t){e=x(e);se(e.parentElement.children,function(e){o(e,t)});K(e,t)}function h(e,t){e=x(e);if(e.closest){return e.closest(t)}else{do{if(e==null||f(e,t)){return e}}while(e=e&&u(e));return null}}function l(e,t){return e.substring(0,t.length)===t}function Y(e,t){return e.substring(e.length-t.length)===t}function i(e){const t=e.trim();if(l(t,"<")&&Y(t,"/>")){return t.substring(1,t.length-2)}else{return t}}function a(e,t,n){if(t.indexOf("closest ")===0){return[h(e,i(t.substr(8)))]}else if(t.indexOf("find ")===0){return[r(e,i(t.substr(5)))]}else if(t==="next"){return[e.nextElementSibling]}else if(t.indexOf("next ")===0){return[ge(e,i(t.substr(5)),!!n)]}else if(t==="previous"){return[e.previousElementSibling]}else if(t.indexOf("previous ")===0){return[pe(e,i(t.substr(9)),!!n)]}else if(t==="document"){return[document]}else if(t==="window"){return[window]}else if(t==="body"){return[document.body]}else if(t==="root"){return[H(e,!!n)]}else if(t.indexOf("global ")===0){return a(e,t.slice(7),true)}else{return H(e,!!n).querySelectorAll(i(t))}}var ge=function(t,e,n){const r=H(t,n).querySelectorAll(e);for(let e=0;e<r.length;e++){const o=r[e];if(o.compareDocumentPosition(t)===Node.DOCUMENT_POSITION_PRECEDING){return o}}};var pe=function(t,e,n){const r=H(t,n).querySelectorAll(e);for(let e=r.length-1;e>=0;e--){const o=r[e];if(o.compareDocumentPosition(t)===Node.DOCUMENT_POSITION_FOLLOWING){return o}}};function ce(e,t){if(t){return a(e,t)[0]}else{return a(ne().body,e)[0]}}function x(e,t){if(X(e,"String")){return r(t||document,e)}else{return e}}function me(e,t,n){if(M(t)){return{target:ne().body,event:e,listener:t}}else{return{target:x(e),event:t,listener:n}}}function xe(t,n,r){Xn(function(){const e=me(t,n,r);e.target.addEventListener(e.event,e.listener)});const e=M(n);return e?n:r}function ye(t,n,r){Xn(function(){const e=me(t,n,r);e.target.removeEventListener(e.event,e.listener)});return M(n)?n:r}const be=ne().createElement("output");function ve(e,t){const n=re(e,t);if(n){if(n==="this"){return[we(e,t)]}else{const r=a(e,n);if(r.length===0){v('The selector "'+n+'" on '+t+" returned no matches!");return[be]}else{return r}}}}function we(e,t){return q(e,function(e){return te(e,t)!=null})}function Se(e){const t=re(e,"hx-target");if(t){if(t==="this"){return we(e,"hx-target")}else{return ce(e,t)}}else{const n=ie(e);if(n.boosted){return ne().body}else{return e}}}function Ce(t){const n=Q.config.attributesToSettle;for(let e=0;e<n.length;e++){if(t===n[e]){return true}}return false}function Ee(t,n){se(t.attributes,function(e){if(!n.hasAttribute(e.name)&&Ce(e.name)){t.removeAttribute(e.name)}});se(n.attributes,function(e){if(Ce(e.name)){t.setAttribute(e.name,e.value)}})}function Re(t,e){const n=kn(e);for(let e=0;e<n.length;e++){const r=n[e];try{if(r.isInlineSwap(t)){return true}}catch(e){v(e)}}return t==="outerHTML"}function Oe(e,o,i){let t="#"+ee(o,"id");let s="outerHTML";if(e==="true"){}else if(e.indexOf(":")>0){s=e.substr(0,e.indexOf(":"));t=e.substr(e.indexOf(":")+1,e.length)}else{s=e}const n=ne().querySelectorAll(t);if(n){se(n,function(e){let t;const n=o.cloneNode(true);t=ne().createDocumentFragment();t.appendChild(n);if(!Re(s,e)){t=n}const r={shouldSwap:true,target:e,fragment:t};if(!fe(e,"htmx:oobBeforeSwap",r))return;e=r.target;if(r.shouldSwap){Ve(s,e,e,t,i)}se(i.elts,function(e){fe(e,"htmx:oobAfterSwap",r)})});o.parentNode.removeChild(o)}else{o.parentNode.removeChild(o);ae(ne().body,"htmx:oobErrorNoTarget",{content:o})}return e}function He(e){se(m(e,"[hx-preserve], [data-hx-preserve]"),function(e){const t=te(e,"id");const n=ne().getElementById(t);if(n!=null){e.parentNode.replaceChild(n,e)}})}function qe(s,e,l){se(e.querySelectorAll("[id]"),function(e){const t=ee(e,"id");if(t&&t.length>0){const n=t.replace("'","\\'");const r=e.tagName.replace(":","\\:");const o=s.querySelector(r+"[id='"+n+"']");if(o&&o!==s){const i=e.cloneNode();Ee(e,o);l.tasks.push(function(){Ee(e,i)})}}})}function Te(e){return function(){o(e,Q.config.addedClass);Lt(e);Ne(e);fe(e,"htmx:load")}}function Ne(e){const t="[autofocus]";const n=f(e,t)?e:e.querySelector(t);if(n!=null){n.focus()}}function c(e,t,n,r){qe(e,n,r);while(n.childNodes.length>0){const o=n.firstChild;K(o,Q.config.addedClass);e.insertBefore(o,t);if(o.nodeType!==Node.TEXT_NODE&&o.nodeType!==Node.COMMENT_NODE){r.tasks.push(Te(o))}}}function Le(e,t){let n=0;while(n<e.length){t=(t<<5)-t+e.charCodeAt(n++)|0}return t}function Ae(t){let n=0;if(t.attributes){for(let e=0;e<t.attributes.length;e++){const r=t.attributes[e];if(r.value){n=Le(r.name,n);n=Le(r.value,n)}}}return n}function Ie(t){const n=ie(t);if(n.onHandlers){for(let e=0;e<n.onHandlers.length;e++){const r=n.onHandlers[e];t.removeEventListener(r.event,r.listener)}delete n.onHandlers}}function Pe(e){const t=ie(e);if(t.timeout){clearTimeout(t.timeout)}if(t.listenerInfos){se(t.listenerInfos,function(e){if(e.on){e.on.removeEventListener(e.trigger,e.listener)}})}Ie(e);se(Object.keys(t),function(e){delete t[e]})}function g(e){fe(e,"htmx:beforeCleanupElement");Pe(e);if(e.children){se(e.children,function(e){g(e)})}}function ke(t,e,n){let r;const o=t.previousSibling;c(u(t),t,e,n);if(o==null){r=u(t).firstChild}else{r=o.nextSibling}n.elts=n.elts.filter(function(e){return e!==t});while(r&&r!==t){if(r.nodeType===Node.ELEMENT_NODE){n.elts.push(r)}r=r.nextElementSibling}g(t);t.remove()}function De(e,t,n){return c(e,e.firstChild,t,n)}function Xe(e,t,n){return c(u(e),e,t,n)}function Me(e,t,n){return c(e,null,t,n)}function Fe(e,t,n){return c(u(e),e.nextSibling,t,n)}function Ue(e,t,n){g(e);return u(e).removeChild(e)}function Be(e,t,n){const r=e.firstChild;c(e,r,t,n);if(r){while(r.nextSibling){g(r.nextSibling);e.removeChild(r.nextSibling)}g(r);e.removeChild(r)}}function Ve(t,e,n,r,o){switch(t){case"none":return;case"outerHTML":ke(n,r,o);return;case"afterbegin":De(n,r,o);return;case"beforebegin":Xe(n,r,o);return;case"beforeend":Me(n,r,o);return;case"afterend":Fe(n,r,o);return;case"delete":Ue(n,r,o);return;default:var i=kn(e);for(let e=0;e<i.length;e++){const s=i[e];try{const l=s.handleSwap(t,n,r,o);if(l){if(typeof l.length!=="undefined"){for(let e=0;e<l.length;e++){const u=l[e];if(u.nodeType!==Node.TEXT_NODE&&u.nodeType!==Node.COMMENT_NODE){o.tasks.push(Te(u))}}}return}}catch(e){v(e)}}if(t==="innerHTML"){Be(n,r,o)}else{Ve(Q.config.defaultSwapStyle,e,n,r,o)}}}function je(e,n){se(m(e,"[hx-swap-oob], [data-hx-swap-oob]"),function(e){const t=te(e,"hx-swap-oob");if(t!=null){Oe(t,e,n)}})}function _e(e,t,n,r){if(!r){r={}}e=x(e);const o=document.activeElement;let i={};try{i={elt:o,start:o?o.selectionStart:null,end:o?o.selectionEnd:null}}catch(e){}const s=hn(e);let l=D(t);s.title=l.title;if(r.selectOOB){const c=r.selectOOB.split(",");for(let t=0;t<c.length;t++){const a=c[t].split(":",2);let e=a[0].trim();if(e.indexOf("#")===0){e=e.substring(1)}const f=a[1]||"true";const h=l.querySelector("#"+e);if(h){Oe(f,h,s)}}}je(l,s);se(m(l,"template"),function(e){je(e.content,s);if(e.content.childElementCount===0){e.remove()}});if(r.select){const d=ne().createDocumentFragment();se(l.querySelectorAll(r.select),function(e){d.appendChild(e)});l=d}He(l);Ve(n.swapStyle,r.contextElement,e,l,s);if(i.elt&&!le(i.elt)&&ee(i.elt,"id")){const g=document.getElementById(ee(i.elt,"id"));const p={preventScroll:n.focusScroll!==undefined?!n.focusScroll:!Q.config.defaultFocusScroll};if(g){if(i.start&&g.setSelectionRange){try{g.setSelectionRange(i.start,i.end)}catch(e){}}g.focus(p)}}e.classList.remove(Q.config.swappingClass);se(s.elts,function(e){if(e.classList){e.classList.add(Q.config.settlingClass)}fe(e,"htmx:afterSwap",r.eventInfo)});if(r.afterSwapCallback){r.afterSwapCallback()}if(!n.ignoreTitle){Tn(s.title)}const u=function(){se(s.tasks,function(e){e.call()});se(s.elts,function(e){if(e.classList){e.classList.remove(Q.config.settlingClass)}fe(e,"htmx:afterSettle",r.eventInfo)});if(r.anchor){const e=x("#"+r.anchor);if(e){e.scrollIntoView({block:"start",behavior:"auto"})}}dn(s.elts,n);if(r.afterSettleCallback){r.afterSettleCallback()}};if(n.settleDelay>0){setTimeout(u,n.settleDelay)}else{u()}}function ze(e,t,n){const r=e.getResponseHeader(t);if(r.indexOf("{")===0){const o=w(r);for(const i in o){if(o.hasOwnProperty(i)){let e=o[i];if(!F(e)){e={value:e}}fe(n,i,e)}}}else{const s=r.split(",");for(let e=0;e<s.length;e++){fe(n,s[e].trim(),[])}}}const $e=/\s/;const p=/[\s,]/;const Je=/[_$a-zA-Z]/;const Ge=/[_$a-zA-Z0-9]/;const Ke=['"',"'","/"];const y=/[^\s]/;const Ze=/[{(]/;const We=/[})]/;function Ye(e){const t=[];let n=0;while(n<e.length){if(Je.exec(e.charAt(n))){var r=n;while(Ge.exec(e.charAt(n+1))){n++}t.push(e.substr(r,n-r+1))}else if(Ke.indexOf(e.charAt(n))!==-1){const o=e.charAt(n);var r=n;n++;while(n<e.length&&e.charAt(n)!==o){if(e.charAt(n)==="\\"){n++}n++}t.push(e.substr(r,n-r+1))}else{const i=e.charAt(n);t.push(i)}n++}return t}function Qe(e,t,n){return Je.exec(e.charAt(0))&&e!=="true"&&e!=="false"&&e!=="this"&&e!==n&&t!=="."}function et(r,o,i){if(o[0]==="["){o.shift();let e=1;let t=" return (function("+i+"){ return (";let n=null;while(o.length>0){const s=o[0];if(s==="]"){e--;if(e===0){if(n===null){t=t+"true"}o.shift();t+=")})";try{const l=gn(r,function(){return Function(t)()},function(){return true});l.source=t;return l}catch(e){ae(ne().body,"htmx:syntax:error",{error:e,source:t});return null}}}else if(s==="["){e++}if(Qe(s,n,i)){t+="(("+i+"."+s+") ? ("+i+"."+s+") : (window."+s+"))"}else{t=t+s}n=o.shift()}}}function b(e,t){let n="";while(e.length>0&&!t.test(e[0])){n+=e.shift()}return n}function tt(e){let t;if(e.length>0&&Ze.test(e[0])){e.shift();t=b(e,We).trim();e.shift()}else{t=b(e,p)}return t}const nt="input, textarea, select";function rt(e,t,n){const r=[];const o=Ye(t);do{b(o,y);const l=o.length;const u=b(o,/[,\[\s]/);if(u!==""){if(u==="every"){const c={trigger:"every"};b(o,y);c.pollInterval=d(b(o,/[,\[\s]/));b(o,y);var i=et(e,o,"event");if(i){c.eventFilter=i}r.push(c)}else{const a={trigger:u};var i=et(e,o,"event");if(i){a.eventFilter=i}while(o.length>0&&o[0]!==","){b(o,y);const f=o.shift();if(f==="changed"){a.changed=true}else if(f==="once"){a.once=true}else if(f==="consume"){a.consume=true}else if(f==="delay"&&o[0]===":"){o.shift();a.delay=d(b(o,p))}else if(f==="from"&&o[0]===":"){o.shift();if(Ze.test(o[0])){var s=tt(o)}else{var s=b(o,p);if(s==="closest"||s==="find"||s==="next"||s==="previous"){o.shift();const h=tt(o);if(h.length>0){s+=" "+h}}}a.from=s}else if(f==="target"&&o[0]===":"){o.shift();a.target=tt(o)}else if(f==="throttle"&&o[0]===":"){o.shift();a.throttle=d(b(o,p))}else if(f==="queue"&&o[0]===":"){o.shift();a.queue=b(o,p)}else if(f==="root"&&o[0]===":"){o.shift();a[f]=tt(o)}else if(f==="threshold"&&o[0]===":"){o.shift();a[f]=b(o,p)}else{ae(e,"htmx:syntax:error",{token:o.shift()})}}r.push(a)}}if(o.length===l){ae(e,"htmx:syntax:error",{token:o.shift()})}b(o,y)}while(o[0]===","&&o.shift());if(n){n[t]=r}return r}function ot(e){const t=te(e,"hx-trigger");let n=[];if(t){const r=Q.config.triggerSpecsCache;n=r&&r[t]||rt(e,t,r)}if(n.length>0){return n}else if(f(e,"form")){return[{trigger:"submit"}]}else if(f(e,'input[type="button"], input[type="submit"]')){return[{trigger:"click"}]}else if(f(e,nt)){return[{trigger:"change"}]}else{return[{trigger:"click"}]}}function it(e){ie(e).cancelled=true}function st(e,t,n){const r=ie(e);r.timeout=setTimeout(function(){if(le(e)&&r.cancelled!==true){if(!ft(n,e,It("hx:poll:trigger",{triggerSpec:n,target:e}))){t(e)}st(e,t,n)}},n.pollInterval)}function lt(e){return location.hostname===e.hostname&&ee(e,"href")&&ee(e,"href").indexOf("#")!==0}function ut(t,o,e){if(t.tagName==="A"&&lt(t)&&(t.target===""||t.target==="_self")||t.tagName==="FORM"){o.boosted=true;let n,r;if(t.tagName==="A"){n="get";r=ee(t,"href")}else{const i=ee(t,"method");n=i?i.toLowerCase():"get";if(n==="get"){}r=ee(t,"action")}e.forEach(function(e){ht(t,function(e,t){if(h(e,Q.config.disableSelector)){g(e);return}de(n,r,e,t)},o,e,true)})}}function ct(e,t){if(e.type==="submit"||e.type==="click"){if(t.tagName==="FORM"){return true}if(f(t,'input[type="submit"], button')&&h(t,"form")!==null){return true}if(t.tagName==="A"&&t.href&&(t.getAttribute("href")==="#"||t.getAttribute("href").indexOf("#")!==0)){return true}}return false}function at(e,t){return ie(e).boosted&&e.tagName==="A"&&t.type==="click"&&(t.ctrlKey||t.metaKey)}function ft(e,t,n){const r=e.eventFilter;if(r){try{return r.call(t,n)!==true}catch(e){ae(ne().body,"htmx:eventFilter:error",{error:e,source:r.source});return true}}return false}function ht(i,s,e,l,u){const c=ie(i);let t;if(l.from){t=a(i,l.from)}else{t=[i]}if(l.changed){t.forEach(function(e){const t=ie(e);t.lastValue=e.value})}se(t,function(r){const o=function(e){if(!le(i)){r.removeEventListener(l.trigger,o);return}if(at(i,e)){return}if(u||ct(e,i)){e.preventDefault()}if(ft(l,i,e)){return}const t=ie(e);t.triggerSpec=l;if(t.handledFor==null){t.handledFor=[]}if(t.handledFor.indexOf(i)<0){t.handledFor.push(i);if(l.consume){e.stopPropagation()}if(l.target&&e.target){if(!f(e.target,l.target)){return}}if(l.once){if(c.triggeredOnce){return}else{c.triggeredOnce=true}}if(l.changed){const n=ie(r);if(n.lastValue===r.value){return}n.lastValue=r.value}if(c.delayed){clearTimeout(c.delayed)}if(c.throttle){return}if(l.throttle>0){if(!c.throttle){s(i,e);c.throttle=setTimeout(function(){c.throttle=null},l.throttle)}}else if(l.delay>0){c.delayed=setTimeout(function(){s(i,e)},l.delay)}else{fe(i,"htmx:trigger");s(i,e)}}};if(e.listenerInfos==null){e.listenerInfos=[]}e.listenerInfos.push({trigger:l.trigger,listener:o,on:r});r.addEventListener(l.trigger,o)})}let dt=false;let gt=null;function pt(){if(!gt){gt=function(){dt=true};window.addEventListener("scroll",gt);setInterval(function(){if(dt){dt=false;se(ne().querySelectorAll("[hx-trigger*='revealed'],[data-hx-trigger*='revealed']"),function(e){mt(e)})}},200)}}function mt(t){if(!s(t,"data-hx-revealed")&&B(t)){t.setAttribute("data-hx-revealed","true");const e=ie(t);if(e.initHash){fe(t,"revealed")}else{t.addEventListener("htmx:afterProcessNode",function(e){fe(t,"revealed")},{once:true})}}}function xt(e,t,n,r){const o=function(){if(!n.loaded){n.loaded=true;t(e)}};if(r>0){setTimeout(o,r)}else{o()}}function yt(t,o,e){let i=false;se(E,function(n){if(s(t,"hx-"+n)){const r=te(t,"hx-"+n);i=true;o.path=r;o.verb=n;e.forEach(function(e){bt(t,e,o,function(e,t){if(h(e,Q.config.disableSelector)){g(e);return}de(n,r,e,t)})})}});return i}function bt(r,e,t,n){if(e.trigger==="revealed"){pt();ht(r,n,t,e);mt(r)}else if(e.trigger==="intersect"){const o={};if(e.root){o.root=ce(r,e.root)}if(e.threshold){o.threshold=parseFloat(e.threshold)}const i=new IntersectionObserver(function(t){for(let e=0;e<t.length;e++){const n=t[e];if(n.isIntersecting){fe(r,"intersect");break}}},o);i.observe(r);ht(r,n,t,e)}else if(e.trigger==="load"){if(!ft(e,r,It("load",{elt:r}))){xt(r,n,t,e.delay)}}else if(e.pollInterval>0){t.polling=true;st(r,n,e)}else{ht(r,n,t,e)}}function vt(e){const t=e.attributes;for(let e=0;e<t.length;e++){const n=t[e].name;if(l(n,"hx-on:")||l(n,"data-hx-on:")||l(n,"hx-on-")||l(n,"data-hx-on-")){return true}}return false}function wt(e){let t=null;const n=[];if(!(e instanceof ShadowRoot)){if(vt(e)){n.push(e)}const r=document.evaluate('.//*[@*[ starts-with(name(), "hx-on:") or starts-with(name(), "data-hx-on:") or'+' starts-with(name(), "hx-on-") or starts-with(name(), "data-hx-on-") ]]',e);while(t=r.iterateNext())n.push(t)}return n}function St(e){if(e.querySelectorAll){const t=", [hx-boost] a, [data-hx-boost] a, a[hx-boost], a[data-hx-boost]";const n=e.querySelectorAll(R+t+", form, [type='submit'],"+" [hx-ext], [data-hx-ext], [hx-trigger], [data-hx-trigger]");return n}else{return[]}}function Ct(e){const t=h(e.target,"button, input[type='submit']");const n=Rt(e);if(n){n.lastButtonClicked=t}}function Et(e){const t=Rt(e);if(t){t.lastButtonClicked=null}}function Rt(e){const t=h(e.target,"button, input[type='submit']");if(!t){return}const n=x("#"+ee(t,"form"),t.getRootNode())||h(t,"form");if(!n){return}return ie(n)}function Ot(e){e.addEventListener("click",Ct);e.addEventListener("focusin",Ct);e.addEventListener("focusout",Et)}function Ht(e){const t=Ye(e);let n=0;for(let e=0;e<t.length;e++){const r=t[e];if(r==="{"){n++}else if(r==="}"){n--}}return n}function qt(t,e,n){const r=ie(t);if(!Array.isArray(r.onHandlers)){r.onHandlers=[]}let o;const i=function(e){return gn(t,function(){if(!o){o=new Function("event",n)}o.call(t,e)})};t.addEventListener(e,i);r.onHandlers.push({event:e,listener:i})}function Tt(t){Ie(t);for(let e=0;e<t.attributes.length;e++){const n=t.attributes[e].name;const r=t.attributes[e].value;if(l(n,"hx-on")||l(n,"data-hx-on")){const o=n.indexOf("-on")+3;const i=n.slice(o,o+1);if(i==="-"||i===":"){let e=n.slice(o+1);if(l(e,":")){e="htmx"+e}else if(l(e,"-")){e="htmx:"+e.slice(1)}else if(l(e,"htmx-")){e="htmx:"+e.slice(5)}qt(t,e,r)}}}}function Nt(t){if(h(t,Q.config.disableSelector)){g(t);return}const n=ie(t);if(n.initHash!==Ae(t)){Pe(t);n.initHash=Ae(t);fe(t,"htmx:beforeProcessNode");if(t.value){n.lastValue=t.value}const e=ot(t);const r=yt(t,n,e);if(!r){if(re(t,"hx-boost")==="true"){ut(t,n,e)}else if(s(t,"hx-trigger")){e.forEach(function(e){bt(t,e,n,function(){})})}}if(t.tagName==="FORM"||ee(t,"type")==="submit"&&s(t,"form")){Ot(t)}fe(t,"htmx:afterProcessNode")}}function Lt(e){e=x(e);if(h(e,Q.config.disableSelector)){g(e);return}Nt(e);se(St(e),function(e){Nt(e)});se(wt(e),Tt)}function At(e){return e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}function It(e,t){let n;if(window.CustomEvent&&typeof window.CustomEvent==="function"){n=new CustomEvent(e,{bubbles:true,cancelable:true,composed:true,detail:t})}else{n=ne().createEvent("CustomEvent");n.initCustomEvent(e,true,true,t)}return n}function ae(e,t,n){fe(e,t,ue({error:t},n))}function Pt(e){return e==="htmx:afterProcessNode"}function kt(e,t){se(kn(e),function(e){try{t(e)}catch(e){v(e)}})}function v(e){if(console.error){console.error(e)}else if(console.log){console.log("ERROR: ",e)}}function fe(e,t,n){e=x(e);if(n==null){n={}}n.elt=e;const r=It(t,n);if(Q.logger&&!Pt(t)){Q.logger(e,t,n)}if(n.error){v(n.error);fe(e,"htmx:error",{errorInfo:n})}let o=e.dispatchEvent(r);const i=At(t);if(o&&i!==t){const s=It(i,r.detail);o=o&&e.dispatchEvent(s)}kt(e,function(e){o=o&&(e.onEvent(t,r)!==false&&!r.defaultPrevented)});return o}let S=location.pathname+location.search;function Dt(){const e=ne().querySelector("[hx-history-elt],[data-hx-history-elt]");return e||ne().body}function Xt(t,e){if(!j()){return}const n=Ft(e);const r=ne().title;const o=window.scrollY;if(Q.config.historyCacheSize<=0){localStorage.removeItem("htmx-history-cache");return}t=_(t);const i=w(localStorage.getItem("htmx-history-cache"))||[];for(let e=0;e<i.length;e++){if(i[e].url===t){i.splice(e,1);break}}const s={url:t,content:n,title:r,scroll:o};fe(ne().body,"htmx:historyItemCreated",{item:s,cache:i});i.push(s);while(i.length>Q.config.historyCacheSize){i.shift()}while(i.length>0){try{localStorage.setItem("htmx-history-cache",JSON.stringify(i));break}catch(e){ae(ne().body,"htmx:historyCacheError",{cause:e,cache:i});i.shift()}}}function Mt(t){if(!j()){return null}t=_(t);const n=w(localStorage.getItem("htmx-history-cache"))||[];for(let e=0;e<n.length;e++){if(n[e].url===t){return n[e]}}return null}function Ft(e){const t=Q.config.requestClass;const n=e.cloneNode(true);se(m(n,"."+t),function(e){o(e,t)});return n.innerHTML}function Ut(){const e=Dt();const t=S||location.pathname+location.search;let n;try{n=ne().querySelector('[hx-history="false" i],[data-hx-history="false" i]')}catch(e){n=ne().querySelector('[hx-history="false"],[data-hx-history="false"]')}if(!n){fe(ne().body,"htmx:beforeHistorySave",{path:t,historyElt:e});Xt(t,e)}if(Q.config.historyEnabled)history.replaceState({htmx:true},ne().title,window.location.href)}function Bt(e){if(Q.config.getCacheBusterParam){e=e.replace(/org\.htmx\.cache-buster=[^&]*&?/,"");if(Y(e,"&")||Y(e,"?")){e=e.slice(0,-1)}}if(Q.config.historyEnabled){history.pushState({htmx:true},"",e)}S=e}function Vt(e){if(Q.config.historyEnabled)history.replaceState({htmx:true},"",e);S=e}function jt(e){se(e,function(e){e.call()})}function _t(o){const e=new XMLHttpRequest;const i={path:o,xhr:e};fe(ne().body,"htmx:historyCacheMiss",i);e.open("GET",o,true);e.setRequestHeader("HX-Request","true");e.setRequestHeader("HX-History-Restore-Request","true");e.setRequestHeader("HX-Current-URL",ne().location.href);e.onload=function(){if(this.status>=200&&this.status<400){fe(ne().body,"htmx:historyCacheMissLoad",i);const e=D(this.response);const t=e.querySelector("[hx-history-elt],[data-hx-history-elt]")||e;const n=Dt();const r=hn(n);Tn(e.title);Be(n,t,r);jt(r.tasks);S=o;fe(ne().body,"htmx:historyRestore",{path:o,cacheMiss:true,serverResponse:this.response})}else{ae(ne().body,"htmx:historyCacheMissLoadError",i)}};e.send()}function zt(e){Ut();e=e||location.pathname+location.search;const t=Mt(e);if(t){const n=D(t.content);const r=Dt();const o=hn(r);Tn(n.title);Be(r,n,o);jt(o.tasks);setTimeout(function(){window.scrollTo(0,t.scroll)},0);S=e;fe(ne().body,"htmx:historyRestore",{path:e,item:t})}else{if(Q.config.refreshOnHistoryMiss){window.location.reload(true)}else{_t(e)}}}function $t(e){let t=ve(e,"hx-indicator");if(t==null){t=[e]}se(t,function(e){const t=ie(e);t.requestCount=(t.requestCount||0)+1;e.classList.add.call(e.classList,Q.config.requestClass)});return t}function Jt(e){let t=ve(e,"hx-disabled-elt");if(t==null){t=[]}se(t,function(e){const t=ie(e);t.requestCount=(t.requestCount||0)+1;e.setAttribute("disabled","")});return t}function Gt(e,t){se(e,function(e){const t=ie(e);t.requestCount=(t.requestCount||0)-1;if(t.requestCount===0){e.classList.remove.call(e.classList,Q.config.requestClass)}});se(t,function(e){const t=ie(e);t.requestCount=(t.requestCount||0)-1;if(t.requestCount===0){e.removeAttribute("disabled")}})}function Kt(t,n){for(let e=0;e<t.length;e++){const r=t[e];if(r.isSameNode(n)){return true}}return false}function Zt(e){if(e.name===""||e.name==null||e.disabled||h(e,"fieldset[disabled]")){return false}if(e.type==="button"||e.type==="submit"||e.tagName==="image"||e.tagName==="reset"||e.tagName==="file"){return false}if(e.type==="checkbox"||e.type==="radio"){return e.checked}return true}function Wt(t,e,n){if(t!=null&&e!=null){if(Array.isArray(e)){e.forEach(function(e){n.append(t,e)})}else{n.append(t,e)}}}function Yt(t,n,r){if(t!=null&&n!=null){let e=r.getAll(t);if(Array.isArray(n)){e=e.filter(e=>n.indexOf(e)<0)}else{e=e.filter(e=>e!==n)}r.delete(t);se(e,e=>r.append(t,e))}}function Qt(t,n,r,o,i){if(o==null||Kt(t,o)){return}else{t.push(o)}if(Zt(o)){const s=ee(o,"name");let e=o.value;if(o.multiple&&o.tagName==="SELECT"){e=U(o.querySelectorAll("option:checked")).map(function(e){return e.value})}if(o.files){e=U(o.files)}Wt(s,e,n);if(i){en(o,r)}}if(f(o,"form")){se(o.elements,function(e){if(t.indexOf(e)>=0){Yt(e.name,e.value,n)}else{t.push(e)}if(i){en(e,r)}});new FormData(o).forEach(function(e,t){Wt(t,e,n)})}}function en(e,t){if(e.willValidate){fe(e,"htmx:validation:validate");if(!e.checkValidity()){t.push({elt:e,message:e.validationMessage,validity:e.validity});fe(e,"htmx:validation:failed",{message:e.validationMessage,validity:e.validity})}}}function tn(t,e){for(const n of e.keys()){t.delete(n);e.getAll(n).forEach(function(e){t.append(n,e)})}return t}function nn(e,t){const n=[];const r=new FormData;const o=new FormData;const i=[];const s=ie(e);if(s.lastButtonClicked&&!le(s.lastButtonClicked)){s.lastButtonClicked=null}let l=f(e,"form")&&e.noValidate!==true||te(e,"hx-validate")==="true";if(s.lastButtonClicked){l=l&&s.lastButtonClicked.formNoValidate!==true}if(t!=="get"){Qt(n,o,i,h(e,"form"),l)}Qt(n,r,i,e,l);if(s.lastButtonClicked||e.tagName==="BUTTON"||e.tagName==="INPUT"&&ee(e,"type")==="submit"){const c=s.lastButtonClicked||e;const a=ee(c,"name");Wt(a,c.value,o)}const u=ve(e,"hx-include");se(u,function(e){Qt(n,r,i,e,l);if(!f(e,"form")){se(e.querySelectorAll(nt),function(e){Qt(n,r,i,e,l)})}});tn(r,o);return{errors:i,formData:r,values:Rn(r)}}function rn(e,t,n){if(e!==""){e+="&"}if(String(n)==="[object Object]"){n=JSON.stringify(n)}const r=encodeURIComponent(n);e+=encodeURIComponent(t)+"="+r;return e}function on(e){e=Cn(e);let n="";e.forEach(function(e,t){n=rn(n,t,e)});return n}function sn(e,t,n){const r={"HX-Request":"true","HX-Trigger":ee(e,"id"),"HX-Trigger-Name":ee(e,"name"),"HX-Target":te(t,"id"),"HX-Current-URL":ne().location.href};he(e,"hx-headers",false,r);if(n!==undefined){r["HX-Prompt"]=n}if(ie(e).boosted){r["HX-Boosted"]="true"}return r}function ln(n,e){const t=re(e,"hx-params");if(t){if(t==="none"){return new FormData}else if(t==="*"){return n}else if(t.indexOf("not ")===0){se(t.substr(4).split(","),function(e){e=e.trim();n.delete(e)});return n}else{const r=new FormData;se(t.split(","),function(t){t=t.trim();if(n.has(t)){n.getAll(t).forEach(function(e){r.append(t,e)})}});return r}}else{return n}}function un(e){return ee(e,"href")&&ee(e,"href").indexOf("#")>=0}function cn(e,t){const n=t||re(e,"hx-swap");const r={swapStyle:ie(e).boosted?"innerHTML":Q.config.defaultSwapStyle,swapDelay:Q.config.defaultSwapDelay,settleDelay:Q.config.defaultSettleDelay};if(Q.config.scrollIntoViewOnBoost&&ie(e).boosted&&!un(e)){r.show="top"}if(n){const s=V(n);if(s.length>0){for(let e=0;e<s.length;e++){const l=s[e];if(l.indexOf("swap:")===0){r.swapDelay=d(l.substr(5))}else if(l.indexOf("settle:")===0){r.settleDelay=d(l.substr(7))}else if(l.indexOf("transition:")===0){r.transition=l.substr(11)==="true"}else if(l.indexOf("ignoreTitle:")===0){r.ignoreTitle=l.substr(12)==="true"}else if(l.indexOf("scroll:")===0){const u=l.substr(7);var o=u.split(":");const c=o.pop();var i=o.length>0?o.join(":"):null;r.scroll=c;r.scrollTarget=i}else if(l.indexOf("show:")===0){const a=l.substr(5);var o=a.split(":");const f=o.pop();var i=o.length>0?o.join(":"):null;r.show=f;r.showTarget=i}else if(l.indexOf("focus-scroll:")===0){const h=l.substr("focus-scroll:".length);r.focusScroll=h=="true"}else if(e==0){r.swapStyle=l}else{v("Unknown modifier in hx-swap: "+l)}}}}return r}function an(e){return re(e,"hx-encoding")==="multipart/form-data"||f(e,"form")&&ee(e,"enctype")==="multipart/form-data"}function fn(t,n,r){let o=null;kt(n,function(e){if(o==null){o=e.encodeParameters(t,r,n)}});if(o!=null){return o}else{if(an(n)){return Cn(r)}else{return on(r)}}}function hn(e){return{tasks:[],elts:[e]}}function dn(e,t){const n=e[0];const r=e[e.length-1];if(t.scroll){var o=null;if(t.scrollTarget){o=ce(n,t.scrollTarget)}if(t.scroll==="top"&&(n||o)){o=o||n;o.scrollTop=0}if(t.scroll==="bottom"&&(r||o)){o=o||r;o.scrollTop=o.scrollHeight}}if(t.show){var o=null;if(t.showTarget){let e=t.showTarget;if(t.showTarget==="window"){e="body"}o=ce(n,e)}if(t.show==="top"&&(n||o)){o=o||n;o.scrollIntoView({block:"start",behavior:Q.config.scrollBehavior})}if(t.show==="bottom"&&(r||o)){o=o||r;o.scrollIntoView({block:"end",behavior:Q.config.scrollBehavior})}}}function he(r,e,o,i){if(i==null){i={}}if(r==null){return i}const s=te(r,e);if(s){let e=s.trim();let t=o;if(e==="unset"){return null}if(e.indexOf("javascript:")===0){e=e.substr(11);t=true}else if(e.indexOf("js:")===0){e=e.substr(3);t=true}if(e.indexOf("{")!==0){e="{"+e+"}"}let n;if(t){n=gn(r,function(){return Function("return ("+e+")")()},{})}else{n=w(e)}for(const l in n){if(n.hasOwnProperty(l)){if(i[l]==null){i[l]=n[l]}}}}return he(u(r),e,o,i)}function gn(e,t,n){if(Q.config.allowEval){return t()}else{ae(e,"htmx:evalDisallowedError");return n}}function pn(e,t){return he(e,"hx-vars",true,t)}function mn(e,t){return he(e,"hx-vals",false,t)}function xn(e){return Cn(ue(pn(e),mn(e)))}function yn(t,n,r){if(r!==null){try{t.setRequestHeader(n,r)}catch(e){t.setRequestHeader(n,encodeURIComponent(r));t.setRequestHeader(n+"-URI-AutoEncoded","true")}}}function bn(t){if(t.responseURL&&typeof URL!=="undefined"){try{const e=new URL(t.responseURL);return e.pathname+e.search}catch(e){ae(ne().body,"htmx:badResponseUrl",{url:t.responseURL})}}}function C(e,t){return t.test(e.getAllResponseHeaders())}function vn(e,t,n){e=e.toLowerCase();if(n){if(n instanceof Element||X(n,"String")){return de(e,t,null,null,{targetOverride:x(n),returnPromise:true})}else{return de(e,t,x(n.source),n.event,{handler:n.handler,headers:n.headers,values:n.values,targetOverride:x(n.target),swapOverride:n.swap,select:n.select,returnPromise:true})}}else{return de(e,t,null,null,{returnPromise:true})}}function wn(e){const t=[];while(e){t.push(e);e=e.parentElement}return t}function Sn(e,t,n){let r;let o;if(typeof URL==="function"){o=new URL(t,document.location.href);const i=document.location.origin;r=i===o.origin}else{o=t;r=l(t,document.location.origin)}if(Q.config.selfRequestsOnly){if(!r){return false}}return fe(e,"htmx:validateUrl",ue({url:o,sameHost:r},n))}function Cn(e){if(e instanceof FormData)return e;const t=new FormData;for(const n in e){if(e.hasOwnProperty(n)){if(typeof e[n].forEach==="function"){e[n].forEach(function(e){t.append(n,e)})}else if(typeof e[n]==="object"){t.append(n,JSON.stringify(e[n]))}else{t.append(n,e[n])}}}return t}function En(r,o,e){return new Proxy(e,{get:function(t,e){if(typeof e==="number")return t[e];if(e==="length")return t.length;if(e==="push"){return function(e){t.push(e);r.append(o,e)}}if(typeof t[e]==="function"){return function(){t[e].apply(t,arguments);r.delete(o);t.forEach(function(e){r.append(o,e)})}}if(t[e]&&t[e].length===1){return t[e][0]}else{return t[e]}},set:function(e,t,n){e[t]=n;r.delete(o);e.forEach(function(e){r.append(o,e)});return true}})}function Rn(r){return new Proxy(r,{get:function(e,t){if(typeof t==="symbol"){return Reflect.get(...arguments)}if(t==="toJSON"){return()=>Object.fromEntries(r)}if(t in e){if(typeof e[t]==="function"){return function(){return r[t].apply(r,arguments)}}else{return e[t]}}const n=r.getAll(t);if(n.length===0){return undefined}else if(n.length===1){return n[0]}else{return En(e,t,n)}},set:function(t,n,e){t.delete(n);if(typeof e.forEach==="function"){e.forEach(function(e){t.append(n,e)})}else{t.append(n,e)}return true},deleteProperty:function(e,t){e.delete(t);return true},ownKeys:function(e){return Reflect.ownKeys(Object.fromEntries(e))},getOwnPropertyDescriptor:function(e,t){return Reflect.getOwnPropertyDescriptor(Object.fromEntries(e),t)}})}function de(t,n,r,o,i,D){let s=null;let l=null;i=i!=null?i:{};if(i.returnPromise&&typeof Promise!=="undefined"){var e=new Promise(function(e,t){s=e;l=t})}if(r==null){r=ne().body}const X=i.handler||Nn;const M=i.select||null;if(!le(r)){oe(s);return e}const u=i.targetOverride||Se(r);if(u==null||u==be){ae(r,"htmx:targetError",{target:te(r,"hx-target")});oe(l);return e}let c=ie(r);const a=c.lastButtonClicked;if(a){const N=ee(a,"formaction");if(N!=null){n=N}const L=ee(a,"formmethod");if(L!=null){if(L.toLowerCase()!=="dialog"){t=L}}}const f=re(r,"hx-confirm");if(D===undefined){const G=function(e){return de(t,n,r,o,i,!!e)};const K={target:u,elt:r,path:n,verb:t,triggeringEvent:o,etc:i,issueRequest:G,question:f};if(fe(r,"htmx:confirm",K)===false){oe(s);return e}}let h=r;let d=re(r,"hx-sync");let g=null;let F=false;if(d){const A=d.split(":");const I=A[0].trim();if(I==="this"){h=we(r,"hx-sync")}else{h=ce(r,I)}d=(A[1]||"drop").trim();c=ie(h);if(d==="drop"&&c.xhr&&c.abortable!==true){oe(s);return e}else if(d==="abort"){if(c.xhr){oe(s);return e}else{F=true}}else if(d==="replace"){fe(h,"htmx:abort")}else if(d.indexOf("queue")===0){const Z=d.split(" ");g=(Z[1]||"last").trim()}}if(c.xhr){if(c.abortable){fe(h,"htmx:abort")}else{if(g==null){if(o){const P=ie(o);if(P&&P.triggerSpec&&P.triggerSpec.queue){g=P.triggerSpec.queue}}if(g==null){g="last"}}if(c.queuedRequests==null){c.queuedRequests=[]}if(g==="first"&&c.queuedRequests.length===0){c.queuedRequests.push(function(){de(t,n,r,o,i)})}else if(g==="all"){c.queuedRequests.push(function(){de(t,n,r,o,i)})}else if(g==="last"){c.queuedRequests=[];c.queuedRequests.push(function(){de(t,n,r,o,i)})}oe(s);return e}}const p=new XMLHttpRequest;c.xhr=p;c.abortable=F;const m=function(){c.xhr=null;c.abortable=false;if(c.queuedRequests!=null&&c.queuedRequests.length>0){const e=c.queuedRequests.shift();e()}};const U=re(r,"hx-prompt");if(U){var x=prompt(U);if(x===null||!fe(r,"htmx:prompt",{prompt:x,target:u})){oe(s);m();return e}}if(f&&!D){if(!confirm(f)){oe(s);m();return e}}let y=sn(r,u,x);if(t!=="get"&&!an(r)){y["Content-Type"]="application/x-www-form-urlencoded"}if(i.headers){y=ue(y,i.headers)}const B=nn(r,t);let b=B.errors;const V=B.formData;if(i.values){tn(V,Cn(i.values))}const j=xn(r);const v=tn(V,j);let w=ln(v,r);if(Q.config.getCacheBusterParam&&t==="get"){w.set("org.htmx.cache-buster",ee(u,"id")||"true")}if(n==null||n===""){n=ne().location.href}const S=he(r,"hx-request");const _=ie(r).boosted;let C=Q.config.methodsThatUseUrlParams.indexOf(t)>=0;const E={boosted:_,useUrlParams:C,formData:w,parameters:Rn(w),unfilteredFormData:v,unfilteredParameters:Rn(v),headers:y,target:u,verb:t,errors:b,withCredentials:i.credentials||S.credentials||Q.config.withCredentials,timeout:i.timeout||S.timeout||Q.config.timeout,path:n,triggeringEvent:o};if(!fe(r,"htmx:configRequest",E)){oe(s);m();return e}n=E.path;t=E.verb;y=E.headers;w=Cn(E.parameters);b=E.errors;C=E.useUrlParams;if(b&&b.length>0){fe(r,"htmx:validation:halted",E);oe(s);m();return e}const z=n.split("#");const $=z[0];const R=z[1];let O=n;if(C){O=$;const W=!w.keys().next().done;if(W){if(O.indexOf("?")<0){O+="?"}else{O+="&"}O+=on(w);if(R){O+="#"+R}}}if(!Sn(r,O,E)){ae(r,"htmx:invalidPath",E);oe(l);return e}p.open(t.toUpperCase(),O,true);p.overrideMimeType("text/html");p.withCredentials=E.withCredentials;p.timeout=E.timeout;if(S.noHeaders){}else{for(const k in y){if(y.hasOwnProperty(k)){const Y=y[k];yn(p,k,Y)}}}const H={xhr:p,target:u,requestConfig:E,etc:i,boosted:_,select:M,pathInfo:{requestPath:n,finalRequestPath:O,anchor:R}};p.onload=function(){try{const t=wn(r);H.pathInfo.responsePath=bn(p);X(r,H);Gt(q,T);fe(r,"htmx:afterRequest",H);fe(r,"htmx:afterOnLoad",H);if(!le(r)){let e=null;while(t.length>0&&e==null){const n=t.shift();if(le(n)){e=n}}if(e){fe(e,"htmx:afterRequest",H);fe(e,"htmx:afterOnLoad",H)}}oe(s);m()}catch(e){ae(r,"htmx:onLoadError",ue({error:e},H));throw e}};p.onerror=function(){Gt(q,T);ae(r,"htmx:afterRequest",H);ae(r,"htmx:sendError",H);oe(l);m()};p.onabort=function(){Gt(q,T);ae(r,"htmx:afterRequest",H);ae(r,"htmx:sendAbort",H);oe(l);m()};p.ontimeout=function(){Gt(q,T);ae(r,"htmx:afterRequest",H);ae(r,"htmx:timeout",H);oe(l);m()};if(!fe(r,"htmx:beforeRequest",H)){oe(s);m();return e}var q=$t(r);var T=Jt(r);se(["loadstart","loadend","progress","abort"],function(t){se([p,p.upload],function(e){e.addEventListener(t,function(e){fe(r,"htmx:xhr:"+t,{lengthComputable:e.lengthComputable,loaded:e.loaded,total:e.total})})})});fe(r,"htmx:beforeSend",H);const J=C?null:fn(p,r,w);p.send(J);return e}function On(e,t){const n=t.xhr;let r=null;let o=null;if(C(n,/HX-Push:/i)){r=n.getResponseHeader("HX-Push");o="push"}else if(C(n,/HX-Push-Url:/i)){r=n.getResponseHeader("HX-Push-Url");o="push"}else if(C(n,/HX-Replace-Url:/i)){r=n.getResponseHeader("HX-Replace-Url");o="replace"}if(r){if(r==="false"){return{}}else{return{type:o,path:r}}}const i=t.pathInfo.finalRequestPath;const s=t.pathInfo.responsePath;const l=re(e,"hx-push-url");const u=re(e,"hx-replace-url");const c=ie(e).boosted;let a=null;let f=null;if(l){a="push";f=l}else if(u){a="replace";f=u}else if(c){a="push";f=s||i}if(f){if(f==="false"){return{}}if(f==="true"){f=s||i}if(t.pathInfo.anchor&&f.indexOf("#")===-1){f=f+"#"+t.pathInfo.anchor}return{type:a,path:f}}else{return{}}}function Hn(e,t){var n=new RegExp(e.code);return n.test(t)}function qn(e){for(var t=0;t<Q.config.responseHandling.length;t++){var n=Q.config.responseHandling[t];if(Hn(n,e.status)){return n}}return{swap:false}}function Tn(e){if(e){const t=r("title");if(t){t.innerHTML=e}else{window.document.title=e}}}function Nn(o,i){const s=i.xhr;let l=i.target;const e=i.etc;const u=i.select;if(!fe(o,"htmx:beforeOnLoad",i))return;if(C(s,/HX-Trigger:/i)){ze(s,"HX-Trigger",o)}if(C(s,/HX-Location:/i)){Ut();let e=s.getResponseHeader("HX-Location");var c;if(e.indexOf("{")===0){c=w(e);e=c.path;delete c.path}vn("GET",e,c).then(function(){Bt(e)});return}const t=C(s,/HX-Refresh:/i)&&s.getResponseHeader("HX-Refresh")==="true";if(C(s,/HX-Redirect:/i)){location.href=s.getResponseHeader("HX-Redirect");t&&location.reload();return}if(t){location.reload();return}if(C(s,/HX-Retarget:/i)){if(s.getResponseHeader("HX-Retarget")==="this"){i.target=o}else{i.target=ce(o,s.getResponseHeader("HX-Retarget"))}}const a=On(o,i);const n=qn(s);const r=n.swap;let f=!!n.error;let h=Q.config.ignoreTitle||n.ignoreTitle;let d=n.select;if(n.target){i.target=ce(o,n.target)}var g=e.swapOverride;if(g==null&&n.swapOverride){g=n.swapOverride}if(C(s,/HX-Retarget:/i)){if(s.getResponseHeader("HX-Retarget")==="this"){i.target=o}else{i.target=ce(o,s.getResponseHeader("HX-Retarget"))}}if(C(s,/HX-Reswap:/i)){g=s.getResponseHeader("HX-Reswap")}var p=s.response;var m=ue({shouldSwap:r,serverResponse:p,isError:f,ignoreTitle:h,selectOverride:d},i);if(n.event&&!fe(l,n.event,m))return;if(!fe(l,"htmx:beforeSwap",m))return;l=m.target;p=m.serverResponse;f=m.isError;h=m.ignoreTitle;d=m.selectOverride;i.target=l;i.failed=f;i.successful=!f;if(m.shouldSwap){if(s.status===286){it(o)}kt(o,function(e){p=e.transformResponse(p,s,o)});if(a.type){Ut()}if(C(s,/HX-Reswap:/i)){g=s.getResponseHeader("HX-Reswap")}var c=cn(o,g);if(!c.hasOwnProperty("ignoreTitle")){c.ignoreTitle=h}l.classList.add(Q.config.swappingClass);let n=null;let r=null;if(u){d=u}if(C(s,/HX-Reselect:/i)){d=s.getResponseHeader("HX-Reselect")}const x=re(o,"hx-select-oob");const y=re(o,"hx-select");let e=function(){try{if(a.type){fe(ne().body,"htmx:beforeHistoryUpdate",ue({history:a},i));if(a.type==="push"){Bt(a.path);fe(ne().body,"htmx:pushedIntoHistory",{path:a.path})}else{Vt(a.path);fe(ne().body,"htmx:replacedInHistory",{path:a.path})}}_e(l,p,c,{select:d||y,selectOOB:x,eventInfo:i,anchor:i.pathInfo.anchor,contextElement:o,afterSwapCallback:function(){if(C(s,/HX-Trigger-After-Swap:/i)){let e=o;if(!le(o)){e=ne().body}ze(s,"HX-Trigger-After-Swap",e)}},afterSettleCallback:function(){if(C(s,/HX-Trigger-After-Settle:/i)){let e=o;if(!le(o)){e=ne().body}ze(s,"HX-Trigger-After-Settle",e)}oe(n)}})}catch(e){ae(o,"htmx:swapError",i);oe(r);throw e}};let t=Q.config.globalViewTransitions;if(c.hasOwnProperty("transition")){t=c.transition}if(t&&fe(o,"htmx:beforeTransition",i)&&typeof Promise!=="undefined"&&document.startViewTransition){const b=new Promise(function(e,t){n=e;r=t});const v=e;e=function(){document.startViewTransition(function(){v();return b})}}if(c.swapDelay>0){setTimeout(e,c.swapDelay)}else{e()}}if(f){ae(o,"htmx:responseError",ue({error:"Response Status Error Code "+s.status+" from "+i.pathInfo.requestPath},i))}}const Ln={};function An(){return{init:function(e){return null},onEvent:function(e,t){return true},transformResponse:function(e,t,n){return e},isInlineSwap:function(e){return false},handleSwap:function(e,t,n,r){return false},encodeParameters:function(e,t,n){return null}}}function In(e,t){if(t.init){t.init(n)}Ln[e]=ue(An(),t)}function Pn(e){delete Ln[e]}function kn(e,n,r){if(n==undefined){n=[]}if(e==undefined){return n}if(r==undefined){r=[]}const t=te(e,"hx-ext");if(t){se(t.split(","),function(e){e=e.replace(/ /g,"");if(e.slice(0,7)=="ignore:"){r.push(e.slice(7));return}if(r.indexOf(e)<0){const t=Ln[e];if(t&&n.indexOf(t)<0){n.push(t)}}})}return kn(u(e),n,r)}var Dn=false;ne().addEventListener("DOMContentLoaded",function(){Dn=true});function Xn(e){if(Dn||ne().readyState==="complete"){e()}else{ne().addEventListener("DOMContentLoaded",e)}}function Mn(){if(Q.config.includeIndicatorStyles!==false){ne().head.insertAdjacentHTML("beforeend","<style> ."+Q.config.indicatorClass+"{opacity:0} ."+Q.config.requestClass+" ."+Q.config.indicatorClass+"{opacity:1; transition: opacity 200ms ease-in;} ."+Q.config.requestClass+"."+Q.config.indicatorClass+"{opacity:1; transition: opacity 200ms ease-in;} </style>")}}function Fn(){const e=ne().querySelector('meta[name="htmx-config"]');if(e){return w(e.content)}else{return null}}function Un(){const e=Fn();if(e){Q.config=ue(Q.config,e)}}Xn(function(){Un();Mn();let e=ne().body;Lt(e);const t=ne().querySelectorAll("[hx-trigger='restored'],[data-hx-trigger='restored']");e.addEventListener("htmx:abort",function(e){const t=e.target;const n=ie(t);if(n&&n.xhr){n.xhr.abort()}});const n=window.onpopstate?window.onpopstate.bind(window):null;window.onpopstate=function(e){if(e.state&&e.state.htmx){zt();se(t,function(e){fe(e,"htmx:restored",{document:ne(),triggerEvent:fe})})}else{if(n){n(e)}}};setTimeout(function(){fe(e,"htmx:load",{});e=null},0)});return Q}(); \ No newline at end of file
+var htmx=function(){"use strict";const Q={onLoad:null,process:null,on:null,off:null,trigger:null,ajax:null,find:null,findAll:null,closest:null,values:function(e,t){const n=sn(e,t||"post");return n.values},remove:null,addClass:null,removeClass:null,toggleClass:null,takeClass:null,swap:null,defineExtension:null,removeExtension:null,logAll:null,logNone:null,logger:null,config:{historyEnabled:true,historyCacheSize:10,refreshOnHistoryMiss:false,defaultSwapStyle:"innerHTML",defaultSwapDelay:0,defaultSettleDelay:20,includeIndicatorStyles:true,indicatorClass:"htmx-indicator",requestClass:"htmx-request",addedClass:"htmx-added",settlingClass:"htmx-settling",swappingClass:"htmx-swapping",allowEval:true,allowScriptTags:true,inlineScriptNonce:"",attributesToSettle:["class","style","width","height"],withCredentials:false,timeout:0,wsReconnectDelay:"full-jitter",wsBinaryType:"blob",disableSelector:"[hx-disable], [data-hx-disable]",scrollBehavior:"instant",defaultFocusScroll:false,getCacheBusterParam:false,globalViewTransitions:false,methodsThatUseUrlParams:["get","delete"],selfRequestsOnly:true,ignoreTitle:false,scrollIntoViewOnBoost:true,triggerSpecsCache:null,disableInheritance:false,responseHandling:[{code:"204",swap:false},{code:"[23]..",swap:true},{code:"[45]..",swap:false,error:true}],allowNestedOobSwaps:true},parseInterval:null,_:null,version:"2.0a"};Q.onLoad=z;Q.process=It;Q.on=be;Q.off=we;Q.trigger=he;Q.ajax=Cn;Q.find=r;Q.findAll=p;Q.closest=g;Q.remove=K;Q.addClass=W;Q.removeClass=o;Q.toggleClass=Y;Q.takeClass=ge;Q.swap=$e;Q.defineExtension=Mn;Q.removeExtension=Xn;Q.logAll=$;Q.logNone=J;Q.parseInterval=d;Q._=_;const n={addTriggerHandler:St,bodyContains:le,canAccessLocalStorage:V,findThisElement:Ee,filterValues:fn,swap:$e,hasAttribute:s,getAttributeValue:te,getClosestAttributeValue:re,getClosestMatch:T,getExpressionVars:vn,getHeaders:cn,getInputValues:sn,getInternalData:ie,getSwapSpecification:hn,getTriggerSpecs:lt,getTarget:Ce,makeFragment:D,mergeObjects:ue,makeSettleInfo:pn,oobSwap:Te,querySelectorExt:fe,settleImmediately:$t,shouldCancel:ht,triggerEvent:he,triggerErrorEvent:ae,withExtensions:Mt};const v=["get","post","put","delete","patch"];const R=v.map(function(e){return"[hx-"+e+"], [data-hx-"+e+"]"}).join(", ");const O=e("head");function e(e,t=false){return new RegExp(`<${e}(\\s[^>]*>|>)([\\s\\S]*?)<\\/${e}>`,t?"gim":"im")}function d(e){if(e==undefined){return undefined}let t=NaN;if(e.slice(-2)=="ms"){t=parseFloat(e.slice(0,-2))}else if(e.slice(-1)=="s"){t=parseFloat(e.slice(0,-1))*1e3}else if(e.slice(-1)=="m"){t=parseFloat(e.slice(0,-1))*1e3*60}else{t=parseFloat(e)}return isNaN(t)?undefined:t}function ee(e,t){return e instanceof Element&&e.getAttribute(t)}function s(e,t){return!!e.hasAttribute&&(e.hasAttribute(t)||e.hasAttribute("data-"+t))}function te(e,t){return ee(e,t)||ee(e,"data-"+t)}function u(e){const t=e.parentElement;if(!t&&e.parentNode instanceof ShadowRoot)return e.parentNode;return t}function ne(){return document}function H(e,t){return e.getRootNode?e.getRootNode({composed:t}):ne()}function T(e,t){while(e&&!t(e)){e=u(e)}return e||null}function q(e,t,n){const r=te(t,n);const o=te(t,"hx-disinherit");var i=te(t,"hx-inherit");if(e!==t){if(Q.config.disableInheritance){if(i&&(i==="*"||i.split(" ").indexOf(n)>=0)){return r}else{return null}}if(o&&(o==="*"||o.split(" ").indexOf(n)>=0)){return"unset"}}return r}function re(t,n){let r=null;T(t,function(e){return!!(r=q(t,ce(e),n))});if(r!=="unset"){return r}}function a(e,t){const n=e instanceof Element&&(e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||e.oMatchesSelector);return!!n&&n.call(e,t)}function L(e){const t=/<([a-z][^\/\0>\x20\t\r\n\f]*)/i;const n=t.exec(e);if(n){return n[1].toLowerCase()}else{return""}}function A(e){const t=new DOMParser;return t.parseFromString(e,"text/html")}function N(e,t){while(t.childNodes.length>0){e.append(t.childNodes[0])}}function I(e){const t=ne().createElement("script");se(e.attributes,function(e){t.setAttribute(e.name,e.value)});t.textContent=e.textContent;t.async=false;if(Q.config.inlineScriptNonce){t.nonce=Q.config.inlineScriptNonce}return t}function P(e){return e.matches("script")&&(e.type==="text/javascript"||e.type==="module"||e.type==="")}function k(e){Array.from(e.querySelectorAll("script")).forEach(e=>{if(P(e)){const t=I(e);const n=e.parentNode;try{n.insertBefore(t,e)}catch(e){w(e)}finally{e.remove()}}})}function D(e){const t=e.replace(O,"");const n=L(t);let r;if(n==="html"){r=new DocumentFragment;const i=A(e);N(r,i.body);r.title=i.title}else if(n==="body"){r=new DocumentFragment;const i=A(t);N(r,i.body);r.title=i.title}else{const i=A('<body><template class="internal-htmx-wrapper">'+t+"</template></body>");r=i.querySelector("template").content;r.title=i.title;var o=r.querySelector("title");if(o&&o.parentNode===r){o.remove();r.title=o.innerText}}if(r){if(Q.config.allowScriptTags){k(r)}else{r.querySelectorAll("script").forEach(e=>e.remove())}}return r}function oe(e){if(e){e()}}function t(e,t){return Object.prototype.toString.call(e)==="[object "+t+"]"}function M(e){return typeof e==="function"}function X(e){return t(e,"Object")}function ie(e){const t="htmx-internal-data";let n=e[t];if(!n){n=e[t]={}}return n}function F(t){const n=[];if(t){for(let e=0;e<t.length;e++){n.push(t[e])}}return n}function se(t,n){if(t){for(let e=0;e<t.length;e++){n(t[e])}}}function U(e){const t=e.getBoundingClientRect();const n=t.top;const r=t.bottom;return n<window.innerHeight&&r>=0}function le(e){const t=e.getRootNode&&e.getRootNode();if(t&&t instanceof window.ShadowRoot){return ne().body.contains(t.host)}else{return ne().body.contains(e)}}function B(e){return e.trim().split(/\s+/)}function ue(e,t){for(const n in t){if(t.hasOwnProperty(n)){e[n]=t[n]}}return e}function S(e){try{return JSON.parse(e)}catch(e){w(e);return null}}function V(){const e="htmx:localStorageTest";try{localStorage.setItem(e,e);localStorage.removeItem(e);return true}catch(e){return false}}function j(t){try{const e=new URL(t);if(e){t=e.pathname+e.search}if(!/^\/$/.test(t)){t=t.replace(/\/+$/,"")}return t}catch(e){return t}}function _(e){return yn(ne().body,function(){return eval(e)})}function z(t){const e=Q.on("htmx:load",function(e){t(e.detail.elt)});return e}function $(){Q.logger=function(e,t,n){if(console){console.log(t,e,n)}}}function J(){Q.logger=null}function r(e,t){if(typeof e!=="string"){return e.querySelector(t)}else{return r(ne(),e)}}function p(e,t){if(typeof e!=="string"){return e.querySelectorAll(t)}else{return p(ne(),e)}}function E(){return window}function K(e,t){e=x(e);if(t){E().setTimeout(function(){K(e);e=null},t)}else{u(e).removeChild(e)}}function ce(e){return e instanceof Element?e:null}function G(e){return e instanceof HTMLElement?e:null}function Z(e){return typeof e==="string"?e:null}function h(e){return e instanceof Element||e instanceof Document||e instanceof DocumentFragment?e:null}function W(e,t,n){e=ce(x(e));if(!e){return}if(n){E().setTimeout(function(){W(e,t);e=null},n)}else{e.classList&&e.classList.add(t)}}function o(e,t,n){let r=ce(x(e));if(!r){return}if(n){E().setTimeout(function(){o(r,t);r=null},n)}else{if(r.classList){r.classList.remove(t);if(r.classList.length===0){r.removeAttribute("class")}}}}function Y(e,t){e=x(e);e.classList.toggle(t)}function ge(e,t){e=x(e);se(e.parentElement.children,function(e){o(e,t)});W(ce(e),t)}function g(e,t){e=ce(x(e));if(e&&e.closest){return e.closest(t)}else{do{if(e==null||a(e,t)){return e}}while(e=e&&ce(u(e)));return null}}function l(e,t){return e.substring(0,t.length)===t}function pe(e,t){return e.substring(e.length-t.length)===t}function i(e){const t=e.trim();if(l(t,"<")&&pe(t,"/>")){return t.substring(1,t.length-2)}else{return t}}function m(e,t,n){e=x(e);if(t.indexOf("closest ")===0){return[g(ce(e),i(t.substr(8)))]}else if(t.indexOf("find ")===0){return[r(h(e),i(t.substr(5)))]}else if(t==="next"){return[ce(e).nextElementSibling]}else if(t.indexOf("next ")===0){return[me(e,i(t.substr(5)),!!n)]}else if(t==="previous"){return[ce(e).previousElementSibling]}else if(t.indexOf("previous ")===0){return[xe(e,i(t.substr(9)),!!n)]}else if(t==="document"){return[document]}else if(t==="window"){return[window]}else if(t==="body"){return[document.body]}else if(t==="root"){return[H(e,!!n)]}else if(t.indexOf("global ")===0){return m(e,t.slice(7),true)}else{return F(h(H(e,!!n)).querySelectorAll(i(t)))}}var me=function(t,e,n){const r=h(H(t,n)).querySelectorAll(e);for(let e=0;e<r.length;e++){const o=r[e];if(o.compareDocumentPosition(t)===Node.DOCUMENT_POSITION_PRECEDING){return o}}};var xe=function(t,e,n){const r=h(H(t,n)).querySelectorAll(e);for(let e=r.length-1;e>=0;e--){const o=r[e];if(o.compareDocumentPosition(t)===Node.DOCUMENT_POSITION_FOLLOWING){return o}}};function fe(e,t){if(typeof e!=="string"){return m(e,t)[0]}else{return m(ne().body,e)[0]}}function x(e,t){if(typeof e==="string"){return r(h(t)||document,e)}else{return e}}function ye(e,t,n){if(M(t)){return{target:ne().body,event:Z(e),listener:t}}else{return{target:x(e),event:Z(t),listener:n}}}function be(t,n,r){Bn(function(){const e=ye(t,n,r);e.target.addEventListener(e.event,e.listener)});const e=M(n);return e?n:r}function we(t,n,r){Bn(function(){const e=ye(t,n,r);e.target.removeEventListener(e.event,e.listener)});return M(n)?n:r}const ve=ne().createElement("output");function Se(e,t){const n=re(e,t);if(n){if(n==="this"){return[Ee(e,t)]}else{const r=m(e,n);if(r.length===0){w('The selector "'+n+'" on '+t+" returned no matches!");return[ve]}else{return r}}}}function Ee(e,t){return ce(T(e,function(e){return te(ce(e),t)!=null}))}function Ce(e){const t=re(e,"hx-target");if(t){if(t==="this"){return Ee(e,"hx-target")}else{return fe(e,t)}}else{const n=ie(e);if(n.boosted){return ne().body}else{return e}}}function Re(t){const n=Q.config.attributesToSettle;for(let e=0;e<n.length;e++){if(t===n[e]){return true}}return false}function Oe(t,n){se(t.attributes,function(e){if(!n.hasAttribute(e.name)&&Re(e.name)){t.removeAttribute(e.name)}});se(n.attributes,function(e){if(Re(e.name)){t.setAttribute(e.name,e.value)}})}function He(t,e){const n=Fn(e);for(let e=0;e<n.length;e++){const r=n[e];try{if(r.isInlineSwap(t)){return true}}catch(e){w(e)}}return t==="outerHTML"}function Te(e,o,i){let t="#"+ee(o,"id");let s="outerHTML";if(e==="true"){}else if(e.indexOf(":")>0){s=e.substr(0,e.indexOf(":"));t=e.substr(e.indexOf(":")+1,e.length)}else{s=e}const n=ne().querySelectorAll(t);if(n){se(n,function(e){let t;const n=o.cloneNode(true);t=ne().createDocumentFragment();t.appendChild(n);if(!He(s,e)){t=h(n)}const r={shouldSwap:true,target:e,fragment:t};if(!he(e,"htmx:oobBeforeSwap",r))return;e=r.target;if(r.shouldSwap){_e(s,e,e,t,i)}se(i.elts,function(e){he(e,"htmx:oobAfterSwap",r)})});o.parentNode.removeChild(o)}else{o.parentNode.removeChild(o);ae(ne().body,"htmx:oobErrorNoTarget",{content:o})}return e}function qe(e){se(p(e,"[hx-preserve], [data-hx-preserve]"),function(e){const t=te(e,"id");const n=ne().getElementById(t);if(n!=null){e.parentNode.replaceChild(n,e)}})}function Le(l,e,u){se(e.querySelectorAll("[id]"),function(t){const n=ee(t,"id");if(n&&n.length>0){const r=n.replace("'","\\'");const o=t.tagName.replace(":","\\:");const e=h(l);const i=e&&e.querySelector(o+"[id='"+r+"']");if(i&&i!==e){const s=t.cloneNode();Oe(t,i);u.tasks.push(function(){Oe(t,s)})}}})}function Ae(e){return function(){o(e,Q.config.addedClass);It(ce(e));Ne(h(e));he(e,"htmx:load")}}function Ne(e){const t="[autofocus]";const n=G(a(e,t)?e:e.querySelector(t));if(n!=null){n.focus()}}function c(e,t,n,r){Le(e,n,r);while(n.childNodes.length>0){const o=n.firstChild;W(ce(o),Q.config.addedClass);e.insertBefore(o,t);if(o.nodeType!==Node.TEXT_NODE&&o.nodeType!==Node.COMMENT_NODE){r.tasks.push(Ae(o))}}}function Ie(e,t){let n=0;while(n<e.length){t=(t<<5)-t+e.charCodeAt(n++)|0}return t}function Pe(t){let n=0;if(t.attributes){for(let e=0;e<t.attributes.length;e++){const r=t.attributes[e];if(r.value){n=Ie(r.name,n);n=Ie(r.value,n)}}}return n}function ke(t){const n=ie(t);if(n.onHandlers){for(let e=0;e<n.onHandlers.length;e++){const r=n.onHandlers[e];we(t,r.event,r.listener)}delete n.onHandlers}}function De(e){const t=ie(e);if(t.timeout){clearTimeout(t.timeout)}if(t.listenerInfos){se(t.listenerInfos,function(e){if(e.on){we(e.on,e.trigger,e.listener)}})}ke(e);se(Object.keys(t),function(e){delete t[e]})}function f(e){he(e,"htmx:beforeCleanupElement");De(e);if(e.children){se(e.children,function(e){f(e)})}}function Me(t,e,n){let r;const o=t.previousSibling;c(u(t),t,e,n);if(o==null){r=u(t).firstChild}else{r=o.nextSibling}n.elts=n.elts.filter(function(e){return e!==t});while(r&&r!==t){if(r instanceof Element){n.elts.push(r);r=r.nextElementSibling}else{r=null}}f(t);if(t instanceof Element){t.remove()}else{t.parentNode.removeChild(t)}}function Xe(e,t,n){return c(e,e.firstChild,t,n)}function Fe(e,t,n){return c(u(e),e,t,n)}function Ue(e,t,n){return c(e,null,t,n)}function Be(e,t,n){return c(u(e),e.nextSibling,t,n)}function Ve(e){f(e);return u(e).removeChild(e)}function je(e,t,n){const r=e.firstChild;c(e,r,t,n);if(r){while(r.nextSibling){f(r.nextSibling);e.removeChild(r.nextSibling)}f(r);e.removeChild(r)}}function _e(t,e,n,r,o){switch(t){case"none":return;case"outerHTML":Me(n,r,o);return;case"afterbegin":Xe(n,r,o);return;case"beforebegin":Fe(n,r,o);return;case"beforeend":Ue(n,r,o);return;case"afterend":Be(n,r,o);return;case"delete":Ve(n);return;default:var i=Fn(e);for(let e=0;e<i.length;e++){const s=i[e];try{const l=s.handleSwap(t,n,r,o);if(l){if(typeof l.length!=="undefined"){for(let e=0;e<l.length;e++){const u=l[e];if(u.nodeType!==Node.TEXT_NODE&&u.nodeType!==Node.COMMENT_NODE){o.tasks.push(Ae(u))}}}return}}catch(e){w(e)}}if(t==="innerHTML"){je(n,r,o)}else{_e(Q.config.defaultSwapStyle,e,n,r,o)}}}function ze(e,n){se(p(e,"[hx-swap-oob], [data-hx-swap-oob]"),function(e){if(Q.config.allowNestedOobSwaps||e.parentElement===null){const t=te(e,"hx-swap-oob");if(t!=null){Te(t,e,n)}}else{e.removeAttribute("hx-swap-oob");e.removeAttribute("data-hx-swap-oob")}})}function $e(e,t,r,o){if(!o){o={}}e=x(e);const n=document.activeElement;let i={};try{i={elt:n,start:n?n.selectionStart:null,end:n?n.selectionEnd:null}}catch(e){}const s=pn(e);if(r.swapStyle==="textContent"){e.textContent=t}else{let n=D(t);s.title=n.title;if(o.selectOOB){const u=o.selectOOB.split(",");for(let t=0;t<u.length;t++){const c=u[t].split(":",2);let e=c[0].trim();if(e.indexOf("#")===0){e=e.substring(1)}const f=c[1]||"true";const a=n.querySelector("#"+e);if(a){Te(f,a,s)}}}ze(n,s);se(p(n,"template"),function(e){ze(e.content,s);if(e.content.childElementCount===0){e.remove()}});if(o.select){const h=ne().createDocumentFragment();se(n.querySelectorAll(o.select),function(e){h.appendChild(e)});n=h}qe(n);_e(r.swapStyle,o.contextElement,e,n,s)}if(i.elt&&!le(i.elt)&&ee(i.elt,"id")){const d=document.getElementById(ee(i.elt,"id"));const g={preventScroll:r.focusScroll!==undefined?!r.focusScroll:!Q.config.defaultFocusScroll};if(d){if(i.start&&d.setSelectionRange){try{d.setSelectionRange(i.start,i.end)}catch(e){}}d.focus(g)}}e.classList.remove(Q.config.swappingClass);se(s.elts,function(e){if(e.classList){e.classList.add(Q.config.settlingClass)}he(e,"htmx:afterSwap",o.eventInfo)});if(o.afterSwapCallback){o.afterSwapCallback()}if(!r.ignoreTitle){In(s.title)}const l=function(){se(s.tasks,function(e){e.call()});se(s.elts,function(e){if(e.classList){e.classList.remove(Q.config.settlingClass)}he(e,"htmx:afterSettle",o.eventInfo)});if(o.anchor){const e=ce(x("#"+o.anchor));if(e){e.scrollIntoView({block:"start",behavior:"auto"})}}mn(s.elts,r);if(o.afterSettleCallback){o.afterSettleCallback()}};if(r.settleDelay>0){E().setTimeout(l,r.settleDelay)}else{l()}}function Je(e,t,n){const r=e.getResponseHeader(t);if(r.indexOf("{")===0){const o=S(r);for(const i in o){if(o.hasOwnProperty(i)){let e=o[i];if(!X(e)){e={value:e}}he(n,i,e)}}}else{const s=r.split(",");for(let e=0;e<s.length;e++){he(n,s[e].trim(),[])}}}const Ke=/\s/;const y=/[\s,]/;const Ge=/[_$a-zA-Z]/;const Ze=/[_$a-zA-Z0-9]/;const We=['"',"'","/"];const Ye=/[^\s]/;const Qe=/[{(]/;const et=/[})]/;function tt(e){const t=[];let n=0;while(n<e.length){if(Ge.exec(e.charAt(n))){var r=n;while(Ze.exec(e.charAt(n+1))){n++}t.push(e.substr(r,n-r+1))}else if(We.indexOf(e.charAt(n))!==-1){const o=e.charAt(n);var r=n;n++;while(n<e.length&&e.charAt(n)!==o){if(e.charAt(n)==="\\"){n++}n++}t.push(e.substr(r,n-r+1))}else{const i=e.charAt(n);t.push(i)}n++}return t}function nt(e,t,n){return Ge.exec(e.charAt(0))&&e!=="true"&&e!=="false"&&e!=="this"&&e!==n&&t!=="."}function rt(r,o,i){if(o[0]==="["){o.shift();let e=1;let t=" return (function("+i+"){ return (";let n=null;while(o.length>0){const s=o[0];if(s==="]"){e--;if(e===0){if(n===null){t=t+"true"}o.shift();t+=")})";try{const l=yn(r,function(){return Function(t)()},function(){return true});l.source=t;return l}catch(e){ae(ne().body,"htmx:syntax:error",{error:e,source:t});return null}}}else if(s==="["){e++}if(nt(s,n,i)){t+="(("+i+"."+s+") ? ("+i+"."+s+") : (window."+s+"))"}else{t=t+s}n=o.shift()}}}function b(e,t){let n="";while(e.length>0&&!t.test(e[0])){n+=e.shift()}return n}function ot(e){let t;if(e.length>0&&Qe.test(e[0])){e.shift();t=b(e,et).trim();e.shift()}else{t=b(e,y)}return t}const it="input, textarea, select";function st(e,t,n){const r=[];const o=tt(t);do{b(o,Ye);const l=o.length;const u=b(o,/[,\[\s]/);if(u!==""){if(u==="every"){const c={trigger:"every"};b(o,Ye);c.pollInterval=d(b(o,/[,\[\s]/));b(o,Ye);var i=rt(e,o,"event");if(i){c.eventFilter=i}r.push(c)}else{const f={trigger:u};var i=rt(e,o,"event");if(i){f.eventFilter=i}while(o.length>0&&o[0]!==","){b(o,Ye);const a=o.shift();if(a==="changed"){f.changed=true}else if(a==="once"){f.once=true}else if(a==="consume"){f.consume=true}else if(a==="delay"&&o[0]===":"){o.shift();f.delay=d(b(o,y))}else if(a==="from"&&o[0]===":"){o.shift();if(Qe.test(o[0])){var s=ot(o)}else{var s=b(o,y);if(s==="closest"||s==="find"||s==="next"||s==="previous"){o.shift();const h=ot(o);if(h.length>0){s+=" "+h}}}f.from=s}else if(a==="target"&&o[0]===":"){o.shift();f.target=ot(o)}else if(a==="throttle"&&o[0]===":"){o.shift();f.throttle=d(b(o,y))}else if(a==="queue"&&o[0]===":"){o.shift();f.queue=b(o,y)}else if(a==="root"&&o[0]===":"){o.shift();f[a]=ot(o)}else if(a==="threshold"&&o[0]===":"){o.shift();f[a]=b(o,y)}else{ae(e,"htmx:syntax:error",{token:o.shift()})}}r.push(f)}}if(o.length===l){ae(e,"htmx:syntax:error",{token:o.shift()})}b(o,Ye)}while(o[0]===","&&o.shift());if(n){n[t]=r}return r}function lt(e){const t=te(e,"hx-trigger");let n=[];if(t){const r=Q.config.triggerSpecsCache;n=r&&r[t]||st(e,t,r)}if(n.length>0){return n}else if(a(e,"form")){return[{trigger:"submit"}]}else if(a(e,'input[type="button"], input[type="submit"]')){return[{trigger:"click"}]}else if(a(e,it)){return[{trigger:"change"}]}else{return[{trigger:"click"}]}}function ut(e){ie(e).cancelled=true}function ct(e,t,n){const r=ie(e);r.timeout=E().setTimeout(function(){if(le(e)&&r.cancelled!==true){if(!gt(n,e,kt("hx:poll:trigger",{triggerSpec:n,target:e}))){t(e)}ct(e,t,n)}},n.pollInterval)}function ft(e){return location.hostname===e.hostname&&ee(e,"href")&&ee(e,"href").indexOf("#")!==0}function at(t,n,e){if(t instanceof HTMLAnchorElement&&ft(t)&&(t.target===""||t.target==="_self")||t.tagName==="FORM"){n.boosted=true;let r,o;if(t.tagName==="A"){r="get";o=ee(t,"href")}else{const i=ee(t,"method");r=i?i.toLowerCase():"get";if(r==="get"){}o=ee(t,"action")}e.forEach(function(e){pt(t,function(e,t){const n=ce(e);if(g(n,Q.config.disableSelector)){f(n);return}de(r,o,n,t)},n,e,true)})}}function ht(e,t){const n=ce(t);if(!n){return false}if(e.type==="submit"||e.type==="click"){if(n.tagName==="FORM"){return true}if(a(n,'input[type="submit"], button')&&g(n,"form")!==null){return true}if(n instanceof HTMLAnchorElement&&n.href&&(n.getAttribute("href")==="#"||n.getAttribute("href").indexOf("#")!==0)){return true}}return false}function dt(e,t){return ie(e).boosted&&e instanceof HTMLAnchorElement&&t.type==="click"&&(t.ctrlKey||t.metaKey)}function gt(e,t,n){const r=e.eventFilter;if(r){try{return r.call(t,n)!==true}catch(e){const o=r.source;ae(ne().body,"htmx:eventFilter:error",{error:e,source:o});return true}}return false}function pt(s,l,e,u,c){const f=ie(s);let t;if(u.from){t=m(s,u.from)}else{t=[s]}if(u.changed){t.forEach(function(e){const t=ie(e);t.lastValue=e.value})}se(t,function(o){const i=function(e){if(!le(s)){o.removeEventListener(u.trigger,i);return}if(dt(s,e)){return}if(c||ht(e,s)){e.preventDefault()}if(gt(u,s,e)){return}const t=ie(e);t.triggerSpec=u;if(t.handledFor==null){t.handledFor=[]}if(t.handledFor.indexOf(s)<0){t.handledFor.push(s);if(u.consume){e.stopPropagation()}if(u.target&&e.target){if(!a(ce(e.target),u.target)){return}}if(u.once){if(f.triggeredOnce){return}else{f.triggeredOnce=true}}if(u.changed){const n=ie(o);const r=o.value;if(n.lastValue===r){return}n.lastValue=r}if(f.delayed){clearTimeout(f.delayed)}if(f.throttle){return}if(u.throttle>0){if(!f.throttle){l(s,e);f.throttle=E().setTimeout(function(){f.throttle=null},u.throttle)}}else if(u.delay>0){f.delayed=E().setTimeout(function(){l(s,e)},u.delay)}else{he(s,"htmx:trigger");l(s,e)}}};if(e.listenerInfos==null){e.listenerInfos=[]}e.listenerInfos.push({trigger:u.trigger,listener:i,on:o});o.addEventListener(u.trigger,i)})}let mt=false;let xt=null;function yt(){if(!xt){xt=function(){mt=true};window.addEventListener("scroll",xt);setInterval(function(){if(mt){mt=false;se(ne().querySelectorAll("[hx-trigger*='revealed'],[data-hx-trigger*='revealed']"),function(e){bt(e)})}},200)}}function bt(e){if(!s(e,"data-hx-revealed")&&U(e)){e.setAttribute("data-hx-revealed","true");const t=ie(e);if(t.initHash){he(e,"revealed")}else{e.addEventListener("htmx:afterProcessNode",function(){he(e,"revealed")},{once:true})}}}function wt(e,t,n,r){const o=function(){if(!n.loaded){n.loaded=true;t(e)}};if(r>0){E().setTimeout(o,r)}else{o()}}function vt(t,n,e){let i=false;se(v,function(r){if(s(t,"hx-"+r)){const o=te(t,"hx-"+r);i=true;n.path=o;n.verb=r;e.forEach(function(e){St(t,e,n,function(e,t){const n=ce(e);if(g(n,Q.config.disableSelector)){f(n);return}de(r,o,n,t)})})}});return i}function St(r,e,t,n){if(e.trigger==="revealed"){yt();pt(r,n,t,e);bt(ce(r))}else if(e.trigger==="intersect"){const o={};if(e.root){o.root=fe(r,e.root)}if(e.threshold){o.threshold=parseFloat(e.threshold)}const i=new IntersectionObserver(function(t){for(let e=0;e<t.length;e++){const n=t[e];if(n.isIntersecting){he(r,"intersect");break}}},o);i.observe(ce(r));pt(ce(r),n,t,e)}else if(e.trigger==="load"){if(!gt(e,r,kt("load",{elt:r}))){wt(ce(r),n,t,e.delay)}}else if(e.pollInterval>0){t.polling=true;ct(ce(r),n,e)}else{pt(r,n,t,e)}}function Et(e){const t=ce(e);if(!t){return false}const n=t.attributes;for(let e=0;e<n.length;e++){const r=n[e].name;if(l(r,"hx-on:")||l(r,"data-hx-on:")||l(r,"hx-on-")||l(r,"data-hx-on-")){return true}}return false}function Ct(e){let t=null;const n=[];if(!(e instanceof ShadowRoot)){if(Et(e)){n.push(ce(e))}const r=document.evaluate('.//*[@*[ starts-with(name(), "hx-on:") or starts-with(name(), "data-hx-on:") or'+' starts-with(name(), "hx-on-") or starts-with(name(), "data-hx-on-") ]]',e);while(t=r.iterateNext())n.push(ce(t))}return n}function Rt(e){if(e.querySelectorAll){const t=", [hx-boost] a, [data-hx-boost] a, a[hx-boost], a[data-hx-boost]";const n=e.querySelectorAll(R+t+", form, [type='submit'],"+" [hx-ext], [data-hx-ext], [hx-trigger], [data-hx-trigger]");return n}else{return[]}}function Ot(e){const t=g(ce(e.target),"button, input[type='submit']");const n=Tt(e);if(n){n.lastButtonClicked=t}}function Ht(e){const t=Tt(e);if(t){t.lastButtonClicked=null}}function Tt(e){const t=g(ce(e.target),"button, input[type='submit']");if(!t){return}const n=x("#"+ee(t,"form"),t.getRootNode())||g(t,"form");if(!n){return}return ie(n)}function qt(e){e.addEventListener("click",Ot);e.addEventListener("focusin",Ot);e.addEventListener("focusout",Ht)}function Lt(t,e,n){const r=ie(t);if(!Array.isArray(r.onHandlers)){r.onHandlers=[]}let o;const i=function(e){yn(t,function(){if(!o){o=new Function("event",n)}o.call(t,e)})};t.addEventListener(e,i);r.onHandlers.push({event:e,listener:i})}function At(t){ke(t);for(let e=0;e<t.attributes.length;e++){const n=t.attributes[e].name;const r=t.attributes[e].value;if(l(n,"hx-on")||l(n,"data-hx-on")){const o=n.indexOf("-on")+3;const i=n.slice(o,o+1);if(i==="-"||i===":"){let e=n.slice(o+1);if(l(e,":")){e="htmx"+e}else if(l(e,"-")){e="htmx:"+e.slice(1)}else if(l(e,"htmx-")){e="htmx:"+e.slice(5)}Lt(t,e,r)}}}}function Nt(t){if(g(t,Q.config.disableSelector)){f(t);return}const n=ie(t);if(n.initHash!==Pe(t)){De(t);n.initHash=Pe(t);he(t,"htmx:beforeProcessNode");if(t.value){n.lastValue=t.value}const e=lt(t);const r=vt(t,n,e);if(!r){if(re(t,"hx-boost")==="true"){at(t,n,e)}else if(s(t,"hx-trigger")){e.forEach(function(e){St(t,e,n,function(){})})}}if(t.tagName==="FORM"||ee(t,"type")==="submit"&&s(t,"form")){qt(t)}he(t,"htmx:afterProcessNode")}}function It(e){e=x(e);if(g(e,Q.config.disableSelector)){f(e);return}Nt(e);se(Rt(e),function(e){Nt(e)});se(Ct(e),At)}function Pt(e){return e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}function kt(e,t){let n;if(window.CustomEvent&&typeof window.CustomEvent==="function"){n=new CustomEvent(e,{bubbles:true,cancelable:true,composed:true,detail:t})}else{n=ne().createEvent("CustomEvent");n.initCustomEvent(e,true,true,t)}return n}function ae(e,t,n){he(e,t,ue({error:t},n))}function Dt(e){return e==="htmx:afterProcessNode"}function Mt(e,t){se(Fn(e),function(e){try{t(e)}catch(e){w(e)}})}function w(e){if(console.error){console.error(e)}else if(console.log){console.log("ERROR: ",e)}}function he(e,t,n){e=x(e);if(n==null){n={}}n.elt=e;const r=kt(t,n);if(Q.logger&&!Dt(t)){Q.logger(e,t,n)}if(n.error){w(n.error);he(e,"htmx:error",{errorInfo:n})}let o=e.dispatchEvent(r);const i=Pt(t);if(o&&i!==t){const s=kt(i,r.detail);o=o&&e.dispatchEvent(s)}Mt(ce(e),function(e){o=o&&(e.onEvent(t,r)!==false&&!r.defaultPrevented)});return o}let Xt=location.pathname+location.search;function Ft(){const e=ne().querySelector("[hx-history-elt],[data-hx-history-elt]");return e||ne().body}function Ut(t,e){if(!V()){return}const n=Vt(e);const r=ne().title;const o=window.scrollY;if(Q.config.historyCacheSize<=0){localStorage.removeItem("htmx-history-cache");return}t=j(t);const i=S(localStorage.getItem("htmx-history-cache"))||[];for(let e=0;e<i.length;e++){if(i[e].url===t){i.splice(e,1);break}}const s={url:t,content:n,title:r,scroll:o};he(ne().body,"htmx:historyItemCreated",{item:s,cache:i});i.push(s);while(i.length>Q.config.historyCacheSize){i.shift()}while(i.length>0){try{localStorage.setItem("htmx-history-cache",JSON.stringify(i));break}catch(e){ae(ne().body,"htmx:historyCacheError",{cause:e,cache:i});i.shift()}}}function Bt(t){if(!V()){return null}t=j(t);const n=S(localStorage.getItem("htmx-history-cache"))||[];for(let e=0;e<n.length;e++){if(n[e].url===t){return n[e]}}return null}function Vt(e){const t=Q.config.requestClass;const n=e.cloneNode(true);se(p(n,"."+t),function(e){o(e,t)});return n.innerHTML}function jt(){const e=Ft();const t=Xt||location.pathname+location.search;let n;try{n=ne().querySelector('[hx-history="false" i],[data-hx-history="false" i]')}catch(e){n=ne().querySelector('[hx-history="false"],[data-hx-history="false"]')}if(!n){he(ne().body,"htmx:beforeHistorySave",{path:t,historyElt:e});Ut(t,e)}if(Q.config.historyEnabled)history.replaceState({htmx:true},ne().title,window.location.href)}function _t(e){if(Q.config.getCacheBusterParam){e=e.replace(/org\.htmx\.cache-buster=[^&]*&?/,"");if(pe(e,"&")||pe(e,"?")){e=e.slice(0,-1)}}if(Q.config.historyEnabled){history.pushState({htmx:true},"",e)}Xt=e}function zt(e){if(Q.config.historyEnabled)history.replaceState({htmx:true},"",e);Xt=e}function $t(e){se(e,function(e){e.call(undefined)})}function Jt(o){const e=new XMLHttpRequest;const i={path:o,xhr:e};he(ne().body,"htmx:historyCacheMiss",i);e.open("GET",o,true);e.setRequestHeader("HX-Request","true");e.setRequestHeader("HX-History-Restore-Request","true");e.setRequestHeader("HX-Current-URL",ne().location.href);e.onload=function(){if(this.status>=200&&this.status<400){he(ne().body,"htmx:historyCacheMissLoad",i);const e=D(this.response);const t=e.querySelector("[hx-history-elt],[data-hx-history-elt]")||e;const n=Ft();const r=pn(n);In(e.title);je(n,t,r);$t(r.tasks);Xt=o;he(ne().body,"htmx:historyRestore",{path:o,cacheMiss:true,serverResponse:this.response})}else{ae(ne().body,"htmx:historyCacheMissLoadError",i)}};e.send()}function Kt(e){jt();e=e||location.pathname+location.search;const t=Bt(e);if(t){const n=D(t.content);const r=Ft();const o=pn(r);In(n.title);je(r,n,o);$t(o.tasks);E().setTimeout(function(){window.scrollTo(0,t.scroll)},0);Xt=e;he(ne().body,"htmx:historyRestore",{path:e,item:t})}else{if(Q.config.refreshOnHistoryMiss){window.location.reload(true)}else{Jt(e)}}}function Gt(e){let t=Se(e,"hx-indicator");if(t==null){t=[e]}se(t,function(e){const t=ie(e);t.requestCount=(t.requestCount||0)+1;e.classList.add.call(e.classList,Q.config.requestClass)});return t}function Zt(e){let t=Se(e,"hx-disabled-elt");if(t==null){t=[]}se(t,function(e){const t=ie(e);t.requestCount=(t.requestCount||0)+1;e.setAttribute("disabled","")});return t}function Wt(e,t){se(e,function(e){const t=ie(e);t.requestCount=(t.requestCount||0)-1;if(t.requestCount===0){e.classList.remove.call(e.classList,Q.config.requestClass)}});se(t,function(e){const t=ie(e);t.requestCount=(t.requestCount||0)-1;if(t.requestCount===0){e.removeAttribute("disabled")}})}function Yt(t,n){for(let e=0;e<t.length;e++){const r=t[e];if(r.isSameNode(n)){return true}}return false}function Qt(e){const t=e;if(t.name===""||t.name==null||t.disabled||g(t,"fieldset[disabled]")){return false}if(t.type==="button"||t.type==="submit"||t.tagName==="image"||t.tagName==="reset"||t.tagName==="file"){return false}if(t.type==="checkbox"||t.type==="radio"){return t.checked}return true}function en(t,e,n){if(t!=null&&e!=null){if(Array.isArray(e)){e.forEach(function(e){n.append(t,e)})}else{n.append(t,e)}}}function tn(t,n,r){if(t!=null&&n!=null){let e=r.getAll(t);if(Array.isArray(n)){e=e.filter(e=>n.indexOf(e)<0)}else{e=e.filter(e=>e!==n)}r.delete(t);se(e,e=>r.append(t,e))}}function nn(t,n,r,o,i){if(o==null||Yt(t,o)){return}else{t.push(o)}if(Qt(o)){const s=ee(o,"name");let e=o.value;if(o instanceof HTMLSelectElement&&o.multiple){e=F(o.querySelectorAll("option:checked")).map(function(e){return e.value})}if(o instanceof HTMLInputElement&&o.files){e=F(o.files)}en(s,e,n);if(i){rn(o,r)}}if(o instanceof HTMLFormElement){se(o.elements,function(e){if(t.indexOf(e)>=0){tn(e.name,e.value,n)}else{t.push(e)}if(i){rn(e,r)}});new FormData(o).forEach(function(e,t){en(t,e,n)})}}function rn(e,t){const n=e;if(n.willValidate){he(n,"htmx:validation:validate");if(!n.checkValidity()){t.push({elt:n,message:n.validationMessage,validity:n.validity});he(n,"htmx:validation:failed",{message:n.validationMessage,validity:n.validity})}}}function on(t,e){for(const n of e.keys()){t.delete(n);e.getAll(n).forEach(function(e){t.append(n,e)})}return t}function sn(e,t){const n=[];const r=new FormData;const o=new FormData;const i=[];const s=ie(e);if(s.lastButtonClicked&&!le(s.lastButtonClicked)){s.lastButtonClicked=null}let l=e instanceof HTMLFormElement&&e.noValidate!==true||te(e,"hx-validate")==="true";if(s.lastButtonClicked){l=l&&s.lastButtonClicked.formNoValidate!==true}if(t!=="get"){nn(n,o,i,g(e,"form"),l)}nn(n,r,i,e,l);if(s.lastButtonClicked||e.tagName==="BUTTON"||e.tagName==="INPUT"&&ee(e,"type")==="submit"){const c=s.lastButtonClicked||e;const f=ee(c,"name");en(f,c.value,o)}const u=Se(e,"hx-include");se(u,function(e){nn(n,r,i,ce(e),l);if(!a(e,"form")){se(h(e).querySelectorAll(it),function(e){nn(n,r,i,e,l)})}});on(r,o);return{errors:i,formData:r,values:qn(r)}}function ln(e,t,n){if(e!==""){e+="&"}if(String(n)==="[object Object]"){n=JSON.stringify(n)}const r=encodeURIComponent(n);e+=encodeURIComponent(t)+"="+r;return e}function un(e){e=Hn(e);let n="";e.forEach(function(e,t){n=ln(n,t,e)});return n}function cn(e,t,n){const r={"HX-Request":"true","HX-Trigger":ee(e,"id"),"HX-Trigger-Name":ee(e,"name"),"HX-Target":te(t,"id"),"HX-Current-URL":ne().location.href};xn(e,"hx-headers",false,r);if(n!==undefined){r["HX-Prompt"]=n}if(ie(e).boosted){r["HX-Boosted"]="true"}return r}function fn(n,e){const t=re(e,"hx-params");if(t){if(t==="none"){return new FormData}else if(t==="*"){return n}else if(t.indexOf("not ")===0){se(t.substr(4).split(","),function(e){e=e.trim();n.delete(e)});return n}else{const r=new FormData;se(t.split(","),function(t){t=t.trim();if(n.has(t)){n.getAll(t).forEach(function(e){r.append(t,e)})}});return r}}else{return n}}function an(e){return!!ee(e,"href")&&ee(e,"href").indexOf("#")>=0}function hn(e,t){const n=t||re(e,"hx-swap");const r={swapStyle:ie(e).boosted?"innerHTML":Q.config.defaultSwapStyle,swapDelay:Q.config.defaultSwapDelay,settleDelay:Q.config.defaultSettleDelay};if(Q.config.scrollIntoViewOnBoost&&ie(e).boosted&&!an(e)){r.show="top"}if(n){const s=B(n);if(s.length>0){for(let e=0;e<s.length;e++){const l=s[e];if(l.indexOf("swap:")===0){r.swapDelay=d(l.substr(5))}else if(l.indexOf("settle:")===0){r.settleDelay=d(l.substr(7))}else if(l.indexOf("transition:")===0){r.transition=l.substr(11)==="true"}else if(l.indexOf("ignoreTitle:")===0){r.ignoreTitle=l.substr(12)==="true"}else if(l.indexOf("scroll:")===0){const u=l.substr(7);var o=u.split(":");const c=o.pop();var i=o.length>0?o.join(":"):null;r.scroll=c;r.scrollTarget=i}else if(l.indexOf("show:")===0){const f=l.substr(5);var o=f.split(":");const a=o.pop();var i=o.length>0?o.join(":"):null;r.show=a;r.showTarget=i}else if(l.indexOf("focus-scroll:")===0){const h=l.substr("focus-scroll:".length);r.focusScroll=h=="true"}else if(e==0){r.swapStyle=l}else{w("Unknown modifier in hx-swap: "+l)}}}}return r}function dn(e){return re(e,"hx-encoding")==="multipart/form-data"||a(e,"form")&&ee(e,"enctype")==="multipart/form-data"}function gn(t,n,r){let o=null;Mt(n,function(e){if(o==null){o=e.encodeParameters(t,r,n)}});if(o!=null){return o}else{if(dn(n)){return Hn(r)}else{return un(r)}}}function pn(e){return{tasks:[],elts:[e]}}function mn(e,t){const n=e[0];const r=e[e.length-1];if(t.scroll){var o=null;if(t.scrollTarget){o=ce(fe(n,t.scrollTarget))}if(t.scroll==="top"&&(n||o)){o=o||n;o.scrollTop=0}if(t.scroll==="bottom"&&(r||o)){o=o||r;o.scrollTop=o.scrollHeight}}if(t.show){var o=null;if(t.showTarget){let e=t.showTarget;if(t.showTarget==="window"){e="body"}o=ce(fe(n,e))}if(t.show==="top"&&(n||o)){o=o||n;o.scrollIntoView({block:"start",behavior:Q.config.scrollBehavior})}if(t.show==="bottom"&&(r||o)){o=o||r;o.scrollIntoView({block:"end",behavior:Q.config.scrollBehavior})}}}function xn(r,e,o,i){if(i==null){i={}}if(r==null){return i}const s=te(r,e);if(s){let e=s.trim();let t=o;if(e==="unset"){return null}if(e.indexOf("javascript:")===0){e=e.substr(11);t=true}else if(e.indexOf("js:")===0){e=e.substr(3);t=true}if(e.indexOf("{")!==0){e="{"+e+"}"}let n;if(t){n=yn(r,function(){return Function("return ("+e+")")()},{})}else{n=S(e)}for(const l in n){if(n.hasOwnProperty(l)){if(i[l]==null){i[l]=n[l]}}}}return xn(ce(u(r)),e,o,i)}function yn(e,t,n){if(Q.config.allowEval){return t()}else{ae(e,"htmx:evalDisallowedError");return n}}function bn(e,t){return xn(e,"hx-vars",true,t)}function wn(e,t){return xn(e,"hx-vals",false,t)}function vn(e){return Hn(ue(bn(e),wn(e)))}function Sn(t,n,r){if(r!==null){try{t.setRequestHeader(n,r)}catch(e){t.setRequestHeader(n,encodeURIComponent(r));t.setRequestHeader(n+"-URI-AutoEncoded","true")}}}function En(t){if(t.responseURL&&typeof URL!=="undefined"){try{const e=new URL(t.responseURL);return e.pathname+e.search}catch(e){ae(ne().body,"htmx:badResponseUrl",{url:t.responseURL})}}}function C(e,t){return t.test(e.getAllResponseHeaders())}function Cn(e,t,n){e=e.toLowerCase();if(n){if(n instanceof Element||typeof n==="string"){return de(e,t,null,null,{targetOverride:x(n),returnPromise:true})}else{return de(e,t,x(n.source),n.event,{handler:n.handler,headers:n.headers,values:n.values,targetOverride:x(n.target),swapOverride:n.swap,select:n.select,returnPromise:true})}}else{return de(e,t,null,null,{returnPromise:true})}}function Rn(e){const t=[];while(e){t.push(e);e=e.parentElement}return t}function On(e,t,n){let r;let o;if(typeof URL==="function"){o=new URL(t,document.location.href);const i=document.location.origin;r=i===o.origin}else{o=t;r=l(t,document.location.origin)}if(Q.config.selfRequestsOnly){if(!r){return false}}return he(e,"htmx:validateUrl",ue({url:o,sameHost:r},n))}function Hn(e){if(e instanceof FormData)return e;const t=new FormData;for(const n in e){if(e.hasOwnProperty(n)){if(typeof e[n].forEach==="function"){e[n].forEach(function(e){t.append(n,e)})}else if(typeof e[n]==="object"){t.append(n,JSON.stringify(e[n]))}else{t.append(n,e[n])}}}return t}function Tn(r,o,e){return new Proxy(e,{get:function(t,e){if(typeof e==="number")return t[e];if(e==="length")return t.length;if(e==="push"){return function(e){t.push(e);r.append(o,e)}}if(typeof t[e]==="function"){return function(){t[e].apply(t,arguments);r.delete(o);t.forEach(function(e){r.append(o,e)})}}if(t[e]&&t[e].length===1){return t[e][0]}else{return t[e]}},set:function(e,t,n){e[t]=n;r.delete(o);e.forEach(function(e){r.append(o,e)});return true}})}function qn(r){return new Proxy(r,{get:function(e,t){if(typeof t==="symbol"){return Reflect.get(e,t)}if(t==="toJSON"){return()=>Object.fromEntries(r)}if(t in e){if(typeof e[t]==="function"){return function(){return r[t].apply(r,arguments)}}else{return e[t]}}const n=r.getAll(t);if(n.length===0){return undefined}else if(n.length===1){return n[0]}else{return Tn(e,t,n)}},set:function(t,n,e){if(typeof n!=="string"){return false}t.delete(n);if(typeof e.forEach==="function"){e.forEach(function(e){t.append(n,e)})}else{t.append(n,e)}return true},deleteProperty:function(e,t){if(typeof t==="string"){e.delete(t)}return true},ownKeys:function(e){return Reflect.ownKeys(Object.fromEntries(e))},getOwnPropertyDescriptor:function(e,t){return Reflect.getOwnPropertyDescriptor(Object.fromEntries(e),t)}})}function de(t,n,r,o,i,D){let s=null;let l=null;i=i!=null?i:{};if(i.returnPromise&&typeof Promise!=="undefined"){var e=new Promise(function(e,t){s=e;l=t})}if(r==null){r=ne().body}const M=i.handler||Pn;const X=i.select||null;if(!le(r)){oe(s);return e}const u=i.targetOverride||ce(Ce(r));if(u==null||u==ve){ae(r,"htmx:targetError",{target:te(r,"hx-target")});oe(l);return e}let c=ie(r);const f=c.lastButtonClicked;if(f){const L=ee(f,"formaction");if(L!=null){n=L}const A=ee(f,"formmethod");if(A!=null){if(A.toLowerCase()!=="dialog"){t=A}}}const a=re(r,"hx-confirm");if(D===undefined){const K=function(e){return de(t,n,r,o,i,!!e)};const G={target:u,elt:r,path:n,verb:t,triggeringEvent:o,etc:i,issueRequest:K,question:a};if(he(r,"htmx:confirm",G)===false){oe(s);return e}}let h=r;let d=re(r,"hx-sync");let g=null;let F=false;if(d){const N=d.split(":");const I=N[0].trim();if(I==="this"){h=Ee(r,"hx-sync")}else{h=ce(fe(r,I))}d=(N[1]||"drop").trim();c=ie(h);if(d==="drop"&&c.xhr&&c.abortable!==true){oe(s);return e}else if(d==="abort"){if(c.xhr){oe(s);return e}else{F=true}}else if(d==="replace"){he(h,"htmx:abort")}else if(d.indexOf("queue")===0){const Z=d.split(" ");g=(Z[1]||"last").trim()}}if(c.xhr){if(c.abortable){he(h,"htmx:abort")}else{if(g==null){if(o){const P=ie(o);if(P&&P.triggerSpec&&P.triggerSpec.queue){g=P.triggerSpec.queue}}if(g==null){g="last"}}if(c.queuedRequests==null){c.queuedRequests=[]}if(g==="first"&&c.queuedRequests.length===0){c.queuedRequests.push(function(){de(t,n,r,o,i)})}else if(g==="all"){c.queuedRequests.push(function(){de(t,n,r,o,i)})}else if(g==="last"){c.queuedRequests=[];c.queuedRequests.push(function(){de(t,n,r,o,i)})}oe(s);return e}}const p=new XMLHttpRequest;c.xhr=p;c.abortable=F;const m=function(){c.xhr=null;c.abortable=false;if(c.queuedRequests!=null&&c.queuedRequests.length>0){const e=c.queuedRequests.shift();e()}};const U=re(r,"hx-prompt");if(U){var x=prompt(U);if(x===null||!he(r,"htmx:prompt",{prompt:x,target:u})){oe(s);m();return e}}if(a&&!D){if(!confirm(a)){oe(s);m();return e}}let y=cn(r,u,x);if(t!=="get"&&!dn(r)){y["Content-Type"]="application/x-www-form-urlencoded"}if(i.headers){y=ue(y,i.headers)}const B=sn(r,t);let b=B.errors;const V=B.formData;if(i.values){on(V,Hn(i.values))}const j=vn(r);const w=on(V,j);let v=fn(w,r);if(Q.config.getCacheBusterParam&&t==="get"){v.set("org.htmx.cache-buster",ee(u,"id")||"true")}if(n==null||n===""){n=ne().location.href}const S=xn(r,"hx-request");const _=ie(r).boosted;let E=Q.config.methodsThatUseUrlParams.indexOf(t)>=0;const C={boosted:_,useUrlParams:E,formData:v,parameters:qn(v),unfilteredFormData:w,unfilteredParameters:qn(w),headers:y,target:u,verb:t,errors:b,withCredentials:i.credentials||S.credentials||Q.config.withCredentials,timeout:i.timeout||S.timeout||Q.config.timeout,path:n,triggeringEvent:o};if(!he(r,"htmx:configRequest",C)){oe(s);m();return e}n=C.path;t=C.verb;y=C.headers;v=Hn(C.parameters);b=C.errors;E=C.useUrlParams;if(b&&b.length>0){he(r,"htmx:validation:halted",C);oe(s);m();return e}const z=n.split("#");const $=z[0];const R=z[1];let O=n;if(E){O=$;const W=!v.keys().next().done;if(W){if(O.indexOf("?")<0){O+="?"}else{O+="&"}O+=un(v);if(R){O+="#"+R}}}if(!On(r,O,C)){ae(r,"htmx:invalidPath",C);oe(l);return e}p.open(t.toUpperCase(),O,true);p.overrideMimeType("text/html");p.withCredentials=C.withCredentials;p.timeout=C.timeout;if(S.noHeaders){}else{for(const k in y){if(y.hasOwnProperty(k)){const Y=y[k];Sn(p,k,Y)}}}const H={xhr:p,target:u,requestConfig:C,etc:i,boosted:_,select:X,pathInfo:{requestPath:n,finalRequestPath:O,responsePath:null,anchor:R}};p.onload=function(){try{const t=Rn(r);H.pathInfo.responsePath=En(p);M(r,H);Wt(T,q);he(r,"htmx:afterRequest",H);he(r,"htmx:afterOnLoad",H);if(!le(r)){let e=null;while(t.length>0&&e==null){const n=t.shift();if(le(n)){e=n}}if(e){he(e,"htmx:afterRequest",H);he(e,"htmx:afterOnLoad",H)}}oe(s);m()}catch(e){ae(r,"htmx:onLoadError",ue({error:e},H));throw e}};p.onerror=function(){Wt(T,q);ae(r,"htmx:afterRequest",H);ae(r,"htmx:sendError",H);oe(l);m()};p.onabort=function(){Wt(T,q);ae(r,"htmx:afterRequest",H);ae(r,"htmx:sendAbort",H);oe(l);m()};p.ontimeout=function(){Wt(T,q);ae(r,"htmx:afterRequest",H);ae(r,"htmx:timeout",H);oe(l);m()};if(!he(r,"htmx:beforeRequest",H)){oe(s);m();return e}var T=Gt(r);var q=Zt(r);se(["loadstart","loadend","progress","abort"],function(t){se([p,p.upload],function(e){e.addEventListener(t,function(e){he(r,"htmx:xhr:"+t,{lengthComputable:e.lengthComputable,loaded:e.loaded,total:e.total})})})});he(r,"htmx:beforeSend",H);const J=E?null:gn(p,r,v);p.send(J);return e}function Ln(e,t){const n=t.xhr;let r=null;let o=null;if(C(n,/HX-Push:/i)){r=n.getResponseHeader("HX-Push");o="push"}else if(C(n,/HX-Push-Url:/i)){r=n.getResponseHeader("HX-Push-Url");o="push"}else if(C(n,/HX-Replace-Url:/i)){r=n.getResponseHeader("HX-Replace-Url");o="replace"}if(r){if(r==="false"){return{}}else{return{type:o,path:r}}}const i=t.pathInfo.finalRequestPath;const s=t.pathInfo.responsePath;const l=re(e,"hx-push-url");const u=re(e,"hx-replace-url");const c=ie(e).boosted;let f=null;let a=null;if(l){f="push";a=l}else if(u){f="replace";a=u}else if(c){f="push";a=s||i}if(a){if(a==="false"){return{}}if(a==="true"){a=s||i}if(t.pathInfo.anchor&&a.indexOf("#")===-1){a=a+"#"+t.pathInfo.anchor}return{type:f,path:a}}else{return{}}}function An(e,t){var n=new RegExp(e.code);return n.test(t.toString(10))}function Nn(e){for(var t=0;t<Q.config.responseHandling.length;t++){var n=Q.config.responseHandling[t];if(An(n,e.status)){return n}}return{swap:false}}function In(e){if(e){const t=r("title");if(t){t.innerHTML=e}else{window.document.title=e}}}function Pn(o,i){const s=i.xhr;let l=i.target;const e=i.etc;const u=i.select;if(!he(o,"htmx:beforeOnLoad",i))return;if(C(s,/HX-Trigger:/i)){Je(s,"HX-Trigger",o)}if(C(s,/HX-Location:/i)){jt();let e=s.getResponseHeader("HX-Location");var t;if(e.indexOf("{")===0){t=S(e);e=t.path;delete t.path}Cn("get",e,t).then(function(){_t(e)});return}const n=C(s,/HX-Refresh:/i)&&s.getResponseHeader("HX-Refresh")==="true";if(C(s,/HX-Redirect:/i)){location.href=s.getResponseHeader("HX-Redirect");n&&location.reload();return}if(n){location.reload();return}if(C(s,/HX-Retarget:/i)){if(s.getResponseHeader("HX-Retarget")==="this"){i.target=o}else{i.target=ce(fe(o,s.getResponseHeader("HX-Retarget")))}}const c=Ln(o,i);const r=Nn(s);const f=r.swap;let a=!!r.error;let h=Q.config.ignoreTitle||r.ignoreTitle;let d=r.select;if(r.target){i.target=ce(fe(o,r.target))}var g=e.swapOverride;if(g==null&&r.swapOverride){g=r.swapOverride}if(C(s,/HX-Retarget:/i)){if(s.getResponseHeader("HX-Retarget")==="this"){i.target=o}else{i.target=ce(fe(o,s.getResponseHeader("HX-Retarget")))}}if(C(s,/HX-Reswap:/i)){g=s.getResponseHeader("HX-Reswap")}var p=s.response;var m=ue({shouldSwap:f,serverResponse:p,isError:a,ignoreTitle:h,selectOverride:d},i);if(r.event&&!he(l,r.event,m))return;if(!he(l,"htmx:beforeSwap",m))return;l=m.target;p=m.serverResponse;a=m.isError;h=m.ignoreTitle;d=m.selectOverride;i.target=l;i.failed=a;i.successful=!a;if(m.shouldSwap){if(s.status===286){ut(o)}Mt(o,function(e){p=e.transformResponse(p,s,o)});if(c.type){jt()}if(C(s,/HX-Reswap:/i)){g=s.getResponseHeader("HX-Reswap")}var x=hn(o,g);if(!x.hasOwnProperty("ignoreTitle")){x.ignoreTitle=h}l.classList.add(Q.config.swappingClass);let n=null;let r=null;if(u){d=u}if(C(s,/HX-Reselect:/i)){d=s.getResponseHeader("HX-Reselect")}const y=re(o,"hx-select-oob");const b=re(o,"hx-select");let e=function(){try{if(c.type){he(ne().body,"htmx:beforeHistoryUpdate",ue({history:c},i));if(c.type==="push"){_t(c.path);he(ne().body,"htmx:pushedIntoHistory",{path:c.path})}else{zt(c.path);he(ne().body,"htmx:replacedInHistory",{path:c.path})}}$e(l,p,x,{select:d||b,selectOOB:y,eventInfo:i,anchor:i.pathInfo.anchor,contextElement:o,afterSwapCallback:function(){if(C(s,/HX-Trigger-After-Swap:/i)){let e=o;if(!le(o)){e=ne().body}Je(s,"HX-Trigger-After-Swap",e)}},afterSettleCallback:function(){if(C(s,/HX-Trigger-After-Settle:/i)){let e=o;if(!le(o)){e=ne().body}Je(s,"HX-Trigger-After-Settle",e)}oe(n)}})}catch(e){ae(o,"htmx:swapError",i);oe(r);throw e}};let t=Q.config.globalViewTransitions;if(x.hasOwnProperty("transition")){t=x.transition}if(t&&he(o,"htmx:beforeTransition",i)&&typeof Promise!=="undefined"&&document.startViewTransition){const w=new Promise(function(e,t){n=e;r=t});const v=e;e=function(){document.startViewTransition(function(){v();return w})}}if(x.swapDelay>0){E().setTimeout(e,x.swapDelay)}else{e()}}if(a){ae(o,"htmx:responseError",ue({error:"Response Status Error Code "+s.status+" from "+i.pathInfo.requestPath},i))}}const kn={};function Dn(){return{init:function(e){return null},onEvent:function(e,t){return true},transformResponse:function(e,t,n){return e},isInlineSwap:function(e){return false},handleSwap:function(e,t,n,r){return false},encodeParameters:function(e,t,n){return null}}}function Mn(e,t){if(t.init){t.init(n)}kn[e]=ue(Dn(),t)}function Xn(e){delete kn[e]}function Fn(e,n,r){if(n==undefined){n=[]}if(e==undefined){return n}if(r==undefined){r=[]}const t=te(e,"hx-ext");if(t){se(t.split(","),function(e){e=e.replace(/ /g,"");if(e.slice(0,7)=="ignore:"){r.push(e.slice(7));return}if(r.indexOf(e)<0){const t=kn[e];if(t&&n.indexOf(t)<0){n.push(t)}}})}return Fn(ce(u(e)),n,r)}var Un=false;ne().addEventListener("DOMContentLoaded",function(){Un=true});function Bn(e){if(Un||ne().readyState==="complete"){e()}else{ne().addEventListener("DOMContentLoaded",e)}}function Vn(){if(Q.config.includeIndicatorStyles!==false){ne().head.insertAdjacentHTML("beforeend","<style> ."+Q.config.indicatorClass+"{opacity:0} ."+Q.config.requestClass+" ."+Q.config.indicatorClass+"{opacity:1; transition: opacity 200ms ease-in;} ."+Q.config.requestClass+"."+Q.config.indicatorClass+"{opacity:1; transition: opacity 200ms ease-in;} </style>")}}function jn(){const e=ne().querySelector('meta[name="htmx-config"]');if(e){return S(e.content)}else{return null}}function _n(){const e=jn();if(e){Q.config=ue(Q.config,e)}}Bn(function(){_n();Vn();let e=ne().body;It(e);const t=ne().querySelectorAll("[hx-trigger='restored'],[data-hx-trigger='restored']");e.addEventListener("htmx:abort",function(e){const t=e.target;const n=ie(t);if(n&&n.xhr){n.xhr.abort()}});const n=window.onpopstate?window.onpopstate.bind(window):null;window.onpopstate=function(e){if(e.state&&e.state.htmx){Kt();se(t,function(e){he(e,"htmx:restored",{document:ne(),triggerEvent:he})})}else{if(n){n(e)}}};E().setTimeout(function(){he(e,"htmx:load",{});e=null},0)});return Q}(); \ No newline at end of file
diff --git a/dist/htmx.min.js.gz b/dist/htmx.min.js.gz
index a6056c77..62835452 100644
--- a/dist/htmx.min.js.gz
+++ b/dist/htmx.min.js.gz
Binary files differ
diff --git a/package.json b/package.json
index d592cac4..15795eb2 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
"AJAX",
"HTML"
],
- "version": "2.0.0-alpha2",
+ "version": "2.0.0-beta1",
"homepage": "https://htmx.org/",
"bugs": {
"url": "https://github.com/bigskysoftware/htmx/issues"
diff --git a/scripts/www.sh b/scripts/www.sh
index 0d854572..62081184 100755
--- a/scripts/www.sh
+++ b/scripts/www.sh
@@ -18,5 +18,3 @@ cp -r "./src" "$STATIC_ROOT/src"
# copy the current htmx to the main website
cp "src/htmx.js" "www/themes/htmx-theme/static/js/htmx.js"
-cp "src/ext/class-tools.js" "www/themes/htmx-theme/static/js/class-tools.js"
-cp "src/ext/preload.js" "www/themes/htmx-theme/static/js/preload.js" \ No newline at end of file
diff --git a/www/content/posts/2024-03-15-htmx-2.0.0-beta1-is-released.md b/www/content/posts/2024-03-15-htmx-2.0.0-beta1-is-released.md
new file mode 100644
index 00000000..f2304f63
--- /dev/null
+++ b/www/content/posts/2024-03-15-htmx-2.0.0-beta1-is-released.md
@@ -0,0 +1,56 @@
++++
+title = "htmx 2.0.0-beta1 has been released!"
+date = 2024-03-15
+[taxonomies]
+tag = ["posts", "announcements"]
++++
+
+## htmx 2.0.0-beta1 Release
+
+I'm happy to announce the first beta release of htmx 2.0
+
+This is an _beta_ release and should NOT be considered ready for production. We are releasing it to begin
+final testing against real world scenarios.
+
+If you are able to do so, please switch to the release and do a quick run through any htmx-powered functionality you
+have and let us know if there are issues.
+
+Of particular concern to us are the following changes:
+
+* We removed the deprecated `hx-sse` and `hx-ws` attributes in favor of the extensions (which are available in 1.x)
+* `DELETE` requests now use parameters, rather than form encoded bodies, for their payload (This is in accordance w/ the spec.)
+
+A complete upgrade guide can be found here:
+
+[htmx 1.x -> 2.x Migration Guide](@/migration-guide-htmx-1.md)
+
+Note that htmx 2.x will no longer be IE compatible, but 1.x will continue to be supported for IE users.
+
+### Installing
+
+The beta can be installed via a package manager referencing version `2.0.0-beta1`, or can be linked via a CDN:
+
+```html
+<script src="https://unpkg.com/htmx.org@2.0.0-beta1/dist/htmx.min.js"></script>
+```
+
+or <a href="https://unpkg.com/htmx.org@2.0.0-beta/dist/htmx.min.js" download>Downloaded</a>
+
+### Extensions
+
+Extensions have been removed from the main codebase and are now in this github repo:
+
+<https://github.com/bigskysoftware/htmx-extensions/tree/main/ext>
+
+They are available at <https://extensions.htmx.org>
+
+There was one breaking change in the extensions, SSE, so you must use the newer version of that extension:
+
+https://github.com/bigskysoftware/htmx-extensions/blob/main/ext/sse.js
+
+### New Features
+
+* Add config option to ignore nested oob-swaps instead of processing them (#1235)
+* Add textContent swap style (#2356)
+* Complete JSdoc in htmx.js + generated TypeScript definition (Thank you @Telroshan!) (#2336)
+* Added a compatibility extension at
diff --git a/www/static/src/htmx.d.ts b/www/static/src/htmx.d.ts
index 631af6ec..13bc4809 100644
--- a/www/static/src/htmx.d.ts
+++ b/www/static/src/htmx.d.ts
@@ -1,466 +1,193 @@
-// https://htmx.org/reference/#api
-
-/**
- * This method adds a class to the given element.
- *
- * https://htmx.org/api/#addClass
- *
- * @param elt the element to add the class to
- * @param clazz the class to add
- * @param delay the delay (in milliseconds before class is added)
- */
-export function addClass(elt: Element, clazz: string, delay?: number): void;
-
-/**
- * Issues an htmx-style AJAX request
- *
- * https://htmx.org/api/#ajax
- *
- * @param verb 'GET', 'POST', etc.
- * @param path the URL path to make the AJAX
- * @param element the element to target (defaults to the **body**)
- * @returns Promise that resolves immediately if no request is sent, or when the request is complete
- */
-export function ajax(verb: string, path: string, element: Element): Promise<void>;
-
-/**
- * Issues an htmx-style AJAX request
- *
- * https://htmx.org/api/#ajax
- *
- * @param verb 'GET', 'POST', etc.
- * @param path the URL path to make the AJAX
- * @param selector a selector for the target
- * @returns Promise that resolves immediately if no request is sent, or when the request is complete
- */
-export function ajax(verb: string, path: string, selector: string): Promise<void>;
-
-/**
- * Issues an htmx-style AJAX request
- *
- * https://htmx.org/api/#ajax
- *
- * @param verb 'GET', 'POST', etc.
- * @param path the URL path to make the AJAX
- * @param context a context object that contains any of the following
- * @returns Promise that resolves immediately if no request is sent, or when the request is complete
- */
-export function ajax(
- verb: string,
- path: string,
- context: Partial<{ source: any; event: any; handler: any; target: any; swap: any; values: any; headers: any; select: any }>
-): Promise<void>;
-
-/**
- * Finds the closest matching element in the given elements parentage, inclusive of the element
- *
- * https://htmx.org/api/#closest
- *
- * @param elt the element to find the selector from
- * @param selector the selector to find
- */
-export function closest(elt: Element, selector: string): Element | null;
-
-/**
- * A property holding the configuration htmx uses at runtime.
- *
- * Note that using a [meta tag](https://htmx.org/docs/#config) is the preferred mechanism for setting these properties.
- *
- * https://htmx.org/api/#config
- */
-export var config: HtmxConfig;
-
-/**
- * A property used to create new [Server Sent Event](https://htmx.org/docs/#sse) sources. This can be updated to provide custom SSE setup.
- *
- * https://htmx.org/api/#createEventSource
- */
-export var createEventSource: (url: string) => EventSource;
-
-/**
- * A property used to create new [WebSocket](https://htmx.org/docs/#websockets). This can be updated to provide custom WebSocket setup.
- *
- * https://htmx.org/api/#createWebSocket
- */
-export var createWebSocket: (url: string) => WebSocket;
-
-/**
- * Defines a new htmx [extension](https://htmx.org/extensions).
- *
- * https://htmx.org/api/#defineExtension
- *
- * @param name the extension name
- * @param ext the extension definition
- */
-export function defineExtension(name: string, ext: HtmxExtension): void;
-
-/**
- * Finds an element matching the selector
- *
- * https://htmx.org/api/#find
- *
- * @param selector the selector to match
- */
-export function find(selector: string): Element | null;
-
-/**
- * Finds an element matching the selector
- *
- * https://htmx.org/api/#find
- *
- * @param elt the root element to find the matching element in, inclusive
- * @param selector the selector to match
- */
-export function find(elt: Element, selector: string): Element | null;
-
-/**
- * Finds all elements matching the selector
- *
- * https://htmx.org/api/#findAll
- *
- * @param selector the selector to match
- */
-export function findAll(selector: string): NodeListOf<Element>;
-
-/**
- * Finds all elements matching the selector
- *
- * https://htmx.org/api/#findAll
- *
- * @param elt the root element to find the matching elements in, inclusive
- * @param selector the selector to match
- */
-export function findAll(elt: Element, selector: string): NodeListOf<Element>;
-
-/**
- * Log all htmx events, useful for debugging.
- *
- * https://htmx.org/api/#logAll
- */
-export function logAll(): void;
-
-/**
- * The logger htmx uses to log with
- *
- * https://htmx.org/api/#logger
- */
-export var logger: (elt: Element, eventName: string, detail: any) => void | null;
-
-/**
- * Removes an event listener from an element
- *
- * https://htmx.org/api/#off
- *
- * @param eventName the event name to remove the listener from
- * @param listener the listener to remove
- */
-export function off(eventName: string, listener: (evt: Event) => void): (evt: Event) => void;
-
-/**
- * Removes an event listener from an element
- *
- * https://htmx.org/api/#off
- *
- * @param target the element to remove the listener from
- * @param eventName the event name to remove the listener from
- * @param listener the listener to remove
- */
-export function off(target: string, eventName: string, listener: (evt: Event) => void): (evt: Event) => void;
-
-/**
- * Adds an event listener to an element
- *
- * https://htmx.org/api/#on
- *
- * @param eventName the event name to add the listener for
- * @param listener the listener to add
- */
-export function on(eventName: string, listener: (evt: Event) => void): (evt: Event) => void;
-
-/**
- * Adds an event listener to an element
- *
- * https://htmx.org/api/#on
- *
- * @param target the element to add the listener to
- * @param eventName the event name to add the listener for
- * @param listener the listener to add
- */
-export function on(target: string, eventName: string, listener: (evt: Event) => void): (evt: Event) => void;
-
-/**
- * Adds a callback for the **htmx:load** event. This can be used to process new content, for example initializing the content with a javascript library
- *
- * https://htmx.org/api/#onLoad
- *
- * @param callback the callback to call on newly loaded content
- */
-export function onLoad(callback: (element: Element) => void): void;
-
-/**
- * Parses an interval string consistent with the way htmx does. Useful for plugins that have timing-related attributes.
- *
- * Caution: Accepts an int followed by either **s** or **ms**. All other values use **parseFloat**
- *
- * https://htmx.org/api/#parseInterval
- *
- * @param str timing string
- */
-export function parseInterval(str: string): number;
-
-/**
- * Processes new content, enabling htmx behavior. This can be useful if you have content that is added to the DOM outside of the normal htmx request cycle but still want htmx attributes to work.
- *
- * https://htmx.org/api/#process
- *
- * @param element element to process
- */
-export function process(element: Element): void;
-
-/**
- * Removes an element from the DOM
- *
- * https://htmx.org/api/#remove
- *
- * @param elt element to remove
- * @param delay the delay (in milliseconds before element is removed)
- */
-export function remove(elt: Element, delay?: number): void;
-
-/**
- * Removes a class from the given element
- *
- * https://htmx.org/api/#removeClass
- *
- * @param elt element to remove the class from
- * @param clazz the class to remove
- * @param delay the delay (in milliseconds before class is removed)
- */
-export function removeClass(elt: Element, clazz: string, delay?: number): void;
-
-/**
- * Removes the given extension from htmx
- *
- * https://htmx.org/api/#removeExtension
- *
- * @param name the name of the extension to remove
- */
-export function removeExtension(name: string): void;
-
-/**
- * Takes the given class from its siblings, so that among its siblings, only the given element will have the class.
- *
- * https://htmx.org/api/#takeClass
- *
- * @param elt the element that will take the class
- * @param clazz the class to take
- */
-export function takeClass(elt: Element, clazz: string): void;
-
-/**
- * Toggles the given class on an element
- *
- * https://htmx.org/api/#toggleClass
- *
- * @param elt the element to toggle the class on
- * @param clazz the class to toggle
- */
-export function toggleClass(elt: Element, clazz: string): void;
-
-/**
- * Triggers a given event on an element
- *
- * https://htmx.org/api/#trigger
- *
- * @param elt the element to trigger the event on
- * @param name the name of the event to trigger
- * @param detail details for the event
- */
-export function trigger(elt: Element, name: string, detail: any): void;
-
-/**
- * Returns the input values that would resolve for a given element via the htmx value resolution mechanism
- *
- * https://htmx.org/api/#values
- *
- * @param elt the element to resolve values on
- * @param requestType the request type (e.g. **get** or **post**) non-GET's will include the enclosing form of the element. Defaults to **post**
- */
-export function values(elt: Element, requestType?: string): any;
-
-export const version: string;
-
-export interface HtmxConfig {
- /**
- * The attributes to settle during the settling phase.
- * @default ["class", "style", "width", "height"]
- */
- attributesToSettle?: ["class", "style", "width", "height"] | string[];
- /**
- * If the focused element should be scrolled into view.
- * @default false
- */
- defaultFocusScroll?: boolean;
- /**
- * The default delay between completing the content swap and settling attributes.
- * @default 20
- */
- defaultSettleDelay?: number;
- /**
- * The default delay between receiving a response from the server and doing the swap.
- * @default 0
- */
- defaultSwapDelay?: number;
- /**
- * The default swap style to use if **[hx-swap](https://htmx.org/attributes/hx-swap)** is omitted.
- * @default "innerHTML"
- */
- defaultSwapStyle?: "innerHTML" | string;
- /**
- * The number of pages to keep in **localStorage** for history support.
- * @default 10
- */
- historyCacheSize?: number;
- /**
- * Whether or not to use history.
- * @default true
- */
- historyEnabled?: boolean;
- /**
- * If true, htmx will inject a small amount of CSS into the page to make indicators invisible unless the **htmx-indicator** class is present.
- * @default true
- */
- includeIndicatorStyles?: boolean;
- /**
- * The class to place on indicators when a request is in flight.
- * @default "htmx-indicator"
- */
- indicatorClass?: "htmx-indicator" | string;
- /**
- * The class to place on triggering elements when a request is in flight.
- * @default "htmx-request"
- */
- requestClass?: "htmx-request" | string;
- /**
- * The class to temporarily place on elements that htmx has added to the DOM.
- * @default "htmx-added"
- */
- addedClass?: "htmx-added" | string;
- /**
- * The class to place on target elements when htmx is in the settling phase.
- * @default "htmx-settling"
- */
- settlingClass?: "htmx-settling" | string;
- /**
- * The class to place on target elements when htmx is in the swapping phase.
- * @default "htmx-swapping"
- */
- swappingClass?: "htmx-swapping" | string;
- /**
- * Allows the use of eval-like functionality in htmx, to enable **hx-vars**, trigger conditions & script tag evaluation. Can be set to **false** for CSP compatibility.
- * @default true
- */
- allowEval?: boolean;
- /**
- * Use HTML template tags for parsing content from the server. This allows you to use Out of Band content when returning things like table rows, but it is *not* IE11 compatible.
- * @default false
- */
- useTemplateFragments?: boolean;
- /**
- * Allow cross-site Access-Control requests using credentials such as cookies, authorization headers or TLS client certificates.
- * @default false
- */
- withCredentials?: boolean;
- /**
- * The default implementation of **getWebSocketReconnectDelay** for reconnecting after unexpected connection loss by the event code **Abnormal Closure**, **Service Restart** or **Try Again Later**.
- * @default "full-jitter"
- */
- wsReconnectDelay?: "full-jitter" | string | ((retryCount: number) => number);
- // following don't appear in the docs
- /** @default false */
- refreshOnHistoryMiss?: boolean;
- /** @default 0 */
- timeout?: number;
- /** @default "[hx-disable], [data-hx-disable]" */
- disableSelector?: "[hx-disable], [data-hx-disable]" | string;
- /** @default "smooth" */
- scrollBehavior?: "smooth" | "auto";
- /**
- * If set to false, disables the interpretation of script tags.
- * @default true
- */
- allowScriptTags?: boolean;
- /**
- * If set to true, disables htmx-based requests to non-origin hosts.
- * @default false
- */
- selfRequestsOnly?: boolean;
- /**
- * Whether or not the target of a boosted element is scrolled into the viewport.
- * @default true
- */
- scrollIntoViewOnBoost?: boolean;
- /**
- * If set, the nonce will be added to inline scripts.
- * @default ''
- */
- inlineScriptNonce?: string;
- /**
- * The type of binary data being received over the WebSocket connection
- * @default 'blob'
- */
- wsBinaryType?: 'blob' | 'arraybuffer';
- /**
- * If set to true htmx will include a cache-busting parameter in GET requests to avoid caching partial responses by the browser
- * @default false
- */
- getCacheBusterParam?: boolean;
- /**
- * If set to true, htmx will use the View Transition API when swapping in new content.
- * @default false
- */
- globalViewTransitions?: boolean;
- /**
- * htmx will format requests with these methods by encoding their parameters in the URL, not the request body
- * @default ["get"]
- */
- methodsThatUseUrlParams?: ('get' | 'head' | 'post' | 'put' | 'delete' | 'connect' | 'options' | 'trace' | 'patch' )[];
- /**
- * If set to true htmx will not update the title of the document when a title tag is found in new content
- * @default false
- */
- ignoreTitle:? boolean;
- /**
- * The cache to store evaluated trigger specifications into.
- * You may define a simple object to use a never-clearing cache, or implement your own system using a [proxy object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
- * @default null
- */
- triggerSpecsCache?: {[trigger: string]: HtmxTriggerSpecification[]};
+declare namespace htmx {
+ const onLoad: (callback: (elt: Node) => void) => EventListener;
+ const process: (elt: string | Element) => void;
+ const on: (arg1: string | EventTarget, arg2: string | EventListener, arg3?: EventListener) => EventListener;
+ const off: (arg1: string | EventTarget, arg2: string | EventListener, arg3?: EventListener) => EventListener;
+ const trigger: (elt: string | EventTarget, eventName: string, detail?: any) => boolean;
+ const ajax: (verb: HttpVerb, path: string, context: string | Element | HtmxAjaxHelperContext) => Promise<void>;
+ const find: (eltOrSelector: string | ParentNode, selector?: string) => Element;
+ const findAll: (eltOrSelector: string | ParentNode, selector?: string) => NodeListOf<Element>;
+ const closest: (elt: string | Element, selector: string) => Element;
+ function values(elt: Element, type: HttpVerb): any;
+ const remove: (elt: Node, delay?: number) => void;
+ const addClass: (elt: string | Element, clazz: string, delay?: number) => void;
+ const removeClass: (node: string | Node, clazz: string, delay?: number) => void;
+ const toggleClass: (elt: string | Element, clazz: string) => void;
+ const takeClass: (elt: string | Node, clazz: string) => void;
+ const swap: (target: string | Element, content: string, swapSpec: HtmxSwapSpecification, swapOptions?: SwapOptions) => void;
+ const defineExtension: (name: string, extension: any) => void;
+ const removeExtension: (name: string) => void;
+ const logAll: () => void;
+ const logNone: () => void;
+ const logger: any;
+ namespace config {
+ const historyEnabled: boolean;
+ const historyCacheSize: number;
+ const refreshOnHistoryMiss: boolean;
+ const defaultSwapStyle: HtmxSwapStyle;
+ const defaultSwapDelay: number;
+ const defaultSettleDelay: number;
+ const includeIndicatorStyles: boolean;
+ const indicatorClass: string;
+ const requestClass: string;
+ const addedClass: string;
+ const settlingClass: string;
+ const swappingClass: string;
+ const allowEval: boolean;
+ const allowScriptTags: boolean;
+ const inlineScriptNonce: string;
+ const attributesToSettle: string[];
+ const withCredentials: boolean;
+ const timeout: number;
+ const wsReconnectDelay: "full-jitter" | ((retryCount: number) => number);
+ const wsBinaryType: BinaryType;
+ const disableSelector: string;
+ const scrollBehavior: 'auto' | 'instant' | 'smooth';
+ const defaultFocusScroll: boolean;
+ const getCacheBusterParam: boolean;
+ const globalViewTransitions: boolean;
+ const methodsThatUseUrlParams: (HttpVerb)[];
+ const selfRequestsOnly: boolean;
+ const ignoreTitle: boolean;
+ const scrollIntoViewOnBoost: boolean;
+ const triggerSpecsCache: any | null;
+ const disableInheritance: boolean;
+ const responseHandling: HtmxResponseHandlingConfig[];
+ }
+ const parseInterval: (str: string) => number;
+ const _: (str: string) => any;
+ const version: string;
}
-
-type HtmxSwapStyle = "innerHTML" | "outerHTML" | "beforebegin" | "afterbegin" | "beforeend" | "afterend" | "delete" | "none" | string
-
-export interface HtmxSwapSpecification {
+type HttpVerb = 'get' | 'head' | 'post' | 'put' | 'delete' | 'connect' | 'options' | 'trace' | 'patch';
+type SwapOptions = {
+ select?: string;
+ selectOOB?: string;
+ eventInfo?: any;
+ anchor?: string;
+ contextElement?: Element;
+ afterSwapCallback?: swapCallback;
+ afterSettleCallback?: swapCallback;
+};
+type swapCallback = () => any;
+type HtmxSwapStyle = 'innerHTML' | 'outerHTML' | 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'delete' | 'none' | string;
+type HtmxSwapSpecification = {
swapStyle: HtmxSwapStyle;
- swapDelay?: number;
- settleDelay?: number;
+ swapDelay: number;
+ settleDelay: number;
transition?: boolean;
ignoreTitle?: boolean;
head?: string;
- scroll?: string;
+ scroll?: 'top' | 'bottom';
scrollTarget?: string;
show?: string;
showTarget?: string;
focusScroll?: boolean;
-}
-
-/**
- * https://htmx.org/extensions/#defining
- */
-export interface HtmxExtension {
- onEvent?: (name: string, evt: CustomEvent) => any;
- transformResponse?: (text: any, xhr: XMLHttpRequest, elt: any) => any;
- isInlineSwap?: (swapStyle: any) => any;
- handleSwap?: (swapStyle: any, target: any, fragment: any, settleInfo: any) => any;
- encodeParameters?: (xhr: XMLHttpRequest, parameters: any, elt: any) => any;
-}
+};
+type ConditionalFunction = ((this: Node, evt: Event) => boolean) & {
+ source: string;
+};
+type HtmxTriggerSpecification = {
+ trigger: string;
+ pollInterval?: number;
+ eventFilter?: ConditionalFunction;
+ changed?: boolean;
+ once?: boolean;
+ consume?: boolean;
+ delay?: number;
+ from?: string;
+ target?: string;
+ throttle?: number;
+ queue?: string;
+ root?: string;
+ threshold?: string;
+};
+type HtmxElementValidationError = {
+ elt: Element;
+ message: string;
+ validity: ValidityState;
+};
+type HtmxHeaderSpecification = Record<string, string>;
+type HtmxAjaxHelperContext = {
+ source?: Element | string;
+ event?: Event;
+ handler?: HtmxAjaxHandler;
+ target: Element | string;
+ swap?: HtmxSwapStyle;
+ values?: any | FormData;
+ headers?: Record<string, string>;
+ select?: string;
+};
+type HtmxRequestConfig = {
+ boosted: boolean;
+ useUrlParams: boolean;
+ formData: FormData;
+ /**
+ * formData proxy
+ */
+ parameters: any;
+ unfilteredFormData: FormData;
+ /**
+ * unfilteredFormData proxy
+ */
+ unfilteredParameters: any;
+ headers: HtmxHeaderSpecification;
+ target: Element;
+ verb: HttpVerb;
+ errors: HtmxElementValidationError[];
+ withCredentials: boolean;
+ timeout: number;
+ path: string;
+ triggeringEvent: Event;
+};
+type HtmxResponseInfo = {
+ xhr: XMLHttpRequest;
+ target: Element;
+ requestConfig: HtmxRequestConfig;
+ etc: HtmxAjaxEtc;
+ boosted: boolean;
+ select: string;
+ pathInfo: {
+ requestPath: string;
+ finalRequestPath: string;
+ responsePath: string | null;
+ anchor: string;
+ };
+ failed?: boolean;
+ successful?: boolean;
+};
+type HtmxAjaxEtc = {
+ returnPromise?: boolean;
+ handler?: HtmxAjaxHandler;
+ select?: string;
+ targetOverride?: Element;
+ swapOverride?: HtmxSwapStyle;
+ headers?: Record<string, string>;
+ values?: any | FormData;
+ credentials?: boolean;
+ timeout?: number;
+};
+type HtmxResponseHandlingConfig = {
+ code?: string;
+ swap: boolean;
+ error?: boolean;
+ ignoreTitle?: boolean;
+ select?: string;
+ target?: string;
+ swapOverride?: string;
+ event?: string;
+};
+type HtmxBeforeSwapDetails = HtmxResponseInfo & {
+ shouldSwap: boolean;
+ serverResponse: any;
+ isError: boolean;
+ ignoreTitle: boolean;
+ selectOverride: string;
+};
+type HtmxAjaxHandler = (elt: Element, responseInfo: HtmxResponseInfo) => any;
+type HtmxSettleTask = (() => void);
+type HtmxSettleInfo = {
+ tasks: HtmxSettleTask[];
+ elts: Element[];
+ title?: string;
+};
+type HtmxExtension = any;
diff --git a/www/static/src/htmx.js b/www/static/src/htmx.js
index 7ba3237e..b5b4f24e 100644
--- a/www/static/src/htmx.js
+++ b/www/static/src/htmx.js
@@ -2,81 +2,300 @@ var htmx = (function() {
'use strict'
// Public API
- //* * @type {import("./htmx").HtmxApi} */
const htmx = {
+ // Tsc madness here, assigning the functions directly results in an invalid TypeScript output, but reassigning is fine
/* Event processing */
- onLoad: onLoadHelper,
- process: processNode,
- on: addEventListenerImpl,
- off: removeEventListenerImpl,
- trigger: triggerEvent,
- ajax: ajaxHelper,
+ /** @type {typeof onLoadHelper} */
+ onLoad: null,
+ /** @type {typeof processNode} */
+ process: null,
+ /** @type {typeof addEventListenerImpl} */
+ on: null,
+ /** @type {typeof removeEventListenerImpl} */
+ off: null,
+ /** @type {typeof triggerEvent} */
+ trigger: null,
+ /** @type {typeof ajaxHelper} */
+ ajax: null,
/* DOM querying helpers */
- find,
- findAll,
- closest,
+ /** @type {typeof find} */
+ find: null,
+ /** @type {typeof findAll} */
+ findAll: null,
+ /** @type {typeof closest} */
+ closest: null,
+ /**
+ * Returns the input values that would resolve for a given element via the htmx value resolution mechanism
+ *
+ * @see https://htmx.org/api/#values
+ *
+ * @param {Element} elt the element to resolve values on
+ * @param {HttpVerb} type the request type (e.g. **get** or **post**) non-GET's will include the enclosing form of the element. Defaults to **post**
+ * @returns {Object}
+ */
values: function(elt, type) {
const inputValues = getInputValues(elt, type || 'post')
return inputValues.values
},
/* DOM manipulation helpers */
- remove: removeElement,
- addClass: addClassToElement,
- removeClass: removeClassFromElement,
- toggleClass: toggleClassOnElement,
- takeClass: takeClassForElement,
- swap,
+ /** @type {typeof removeElement} */
+ remove: null,
+ /** @type {typeof addClassToElement} */
+ addClass: null,
+ /** @type {typeof removeClassFromElement} */
+ removeClass: null,
+ /** @type {typeof toggleClassOnElement} */
+ toggleClass: null,
+ /** @type {typeof takeClassForElement} */
+ takeClass: null,
+ /** @type {typeof swap} */
+ swap: null,
/* Extension entrypoints */
- defineExtension,
- removeExtension,
+ /** @type {typeof defineExtension} */
+ defineExtension: null,
+ /** @type {typeof removeExtension} */
+ removeExtension: null,
+ /* Debugging */
+ /** @type {typeof logAll} */
+ logAll: null,
+ /** @type {typeof logNone} */
+ logNone: null,
/* Debugging */
- logAll,
- logNone,
+ /**
+ * The logger htmx uses to log with
+ *
+ * @see https://htmx.org/api/#logger
+ */
logger: null,
+ /**
+ * A property holding the configuration htmx uses at runtime.
+ *
+ * Note that using a [meta tag](https://htmx.org/docs/#config) is the preferred mechanism for setting these properties.
+ *
+ * @see https://htmx.org/api/#config
+ */
config: {
+ /**
+ * Whether to use history.
+ * @type boolean
+ * @default true
+ */
historyEnabled: true,
+ /**
+ * The number of pages to keep in **localStorage** for history support.
+ * @type number
+ * @default 10
+ */
historyCacheSize: 10,
+ /**
+ * @type boolean
+ * @default false
+ */
refreshOnHistoryMiss: false,
+ /**
+ * The default swap style to use if **[hx-swap](https://htmx.org/attributes/hx-swap)** is omitted.
+ * @type HtmxSwapStyle
+ * @default 'innerHTML'
+ */
defaultSwapStyle: 'innerHTML',
+ /**
+ * The default delay between receiving a response from the server and doing the swap.
+ * @type number
+ * @default 0
+ */
defaultSwapDelay: 0,
+ /**
+ * The default delay between completing the content swap and settling attributes.
+ * @type number
+ * @default 20
+ */
defaultSettleDelay: 20,
+ /**
+ * If true, htmx will inject a small amount of CSS into the page to make indicators invisible unless the **htmx-indicator** class is present.
+ * @type boolean
+ * @default true
+ */
includeIndicatorStyles: true,
+ /**
+ * The class to place on indicators when a request is in flight.
+ * @type string
+ * @default 'htmx-indicator'
+ */
indicatorClass: 'htmx-indicator',
+ /**
+ * The class to place on triggering elements when a request is in flight.
+ * @type string
+ * @default 'htmx-request'
+ */
requestClass: 'htmx-request',
+ /**
+ * The class to temporarily place on elements that htmx has added to the DOM.
+ * @type string
+ * @default 'htmx-added'
+ */
addedClass: 'htmx-added',
+ /**
+ * The class to place on target elements when htmx is in the settling phase.
+ * @type string
+ * @default 'htmx-settling'
+ */
settlingClass: 'htmx-settling',
+ /**
+ * The class to place on target elements when htmx is in the swapping phase.
+ * @type string
+ * @default 'htmx-swapping'
+ */
swappingClass: 'htmx-swapping',
+ /**
+ * Allows the use of eval-like functionality in htmx, to enable **hx-vars**, trigger conditions & script tag evaluation. Can be set to **false** for CSP compatibility.
+ * @type boolean
+ * @default true
+ */
allowEval: true,
+ /**
+ * If set to false, disables the interpretation of script tags.
+ * @type boolean
+ * @default true
+ */
allowScriptTags: true,
+ /**
+ * If set, the nonce will be added to inline scripts.
+ * @type string
+ * @default ''
+ */
inlineScriptNonce: '',
+ /**
+ * The attributes to settle during the settling phase.
+ * @type string[]
+ * @default ['class', 'style', 'width', 'height']
+ */
attributesToSettle: ['class', 'style', 'width', 'height'],
+ /**
+ * Allow cross-site Access-Control requests using credentials such as cookies, authorization headers or TLS client certificates.
+ * @type boolean
+ * @default false
+ */
withCredentials: false,
+ /**
+ * @type number
+ * @default 0
+ */
timeout: 0,
+ /**
+ * The default implementation of **getWebSocketReconnectDelay** for reconnecting after unexpected connection loss by the event code **Abnormal Closure**, **Service Restart** or **Try Again Later**.
+ * @type {'full-jitter' | ((retryCount:number) => number)}
+ * @default "full-jitter"
+ */
wsReconnectDelay: 'full-jitter',
+ /**
+ * The type of binary data being received over the WebSocket connection
+ * @type BinaryType
+ * @default 'blob'
+ */
wsBinaryType: 'blob',
+ /**
+ * @type string
+ * @default '[hx-disable], [data-hx-disable]'
+ */
disableSelector: '[hx-disable], [data-hx-disable]',
+ /**
+ * @type {'auto' | 'instant' | 'smooth'}
+ * @default 'smooth'
+ */
scrollBehavior: 'instant',
+ /**
+ * If the focused element should be scrolled into view.
+ * @type boolean
+ * @default false
+ */
defaultFocusScroll: false,
+ /**
+ * If set to true htmx will include a cache-busting parameter in GET requests to avoid caching partial responses by the browser
+ * @type boolean
+ * @default false
+ */
getCacheBusterParam: false,
+ /**
+ * If set to true, htmx will use the View Transition API when swapping in new content.
+ * @type boolean
+ * @default false
+ */
globalViewTransitions: false,
+ /**
+ * htmx will format requests with these methods by encoding their parameters in the URL, not the request body
+ * @type {(HttpVerb)[]}
+ * @default ['get', 'delete']
+ */
methodsThatUseUrlParams: ['get', 'delete'],
+ /**
+ * If set to true, disables htmx-based requests to non-origin hosts.
+ * @type boolean
+ * @default false
+ */
selfRequestsOnly: true,
+ /**
+ * If set to true htmx will not update the title of the document when a title tag is found in new content
+ * @type boolean
+ * @default false
+ */
ignoreTitle: false,
+ /**
+ * Whether the target of a boosted element is scrolled into the viewport.
+ * @type boolean
+ * @default true
+ */
scrollIntoViewOnBoost: true,
+ /**
+ * The cache to store evaluated trigger specifications into.
+ * You may define a simple object to use a never-clearing cache, or implement your own system using a [proxy object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
+ * @type {Object|null}
+ * @default null
+ */
triggerSpecsCache: null,
+ /** @type boolean */
disableInheritance: false,
+ /** @type HtmxResponseHandlingConfig[] */
responseHandling: [
{ code: '204', swap: false },
{ code: '[23]..', swap: true },
{ code: '[45]..', swap: false, error: true }
- ]
+ ],
+ /**
+ * Whether to process OOB swaps on elements that are nested within the main response element.
+ * @type boolean
+ * @default true
+ */
+ allowNestedOobSwaps: true
},
- parseInterval,
- _: internalEval,
+ /** @type {typeof parseInterval} */
+ parseInterval: null,
+ /** @type {typeof internalEval} */
+ _: null,
version: '2.0a'
}
+ // Tsc madness part 2
+ htmx.onLoad = onLoadHelper
+ htmx.process = processNode
+ htmx.on = addEventListenerImpl
+ htmx.off = removeEventListenerImpl
+ htmx.trigger = triggerEvent
+ htmx.ajax = ajaxHelper
+ htmx.find = find
+ htmx.findAll = findAll
+ htmx.closest = closest
+ htmx.remove = removeElement
+ htmx.addClass = addClassToElement
+ htmx.removeClass = removeClassFromElement
+ htmx.toggleClass = toggleClassOnElement
+ htmx.takeClass = takeClassForElement
+ htmx.swap = swap
+ htmx.defineExtension = defineExtension
+ htmx.removeExtension = removeExtension
+ htmx.logAll = logAll
+ htmx.logNone = logNone
+ htmx.parseInterval = parseInterval
+ htmx._ = internalEval
- /** @type {import("./htmx").HtmxInternalApi} */
const internalAPI = {
addTriggerHandler,
bodyContains,
@@ -128,6 +347,16 @@ var htmx = (function() {
global ? 'gim' : 'im')
}
+ /**
+ * Parses an interval string consistent with the way htmx does. Useful for plugins that have timing-related attributes.
+ *
+ * Caution: Accepts an int followed by either **s** or **ms**. All other values use **parseFloat**
+ *
+ * @see https://htmx.org/api/#parseInterval
+ *
+ * @param {string} str timing string
+ * @returns {number|undefined}
+ */
function parseInterval(str) {
if (str == undefined) {
return undefined
@@ -147,23 +376,28 @@ var htmx = (function() {
}
/**
- * @param {Element} elt
+ * @param {Node} elt
* @param {string} name
* @returns {(string | null)}
*/
function getRawAttribute(elt, name) {
- return elt.getAttribute && elt.getAttribute(name)
+ return elt instanceof Element && elt.getAttribute(name)
}
+ /**
+ * @param {Element} elt
+ * @param {string} qualifiedName
+ * @returns {boolean}
+ */
// resolve with both hx and data-hx prefixes
function hasAttribute(elt, qualifiedName) {
- return elt.hasAttribute && (elt.hasAttribute(qualifiedName) ||
+ return !!elt.hasAttribute && (elt.hasAttribute(qualifiedName) ||
elt.hasAttribute('data-' + qualifiedName))
}
/**
*
- * @param {HTMLElement} elt
+ * @param {Node} elt
* @param {string} qualifiedName
* @returns {(string | null)}
*/
@@ -172,8 +406,8 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
- * @returns {HTMLElement | ShadowRoot | null}
+ * @param {Node} elt
+ * @returns {Node | null}
*/
function parentElt(elt) {
const parent = elt.parentElement
@@ -189,16 +423,18 @@ var htmx = (function() {
}
/**
- * @returns {Document | ShadowRoot}
+ * @param {Node} elt
+ * @param {boolean} global
+ * @returns {Node|Document}
*/
function getRootNode(elt, global) {
return elt.getRootNode ? elt.getRootNode({ composed: global }) : getDocument()
}
/**
- * @param {HTMLElement} elt
- * @param {(e:HTMLElement) => boolean} condition
- * @returns {HTMLElement | null}
+ * @param {Node} elt
+ * @param {(e:Node) => boolean} condition
+ * @returns {Node | null}
*/
function getClosestMatch(elt, condition) {
while (elt && !condition(elt)) {
@@ -208,6 +444,12 @@ var htmx = (function() {
return elt || null
}
+ /**
+ * @param {Element} initialElement
+ * @param {Element} ancestor
+ * @param {string} attributeName
+ * @returns {string|null}
+ */
function getAttributeValueWithDisinheritance(initialElement, ancestor, attributeName) {
const attributeValue = getAttributeValue(ancestor, attributeName)
const disinherit = getAttributeValue(ancestor, 'hx-disinherit')
@@ -228,14 +470,14 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {string} attributeName
* @returns {string | null}
*/
function getClosestAttributeValue(elt, attributeName) {
let closestAttr = null
getClosestMatch(elt, function(e) {
- return closestAttr = getAttributeValueWithDisinheritance(elt, e, attributeName)
+ return !!(closestAttr = getAttributeValueWithDisinheritance(elt, asElement(e), attributeName))
})
if (closestAttr !== 'unset') {
return closestAttr
@@ -243,15 +485,15 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Node} elt
* @param {string} selector
* @returns {boolean}
*/
function matches(elt, selector) {
// @ts-ignore: non-standard properties for browser compatibility
// noinspection JSUnresolvedVariable
- const matchesFunction = elt.matches || elt.matchesSelector || elt.msMatchesSelector || elt.mozMatchesSelector || elt.webkitMatchesSelector || elt.oMatchesSelector
- return matchesFunction && matchesFunction.call(elt, selector)
+ const matchesFunction = elt instanceof Element && (elt.matches || elt.matchesSelector || elt.msMatchesSelector || elt.mozMatchesSelector || elt.webkitMatchesSelector || elt.oMatchesSelector)
+ return !!matchesFunction && matchesFunction.call(elt, selector)
}
/**
@@ -269,9 +511,7 @@ var htmx = (function() {
}
/**
- *
* @param {string} resp
- * @param {number} depth
* @returns {Document}
*/
function parseHTML(resp) {
@@ -279,12 +519,20 @@ var htmx = (function() {
return parser.parseFromString(resp, 'text/html')
}
+ /**
+ * @param {DocumentFragment} fragment
+ * @param {Node} elt
+ */
function takeChildrenFor(fragment, elt) {
while (elt.childNodes.length > 0) {
fragment.append(elt.childNodes[0])
}
}
+ /**
+ * @param {HTMLScriptElement} script
+ * @returns {HTMLScriptElement}
+ */
function duplicateScript(script) {
const newScript = getDocument().createElement('script')
forEach(script.attributes, function(attr) {
@@ -298,16 +546,23 @@ var htmx = (function() {
return newScript
}
+ /**
+ * @param {HTMLScriptElement} script
+ * @returns {boolean}
+ */
function isJavaScriptScriptNode(script) {
return script.matches('script') && (script.type === 'text/javascript' || script.type === 'module' || script.type === '')
}
- // we have to make new copies of script tags that we are going to insert because
- // SOME browsers (not saying who, but it involves an element and an animal) don't
- // execute scripts created in <template> tags when they are inserted into the DOM
- // and all the others do lmao
+ /**
+ * we have to make new copies of script tags that we are going to insert because
+ * SOME browsers (not saying who, but it involves an element and an animal) don't
+ * execute scripts created in <template> tags when they are inserted into the DOM
+ * and all the others do lmao
+ * @param {DocumentFragment} fragment
+ */
function normalizeScriptTags(fragment) {
- Array.from(fragment.querySelectorAll('script')).forEach((script) => {
+ Array.from(fragment.querySelectorAll('script')).forEach(/** @param {HTMLScriptElement} script */ (script) => {
if (isJavaScriptScriptNode(script)) {
const newScript = duplicateScript(script)
const parent = script.parentNode
@@ -323,31 +578,37 @@ var htmx = (function() {
}
/**
- * @param {string} response HTML
- * @returns {DocumentFragment & {title: string}} a document fragment representing the response HTML, including
+ * @typedef {DocumentFragment & {title?: string}} DocumentFragmentWithTitle
+ * @description a document fragment representing the response HTML, including
* a `title` property for any title information found
*/
+
+ /**
+ * @param {string} response HTML
+ * @returns {DocumentFragmentWithTitle}
+ */
function makeFragment(response) {
// strip head tag to determine shape of response we are dealing with
const responseWithNoHead = response.replace(HEAD_TAG_REGEX, '')
const startTag = getStartTag(responseWithNoHead)
- let fragment = null
+ /** @type DocumentFragmentWithTitle */
+ let fragment
if (startTag === 'html') {
// if it is a full document, parse it and return the body
- fragment = new DocumentFragment()
+ fragment = /** @type DocumentFragmentWithTitle */ (new DocumentFragment())
const doc = parseHTML(response)
takeChildrenFor(fragment, doc.body)
fragment.title = doc.title
} else if (startTag === 'body') {
// parse body w/o wrapping in template
- fragment = new DocumentFragment()
+ fragment = /** @type DocumentFragmentWithTitle */ (new DocumentFragment())
const doc = parseHTML(responseWithNoHead)
takeChildrenFor(fragment, doc.body)
fragment.title = doc.title
} else {
// otherwise we have non-body partial HTML content, so wrap it in a template to maximize parsing flexibility
const doc = parseHTML('<body><template class="internal-htmx-wrapper">' + responseWithNoHead + '</template></body>')
- fragment = doc.querySelector('template').content
+ fragment = /** @type DocumentFragmentWithTitle */ (doc.querySelector('template').content)
// extract title into fragment for later processing
fragment.title = doc.title
@@ -392,7 +653,7 @@ var htmx = (function() {
* @returns {o is Function}
*/
function isFunction(o) {
- return isType(o, 'Function')
+ return typeof o === 'function'
}
/**
@@ -404,9 +665,50 @@ var htmx = (function() {
}
/**
+ * @typedef {Object} OnHandler
+ * @property {(keyof HTMLElementEventMap)|string} event
+ * @property {EventListener} listener
+ */
+
+ /**
+ * @typedef {Object} ListenerInfo
+ * @property {string} trigger
+ * @property {EventListener} listener
+ * @property {EventTarget} on
+ */
+
+ /**
+ * @typedef {Object} HtmxNodeInternalData
+ * Element data
+ * @property {number} [initHash]
+ * @property {boolean} [boosted]
+ * @property {OnHandler[]} [onHandlers]
+ * @property {number} [timeout]
+ * @property {ListenerInfo[]} [listenerInfos]
+ * @property {boolean} [cancelled]
+ * @property {boolean} [triggeredOnce]
+ * @property {number} [delayed]
+ * @property {number|null} [throttle]
+ * @property {string} [lastValue]
+ * @property {boolean} [loaded]
+ * @property {string} [path]
+ * @property {string} [verb]
+ * @property {boolean} [polling]
+ * @property {HTMLButtonElement|HTMLInputElement|null} [lastButtonClicked]
+ * @property {number} [requestCount]
+ * @property {XMLHttpRequest} [xhr]
+ * @property {(() => void)[]} [queuedRequests]
+ * @property {boolean} [abortable]
+ *
+ * Event data
+ * @property {HtmxTriggerSpecification} [triggerSpec]
+ * @property {EventTarget[]} [handledFor]
+ */
+
+ /**
* getInternalData retrieves "private" data stored by htmx within an element
- * @param {HTMLElement} elt
- * @returns {*}
+ * @param {EventTarget|Event} elt
+ * @returns {HtmxNodeInternalData}
*/
function getInternalData(elt) {
const dataProp = 'htmx-internal-data'
@@ -419,8 +721,9 @@ var htmx = (function() {
/**
* toArray converts an ArrayLike object into a real array.
- * @param {ArrayLike} arr
- * @returns {any[]}
+ * @template T
+ * @param {ArrayLike<T>} arr
+ * @returns {T[]}
*/
function toArray(arr) {
const returnArr = []
@@ -434,13 +737,8 @@ var htmx = (function() {
/**
* @template T
- * @callback forEachCallback
- * @param {T} value
- */
- /**
- * @template T
- * @param {{[index: number]: T, length: number}} arr
- * @param {forEachCallback<T>} func
+ * @param {T[]|NamedNodeMap|HTMLCollection|HTMLFormControlsCollection|ArrayLike<T>} arr
+ * @param {(T) => void} func
*/
function forEach(arr, func) {
if (arr) {
@@ -450,6 +748,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} el
+ * @returns {boolean}
+ */
function isScrolledIntoView(el) {
const rect = el.getBoundingClientRect()
const elemTop = rect.top
@@ -457,35 +759,52 @@ var htmx = (function() {
return elemTop < window.innerHeight && elemBottom >= 0
}
+ /**
+ * @param {Node} elt
+ * @returns {boolean}
+ */
function bodyContains(elt) {
// IE Fix
- if (elt.getRootNode && elt.getRootNode() instanceof window.ShadowRoot) {
- return getDocument().body.contains(elt.getRootNode().host)
+ const rootNode = elt.getRootNode && elt.getRootNode()
+ if (rootNode && rootNode instanceof window.ShadowRoot) {
+ return getDocument().body.contains(rootNode.host)
} else {
return getDocument().body.contains(elt)
}
}
+ /**
+ * @param {string} trigger
+ * @returns {string[]}
+ */
function splitOnWhitespace(trigger) {
return trigger.trim().split(/\s+/)
}
/**
- * mergeObjects takes all of the keys from
+ * mergeObjects takes all the keys from
* obj2 and duplicates them into obj1
- * @param {Object} obj1
- * @param {Object} obj2
- * @returns {Object}
+ * @template T1
+ * @template T2
+ * @param {T1} obj1
+ * @param {T2} obj2
+ * @returns {T1 & T2}
*/
function mergeObjects(obj1, obj2) {
for (const key in obj2) {
if (obj2.hasOwnProperty(key)) {
+ // @ts-ignore tsc doesn't seem to properly handle types merging
obj1[key] = obj2[key]
}
}
+ // @ts-ignore tsc doesn't seem to properly handle types merging
return obj1
}
+ /**
+ * @param {string} jString
+ * @returns {any|null}
+ */
function parseJSON(jString) {
try {
return JSON.parse(jString)
@@ -495,6 +814,9 @@ var htmx = (function() {
}
}
+ /**
+ * @returns {boolean}
+ */
function canAccessLocalStorage() {
const test = 'htmx:localStorageTest'
try {
@@ -506,6 +828,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {string} path
+ * @returns {string}
+ */
function normalizePath(path) {
try {
const url = new URL(path)
@@ -527,19 +853,36 @@ var htmx = (function() {
// public API
//= =========================================================================================
+ /**
+ * @param {string} str
+ * @returns {any}
+ */
function internalEval(str) {
return maybeEval(getDocument().body, function() {
return eval(str)
})
}
+ /**
+ * Adds a callback for the **htmx:load** event. This can be used to process new content, for example initializing the content with a javascript library
+ *
+ * @see https://htmx.org/api/#onLoad
+ *
+ * @param {(elt: Node) => void} callback the callback to call on newly loaded content
+ * @returns {EventListener}
+ */
function onLoadHelper(callback) {
- const value = htmx.on('htmx:load', function(evt) {
+ const value = htmx.on('htmx:load', /** @param {CustomEvent} evt */ function(evt) {
callback(evt.detail.elt)
})
return value
}
+ /**
+ * Log all htmx events, useful for debugging.
+ *
+ * @see https://htmx.org/api/#logAll
+ */
function logAll() {
htmx.logger = function(elt, event, data) {
if (console) {
@@ -552,26 +895,59 @@ var htmx = (function() {
htmx.logger = null
}
+ /**
+ * Finds an element matching the selector
+ *
+ * @see https://htmx.org/api/#find
+ *
+ * @param {ParentNode|string} eltOrSelector the root element to find the matching element in, inclusive | the selector to match
+ * @param {string} [selector] the selector to match
+ * @returns {Element|null}
+ */
function find(eltOrSelector, selector) {
- if (selector) {
+ if (typeof eltOrSelector !== 'string') {
return eltOrSelector.querySelector(selector)
} else {
return find(getDocument(), eltOrSelector)
}
}
+ /**
+ * Finds all elements matching the selector
+ *
+ * @see https://htmx.org/api/#findAll
+ *
+ * @param {ParentNode|string} eltOrSelector the root element to find the matching elements in, inclusive | the selector to match
+ * @param {string} [selector] the selector to match
+ * @returns {NodeListOf<Element>}
+ */
function findAll(eltOrSelector, selector) {
- if (selector) {
+ if (typeof eltOrSelector !== 'string') {
return eltOrSelector.querySelectorAll(selector)
} else {
return findAll(getDocument(), eltOrSelector)
}
}
+ /**
+ * @returns Window
+ */
+ function getWindow() {
+ return window
+ }
+
+ /**
+ * Removes an element from the DOM
+ *
+ * @see https://htmx.org/api/#remove
+ *
+ * @param {Node} elt
+ * @param {number} [delay]
+ */
function removeElement(elt, delay) {
elt = resolveTarget(elt)
if (delay) {
- setTimeout(function() {
+ getWindow().setTimeout(function() {
removeElement(elt)
elt = null
}, delay)
@@ -580,10 +956,54 @@ var htmx = (function() {
}
}
+ /**
+ * @param {any} elt
+ * @return {Element|null}
+ */
+ function asElement(elt) {
+ return elt instanceof Element ? elt : null
+ }
+
+ /**
+ * @param {any} elt
+ * @return {HTMLElement|null}
+ */
+ function asHtmlElement(elt) {
+ return elt instanceof HTMLElement ? elt : null
+ }
+
+ /**
+ * @param {any} value
+ * @return {string|null}
+ */
+ function asString(value) {
+ return typeof value === 'string' ? value : null
+ }
+
+ /**
+ * @param {EventTarget} elt
+ * @return {ParentNode|null}
+ */
+ function asParentNode(elt) {
+ return elt instanceof Element || elt instanceof Document || elt instanceof DocumentFragment ? elt : null
+ }
+
+ /**
+ * This method adds a class to the given element.
+ *
+ * @see https://htmx.org/api/#addClass
+ *
+ * @param {Element|string} elt the element to add the class to
+ * @param {string} clazz the class to add
+ * @param {number} [delay] the delay (in milliseconds) before class is added
+ */
function addClassToElement(elt, clazz, delay) {
- elt = resolveTarget(elt)
+ elt = asElement(resolveTarget(elt))
+ if (!elt) {
+ return
+ }
if (delay) {
- setTimeout(function() {
+ getWindow().setTimeout(function() {
addClassToElement(elt, clazz)
elt = null
}, delay)
@@ -592,10 +1012,22 @@ var htmx = (function() {
}
}
- function removeClassFromElement(elt, clazz, delay) {
- elt = resolveTarget(elt)
+ /**
+ * Removes a class from the given element
+ *
+ * @see https://htmx.org/api/#removeClass
+ *
+ * @param {Node|string} node element to remove the class from
+ * @param {string} clazz the class to remove
+ * @param {number} [delay] the delay (in milliseconds before class is removed)
+ */
+ function removeClassFromElement(node, clazz, delay) {
+ let elt = asElement(resolveTarget(node))
+ if (!elt) {
+ return
+ }
if (delay) {
- setTimeout(function() {
+ getWindow().setTimeout(function() {
removeClassFromElement(elt, clazz)
elt = null
}, delay)
@@ -610,22 +1042,47 @@ var htmx = (function() {
}
}
+ /**
+ * Toggles the given class on an element
+ *
+ * @see https://htmx.org/api/#toggleClass
+ *
+ * @param {Element|string} elt the element to toggle the class on
+ * @param {string} clazz the class to toggle
+ */
function toggleClassOnElement(elt, clazz) {
elt = resolveTarget(elt)
elt.classList.toggle(clazz)
}
+ /**
+ * Takes the given class from its siblings, so that among its siblings, only the given element will have the class.
+ *
+ * @see https://htmx.org/api/#takeClass
+ *
+ * @param {Node|string} elt the element that will take the class
+ * @param {string} clazz the class to take
+ */
function takeClassForElement(elt, clazz) {
elt = resolveTarget(elt)
forEach(elt.parentElement.children, function(child) {
removeClassFromElement(child, clazz)
})
- addClassToElement(elt, clazz)
+ addClassToElement(asElement(elt), clazz)
}
+ /**
+ * Finds the closest matching element in the given elements parentage, inclusive of the element
+ *
+ * @see https://htmx.org/api/#closest
+ *
+ * @param {Element|string} elt the element to find the selector from
+ * @param {string} selector the selector to find
+ * @returns {Element|null}
+ */
function closest(elt, selector) {
- elt = resolveTarget(elt)
- if (elt.closest) {
+ elt = asElement(resolveTarget(elt))
+ if (elt && elt.closest) {
return elt.closest(selector)
} else {
// TODO remove when IE goes away
@@ -634,19 +1091,33 @@ var htmx = (function() {
return elt
}
}
- while (elt = elt && parentElt(elt))
+ while (elt = elt && asElement(parentElt(elt)))
return null
}
}
+ /**
+ * @param {string} str
+ * @param {string} prefix
+ * @returns {boolean}
+ */
function startsWith(str, prefix) {
return str.substring(0, prefix.length) === prefix
}
+ /**
+ * @param {string} str
+ * @param {string} suffix
+ * @returns {boolean}
+ */
function endsWith(str, suffix) {
return str.substring(str.length - suffix.length) === suffix
}
+ /**
+ * @param {string} selector
+ * @returns {string}
+ */
function normalizeSelector(selector) {
const trimmedSelector = selector.trim()
if (startsWith(trimmedSelector, '<') && endsWith(trimmedSelector, '/>')) {
@@ -656,17 +1127,24 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Node|Element|Document|string} elt
+ * @param {string} selector
+ * @param {boolean=} global
+ * @returns {(Node|Window)[]}
+ */
function querySelectorAllExt(elt, selector, global) {
+ elt = resolveTarget(elt)
if (selector.indexOf('closest ') === 0) {
- return [closest(elt, normalizeSelector(selector.substr(8)))]
+ return [closest(asElement(elt), normalizeSelector(selector.substr(8)))]
} else if (selector.indexOf('find ') === 0) {
- return [find(elt, normalizeSelector(selector.substr(5)))]
+ return [find(asParentNode(elt), normalizeSelector(selector.substr(5)))]
} else if (selector === 'next') {
- return [elt.nextElementSibling]
+ return [asElement(elt).nextElementSibling]
} else if (selector.indexOf('next ') === 0) {
return [scanForwardQuery(elt, normalizeSelector(selector.substr(5)), !!global)]
} else if (selector === 'previous') {
- return [elt.previousElementSibling]
+ return [asElement(elt).previousElementSibling]
} else if (selector.indexOf('previous ') === 0) {
return [scanBackwardsQuery(elt, normalizeSelector(selector.substr(9)), !!global)]
} else if (selector === 'document') {
@@ -680,12 +1158,18 @@ var htmx = (function() {
} else if (selector.indexOf('global ') === 0) {
return querySelectorAllExt(elt, selector.slice(7), true)
} else {
- return getRootNode(elt, !!global).querySelectorAll(normalizeSelector(selector))
+ return toArray(asParentNode(getRootNode(elt, !!global)).querySelectorAll(normalizeSelector(selector)))
}
}
+ /**
+ * @param {Node} start
+ * @param {string} match
+ * @param {boolean} global
+ * @returns {Element}
+ */
var scanForwardQuery = function(start, match, global) {
- const results = getRootNode(start, global).querySelectorAll(match)
+ const results = asParentNode(getRootNode(start, global)).querySelectorAll(match)
for (let i = 0; i < results.length; i++) {
const elt = results[i]
if (elt.compareDocumentPosition(start) === Node.DOCUMENT_POSITION_PRECEDING) {
@@ -694,8 +1178,14 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Node} start
+ * @param {string} match
+ * @param {boolean} global
+ * @returns {Element}
+ */
var scanBackwardsQuery = function(start, match, global) {
- const results = getRootNode(start, global).querySelectorAll(match)
+ const results = asParentNode(getRootNode(start, global)).querySelectorAll(match)
for (let i = results.length - 1; i >= 0; i--) {
const elt = results[i]
if (elt.compareDocumentPosition(start) === Node.DOCUMENT_POSITION_FOLLOWING) {
@@ -704,8 +1194,13 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Node|string} eltOrSelector
+ * @param {string=} selector
+ * @returns {Node|Window}
+ */
function querySelectorExt(eltOrSelector, selector) {
- if (selector) {
+ if (typeof eltOrSelector !== 'string') {
return querySelectorAllExt(eltOrSelector, selector)[0]
} else {
return querySelectorAllExt(getDocument().body, eltOrSelector)[0]
@@ -713,36 +1208,62 @@ var htmx = (function() {
}
/**
- *
- * @param {string|Element} arg2
- * @param {Element} [context]
- * @returns {Element}
+ * @template {EventTarget} T
+ * @param {T|string} eltOrSelector
+ * @param {T} [context]
+ * @returns {Element|T|null}
*/
- function resolveTarget(arg2, context) {
- if (isType(arg2, 'String')) {
- return find(context || document, arg2)
+ function resolveTarget(eltOrSelector, context) {
+ if (typeof eltOrSelector === 'string') {
+ return find(asParentNode(context) || document, eltOrSelector)
} else {
- // @ts-ignore
- return arg2
+ return eltOrSelector
}
}
+ /**
+ * @typedef {keyof HTMLElementEventMap|string} AnyEventName
+ */
+
+ /**
+ * @typedef {Object} EventArgs
+ * @property {EventTarget} target
+ * @property {AnyEventName} event
+ * @property {EventListener} listener
+ */
+
+ /**
+ * @param {EventTarget|AnyEventName} arg1
+ * @param {AnyEventName|EventListener} arg2
+ * @param {EventListener} [arg3]
+ * @returns {EventArgs}
+ */
function processEventArgs(arg1, arg2, arg3) {
if (isFunction(arg2)) {
return {
target: getDocument().body,
- event: arg1,
+ event: asString(arg1),
listener: arg2
}
} else {
return {
target: resolveTarget(arg1),
- event: arg2,
+ event: asString(arg2),
listener: arg3
}
}
}
+ /**
+ * Adds an event listener to an element
+ *
+ * @see https://htmx.org/api/#on
+ *
+ * @param {EventTarget|string} arg1 the element to add the listener to | the event name to add the listener for
+ * @param {string|EventListener} arg2 the event name to add the listener for | the listener to add
+ * @param {EventListener} [arg3] the listener to add
+ * @returns {EventListener}
+ */
function addEventListenerImpl(arg1, arg2, arg3) {
ready(function() {
const eventArgs = processEventArgs(arg1, arg2, arg3)
@@ -752,6 +1273,16 @@ var htmx = (function() {
return b ? arg2 : arg3
}
+ /**
+ * Removes an event listener from an element
+ *
+ * @see https://htmx.org/api/#off
+ *
+ * @param {EventTarget|string} arg1 the element to remove the listener from | the event name to remove the listener from
+ * @param {string|EventListener} arg2 the event name to remove the listener from | the listener to remove
+ * @param {EventListener} [arg3] the listener to remove
+ * @returns {EventListener}
+ */
function removeEventListenerImpl(arg1, arg2, arg3) {
ready(function() {
const eventArgs = processEventArgs(arg1, arg2, arg3)
@@ -765,6 +1296,11 @@ var htmx = (function() {
//= ===================================================================
const DUMMY_ELT = getDocument().createElement('output') // dummy element for bad selectors
+ /**
+ * @param {Element} elt
+ * @param {string} attrName
+ * @returns {(Node|Window)[]}
+ */
function findAttributeTargets(elt, attrName) {
const attrTarget = getClosestAttributeValue(elt, attrName)
if (attrTarget) {
@@ -782,12 +1318,21 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @param {string} attribute
+ * @returns {Element|null}
+ */
function findThisElement(elt, attribute) {
- return getClosestMatch(elt, function(elt) {
- return getAttributeValue(elt, attribute) != null
- })
+ return asElement(getClosestMatch(elt, function(elt) {
+ return getAttributeValue(asElement(elt), attribute) != null
+ }))
}
+ /**
+ * @param {Element} elt
+ * @returns {Node|Window|null}
+ */
function getTarget(elt) {
const targetStr = getClosestAttributeValue(elt, 'hx-target')
if (targetStr) {
@@ -806,6 +1351,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {string} name
+ * @returns {boolean}
+ */
function shouldSettleAttribute(name) {
const attributesToSettle = htmx.config.attributesToSettle
for (let i = 0; i < attributesToSettle.length; i++) {
@@ -816,6 +1365,10 @@ var htmx = (function() {
return false
}
+ /**
+ * @param {Element} mergeTo
+ * @param {Element} mergeFrom
+ */
function cloneAttributes(mergeTo, mergeFrom) {
forEach(mergeTo.attributes, function(attr) {
if (!mergeFrom.hasAttribute(attr.name) && shouldSettleAttribute(attr.name)) {
@@ -829,6 +1382,11 @@ var htmx = (function() {
})
}
+ /**
+ * @param {HtmxSwapStyle} swapStyle
+ * @param {Element} target
+ * @returns {boolean}
+ */
function isInlineSwap(swapStyle, target) {
const extensions = getExtensions(target)
for (let i = 0; i < extensions.length; i++) {
@@ -845,14 +1403,14 @@ var htmx = (function() {
}
/**
- *
* @param {string} oobValue
* @param {Element} oobElement
- * @param {*} settleInfo
+ * @param {HtmxSettleInfo} settleInfo
* @returns
*/
function oobSwap(oobValue, oobElement, settleInfo) {
let selector = '#' + getRawAttribute(oobElement, 'id')
+ /** @type HtmxSwapStyle */
let swapStyle = 'outerHTML'
if (oobValue === 'true') {
// do nothing
@@ -873,7 +1431,7 @@ var htmx = (function() {
fragment = getDocument().createDocumentFragment()
fragment.appendChild(oobElementClone)
if (!isInlineSwap(swapStyle, target)) {
- fragment = oobElementClone // if this is not an inline swap, we use the content of the node, not the node itself
+ fragment = asParentNode(oobElementClone) // if this is not an inline swap, we use the content of the node, not the node itself
}
const beforeSwapDetails = { shouldSwap: true, target, fragment }
@@ -896,6 +1454,9 @@ var htmx = (function() {
return oobValue
}
+ /**
+ * @param {DocumentFragment} fragment
+ */
function handlePreservedElements(fragment) {
forEach(findAll(fragment, '[hx-preserve], [data-hx-preserve]'), function(preservedElt) {
const id = getAttributeValue(preservedElt, 'id')
@@ -906,14 +1467,20 @@ var htmx = (function() {
})
}
+ /**
+ * @param {Node} parentNode
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function handleAttributes(parentNode, fragment, settleInfo) {
forEach(fragment.querySelectorAll('[id]'), function(newNode) {
const id = getRawAttribute(newNode, 'id')
if (id && id.length > 0) {
const normalizedId = id.replace("'", "\\'")
const normalizedTag = newNode.tagName.replace(':', '\\:')
- const oldNode = parentNode.querySelector(normalizedTag + "[id='" + normalizedId + "']")
- if (oldNode && oldNode !== parentNode) {
+ const parentElt = asParentNode(parentNode)
+ const oldNode = parentElt && parentElt.querySelector(normalizedTag + "[id='" + normalizedId + "']")
+ if (oldNode && oldNode !== parentElt) {
const newAttributes = newNode.cloneNode()
cloneAttributes(newNode, oldNode)
settleInfo.tasks.push(function() {
@@ -924,28 +1491,41 @@ var htmx = (function() {
})
}
+ /**
+ * @param {Node} child
+ * @returns {HtmxSettleTask}
+ */
function makeAjaxLoadTask(child) {
return function() {
removeClassFromElement(child, htmx.config.addedClass)
- processNode(child)
- processFocus(child)
+ processNode(asElement(child))
+ processFocus(asParentNode(child))
triggerEvent(child, 'htmx:load')
}
}
+ /**
+ * @param {ParentNode} child
+ */
function processFocus(child) {
const autofocus = '[autofocus]'
- const autoFocusedElt = matches(child, autofocus) ? child : child.querySelector(autofocus)
+ const autoFocusedElt = asHtmlElement(matches(child, autofocus) ? child : child.querySelector(autofocus))
if (autoFocusedElt != null) {
autoFocusedElt.focus()
}
}
+ /**
+ * @param {Node} parentNode
+ * @param {Node} insertBefore
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function insertNodesBefore(parentNode, insertBefore, fragment, settleInfo) {
handleAttributes(parentNode, fragment, settleInfo)
while (fragment.childNodes.length > 0) {
const child = fragment.firstChild
- addClassToElement(child, htmx.config.addedClass)
+ addClassToElement(asElement(child), htmx.config.addedClass)
parentNode.insertBefore(child, insertBefore)
if (child.nodeType !== Node.TEXT_NODE && child.nodeType !== Node.COMMENT_NODE) {
settleInfo.tasks.push(makeAjaxLoadTask(child))
@@ -953,8 +1533,13 @@ var htmx = (function() {
}
}
- // based on https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0,
- // derived from Java's string hashcode implementation
+ /**
+ * based on https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0,
+ * derived from Java's string hashcode implementation
+ * @param {string} string
+ * @param {number} hash
+ * @returns {number}
+ */
function stringHash(string, hash) {
let char = 0
while (char < string.length) {
@@ -963,6 +1548,10 @@ var htmx = (function() {
return hash
}
+ /**
+ * @param {Element} elt
+ * @returns {number}
+ */
function attributeHash(elt) {
let hash = 0
// IE fix
@@ -978,17 +1567,23 @@ var htmx = (function() {
return hash
}
+ /**
+ * @param {EventTarget} elt
+ */
function deInitOnHandlers(elt) {
const internalData = getInternalData(elt)
if (internalData.onHandlers) {
for (let i = 0; i < internalData.onHandlers.length; i++) {
const handlerInfo = internalData.onHandlers[i]
- elt.removeEventListener(handlerInfo.event, handlerInfo.listener)
+ removeEventListenerImpl(elt, handlerInfo.event, handlerInfo.listener)
}
delete internalData.onHandlers
}
}
+ /**
+ * @param {Node} element
+ */
function deInitNode(element) {
const internalData = getInternalData(element)
if (internalData.timeout) {
@@ -997,7 +1592,7 @@ var htmx = (function() {
if (internalData.listenerInfos) {
forEach(internalData.listenerInfos, function(info) {
if (info.on) {
- info.on.removeEventListener(info.trigger, info.listener)
+ removeEventListenerImpl(info.on, info.trigger, info.listener)
}
})
}
@@ -1005,16 +1600,27 @@ var htmx = (function() {
forEach(Object.keys(internalData), function(key) { delete internalData[key] })
}
+ /**
+ * @param {Node} element
+ */
function cleanUpElement(element) {
triggerEvent(element, 'htmx:beforeCleanupElement')
deInitNode(element)
+ // @ts-ignore IE11 code
+ // noinspection JSUnresolvedReference
if (element.children) { // IE
+ // @ts-ignore
forEach(element.children, function(child) { cleanUpElement(child) })
}
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapOuterHTML(target, fragment, settleInfo) {
- // @type {HTMLElement}
+ /** @type {Node} */
let newElt
const eltBeforeNewContent = target.previousSibling
insertNodesBefore(parentElt(target), target, fragment, settleInfo)
@@ -1025,35 +1631,70 @@ var htmx = (function() {
}
settleInfo.elts = settleInfo.elts.filter(function(e) { return e !== target })
while (newElt && newElt !== target) {
- if (newElt.nodeType === Node.ELEMENT_NODE) {
+ if (newElt instanceof Element) {
settleInfo.elts.push(newElt)
+ newElt = newElt.nextElementSibling
+ } else {
+ newElt = null
}
- newElt = newElt.nextElementSibling
}
cleanUpElement(target)
- target.remove()
+ if (target instanceof Element) {
+ target.remove()
+ } else {
+ target.parentNode.removeChild(target)
+ }
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapAfterBegin(target, fragment, settleInfo) {
return insertNodesBefore(target, target.firstChild, fragment, settleInfo)
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapBeforeBegin(target, fragment, settleInfo) {
return insertNodesBefore(parentElt(target), target, fragment, settleInfo)
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapBeforeEnd(target, fragment, settleInfo) {
return insertNodesBefore(target, null, fragment, settleInfo)
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapAfterEnd(target, fragment, settleInfo) {
return insertNodesBefore(parentElt(target), target.nextSibling, fragment, settleInfo)
}
- function swapDelete(target, fragment, settleInfo) {
+
+ /**
+ * @param {Node} target
+ */
+ function swapDelete(target) {
cleanUpElement(target)
return parentElt(target).removeChild(target)
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapInnerHTML(target, fragment, settleInfo) {
const firstChild = target.firstChild
insertNodesBefore(target, firstChild, fragment, settleInfo)
@@ -1068,11 +1709,11 @@ var htmx = (function() {
}
/**
- * @param {string} swapStyle
- * @param {HTMLElement} elt
- * @param {HTMLElement} target
- * @param {Node} fragment
- * @param {{ tasks: (() => void)[]; }} settleInfo
+ * @param {HtmxSwapStyle} swapStyle
+ * @param {Element} elt
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
*/
function swapWithStyle(swapStyle, elt, target, fragment, settleInfo) {
switch (swapStyle) {
@@ -1094,7 +1735,7 @@ var htmx = (function() {
swapAfterEnd(target, fragment, settleInfo)
return
case 'delete':
- swapDelete(target, fragment, settleInfo)
+ swapDelete(target)
return
default:
var extensions = getExtensions(elt)
@@ -1126,37 +1767,31 @@ var htmx = (function() {
}
}
+ /**
+ * @param {DocumentFragment} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function findAndSwapOobElements(fragment, settleInfo) {
forEach(findAll(fragment, '[hx-swap-oob], [data-hx-swap-oob]'), function(oobElement) {
- const oobValue = getAttributeValue(oobElement, 'hx-swap-oob')
- if (oobValue != null) {
- oobSwap(oobValue, oobElement, settleInfo)
+ if (htmx.config.allowNestedOobSwaps || oobElement.parentElement === null) {
+ const oobValue = getAttributeValue(oobElement, 'hx-swap-oob')
+ if (oobValue != null) {
+ oobSwap(oobValue, oobElement, settleInfo)
+ }
+ } else {
+ oobElement.removeAttribute('hx-swap-oob')
+ oobElement.removeAttribute('data-hx-swap-oob')
}
})
}
/**
- * @callback swapCallback
- */
-
- /**
- * @typedef {Object} SwapOptions
- * @property {?string} select
- * @property {?string} selectOOB
- * @property {?*} eventInfo
- * @property {?*} anchor
- * @property {?HTMLElement} contextElement
- * @property {?swapCallback} afterSwapCallback
- * @property {?swapCallback} afterSettleCallback
- */
-
- /**
* Implements complete swapping pipeline, including: focus and selection preservation,
* title updates, scroll, OOB swapping, normal swapping and settling
* @param {string|Element} target
* @param {string} content
- * @param {import("./htmx").HtmxSwapSpecification} swapSpec
- * @param {SwapOptions} swapOptions
+ * @param {HtmxSwapSpecification} swapSpec
+ * @param {SwapOptions} [swapOptions]
*/
function swap(target, content, swapSpec, swapOptions) {
if (!swapOptions) {
@@ -1181,51 +1816,57 @@ var htmx = (function() {
}
const settleInfo = makeSettleInfo(target)
- let fragment = makeFragment(content)
-
- settleInfo.title = fragment.title
-
- // select-oob swaps
- if (swapOptions.selectOOB) {
- const oobSelectValues = swapOptions.selectOOB.split(',')
- for (let i = 0; i < oobSelectValues.length; i++) {
- const oobSelectValue = oobSelectValues[i].split(':', 2)
- let id = oobSelectValue[0].trim()
- if (id.indexOf('#') === 0) {
- id = id.substring(1)
- }
- const oobValue = oobSelectValue[1] || 'true'
- const oobElement = fragment.querySelector('#' + id)
- if (oobElement) {
- oobSwap(oobValue, oobElement, settleInfo)
+ // For text content swaps, don't parse the response as HTML, just insert it
+ if (swapSpec.swapStyle === 'textContent') {
+ target.textContent = content
+ // Otherwise, make the fragment and process it
+ } else {
+ let fragment = makeFragment(content)
+
+ settleInfo.title = fragment.title
+
+ // select-oob swaps
+ if (swapOptions.selectOOB) {
+ const oobSelectValues = swapOptions.selectOOB.split(',')
+ for (let i = 0; i < oobSelectValues.length; i++) {
+ const oobSelectValue = oobSelectValues[i].split(':', 2)
+ let id = oobSelectValue[0].trim()
+ if (id.indexOf('#') === 0) {
+ id = id.substring(1)
+ }
+ const oobValue = oobSelectValue[1] || 'true'
+ const oobElement = fragment.querySelector('#' + id)
+ if (oobElement) {
+ oobSwap(oobValue, oobElement, settleInfo)
+ }
}
}
- }
- // oob swaps
- findAndSwapOobElements(fragment, settleInfo)
- forEach(findAll(fragment, 'template'), function(template) {
- findAndSwapOobElements(template.content, settleInfo)
- if (template.content.childElementCount === 0) {
+ // oob swaps
+ findAndSwapOobElements(fragment, settleInfo)
+ forEach(findAll(fragment, 'template'), /** @param {HTMLTemplateElement} template */function(template) {
+ findAndSwapOobElements(template.content, settleInfo)
+ if (template.content.childElementCount === 0) {
// Avoid polluting the DOM with empty templates that were only used to encapsulate oob swap
- template.remove()
- }
- })
-
- // normal swap
- if (swapOptions.select) {
- const newFragment = getDocument().createDocumentFragment()
- forEach(fragment.querySelectorAll(swapOptions.select), function(node) {
- newFragment.appendChild(node)
+ template.remove()
+ }
})
- fragment = newFragment
+
+ // normal swap
+ if (swapOptions.select) {
+ const newFragment = getDocument().createDocumentFragment()
+ forEach(fragment.querySelectorAll(swapOptions.select), function(node) {
+ newFragment.appendChild(node)
+ })
+ fragment = newFragment
+ }
+ handlePreservedElements(fragment)
+ swapWithStyle(swapSpec.swapStyle, swapOptions.contextElement, target, fragment, settleInfo)
}
- handlePreservedElements(fragment)
- swapWithStyle(swapSpec.swapStyle, swapOptions.contextElement, target, fragment, settleInfo)
// apply saved focus and selection information to swapped content
if (selectionInfo.elt &&
- !bodyContains(selectionInfo.elt) &&
- getRawAttribute(selectionInfo.elt, 'id')) {
+ !bodyContains(selectionInfo.elt) &&
+ getRawAttribute(selectionInfo.elt, 'id')) {
const newActiveElt = document.getElementById(getRawAttribute(selectionInfo.elt, 'id'))
const focusOptions = { preventScroll: swapSpec.focusScroll !== undefined ? !swapSpec.focusScroll : !htmx.config.defaultFocusScroll }
if (newActiveElt) {
@@ -1271,7 +1912,7 @@ var htmx = (function() {
})
if (swapOptions.anchor) {
- const anchorTarget = resolveTarget('#' + swapOptions.anchor)
+ const anchorTarget = asElement(resolveTarget('#' + swapOptions.anchor))
if (anchorTarget) {
anchorTarget.scrollIntoView({ block: 'start', behavior: 'auto' })
}
@@ -1284,12 +1925,17 @@ var htmx = (function() {
}
if (swapSpec.settleDelay > 0) {
- setTimeout(doSettle, swapSpec.settleDelay)
+ getWindow().setTimeout(doSettle, swapSpec.settleDelay)
} else {
doSettle()
}
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @param {string} header
+ * @param {EventTarget} elt
+ */
function handleTriggerHeader(xhr, header, elt) {
const triggerBody = xhr.getResponseHeader(header)
if (triggerBody.indexOf('{') === 0) {
@@ -1319,7 +1965,13 @@ var htmx = (function() {
const NOT_WHITESPACE = /[^\s]/
const COMBINED_SELECTOR_START = /[{(]/
const COMBINED_SELECTOR_END = /[})]/
+
+ /**
+ * @param {string} str
+ * @returns {string[]}
+ */
function tokenizeString(str) {
+ /** @type string[] */
const tokens = []
let position = 0
while (position < str.length) {
@@ -1349,6 +2001,12 @@ var htmx = (function() {
return tokens
}
+ /**
+ * @param {string} token
+ * @param {string|null} last
+ * @param {string} paramName
+ * @returns {boolean}
+ */
function isPossibleRelativeReference(token, last, paramName) {
return SYMBOL_START.exec(token.charAt(0)) &&
token !== 'true' &&
@@ -1358,6 +2016,12 @@ var htmx = (function() {
last !== '.'
}
+ /**
+ * @param {EventTarget|string} elt
+ * @param {string[]} tokens
+ * @param {string} paramName
+ * @returns {ConditionalFunction|null}
+ */
function maybeGenerateConditional(elt, tokens, paramName) {
if (tokens[0] === '[') {
tokens.shift()
@@ -1366,6 +2030,7 @@ var htmx = (function() {
let last = null
while (tokens.length > 0) {
const token = tokens[0]
+ // @ts-ignore For some reason tsc doesn't understand the shift call, and thinks we're comparing the same value here, i.e. '[' vs ']'
if (token === ']') {
bracketCount--
if (bracketCount === 0) {
@@ -1399,6 +2064,11 @@ var htmx = (function() {
}
}
+ /**
+ * @param {string[]} tokens
+ * @param {RegExp} match
+ * @returns {string}
+ */
function consumeUntil(tokens, match) {
let result = ''
while (tokens.length > 0 && !match.test(tokens[0])) {
@@ -1407,6 +2077,10 @@ var htmx = (function() {
return result
}
+ /**
+ * @param {string[]} tokens
+ * @returns {string}
+ */
function consumeCSSSelector(tokens) {
let result
if (tokens.length > 0 && COMBINED_SELECTOR_START.test(tokens[0])) {
@@ -1422,12 +2096,13 @@ var htmx = (function() {
const INPUT_SELECTOR = 'input, textarea, select'
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {string} explicitTrigger
- * @param {cache} cache for trigger specs
- * @returns {import("./htmx").HtmxTriggerSpecification[]}
+ * @param {Object} cache for trigger specs
+ * @returns {HtmxTriggerSpecification[]}
*/
function parseAndCacheTrigger(elt, explicitTrigger, cache) {
+ /** @type HtmxTriggerSpecification[] */
const triggerSpecs = []
const tokens = tokenizeString(explicitTrigger)
do {
@@ -1436,6 +2111,7 @@ var htmx = (function() {
const trigger = consumeUntil(tokens, /[,\[\s]/)
if (trigger !== '') {
if (trigger === 'every') {
+ /** @type HtmxTriggerSpecification */
const every = { trigger: 'every' }
consumeUntil(tokens, NOT_WHITESPACE)
every.pollInterval = parseInterval(consumeUntil(tokens, /[,\[\s]/))
@@ -1446,6 +2122,7 @@ var htmx = (function() {
}
triggerSpecs.push(every)
} else {
+ /** @type HtmxTriggerSpecification */
const triggerSpec = { trigger }
var eventFilter = maybeGenerateConditional(elt, tokens, 'event')
if (eventFilter) {
@@ -1513,8 +2190,8 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
- * @returns {import("./htmx").HtmxTriggerSpecification[]}
+ * @param {Element} elt
+ * @returns {HtmxTriggerSpecification[]}
*/
function getTriggerSpecs(elt) {
const explicitTrigger = getAttributeValue(elt, 'hx-trigger')
@@ -1537,13 +2214,21 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ */
function cancelPolling(elt) {
getInternalData(elt).cancelled = true
}
+ /**
+ * @param {Element} elt
+ * @param {TriggerHandler} handler
+ * @param {HtmxTriggerSpecification} spec
+ */
function processPolling(elt, handler, spec) {
const nodeData = getInternalData(elt)
- nodeData.timeout = setTimeout(function() {
+ nodeData.timeout = getWindow().setTimeout(function() {
if (bodyContains(elt) && nodeData.cancelled !== true) {
if (!maybeFilterEvent(spec, elt, makeEvent('hx:poll:trigger', {
triggerSpec: spec,
@@ -1556,14 +2241,23 @@ var htmx = (function() {
}, spec.pollInterval)
}
+ /**
+ * @param {HTMLAnchorElement} elt
+ * @returns {boolean}
+ */
function isLocalLink(elt) {
return location.hostname === elt.hostname &&
getRawAttribute(elt, 'href') &&
getRawAttribute(elt, 'href').indexOf('#') !== 0
}
+ /**
+ * @param {Element} elt
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {HtmxTriggerSpecification[]} triggerSpecs
+ */
function boostElement(elt, nodeData, triggerSpecs) {
- if ((elt.tagName === 'A' && isLocalLink(elt) && (elt.target === '' || elt.target === '_self')) || elt.tagName === 'FORM') {
+ if ((elt instanceof HTMLAnchorElement && isLocalLink(elt) && (elt.target === '' || elt.target === '_self')) || elt.tagName === 'FORM') {
nodeData.boosted = true
let verb, path
if (elt.tagName === 'A') {
@@ -1577,7 +2271,8 @@ var htmx = (function() {
path = getRawAttribute(elt, 'action')
}
triggerSpecs.forEach(function(triggerSpec) {
- addEventListener(elt, function(elt, evt) {
+ addEventListener(elt, function(node, evt) {
+ const elt = asElement(node)
if (closest(elt, htmx.config.disableSelector)) {
cleanUpElement(elt)
return
@@ -1589,12 +2284,15 @@ var htmx = (function() {
}
/**
- *
* @param {Event} evt
- * @param {HTMLElement} elt
- * @returns
+ * @param {Node} node
+ * @returns {boolean}
*/
- function shouldCancel(evt, elt) {
+ function shouldCancel(evt, node) {
+ const elt = asElement(node)
+ if (!elt) {
+ return false
+ }
if (evt.type === 'submit' || evt.type === 'click') {
if (elt.tagName === 'FORM') {
return true
@@ -1602,7 +2300,7 @@ var htmx = (function() {
if (matches(elt, 'input[type="submit"], button') && closest(elt, 'form') !== null) {
return true
}
- if (elt.tagName === 'A' && elt.href &&
+ if (elt instanceof HTMLAnchorElement && elt.href &&
(elt.getAttribute('href') === '#' || elt.getAttribute('href').indexOf('#') !== 0)) {
return true
}
@@ -1610,25 +2308,47 @@ var htmx = (function() {
return false
}
+ /**
+ * @param {Node} elt
+ * @param {Event|MouseEvent|KeyboardEvent|TouchEvent} evt
+ * @returns {boolean}
+ */
function ignoreBoostedAnchorCtrlClick(elt, evt) {
- return getInternalData(elt).boosted && elt.tagName === 'A' && evt.type === 'click' && (evt.ctrlKey || evt.metaKey)
+ return getInternalData(elt).boosted && elt instanceof HTMLAnchorElement && evt.type === 'click' &&
+ // @ts-ignore this will resolve to undefined for events that don't define those properties, which is fine
+ (evt.ctrlKey || evt.metaKey)
}
+ /**
+ * @param {HtmxTriggerSpecification} triggerSpec
+ * @param {Node} elt
+ * @param {Event} evt
+ * @returns {boolean}
+ */
function maybeFilterEvent(triggerSpec, elt, evt) {
const eventFilter = triggerSpec.eventFilter
if (eventFilter) {
try {
return eventFilter.call(elt, evt) !== true
} catch (e) {
- triggerErrorEvent(getDocument().body, 'htmx:eventFilter:error', { error: e, source: eventFilter.source })
+ const source = eventFilter.source
+ triggerErrorEvent(getDocument().body, 'htmx:eventFilter:error', { error: e, source })
return true
}
}
return false
}
+ /**
+ * @param {Node} elt
+ * @param {TriggerHandler} handler
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {HtmxTriggerSpecification} triggerSpec
+ * @param {boolean} [explicitCancel]
+ */
function addEventListener(elt, handler, nodeData, triggerSpec, explicitCancel) {
const elementData = getInternalData(elt)
+ /** @type {(Node|Window)[]} */
let eltsToListenOn
if (triggerSpec.from) {
eltsToListenOn = querySelectorAllExt(elt, triggerSpec.from)
@@ -1639,10 +2359,12 @@ var htmx = (function() {
if (triggerSpec.changed) {
eltsToListenOn.forEach(function(eltToListenOn) {
const eltToListenOnData = getInternalData(eltToListenOn)
+ // @ts-ignore value will be undefined for non-input elements, which is fine
eltToListenOnData.lastValue = eltToListenOn.value
})
}
forEach(eltsToListenOn, function(eltToListenOn) {
+ /** @type EventListener */
const eventListener = function(evt) {
if (!bodyContains(elt)) {
eltToListenOn.removeEventListener(triggerSpec.trigger, eventListener)
@@ -1668,7 +2390,7 @@ var htmx = (function() {
evt.stopPropagation()
}
if (triggerSpec.target && evt.target) {
- if (!matches(evt.target, triggerSpec.target)) {
+ if (!matches(asElement(evt.target), triggerSpec.target)) {
return
}
}
@@ -1681,10 +2403,12 @@ var htmx = (function() {
}
if (triggerSpec.changed) {
const eltToListenOnData = getInternalData(eltToListenOn)
- if (eltToListenOnData.lastValue === eltToListenOn.value) {
+ // @ts-ignore value will be undefined for non-input elements, which is fine
+ const value = eltToListenOn.value
+ if (eltToListenOnData.lastValue === value) {
return
}
- eltToListenOnData.lastValue = eltToListenOn.value
+ eltToListenOnData.lastValue = value
}
if (elementData.delayed) {
clearTimeout(elementData.delayed)
@@ -1696,12 +2420,12 @@ var htmx = (function() {
if (triggerSpec.throttle > 0) {
if (!elementData.throttle) {
handler(elt, evt)
- elementData.throttle = setTimeout(function() {
+ elementData.throttle = getWindow().setTimeout(function() {
elementData.throttle = null
}, triggerSpec.throttle)
}
} else if (triggerSpec.delay > 0) {
- elementData.delayed = setTimeout(function() { handler(elt, evt) }, triggerSpec.delay)
+ elementData.delayed = getWindow().setTimeout(function() { handler(elt, evt) }, triggerSpec.delay)
} else {
triggerEvent(elt, 'htmx:trigger')
handler(elt, evt)
@@ -1739,6 +2463,9 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ */
function maybeReveal(elt) {
if (!hasAttribute(elt, 'data-hx-revealed') && isScrolledIntoView(elt)) {
elt.setAttribute('data-hx-revealed', 'true')
@@ -1747,13 +2474,19 @@ var htmx = (function() {
triggerEvent(elt, 'revealed')
} else {
// if the node isn't initialized, wait for it before triggering the request
- elt.addEventListener('htmx:afterProcessNode', function(evt) { triggerEvent(elt, 'revealed') }, { once: true })
+ elt.addEventListener('htmx:afterProcessNode', function() { triggerEvent(elt, 'revealed') }, { once: true })
}
}
}
//= ===================================================================
+ /**
+ * @param {Element} elt
+ * @param {TriggerHandler} handler
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {number} delay
+ */
function loadImmediately(elt, handler, nodeData, delay) {
const load = function() {
if (!nodeData.loaded) {
@@ -1762,12 +2495,18 @@ var htmx = (function() {
}
}
if (delay > 0) {
- setTimeout(load, delay)
+ getWindow().setTimeout(load, delay)
} else {
load()
}
}
+ /**
+ * @param {Element} elt
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {HtmxTriggerSpecification[]} triggerSpecs
+ * @returns {boolean}
+ */
function processVerbs(elt, nodeData, triggerSpecs) {
let explicitAction = false
forEach(VERBS, function(verb) {
@@ -1777,7 +2516,8 @@ var htmx = (function() {
nodeData.path = path
nodeData.verb = verb
triggerSpecs.forEach(function(triggerSpec) {
- addTriggerHandler(elt, triggerSpec, nodeData, function(elt, evt) {
+ addTriggerHandler(elt, triggerSpec, nodeData, function(node, evt) {
+ const elt = asElement(node)
if (closest(elt, htmx.config.disableSelector)) {
cleanUpElement(elt)
return
@@ -1790,11 +2530,23 @@ var htmx = (function() {
return explicitAction
}
+ /**
+ * @callback TriggerHandler
+ * @param {Node} elt
+ * @param {Event} [evt]
+ */
+
+ /**
+ * @param {Node} elt
+ * @param {HtmxTriggerSpecification} triggerSpec
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {TriggerHandler} handler
+ */
function addTriggerHandler(elt, triggerSpec, nodeData, handler) {
if (triggerSpec.trigger === 'revealed') {
initScrollHandler()
addEventListener(elt, handler, nodeData, triggerSpec)
- maybeReveal(elt)
+ maybeReveal(asElement(elt))
} else if (triggerSpec.trigger === 'intersect') {
const observerOptions = {}
if (triggerSpec.root) {
@@ -1812,21 +2564,29 @@ var htmx = (function() {
}
}
}, observerOptions)
- observer.observe(elt)
- addEventListener(elt, handler, nodeData, triggerSpec)
+ observer.observe(asElement(elt))
+ addEventListener(asElement(elt), handler, nodeData, triggerSpec)
} else if (triggerSpec.trigger === 'load') {
if (!maybeFilterEvent(triggerSpec, elt, makeEvent('load', { elt }))) {
- loadImmediately(elt, handler, nodeData, triggerSpec.delay)
+ loadImmediately(asElement(elt), handler, nodeData, triggerSpec.delay)
}
} else if (triggerSpec.pollInterval > 0) {
nodeData.polling = true
- processPolling(elt, handler, triggerSpec)
+ processPolling(asElement(elt), handler, triggerSpec)
} else {
addEventListener(elt, handler, nodeData, triggerSpec)
}
}
- function shouldProcessHxOn(elt) {
+ /**
+ * @param {Node} node
+ * @returns {boolean}
+ */
+ function shouldProcessHxOn(node) {
+ const elt = asElement(node)
+ if (!elt) {
+ return false
+ }
const attributes = elt.attributes
for (let j = 0; j < attributes.length; j++) {
const attrName = attributes[j].name
@@ -1838,22 +2598,31 @@ var htmx = (function() {
return false
}
+ /**
+ * @param {Node} elt
+ * @returns {Element[]}
+ */
function findHxOnWildcardElements(elt) {
let node = null
+ /** @type {Element[]} */
const elements = []
if (!(elt instanceof ShadowRoot)) {
if (shouldProcessHxOn(elt)) {
- elements.push(elt)
+ elements.push(asElement(elt))
}
const iter = document.evaluate('.//*[@*[ starts-with(name(), "hx-on:") or starts-with(name(), "data-hx-on:") or' +
' starts-with(name(), "hx-on-") or starts-with(name(), "data-hx-on-") ]]', elt)
- while (node = iter.iterateNext()) elements.push(node)
+ while (node = iter.iterateNext()) elements.push(asElement(node))
}
return elements
}
+ /**
+ * @param {Element} elt
+ * @returns {NodeListOf<Element>|[]}
+ */
function findElementsToProcess(elt) {
if (elt.querySelectorAll) {
const boostedSelector = ', [hx-boost] a, [data-hx-boost] a, a[hx-boost], a[data-hx-boost]'
@@ -1865,23 +2634,35 @@ var htmx = (function() {
}
}
- // Handle submit buttons/inputs that have the form attribute set
- // see https://developer.mozilla.org/docs/Web/HTML/Element/button
+ /**
+ * Handle submit buttons/inputs that have the form attribute set
+ * see https://developer.mozilla.org/docs/Web/HTML/Element/button
+ * @param {Event} evt
+ */
function maybeSetLastButtonClicked(evt) {
- const elt = closest(evt.target, "button, input[type='submit']")
+ const elt = /** @type {HTMLButtonElement|HTMLInputElement} */ (closest(asElement(evt.target), "button, input[type='submit']"))
const internalData = getRelatedFormData(evt)
if (internalData) {
internalData.lastButtonClicked = elt
}
- };
+ }
+
+ /**
+ * @param {Event} evt
+ */
function maybeUnsetLastButtonClicked(evt) {
const internalData = getRelatedFormData(evt)
if (internalData) {
internalData.lastButtonClicked = null
}
}
+
+ /**
+ * @param {Event} evt
+ * @returns {HtmxNodeInternalData|undefined}
+ */
function getRelatedFormData(evt) {
- const elt = closest(evt.target, "button, input[type='submit']")
+ const elt = closest(asElement(evt.target), "button, input[type='submit']")
if (!elt) {
return
}
@@ -1891,6 +2672,10 @@ var htmx = (function() {
}
return getInternalData(form)
}
+
+ /**
+ * @param {EventTarget} elt
+ */
function initButtonTracking(elt) {
// need to handle both click and focus in:
// focusin - in case someone tabs in to a button and hits the space bar
@@ -1900,28 +2685,20 @@ var htmx = (function() {
elt.addEventListener('focusout', maybeUnsetLastButtonClicked)
}
- function countCurlies(line) {
- const tokens = tokenizeString(line)
- let netCurlies = 0
- for (let i = 0; i < tokens.length; i++) {
- const token = tokens[i]
- if (token === '{') {
- netCurlies++
- } else if (token === '}') {
- netCurlies--
- }
- }
- return netCurlies
- }
-
+ /**
+ * @param {EventTarget} elt
+ * @param {string} eventName
+ * @param {string} code
+ */
function addHxOnEventHandler(elt, eventName, code) {
const nodeData = getInternalData(elt)
if (!Array.isArray(nodeData.onHandlers)) {
nodeData.onHandlers = []
}
let func
+ /** @type EventListener */
const listener = function(e) {
- return maybeEval(elt, function() {
+ maybeEval(elt, function() {
if (!func) {
func = new Function('event', code)
}
@@ -1932,6 +2709,9 @@ var htmx = (function() {
nodeData.onHandlers.push({ event: eventName, listener })
}
+ /**
+ * @param {Element} elt
+ */
function processHxOnWildcard(elt) {
// wipe any previous on handlers so that this function takes precedence
deInitOnHandlers(elt)
@@ -1959,6 +2739,9 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element|HTMLInputElement} elt
+ */
function initNode(elt) {
if (closest(elt, htmx.config.disableSelector)) {
cleanUpElement(elt)
@@ -1973,7 +2756,9 @@ var htmx = (function() {
triggerEvent(elt, 'htmx:beforeProcessNode')
+ // @ts-ignore value will be undefined for non-input elements, which is fine
if (elt.value) {
+ // @ts-ignore
nodeData.lastValue = elt.value
}
@@ -2002,6 +2787,13 @@ var htmx = (function() {
}
}
+ /**
+ * Processes new content, enabling htmx behavior. This can be useful if you have content that is added to the DOM outside of the normal htmx request cycle but still want htmx attributes to work.
+ *
+ * @see https://htmx.org/api/#process
+ *
+ * @param {Element|string} elt element to process
+ */
function processNode(elt) {
elt = resolveTarget(elt)
if (closest(elt, htmx.config.disableSelector)) {
@@ -2017,10 +2809,19 @@ var htmx = (function() {
// Event/Log Support
//= ===================================================================
+ /**
+ * @param {string} str
+ * @returns {string}
+ */
function kebabEventName(str) {
return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
}
+ /**
+ * @param {string} eventName
+ * @param {any} detail
+ * @returns {CustomEvent}
+ */
function makeEvent(eventName, detail) {
let evt
if (window.CustomEvent && typeof window.CustomEvent === 'function') {
@@ -2034,10 +2835,19 @@ var htmx = (function() {
return evt
}
+ /**
+ * @param {EventTarget|string} elt
+ * @param {string} eventName
+ * @param {any=} detail
+ */
function triggerErrorEvent(elt, eventName, detail) {
triggerEvent(elt, eventName, mergeObjects({ error: eventName }, detail))
}
+ /**
+ * @param {string} eventName
+ * @returns {boolean}
+ */
function ignoreEventForLogging(eventName) {
return eventName === 'htmx:afterProcessNode'
}
@@ -2047,8 +2857,8 @@ var htmx = (function() {
* executes the provided function using each of the active extensions. It should
* be called internally at every extendable execution point in htmx.
*
- * @param {HTMLElement} elt
- * @param {(extension:import("./htmx").HtmxExtension) => void} toDo
+ * @param {Element} elt
+ * @param {(extension:HtmxExtension) => void} toDo
* @returns void
*/
function withExtensions(elt, toDo) {
@@ -2069,6 +2879,16 @@ var htmx = (function() {
}
}
+ /**
+ * Triggers a given event on an element
+ *
+ * @see https://htmx.org/api/#trigger
+ *
+ * @param {EventTarget|string} elt the element to trigger the event on
+ * @param {string} eventName the name of the event to trigger
+ * @param {any=} detail details for the event
+ * @returns {boolean}
+ */
function triggerEvent(elt, eventName, detail) {
elt = resolveTarget(elt)
if (detail == null) {
@@ -2089,7 +2909,7 @@ var htmx = (function() {
const kebabedEvent = makeEvent(kebabName, event.detail)
eventResult = eventResult && elt.dispatchEvent(kebabedEvent)
}
- withExtensions(elt, function(extension) {
+ withExtensions(asElement(elt), function(extension) {
eventResult = eventResult && (extension.onEvent(eventName, event) !== false && !event.defaultPrevented)
})
return eventResult
@@ -2100,11 +2920,18 @@ var htmx = (function() {
//= ===================================================================
let currentPathForHistory = location.pathname + location.search
+ /**
+ * @returns {Element}
+ */
function getHistoryElement() {
const historyElt = getDocument().querySelector('[hx-history-elt],[data-hx-history-elt]')
return historyElt || getDocument().body
}
+ /**
+ * @param {string} url
+ * @param {Element} rootElt
+ */
function saveToHistoryCache(url, rootElt) {
if (!canAccessLocalStorage()) {
return
@@ -2131,6 +2958,7 @@ var htmx = (function() {
}
}
+ /** @type HtmxHistoryItem */
const newHistoryItem = { url, content: innerHTML, title, scroll }
triggerEvent(getDocument().body, 'htmx:historyItemCreated', { item: newHistoryItem, cache: historyCache })
@@ -2152,6 +2980,18 @@ var htmx = (function() {
}
}
+ /**
+ * @typedef {Object} HtmxHistoryItem
+ * @property {string} url
+ * @property {string} content
+ * @property {string} title
+ * @property {number} scroll
+ */
+
+ /**
+ * @param {string} url
+ * @returns {HtmxHistoryItem|null}
+ */
function getCachedHistory(url) {
if (!canAccessLocalStorage()) {
return null
@@ -2168,9 +3008,13 @@ var htmx = (function() {
return null
}
+ /**
+ * @param {Element} elt
+ * @returns {string}
+ */
function cleanInnerHtmlForHistory(elt) {
const className = htmx.config.requestClass
- const clone = elt.cloneNode(true)
+ const clone = /** @type Element */ (elt.cloneNode(true))
forEach(findAll(clone, '.' + className), function(child) {
removeClassFromElement(child, className)
})
@@ -2201,6 +3045,9 @@ var htmx = (function() {
if (htmx.config.historyEnabled) history.replaceState({ htmx: true }, getDocument().title, window.location.href)
}
+ /**
+ * @param {string} path
+ */
function pushUrlIntoHistory(path) {
// remove the cache buster parameter, if any
if (htmx.config.getCacheBusterParam) {
@@ -2215,17 +3062,26 @@ var htmx = (function() {
currentPathForHistory = path
}
+ /**
+ * @param {string} path
+ */
function replaceUrlInHistory(path) {
if (htmx.config.historyEnabled) history.replaceState({ htmx: true }, '', path)
currentPathForHistory = path
}
+ /**
+ * @param {HtmxSettleTask[]} tasks
+ */
function settleImmediately(tasks) {
forEach(tasks, function(task) {
- task.call()
+ task.call(undefined)
})
}
+ /**
+ * @param {string} path
+ */
function loadHistoryFromServer(path) {
const request = new XMLHttpRequest()
const details = { path, xhr: request }
@@ -2238,13 +3094,12 @@ var htmx = (function() {
if (this.status >= 200 && this.status < 400) {
triggerEvent(getDocument().body, 'htmx:historyCacheMissLoad', details)
const fragment = makeFragment(this.response)
- // @ts-ignore
+ /** @type ParentNode */
const content = fragment.querySelector('[hx-history-elt],[data-hx-history-elt]') || fragment
const historyElement = getHistoryElement()
const settleInfo = makeSettleInfo(historyElement)
handleTitle(fragment.title)
- // @ts-ignore
swapInnerHTML(historyElement, content, settleInfo)
settleImmediately(settleInfo.tasks)
currentPathForHistory = path
@@ -2256,6 +3111,9 @@ var htmx = (function() {
request.send()
}
+ /**
+ * @param {string} [path]
+ */
function restoreHistory(path) {
saveCurrentPageToHistory()
path = path || location.pathname + location.search
@@ -2267,14 +3125,15 @@ var htmx = (function() {
handleTitle(fragment.title)
swapInnerHTML(historyElement, fragment, settleInfo)
settleImmediately(settleInfo.tasks)
- setTimeout(function() {
+ getWindow().setTimeout(function() {
window.scrollTo(0, cached.scroll)
}, 0) // next 'tick', so browser has time to render layout
currentPathForHistory = path
triggerEvent(getDocument().body, 'htmx:historyRestore', { path, item: cached })
} else {
if (htmx.config.refreshOnHistoryMiss) {
- // @ts-ignore: optional parameter in reload() function throws error
+ // @ts-ignore: optional parameter in reload() function throws error
+ // noinspection JSUnresolvedReference
window.location.reload(true)
} else {
loadHistoryFromServer(path)
@@ -2282,8 +3141,12 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @returns {Element[]}
+ */
function addRequestIndicatorClasses(elt) {
- let indicators = findAttributeTargets(elt, 'hx-indicator')
+ let indicators = /** @type Element[] */ (findAttributeTargets(elt, 'hx-indicator'))
if (indicators == null) {
indicators = [elt]
}
@@ -2295,8 +3158,12 @@ var htmx = (function() {
return indicators
}
+ /**
+ * @param {Element} elt
+ * @returns {Element[]}
+ */
function disableElements(elt) {
- let disabledElts = findAttributeTargets(elt, 'hx-disabled-elt')
+ let disabledElts = /** @type Element[] */ (findAttributeTargets(elt, 'hx-disabled-elt'))
if (disabledElts == null) {
disabledElts = []
}
@@ -2308,6 +3175,10 @@ var htmx = (function() {
return disabledElts
}
+ /**
+ * @param {Element[]} indicators
+ * @param {Element[]} disabled
+ */
function removeRequestIndicators(indicators, disabled) {
forEach(indicators, function(ic) {
const internalData = getInternalData(ic)
@@ -2330,8 +3201,8 @@ var htmx = (function() {
//= ===================================================================
/**
- * @param {HTMLElement[]} processed
- * @param {HTMLElement} elt
+ * @param {Element[]} processed
+ * @param {Element} elt
* @returns {boolean}
*/
function haveSeenNode(processed, elt) {
@@ -2344,7 +3215,13 @@ var htmx = (function() {
return false
}
- function shouldInclude(elt) {
+ /**
+ * @param {Element} element
+ * @return {boolean}
+ */
+ function shouldInclude(element) {
+ // Cast to trick tsc, undefined values will work fine here
+ const elt = /** @type {HTMLInputElement} */ (element)
if (elt.name === '' || elt.name == null || elt.disabled || closest(elt, 'fieldset[disabled]')) {
return false
}
@@ -2359,7 +3236,7 @@ var htmx = (function() {
}
/** @param {string} name
- * @param {string|Array} value
+ * @param {string|Array|FormDataEntryValue} value
* @param {FormData} formData */
function addValueToFormData(name, value, formData) {
if (name != null && value != null) {
@@ -2388,10 +3265,10 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement[]} processed
+ * @param {Element[]} processed
* @param {FormData} formData
* @param {HtmxElementValidationError[]} errors
- * @param {HTMLElement|HTMLInputElement|HTMLFormElement} elt
+ * @param {Element|HTMLInputElement|HTMLSelectElement|HTMLFormElement} elt
* @param {boolean} validate
*/
function processInputValue(processed, formData, errors, elt, validate) {
@@ -2402,12 +3279,13 @@ var htmx = (function() {
}
if (shouldInclude(elt)) {
const name = getRawAttribute(elt, 'name')
+ // @ts-ignore value will be undefined for non-input elements, which is fine
let value = elt.value
- if (elt.multiple && elt.tagName === 'SELECT') {
- value = toArray(elt.querySelectorAll('option:checked')).map(function(e) { return e.value })
+ if (elt instanceof HTMLSelectElement && elt.multiple) {
+ value = toArray(elt.querySelectorAll('option:checked')).map(function(e) { return (/** @type HTMLOptionElement */(e)).value })
}
// include file inputs
- if (elt.files) {
+ if (elt instanceof HTMLInputElement && elt.files) {
value = toArray(elt.files)
}
addValueToFormData(name, value, formData)
@@ -2415,7 +3293,7 @@ var htmx = (function() {
validateElement(elt, errors)
}
}
- if (matches(elt, 'form')) {
+ if (elt instanceof HTMLFormElement) {
forEach(elt.elements, function(input) {
if (processed.indexOf(input) >= 0) {
// The input has already been processed and added to the values, but the FormData that will be
@@ -2436,15 +3314,12 @@ var htmx = (function() {
}
/**
- * @typedef {{elt: HTMLElement, message: string, validity: ValidityState}} HtmxElementValidationError
- */
-
- /**
*
- * @param {HTMLElement|HTMLObjectElement} element
+ * @param {Element} elt
* @param {HtmxElementValidationError[]} errors
*/
- function validateElement(element, errors) {
+ function validateElement(elt, errors) {
+ const element = /** @type {HTMLElement & ElementInternals} */ (elt)
if (element.willValidate) {
triggerEvent(element, 'htmx:validation:validate')
if (!element.checkValidity()) {
@@ -2471,12 +3346,12 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement|HTMLFormElement} elt
- * @param {string} verb
+ * @param {Element|HTMLFormElement} elt
+ * @param {HttpVerb} verb
* @returns {{errors: HtmxElementValidationError[], formData: FormData, values: Object}}
*/
function getInputValues(elt, verb) {
- /** @type HTMLElement[] */
+ /** @type Element[] */
const processed = []
const formData = new FormData()
const priorityFormData = new FormData()
@@ -2489,7 +3364,7 @@ var htmx = (function() {
// only validate when form is directly submitted and novalidate or formnovalidate are not set
// or if the element has an explicit hx-validate="true" on it
- let validate = (matches(elt, 'form') && elt.noValidate !== true) || getAttributeValue(elt, 'hx-validate') === 'true'
+ let validate = (elt instanceof HTMLFormElement && elt.noValidate !== true) || getAttributeValue(elt, 'hx-validate') === 'true'
if (internalData.lastButtonClicked) {
validate = validate && internalData.lastButtonClicked.formNoValidate !== true
}
@@ -2505,7 +3380,7 @@ var htmx = (function() {
// if a button or submit was clicked last, include its value
if (internalData.lastButtonClicked || elt.tagName === 'BUTTON' ||
(elt.tagName === 'INPUT' && getRawAttribute(elt, 'type') === 'submit')) {
- const button = internalData.lastButtonClicked || elt
+ const button = internalData.lastButtonClicked || (/** @type HTMLInputElement|HTMLButtonElement */(elt))
const name = getRawAttribute(button, 'name')
addValueToFormData(name, button.value, priorityFormData)
}
@@ -2513,10 +3388,10 @@ var htmx = (function() {
// include any explicit includes
const includes = findAttributeTargets(elt, 'hx-include')
forEach(includes, function(node) {
- processInputValue(processed, formData, errors, node, validate)
+ processInputValue(processed, formData, errors, asElement(node), validate)
// if a non-form is included, include any input values within it
if (!matches(node, 'form')) {
- forEach(node.querySelectorAll(INPUT_SELECTOR), function(descendant) {
+ forEach(asParentNode(node).querySelectorAll(INPUT_SELECTOR), function(descendant) {
processInputValue(processed, formData, errors, descendant, validate)
})
}
@@ -2564,12 +3439,13 @@ var htmx = (function() {
//= ===================================================================
/**
- * @param {HTMLElement} elt
- * @param {HTMLElement} target
+ * @param {Element} elt
+ * @param {Element} target
* @param {string} prompt
- * @returns {Object} // TODO: Define/Improve HtmxHeaderSpecification
+ * @returns {HtmxHeaderSpecification}
*/
function getHeaders(elt, target, prompt) {
+ /** @type HtmxHeaderSpecification */
const headers = {
'HX-Request': 'true',
'HX-Trigger': getRawAttribute(elt, 'id'),
@@ -2592,7 +3468,7 @@ var htmx = (function() {
* and returns a new object that only contains keys that are
* specified by the closest "hx-params" attribute
* @param {FormData} inputValues
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @returns {FormData}
*/
function filterValues(inputValues, elt) {
@@ -2623,19 +3499,22 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @return {boolean}
+ */
function isAnchorLink(elt) {
- return getRawAttribute(elt, 'href') && getRawAttribute(elt, 'href').indexOf('#') >= 0
+ return !!getRawAttribute(elt, 'href') && getRawAttribute(elt, 'href').indexOf('#') >= 0
}
/**
- *
- * @param {HTMLElement} elt
- * @param {import("./htmx").HtmxSwapStyle} swapInfoOverride
- * @returns {import("./htmx").HtmxSwapSpecification}
+ * @param {Element} elt
+ * @param {HtmxSwapStyle} [swapInfoOverride]
+ * @returns {HtmxSwapSpecification}
*/
function getSwapSpecification(elt, swapInfoOverride) {
const swapInfo = swapInfoOverride || getClosestAttributeValue(elt, 'hx-swap')
- /** @type import("./htmx").HtmxSwapSpecification */
+ /** @type HtmxSwapSpecification */
const swapSpec = {
swapStyle: getInternalData(elt).boosted ? 'innerHTML' : htmx.config.defaultSwapStyle,
swapDelay: htmx.config.defaultSwapDelay,
@@ -2662,6 +3541,7 @@ var htmx = (function() {
var splitSpec = scrollSpec.split(':')
const scrollVal = splitSpec.pop()
var selectorVal = splitSpec.length > 0 ? splitSpec.join(':') : null
+ // @ts-ignore
swapSpec.scroll = scrollVal
swapSpec.scrollTarget = selectorVal
} else if (value.indexOf('show:') === 0) {
@@ -2685,6 +3565,10 @@ var htmx = (function() {
return swapSpec
}
+ /**
+ * @param {Element} elt
+ * @return {boolean}
+ */
function usesFormData(elt) {
return getClosestAttributeValue(elt, 'hx-encoding') === 'multipart/form-data' ||
(matches(elt, 'form') && getRawAttribute(elt, 'enctype') === 'multipart/form-data')
@@ -2692,7 +3576,7 @@ var htmx = (function() {
/**
* @param {XMLHttpRequest} xhr
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {FormData} filteredParameters
* @returns {*|string|null}
*/
@@ -2717,19 +3601,23 @@ var htmx = (function() {
/**
*
* @param {Element} target
- * @returns {import("./htmx").HtmxSettleInfo}
+ * @returns {HtmxSettleInfo}
*/
function makeSettleInfo(target) {
return { tasks: [], elts: [target] }
}
+ /**
+ * @param {Element[]} content
+ * @param {HtmxSwapSpecification} swapSpec
+ */
function updateScrollState(content, swapSpec) {
const first = content[0]
const last = content[content.length - 1]
if (swapSpec.scroll) {
var target = null
if (swapSpec.scrollTarget) {
- target = querySelectorExt(first, swapSpec.scrollTarget)
+ target = asElement(querySelectorExt(first, swapSpec.scrollTarget))
}
if (swapSpec.scroll === 'top' && (first || target)) {
target = target || first
@@ -2747,21 +3635,23 @@ var htmx = (function() {
if (swapSpec.showTarget === 'window') {
targetStr = 'body'
}
- target = querySelectorExt(first, targetStr)
+ target = asElement(querySelectorExt(first, targetStr))
}
if (swapSpec.show === 'top' && (first || target)) {
target = target || first
+ // @ts-ignore For some reason tsc doesn't recognize "instant" as a valid option for now
target.scrollIntoView({ block: 'start', behavior: htmx.config.scrollBehavior })
}
if (swapSpec.show === 'bottom' && (last || target)) {
target = target || last
+ // @ts-ignore For some reason tsc doesn't recognize "instant" as a valid option for now
target.scrollIntoView({ block: 'end', behavior: htmx.config.scrollBehavior })
}
}
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {string} attr
* @param {boolean=} evalAsDefault
* @param {Object=} values
@@ -2805,9 +3695,15 @@ var htmx = (function() {
}
}
}
- return getValuesForElement(parentElt(elt), attr, evalAsDefault, values)
+ return getValuesForElement(asElement(parentElt(elt)), attr, evalAsDefault, values)
}
+ /**
+ * @param {EventTarget|string} elt
+ * @param {() => any} toEval
+ * @param {any=} defaultVal
+ * @returns {any}
+ */
function maybeEval(elt, toEval, defaultVal) {
if (htmx.config.allowEval) {
return toEval()
@@ -2818,7 +3714,7 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {*?} expressionVars
* @returns
*/
@@ -2827,7 +3723,7 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {*?} expressionVars
* @returns
*/
@@ -2836,13 +3732,18 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @returns {FormData}
*/
function getExpressionVars(elt) {
return formDataFromObject(mergeObjects(getHXVarsForElement(elt), getHXValsForElement(elt)))
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @param {string} header
+ * @param {string|null} headerValue
+ */
function safelySetHeaderValue(xhr, header, headerValue) {
if (headerValue !== null) {
try {
@@ -2855,6 +3756,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @return {string}
+ */
function getPathFromResponse(xhr) {
// NB: IE11 does not support this stuff
if (xhr.responseURL && typeof (URL) !== 'undefined') {
@@ -2867,14 +3772,29 @@ var htmx = (function() {
}
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @param {RegExp} regexp
+ * @return {boolean}
+ */
function hasHeader(xhr, regexp) {
return regexp.test(xhr.getAllResponseHeaders())
}
+ /**
+ * Issues an htmx-style AJAX request
+ *
+ * @see https://htmx.org/api/#ajax
+ *
+ * @param {HttpVerb} verb
+ * @param {string} path the URL path to make the AJAX
+ * @param {Element|string|HtmxAjaxHelperContext} context the element to target (defaults to the **body**) | a selector for the target | a context object that contains any of the following
+ * @return {Promise<void>} Promise that resolves immediately if no request is sent, or when the request is complete
+ */
function ajaxHelper(verb, path, context) {
- verb = verb.toLowerCase()
+ verb = (/** @type HttpVerb */(verb.toLowerCase()))
if (context) {
- if (context instanceof Element || isType(context, 'String')) {
+ if (context instanceof Element || typeof context === 'string') {
return issueAjaxRequest(verb, path, null, null, {
targetOverride: resolveTarget(context),
returnPromise: true
@@ -2898,6 +3818,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @return {Element[]}
+ */
function hierarchyForElt(elt) {
const arr = []
while (elt) {
@@ -2907,6 +3831,12 @@ var htmx = (function() {
return arr
}
+ /**
+ * @param {Element} elt
+ * @param {string} path
+ * @param {HtmxRequestConfig} requestConfig
+ * @return {boolean}
+ */
function verifyPath(elt, path, requestConfig) {
let sameHost
let url
@@ -2928,6 +3858,10 @@ var htmx = (function() {
return triggerEvent(elt, 'htmx:validateUrl', mergeObjects({ url, sameHost }, requestConfig))
}
+ /**
+ * @param {Object|FormData} obj
+ * @return {FormData}
+ */
function formDataFromObject(obj) {
if (obj instanceof FormData) return obj
const formData = new FormData()
@@ -2947,7 +3881,7 @@ var htmx = (function() {
/**
* @param {FormData} formData
- * @param {string|Symbol} name
+ * @param {string} name
* @param {Array} array
* @returns {Array}
*/
@@ -2995,7 +3929,7 @@ var htmx = (function() {
get: function(target, name) {
if (typeof name === 'symbol') {
// Forward symbol calls to the FormData itself directly
- return Reflect.get(...arguments)
+ return Reflect.get(target, name)
}
if (name === 'toJSON') {
// Support JSON.stringify call on proxy
@@ -3022,6 +3956,9 @@ var htmx = (function() {
}
},
set: function(target, name, value) {
+ if (typeof name !== 'string') {
+ return false
+ }
target.delete(name)
if (typeof value.forEach === 'function') {
value.forEach(function(v) { target.append(name, v) })
@@ -3031,7 +3968,9 @@ var htmx = (function() {
return true
},
deleteProperty: function(target, name) {
- target.delete(name)
+ if (typeof name === 'string') {
+ target.delete(name)
+ }
return true
},
// Support Object.assign call from proxy
@@ -3044,6 +3983,15 @@ var htmx = (function() {
})
}
+ /**
+ * @param {HttpVerb} verb
+ * @param {string} path
+ * @param {Element} elt
+ * @param {Event} event
+ * @param {HtmxAjaxEtc} [etc]
+ * @param {boolean} [confirmed]
+ * @return {Promise<void>}
+ */
function issueAjaxRequest(verb, path, elt, event, etc, confirmed) {
let resolve = null
let reject = null
@@ -3065,7 +4013,7 @@ var htmx = (function() {
maybeCall(resolve)
return promise
}
- const target = etc.targetOverride || getTarget(elt)
+ const target = etc.targetOverride || asElement(getTarget(elt))
if (target == null || target == DUMMY_ELT) {
triggerErrorEvent(elt, 'htmx:targetError', { target: getAttributeValue(elt, 'hx-target') })
maybeCall(reject)
@@ -3085,7 +4033,7 @@ var htmx = (function() {
if (buttonVerb != null) {
// ignore buttons with formmethod="dialog"
if (buttonVerb.toLowerCase() !== 'dialog') {
- verb = buttonVerb
+ verb = (/** @type HttpVerb */(buttonVerb))
}
}
}
@@ -3113,7 +4061,7 @@ var htmx = (function() {
if (selector === 'this') {
syncElt = findThisElement(elt, 'hx-sync')
} else {
- syncElt = querySelectorExt(elt, selector)
+ syncElt = asElement(querySelectorExt(elt, selector))
}
// default to the drop strategy
syncStrategy = (syncStrings[1] || 'drop').trim()
@@ -3233,12 +4181,19 @@ var htmx = (function() {
path = getDocument().location.href
}
+ /**
+ * @type {Object}
+ * @property {boolean} [credentials]
+ * @property {number} [timeout]
+ * @property {boolean} [noHeaders]
+ */
const requestAttrValues = getValuesForElement(elt, 'hx-request')
const eltIsBoosted = getInternalData(elt).boosted
let useUrlParams = htmx.config.methodsThatUseUrlParams.indexOf(verb) >= 0
+ /** @type HtmxRequestConfig */
const requestConfig = {
boosted: eltIsBoosted,
useUrlParams,
@@ -3302,7 +4257,7 @@ var htmx = (function() {
triggerErrorEvent(elt, 'htmx:invalidPath', requestConfig)
maybeCall(reject)
return promise
- };
+ }
xhr.open(verb.toUpperCase(), finalPath, true)
xhr.overrideMimeType('text/html')
@@ -3321,6 +4276,7 @@ var htmx = (function() {
}
}
+ /** @type {HtmxResponseInfo} */
const responseInfo = {
xhr,
target,
@@ -3331,6 +4287,7 @@ var htmx = (function() {
pathInfo: {
requestPath: path,
finalRequestPath: finalPath,
+ responsePath: null,
anchor
}
}
@@ -3411,6 +4368,17 @@ var htmx = (function() {
return promise
}
+ /**
+ * @typedef {Object} HtmxHistoryUpdate
+ * @property {string|null} [type]
+ * @property {string|null} [path]
+ */
+
+ /**
+ * @param {Element} elt
+ * @param {HtmxResponseInfo} responseInfo
+ * @return {HtmxHistoryUpdate}
+ */
function determineHistoryUpdates(elt, responseInfo) {
const xhr = responseInfo.xhr
@@ -3491,13 +4459,23 @@ var htmx = (function() {
}
}
+ /**
+ * @param {HtmxResponseHandlingConfig} responseHandlingConfig
+ * @param {number} status
+ * @return {boolean}
+ */
function codeMatches(responseHandlingConfig, status) {
var regExp = new RegExp(responseHandlingConfig.code)
- return regExp.test(status)
+ return regExp.test(status.toString(10))
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @return {HtmxResponseHandlingConfig}
+ */
function resolveResponseHandling(xhr) {
for (var i = 0; i < htmx.config.responseHandling.length; i++) {
+ /** @type HtmxResponseHandlingConfig */
var responseHandlingElement = htmx.config.responseHandling[i]
if (codeMatches(responseHandlingElement, xhr.status)) {
return responseHandlingElement
@@ -3509,6 +4487,9 @@ var htmx = (function() {
}
}
+ /**
+ * @param {string} title
+ */
function handleTitle(title) {
if (title) {
const titleElt = find('title')
@@ -3520,6 +4501,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @param {HtmxResponseInfo} responseInfo
+ */
function handleAjaxResponse(elt, responseInfo) {
const xhr = responseInfo.xhr
let target = responseInfo.target
@@ -3535,14 +4520,15 @@ var htmx = (function() {
if (hasHeader(xhr, /HX-Location:/i)) {
saveCurrentPageToHistory()
let redirectPath = xhr.getResponseHeader('HX-Location')
- var swapSpec
+ /** @type {HtmxAjaxHelperContext&{path:string}} */
+ var redirectSwapSpec
if (redirectPath.indexOf('{') === 0) {
- swapSpec = parseJSON(redirectPath)
+ redirectSwapSpec = parseJSON(redirectPath)
// what's the best way to throw an error if the user didn't include this
- redirectPath = swapSpec.path
- delete swapSpec.path
+ redirectPath = redirectSwapSpec.path
+ delete redirectSwapSpec.path
}
- ajaxHelper('GET', redirectPath, swapSpec).then(function() {
+ ajaxHelper('get', redirectPath, redirectSwapSpec).then(function() {
pushUrlIntoHistory(redirectPath)
})
return
@@ -3565,7 +4551,7 @@ var htmx = (function() {
if (xhr.getResponseHeader('HX-Retarget') === 'this') {
responseInfo.target = elt
} else {
- responseInfo.target = querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget'))
+ responseInfo.target = asElement(querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget')))
}
}
@@ -3577,7 +4563,7 @@ var htmx = (function() {
let ignoreTitle = htmx.config.ignoreTitle || responseHandling.ignoreTitle
let selectOverride = responseHandling.select
if (responseHandling.target) {
- responseInfo.target = querySelectorExt(elt, responseHandling.target)
+ responseInfo.target = asElement(querySelectorExt(elt, responseHandling.target))
}
var swapOverride = etc.swapOverride
if (swapOverride == null && responseHandling.swapOverride) {
@@ -3589,7 +4575,7 @@ var htmx = (function() {
if (xhr.getResponseHeader('HX-Retarget') === 'this') {
responseInfo.target = elt
} else {
- responseInfo.target = querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget'))
+ responseInfo.target = asElement(querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget')))
}
}
if (hasHeader(xhr, /HX-Reswap:/i)) {
@@ -3597,6 +4583,7 @@ var htmx = (function() {
}
var serverResponse = xhr.response
+ /** @type HtmxBeforeSwapDetails */
var beforeSwapDetails = mergeObjects({
shouldSwap,
serverResponse,
@@ -3713,7 +4700,9 @@ var htmx = (function() {
if (shouldTransition &&
triggerEvent(elt, 'htmx:beforeTransition', responseInfo) &&
- typeof Promise !== 'undefined' && document.startViewTransition) {
+ typeof Promise !== 'undefined' &&
+ // @ts-ignore experimental feature atm
+ document.startViewTransition) {
const settlePromise = new Promise(function(_resolve, _reject) {
settleResolve = _resolve
settleReject = _reject
@@ -3721,6 +4710,7 @@ var htmx = (function() {
// wrap the original doSwap() in a call to startViewTransition()
const innerDoSwap = doSwap
doSwap = function() {
+ // @ts-ignore experimental feature atm
document.startViewTransition(function() {
innerDoSwap()
return settlePromise
@@ -3729,7 +4719,7 @@ var htmx = (function() {
}
if (swapSpec.swapDelay > 0) {
- setTimeout(doSwap, swapSpec.swapDelay)
+ getWindow().setTimeout(doSwap, swapSpec.swapDelay)
} else {
doSwap()
}
@@ -3743,13 +4733,13 @@ var htmx = (function() {
// Extensions API
//= ===================================================================
- /** @type {Object<string, import("./htmx").HtmxExtension>} */
+ /** @type {Object<string, HtmxExtension>} */
const extensions = {}
/**
- * extensionBase defines the default functions for all extensions.
- * @returns {import("./htmx").HtmxExtension}
- */
+ * extensionBase defines the default functions for all extensions.
+ * @returns {HtmxExtension}
+ */
function extensionBase() {
return {
init: function(api) { return null },
@@ -3762,11 +4752,13 @@ var htmx = (function() {
}
/**
- * defineExtension initializes the extension and adds it to the htmx registry
- *
- * @param {string} name
- * @param {import("./htmx").HtmxExtension} extension
- */
+ * defineExtension initializes the extension and adds it to the htmx registry
+ *
+ * @see https://htmx.org/api/#defineExtension
+ *
+ * @param {string} name the extension name
+ * @param {HtmxExtension} extension the extension definition
+ */
function defineExtension(name, extension) {
if (extension.init) {
extension.init(internalAPI)
@@ -3775,21 +4767,24 @@ var htmx = (function() {
}
/**
- * removeExtension removes an extension from the htmx registry
- *
- * @param {string} name
- */
+ * removeExtension removes an extension from the htmx registry
+ *
+ * @see https://htmx.org/api/#removeExtension
+ *
+ * @param {string} name
+ */
function removeExtension(name) {
delete extensions[name]
}
/**
- * getExtensions searches up the DOM tree to return all extensions that can be applied to a given element
- *
- * @param {HTMLElement} elt
- * @param {import("./htmx").HtmxExtension[]=} extensionsToReturn
- * @param {import("./htmx").HtmxExtension[]=} extensionsToIgnore
- */
+ * getExtensions searches up the DOM tree to return all extensions that can be applied to a given element
+ *
+ * @param {Element} elt
+ * @param {HtmxExtension[]=} extensionsToReturn
+ * @param {string[]=} extensionsToIgnore
+ * @returns {HtmxExtension[]}
+ */
function getExtensions(elt, extensionsToReturn, extensionsToIgnore) {
if (extensionsToReturn == undefined) {
extensionsToReturn = []
@@ -3816,7 +4811,7 @@ var htmx = (function() {
}
})
}
- return getExtensions(parentElt(elt), extensionsToReturn, extensionsToIgnore)
+ return getExtensions(asElement(parentElt(elt)), extensionsToReturn, extensionsToIgnore)
}
//= ===================================================================
@@ -3828,12 +4823,12 @@ var htmx = (function() {
})
/**
- * Execute a function now if DOMContentLoaded has fired, otherwise listen for it.
- *
- * This function uses isReady because there is no realiable way to ask the browswer whether
- * the DOMContentLoaded event has already been fired; there's a gap between DOMContentLoaded
- * firing and readystate=complete.
- */
+ * Execute a function now if DOMContentLoaded has fired, otherwise listen for it.
+ *
+ * This function uses isReady because there is no reliable way to ask the browser whether
+ * the DOMContentLoaded event has already been fired; there's a gap between DOMContentLoaded
+ * firing and readystate=complete.
+ */
function ready(fn) {
// Checking readyState here is a failsafe in case the htmx script tag entered the DOM by
// some means other than the initial page load.
@@ -3856,9 +4851,9 @@ var htmx = (function() {
}
function getMetaConfig() {
+ /** @type HTMLMetaElement */
const element = getDocument().querySelector('meta[name="htmx-config"]')
if (element) {
- // @ts-ignore
return parseJSON(element.content)
} else {
return null
@@ -3906,7 +4901,7 @@ var htmx = (function() {
}
}
}
- setTimeout(function() {
+ getWindow().setTimeout(function() {
triggerEvent(body, 'htmx:load', {}) // give ready handlers a chance to load up before firing this event
body = null // kill reference for gc
}, 0)
@@ -3914,3 +4909,176 @@ var htmx = (function() {
return htmx
})()
+
+/** @typedef {'get'|'head'|'post'|'put'|'delete'|'connect'|'options'|'trace'|'patch'} HttpVerb */
+
+/**
+ * @typedef {Object} SwapOptions
+ * @property {string} [select]
+ * @property {string} [selectOOB]
+ * @property {*} [eventInfo]
+ * @property {string} [anchor]
+ * @property {Element} [contextElement]
+ * @property {swapCallback} [afterSwapCallback]
+ * @property {swapCallback} [afterSettleCallback]
+ */
+
+/**
+ * @callback swapCallback
+ */
+
+/**
+ * @typedef {'innerHTML' | 'outerHTML' | 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'delete' | 'none' | string} HtmxSwapStyle
+ */
+
+/**
+ * @typedef HtmxSwapSpecification
+ * @property {HtmxSwapStyle} swapStyle
+ * @property {number} swapDelay
+ * @property {number} settleDelay
+ * @property {boolean} [transition]
+ * @property {boolean} [ignoreTitle]
+ * @property {string} [head]
+ * @property {'top' | 'bottom'} [scroll]
+ * @property {string} [scrollTarget]
+ * @property {string} [show]
+ * @property {string} [showTarget]
+ * @property {boolean} [focusScroll]
+ */
+
+/**
+ * @typedef {((this:Node, evt:Event) => boolean) & {source: string}} ConditionalFunction
+ */
+
+/**
+ * @typedef {Object} HtmxTriggerSpecification
+ * @property {string} trigger
+ * @property {number} [pollInterval]
+ * @property {ConditionalFunction} [eventFilter]
+ * @property {boolean} [changed]
+ * @property {boolean} [once]
+ * @property {boolean} [consume]
+ * @property {number} [delay]
+ * @property {string} [from]
+ * @property {string} [target]
+ * @property {number} [throttle]
+ * @property {string} [queue]
+ * @property {string} [root]
+ * @property {string} [threshold]
+ */
+
+/**
+ * @typedef {{elt: Element, message: string, validity: ValidityState}} HtmxElementValidationError
+ */
+
+/**
+ * @typedef {Record<string, string>} HtmxHeaderSpecification
+ * @property {'true'} HX-Request
+ * @property {string|null} HX-Trigger
+ * @property {string|null} HX-Trigger-Name
+ * @property {string|null} HX-Target
+ * @property {string} HX-Current-URL
+ * @property {string} [HX-Prompt]
+ * @property {'true'} [HX-Boosted]
+ * @property {string} [Content-Type]
+ * @property {'true'} [HX-History-Restore-Request]
+ */
+
+/** @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]
+ */
+
+/**
+ * @typedef {Object} HtmxRequestConfig
+ * @property {boolean} boosted
+ * @property {boolean} useUrlParams
+ * @property {FormData} formData
+ * @property {Object} parameters formData proxy
+ * @property {FormData} unfilteredFormData
+ * @property {Object} unfilteredParameters unfilteredFormData proxy
+ * @property {HtmxHeaderSpecification} headers
+ * @property {Element} target
+ * @property {HttpVerb} verb
+ * @property {HtmxElementValidationError[]} errors
+ * @property {boolean} withCredentials
+ * @property {number} timeout
+ * @property {string} path
+ * @property {Event} triggeringEvent
+ */
+
+/**
+ * @typedef {Object} HtmxResponseInfo
+ * @property {XMLHttpRequest} xhr
+ * @property {Element} target
+ * @property {HtmxRequestConfig} requestConfig
+ * @property {HtmxAjaxEtc} etc
+ * @property {boolean} boosted
+ * @property {string} select
+ * @property {{requestPath: string, finalRequestPath: string, responsePath: string|null, anchor: string}} pathInfo
+ * @property {boolean} [failed]
+ * @property {boolean} [successful]
+ */
+
+/**
+ * @typedef {Object} HtmxAjaxEtc
+ * @property {boolean} [returnPromise]
+ * @property {HtmxAjaxHandler} [handler]
+ * @property {string} [select]
+ * @property {Element} [targetOverride]
+ * @property {HtmxSwapStyle} [swapOverride]
+ * @property {Record<string,string>} [headers]
+ * @property {Object|FormData} [values]
+ * @property {boolean} [credentials]
+ * @property {number} [timeout]
+ */
+
+/**
+ * @typedef {Object} HtmxResponseHandlingConfig
+ * @property {string} [code]
+ * @property {boolean} swap
+ * @property {boolean} [error]
+ * @property {boolean} [ignoreTitle]
+ * @property {string} [select]
+ * @property {string} [target]
+ * @property {string} [swapOverride]
+ * @property {string} [event]
+ */
+
+/**
+ * @typedef {HtmxResponseInfo & {shouldSwap: boolean, serverResponse: any, isError: boolean, ignoreTitle: boolean, selectOverride:string}} HtmxBeforeSwapDetails
+ */
+
+/**
+ * @callback HtmxAjaxHandler
+ * @param {Element} elt
+ * @param {HtmxResponseInfo} responseInfo
+ */
+
+/**
+ * @typedef {(() => void)} HtmxSettleTask
+ */
+
+/**
+ * @typedef {Object} HtmxSettleInfo
+ * @property {HtmxSettleTask[]} tasks
+ * @property {Element[]} elts
+ * @property {string} [title]
+ */
+
+/**
+ * @typedef {Object} HtmxExtension
+ * @see https://htmx.org/extensions/#defining
+ * @property {(api: any) => void} init
+ * @property {(name: string, event: Event|CustomEvent) => boolean} onEvent
+ * @property {(text: string, xhr: XMLHttpRequest, elt: Element) => string} transformResponse
+ * @property {(swapStyle: HtmxSwapStyle) => boolean} isInlineSwap
+ * @property {(swapStyle: HtmxSwapStyle, target: Element, fragment: Node, settleInfo: HtmxSettleInfo) => boolean} handleSwap
+ * @property {(xhr: XMLHttpRequest, parameters: FormData, elt: Element) => *|string|null} encodeParameters
+ */
diff --git a/www/static/test/attributes/hx-swap-oob.js b/www/static/test/attributes/hx-swap-oob.js
index 94caf6f4..7ad0094d 100644
--- a/www/static/test/attributes/hx-swap-oob.js
+++ b/www/static/test/attributes/hx-swap-oob.js
@@ -1,34 +1,70 @@
describe('hx-swap-oob attribute', function() {
+ const savedConfig = htmx.config
beforeEach(function() {
this.server = makeServer()
+ htmx.config = Object.assign({}, savedConfig)
clearWorkArea()
})
afterEach(function() {
this.server.restore()
+ htmx.config = savedConfig
clearWorkArea()
})
- it('handles basic response properly', function() {
- this.server.respondWith('GET', '/test', "Clicked<div id='d1' hx-swap-oob='true'>Swapped0</div>")
- var div = make('<div hx-get="/test">click me</div>')
- make('<div id="d1"></div>')
- div.click()
- this.server.respond()
- div.innerHTML.should.equal('Clicked')
- byId('d1').innerHTML.should.equal('Swapped0')
- })
+ // Repeat the same test to make sure it works with different configurations
+ for (const config of [{ allowNestedOobSwaps: true }, { allowNestedOobSwaps: false }]) {
+ it('handles basic response properly with config ' + JSON.stringify(config), function() {
+ Object.assign(htmx.config, config)
+ this.server.respondWith('GET', '/test', "Clicked<div id='d1' hx-swap-oob='true'>Swapped0</div>")
+ var div = make('<div hx-get="/test">click me</div>')
+ make('<div id="d1"></div>')
+ div.click()
+ this.server.respond()
+ div.innerHTML.should.equal('Clicked')
+ byId('d1').innerHTML.should.equal('Swapped0')
+ })
+ }
- it('handles more than one oob swap properly', function() {
- this.server.respondWith('GET', '/test', "Clicked<div id='d1' hx-swap-oob='true'>Swapped1</div><div id='d2' hx-swap-oob='true'>Swapped2</div>")
- var div = make('<div hx-get="/test">click me</div>')
- make('<div id="d1"></div>')
- make('<div id="d2"></div>')
- div.click()
- this.server.respond()
- div.innerHTML.should.equal('Clicked')
- byId('d1').innerHTML.should.equal('Swapped1')
- byId('d2').innerHTML.should.equal('Swapped2')
- })
+ for (const config of [{ allowNestedOobSwaps: true }, { allowNestedOobSwaps: false }]) {
+ it('oob swap works when the response has a body tag with config ' + JSON.stringify(config), function() {
+ Object.assign(htmx.config, config)
+ this.server.respondWith('GET', '/test', "<body>Clicked<div id='d2' hx-swap-oob='true'>Swapped0</div></body>")
+ var div = make('<div hx-get="/test">click me</div>')
+ make('<div id="d2"></div>')
+ div.click()
+ this.server.respond()
+ div.innerHTML.should.equal('Clicked')
+ byId('d2').innerHTML.should.equal('Swapped0')
+ })
+ }
+
+ for (const config of [{ allowNestedOobSwaps: true }, { allowNestedOobSwaps: false }]) {
+ it('oob swap works when the response has html and body tags with config ' + JSON.stringify(config), function() {
+ Object.assign(htmx.config, config)
+ this.server.respondWith('GET', '/test', "<html><body>Clicked<div id='d3' hx-swap-oob='true'>Swapped0</div></body></html>")
+ var div = make('<div hx-get="/test">click me</div>')
+ make('<div id="d3"></div>')
+ div.click()
+ this.server.respond()
+ div.innerHTML.should.equal('Clicked')
+ byId('d3').innerHTML.should.equal('Swapped0')
+ })
+ }
+
+ for (const config of [{ allowNestedOobSwaps: true }, { allowNestedOobSwaps: false }]) {
+ it('handles more than one oob swap properly with config ' + JSON.stringify(config), function() {
+ Object.assign(htmx.config, config)
+ this.server.respondWith('GET', '/test', "Clicked<div id='d1' hx-swap-oob='true'>Swapped1</div><div id='d2' hx-swap-oob='true'>Swapped2</div>")
+ var div = make('<div hx-get="/test">click me</div>')
+ make('<div id="d1"></div>')
+ make('<div id="d2"></div>')
+ div.click()
+ this.server.respond()
+ div.innerHTML.should.equal('Clicked')
+ byId('d1').innerHTML.should.equal('Swapped1')
+ byId('d2').innerHTML.should.equal('Swapped2')
+ })
+ }
it('handles no id match properly', function() {
this.server.respondWith('GET', '/test', "Clicked<div id='d1' hx-swap-oob='true'>Swapped2</div>")
@@ -70,7 +106,8 @@ describe('hx-swap-oob attribute', function() {
byId('d1').innerHTML.should.equal('Swapped5')
})
- it('oob swaps can be nested in content', function() {
+ it('oob swaps can be nested in content with config {"allowNestedOobSwaps": true}', function() {
+ htmx.config.allowNestedOobSwaps = true
this.server.respondWith('GET', '/test', "<div>Clicked<div id='d1' foo='bar' hx-swap-oob='innerHTML'>Swapped6</div></div>")
var div = make('<div hx-get="/test">click me</div>')
make('<div id="d1"></div>')
@@ -81,6 +118,17 @@ describe('hx-swap-oob attribute', function() {
byId('d1').innerHTML.should.equal('Swapped6')
})
+ it('oob swaps in nested content are ignored and stripped with config {"allowNestedOobSwaps": false}', function() {
+ htmx.config.allowNestedOobSwaps = false
+ this.server.respondWith('GET', '/test', '<div>Clicked<div hx-swap-oob="innerHTML:#d1">Swapped6.1</div></div>')
+ var div = make('<div hx-get="/test">click me</div>')
+ make('<div id="d1"></div>')
+ div.click()
+ this.server.respond()
+ byId('d1').innerHTML.should.equal('')
+ div.innerHTML.should.equal('<div>Clicked<div>Swapped6.1</div></div>')
+ })
+
it('oob swaps can use selectors to match up', function() {
this.server.respondWith('GET', '/test', "<div>Clicked<div hx-swap-oob='innerHTML:[oob-foo]'>Swapped7</div></div>")
var div = make('<div hx-get="/test">click me</div>')
@@ -128,9 +176,11 @@ describe('hx-swap-oob attribute', function() {
should.equal(byId('d1'), null)
})
- it('oob swap supports table row in fragment along other oob swap elements', function() {
- this.server.respondWith('GET', '/test',
- `Clicked
+ for (const config of [{ allowNestedOobSwaps: true }, { allowNestedOobSwaps: false }]) {
+ it('oob swap supports table row in fragment along other oob swap elements with config ' + JSON.stringify(config), function() {
+ Object.assign(htmx.config, config)
+ this.server.respondWith('GET', '/test',
+ `Clicked
<div hx-swap-oob="innerHTML" id="d1">Test</div>
<button type="button" hx-swap-oob="true" id="b2">Another button</button>
<template>
@@ -140,7 +190,7 @@ describe('hx-swap-oob attribute', function() {
<td hx-swap-oob="true" id="td1">hey</td>
</template>`)
- make(`<div id="d1">Bar</div>
+ make(`<div id="d1">Bar</div>
<button id="b2">Foo</button>
<table id="table">
<tbody id="tbody">
@@ -153,13 +203,14 @@ describe('hx-swap-oob attribute', function() {
</tbody>
</table>`)
- var btn = make('<button id="b1" type="button" hx-get="/test">Click me</button>')
- btn.click()
- this.server.respond()
- btn.innerText.should.equal('Clicked')
- byId('r1').innerHTML.should.equal('<td>bar</td>')
- byId('b2').innerHTML.should.equal('Another button')
- byId('d1').innerHTML.should.equal('Test')
- byId('td1').innerHTML.should.equal('hey')
- })
+ var btn = make('<button id="b1" type="button" hx-get="/test">Click me</button>')
+ btn.click()
+ this.server.respond()
+ btn.innerText.should.equal('Clicked')
+ byId('r1').innerHTML.should.equal('<td>bar</td>')
+ byId('b2').innerHTML.should.equal('Another button')
+ byId('d1').innerHTML.should.equal('Test')
+ byId('td1').innerHTML.should.equal('hey')
+ })
+ }
})
diff --git a/www/static/test/attributes/hx-swap.js b/www/static/test/attributes/hx-swap.js
index ac405d75..d3e9099b 100644
--- a/www/static/test/attributes/hx-swap.js
+++ b/www/static/test/attributes/hx-swap.js
@@ -22,6 +22,53 @@ describe('hx-swap attribute', function() {
a.innerHTML.should.equal('Clicked!')
})
+ it('swap textContent properly with HTML tags', function() {
+ this.server.respondWith('GET', '/test', '<a id="a1" hx-get="/test2">Click Me</a>')
+
+ var d1 = make('<div id="d1" hx-get="/test" hx-swap="textContent"></div>')
+ d1.click()
+ should.equal(byId('d1'), d1)
+ this.server.respond()
+ d1.textContent.should.equal('<a id="a1" hx-get="/test2">Click Me</a>')
+ should.equal(byId('a1'), null)
+ })
+
+ it('swap textContent properly with HTML tags and text', function() {
+ this.server.respondWith('GET', '/test', 'text content <a id="a1" hx-get="/test2">Click Me</a>')
+
+ var d1 = make('<div id="d1" hx-get="/test" hx-swap="textContent"></div>')
+ d1.click()
+ should.equal(byId('d1'), d1)
+ this.server.respond()
+ d1.textContent.should.equal('text content <a id="a1" hx-get="/test2">Click Me</a>')
+ should.equal(byId('a1'), null)
+ })
+
+ it('swap textContent ignores OOB swaps', function() {
+ this.server.respondWith('GET', '/test', '<span id="d2" hx-swap-oob="true">hi</span> <a id="a1" hx-get="/test2">Click Me</a>')
+
+ var d1 = make('<div id="d1" hx-get="/test" hx-swap="textContent"></div>')
+ var d2 = make('<div id="d2">some text</div>')
+ d1.click()
+ should.equal(byId('d1'), d1)
+ should.equal(byId('d2'), d2)
+ this.server.respond()
+ d1.textContent.should.equal('<span id="d2" hx-swap-oob="true">hi</span> <a id="a1" hx-get="/test2">Click Me</a>')
+ d2.outerHTML.should.equal('<div id="d2">some text</div>')
+ should.equal(byId('a1'), null)
+ })
+
+ it('swap textContent properly with text', function() {
+ this.server.respondWith('GET', '/test', 'plain text')
+
+ var div = make('<div id="d1" hx-get="/test" hx-swap="textContent"></div>')
+ div.click()
+ should.equal(byId('d1'), div)
+ this.server.respond()
+ div.textContent.should.equal('plain text')
+ should.equal(byId('a1'), null)
+ })
+
it('swap outerHTML properly', function() {
this.server.respondWith('GET', '/test', '<a id="a1" hx-get="/test2">Click Me</a>')
this.server.respondWith('GET', '/test2', 'Clicked!')
diff --git a/www/themes/htmx-theme/static/js/htmx.js b/www/themes/htmx-theme/static/js/htmx.js
index 7ba3237e..b5b4f24e 100644
--- a/www/themes/htmx-theme/static/js/htmx.js
+++ b/www/themes/htmx-theme/static/js/htmx.js
@@ -2,81 +2,300 @@ var htmx = (function() {
'use strict'
// Public API
- //* * @type {import("./htmx").HtmxApi} */
const htmx = {
+ // Tsc madness here, assigning the functions directly results in an invalid TypeScript output, but reassigning is fine
/* Event processing */
- onLoad: onLoadHelper,
- process: processNode,
- on: addEventListenerImpl,
- off: removeEventListenerImpl,
- trigger: triggerEvent,
- ajax: ajaxHelper,
+ /** @type {typeof onLoadHelper} */
+ onLoad: null,
+ /** @type {typeof processNode} */
+ process: null,
+ /** @type {typeof addEventListenerImpl} */
+ on: null,
+ /** @type {typeof removeEventListenerImpl} */
+ off: null,
+ /** @type {typeof triggerEvent} */
+ trigger: null,
+ /** @type {typeof ajaxHelper} */
+ ajax: null,
/* DOM querying helpers */
- find,
- findAll,
- closest,
+ /** @type {typeof find} */
+ find: null,
+ /** @type {typeof findAll} */
+ findAll: null,
+ /** @type {typeof closest} */
+ closest: null,
+ /**
+ * Returns the input values that would resolve for a given element via the htmx value resolution mechanism
+ *
+ * @see https://htmx.org/api/#values
+ *
+ * @param {Element} elt the element to resolve values on
+ * @param {HttpVerb} type the request type (e.g. **get** or **post**) non-GET's will include the enclosing form of the element. Defaults to **post**
+ * @returns {Object}
+ */
values: function(elt, type) {
const inputValues = getInputValues(elt, type || 'post')
return inputValues.values
},
/* DOM manipulation helpers */
- remove: removeElement,
- addClass: addClassToElement,
- removeClass: removeClassFromElement,
- toggleClass: toggleClassOnElement,
- takeClass: takeClassForElement,
- swap,
+ /** @type {typeof removeElement} */
+ remove: null,
+ /** @type {typeof addClassToElement} */
+ addClass: null,
+ /** @type {typeof removeClassFromElement} */
+ removeClass: null,
+ /** @type {typeof toggleClassOnElement} */
+ toggleClass: null,
+ /** @type {typeof takeClassForElement} */
+ takeClass: null,
+ /** @type {typeof swap} */
+ swap: null,
/* Extension entrypoints */
- defineExtension,
- removeExtension,
+ /** @type {typeof defineExtension} */
+ defineExtension: null,
+ /** @type {typeof removeExtension} */
+ removeExtension: null,
+ /* Debugging */
+ /** @type {typeof logAll} */
+ logAll: null,
+ /** @type {typeof logNone} */
+ logNone: null,
/* Debugging */
- logAll,
- logNone,
+ /**
+ * The logger htmx uses to log with
+ *
+ * @see https://htmx.org/api/#logger
+ */
logger: null,
+ /**
+ * A property holding the configuration htmx uses at runtime.
+ *
+ * Note that using a [meta tag](https://htmx.org/docs/#config) is the preferred mechanism for setting these properties.
+ *
+ * @see https://htmx.org/api/#config
+ */
config: {
+ /**
+ * Whether to use history.
+ * @type boolean
+ * @default true
+ */
historyEnabled: true,
+ /**
+ * The number of pages to keep in **localStorage** for history support.
+ * @type number
+ * @default 10
+ */
historyCacheSize: 10,
+ /**
+ * @type boolean
+ * @default false
+ */
refreshOnHistoryMiss: false,
+ /**
+ * The default swap style to use if **[hx-swap](https://htmx.org/attributes/hx-swap)** is omitted.
+ * @type HtmxSwapStyle
+ * @default 'innerHTML'
+ */
defaultSwapStyle: 'innerHTML',
+ /**
+ * The default delay between receiving a response from the server and doing the swap.
+ * @type number
+ * @default 0
+ */
defaultSwapDelay: 0,
+ /**
+ * The default delay between completing the content swap and settling attributes.
+ * @type number
+ * @default 20
+ */
defaultSettleDelay: 20,
+ /**
+ * If true, htmx will inject a small amount of CSS into the page to make indicators invisible unless the **htmx-indicator** class is present.
+ * @type boolean
+ * @default true
+ */
includeIndicatorStyles: true,
+ /**
+ * The class to place on indicators when a request is in flight.
+ * @type string
+ * @default 'htmx-indicator'
+ */
indicatorClass: 'htmx-indicator',
+ /**
+ * The class to place on triggering elements when a request is in flight.
+ * @type string
+ * @default 'htmx-request'
+ */
requestClass: 'htmx-request',
+ /**
+ * The class to temporarily place on elements that htmx has added to the DOM.
+ * @type string
+ * @default 'htmx-added'
+ */
addedClass: 'htmx-added',
+ /**
+ * The class to place on target elements when htmx is in the settling phase.
+ * @type string
+ * @default 'htmx-settling'
+ */
settlingClass: 'htmx-settling',
+ /**
+ * The class to place on target elements when htmx is in the swapping phase.
+ * @type string
+ * @default 'htmx-swapping'
+ */
swappingClass: 'htmx-swapping',
+ /**
+ * Allows the use of eval-like functionality in htmx, to enable **hx-vars**, trigger conditions & script tag evaluation. Can be set to **false** for CSP compatibility.
+ * @type boolean
+ * @default true
+ */
allowEval: true,
+ /**
+ * If set to false, disables the interpretation of script tags.
+ * @type boolean
+ * @default true
+ */
allowScriptTags: true,
+ /**
+ * If set, the nonce will be added to inline scripts.
+ * @type string
+ * @default ''
+ */
inlineScriptNonce: '',
+ /**
+ * The attributes to settle during the settling phase.
+ * @type string[]
+ * @default ['class', 'style', 'width', 'height']
+ */
attributesToSettle: ['class', 'style', 'width', 'height'],
+ /**
+ * Allow cross-site Access-Control requests using credentials such as cookies, authorization headers or TLS client certificates.
+ * @type boolean
+ * @default false
+ */
withCredentials: false,
+ /**
+ * @type number
+ * @default 0
+ */
timeout: 0,
+ /**
+ * The default implementation of **getWebSocketReconnectDelay** for reconnecting after unexpected connection loss by the event code **Abnormal Closure**, **Service Restart** or **Try Again Later**.
+ * @type {'full-jitter' | ((retryCount:number) => number)}
+ * @default "full-jitter"
+ */
wsReconnectDelay: 'full-jitter',
+ /**
+ * The type of binary data being received over the WebSocket connection
+ * @type BinaryType
+ * @default 'blob'
+ */
wsBinaryType: 'blob',
+ /**
+ * @type string
+ * @default '[hx-disable], [data-hx-disable]'
+ */
disableSelector: '[hx-disable], [data-hx-disable]',
+ /**
+ * @type {'auto' | 'instant' | 'smooth'}
+ * @default 'smooth'
+ */
scrollBehavior: 'instant',
+ /**
+ * If the focused element should be scrolled into view.
+ * @type boolean
+ * @default false
+ */
defaultFocusScroll: false,
+ /**
+ * If set to true htmx will include a cache-busting parameter in GET requests to avoid caching partial responses by the browser
+ * @type boolean
+ * @default false
+ */
getCacheBusterParam: false,
+ /**
+ * If set to true, htmx will use the View Transition API when swapping in new content.
+ * @type boolean
+ * @default false
+ */
globalViewTransitions: false,
+ /**
+ * htmx will format requests with these methods by encoding their parameters in the URL, not the request body
+ * @type {(HttpVerb)[]}
+ * @default ['get', 'delete']
+ */
methodsThatUseUrlParams: ['get', 'delete'],
+ /**
+ * If set to true, disables htmx-based requests to non-origin hosts.
+ * @type boolean
+ * @default false
+ */
selfRequestsOnly: true,
+ /**
+ * If set to true htmx will not update the title of the document when a title tag is found in new content
+ * @type boolean
+ * @default false
+ */
ignoreTitle: false,
+ /**
+ * Whether the target of a boosted element is scrolled into the viewport.
+ * @type boolean
+ * @default true
+ */
scrollIntoViewOnBoost: true,
+ /**
+ * The cache to store evaluated trigger specifications into.
+ * You may define a simple object to use a never-clearing cache, or implement your own system using a [proxy object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
+ * @type {Object|null}
+ * @default null
+ */
triggerSpecsCache: null,
+ /** @type boolean */
disableInheritance: false,
+ /** @type HtmxResponseHandlingConfig[] */
responseHandling: [
{ code: '204', swap: false },
{ code: '[23]..', swap: true },
{ code: '[45]..', swap: false, error: true }
- ]
+ ],
+ /**
+ * Whether to process OOB swaps on elements that are nested within the main response element.
+ * @type boolean
+ * @default true
+ */
+ allowNestedOobSwaps: true
},
- parseInterval,
- _: internalEval,
+ /** @type {typeof parseInterval} */
+ parseInterval: null,
+ /** @type {typeof internalEval} */
+ _: null,
version: '2.0a'
}
+ // Tsc madness part 2
+ htmx.onLoad = onLoadHelper
+ htmx.process = processNode
+ htmx.on = addEventListenerImpl
+ htmx.off = removeEventListenerImpl
+ htmx.trigger = triggerEvent
+ htmx.ajax = ajaxHelper
+ htmx.find = find
+ htmx.findAll = findAll
+ htmx.closest = closest
+ htmx.remove = removeElement
+ htmx.addClass = addClassToElement
+ htmx.removeClass = removeClassFromElement
+ htmx.toggleClass = toggleClassOnElement
+ htmx.takeClass = takeClassForElement
+ htmx.swap = swap
+ htmx.defineExtension = defineExtension
+ htmx.removeExtension = removeExtension
+ htmx.logAll = logAll
+ htmx.logNone = logNone
+ htmx.parseInterval = parseInterval
+ htmx._ = internalEval
- /** @type {import("./htmx").HtmxInternalApi} */
const internalAPI = {
addTriggerHandler,
bodyContains,
@@ -128,6 +347,16 @@ var htmx = (function() {
global ? 'gim' : 'im')
}
+ /**
+ * Parses an interval string consistent with the way htmx does. Useful for plugins that have timing-related attributes.
+ *
+ * Caution: Accepts an int followed by either **s** or **ms**. All other values use **parseFloat**
+ *
+ * @see https://htmx.org/api/#parseInterval
+ *
+ * @param {string} str timing string
+ * @returns {number|undefined}
+ */
function parseInterval(str) {
if (str == undefined) {
return undefined
@@ -147,23 +376,28 @@ var htmx = (function() {
}
/**
- * @param {Element} elt
+ * @param {Node} elt
* @param {string} name
* @returns {(string | null)}
*/
function getRawAttribute(elt, name) {
- return elt.getAttribute && elt.getAttribute(name)
+ return elt instanceof Element && elt.getAttribute(name)
}
+ /**
+ * @param {Element} elt
+ * @param {string} qualifiedName
+ * @returns {boolean}
+ */
// resolve with both hx and data-hx prefixes
function hasAttribute(elt, qualifiedName) {
- return elt.hasAttribute && (elt.hasAttribute(qualifiedName) ||
+ return !!elt.hasAttribute && (elt.hasAttribute(qualifiedName) ||
elt.hasAttribute('data-' + qualifiedName))
}
/**
*
- * @param {HTMLElement} elt
+ * @param {Node} elt
* @param {string} qualifiedName
* @returns {(string | null)}
*/
@@ -172,8 +406,8 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
- * @returns {HTMLElement | ShadowRoot | null}
+ * @param {Node} elt
+ * @returns {Node | null}
*/
function parentElt(elt) {
const parent = elt.parentElement
@@ -189,16 +423,18 @@ var htmx = (function() {
}
/**
- * @returns {Document | ShadowRoot}
+ * @param {Node} elt
+ * @param {boolean} global
+ * @returns {Node|Document}
*/
function getRootNode(elt, global) {
return elt.getRootNode ? elt.getRootNode({ composed: global }) : getDocument()
}
/**
- * @param {HTMLElement} elt
- * @param {(e:HTMLElement) => boolean} condition
- * @returns {HTMLElement | null}
+ * @param {Node} elt
+ * @param {(e:Node) => boolean} condition
+ * @returns {Node | null}
*/
function getClosestMatch(elt, condition) {
while (elt && !condition(elt)) {
@@ -208,6 +444,12 @@ var htmx = (function() {
return elt || null
}
+ /**
+ * @param {Element} initialElement
+ * @param {Element} ancestor
+ * @param {string} attributeName
+ * @returns {string|null}
+ */
function getAttributeValueWithDisinheritance(initialElement, ancestor, attributeName) {
const attributeValue = getAttributeValue(ancestor, attributeName)
const disinherit = getAttributeValue(ancestor, 'hx-disinherit')
@@ -228,14 +470,14 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {string} attributeName
* @returns {string | null}
*/
function getClosestAttributeValue(elt, attributeName) {
let closestAttr = null
getClosestMatch(elt, function(e) {
- return closestAttr = getAttributeValueWithDisinheritance(elt, e, attributeName)
+ return !!(closestAttr = getAttributeValueWithDisinheritance(elt, asElement(e), attributeName))
})
if (closestAttr !== 'unset') {
return closestAttr
@@ -243,15 +485,15 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Node} elt
* @param {string} selector
* @returns {boolean}
*/
function matches(elt, selector) {
// @ts-ignore: non-standard properties for browser compatibility
// noinspection JSUnresolvedVariable
- const matchesFunction = elt.matches || elt.matchesSelector || elt.msMatchesSelector || elt.mozMatchesSelector || elt.webkitMatchesSelector || elt.oMatchesSelector
- return matchesFunction && matchesFunction.call(elt, selector)
+ const matchesFunction = elt instanceof Element && (elt.matches || elt.matchesSelector || elt.msMatchesSelector || elt.mozMatchesSelector || elt.webkitMatchesSelector || elt.oMatchesSelector)
+ return !!matchesFunction && matchesFunction.call(elt, selector)
}
/**
@@ -269,9 +511,7 @@ var htmx = (function() {
}
/**
- *
* @param {string} resp
- * @param {number} depth
* @returns {Document}
*/
function parseHTML(resp) {
@@ -279,12 +519,20 @@ var htmx = (function() {
return parser.parseFromString(resp, 'text/html')
}
+ /**
+ * @param {DocumentFragment} fragment
+ * @param {Node} elt
+ */
function takeChildrenFor(fragment, elt) {
while (elt.childNodes.length > 0) {
fragment.append(elt.childNodes[0])
}
}
+ /**
+ * @param {HTMLScriptElement} script
+ * @returns {HTMLScriptElement}
+ */
function duplicateScript(script) {
const newScript = getDocument().createElement('script')
forEach(script.attributes, function(attr) {
@@ -298,16 +546,23 @@ var htmx = (function() {
return newScript
}
+ /**
+ * @param {HTMLScriptElement} script
+ * @returns {boolean}
+ */
function isJavaScriptScriptNode(script) {
return script.matches('script') && (script.type === 'text/javascript' || script.type === 'module' || script.type === '')
}
- // we have to make new copies of script tags that we are going to insert because
- // SOME browsers (not saying who, but it involves an element and an animal) don't
- // execute scripts created in <template> tags when they are inserted into the DOM
- // and all the others do lmao
+ /**
+ * we have to make new copies of script tags that we are going to insert because
+ * SOME browsers (not saying who, but it involves an element and an animal) don't
+ * execute scripts created in <template> tags when they are inserted into the DOM
+ * and all the others do lmao
+ * @param {DocumentFragment} fragment
+ */
function normalizeScriptTags(fragment) {
- Array.from(fragment.querySelectorAll('script')).forEach((script) => {
+ Array.from(fragment.querySelectorAll('script')).forEach(/** @param {HTMLScriptElement} script */ (script) => {
if (isJavaScriptScriptNode(script)) {
const newScript = duplicateScript(script)
const parent = script.parentNode
@@ -323,31 +578,37 @@ var htmx = (function() {
}
/**
- * @param {string} response HTML
- * @returns {DocumentFragment & {title: string}} a document fragment representing the response HTML, including
+ * @typedef {DocumentFragment & {title?: string}} DocumentFragmentWithTitle
+ * @description a document fragment representing the response HTML, including
* a `title` property for any title information found
*/
+
+ /**
+ * @param {string} response HTML
+ * @returns {DocumentFragmentWithTitle}
+ */
function makeFragment(response) {
// strip head tag to determine shape of response we are dealing with
const responseWithNoHead = response.replace(HEAD_TAG_REGEX, '')
const startTag = getStartTag(responseWithNoHead)
- let fragment = null
+ /** @type DocumentFragmentWithTitle */
+ let fragment
if (startTag === 'html') {
// if it is a full document, parse it and return the body
- fragment = new DocumentFragment()
+ fragment = /** @type DocumentFragmentWithTitle */ (new DocumentFragment())
const doc = parseHTML(response)
takeChildrenFor(fragment, doc.body)
fragment.title = doc.title
} else if (startTag === 'body') {
// parse body w/o wrapping in template
- fragment = new DocumentFragment()
+ fragment = /** @type DocumentFragmentWithTitle */ (new DocumentFragment())
const doc = parseHTML(responseWithNoHead)
takeChildrenFor(fragment, doc.body)
fragment.title = doc.title
} else {
// otherwise we have non-body partial HTML content, so wrap it in a template to maximize parsing flexibility
const doc = parseHTML('<body><template class="internal-htmx-wrapper">' + responseWithNoHead + '</template></body>')
- fragment = doc.querySelector('template').content
+ fragment = /** @type DocumentFragmentWithTitle */ (doc.querySelector('template').content)
// extract title into fragment for later processing
fragment.title = doc.title
@@ -392,7 +653,7 @@ var htmx = (function() {
* @returns {o is Function}
*/
function isFunction(o) {
- return isType(o, 'Function')
+ return typeof o === 'function'
}
/**
@@ -404,9 +665,50 @@ var htmx = (function() {
}
/**
+ * @typedef {Object} OnHandler
+ * @property {(keyof HTMLElementEventMap)|string} event
+ * @property {EventListener} listener
+ */
+
+ /**
+ * @typedef {Object} ListenerInfo
+ * @property {string} trigger
+ * @property {EventListener} listener
+ * @property {EventTarget} on
+ */
+
+ /**
+ * @typedef {Object} HtmxNodeInternalData
+ * Element data
+ * @property {number} [initHash]
+ * @property {boolean} [boosted]
+ * @property {OnHandler[]} [onHandlers]
+ * @property {number} [timeout]
+ * @property {ListenerInfo[]} [listenerInfos]
+ * @property {boolean} [cancelled]
+ * @property {boolean} [triggeredOnce]
+ * @property {number} [delayed]
+ * @property {number|null} [throttle]
+ * @property {string} [lastValue]
+ * @property {boolean} [loaded]
+ * @property {string} [path]
+ * @property {string} [verb]
+ * @property {boolean} [polling]
+ * @property {HTMLButtonElement|HTMLInputElement|null} [lastButtonClicked]
+ * @property {number} [requestCount]
+ * @property {XMLHttpRequest} [xhr]
+ * @property {(() => void)[]} [queuedRequests]
+ * @property {boolean} [abortable]
+ *
+ * Event data
+ * @property {HtmxTriggerSpecification} [triggerSpec]
+ * @property {EventTarget[]} [handledFor]
+ */
+
+ /**
* getInternalData retrieves "private" data stored by htmx within an element
- * @param {HTMLElement} elt
- * @returns {*}
+ * @param {EventTarget|Event} elt
+ * @returns {HtmxNodeInternalData}
*/
function getInternalData(elt) {
const dataProp = 'htmx-internal-data'
@@ -419,8 +721,9 @@ var htmx = (function() {
/**
* toArray converts an ArrayLike object into a real array.
- * @param {ArrayLike} arr
- * @returns {any[]}
+ * @template T
+ * @param {ArrayLike<T>} arr
+ * @returns {T[]}
*/
function toArray(arr) {
const returnArr = []
@@ -434,13 +737,8 @@ var htmx = (function() {
/**
* @template T
- * @callback forEachCallback
- * @param {T} value
- */
- /**
- * @template T
- * @param {{[index: number]: T, length: number}} arr
- * @param {forEachCallback<T>} func
+ * @param {T[]|NamedNodeMap|HTMLCollection|HTMLFormControlsCollection|ArrayLike<T>} arr
+ * @param {(T) => void} func
*/
function forEach(arr, func) {
if (arr) {
@@ -450,6 +748,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} el
+ * @returns {boolean}
+ */
function isScrolledIntoView(el) {
const rect = el.getBoundingClientRect()
const elemTop = rect.top
@@ -457,35 +759,52 @@ var htmx = (function() {
return elemTop < window.innerHeight && elemBottom >= 0
}
+ /**
+ * @param {Node} elt
+ * @returns {boolean}
+ */
function bodyContains(elt) {
// IE Fix
- if (elt.getRootNode && elt.getRootNode() instanceof window.ShadowRoot) {
- return getDocument().body.contains(elt.getRootNode().host)
+ const rootNode = elt.getRootNode && elt.getRootNode()
+ if (rootNode && rootNode instanceof window.ShadowRoot) {
+ return getDocument().body.contains(rootNode.host)
} else {
return getDocument().body.contains(elt)
}
}
+ /**
+ * @param {string} trigger
+ * @returns {string[]}
+ */
function splitOnWhitespace(trigger) {
return trigger.trim().split(/\s+/)
}
/**
- * mergeObjects takes all of the keys from
+ * mergeObjects takes all the keys from
* obj2 and duplicates them into obj1
- * @param {Object} obj1
- * @param {Object} obj2
- * @returns {Object}
+ * @template T1
+ * @template T2
+ * @param {T1} obj1
+ * @param {T2} obj2
+ * @returns {T1 & T2}
*/
function mergeObjects(obj1, obj2) {
for (const key in obj2) {
if (obj2.hasOwnProperty(key)) {
+ // @ts-ignore tsc doesn't seem to properly handle types merging
obj1[key] = obj2[key]
}
}
+ // @ts-ignore tsc doesn't seem to properly handle types merging
return obj1
}
+ /**
+ * @param {string} jString
+ * @returns {any|null}
+ */
function parseJSON(jString) {
try {
return JSON.parse(jString)
@@ -495,6 +814,9 @@ var htmx = (function() {
}
}
+ /**
+ * @returns {boolean}
+ */
function canAccessLocalStorage() {
const test = 'htmx:localStorageTest'
try {
@@ -506,6 +828,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {string} path
+ * @returns {string}
+ */
function normalizePath(path) {
try {
const url = new URL(path)
@@ -527,19 +853,36 @@ var htmx = (function() {
// public API
//= =========================================================================================
+ /**
+ * @param {string} str
+ * @returns {any}
+ */
function internalEval(str) {
return maybeEval(getDocument().body, function() {
return eval(str)
})
}
+ /**
+ * Adds a callback for the **htmx:load** event. This can be used to process new content, for example initializing the content with a javascript library
+ *
+ * @see https://htmx.org/api/#onLoad
+ *
+ * @param {(elt: Node) => void} callback the callback to call on newly loaded content
+ * @returns {EventListener}
+ */
function onLoadHelper(callback) {
- const value = htmx.on('htmx:load', function(evt) {
+ const value = htmx.on('htmx:load', /** @param {CustomEvent} evt */ function(evt) {
callback(evt.detail.elt)
})
return value
}
+ /**
+ * Log all htmx events, useful for debugging.
+ *
+ * @see https://htmx.org/api/#logAll
+ */
function logAll() {
htmx.logger = function(elt, event, data) {
if (console) {
@@ -552,26 +895,59 @@ var htmx = (function() {
htmx.logger = null
}
+ /**
+ * Finds an element matching the selector
+ *
+ * @see https://htmx.org/api/#find
+ *
+ * @param {ParentNode|string} eltOrSelector the root element to find the matching element in, inclusive | the selector to match
+ * @param {string} [selector] the selector to match
+ * @returns {Element|null}
+ */
function find(eltOrSelector, selector) {
- if (selector) {
+ if (typeof eltOrSelector !== 'string') {
return eltOrSelector.querySelector(selector)
} else {
return find(getDocument(), eltOrSelector)
}
}
+ /**
+ * Finds all elements matching the selector
+ *
+ * @see https://htmx.org/api/#findAll
+ *
+ * @param {ParentNode|string} eltOrSelector the root element to find the matching elements in, inclusive | the selector to match
+ * @param {string} [selector] the selector to match
+ * @returns {NodeListOf<Element>}
+ */
function findAll(eltOrSelector, selector) {
- if (selector) {
+ if (typeof eltOrSelector !== 'string') {
return eltOrSelector.querySelectorAll(selector)
} else {
return findAll(getDocument(), eltOrSelector)
}
}
+ /**
+ * @returns Window
+ */
+ function getWindow() {
+ return window
+ }
+
+ /**
+ * Removes an element from the DOM
+ *
+ * @see https://htmx.org/api/#remove
+ *
+ * @param {Node} elt
+ * @param {number} [delay]
+ */
function removeElement(elt, delay) {
elt = resolveTarget(elt)
if (delay) {
- setTimeout(function() {
+ getWindow().setTimeout(function() {
removeElement(elt)
elt = null
}, delay)
@@ -580,10 +956,54 @@ var htmx = (function() {
}
}
+ /**
+ * @param {any} elt
+ * @return {Element|null}
+ */
+ function asElement(elt) {
+ return elt instanceof Element ? elt : null
+ }
+
+ /**
+ * @param {any} elt
+ * @return {HTMLElement|null}
+ */
+ function asHtmlElement(elt) {
+ return elt instanceof HTMLElement ? elt : null
+ }
+
+ /**
+ * @param {any} value
+ * @return {string|null}
+ */
+ function asString(value) {
+ return typeof value === 'string' ? value : null
+ }
+
+ /**
+ * @param {EventTarget} elt
+ * @return {ParentNode|null}
+ */
+ function asParentNode(elt) {
+ return elt instanceof Element || elt instanceof Document || elt instanceof DocumentFragment ? elt : null
+ }
+
+ /**
+ * This method adds a class to the given element.
+ *
+ * @see https://htmx.org/api/#addClass
+ *
+ * @param {Element|string} elt the element to add the class to
+ * @param {string} clazz the class to add
+ * @param {number} [delay] the delay (in milliseconds) before class is added
+ */
function addClassToElement(elt, clazz, delay) {
- elt = resolveTarget(elt)
+ elt = asElement(resolveTarget(elt))
+ if (!elt) {
+ return
+ }
if (delay) {
- setTimeout(function() {
+ getWindow().setTimeout(function() {
addClassToElement(elt, clazz)
elt = null
}, delay)
@@ -592,10 +1012,22 @@ var htmx = (function() {
}
}
- function removeClassFromElement(elt, clazz, delay) {
- elt = resolveTarget(elt)
+ /**
+ * Removes a class from the given element
+ *
+ * @see https://htmx.org/api/#removeClass
+ *
+ * @param {Node|string} node element to remove the class from
+ * @param {string} clazz the class to remove
+ * @param {number} [delay] the delay (in milliseconds before class is removed)
+ */
+ function removeClassFromElement(node, clazz, delay) {
+ let elt = asElement(resolveTarget(node))
+ if (!elt) {
+ return
+ }
if (delay) {
- setTimeout(function() {
+ getWindow().setTimeout(function() {
removeClassFromElement(elt, clazz)
elt = null
}, delay)
@@ -610,22 +1042,47 @@ var htmx = (function() {
}
}
+ /**
+ * Toggles the given class on an element
+ *
+ * @see https://htmx.org/api/#toggleClass
+ *
+ * @param {Element|string} elt the element to toggle the class on
+ * @param {string} clazz the class to toggle
+ */
function toggleClassOnElement(elt, clazz) {
elt = resolveTarget(elt)
elt.classList.toggle(clazz)
}
+ /**
+ * Takes the given class from its siblings, so that among its siblings, only the given element will have the class.
+ *
+ * @see https://htmx.org/api/#takeClass
+ *
+ * @param {Node|string} elt the element that will take the class
+ * @param {string} clazz the class to take
+ */
function takeClassForElement(elt, clazz) {
elt = resolveTarget(elt)
forEach(elt.parentElement.children, function(child) {
removeClassFromElement(child, clazz)
})
- addClassToElement(elt, clazz)
+ addClassToElement(asElement(elt), clazz)
}
+ /**
+ * Finds the closest matching element in the given elements parentage, inclusive of the element
+ *
+ * @see https://htmx.org/api/#closest
+ *
+ * @param {Element|string} elt the element to find the selector from
+ * @param {string} selector the selector to find
+ * @returns {Element|null}
+ */
function closest(elt, selector) {
- elt = resolveTarget(elt)
- if (elt.closest) {
+ elt = asElement(resolveTarget(elt))
+ if (elt && elt.closest) {
return elt.closest(selector)
} else {
// TODO remove when IE goes away
@@ -634,19 +1091,33 @@ var htmx = (function() {
return elt
}
}
- while (elt = elt && parentElt(elt))
+ while (elt = elt && asElement(parentElt(elt)))
return null
}
}
+ /**
+ * @param {string} str
+ * @param {string} prefix
+ * @returns {boolean}
+ */
function startsWith(str, prefix) {
return str.substring(0, prefix.length) === prefix
}
+ /**
+ * @param {string} str
+ * @param {string} suffix
+ * @returns {boolean}
+ */
function endsWith(str, suffix) {
return str.substring(str.length - suffix.length) === suffix
}
+ /**
+ * @param {string} selector
+ * @returns {string}
+ */
function normalizeSelector(selector) {
const trimmedSelector = selector.trim()
if (startsWith(trimmedSelector, '<') && endsWith(trimmedSelector, '/>')) {
@@ -656,17 +1127,24 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Node|Element|Document|string} elt
+ * @param {string} selector
+ * @param {boolean=} global
+ * @returns {(Node|Window)[]}
+ */
function querySelectorAllExt(elt, selector, global) {
+ elt = resolveTarget(elt)
if (selector.indexOf('closest ') === 0) {
- return [closest(elt, normalizeSelector(selector.substr(8)))]
+ return [closest(asElement(elt), normalizeSelector(selector.substr(8)))]
} else if (selector.indexOf('find ') === 0) {
- return [find(elt, normalizeSelector(selector.substr(5)))]
+ return [find(asParentNode(elt), normalizeSelector(selector.substr(5)))]
} else if (selector === 'next') {
- return [elt.nextElementSibling]
+ return [asElement(elt).nextElementSibling]
} else if (selector.indexOf('next ') === 0) {
return [scanForwardQuery(elt, normalizeSelector(selector.substr(5)), !!global)]
} else if (selector === 'previous') {
- return [elt.previousElementSibling]
+ return [asElement(elt).previousElementSibling]
} else if (selector.indexOf('previous ') === 0) {
return [scanBackwardsQuery(elt, normalizeSelector(selector.substr(9)), !!global)]
} else if (selector === 'document') {
@@ -680,12 +1158,18 @@ var htmx = (function() {
} else if (selector.indexOf('global ') === 0) {
return querySelectorAllExt(elt, selector.slice(7), true)
} else {
- return getRootNode(elt, !!global).querySelectorAll(normalizeSelector(selector))
+ return toArray(asParentNode(getRootNode(elt, !!global)).querySelectorAll(normalizeSelector(selector)))
}
}
+ /**
+ * @param {Node} start
+ * @param {string} match
+ * @param {boolean} global
+ * @returns {Element}
+ */
var scanForwardQuery = function(start, match, global) {
- const results = getRootNode(start, global).querySelectorAll(match)
+ const results = asParentNode(getRootNode(start, global)).querySelectorAll(match)
for (let i = 0; i < results.length; i++) {
const elt = results[i]
if (elt.compareDocumentPosition(start) === Node.DOCUMENT_POSITION_PRECEDING) {
@@ -694,8 +1178,14 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Node} start
+ * @param {string} match
+ * @param {boolean} global
+ * @returns {Element}
+ */
var scanBackwardsQuery = function(start, match, global) {
- const results = getRootNode(start, global).querySelectorAll(match)
+ const results = asParentNode(getRootNode(start, global)).querySelectorAll(match)
for (let i = results.length - 1; i >= 0; i--) {
const elt = results[i]
if (elt.compareDocumentPosition(start) === Node.DOCUMENT_POSITION_FOLLOWING) {
@@ -704,8 +1194,13 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Node|string} eltOrSelector
+ * @param {string=} selector
+ * @returns {Node|Window}
+ */
function querySelectorExt(eltOrSelector, selector) {
- if (selector) {
+ if (typeof eltOrSelector !== 'string') {
return querySelectorAllExt(eltOrSelector, selector)[0]
} else {
return querySelectorAllExt(getDocument().body, eltOrSelector)[0]
@@ -713,36 +1208,62 @@ var htmx = (function() {
}
/**
- *
- * @param {string|Element} arg2
- * @param {Element} [context]
- * @returns {Element}
+ * @template {EventTarget} T
+ * @param {T|string} eltOrSelector
+ * @param {T} [context]
+ * @returns {Element|T|null}
*/
- function resolveTarget(arg2, context) {
- if (isType(arg2, 'String')) {
- return find(context || document, arg2)
+ function resolveTarget(eltOrSelector, context) {
+ if (typeof eltOrSelector === 'string') {
+ return find(asParentNode(context) || document, eltOrSelector)
} else {
- // @ts-ignore
- return arg2
+ return eltOrSelector
}
}
+ /**
+ * @typedef {keyof HTMLElementEventMap|string} AnyEventName
+ */
+
+ /**
+ * @typedef {Object} EventArgs
+ * @property {EventTarget} target
+ * @property {AnyEventName} event
+ * @property {EventListener} listener
+ */
+
+ /**
+ * @param {EventTarget|AnyEventName} arg1
+ * @param {AnyEventName|EventListener} arg2
+ * @param {EventListener} [arg3]
+ * @returns {EventArgs}
+ */
function processEventArgs(arg1, arg2, arg3) {
if (isFunction(arg2)) {
return {
target: getDocument().body,
- event: arg1,
+ event: asString(arg1),
listener: arg2
}
} else {
return {
target: resolveTarget(arg1),
- event: arg2,
+ event: asString(arg2),
listener: arg3
}
}
}
+ /**
+ * Adds an event listener to an element
+ *
+ * @see https://htmx.org/api/#on
+ *
+ * @param {EventTarget|string} arg1 the element to add the listener to | the event name to add the listener for
+ * @param {string|EventListener} arg2 the event name to add the listener for | the listener to add
+ * @param {EventListener} [arg3] the listener to add
+ * @returns {EventListener}
+ */
function addEventListenerImpl(arg1, arg2, arg3) {
ready(function() {
const eventArgs = processEventArgs(arg1, arg2, arg3)
@@ -752,6 +1273,16 @@ var htmx = (function() {
return b ? arg2 : arg3
}
+ /**
+ * Removes an event listener from an element
+ *
+ * @see https://htmx.org/api/#off
+ *
+ * @param {EventTarget|string} arg1 the element to remove the listener from | the event name to remove the listener from
+ * @param {string|EventListener} arg2 the event name to remove the listener from | the listener to remove
+ * @param {EventListener} [arg3] the listener to remove
+ * @returns {EventListener}
+ */
function removeEventListenerImpl(arg1, arg2, arg3) {
ready(function() {
const eventArgs = processEventArgs(arg1, arg2, arg3)
@@ -765,6 +1296,11 @@ var htmx = (function() {
//= ===================================================================
const DUMMY_ELT = getDocument().createElement('output') // dummy element for bad selectors
+ /**
+ * @param {Element} elt
+ * @param {string} attrName
+ * @returns {(Node|Window)[]}
+ */
function findAttributeTargets(elt, attrName) {
const attrTarget = getClosestAttributeValue(elt, attrName)
if (attrTarget) {
@@ -782,12 +1318,21 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @param {string} attribute
+ * @returns {Element|null}
+ */
function findThisElement(elt, attribute) {
- return getClosestMatch(elt, function(elt) {
- return getAttributeValue(elt, attribute) != null
- })
+ return asElement(getClosestMatch(elt, function(elt) {
+ return getAttributeValue(asElement(elt), attribute) != null
+ }))
}
+ /**
+ * @param {Element} elt
+ * @returns {Node|Window|null}
+ */
function getTarget(elt) {
const targetStr = getClosestAttributeValue(elt, 'hx-target')
if (targetStr) {
@@ -806,6 +1351,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {string} name
+ * @returns {boolean}
+ */
function shouldSettleAttribute(name) {
const attributesToSettle = htmx.config.attributesToSettle
for (let i = 0; i < attributesToSettle.length; i++) {
@@ -816,6 +1365,10 @@ var htmx = (function() {
return false
}
+ /**
+ * @param {Element} mergeTo
+ * @param {Element} mergeFrom
+ */
function cloneAttributes(mergeTo, mergeFrom) {
forEach(mergeTo.attributes, function(attr) {
if (!mergeFrom.hasAttribute(attr.name) && shouldSettleAttribute(attr.name)) {
@@ -829,6 +1382,11 @@ var htmx = (function() {
})
}
+ /**
+ * @param {HtmxSwapStyle} swapStyle
+ * @param {Element} target
+ * @returns {boolean}
+ */
function isInlineSwap(swapStyle, target) {
const extensions = getExtensions(target)
for (let i = 0; i < extensions.length; i++) {
@@ -845,14 +1403,14 @@ var htmx = (function() {
}
/**
- *
* @param {string} oobValue
* @param {Element} oobElement
- * @param {*} settleInfo
+ * @param {HtmxSettleInfo} settleInfo
* @returns
*/
function oobSwap(oobValue, oobElement, settleInfo) {
let selector = '#' + getRawAttribute(oobElement, 'id')
+ /** @type HtmxSwapStyle */
let swapStyle = 'outerHTML'
if (oobValue === 'true') {
// do nothing
@@ -873,7 +1431,7 @@ var htmx = (function() {
fragment = getDocument().createDocumentFragment()
fragment.appendChild(oobElementClone)
if (!isInlineSwap(swapStyle, target)) {
- fragment = oobElementClone // if this is not an inline swap, we use the content of the node, not the node itself
+ fragment = asParentNode(oobElementClone) // if this is not an inline swap, we use the content of the node, not the node itself
}
const beforeSwapDetails = { shouldSwap: true, target, fragment }
@@ -896,6 +1454,9 @@ var htmx = (function() {
return oobValue
}
+ /**
+ * @param {DocumentFragment} fragment
+ */
function handlePreservedElements(fragment) {
forEach(findAll(fragment, '[hx-preserve], [data-hx-preserve]'), function(preservedElt) {
const id = getAttributeValue(preservedElt, 'id')
@@ -906,14 +1467,20 @@ var htmx = (function() {
})
}
+ /**
+ * @param {Node} parentNode
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function handleAttributes(parentNode, fragment, settleInfo) {
forEach(fragment.querySelectorAll('[id]'), function(newNode) {
const id = getRawAttribute(newNode, 'id')
if (id && id.length > 0) {
const normalizedId = id.replace("'", "\\'")
const normalizedTag = newNode.tagName.replace(':', '\\:')
- const oldNode = parentNode.querySelector(normalizedTag + "[id='" + normalizedId + "']")
- if (oldNode && oldNode !== parentNode) {
+ const parentElt = asParentNode(parentNode)
+ const oldNode = parentElt && parentElt.querySelector(normalizedTag + "[id='" + normalizedId + "']")
+ if (oldNode && oldNode !== parentElt) {
const newAttributes = newNode.cloneNode()
cloneAttributes(newNode, oldNode)
settleInfo.tasks.push(function() {
@@ -924,28 +1491,41 @@ var htmx = (function() {
})
}
+ /**
+ * @param {Node} child
+ * @returns {HtmxSettleTask}
+ */
function makeAjaxLoadTask(child) {
return function() {
removeClassFromElement(child, htmx.config.addedClass)
- processNode(child)
- processFocus(child)
+ processNode(asElement(child))
+ processFocus(asParentNode(child))
triggerEvent(child, 'htmx:load')
}
}
+ /**
+ * @param {ParentNode} child
+ */
function processFocus(child) {
const autofocus = '[autofocus]'
- const autoFocusedElt = matches(child, autofocus) ? child : child.querySelector(autofocus)
+ const autoFocusedElt = asHtmlElement(matches(child, autofocus) ? child : child.querySelector(autofocus))
if (autoFocusedElt != null) {
autoFocusedElt.focus()
}
}
+ /**
+ * @param {Node} parentNode
+ * @param {Node} insertBefore
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function insertNodesBefore(parentNode, insertBefore, fragment, settleInfo) {
handleAttributes(parentNode, fragment, settleInfo)
while (fragment.childNodes.length > 0) {
const child = fragment.firstChild
- addClassToElement(child, htmx.config.addedClass)
+ addClassToElement(asElement(child), htmx.config.addedClass)
parentNode.insertBefore(child, insertBefore)
if (child.nodeType !== Node.TEXT_NODE && child.nodeType !== Node.COMMENT_NODE) {
settleInfo.tasks.push(makeAjaxLoadTask(child))
@@ -953,8 +1533,13 @@ var htmx = (function() {
}
}
- // based on https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0,
- // derived from Java's string hashcode implementation
+ /**
+ * based on https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0,
+ * derived from Java's string hashcode implementation
+ * @param {string} string
+ * @param {number} hash
+ * @returns {number}
+ */
function stringHash(string, hash) {
let char = 0
while (char < string.length) {
@@ -963,6 +1548,10 @@ var htmx = (function() {
return hash
}
+ /**
+ * @param {Element} elt
+ * @returns {number}
+ */
function attributeHash(elt) {
let hash = 0
// IE fix
@@ -978,17 +1567,23 @@ var htmx = (function() {
return hash
}
+ /**
+ * @param {EventTarget} elt
+ */
function deInitOnHandlers(elt) {
const internalData = getInternalData(elt)
if (internalData.onHandlers) {
for (let i = 0; i < internalData.onHandlers.length; i++) {
const handlerInfo = internalData.onHandlers[i]
- elt.removeEventListener(handlerInfo.event, handlerInfo.listener)
+ removeEventListenerImpl(elt, handlerInfo.event, handlerInfo.listener)
}
delete internalData.onHandlers
}
}
+ /**
+ * @param {Node} element
+ */
function deInitNode(element) {
const internalData = getInternalData(element)
if (internalData.timeout) {
@@ -997,7 +1592,7 @@ var htmx = (function() {
if (internalData.listenerInfos) {
forEach(internalData.listenerInfos, function(info) {
if (info.on) {
- info.on.removeEventListener(info.trigger, info.listener)
+ removeEventListenerImpl(info.on, info.trigger, info.listener)
}
})
}
@@ -1005,16 +1600,27 @@ var htmx = (function() {
forEach(Object.keys(internalData), function(key) { delete internalData[key] })
}
+ /**
+ * @param {Node} element
+ */
function cleanUpElement(element) {
triggerEvent(element, 'htmx:beforeCleanupElement')
deInitNode(element)
+ // @ts-ignore IE11 code
+ // noinspection JSUnresolvedReference
if (element.children) { // IE
+ // @ts-ignore
forEach(element.children, function(child) { cleanUpElement(child) })
}
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapOuterHTML(target, fragment, settleInfo) {
- // @type {HTMLElement}
+ /** @type {Node} */
let newElt
const eltBeforeNewContent = target.previousSibling
insertNodesBefore(parentElt(target), target, fragment, settleInfo)
@@ -1025,35 +1631,70 @@ var htmx = (function() {
}
settleInfo.elts = settleInfo.elts.filter(function(e) { return e !== target })
while (newElt && newElt !== target) {
- if (newElt.nodeType === Node.ELEMENT_NODE) {
+ if (newElt instanceof Element) {
settleInfo.elts.push(newElt)
+ newElt = newElt.nextElementSibling
+ } else {
+ newElt = null
}
- newElt = newElt.nextElementSibling
}
cleanUpElement(target)
- target.remove()
+ if (target instanceof Element) {
+ target.remove()
+ } else {
+ target.parentNode.removeChild(target)
+ }
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapAfterBegin(target, fragment, settleInfo) {
return insertNodesBefore(target, target.firstChild, fragment, settleInfo)
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapBeforeBegin(target, fragment, settleInfo) {
return insertNodesBefore(parentElt(target), target, fragment, settleInfo)
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapBeforeEnd(target, fragment, settleInfo) {
return insertNodesBefore(target, null, fragment, settleInfo)
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapAfterEnd(target, fragment, settleInfo) {
return insertNodesBefore(parentElt(target), target.nextSibling, fragment, settleInfo)
}
- function swapDelete(target, fragment, settleInfo) {
+
+ /**
+ * @param {Node} target
+ */
+ function swapDelete(target) {
cleanUpElement(target)
return parentElt(target).removeChild(target)
}
+ /**
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function swapInnerHTML(target, fragment, settleInfo) {
const firstChild = target.firstChild
insertNodesBefore(target, firstChild, fragment, settleInfo)
@@ -1068,11 +1709,11 @@ var htmx = (function() {
}
/**
- * @param {string} swapStyle
- * @param {HTMLElement} elt
- * @param {HTMLElement} target
- * @param {Node} fragment
- * @param {{ tasks: (() => void)[]; }} settleInfo
+ * @param {HtmxSwapStyle} swapStyle
+ * @param {Element} elt
+ * @param {Node} target
+ * @param {ParentNode} fragment
+ * @param {HtmxSettleInfo} settleInfo
*/
function swapWithStyle(swapStyle, elt, target, fragment, settleInfo) {
switch (swapStyle) {
@@ -1094,7 +1735,7 @@ var htmx = (function() {
swapAfterEnd(target, fragment, settleInfo)
return
case 'delete':
- swapDelete(target, fragment, settleInfo)
+ swapDelete(target)
return
default:
var extensions = getExtensions(elt)
@@ -1126,37 +1767,31 @@ var htmx = (function() {
}
}
+ /**
+ * @param {DocumentFragment} fragment
+ * @param {HtmxSettleInfo} settleInfo
+ */
function findAndSwapOobElements(fragment, settleInfo) {
forEach(findAll(fragment, '[hx-swap-oob], [data-hx-swap-oob]'), function(oobElement) {
- const oobValue = getAttributeValue(oobElement, 'hx-swap-oob')
- if (oobValue != null) {
- oobSwap(oobValue, oobElement, settleInfo)
+ if (htmx.config.allowNestedOobSwaps || oobElement.parentElement === null) {
+ const oobValue = getAttributeValue(oobElement, 'hx-swap-oob')
+ if (oobValue != null) {
+ oobSwap(oobValue, oobElement, settleInfo)
+ }
+ } else {
+ oobElement.removeAttribute('hx-swap-oob')
+ oobElement.removeAttribute('data-hx-swap-oob')
}
})
}
/**
- * @callback swapCallback
- */
-
- /**
- * @typedef {Object} SwapOptions
- * @property {?string} select
- * @property {?string} selectOOB
- * @property {?*} eventInfo
- * @property {?*} anchor
- * @property {?HTMLElement} contextElement
- * @property {?swapCallback} afterSwapCallback
- * @property {?swapCallback} afterSettleCallback
- */
-
- /**
* Implements complete swapping pipeline, including: focus and selection preservation,
* title updates, scroll, OOB swapping, normal swapping and settling
* @param {string|Element} target
* @param {string} content
- * @param {import("./htmx").HtmxSwapSpecification} swapSpec
- * @param {SwapOptions} swapOptions
+ * @param {HtmxSwapSpecification} swapSpec
+ * @param {SwapOptions} [swapOptions]
*/
function swap(target, content, swapSpec, swapOptions) {
if (!swapOptions) {
@@ -1181,51 +1816,57 @@ var htmx = (function() {
}
const settleInfo = makeSettleInfo(target)
- let fragment = makeFragment(content)
-
- settleInfo.title = fragment.title
-
- // select-oob swaps
- if (swapOptions.selectOOB) {
- const oobSelectValues = swapOptions.selectOOB.split(',')
- for (let i = 0; i < oobSelectValues.length; i++) {
- const oobSelectValue = oobSelectValues[i].split(':', 2)
- let id = oobSelectValue[0].trim()
- if (id.indexOf('#') === 0) {
- id = id.substring(1)
- }
- const oobValue = oobSelectValue[1] || 'true'
- const oobElement = fragment.querySelector('#' + id)
- if (oobElement) {
- oobSwap(oobValue, oobElement, settleInfo)
+ // For text content swaps, don't parse the response as HTML, just insert it
+ if (swapSpec.swapStyle === 'textContent') {
+ target.textContent = content
+ // Otherwise, make the fragment and process it
+ } else {
+ let fragment = makeFragment(content)
+
+ settleInfo.title = fragment.title
+
+ // select-oob swaps
+ if (swapOptions.selectOOB) {
+ const oobSelectValues = swapOptions.selectOOB.split(',')
+ for (let i = 0; i < oobSelectValues.length; i++) {
+ const oobSelectValue = oobSelectValues[i].split(':', 2)
+ let id = oobSelectValue[0].trim()
+ if (id.indexOf('#') === 0) {
+ id = id.substring(1)
+ }
+ const oobValue = oobSelectValue[1] || 'true'
+ const oobElement = fragment.querySelector('#' + id)
+ if (oobElement) {
+ oobSwap(oobValue, oobElement, settleInfo)
+ }
}
}
- }
- // oob swaps
- findAndSwapOobElements(fragment, settleInfo)
- forEach(findAll(fragment, 'template'), function(template) {
- findAndSwapOobElements(template.content, settleInfo)
- if (template.content.childElementCount === 0) {
+ // oob swaps
+ findAndSwapOobElements(fragment, settleInfo)
+ forEach(findAll(fragment, 'template'), /** @param {HTMLTemplateElement} template */function(template) {
+ findAndSwapOobElements(template.content, settleInfo)
+ if (template.content.childElementCount === 0) {
// Avoid polluting the DOM with empty templates that were only used to encapsulate oob swap
- template.remove()
- }
- })
-
- // normal swap
- if (swapOptions.select) {
- const newFragment = getDocument().createDocumentFragment()
- forEach(fragment.querySelectorAll(swapOptions.select), function(node) {
- newFragment.appendChild(node)
+ template.remove()
+ }
})
- fragment = newFragment
+
+ // normal swap
+ if (swapOptions.select) {
+ const newFragment = getDocument().createDocumentFragment()
+ forEach(fragment.querySelectorAll(swapOptions.select), function(node) {
+ newFragment.appendChild(node)
+ })
+ fragment = newFragment
+ }
+ handlePreservedElements(fragment)
+ swapWithStyle(swapSpec.swapStyle, swapOptions.contextElement, target, fragment, settleInfo)
}
- handlePreservedElements(fragment)
- swapWithStyle(swapSpec.swapStyle, swapOptions.contextElement, target, fragment, settleInfo)
// apply saved focus and selection information to swapped content
if (selectionInfo.elt &&
- !bodyContains(selectionInfo.elt) &&
- getRawAttribute(selectionInfo.elt, 'id')) {
+ !bodyContains(selectionInfo.elt) &&
+ getRawAttribute(selectionInfo.elt, 'id')) {
const newActiveElt = document.getElementById(getRawAttribute(selectionInfo.elt, 'id'))
const focusOptions = { preventScroll: swapSpec.focusScroll !== undefined ? !swapSpec.focusScroll : !htmx.config.defaultFocusScroll }
if (newActiveElt) {
@@ -1271,7 +1912,7 @@ var htmx = (function() {
})
if (swapOptions.anchor) {
- const anchorTarget = resolveTarget('#' + swapOptions.anchor)
+ const anchorTarget = asElement(resolveTarget('#' + swapOptions.anchor))
if (anchorTarget) {
anchorTarget.scrollIntoView({ block: 'start', behavior: 'auto' })
}
@@ -1284,12 +1925,17 @@ var htmx = (function() {
}
if (swapSpec.settleDelay > 0) {
- setTimeout(doSettle, swapSpec.settleDelay)
+ getWindow().setTimeout(doSettle, swapSpec.settleDelay)
} else {
doSettle()
}
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @param {string} header
+ * @param {EventTarget} elt
+ */
function handleTriggerHeader(xhr, header, elt) {
const triggerBody = xhr.getResponseHeader(header)
if (triggerBody.indexOf('{') === 0) {
@@ -1319,7 +1965,13 @@ var htmx = (function() {
const NOT_WHITESPACE = /[^\s]/
const COMBINED_SELECTOR_START = /[{(]/
const COMBINED_SELECTOR_END = /[})]/
+
+ /**
+ * @param {string} str
+ * @returns {string[]}
+ */
function tokenizeString(str) {
+ /** @type string[] */
const tokens = []
let position = 0
while (position < str.length) {
@@ -1349,6 +2001,12 @@ var htmx = (function() {
return tokens
}
+ /**
+ * @param {string} token
+ * @param {string|null} last
+ * @param {string} paramName
+ * @returns {boolean}
+ */
function isPossibleRelativeReference(token, last, paramName) {
return SYMBOL_START.exec(token.charAt(0)) &&
token !== 'true' &&
@@ -1358,6 +2016,12 @@ var htmx = (function() {
last !== '.'
}
+ /**
+ * @param {EventTarget|string} elt
+ * @param {string[]} tokens
+ * @param {string} paramName
+ * @returns {ConditionalFunction|null}
+ */
function maybeGenerateConditional(elt, tokens, paramName) {
if (tokens[0] === '[') {
tokens.shift()
@@ -1366,6 +2030,7 @@ var htmx = (function() {
let last = null
while (tokens.length > 0) {
const token = tokens[0]
+ // @ts-ignore For some reason tsc doesn't understand the shift call, and thinks we're comparing the same value here, i.e. '[' vs ']'
if (token === ']') {
bracketCount--
if (bracketCount === 0) {
@@ -1399,6 +2064,11 @@ var htmx = (function() {
}
}
+ /**
+ * @param {string[]} tokens
+ * @param {RegExp} match
+ * @returns {string}
+ */
function consumeUntil(tokens, match) {
let result = ''
while (tokens.length > 0 && !match.test(tokens[0])) {
@@ -1407,6 +2077,10 @@ var htmx = (function() {
return result
}
+ /**
+ * @param {string[]} tokens
+ * @returns {string}
+ */
function consumeCSSSelector(tokens) {
let result
if (tokens.length > 0 && COMBINED_SELECTOR_START.test(tokens[0])) {
@@ -1422,12 +2096,13 @@ var htmx = (function() {
const INPUT_SELECTOR = 'input, textarea, select'
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {string} explicitTrigger
- * @param {cache} cache for trigger specs
- * @returns {import("./htmx").HtmxTriggerSpecification[]}
+ * @param {Object} cache for trigger specs
+ * @returns {HtmxTriggerSpecification[]}
*/
function parseAndCacheTrigger(elt, explicitTrigger, cache) {
+ /** @type HtmxTriggerSpecification[] */
const triggerSpecs = []
const tokens = tokenizeString(explicitTrigger)
do {
@@ -1436,6 +2111,7 @@ var htmx = (function() {
const trigger = consumeUntil(tokens, /[,\[\s]/)
if (trigger !== '') {
if (trigger === 'every') {
+ /** @type HtmxTriggerSpecification */
const every = { trigger: 'every' }
consumeUntil(tokens, NOT_WHITESPACE)
every.pollInterval = parseInterval(consumeUntil(tokens, /[,\[\s]/))
@@ -1446,6 +2122,7 @@ var htmx = (function() {
}
triggerSpecs.push(every)
} else {
+ /** @type HtmxTriggerSpecification */
const triggerSpec = { trigger }
var eventFilter = maybeGenerateConditional(elt, tokens, 'event')
if (eventFilter) {
@@ -1513,8 +2190,8 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
- * @returns {import("./htmx").HtmxTriggerSpecification[]}
+ * @param {Element} elt
+ * @returns {HtmxTriggerSpecification[]}
*/
function getTriggerSpecs(elt) {
const explicitTrigger = getAttributeValue(elt, 'hx-trigger')
@@ -1537,13 +2214,21 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ */
function cancelPolling(elt) {
getInternalData(elt).cancelled = true
}
+ /**
+ * @param {Element} elt
+ * @param {TriggerHandler} handler
+ * @param {HtmxTriggerSpecification} spec
+ */
function processPolling(elt, handler, spec) {
const nodeData = getInternalData(elt)
- nodeData.timeout = setTimeout(function() {
+ nodeData.timeout = getWindow().setTimeout(function() {
if (bodyContains(elt) && nodeData.cancelled !== true) {
if (!maybeFilterEvent(spec, elt, makeEvent('hx:poll:trigger', {
triggerSpec: spec,
@@ -1556,14 +2241,23 @@ var htmx = (function() {
}, spec.pollInterval)
}
+ /**
+ * @param {HTMLAnchorElement} elt
+ * @returns {boolean}
+ */
function isLocalLink(elt) {
return location.hostname === elt.hostname &&
getRawAttribute(elt, 'href') &&
getRawAttribute(elt, 'href').indexOf('#') !== 0
}
+ /**
+ * @param {Element} elt
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {HtmxTriggerSpecification[]} triggerSpecs
+ */
function boostElement(elt, nodeData, triggerSpecs) {
- if ((elt.tagName === 'A' && isLocalLink(elt) && (elt.target === '' || elt.target === '_self')) || elt.tagName === 'FORM') {
+ if ((elt instanceof HTMLAnchorElement && isLocalLink(elt) && (elt.target === '' || elt.target === '_self')) || elt.tagName === 'FORM') {
nodeData.boosted = true
let verb, path
if (elt.tagName === 'A') {
@@ -1577,7 +2271,8 @@ var htmx = (function() {
path = getRawAttribute(elt, 'action')
}
triggerSpecs.forEach(function(triggerSpec) {
- addEventListener(elt, function(elt, evt) {
+ addEventListener(elt, function(node, evt) {
+ const elt = asElement(node)
if (closest(elt, htmx.config.disableSelector)) {
cleanUpElement(elt)
return
@@ -1589,12 +2284,15 @@ var htmx = (function() {
}
/**
- *
* @param {Event} evt
- * @param {HTMLElement} elt
- * @returns
+ * @param {Node} node
+ * @returns {boolean}
*/
- function shouldCancel(evt, elt) {
+ function shouldCancel(evt, node) {
+ const elt = asElement(node)
+ if (!elt) {
+ return false
+ }
if (evt.type === 'submit' || evt.type === 'click') {
if (elt.tagName === 'FORM') {
return true
@@ -1602,7 +2300,7 @@ var htmx = (function() {
if (matches(elt, 'input[type="submit"], button') && closest(elt, 'form') !== null) {
return true
}
- if (elt.tagName === 'A' && elt.href &&
+ if (elt instanceof HTMLAnchorElement && elt.href &&
(elt.getAttribute('href') === '#' || elt.getAttribute('href').indexOf('#') !== 0)) {
return true
}
@@ -1610,25 +2308,47 @@ var htmx = (function() {
return false
}
+ /**
+ * @param {Node} elt
+ * @param {Event|MouseEvent|KeyboardEvent|TouchEvent} evt
+ * @returns {boolean}
+ */
function ignoreBoostedAnchorCtrlClick(elt, evt) {
- return getInternalData(elt).boosted && elt.tagName === 'A' && evt.type === 'click' && (evt.ctrlKey || evt.metaKey)
+ return getInternalData(elt).boosted && elt instanceof HTMLAnchorElement && evt.type === 'click' &&
+ // @ts-ignore this will resolve to undefined for events that don't define those properties, which is fine
+ (evt.ctrlKey || evt.metaKey)
}
+ /**
+ * @param {HtmxTriggerSpecification} triggerSpec
+ * @param {Node} elt
+ * @param {Event} evt
+ * @returns {boolean}
+ */
function maybeFilterEvent(triggerSpec, elt, evt) {
const eventFilter = triggerSpec.eventFilter
if (eventFilter) {
try {
return eventFilter.call(elt, evt) !== true
} catch (e) {
- triggerErrorEvent(getDocument().body, 'htmx:eventFilter:error', { error: e, source: eventFilter.source })
+ const source = eventFilter.source
+ triggerErrorEvent(getDocument().body, 'htmx:eventFilter:error', { error: e, source })
return true
}
}
return false
}
+ /**
+ * @param {Node} elt
+ * @param {TriggerHandler} handler
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {HtmxTriggerSpecification} triggerSpec
+ * @param {boolean} [explicitCancel]
+ */
function addEventListener(elt, handler, nodeData, triggerSpec, explicitCancel) {
const elementData = getInternalData(elt)
+ /** @type {(Node|Window)[]} */
let eltsToListenOn
if (triggerSpec.from) {
eltsToListenOn = querySelectorAllExt(elt, triggerSpec.from)
@@ -1639,10 +2359,12 @@ var htmx = (function() {
if (triggerSpec.changed) {
eltsToListenOn.forEach(function(eltToListenOn) {
const eltToListenOnData = getInternalData(eltToListenOn)
+ // @ts-ignore value will be undefined for non-input elements, which is fine
eltToListenOnData.lastValue = eltToListenOn.value
})
}
forEach(eltsToListenOn, function(eltToListenOn) {
+ /** @type EventListener */
const eventListener = function(evt) {
if (!bodyContains(elt)) {
eltToListenOn.removeEventListener(triggerSpec.trigger, eventListener)
@@ -1668,7 +2390,7 @@ var htmx = (function() {
evt.stopPropagation()
}
if (triggerSpec.target && evt.target) {
- if (!matches(evt.target, triggerSpec.target)) {
+ if (!matches(asElement(evt.target), triggerSpec.target)) {
return
}
}
@@ -1681,10 +2403,12 @@ var htmx = (function() {
}
if (triggerSpec.changed) {
const eltToListenOnData = getInternalData(eltToListenOn)
- if (eltToListenOnData.lastValue === eltToListenOn.value) {
+ // @ts-ignore value will be undefined for non-input elements, which is fine
+ const value = eltToListenOn.value
+ if (eltToListenOnData.lastValue === value) {
return
}
- eltToListenOnData.lastValue = eltToListenOn.value
+ eltToListenOnData.lastValue = value
}
if (elementData.delayed) {
clearTimeout(elementData.delayed)
@@ -1696,12 +2420,12 @@ var htmx = (function() {
if (triggerSpec.throttle > 0) {
if (!elementData.throttle) {
handler(elt, evt)
- elementData.throttle = setTimeout(function() {
+ elementData.throttle = getWindow().setTimeout(function() {
elementData.throttle = null
}, triggerSpec.throttle)
}
} else if (triggerSpec.delay > 0) {
- elementData.delayed = setTimeout(function() { handler(elt, evt) }, triggerSpec.delay)
+ elementData.delayed = getWindow().setTimeout(function() { handler(elt, evt) }, triggerSpec.delay)
} else {
triggerEvent(elt, 'htmx:trigger')
handler(elt, evt)
@@ -1739,6 +2463,9 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ */
function maybeReveal(elt) {
if (!hasAttribute(elt, 'data-hx-revealed') && isScrolledIntoView(elt)) {
elt.setAttribute('data-hx-revealed', 'true')
@@ -1747,13 +2474,19 @@ var htmx = (function() {
triggerEvent(elt, 'revealed')
} else {
// if the node isn't initialized, wait for it before triggering the request
- elt.addEventListener('htmx:afterProcessNode', function(evt) { triggerEvent(elt, 'revealed') }, { once: true })
+ elt.addEventListener('htmx:afterProcessNode', function() { triggerEvent(elt, 'revealed') }, { once: true })
}
}
}
//= ===================================================================
+ /**
+ * @param {Element} elt
+ * @param {TriggerHandler} handler
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {number} delay
+ */
function loadImmediately(elt, handler, nodeData, delay) {
const load = function() {
if (!nodeData.loaded) {
@@ -1762,12 +2495,18 @@ var htmx = (function() {
}
}
if (delay > 0) {
- setTimeout(load, delay)
+ getWindow().setTimeout(load, delay)
} else {
load()
}
}
+ /**
+ * @param {Element} elt
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {HtmxTriggerSpecification[]} triggerSpecs
+ * @returns {boolean}
+ */
function processVerbs(elt, nodeData, triggerSpecs) {
let explicitAction = false
forEach(VERBS, function(verb) {
@@ -1777,7 +2516,8 @@ var htmx = (function() {
nodeData.path = path
nodeData.verb = verb
triggerSpecs.forEach(function(triggerSpec) {
- addTriggerHandler(elt, triggerSpec, nodeData, function(elt, evt) {
+ addTriggerHandler(elt, triggerSpec, nodeData, function(node, evt) {
+ const elt = asElement(node)
if (closest(elt, htmx.config.disableSelector)) {
cleanUpElement(elt)
return
@@ -1790,11 +2530,23 @@ var htmx = (function() {
return explicitAction
}
+ /**
+ * @callback TriggerHandler
+ * @param {Node} elt
+ * @param {Event} [evt]
+ */
+
+ /**
+ * @param {Node} elt
+ * @param {HtmxTriggerSpecification} triggerSpec
+ * @param {HtmxNodeInternalData} nodeData
+ * @param {TriggerHandler} handler
+ */
function addTriggerHandler(elt, triggerSpec, nodeData, handler) {
if (triggerSpec.trigger === 'revealed') {
initScrollHandler()
addEventListener(elt, handler, nodeData, triggerSpec)
- maybeReveal(elt)
+ maybeReveal(asElement(elt))
} else if (triggerSpec.trigger === 'intersect') {
const observerOptions = {}
if (triggerSpec.root) {
@@ -1812,21 +2564,29 @@ var htmx = (function() {
}
}
}, observerOptions)
- observer.observe(elt)
- addEventListener(elt, handler, nodeData, triggerSpec)
+ observer.observe(asElement(elt))
+ addEventListener(asElement(elt), handler, nodeData, triggerSpec)
} else if (triggerSpec.trigger === 'load') {
if (!maybeFilterEvent(triggerSpec, elt, makeEvent('load', { elt }))) {
- loadImmediately(elt, handler, nodeData, triggerSpec.delay)
+ loadImmediately(asElement(elt), handler, nodeData, triggerSpec.delay)
}
} else if (triggerSpec.pollInterval > 0) {
nodeData.polling = true
- processPolling(elt, handler, triggerSpec)
+ processPolling(asElement(elt), handler, triggerSpec)
} else {
addEventListener(elt, handler, nodeData, triggerSpec)
}
}
- function shouldProcessHxOn(elt) {
+ /**
+ * @param {Node} node
+ * @returns {boolean}
+ */
+ function shouldProcessHxOn(node) {
+ const elt = asElement(node)
+ if (!elt) {
+ return false
+ }
const attributes = elt.attributes
for (let j = 0; j < attributes.length; j++) {
const attrName = attributes[j].name
@@ -1838,22 +2598,31 @@ var htmx = (function() {
return false
}
+ /**
+ * @param {Node} elt
+ * @returns {Element[]}
+ */
function findHxOnWildcardElements(elt) {
let node = null
+ /** @type {Element[]} */
const elements = []
if (!(elt instanceof ShadowRoot)) {
if (shouldProcessHxOn(elt)) {
- elements.push(elt)
+ elements.push(asElement(elt))
}
const iter = document.evaluate('.//*[@*[ starts-with(name(), "hx-on:") or starts-with(name(), "data-hx-on:") or' +
' starts-with(name(), "hx-on-") or starts-with(name(), "data-hx-on-") ]]', elt)
- while (node = iter.iterateNext()) elements.push(node)
+ while (node = iter.iterateNext()) elements.push(asElement(node))
}
return elements
}
+ /**
+ * @param {Element} elt
+ * @returns {NodeListOf<Element>|[]}
+ */
function findElementsToProcess(elt) {
if (elt.querySelectorAll) {
const boostedSelector = ', [hx-boost] a, [data-hx-boost] a, a[hx-boost], a[data-hx-boost]'
@@ -1865,23 +2634,35 @@ var htmx = (function() {
}
}
- // Handle submit buttons/inputs that have the form attribute set
- // see https://developer.mozilla.org/docs/Web/HTML/Element/button
+ /**
+ * Handle submit buttons/inputs that have the form attribute set
+ * see https://developer.mozilla.org/docs/Web/HTML/Element/button
+ * @param {Event} evt
+ */
function maybeSetLastButtonClicked(evt) {
- const elt = closest(evt.target, "button, input[type='submit']")
+ const elt = /** @type {HTMLButtonElement|HTMLInputElement} */ (closest(asElement(evt.target), "button, input[type='submit']"))
const internalData = getRelatedFormData(evt)
if (internalData) {
internalData.lastButtonClicked = elt
}
- };
+ }
+
+ /**
+ * @param {Event} evt
+ */
function maybeUnsetLastButtonClicked(evt) {
const internalData = getRelatedFormData(evt)
if (internalData) {
internalData.lastButtonClicked = null
}
}
+
+ /**
+ * @param {Event} evt
+ * @returns {HtmxNodeInternalData|undefined}
+ */
function getRelatedFormData(evt) {
- const elt = closest(evt.target, "button, input[type='submit']")
+ const elt = closest(asElement(evt.target), "button, input[type='submit']")
if (!elt) {
return
}
@@ -1891,6 +2672,10 @@ var htmx = (function() {
}
return getInternalData(form)
}
+
+ /**
+ * @param {EventTarget} elt
+ */
function initButtonTracking(elt) {
// need to handle both click and focus in:
// focusin - in case someone tabs in to a button and hits the space bar
@@ -1900,28 +2685,20 @@ var htmx = (function() {
elt.addEventListener('focusout', maybeUnsetLastButtonClicked)
}
- function countCurlies(line) {
- const tokens = tokenizeString(line)
- let netCurlies = 0
- for (let i = 0; i < tokens.length; i++) {
- const token = tokens[i]
- if (token === '{') {
- netCurlies++
- } else if (token === '}') {
- netCurlies--
- }
- }
- return netCurlies
- }
-
+ /**
+ * @param {EventTarget} elt
+ * @param {string} eventName
+ * @param {string} code
+ */
function addHxOnEventHandler(elt, eventName, code) {
const nodeData = getInternalData(elt)
if (!Array.isArray(nodeData.onHandlers)) {
nodeData.onHandlers = []
}
let func
+ /** @type EventListener */
const listener = function(e) {
- return maybeEval(elt, function() {
+ maybeEval(elt, function() {
if (!func) {
func = new Function('event', code)
}
@@ -1932,6 +2709,9 @@ var htmx = (function() {
nodeData.onHandlers.push({ event: eventName, listener })
}
+ /**
+ * @param {Element} elt
+ */
function processHxOnWildcard(elt) {
// wipe any previous on handlers so that this function takes precedence
deInitOnHandlers(elt)
@@ -1959,6 +2739,9 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element|HTMLInputElement} elt
+ */
function initNode(elt) {
if (closest(elt, htmx.config.disableSelector)) {
cleanUpElement(elt)
@@ -1973,7 +2756,9 @@ var htmx = (function() {
triggerEvent(elt, 'htmx:beforeProcessNode')
+ // @ts-ignore value will be undefined for non-input elements, which is fine
if (elt.value) {
+ // @ts-ignore
nodeData.lastValue = elt.value
}
@@ -2002,6 +2787,13 @@ var htmx = (function() {
}
}
+ /**
+ * Processes new content, enabling htmx behavior. This can be useful if you have content that is added to the DOM outside of the normal htmx request cycle but still want htmx attributes to work.
+ *
+ * @see https://htmx.org/api/#process
+ *
+ * @param {Element|string} elt element to process
+ */
function processNode(elt) {
elt = resolveTarget(elt)
if (closest(elt, htmx.config.disableSelector)) {
@@ -2017,10 +2809,19 @@ var htmx = (function() {
// Event/Log Support
//= ===================================================================
+ /**
+ * @param {string} str
+ * @returns {string}
+ */
function kebabEventName(str) {
return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
}
+ /**
+ * @param {string} eventName
+ * @param {any} detail
+ * @returns {CustomEvent}
+ */
function makeEvent(eventName, detail) {
let evt
if (window.CustomEvent && typeof window.CustomEvent === 'function') {
@@ -2034,10 +2835,19 @@ var htmx = (function() {
return evt
}
+ /**
+ * @param {EventTarget|string} elt
+ * @param {string} eventName
+ * @param {any=} detail
+ */
function triggerErrorEvent(elt, eventName, detail) {
triggerEvent(elt, eventName, mergeObjects({ error: eventName }, detail))
}
+ /**
+ * @param {string} eventName
+ * @returns {boolean}
+ */
function ignoreEventForLogging(eventName) {
return eventName === 'htmx:afterProcessNode'
}
@@ -2047,8 +2857,8 @@ var htmx = (function() {
* executes the provided function using each of the active extensions. It should
* be called internally at every extendable execution point in htmx.
*
- * @param {HTMLElement} elt
- * @param {(extension:import("./htmx").HtmxExtension) => void} toDo
+ * @param {Element} elt
+ * @param {(extension:HtmxExtension) => void} toDo
* @returns void
*/
function withExtensions(elt, toDo) {
@@ -2069,6 +2879,16 @@ var htmx = (function() {
}
}
+ /**
+ * Triggers a given event on an element
+ *
+ * @see https://htmx.org/api/#trigger
+ *
+ * @param {EventTarget|string} elt the element to trigger the event on
+ * @param {string} eventName the name of the event to trigger
+ * @param {any=} detail details for the event
+ * @returns {boolean}
+ */
function triggerEvent(elt, eventName, detail) {
elt = resolveTarget(elt)
if (detail == null) {
@@ -2089,7 +2909,7 @@ var htmx = (function() {
const kebabedEvent = makeEvent(kebabName, event.detail)
eventResult = eventResult && elt.dispatchEvent(kebabedEvent)
}
- withExtensions(elt, function(extension) {
+ withExtensions(asElement(elt), function(extension) {
eventResult = eventResult && (extension.onEvent(eventName, event) !== false && !event.defaultPrevented)
})
return eventResult
@@ -2100,11 +2920,18 @@ var htmx = (function() {
//= ===================================================================
let currentPathForHistory = location.pathname + location.search
+ /**
+ * @returns {Element}
+ */
function getHistoryElement() {
const historyElt = getDocument().querySelector('[hx-history-elt],[data-hx-history-elt]')
return historyElt || getDocument().body
}
+ /**
+ * @param {string} url
+ * @param {Element} rootElt
+ */
function saveToHistoryCache(url, rootElt) {
if (!canAccessLocalStorage()) {
return
@@ -2131,6 +2958,7 @@ var htmx = (function() {
}
}
+ /** @type HtmxHistoryItem */
const newHistoryItem = { url, content: innerHTML, title, scroll }
triggerEvent(getDocument().body, 'htmx:historyItemCreated', { item: newHistoryItem, cache: historyCache })
@@ -2152,6 +2980,18 @@ var htmx = (function() {
}
}
+ /**
+ * @typedef {Object} HtmxHistoryItem
+ * @property {string} url
+ * @property {string} content
+ * @property {string} title
+ * @property {number} scroll
+ */
+
+ /**
+ * @param {string} url
+ * @returns {HtmxHistoryItem|null}
+ */
function getCachedHistory(url) {
if (!canAccessLocalStorage()) {
return null
@@ -2168,9 +3008,13 @@ var htmx = (function() {
return null
}
+ /**
+ * @param {Element} elt
+ * @returns {string}
+ */
function cleanInnerHtmlForHistory(elt) {
const className = htmx.config.requestClass
- const clone = elt.cloneNode(true)
+ const clone = /** @type Element */ (elt.cloneNode(true))
forEach(findAll(clone, '.' + className), function(child) {
removeClassFromElement(child, className)
})
@@ -2201,6 +3045,9 @@ var htmx = (function() {
if (htmx.config.historyEnabled) history.replaceState({ htmx: true }, getDocument().title, window.location.href)
}
+ /**
+ * @param {string} path
+ */
function pushUrlIntoHistory(path) {
// remove the cache buster parameter, if any
if (htmx.config.getCacheBusterParam) {
@@ -2215,17 +3062,26 @@ var htmx = (function() {
currentPathForHistory = path
}
+ /**
+ * @param {string} path
+ */
function replaceUrlInHistory(path) {
if (htmx.config.historyEnabled) history.replaceState({ htmx: true }, '', path)
currentPathForHistory = path
}
+ /**
+ * @param {HtmxSettleTask[]} tasks
+ */
function settleImmediately(tasks) {
forEach(tasks, function(task) {
- task.call()
+ task.call(undefined)
})
}
+ /**
+ * @param {string} path
+ */
function loadHistoryFromServer(path) {
const request = new XMLHttpRequest()
const details = { path, xhr: request }
@@ -2238,13 +3094,12 @@ var htmx = (function() {
if (this.status >= 200 && this.status < 400) {
triggerEvent(getDocument().body, 'htmx:historyCacheMissLoad', details)
const fragment = makeFragment(this.response)
- // @ts-ignore
+ /** @type ParentNode */
const content = fragment.querySelector('[hx-history-elt],[data-hx-history-elt]') || fragment
const historyElement = getHistoryElement()
const settleInfo = makeSettleInfo(historyElement)
handleTitle(fragment.title)
- // @ts-ignore
swapInnerHTML(historyElement, content, settleInfo)
settleImmediately(settleInfo.tasks)
currentPathForHistory = path
@@ -2256,6 +3111,9 @@ var htmx = (function() {
request.send()
}
+ /**
+ * @param {string} [path]
+ */
function restoreHistory(path) {
saveCurrentPageToHistory()
path = path || location.pathname + location.search
@@ -2267,14 +3125,15 @@ var htmx = (function() {
handleTitle(fragment.title)
swapInnerHTML(historyElement, fragment, settleInfo)
settleImmediately(settleInfo.tasks)
- setTimeout(function() {
+ getWindow().setTimeout(function() {
window.scrollTo(0, cached.scroll)
}, 0) // next 'tick', so browser has time to render layout
currentPathForHistory = path
triggerEvent(getDocument().body, 'htmx:historyRestore', { path, item: cached })
} else {
if (htmx.config.refreshOnHistoryMiss) {
- // @ts-ignore: optional parameter in reload() function throws error
+ // @ts-ignore: optional parameter in reload() function throws error
+ // noinspection JSUnresolvedReference
window.location.reload(true)
} else {
loadHistoryFromServer(path)
@@ -2282,8 +3141,12 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @returns {Element[]}
+ */
function addRequestIndicatorClasses(elt) {
- let indicators = findAttributeTargets(elt, 'hx-indicator')
+ let indicators = /** @type Element[] */ (findAttributeTargets(elt, 'hx-indicator'))
if (indicators == null) {
indicators = [elt]
}
@@ -2295,8 +3158,12 @@ var htmx = (function() {
return indicators
}
+ /**
+ * @param {Element} elt
+ * @returns {Element[]}
+ */
function disableElements(elt) {
- let disabledElts = findAttributeTargets(elt, 'hx-disabled-elt')
+ let disabledElts = /** @type Element[] */ (findAttributeTargets(elt, 'hx-disabled-elt'))
if (disabledElts == null) {
disabledElts = []
}
@@ -2308,6 +3175,10 @@ var htmx = (function() {
return disabledElts
}
+ /**
+ * @param {Element[]} indicators
+ * @param {Element[]} disabled
+ */
function removeRequestIndicators(indicators, disabled) {
forEach(indicators, function(ic) {
const internalData = getInternalData(ic)
@@ -2330,8 +3201,8 @@ var htmx = (function() {
//= ===================================================================
/**
- * @param {HTMLElement[]} processed
- * @param {HTMLElement} elt
+ * @param {Element[]} processed
+ * @param {Element} elt
* @returns {boolean}
*/
function haveSeenNode(processed, elt) {
@@ -2344,7 +3215,13 @@ var htmx = (function() {
return false
}
- function shouldInclude(elt) {
+ /**
+ * @param {Element} element
+ * @return {boolean}
+ */
+ function shouldInclude(element) {
+ // Cast to trick tsc, undefined values will work fine here
+ const elt = /** @type {HTMLInputElement} */ (element)
if (elt.name === '' || elt.name == null || elt.disabled || closest(elt, 'fieldset[disabled]')) {
return false
}
@@ -2359,7 +3236,7 @@ var htmx = (function() {
}
/** @param {string} name
- * @param {string|Array} value
+ * @param {string|Array|FormDataEntryValue} value
* @param {FormData} formData */
function addValueToFormData(name, value, formData) {
if (name != null && value != null) {
@@ -2388,10 +3265,10 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement[]} processed
+ * @param {Element[]} processed
* @param {FormData} formData
* @param {HtmxElementValidationError[]} errors
- * @param {HTMLElement|HTMLInputElement|HTMLFormElement} elt
+ * @param {Element|HTMLInputElement|HTMLSelectElement|HTMLFormElement} elt
* @param {boolean} validate
*/
function processInputValue(processed, formData, errors, elt, validate) {
@@ -2402,12 +3279,13 @@ var htmx = (function() {
}
if (shouldInclude(elt)) {
const name = getRawAttribute(elt, 'name')
+ // @ts-ignore value will be undefined for non-input elements, which is fine
let value = elt.value
- if (elt.multiple && elt.tagName === 'SELECT') {
- value = toArray(elt.querySelectorAll('option:checked')).map(function(e) { return e.value })
+ if (elt instanceof HTMLSelectElement && elt.multiple) {
+ value = toArray(elt.querySelectorAll('option:checked')).map(function(e) { return (/** @type HTMLOptionElement */(e)).value })
}
// include file inputs
- if (elt.files) {
+ if (elt instanceof HTMLInputElement && elt.files) {
value = toArray(elt.files)
}
addValueToFormData(name, value, formData)
@@ -2415,7 +3293,7 @@ var htmx = (function() {
validateElement(elt, errors)
}
}
- if (matches(elt, 'form')) {
+ if (elt instanceof HTMLFormElement) {
forEach(elt.elements, function(input) {
if (processed.indexOf(input) >= 0) {
// The input has already been processed and added to the values, but the FormData that will be
@@ -2436,15 +3314,12 @@ var htmx = (function() {
}
/**
- * @typedef {{elt: HTMLElement, message: string, validity: ValidityState}} HtmxElementValidationError
- */
-
- /**
*
- * @param {HTMLElement|HTMLObjectElement} element
+ * @param {Element} elt
* @param {HtmxElementValidationError[]} errors
*/
- function validateElement(element, errors) {
+ function validateElement(elt, errors) {
+ const element = /** @type {HTMLElement & ElementInternals} */ (elt)
if (element.willValidate) {
triggerEvent(element, 'htmx:validation:validate')
if (!element.checkValidity()) {
@@ -2471,12 +3346,12 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement|HTMLFormElement} elt
- * @param {string} verb
+ * @param {Element|HTMLFormElement} elt
+ * @param {HttpVerb} verb
* @returns {{errors: HtmxElementValidationError[], formData: FormData, values: Object}}
*/
function getInputValues(elt, verb) {
- /** @type HTMLElement[] */
+ /** @type Element[] */
const processed = []
const formData = new FormData()
const priorityFormData = new FormData()
@@ -2489,7 +3364,7 @@ var htmx = (function() {
// only validate when form is directly submitted and novalidate or formnovalidate are not set
// or if the element has an explicit hx-validate="true" on it
- let validate = (matches(elt, 'form') && elt.noValidate !== true) || getAttributeValue(elt, 'hx-validate') === 'true'
+ let validate = (elt instanceof HTMLFormElement && elt.noValidate !== true) || getAttributeValue(elt, 'hx-validate') === 'true'
if (internalData.lastButtonClicked) {
validate = validate && internalData.lastButtonClicked.formNoValidate !== true
}
@@ -2505,7 +3380,7 @@ var htmx = (function() {
// if a button or submit was clicked last, include its value
if (internalData.lastButtonClicked || elt.tagName === 'BUTTON' ||
(elt.tagName === 'INPUT' && getRawAttribute(elt, 'type') === 'submit')) {
- const button = internalData.lastButtonClicked || elt
+ const button = internalData.lastButtonClicked || (/** @type HTMLInputElement|HTMLButtonElement */(elt))
const name = getRawAttribute(button, 'name')
addValueToFormData(name, button.value, priorityFormData)
}
@@ -2513,10 +3388,10 @@ var htmx = (function() {
// include any explicit includes
const includes = findAttributeTargets(elt, 'hx-include')
forEach(includes, function(node) {
- processInputValue(processed, formData, errors, node, validate)
+ processInputValue(processed, formData, errors, asElement(node), validate)
// if a non-form is included, include any input values within it
if (!matches(node, 'form')) {
- forEach(node.querySelectorAll(INPUT_SELECTOR), function(descendant) {
+ forEach(asParentNode(node).querySelectorAll(INPUT_SELECTOR), function(descendant) {
processInputValue(processed, formData, errors, descendant, validate)
})
}
@@ -2564,12 +3439,13 @@ var htmx = (function() {
//= ===================================================================
/**
- * @param {HTMLElement} elt
- * @param {HTMLElement} target
+ * @param {Element} elt
+ * @param {Element} target
* @param {string} prompt
- * @returns {Object} // TODO: Define/Improve HtmxHeaderSpecification
+ * @returns {HtmxHeaderSpecification}
*/
function getHeaders(elt, target, prompt) {
+ /** @type HtmxHeaderSpecification */
const headers = {
'HX-Request': 'true',
'HX-Trigger': getRawAttribute(elt, 'id'),
@@ -2592,7 +3468,7 @@ var htmx = (function() {
* and returns a new object that only contains keys that are
* specified by the closest "hx-params" attribute
* @param {FormData} inputValues
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @returns {FormData}
*/
function filterValues(inputValues, elt) {
@@ -2623,19 +3499,22 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @return {boolean}
+ */
function isAnchorLink(elt) {
- return getRawAttribute(elt, 'href') && getRawAttribute(elt, 'href').indexOf('#') >= 0
+ return !!getRawAttribute(elt, 'href') && getRawAttribute(elt, 'href').indexOf('#') >= 0
}
/**
- *
- * @param {HTMLElement} elt
- * @param {import("./htmx").HtmxSwapStyle} swapInfoOverride
- * @returns {import("./htmx").HtmxSwapSpecification}
+ * @param {Element} elt
+ * @param {HtmxSwapStyle} [swapInfoOverride]
+ * @returns {HtmxSwapSpecification}
*/
function getSwapSpecification(elt, swapInfoOverride) {
const swapInfo = swapInfoOverride || getClosestAttributeValue(elt, 'hx-swap')
- /** @type import("./htmx").HtmxSwapSpecification */
+ /** @type HtmxSwapSpecification */
const swapSpec = {
swapStyle: getInternalData(elt).boosted ? 'innerHTML' : htmx.config.defaultSwapStyle,
swapDelay: htmx.config.defaultSwapDelay,
@@ -2662,6 +3541,7 @@ var htmx = (function() {
var splitSpec = scrollSpec.split(':')
const scrollVal = splitSpec.pop()
var selectorVal = splitSpec.length > 0 ? splitSpec.join(':') : null
+ // @ts-ignore
swapSpec.scroll = scrollVal
swapSpec.scrollTarget = selectorVal
} else if (value.indexOf('show:') === 0) {
@@ -2685,6 +3565,10 @@ var htmx = (function() {
return swapSpec
}
+ /**
+ * @param {Element} elt
+ * @return {boolean}
+ */
function usesFormData(elt) {
return getClosestAttributeValue(elt, 'hx-encoding') === 'multipart/form-data' ||
(matches(elt, 'form') && getRawAttribute(elt, 'enctype') === 'multipart/form-data')
@@ -2692,7 +3576,7 @@ var htmx = (function() {
/**
* @param {XMLHttpRequest} xhr
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {FormData} filteredParameters
* @returns {*|string|null}
*/
@@ -2717,19 +3601,23 @@ var htmx = (function() {
/**
*
* @param {Element} target
- * @returns {import("./htmx").HtmxSettleInfo}
+ * @returns {HtmxSettleInfo}
*/
function makeSettleInfo(target) {
return { tasks: [], elts: [target] }
}
+ /**
+ * @param {Element[]} content
+ * @param {HtmxSwapSpecification} swapSpec
+ */
function updateScrollState(content, swapSpec) {
const first = content[0]
const last = content[content.length - 1]
if (swapSpec.scroll) {
var target = null
if (swapSpec.scrollTarget) {
- target = querySelectorExt(first, swapSpec.scrollTarget)
+ target = asElement(querySelectorExt(first, swapSpec.scrollTarget))
}
if (swapSpec.scroll === 'top' && (first || target)) {
target = target || first
@@ -2747,21 +3635,23 @@ var htmx = (function() {
if (swapSpec.showTarget === 'window') {
targetStr = 'body'
}
- target = querySelectorExt(first, targetStr)
+ target = asElement(querySelectorExt(first, targetStr))
}
if (swapSpec.show === 'top' && (first || target)) {
target = target || first
+ // @ts-ignore For some reason tsc doesn't recognize "instant" as a valid option for now
target.scrollIntoView({ block: 'start', behavior: htmx.config.scrollBehavior })
}
if (swapSpec.show === 'bottom' && (last || target)) {
target = target || last
+ // @ts-ignore For some reason tsc doesn't recognize "instant" as a valid option for now
target.scrollIntoView({ block: 'end', behavior: htmx.config.scrollBehavior })
}
}
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {string} attr
* @param {boolean=} evalAsDefault
* @param {Object=} values
@@ -2805,9 +3695,15 @@ var htmx = (function() {
}
}
}
- return getValuesForElement(parentElt(elt), attr, evalAsDefault, values)
+ return getValuesForElement(asElement(parentElt(elt)), attr, evalAsDefault, values)
}
+ /**
+ * @param {EventTarget|string} elt
+ * @param {() => any} toEval
+ * @param {any=} defaultVal
+ * @returns {any}
+ */
function maybeEval(elt, toEval, defaultVal) {
if (htmx.config.allowEval) {
return toEval()
@@ -2818,7 +3714,7 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {*?} expressionVars
* @returns
*/
@@ -2827,7 +3723,7 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @param {*?} expressionVars
* @returns
*/
@@ -2836,13 +3732,18 @@ var htmx = (function() {
}
/**
- * @param {HTMLElement} elt
+ * @param {Element} elt
* @returns {FormData}
*/
function getExpressionVars(elt) {
return formDataFromObject(mergeObjects(getHXVarsForElement(elt), getHXValsForElement(elt)))
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @param {string} header
+ * @param {string|null} headerValue
+ */
function safelySetHeaderValue(xhr, header, headerValue) {
if (headerValue !== null) {
try {
@@ -2855,6 +3756,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @return {string}
+ */
function getPathFromResponse(xhr) {
// NB: IE11 does not support this stuff
if (xhr.responseURL && typeof (URL) !== 'undefined') {
@@ -2867,14 +3772,29 @@ var htmx = (function() {
}
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @param {RegExp} regexp
+ * @return {boolean}
+ */
function hasHeader(xhr, regexp) {
return regexp.test(xhr.getAllResponseHeaders())
}
+ /**
+ * Issues an htmx-style AJAX request
+ *
+ * @see https://htmx.org/api/#ajax
+ *
+ * @param {HttpVerb} verb
+ * @param {string} path the URL path to make the AJAX
+ * @param {Element|string|HtmxAjaxHelperContext} context the element to target (defaults to the **body**) | a selector for the target | a context object that contains any of the following
+ * @return {Promise<void>} Promise that resolves immediately if no request is sent, or when the request is complete
+ */
function ajaxHelper(verb, path, context) {
- verb = verb.toLowerCase()
+ verb = (/** @type HttpVerb */(verb.toLowerCase()))
if (context) {
- if (context instanceof Element || isType(context, 'String')) {
+ if (context instanceof Element || typeof context === 'string') {
return issueAjaxRequest(verb, path, null, null, {
targetOverride: resolveTarget(context),
returnPromise: true
@@ -2898,6 +3818,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @return {Element[]}
+ */
function hierarchyForElt(elt) {
const arr = []
while (elt) {
@@ -2907,6 +3831,12 @@ var htmx = (function() {
return arr
}
+ /**
+ * @param {Element} elt
+ * @param {string} path
+ * @param {HtmxRequestConfig} requestConfig
+ * @return {boolean}
+ */
function verifyPath(elt, path, requestConfig) {
let sameHost
let url
@@ -2928,6 +3858,10 @@ var htmx = (function() {
return triggerEvent(elt, 'htmx:validateUrl', mergeObjects({ url, sameHost }, requestConfig))
}
+ /**
+ * @param {Object|FormData} obj
+ * @return {FormData}
+ */
function formDataFromObject(obj) {
if (obj instanceof FormData) return obj
const formData = new FormData()
@@ -2947,7 +3881,7 @@ var htmx = (function() {
/**
* @param {FormData} formData
- * @param {string|Symbol} name
+ * @param {string} name
* @param {Array} array
* @returns {Array}
*/
@@ -2995,7 +3929,7 @@ var htmx = (function() {
get: function(target, name) {
if (typeof name === 'symbol') {
// Forward symbol calls to the FormData itself directly
- return Reflect.get(...arguments)
+ return Reflect.get(target, name)
}
if (name === 'toJSON') {
// Support JSON.stringify call on proxy
@@ -3022,6 +3956,9 @@ var htmx = (function() {
}
},
set: function(target, name, value) {
+ if (typeof name !== 'string') {
+ return false
+ }
target.delete(name)
if (typeof value.forEach === 'function') {
value.forEach(function(v) { target.append(name, v) })
@@ -3031,7 +3968,9 @@ var htmx = (function() {
return true
},
deleteProperty: function(target, name) {
- target.delete(name)
+ if (typeof name === 'string') {
+ target.delete(name)
+ }
return true
},
// Support Object.assign call from proxy
@@ -3044,6 +3983,15 @@ var htmx = (function() {
})
}
+ /**
+ * @param {HttpVerb} verb
+ * @param {string} path
+ * @param {Element} elt
+ * @param {Event} event
+ * @param {HtmxAjaxEtc} [etc]
+ * @param {boolean} [confirmed]
+ * @return {Promise<void>}
+ */
function issueAjaxRequest(verb, path, elt, event, etc, confirmed) {
let resolve = null
let reject = null
@@ -3065,7 +4013,7 @@ var htmx = (function() {
maybeCall(resolve)
return promise
}
- const target = etc.targetOverride || getTarget(elt)
+ const target = etc.targetOverride || asElement(getTarget(elt))
if (target == null || target == DUMMY_ELT) {
triggerErrorEvent(elt, 'htmx:targetError', { target: getAttributeValue(elt, 'hx-target') })
maybeCall(reject)
@@ -3085,7 +4033,7 @@ var htmx = (function() {
if (buttonVerb != null) {
// ignore buttons with formmethod="dialog"
if (buttonVerb.toLowerCase() !== 'dialog') {
- verb = buttonVerb
+ verb = (/** @type HttpVerb */(buttonVerb))
}
}
}
@@ -3113,7 +4061,7 @@ var htmx = (function() {
if (selector === 'this') {
syncElt = findThisElement(elt, 'hx-sync')
} else {
- syncElt = querySelectorExt(elt, selector)
+ syncElt = asElement(querySelectorExt(elt, selector))
}
// default to the drop strategy
syncStrategy = (syncStrings[1] || 'drop').trim()
@@ -3233,12 +4181,19 @@ var htmx = (function() {
path = getDocument().location.href
}
+ /**
+ * @type {Object}
+ * @property {boolean} [credentials]
+ * @property {number} [timeout]
+ * @property {boolean} [noHeaders]
+ */
const requestAttrValues = getValuesForElement(elt, 'hx-request')
const eltIsBoosted = getInternalData(elt).boosted
let useUrlParams = htmx.config.methodsThatUseUrlParams.indexOf(verb) >= 0
+ /** @type HtmxRequestConfig */
const requestConfig = {
boosted: eltIsBoosted,
useUrlParams,
@@ -3302,7 +4257,7 @@ var htmx = (function() {
triggerErrorEvent(elt, 'htmx:invalidPath', requestConfig)
maybeCall(reject)
return promise
- };
+ }
xhr.open(verb.toUpperCase(), finalPath, true)
xhr.overrideMimeType('text/html')
@@ -3321,6 +4276,7 @@ var htmx = (function() {
}
}
+ /** @type {HtmxResponseInfo} */
const responseInfo = {
xhr,
target,
@@ -3331,6 +4287,7 @@ var htmx = (function() {
pathInfo: {
requestPath: path,
finalRequestPath: finalPath,
+ responsePath: null,
anchor
}
}
@@ -3411,6 +4368,17 @@ var htmx = (function() {
return promise
}
+ /**
+ * @typedef {Object} HtmxHistoryUpdate
+ * @property {string|null} [type]
+ * @property {string|null} [path]
+ */
+
+ /**
+ * @param {Element} elt
+ * @param {HtmxResponseInfo} responseInfo
+ * @return {HtmxHistoryUpdate}
+ */
function determineHistoryUpdates(elt, responseInfo) {
const xhr = responseInfo.xhr
@@ -3491,13 +4459,23 @@ var htmx = (function() {
}
}
+ /**
+ * @param {HtmxResponseHandlingConfig} responseHandlingConfig
+ * @param {number} status
+ * @return {boolean}
+ */
function codeMatches(responseHandlingConfig, status) {
var regExp = new RegExp(responseHandlingConfig.code)
- return regExp.test(status)
+ return regExp.test(status.toString(10))
}
+ /**
+ * @param {XMLHttpRequest} xhr
+ * @return {HtmxResponseHandlingConfig}
+ */
function resolveResponseHandling(xhr) {
for (var i = 0; i < htmx.config.responseHandling.length; i++) {
+ /** @type HtmxResponseHandlingConfig */
var responseHandlingElement = htmx.config.responseHandling[i]
if (codeMatches(responseHandlingElement, xhr.status)) {
return responseHandlingElement
@@ -3509,6 +4487,9 @@ var htmx = (function() {
}
}
+ /**
+ * @param {string} title
+ */
function handleTitle(title) {
if (title) {
const titleElt = find('title')
@@ -3520,6 +4501,10 @@ var htmx = (function() {
}
}
+ /**
+ * @param {Element} elt
+ * @param {HtmxResponseInfo} responseInfo
+ */
function handleAjaxResponse(elt, responseInfo) {
const xhr = responseInfo.xhr
let target = responseInfo.target
@@ -3535,14 +4520,15 @@ var htmx = (function() {
if (hasHeader(xhr, /HX-Location:/i)) {
saveCurrentPageToHistory()
let redirectPath = xhr.getResponseHeader('HX-Location')
- var swapSpec
+ /** @type {HtmxAjaxHelperContext&{path:string}} */
+ var redirectSwapSpec
if (redirectPath.indexOf('{') === 0) {
- swapSpec = parseJSON(redirectPath)
+ redirectSwapSpec = parseJSON(redirectPath)
// what's the best way to throw an error if the user didn't include this
- redirectPath = swapSpec.path
- delete swapSpec.path
+ redirectPath = redirectSwapSpec.path
+ delete redirectSwapSpec.path
}
- ajaxHelper('GET', redirectPath, swapSpec).then(function() {
+ ajaxHelper('get', redirectPath, redirectSwapSpec).then(function() {
pushUrlIntoHistory(redirectPath)
})
return
@@ -3565,7 +4551,7 @@ var htmx = (function() {
if (xhr.getResponseHeader('HX-Retarget') === 'this') {
responseInfo.target = elt
} else {
- responseInfo.target = querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget'))
+ responseInfo.target = asElement(querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget')))
}
}
@@ -3577,7 +4563,7 @@ var htmx = (function() {
let ignoreTitle = htmx.config.ignoreTitle || responseHandling.ignoreTitle
let selectOverride = responseHandling.select
if (responseHandling.target) {
- responseInfo.target = querySelectorExt(elt, responseHandling.target)
+ responseInfo.target = asElement(querySelectorExt(elt, responseHandling.target))
}
var swapOverride = etc.swapOverride
if (swapOverride == null && responseHandling.swapOverride) {
@@ -3589,7 +4575,7 @@ var htmx = (function() {
if (xhr.getResponseHeader('HX-Retarget') === 'this') {
responseInfo.target = elt
} else {
- responseInfo.target = querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget'))
+ responseInfo.target = asElement(querySelectorExt(elt, xhr.getResponseHeader('HX-Retarget')))
}
}
if (hasHeader(xhr, /HX-Reswap:/i)) {
@@ -3597,6 +4583,7 @@ var htmx = (function() {
}
var serverResponse = xhr.response
+ /** @type HtmxBeforeSwapDetails */
var beforeSwapDetails = mergeObjects({
shouldSwap,
serverResponse,
@@ -3713,7 +4700,9 @@ var htmx = (function() {
if (shouldTransition &&
triggerEvent(elt, 'htmx:beforeTransition', responseInfo) &&
- typeof Promise !== 'undefined' && document.startViewTransition) {
+ typeof Promise !== 'undefined' &&
+ // @ts-ignore experimental feature atm
+ document.startViewTransition) {
const settlePromise = new Promise(function(_resolve, _reject) {
settleResolve = _resolve
settleReject = _reject
@@ -3721,6 +4710,7 @@ var htmx = (function() {
// wrap the original doSwap() in a call to startViewTransition()
const innerDoSwap = doSwap
doSwap = function() {
+ // @ts-ignore experimental feature atm
document.startViewTransition(function() {
innerDoSwap()
return settlePromise
@@ -3729,7 +4719,7 @@ var htmx = (function() {
}
if (swapSpec.swapDelay > 0) {
- setTimeout(doSwap, swapSpec.swapDelay)
+ getWindow().setTimeout(doSwap, swapSpec.swapDelay)
} else {
doSwap()
}
@@ -3743,13 +4733,13 @@ var htmx = (function() {
// Extensions API
//= ===================================================================
- /** @type {Object<string, import("./htmx").HtmxExtension>} */
+ /** @type {Object<string, HtmxExtension>} */
const extensions = {}
/**
- * extensionBase defines the default functions for all extensions.
- * @returns {import("./htmx").HtmxExtension}
- */
+ * extensionBase defines the default functions for all extensions.
+ * @returns {HtmxExtension}
+ */
function extensionBase() {
return {
init: function(api) { return null },
@@ -3762,11 +4752,13 @@ var htmx = (function() {
}
/**
- * defineExtension initializes the extension and adds it to the htmx registry
- *
- * @param {string} name
- * @param {import("./htmx").HtmxExtension} extension
- */
+ * defineExtension initializes the extension and adds it to the htmx registry
+ *
+ * @see https://htmx.org/api/#defineExtension
+ *
+ * @param {string} name the extension name
+ * @param {HtmxExtension} extension the extension definition
+ */
function defineExtension(name, extension) {
if (extension.init) {
extension.init(internalAPI)
@@ -3775,21 +4767,24 @@ var htmx = (function() {
}
/**
- * removeExtension removes an extension from the htmx registry
- *
- * @param {string} name
- */
+ * removeExtension removes an extension from the htmx registry
+ *
+ * @see https://htmx.org/api/#removeExtension
+ *
+ * @param {string} name
+ */
function removeExtension(name) {
delete extensions[name]
}
/**
- * getExtensions searches up the DOM tree to return all extensions that can be applied to a given element
- *
- * @param {HTMLElement} elt
- * @param {import("./htmx").HtmxExtension[]=} extensionsToReturn
- * @param {import("./htmx").HtmxExtension[]=} extensionsToIgnore
- */
+ * getExtensions searches up the DOM tree to return all extensions that can be applied to a given element
+ *
+ * @param {Element} elt
+ * @param {HtmxExtension[]=} extensionsToReturn
+ * @param {string[]=} extensionsToIgnore
+ * @returns {HtmxExtension[]}
+ */
function getExtensions(elt, extensionsToReturn, extensionsToIgnore) {
if (extensionsToReturn == undefined) {
extensionsToReturn = []
@@ -3816,7 +4811,7 @@ var htmx = (function() {
}
})
}
- return getExtensions(parentElt(elt), extensionsToReturn, extensionsToIgnore)
+ return getExtensions(asElement(parentElt(elt)), extensionsToReturn, extensionsToIgnore)
}
//= ===================================================================
@@ -3828,12 +4823,12 @@ var htmx = (function() {
})
/**
- * Execute a function now if DOMContentLoaded has fired, otherwise listen for it.
- *
- * This function uses isReady because there is no realiable way to ask the browswer whether
- * the DOMContentLoaded event has already been fired; there's a gap between DOMContentLoaded
- * firing and readystate=complete.
- */
+ * Execute a function now if DOMContentLoaded has fired, otherwise listen for it.
+ *
+ * This function uses isReady because there is no reliable way to ask the browser whether
+ * the DOMContentLoaded event has already been fired; there's a gap between DOMContentLoaded
+ * firing and readystate=complete.
+ */
function ready(fn) {
// Checking readyState here is a failsafe in case the htmx script tag entered the DOM by
// some means other than the initial page load.
@@ -3856,9 +4851,9 @@ var htmx = (function() {
}
function getMetaConfig() {
+ /** @type HTMLMetaElement */
const element = getDocument().querySelector('meta[name="htmx-config"]')
if (element) {
- // @ts-ignore
return parseJSON(element.content)
} else {
return null
@@ -3906,7 +4901,7 @@ var htmx = (function() {
}
}
}
- setTimeout(function() {
+ getWindow().setTimeout(function() {
triggerEvent(body, 'htmx:load', {}) // give ready handlers a chance to load up before firing this event
body = null // kill reference for gc
}, 0)
@@ -3914,3 +4909,176 @@ var htmx = (function() {
return htmx
})()
+
+/** @typedef {'get'|'head'|'post'|'put'|'delete'|'connect'|'options'|'trace'|'patch'} HttpVerb */
+
+/**
+ * @typedef {Object} SwapOptions
+ * @property {string} [select]
+ * @property {string} [selectOOB]
+ * @property {*} [eventInfo]
+ * @property {string} [anchor]
+ * @property {Element} [contextElement]
+ * @property {swapCallback} [afterSwapCallback]
+ * @property {swapCallback} [afterSettleCallback]
+ */
+
+/**
+ * @callback swapCallback
+ */
+
+/**
+ * @typedef {'innerHTML' | 'outerHTML' | 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'delete' | 'none' | string} HtmxSwapStyle
+ */
+
+/**
+ * @typedef HtmxSwapSpecification
+ * @property {HtmxSwapStyle} swapStyle
+ * @property {number} swapDelay
+ * @property {number} settleDelay
+ * @property {boolean} [transition]
+ * @property {boolean} [ignoreTitle]
+ * @property {string} [head]
+ * @property {'top' | 'bottom'} [scroll]
+ * @property {string} [scrollTarget]
+ * @property {string} [show]
+ * @property {string} [showTarget]
+ * @property {boolean} [focusScroll]
+ */
+
+/**
+ * @typedef {((this:Node, evt:Event) => boolean) & {source: string}} ConditionalFunction
+ */
+
+/**
+ * @typedef {Object} HtmxTriggerSpecification
+ * @property {string} trigger
+ * @property {number} [pollInterval]
+ * @property {ConditionalFunction} [eventFilter]
+ * @property {boolean} [changed]
+ * @property {boolean} [once]
+ * @property {boolean} [consume]
+ * @property {number} [delay]
+ * @property {string} [from]
+ * @property {string} [target]
+ * @property {number} [throttle]
+ * @property {string} [queue]
+ * @property {string} [root]
+ * @property {string} [threshold]
+ */
+
+/**
+ * @typedef {{elt: Element, message: string, validity: ValidityState}} HtmxElementValidationError
+ */
+
+/**
+ * @typedef {Record<string, string>} HtmxHeaderSpecification
+ * @property {'true'} HX-Request
+ * @property {string|null} HX-Trigger
+ * @property {string|null} HX-Trigger-Name
+ * @property {string|null} HX-Target
+ * @property {string} HX-Current-URL
+ * @property {string} [HX-Prompt]
+ * @property {'true'} [HX-Boosted]
+ * @property {string} [Content-Type]
+ * @property {'true'} [HX-History-Restore-Request]
+ */
+
+/** @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]
+ */
+
+/**
+ * @typedef {Object} HtmxRequestConfig
+ * @property {boolean} boosted
+ * @property {boolean} useUrlParams
+ * @property {FormData} formData
+ * @property {Object} parameters formData proxy
+ * @property {FormData} unfilteredFormData
+ * @property {Object} unfilteredParameters unfilteredFormData proxy
+ * @property {HtmxHeaderSpecification} headers
+ * @property {Element} target
+ * @property {HttpVerb} verb
+ * @property {HtmxElementValidationError[]} errors
+ * @property {boolean} withCredentials
+ * @property {number} timeout
+ * @property {string} path
+ * @property {Event} triggeringEvent
+ */
+
+/**
+ * @typedef {Object} HtmxResponseInfo
+ * @property {XMLHttpRequest} xhr
+ * @property {Element} target
+ * @property {HtmxRequestConfig} requestConfig
+ * @property {HtmxAjaxEtc} etc
+ * @property {boolean} boosted
+ * @property {string} select
+ * @property {{requestPath: string, finalRequestPath: string, responsePath: string|null, anchor: string}} pathInfo
+ * @property {boolean} [failed]
+ * @property {boolean} [successful]
+ */
+
+/**
+ * @typedef {Object} HtmxAjaxEtc
+ * @property {boolean} [returnPromise]
+ * @property {HtmxAjaxHandler} [handler]
+ * @property {string} [select]
+ * @property {Element} [targetOverride]
+ * @property {HtmxSwapStyle} [swapOverride]
+ * @property {Record<string,string>} [headers]
+ * @property {Object|FormData} [values]
+ * @property {boolean} [credentials]
+ * @property {number} [timeout]
+ */
+
+/**
+ * @typedef {Object} HtmxResponseHandlingConfig
+ * @property {string} [code]
+ * @property {boolean} swap
+ * @property {boolean} [error]
+ * @property {boolean} [ignoreTitle]
+ * @property {string} [select]
+ * @property {string} [target]
+ * @property {string} [swapOverride]
+ * @property {string} [event]
+ */
+
+/**
+ * @typedef {HtmxResponseInfo & {shouldSwap: boolean, serverResponse: any, isError: boolean, ignoreTitle: boolean, selectOverride:string}} HtmxBeforeSwapDetails
+ */
+
+/**
+ * @callback HtmxAjaxHandler
+ * @param {Element} elt
+ * @param {HtmxResponseInfo} responseInfo
+ */
+
+/**
+ * @typedef {(() => void)} HtmxSettleTask
+ */
+
+/**
+ * @typedef {Object} HtmxSettleInfo
+ * @property {HtmxSettleTask[]} tasks
+ * @property {Element[]} elts
+ * @property {string} [title]
+ */
+
+/**
+ * @typedef {Object} HtmxExtension
+ * @see https://htmx.org/extensions/#defining
+ * @property {(api: any) => void} init
+ * @property {(name: string, event: Event|CustomEvent) => boolean} onEvent
+ * @property {(text: string, xhr: XMLHttpRequest, elt: Element) => string} transformResponse
+ * @property {(swapStyle: HtmxSwapStyle) => boolean} isInlineSwap
+ * @property {(swapStyle: HtmxSwapStyle, target: Element, fragment: Node, settleInfo: HtmxSettleInfo) => boolean} handleSwap
+ * @property {(xhr: XMLHttpRequest, parameters: FormData, elt: Element) => *|string|null} encodeParameters
+ */
generated by cgit v1.2.3 (git 2.39.1) at 2025-04-30 13:00:21 +0000