Browse code

Update htmx lib

Benjamin Roth authored on08/03/2024 10:15:01
Showing1 changed files
... ...
@@ -19,8 +19,9 @@ export function addClass(elt: Element, clazz: string, delay?: number): void;
19 19
  * @param verb 'GET', 'POST', etc.
20 20
  * @param path the URL path to make the AJAX
21 21
  * @param element the element to target (defaults to the **body**)
22
+ * @returns Promise that resolves immediately if no request is sent, or when the request is complete
22 23
  */
23
-export function ajax(verb: string, path: string, element: Element): void;
24
+export function ajax(verb: string, path: string, element: Element): Promise<void>;
24 25
 
25 26
 /**
26 27
  * Issues an htmx-style AJAX request
... ...
@@ -30,8 +31,9 @@ export function ajax(verb: string, path: string, element: Element): void;
30 31
  * @param verb 'GET', 'POST', etc.
31 32
  * @param path the URL path to make the AJAX
32 33
  * @param selector a selector for the target
34
+ * @returns Promise that resolves immediately if no request is sent, or when the request is complete
33 35
  */
34
-export function ajax(verb: string, path: string, selector: string): void;
36
+export function ajax(verb: string, path: string, selector: string): Promise<void>;
35 37
 
36 38
 /**
37 39
  * Issues an htmx-style AJAX request
... ...
@@ -41,12 +43,13 @@ export function ajax(verb: string, path: string, selector: string): void;
41 43
  * @param verb 'GET', 'POST', etc.
42 44
  * @param path the URL path to make the AJAX
43 45
  * @param context a context object that contains any of the following
46
+ * @returns Promise that resolves immediately if no request is sent, or when the request is complete
44 47
  */
45 48
 export function ajax(
46 49
     verb: string,
47 50
     path: string,
48
-    context: Partial<{ source: any; event: any; handler: any; target: any; values: any; headers: any }>
49
-): void;
51
+    context: Partial<{ source: any; event: any; handler: any; target: any; swap: any; values: any; headers: any; select: any }>
52
+): Promise<void>;
50 53
 
51 54
 /**
52 55
  * Finds the closest matching element in the given elements parentage, inclusive of the element
... ...
@@ -288,43 +291,151 @@ export function values(elt: Element, requestType?: string): any;
288 291
 export const version: string;
289 292
 
290 293
 export interface HtmxConfig {
291
-    /** array of strings: the attributes to settle during the settling phase */
294
+    /**
295
+     * The attributes to settle during the settling phase.
296
+     * @default ["class", "style", "width", "height"]
297
+     */
292 298
     attributesToSettle?: ["class", "style", "width", "height"] | string[];
293
-    /** the default delay between completing the content swap and settling attributes */
299
+    /**
300
+     * If the focused element should be scrolled into view.
301
+     * @default false
302
+    */
303
+    defaultFocusScroll?: boolean;
304
+    /**
305
+     * The default delay between completing the content swap and settling attributes.
306
+     * @default 20
307
+     */
294 308
     defaultSettleDelay?: number;
295
-    /** the default delay between receiving a response from the server and doing the swap */
309
+    /**
310
+     * The default delay between receiving a response from the server and doing the swap.
311
+     * @default 0
312
+     */
296 313
     defaultSwapDelay?: number;
297
-    /** the default swap style to use if **[hx-swap](https://htmx.org/attributes/hx-swap)** is omitted */
314
+    /**
315
+     * The default swap style to use if **[hx-swap](https://htmx.org/attributes/hx-swap)** is omitted.
316
+     * @default "innerHTML"
317
+     */
298 318
     defaultSwapStyle?: "innerHTML" | string;
299
-    /** the number of pages to keep in **localStorage** for history support */
319
+    /**
320
+     * The number of pages to keep in **localStorage** for history support.
321
+     * @default 10
322
+     */
300 323
     historyCacheSize?: number;
301
-    /** whether or not to use history */
324
+    /**
325
+     * Whether or not to use history.
326
+     * @default true
327
+     */
302 328
     historyEnabled?: boolean;
303
-    /** if true, htmx will inject a small amount of CSS into the page to make indicators invisible unless the **htmx-indicator** class is present */
329
+    /**
330
+     * If true, htmx will inject a small amount of CSS into the page to make indicators invisible unless the **htmx-indicator** class is present.
331
+     * @default true
332
+     */
304 333
     includeIndicatorStyles?: boolean;
