Skip to content

Commit e4f8fe9

Browse files
committed
Merge remote-tracking branch 'origin/master'
2 parents d7507dd + d818268 commit e4f8fe9

File tree

18 files changed

+38
-19
lines changed

18 files changed

+38
-19
lines changed

TESTING.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ This guide outlines how to test htmx, focusing on running tests headlessly or in
1010
npm install
1111
npm run test
1212
```
13-
During test runs it will auto install playwrite
13+
During test runs it will auto install playwright
1414

1515
## Running All Tests
1616

editors/jetbrains/htmx.web-types.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -431,12 +431,12 @@
431431
},
432432
{
433433
"name": "historyCacheHit",
434-
"description": "This event is triggered when a cache hit occurs when restoring history\n\nYou can prevent the history restoration via `preventDefault()` to allow alternative restore handling.\nYou can also override the details of the history restoration request in this event if required\n\n##### Details\n\n* `detail.historyElt` - the history element or body that will get replaced\n* `detail.item.content` - the content of the cache that will be swapped in\n* `detail.item.title` - the page title to update from the cache\n* `detail.path` - the path and query of the page being restored\n* `detial.swapSpec` - the swapSpec to be used containing the defatul swapStyle='innerHTML'\n\n",
434+
"description": "This event is triggered when a cache hit occurs when restoring history\n\nYou can prevent the history restoration via `preventDefault()` to allow alternative restore handling.\nYou can also override the details of the history restoration request in this event if required\n\n##### Details\n\n* `detail.historyElt` - the history element or body that will get replaced\n* `detail.item.content` - the content of the cache that will be swapped in\n* `detail.item.title` - the page title to update from the cache\n* `detail.path` - the path and query of the page being restored\n* `detail.swapSpec` - the swapSpec to be used containing the defatul swapStyle='innerHTML'\n\n",
435435
"doc-url": "https://htmx.org/events/#htmx:historyCacheHit"
436436
},
437437
{
438438
"name": "historyCacheMiss",
439-
"description": "This event is triggered when a cache miss occurs when restoring history\n\nYou can prevent the history restoration via `preventDefault()` to allow alternative restore handling.\nYou can also modify the xhr request or other details before it makes the the request to restore history\n\n##### Details\n\n* `detail.historyElt` - the history element or body that will get replaced\n* `detail.xhr` - the `XMLHttpRequest` that will retrieve the remote content for restoration\n* `detail.path` - the path and query of the page being restored\n* `detial.swapSpec` - the swapSpec to be used containing the defatul swapStyle='innerHTML'\n\n",
439+
"description": "This event is triggered when a cache miss occurs when restoring history\n\nYou can prevent the history restoration via `preventDefault()` to allow alternative restore handling.\nYou can also modify the xhr request or other details before it makes the the request to restore history\n\n##### Details\n\n* `detail.historyElt` - the history element or body that will get replaced\n* `detail.xhr` - the `XMLHttpRequest` that will retrieve the remote content for restoration\n* `detail.path` - the path and query of the page being restored\n* `detail.swapSpec` - the swapSpec to be used containing the defatul swapStyle='innerHTML'\n\n",
440440
"doc-url": "https://htmx.org/events/#htmx:historyCacheMiss"
441441
},
442442
{
@@ -446,7 +446,7 @@
446446
},
447447
{
448448
"name": "historyCacheMissLoad",
449-
"description": "This event is triggered when a cache miss occurs and a response has been retrieved successfully from the server\nfor the content to restore\n\nYou can modify the details before it makes the swap to restore the history\n\n##### Details\n\n* `detail.historyElt` - the history element or body that will get replaced\n* `detail.xhr` - the `XMLHttpRequest`\n* `detail.path` - the path and query of the page being restored\n* `detail.response` - the response text that will be swapped in\n* `detial.swapSpec` - the swapSpec to be used containing the defatul swapStyle='innerHTML'\n\n",
449+
"description": "This event is triggered when a cache miss occurs and a response has been retrieved successfully from the server\nfor the content to restore\n\nYou can modify the details before it makes the swap to restore the history\n\n##### Details\n\n* `detail.historyElt` - the history element or body that will get replaced\n* `detail.xhr` - the `XMLHttpRequest`\n* `detail.path` - the path and query of the page being restored\n* `detail.response` - the response text that will be swapped in\n* `detail.swapSpec` - the swapSpec to be used containing the defatul swapStyle='innerHTML'\n\n",
450450
"doc-url": "https://htmx.org/events/#htmx:historyCacheMissLoad"
451451
},
452452
{

test/attributes/hx-swap-oob.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -349,7 +349,7 @@ describe('hx-swap-oob attribute', function() {
349349
}
350350

351351
it.skip('triggers htmx:oobErrorNoTarget when no targets found', function(done) {
352-
// this test fails right now because when targets not found it returns an empty array which makes it miss the event as it should be if (targets.lenght)
352+
// this test fails right now because when targets not found it returns an empty array which makes it miss the event as it should be if (targets.length)
353353
this.server.respondWith('GET', '/test', "Clicked<div id='nonexistent' hx-swap-oob='true'>Swapped</div>")
354354
var div = make('<div hx-get="/test">click me</div>')
355355

www/content/QUIRKS.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,17 @@ that "If something magically works, then it can also magically break."
176176
Despite this fact, I (Carson) still feel it is useful in many situations, and it is used on the <https://htmx.org>
177177
website.
178178

179+
## Loading htmx asynchronously is unreliable
180+
181+
htmx is designed to be loaded with a standard, blocking `<script>` tag, not one that is a [module](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script#module) or [deferred](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script#defer).
182+
Although we make a [best-effort attempt](https://github.com/bigskysoftware/htmx/blob/7ae66f9b33a5d39ad4084b0697ea34a6bf559cda/src/htmx.js#L5039-L5058) to initialize htmx regardless of when in the document lifecycle the script is loaded, there are some use-cases that slip through the cracks, typically ones that involve bundling or AJAX insertion of htmx itself.
183+
184+
Our [past attempts](https://github.com/bigskysoftware/htmx/pull/3365#issuecomment-3065080028) to close this gap have all lead to unacceptable regressions.
185+
Therefore, although htmx can be loaded asynchronously, do so at your own risk.
186+
187+
Keep in mind, also, that if your DOM content loads before htmx does, all the htmx-provided functionality will be nonfunctional until htmx loads.
188+
[Prefetching](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/prefetch) (or even "regular" fetching) htmx before you need it is one possible way to resolve this problem.
189+
179190
## The JavaScript API Is Not A Focus
180191

181192
htmx is a hypermedia-oriented front end library. This means that htmx enhances HTML via

www/content/_index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -258,7 +258,7 @@ Thank you to all our generous <a href="https://github.com/sponsors/bigskysoftwar
258258
<div>
259259
<a data-github-account="tracebit-com" href="https://tracebit.com/?utm_source=htmx">
260260
<img class="dark-hidden" alt="Tracebit Cloud Canaries" src="/img/tracebit-logo.png">
261-
<img class="dark-visbile" alt="Tracebit Cloud Canaries" src="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/img/tracebit-logo-dark.png">
261+
<img class="dark-visible" alt="Tracebit Cloud Canaries" src="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/img/tracebit-logo-dark.png">
262262
</a>
263263
</div>
264264
<div>

www/content/docs.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ your head tag and get going:
129129
An unminified version is also available as well:
130130

131131
```html
132-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/htmx.js" integrity="sha384-2ksKjJrwjL5VxqAkAZAVOPXvMkwAykMaNYegdixAESVr+KqLkKE8XBDoZuwyWVUDv" crossorigin="anonymous"></script>
132+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/htmx.js" integrity="sha384-ksKjJrwjL5VxqAkAZAVOPXvMkwAykMaNYegdixAESVr+KqLkKE8XBDoZuwyWVUDv" crossorigin="anonymous"></script>
133133
```
134134

135135
While the CDN approach is extremely simple, you may want to consider
@@ -1697,6 +1697,8 @@ for exploring this topic.
16971697

16981698
The assignment and checking of CSRF tokens are typically backend responsibilities, but `htmx` can support returning the CSRF token automatically with every request using the `hx-headers` attribute. The attribute needs to be added to the element issuing the request or one of its ancestor elements. This makes the `html` and `body` elements effective global vehicles for adding the CSRF token to the `HTTP` request header, as illustrated below.
16991699

1700+
Note: `hx-boost` does not not update the `<html>` or `<body>` tags; if using this feature with `hx-boost`, make sure to include the CSRF token on an element that _will_ get replaced. Many web frameworks support automatically inserting the CSRF token as a hidden input in HTML forms. This is encouraged whenever possible.
1701+
17001702
```html
17011703
<html lang="en" hx-headers='{"X-CSRF-TOKEN": "CSRF_TOKEN_INSERTED_HERE"}'>
17021704
:

