mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-10-02 15:25:26 +00:00
Merge branch 'master' into dev
# Conflicts: # src/htmx.d.ts
This commit is contained in:
carson
commit
b1b87bdf37
415
src/htmx.d.ts
vendored
415
src/htmx.d.ts
vendored
@ -1,95 +1,336 @@
|
||||
export interface HtmxApi {
|
||||
config?: HtmxConfig
|
||||
logger?: (a: HTMLElement, b: Event, c: any) => void | null
|
||||
on: (event:string, listener:EventListener) => void
|
||||
}
|
||||
// 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
|
||||
*/
|
||||
export function addClass(elt: Element, clazz: string): 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**)
|
||||
*/
|
||||
export function ajax(verb: string, path: string, element: Element): 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
|
||||
*/
|
||||
export function ajax(verb: string, path: string, selector: string): 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
|
||||
*/
|
||||
export function ajax(
|
||||
verb: string,
|
||||
path: string,
|
||||
context: Partial<{ source: any; event: any; handler: any; target: any; values: any; headers: any }>
|
||||
): 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
|
||||
*/
|
||||
export function remove(elt: Element): 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
|
||||
*/
|
||||
export function removeClass(elt: Element, clazz: string): 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 {
|
||||
historyEnabled?: boolean;
|
||||
historyCacheSize?: number;
|
||||
refreshOnHistoryMiss?: boolean;
|
||||
defaultSwapStyle?: 'innerHTML' | string;
|
||||
defaultSwapDelay?: number;
|
||||
defaultSettleDelay?: number;
|
||||
includeIndicatorStyles?: boolean;
|
||||
indicatorClass?: 'htmx-indicator' | string;
|
||||
requestClass?: 'htmx-request' | string;
|
||||
settlingClass?: 'htmx-settling' | string;
|
||||
swappingClass?: 'htmx-swapping' | string;
|
||||
addedClass?: string;
|
||||
allowEval?: boolean;
|
||||
timeout: number;
|
||||
/** array of strings: the attributes to settle during the settling phase */
|
||||
attributesToSettle?: ["class", "style", "width", "height"] | string[];
|
||||
withCredentials?: boolean;
|
||||
wsReconnectDelay?: 'full-jitter' | string;
|
||||
disableSelector?: "[hx-disable], [data-hx-disable]" | string;
|
||||
/** the default delay between completing the content swap and settling attributes */
|
||||
defaultSettleDelay?: number;
|
||||
/** the default delay between receiving a response from the server and doing the swap */
|
||||
defaultSwapDelay?: number;
|
||||
/** the default swap style to use if **[hx-swap](https://htmx.org/attributes/hx-swap)** is omitted */
|
||||
defaultSwapStyle?: "innerHTML" | string;
|
||||
/** the number of pages to keep in **localStorage** for history support */
|
||||
historyCacheSize?: number;
|
||||
/** whether or not to use history */
|
||||
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 */
|
||||
includeIndicatorStyles?: boolean;
|
||||
/** the class to place on indicators when a request is in flight */
|
||||
indicatorClass?: "htmx-indicator" | string;
|
||||
/** the class to place on triggering elements when a request is in flight */
|
||||
requestClass?: "htmx-request" | string;
|
||||
/** the class to temporarily place on elements that htmx has added to the DOM */
|
||||
addedClass?: "htmx-added" | string;
|
||||
/** the class to place on target elements when htmx is in the settling phase */
|
||||
settlingClass?: "htmx-settling" | string;
|
||||
/** the class to place on target elements when htmx is in the swapping phase */
|
||||
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 */
|
||||
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. */
|
||||
useTemplateFragments?: boolean;
|
||||
scrollBehavior: string;
|
||||
/** allow cross-site Access-Control requests using credentials such as cookies, authorization headers or TLS client certificates */
|
||||
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** */
|
||||
wsReconnectDelay?: "full-jitter" | string | ((retryCount: number) => number);
|
||||
// following don't appear in the docs
|
||||
refreshOnHistoryMiss?: boolean;
|
||||
timeout?: number;
|
||||
disableSelector?: "[hx-disable], [data-hx-disable]" | string;
|
||||
scrollBehavior?: "smooth";
|
||||
}
|
||||
|
||||
export declare var htmx: HtmxApi
|
||||
|
||||
/**
|
||||
* https://htmx.org/extensions/#defining
|
||||
*/
|
||||
export interface HtmxExtension {
|
||||
init: (api: HtmxInternalApi) => void;
|
||||
onEvent: (name: string, event: Event) => boolean;
|
||||
transformResponse: (text: string, xhr: XMLHttpRequest, elt: HTMLElement) => string;
|
||||
isInlineSwap: (swapStyle: string) => boolean;
|
||||
handleSwap: (swapStyle: string, target: HTMLElement, fragment: string, settleInfo: Object) => boolean;
|
||||
encodeParameters: (xhr: XMLHttpRequest, parameters: Object, elt: HTMLElement) => void;
|
||||
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;
|
||||
}
|
||||
|
||||
export interface HtmxInternalApi {
|
||||
bodyContains: (element: HTMLElement) => boolean
|
||||
filterValues: (inputValues: {}, elt: HTMLElement) => {}
|
||||
getAttributeValue: (element: HTMLElement, qualifiedName: string) => (string | null)
|
||||
getClosestMatch: (element: HTMLElement, condition: (e:HTMLElement) => boolean) => (HTMLElement | null)
|
||||
getExpressionVars: (element: HTMLELement) => {}
|
||||
getHeaders: (element:HTMLElement, target: HTMLElement, prompt:string) => {}
|
||||
getInputValues: (element: HTMLElement, verb:string) => {errors:any[], values:{}}
|
||||
getInternalData: (element: HTMLElement) => Object
|
||||
getSwapSpecification: (element: HTMLElement) => HtmxSwapSpecification
|
||||
getTarget: (element: HTMLElement) => object
|
||||
getTriggerSpecs: (element: HTMLElement) => HtmxTriggerSpecification[]
|
||||
hasAttribute: (element: HTMLElement, qualifiedName: string) => boolean
|
||||
makeSettleInfo: (element: Element) => HtmxSettleInfo
|
||||
makeFragment: (response: string) => Element
|
||||
mergeObjects: (obj1:{}, obj2:{}) => {}
|
||||
oobSwap: (oobValue: string, oobElement: HTMLElement, settleInfo: *) => void
|
||||
selectAndSwap: (swapStyle: any, target: any, elt: any, responseText: any, settleInfo: any) => void // TODO: improve parameter definitions
|
||||
settleImmediately: (tasks: any) => void // TODO: improve parameter definitions
|
||||
shouldCancel: (element: HTMLElement) => boolean
|
||||
triggerErrorEvent: (element: HTMLElement, eventName: string, detail: any) => void
|
||||
triggerEvent: (element: HTMLElement, eventName: string, detail: any) => void
|
||||
withExtensions: (element: HTMLElement, toDo:(ext:HtmxExtension) => void) => void
|
||||
}
|
||||
|
||||
export interface HtmxSwapSpecification {
|
||||
swapStyle: string
|
||||
swapDelay: number
|
||||
settleDelay: number
|
||||
show?: string
|
||||
showTarget?: string
|
||||
scroll?: string
|
||||
scrollTarget?: string
|
||||
}
|
||||
|
||||
export interface HtmxTriggerSpecification {
|
||||
trigger: string
|
||||
pollInterval?:number
|
||||
eventFilter?: * // TODO: improve definition
|
||||
changed?: boolean
|
||||
once?: boolean
|
||||
consumed?: boolean
|
||||
delay?: string
|
||||
from?: string
|
||||
throttle?: string
|
||||
target?: string
|
||||
queue?: string
|
||||
root?: string
|
||||
threshold?: string
|
||||
}
|
||||
|
||||
export interface HtmxSettleInfo {
|
||||
tasks: *[],
|
||||
elts: HTMLELement[]
|
||||
}
|
||||
@ -2306,7 +2306,7 @@ return (function () {
|
||||
var filteredParameters = filterValues(allParameters, elt);
|
||||
|
||||
if (verb !== 'get' && getClosestAttributeValue(elt, "hx-encoding") == null) {
|
||||
headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
|
||||
headers['Content-Type'] = 'application/x-www-form-urlencoded';
|
||||
}
|
||||
|
||||
// behavior of anchors w/ empty href is to use the current URL
|
||||
|
||||
96
src/htmx.test.ts
Normal file
96
src/htmx.test.ts
Normal file
@ -0,0 +1,96 @@
|
||||
import htmx from "./htmx";
|
||||
|
||||
// add the class 'myClass' to the element with the id 'demo'
|
||||
htmx.addClass(htmx.find("#demo"), "myClass");
|
||||
|
||||
// issue a GET to /example and put the response HTML into #myDiv
|
||||
htmx.ajax("GET", "/example", "#myDiv");
|
||||
|
||||
// find the closest enclosing div of the element with the id 'demo'
|
||||
htmx.closest(htmx.find("#demo"), "div");
|
||||
|
||||
// update the history cache size to 30
|
||||
htmx.config.historyCacheSize = 30;
|
||||
|
||||
// override SSE event sources to not use credentials
|
||||
htmx.createEventSource = function (url) {
|
||||
return new EventSource(url, { withCredentials: false });
|
||||
};
|
||||
|
||||
// override WebSocket to use a specific protocol
|
||||
htmx.createWebSocket = function (url) {
|
||||
return new WebSocket(url, ["wss"]);
|
||||
};
|
||||
|
||||
// defines a silly extension that just logs the name of all events triggered
|
||||
htmx.defineExtension("silly", {
|
||||
onEvent: function (name, evt) {
|
||||
console.log("Event " + name + " was triggered!");
|
||||
}
|
||||
});
|
||||
|
||||
// find div with id my-div
|
||||
var div = htmx.find("#my-div");
|
||||
|
||||
// find div with id another-div within that div
|
||||
var anotherDiv = htmx.find(div, "#another-div");
|
||||
|
||||
// find all divs
|
||||
var allDivs = htmx.findAll("div");
|
||||
|
||||
// find all paragraphs within a given div
|
||||
var allParagraphsInMyDiv = htmx.findAll(htmx.find("#my-div"), "p");
|
||||
|
||||
htmx.logAll();
|
||||
|
||||
// remove this click listener from the body
|
||||
htmx.off("click", myEventListener);
|
||||
|
||||
// remove this click listener from the given div
|
||||
htmx.off("#my-div", "click", myEventListener);
|
||||
|
||||
// add a click listener to the body
|
||||
var myEventListener = htmx.on("click", function (evt) {
|
||||
console.log(evt);
|
||||
});
|
||||
|
||||
// add a click listener to the given div
|
||||
var myEventListener = htmx.on("#my-div", "click", function (evt) {
|
||||
console.log(evt);
|
||||
});
|
||||
|
||||
const MyLibrary: any = null;
|
||||
|
||||
htmx.onLoad(function (elt) {
|
||||
MyLibrary.init(elt);
|
||||
});
|
||||
|
||||
// returns 3000
|
||||
var milliseconds = htmx.parseInterval("3s");
|
||||
|
||||
// returns 3 - Caution
|
||||
var milliseconds = htmx.parseInterval("3m");
|
||||
|
||||
document.body.innerHTML = "<div hx-get='/example'>Get it!</div>";
|
||||
// process the newly added content
|
||||
htmx.process(document.body);
|
||||
|
||||
// removes my-div from the DOM
|
||||
htmx.remove(htmx.find("#my-div"));
|
||||
|
||||
// removes .myClass from my-div
|
||||
htmx.removeClass(htmx.find("#my-div"), "myClass");
|
||||
|
||||
htmx.removeExtension("my-extension");
|
||||
|
||||
// takes the selected class from tab2"s siblings
|
||||
htmx.takeClass(htmx.find("#tab2"), "selected");
|
||||
|
||||
// toggles the selected class on tab2
|
||||
htmx.toggleClass(htmx.find("#tab2"), "selected");
|
||||
|
||||
// triggers the myEvent event on #tab2 with the answer 42
|
||||
htmx.trigger(htmx.find("#tab2"), "myEvent", { answer: 42 });
|
||||
|
||||
// gets the values associated with this form
|
||||
var values = htmx.values(htmx.find("#myForm"));
|
||||
@ -213,10 +213,10 @@ or
|
||||
|
||||
```js
|
||||
// find all divs
|
||||
var allDivs = htmx.find("div")
|
||||
var allDivs = htmx.findAll("div")
|
||||
|
||||
// find all paragraphs within a given div
|
||||
var allParagraphsInMyDiv = htmx.find(htmx.find("#my-div"), "p")
|
||||
var allParagraphsInMyDiv = htmx.findAll(htmx.find("#my-div"), "p")
|
||||
```
|
||||
|
||||
### <a name="logAll"></a> Method - [`htmx.logAll()`](#logAll)
|
||||
|
||||
@ -49,7 +49,7 @@ img {
|
||||
});
|
||||
|
||||
onGet("/graph", function(request, params){
|
||||
return "<img alt="Tokyo Climate" src='/img/tokyo.png'>";
|
||||
return "<img alt='Tokyo Climate' src='/img/tokyo.png'>";
|
||||
});
|
||||
|
||||
// templates
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user