305
-    /** the class to place on indicators when a request is in flight */
334
+    /**
335
+     * The class to place on indicators when a request is in flight.
336
+     * @default "htmx-indicator"
337
+     */
306 338
     indicatorClass?: "htmx-indicator" | string;
307
-    /** the class to place on triggering elements when a request is in flight */
339
+    /**
340
+     * The class to place on triggering elements when a request is in flight.
341
+     * @default "htmx-request"
342
+     */
308 343
     requestClass?: "htmx-request" | string;
309
-    /** the class to temporarily place on elements that htmx has added to the DOM */
344
+    /**
345
+     * The class to temporarily place on elements that htmx has added to the DOM.
346
+     * @default "htmx-added"
347
+     */
310 348
     addedClass?: "htmx-added" | string;
311
-    /** the class to place on target elements when htmx is in the settling phase */
349
+    /**
350
+     * The class to place on target elements when htmx is in the settling phase.
351
+     * @default "htmx-settling"
352
+     */
312 353
     settlingClass?: "htmx-settling" | string;
313
-    /** the class to place on target elements when htmx is in the swapping phase */
354
+    /**
355
+     * The class to place on target elements when htmx is in the swapping phase.
356
+     * @default "htmx-swapping"
357
+     */
314 358
     swappingClass?: "htmx-swapping" | string;
315
-    /** 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 */
359
+    /**
360
+     * 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.
361
+     * @default true
362
+     */
316 363
     allowEval?: boolean;
317
-    /** 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. */
364
+    /**
365
+     * 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.
366
+     * @default false
367
+     */
318 368
     useTemplateFragments?: boolean;
319
-    /** allow cross-site Access-Control requests using credentials such as cookies, authorization headers or TLS client certificates */
369
+    /**
370
+     * Allow cross-site Access-Control requests using credentials such as cookies, authorization headers or TLS client certificates.
371
+     * @default false
372
+     */
320 373
     withCredentials?: boolean;
321
-    /** the default implementation of **getWebSocketReconnectDelay** for reconnecting after unexpected connection loss by the event code **Abnormal Closure**, **Service Restart** or **Try Again Later** */
374
+    /**
375
+     * The default implementation of **getWebSocketReconnectDelay** for reconnecting after unexpected connection loss by the event code **Abnormal Closure**, **Service Restart** or **Try Again Later**.
376
+     * @default "full-jitter"
377
+     */
322 378
     wsReconnectDelay?: "full-jitter" | string | ((retryCount: number) => number);
323 379
     // following don't appear in the docs
380
+    /** @default false */
324 381
     refreshOnHistoryMiss?: boolean;
382
+    /** @default 0 */
325 383
     timeout?: number;
384
+    /** @default "[hx-disable], [data-hx-disable]" */
326 385
     disableSelector?: "[hx-disable], [data-hx-disable]" | string;
327
-    scrollBehavior?: "smooth";
386
+    /** @default "smooth" */
387
+    scrollBehavior?: "smooth" | "auto";
388
+    /**
389
+     * If set to false, disables the interpretation of script tags.
390
+     * @default true
391
+     */
392
+    allowScriptTags?: boolean;
393
+    /**
394
+     * If set to true, disables htmx-based requests to non-origin hosts.
395
+     * @default false
396
+     */
397
+    selfRequestsOnly?: boolean;
398
+    /**
399
+     * Whether or not the target of a boosted element is scrolled into the viewport.
400
+     * @default true
401
+     */
402
+    scrollIntoViewOnBoost?: boolean;
403
+    /**
404
+     * If set, the nonce will be added to inline scripts.
405
+     * @default ''
406
+     */
407
+    inlineScriptNonce?: string;
408
+    /**
409
+     * The type of binary data being received over the WebSocket connection
410
+     * @default 'blob'
411
+     */
412
+    wsBinaryType?: 'blob' | 'arraybuffer'; 
413
+    /**
414
+     * If set to true htmx will include a cache-busting parameter in GET requests to avoid caching partial responses by the browser
415
+     * @default false 
416
+     */
417
+    getCacheBusterParam?: boolean;
418
+    /**
419
+     * If set to true, htmx will use the View Transition API when swapping in new content.
420
+     * @default false 
421
+     */
422
+    globalViewTransitions?: boolean;
423
+    /**
424
+     * htmx will format requests with these methods by encoding their parameters in the URL, not the request body
425
+     * @default ["get"] 
426
+     */
427
+    methodsThatUseUrlParams?: ('get' | 'head' | 'post' | 'put' | 'delete' | 'connect' | 'options' | 'trace' | 'patch' )[];
428
+    /**
429
+     * If set to true htmx will not update the title of the document when a title tag is found in new content
430
+     * @default false 
431
+     */
432
+    ignoreTitle:? boolean;
433
+    /**
434
+     * The cache to store evaluated trigger specifications into.
435
+     * 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)
436
+     * @default null
437
+     */
438
+    triggerSpecsCache?: {[trigger: string]: HtmxTriggerSpecification[]};
328 439
 }