www/content/essays/template-fragments.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,7 @@ Here are some known implementations of the fragment concept:
142142

143143
* Go
144144
* [Standard Library (use block actions)](https://pkg.go.dev/text/template) [[demo]](https://gist.github.com/benpate/f92b77ea9b3a8503541eb4b9eb515d8a)
145+
* [templ](https://templ.guide) [[Fragment documentation]](https://templ.guide/syntax-and-usage/fragments) [[repo]](https://github.com/a-h/templ)
145146
* Java
146147
* [Thymeleaf](https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#fragment-specification-syntax)
147148
* [Chill Templates (currently in early alpha)](https://github.com/bigskysoftware/chill/tree/master/chill-script)

www/content/events.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -275,7 +275,7 @@ You can also override the details of the history restoration request in this eve
275275
* `detail.item.content` - the content of the cache that will be swapped in
276276
* `detail.item.title` - the page title to update from the cache
277277
* `detail.path` - the path and query of the page being restored
278-
* `detial.swapSpec` - the swapSpec to be used containing the defatul swapStyle='innerHTML'
278+
* `detail.swapSpec` - the swapSpec to be used containing the defatul swapStyle='innerHTML'
279279

280280
### Event - `htmx:historyCacheMiss` {#htmx:historyCacheMiss}
281281

@@ -289,7 +289,7 @@ You can also modify the xhr request or other details before it makes the the req
289289
* `detail.historyElt` - the history element or body that will get replaced
290290
* `detail.xhr` - the `XMLHttpRequest` that will retrieve the remote content for restoration
291291
* `detail.path` - the path and query of the page being restored
292-
* `detial.swapSpec` - the swapSpec to be used containing the defatul swapStyle='innerHTML'
292+
* `detail.swapSpec` - the swapSpec to be used containing the defatul swapStyle='innerHTML'
293293

294294
### Event - `htmx:historyCacheMissLoadError` {#htmx:historyCacheMissLoadError}
295295

@@ -314,7 +314,7 @@ You can modify the details before it makes the swap to restore the history
314314
* `detail.xhr` - the `XMLHttpRequest`
315315
* `detail.path` - the path and query of the page being restored
316316
* `detail.response` - the response text that will be swapped in
317-
* `detial.swapSpec` - the swapSpec to be used containing the defatul swapStyle='innerHTML'
317+
* `detail.swapSpec` - the swapSpec to be used containing the defatul swapStyle='innerHTML'
318318

319319
### Event - `htmx:historyRestore` {#htmx:historyRestore}
320320

www/content/examples/click-to-edit.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ The click to edit pattern provides a way to offer inline editing of all or part
3434
<label>Email Address</label>
3535
<input type="email" name="email" value="[email protected]">
3636
</div>
37-
<button class="btn">Submit</button>
37+
<button class="btn" type="submit">Submit</button>
3838
<button class="btn" hx-get="/contact/1">Cancel</button>
3939
</form>
4040
```

www/content/examples/modal-custom.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,8 +132,6 @@ example.
132132
}
133133
```
134134

135-
<script src="https://cdn.jsdelivr.net/npm/htmx.org"></script>
136-
<script src="https://cdn.jsdelivr.net/npm/hyperscript.org"></script>
137135
<script type="text/javascript">
138136

139137
//=========================================================================

0 commit comments

Comments
 (0)