329 440
 
330 441
 /**
Browse code

Initial htmx npm packages installation

Benjamin Roth authored on25/05/2023 09:52:13
Showing1 changed files
1 1
new file mode 100644
... ...
@@ -0,0 +1,339 @@
1
+// https://htmx.org/reference/#api
2
+
3
+/**
4
+ * This method adds a class to the given element.
5
+ *
6
+ * https://htmx.org/api/#addClass
7
+ *
8
+ * @param elt the element to add the class to
9
+ * @param clazz the class to add
10
+ * @param delay the delay (in milliseconds before class is added)
11
+ */
12
+export function addClass(elt: Element, clazz: string, delay?: number): void;
13
+
14
+/**
15
+ * Issues an htmx-style AJAX request
16
+ *
17
+ * https://htmx.org/api/#ajax
18
+ *
19
+ * @param verb 'GET', 'POST', etc.
20
+ * @param path the URL path to make the AJAX
21
+ * @param element the element to target (defaults to the **body**)
22
+ */
23
+export function ajax(verb: string, path: string, element: Element): void;
24
+
25
+/**
26
+ * Issues an htmx-style AJAX request
27
+ *
28
+ * https://htmx.org/api/#ajax
29
+ *
30
+ * @param verb 'GET', 'POST', etc.
31
+ * @param path the URL path to make the AJAX
32
+ * @param selector a selector for the target
33
+ */
34
+export function ajax(verb: string, path: string, selector: string): void;
35
+
36
+/**
37
+ * Issues an htmx-style AJAX request
38
+ *
39
+ * https://htmx.org/api/#ajax
40
+ *
41
+ * @param verb 'GET', 'POST', etc.
42
+ * @param path the URL path to make the AJAX
43
+ * @param context a context object that contains any of the following
44
+ */
45
+export function ajax(
46
+    verb: string,
47
+    path: string,
48
+    context: Partial<{ source: any; event: any; handler: any; target: any; values: any; headers: any }>
49
+): void;
50
+
51
+/**
52
+ * Finds the closest matching element in the given elements parentage, inclusive of the element
53
+ *
54
+ * https://htmx.org/api/#closest
55
+ *
56
+ * @param elt the element to find the selector from
57
+ * @param selector the selector to find
58
+ */
59
+export function closest(elt: Element, selector: string): Element | null;
60
+
61
+/**
62
+ * A property holding the configuration htmx uses at runtime.
63
+ *
64
+ * Note that using a [meta tag](https://htmx.org/docs/#config) is the preferred mechanism for setting these properties.
65
+ *
66
+ * https://htmx.org/api/#config
67
+ */
68
+export var config: HtmxConfig;
69
+
70
+/**
71
+ * A property used to create new [Server Sent Event](https://htmx.org/docs/#sse) sources. This can be updated to provide custom SSE setup.
72
+ *
73
+ * https://htmx.org/api/#createEventSource
74
+ */
75
+export var createEventSource: (url: string) => EventSource;
76
+
77
+/**
78
+ * A property used to create new [WebSocket](https://htmx.org/docs/#websockets). This can be updated to provide custom WebSocket setup.
79
+ *
80
+ * https://htmx.org/api/#createWebSocket
81
+ */
82
+export var createWebSocket: (url: string) => WebSocket;
83
+
84
+/**
85
+ * Defines a new htmx [extension](https://htmx.org/extensions).
86
+ *
87
+ * https://htmx.org/api/#defineExtension
88
+ *
89
+ * @param name the extension name
90
+ * @param ext the extension definition
91
+ */
92
+export function defineExtension(name: string, ext: HtmxExtension): void;
93
+
94
+/**
95
+ * Finds an element matching the selector
96
+ *
97
+ * https://htmx.org/api/#find
98
+ *
99
+ * @param selector the selector to match
100
+ */
101
+export function find(selector: string): Element | null;
102
+
103
+/**
104
+ * Finds an element matching the selector
105
+ *
106
+ * https://htmx.org/api/#find
107
+ *
108
+ * @param elt the root element to find the matching element in, inclusive
109
+ * @param selector the selector to match
110
+ */
111
+export function find(elt: Element, selector: string): Element | null;
112
+
113
+/**
114
+ * Finds all elements matching the selector
115
+ *
116
+ * https://htmx.org/api/#findAll
117
+ *
118
+ * @param selector the selector to match
119
+ */
120
+export function findAll(selector: string): NodeListOf<Element>;
121
+
122
+/**
123
+ * Finds all elements matching the selector
124
+ *
125
+ * https://htmx.org/api/#findAll
126
+ *
127
+ * @param elt the root element to find the matching elements in, inclusive
128
+ * @param selector the selector to match
129
+ */
130
+export function findAll(elt: Element, selector: string): NodeListOf<Element>;
131
+
132
+/**
133
+ * Log all htmx events, useful for debugging.
134
+ *
135
+ * https://htmx.org/api/#logAll
136
+ */
137
+export function logAll(): void;
138
+
139
+/**
140
+ * The logger htmx uses to log with
141
+ *
142
+ * https://htmx.org/api/#logger
143
+ */
144
+export var logger: (elt: Element, eventName: string, detail: any) => void | null;
145
+
146
+/**
147
+ * Removes an event listener from an element
148
+ *
149
+ * https://htmx.org/api/#off
150
+ *
151
+ * @param eventName the event name to remove the listener from
152
+ * @param listener the listener to remove
153
+ */
154
+export function off(eventName: string, listener: (evt: Event) => void): (evt: Event) => void;
155
+
156
+/**
157
+ * Removes an event listener from an element
158
+ *
159
+ * https://htmx.org/api/#off
160
+ *
161
+ * @param target the element to remove the listener from
162
+ * @param eventName the event name to remove the listener from
163
+ * @param listener the listener to remove
164
+ */
165
+export function off(target: string, eventName: string, listener: (evt: Event) => void): (evt: Event) => void;
166
+
167
+/**
168
+ * Adds an event listener to an element
169
+ *
170
+ * https://htmx.org/api/#on
171
+ *
172
+ * @param eventName the event name to add the listener for
173
+ * @param listener the listener to add
174
+ */
175
+export function on(eventName: string, listener: (evt: Event) => void): (evt: Event) => void;
176
+
177
+/**
178
+ * Adds an event listener to an element
179
+ *
180
+ * https://htmx.org/api/#on
181
+ *
182
+ * @param target the element to add the listener to
183
+ * @param eventName the event name to add the listener for
184
+ * @param listener the listener to add
185
+ */
186
+export function on(target: string, eventName: string, listener: (evt: Event) => void): (evt: Event) => void;
187
+
188
+/**
189
+ * 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
190
+ *
191
+ * https://htmx.org/api/#onLoad
192
+ *
193
+ * @param callback the callback to call on newly loaded content
194
+ */
195
+export function onLoad(callback: (element: Element) => void): void;
196
+
197
+/**
198
+ * Parses an interval string consistent with the way htmx does. Useful for plugins that have timing-related attributes.
199
+ *
200
+ * Caution: Accepts an int followed by either **s** or **ms**. All other values use **parseFloat**
201
+ *
202
+ * https://htmx.org/api/#parseInterval
203
+ *
204
+ * @param str timing string
205
+ */
206
+export function parseInterval(str: string): number;
207
+
208
+/**
209
+ * 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.
210
+ *
211
+ * https://htmx.org/api/#process
212
+ *
213
+ * @param element element to process
214
+ */
215
+export function process(element: Element): void;
216
+
217
+/**
218
+ * Removes an element from the DOM
219
+ *
220
+ * https://htmx.org/api/#remove
221
+ *
222
+ * @param elt element to remove
223
+ * @param delay the delay (in milliseconds before element is removed)
224
+ */
225
+export function remove(elt: Element, delay?: number): void;
226
+
227
+/**
228
+ * Removes a class from the given element
229
+ *
230
+ * https://htmx.org/api/#removeClass
231
+ *
232
+ * @param elt element to remove the class from
233
+ * @param clazz the class to remove
234
+ * @param delay the delay (in milliseconds before class is removed)
235
+ */
236
+export function removeClass(elt: Element, clazz: string, delay?: number): void;
237
+
238
+/**
239
+ * Removes the given extension from htmx
240
+ *
241
+ * https://htmx.org/api/#removeExtension
242
+ *
243
+ * @param name the name of the extension to remove
244
+ */
245
+export function removeExtension(name: string): void;
246
+
247
+/**
248
+ * Takes the given class from its siblings, so that among its siblings, only the given element will have the class.
249
+ *
250
+ * https://htmx.org/api/#takeClass
251
+ *
252
+ * @param elt the element that will take the class
253
+ * @param clazz the class to take
254
+ */
255
+export function takeClass(elt: Element, clazz: string): void;
256
+
257
+/**
258
+ * Toggles the given class on an element
259
+ *
260
+ * https://htmx.org/api/#toggleClass
261
+ *
262
+ * @param elt the element to toggle the class on
263
+ * @param clazz the class to toggle
264
+ */
265
+export function toggleClass(elt: Element, clazz: string): void;
266
+
267
+/**
268
+ * Triggers a given event on an element
269
+ *
270
+ * https://htmx.org/api/#trigger
271
+ *
272
+ * @param elt the element to trigger the event on
273
+ * @param name the name of the event to trigger
274
+ * @param detail details for the event
275
+ */
276
+export function trigger(elt: Element, name: string, detail: any): void;
277
+
278
+/**
279
+ * Returns the input values that would resolve for a given element via the htmx value resolution mechanism
280
+ *
281
+ * https://htmx.org/api/#values
282
+ *
283
+ * @param elt the element to resolve values on
284
+ * @param requestType the request type (e.g. **get** or **post**) non-GET's will include the enclosing form of the element. Defaults to **post**
285
+ */
286
+export function values(elt: Element, requestType?: string): any;
287
+
288
+export const version: string;
289
+
290
+export interface HtmxConfig {
291
+    /** array of strings: the attributes to settle during the settling phase */
292
+    attributesToSettle?: ["class", "style", "width", "height"] | string[];
293
+    /** the default delay between completing the content swap and settling attributes */
294
+    defaultSettleDelay?: number;
295
+    /** the default delay between receiving a response from the server and doing the swap */
296
+    defaultSwapDelay?: number;
297
+    /** the default swap style to use if **[hx-swap](https://htmx.org/attributes/hx-swap)** is omitted */
298
+    defaultSwapStyle?: "innerHTML" | string;
299
+    /** the number of pages to keep in **localStorage** for history support */
300
+    historyCacheSize?: number;
301
+    /** whether or not to use history */
302
+    historyEnabled?: boolean;
303
+    /** if true, htmx will inject a small amount of CSS into the page to make indicators invisible unless the **htmx-indicator** class is present */
304
+    includeIndicatorStyles?: boolean;
305
+    /** the class to place on indicators when a request is in flight */
306
+    indicatorClass?: "htmx-indicator" | string;
307
+    /** the class to place on triggering elements when a request is in flight */
308
+    requestClass?: "htmx-request" | string;
309
+    /** the class to temporarily place on elements that htmx has added to the DOM */
310
+    addedClass?: "htmx-added" | string;
311
+    /** the class to place on target elements when htmx is in the settling phase */
312
+    settlingClass?: "htmx-settling" | string;
313
+    /** the class to place on target elements when htmx is in the swapping phase */
314
+    swappingClass?: "htmx-swapping" | string;
315
+    /** 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 */
316
+    allowEval?: boolean;
317
+    /** 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. */
318
+    useTemplateFragments?: boolean;
319
+    /** allow cross-site Access-Control requests using credentials such as cookies, authorization headers or TLS client certificates */
320
+    withCredentials?: boolean;
321
+    /** the default implementation of **getWebSocketReconnectDelay** for reconnecting after unexpected connection loss by the event code **Abnormal Closure**, **Service Restart** or **Try Again Later** */
322
+    wsReconnectDelay?: "full-jitter" | string | ((retryCount: number) => number);
323
+    // following don't appear in the docs
324
+    refreshOnHistoryMiss?: boolean;
325
+    timeout?: number;
326
+    disableSelector?: "[hx-disable], [data-hx-disable]" | string;
327
+    scrollBehavior?: "smooth";
328
+}
329
+
330
+/**
331
+ * https://htmx.org/extensions/#defining
332
+ */
333
+export interface HtmxExtension {
334
+    onEvent?: (name: string, evt: CustomEvent) => any;
335
+    transformResponse?: (text: any, xhr: XMLHttpRequest, elt: any) => any;
336
+    isInlineSwap?: (swapStyle: any) => any;
337
+    handleSwap?: (swapStyle: any, target: any, fragment: any, settleInfo: any) => any;
338
+    encodeParameters?: (xhr: XMLHttpRequest, parameters: any, elt: any) => any;
339
+}