itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-27 13:01:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

move all references to extensions over to the new site/repo

Browse Source
This commit is contained in:
Carson Gross 2024-03-26 16:37:26 -06:00
parent 30a9941b61
commit 45dd5f168d
21 changed files with 65 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
www/content/_index.md
View File

@ -22,7 +22,7 @@ directly in HTML, using [attributes](@/reference.md#attributes), so you can buil
htmx is small ([~14k min.gz'd](https://unpkg.com/htmx.org/dist/)),
[dependency-free](https://github.com/bigskysoftware/htmx/blob/master/package.json),
[extendable](@/extensions/_index.md),
[extendable](https://extensions.htmx.org),
IE11 compatible & has **reduced** code base sizes by [67% when compared with react](@/essays/a-real-world-react-to-htmx-port.md)
<h2>motivation</h2>

4
www/content/api.md
View File

@ -2,7 +2,7 @@
title = "Javascript API"
+++
While it is not a focus of the library, htmx does provide a small API of helper methods, intended mainly for [extension development](@/extensions/_index.md) or for working with [events](@/events.md).
While it is not a focus of the library, htmx does provide a small API of helper methods, intended mainly for [extension development](https://extensions.htmx.org) or for working with [events](@/events.md).
The [hyperscript](https://hyperscript.org) project is intended to provide more extensive scripting support
for htmx-based applications.
@ -180,7 +180,7 @@ to provide custom WebSocket setup.
### Method - `htmx.defineExtension()` {#defineExtension}
Defines a new htmx [extension](@/extensions/_index.md).
Defines a new htmx [extension](https://extensions.htmx.org).
##### Parameters

2
www/content/attributes/hx-ext.md
View File

@ -2,7 +2,7 @@
title = "hx-ext"
+++
The `hx-ext` attribute enables an htmx [extension](@/extensions/_index.md) for an element and all its children.
The `hx-ext` attribute enables an htmx [extension](https://extensions.htmx.org) for an element and all its children.
The value can be a single extension name or a comma separated list of extensions to apply.

2
www/content/attributes/hx-preserve.md
View File

@ -7,7 +7,7 @@ Elements with `hx-preserve` set are preserved by `id` when htmx updates any ance
You *must* set an unchanging `id` on elements for `hx-preserve` to work.
The response requires an element with the same `id`, but its type and other attributes are ignored.
Note that some elements cannot unfortunately be preserved properly, such as `<input type="text">` (focus and caret position are lost), iframes or certain types of videos. To tackle some of these cases we recommend the [morphdom extension](@/extensions/morphdom-swap.md), which does a more elaborate DOM
Note that some elements cannot unfortunately be preserved properly, such as `<input type="text">` (focus and caret position are lost), iframes or certain types of videos. To tackle some of these cases we recommend the [morphdom extension](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/morphdom-swap/README.md), which does a more elaborate DOM
reconciliation.
## Notes

91
www/content/attributes/hx-sse.md
View File

@ -1,91 +0,0 @@
+++
title = "hx-sse"
+++
*Note: This attribute will be migrated to an extension in htmx 2.0, which is available now. Please visit the
[SSE extension page](@/extensions/server-sent-events.md) to learn about the new implementation of SSE as an extension.*
The `hx-sse` allows you to work with [Server Sent Event](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)
`EventSource`s directly from HTML. The value of the attribute can be one or more of the following, separated by white space:
* `connect:<url>` - A URL to establish an `EventSource` against
* `swap:<eventName>` - Swap SSE message content into a DOM node on matching event names
### Swap Message Content
When an SSE connection has been established (using the `connect` keyword) the contents of SSE messages can be swapped into the DOM using the `swap` keyword. This can be done on the element that creates the SSE connection, or any child element of it. Multiple elements can use `swap` to listen for Server Sent Events.
Here is an example:
```html
<div hx-sse="connect:/event_stream swap:eventName">
...
</div>
```
This example connects to a Server Sent Event stream, and begins swapping events named `eventName` into the same element.
Here is another example:
```html
<div hx-sse="connect:/event_stream">
<div hx-sse="swap:eventName1">
...
</div>
<div hx-sse="swap:eventName2">
...
</div>
</div>
```
This example connects the Server Sent Event stream to the parent node, and directs different events to different child nodes based on the event name returned by the server.
### Trigger Server Callbacks
When a connection for server sent events has been established, child elements can listen for these events by using the special [`hx-trigger`](@/attributes/hx-trigger.md) syntax `sse:<event_name>`. This, when combined with an `hx-get` or similar will trigger the element to make a request.
Here is an example:
```html
<div hx-sse="connect:/event_stream">
<div hx-get="/chatroom" hx-trigger="sse:chatter">
...
</div>
</div>
```
This example establishes an SSE connection to the `event_stream` end point which then triggers
a `GET` to the `/chatroom` url whenever the `chatter` event is seen.
### Named Events
The Server Sent Event specification allows servers to optionally include an event name with every event. **Named events** look like this:
```txt
event: EventName
data: <div>Content to swap into your HTML page.</div>
```
```html
<div hx-sse="connect:/server-url swap:eventName"></div>
```
### Data Only Events
Alternatively, servers can provide **data only events** that do not have a name. In this case, Javascript (and HTMX) use the name "message" like this:
```txt
data: <div>Content to swap into your HTML page.</div>
```
```html
<div hx-sse="connect:/server-url swap:message"></div>
```
### Test SSE Server
Htmx includes an SSE test server with many more examples of how to use Server Sent Events. Download the htmx source code from GitHub and navigate to /test/ws-sse to experiment.
## Notes
* `hx-sse` is not inherited

51
www/content/attributes/hx-ws.md
View File

@ -1,51 +0,0 @@
+++
title = "hx-ws"
+++
*Note: This attribute will be migrated to an extension in htmx 2.0, which is available now. Please visit the
[WebSockets extension page](@/extensions/web-sockets.md) to learn about the new implementation of Web Sockets as an extension.*
The `hx-ws` allows you to work with [Web Sockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications)
directly from HTML. The value of the attribute can be one or more of the following, separated by commas:
* `connect:<url>` or `connect:<prefix>:<url>` - A URL to establish an `WebSocket` connection against.
* Prefixes `ws` or `wss` can optionally be specified. If not specified, HTMX defaults to add the location's scheme-type, host and port to have browsers send cookies via websockets.
* `send` - Sends a message to the nearest websocket based on the trigger value for the element (either the natural event
or the event specified by [`hx-trigger`])
Here is an example:
```html
<div hx-ws="connect:/chatroom">
<div id="chat_room">
...
</div>
<form hx-ws="send">
<input name="chat_message">
</form>
</div>
```
This example establishes a WebSocket to the `chatroom` end point. Content that is sent down from the websocket will
be parsed as HTML and swapped in by the `id` property, using the same logic as [Out of Band Swaps](@/attributes/hx-swap-oob.md).
The form uses the `send` syntax to indicate that when it is submitted, the form values should be serialized as JSON
and send to the nearest enclosing `WebSocket`.
The serialized values will include a field, `HEADERS`, that includes the headers normally submitted with an htmx
request.
After an unexpected connection loss due to `Abnormal Closure`, `Service Restart` or `Try Again Later`,
reconnecting is tried until successful.
The default reconnection interval is implemented with the full-jitter exponential-backoff algorithm.
Own implementations can be provided by setting `htmx.config.wsReconnectDelay` to a function with
`retryCount` as its only parameter.
### Test Web Sockets Server
Htmx includes a WebSockets test server with many more examples of how to use Server Sent Events. Download the htmx source code from GitHub and navigate to /test/ws-sse to experiment.
## Notes
* `hx-ws` is not inherited

68
www/content/docs.md
View File

@ -442,9 +442,9 @@ cost of more CPU.
The following extensions are available for morph-style swaps:
* [Idiomorph](https://github.com/bigskysoftware/idiomorph#htmx) - A morphing algorithm created by the htmx developers.
* [Morphdom Swap](@/extensions/morphdom-swap.md) - Based on the [morphdom](https://github.com/patrick-steele-idem/morphdom),
* [Morphdom Swap](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/morphdom-swap/README.md) - Based on the [morphdom](https://github.com/patrick-steele-idem/morphdom),
the original DOM morphing library.
* [Alpine-morph](@/extensions/alpine-morph.md) - Based on the [alpine morph](https://alpinejs.dev/plugins/morph) plugin, plays
* [Alpine-morph](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/alpine-morph/README.md) - Based on the [alpine morph](https://alpinejs.dev/plugins/morph) plugin, plays
well with alpine.js
#### View Transitions {#view-transitions}
@ -817,49 +817,46 @@ and [Server Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Serve
htmx 1.7+ and, if you are writing new code, you are encouraged to use the extensions instead. All new feature work for
both SSE and web sockets will be done in the extensions.
Please visit the [SSE extension](@/extensions/server-sent-events.md) and [WebSocket extension](@/extensions/web-sockets.md)
Please visit the [SSE extension](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/sse/README.md) and [WebSocket extension](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/ws/README.md)
pages to learn more about the new extensions.
</div>
### WebSockets
If you wish to establish a `WebSocket` connection in htmx, you use the [hx-ws](@/attributes/hx-ws.md) attribute:
If you wish to establish a `WebSocket` connection in htmx, you can use the
[Web Socket](https://github.com/bigskysoftware/htmx-extensions/tree/main/src/ws) extension:
```html
<div hx-ws="connect:wss:/chatroom">
<div id="chat_room">
...
</div>
<form hx-ws="send:submit">
<input name="chat_message">
</form>
<div hx-ext="ws" ws-connect="/chatroom">
<div id="notifications"></div>
<div id="chat_room">
...
</div>
<form id="form" ws-send>
<input name="chat_message">
</form>
</div>
```
The `connect` declaration established the connection, and the `send` declaration tells the form to submit values to the socket on `submit`.
The `ws-connect` attribute establishes a WebSocket connection, and the `ws-send`
attribute tells the form to submit values to the socket on `submit`.
More details can be found on the [hx-ws attribute page](@/attributes/hx-ws.md)
More details can be found on the [extension's README.md page](https://github.com/bigskysoftware/htmx-extensions/tree/main/src/ws)
### Server Sent Events {#sse}
[Server Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events) are a way for servers to send events to browsers. It provides a higher-level mechanism for communication between the
server and the browser than websockets.
If you want an element to respond to a Server Sent Event via htmx, you need to do two things:
1. Define an SSE source. To do this, add a [hx-sse](@/attributes/hx-sse.md) attribute on a parent element with
a `connect:<url>` declaration that specifies the URL from which Server Sent Events will be received.
2. Define elements that are descendents of this element that are triggered by server sent events using the
`hx-trigger="sse:<event_name>"` syntax
Here is an example:
To use SSE in htmx, you can use the
[SSE](https://github.com/bigskysoftware/htmx-extensions/tree/main/src/ws) extension:
```html
<body hx-sse="connect:/news_updates">
<div hx-trigger="sse:new_news" hx-get="/news"></div>
</body>
<div hx-ext="sse" sse-connect="/chatroom" sse-swap="message">
Contents of this box will be updated in real time
with every SSE message received from the chatroom.
</div>
```
Depending on your implementation, this may be more efficient than the polling example above since the server would
@ -1109,7 +1106,7 @@ Please see the [Animation Guide](@/examples/animations.md) for more details on t
## Extensions
Htmx has an extension mechanism that allows you to customize the libraries' behavior.
Extensions [are defined in javascript](@/extensions/_index.md#defining) and then used via
Extensions [are defined in javascript](https://github.com/bigskysoftware/htmx-extensions/tree/main?tab=readme-ov-file#defining-an-extension) and then used via
the [`hx-ext`](@/attributes/hx-ext.md) attribute:
```html
@ -1119,24 +1116,7 @@ the [`hx-ext`](@/attributes/hx-ext.md) attribute:
</div>
```
If you are interested in adding your own extension to htmx, please [see the extension docs](@/extensions/_index.md)
### Included Extensions
Htmx includes some extensions that are tested against the htmx code base. Here are a few:
| Extension | Description
|-----------|-------------
| [`json-enc`](@/extensions/json-enc.md) | use JSON encoding in the body of requests, rather than the default `x-www-form-urlencoded`
| [`morphdom-swap`](@/extensions/morphdom-swap.md) | an extension for using the [morphdom](https://github.com/patrick-steele-idem/morphdom) library as the swapping mechanism in htmx.
| [`alpine-morph`](@/extensions/alpine-morph.md) | an extension for using the [Alpine.js morph](https://alpinejs.dev/plugins/morph) plugin as the swapping mechanism in htmx.
| [`client-side-templates`](@/extensions/client-side-templates.md) | support for client side template processing of JSON responses
| [`path-deps`](@/extensions/path-deps.md) | an extension for expressing path-based dependencies [similar to intercoolerjs](http://intercoolerjs.org/docs.html#dependencies)
| [`class-tools`](@/extensions/class-tools.md) | an extension for manipulating timed addition and removal of classes on HTML elements
| [`multi-swap`](@/extensions/multi-swap.md) | allows to swap multiple elements with different swap methods
| [`response-targets`](@/extensions/response-targets.md) | allows to swap elements for responses with HTTP codes beyond `200`
See the [extensions page](@/extensions/_index.md#included) for a complete list.
If you are interested in adding your own extension to htmx, please [see the extension docs](https://github.com/bigskysoftware/htmx-extensions/tree/main?tab=readme-ov-file#defining-an-extension)
## Events & Logging {#events}

2
www/content/essays/is-htmx-another-javascript-framework.md
View File

@ -43,7 +43,7 @@ If you use htmx to handle a non-trivial number of your website's network request
You can definitely use htmx in a library-like manner, to add dynamic functionality to just a few sections of your web page. But you can write [React in this library-like manner too](https://www.patterns.dev/vanilla/islands-architecture) and nobody argues that React isn't a framework. Suffice to say that many people who use htmx in their applications are doing so in a way that bends to the demands of htmx, as a framework for building hypermedia applications.
As they should! Building with htmx works a lot better if you play to its strengths. You can send JSON-formatted form bodies, [if you really insist](@/extensions/json-enc.md). But you shouldn't! It's simpler to just use `application/x-www-form-urlencoded` bodies, and write an endpoint that accepts them. You can write an endpoint that is re-used across multiple different clients, [if you really insist](@/essays/why-tend-not-to-use-content-negotiation.md). But you shouldn't! It's simpler to [split your data and your hypermedia APIs into separate URLs](@/essays/splitting-your-apis.md). Yes, htmx can be used as a library, but maybe let it be your framework too.
As they should! Building with htmx works a lot better if you play to its strengths. You can send JSON-formatted form bodies, [if you really insist](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/json-enc/README.md). But you shouldn't! It's simpler to just use `application/x-www-form-urlencoded` bodies, and write an endpoint that accepts them. You can write an endpoint that is re-used across multiple different clients, [if you really insist](@/essays/why-tend-not-to-use-content-negotiation.md). But you shouldn't! It's simpler to [split your data and your hypermedia APIs into separate URLs](@/essays/splitting-your-apis.md). Yes, htmx can be used as a library, but maybe let it be your framework too.
That does not mean, however, that htmx is Just Another JavaScript Framework, because htmx has a huge advantage that the other frameworks do not: HTML.

2
www/content/examples/animations.md
View File

@ -206,7 +206,7 @@ is a form that on submit will change its look to indicate that a request is bein
## Using the htmx `class-tools` Extension
Many interesting animations can be created by using the [`class-tools`](@/extensions/class-tools.md) extension.
Many interesting animations can be created by using the [`class-tools`](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/class-tools/README.md) extension.
Here is an example that toggles the opacity of a div. Note that we set the toggle time to be a bit longer than
the transition time. This avoids flickering that can happen if the transition is interrupted by a class change.

2
www/content/examples/progress-bar.md
View File

@ -41,7 +41,7 @@ style attribute into its new value. This, when coupled with CSS transitions, ma
rather than jumpy.
Finally, when the process is complete, a server returns `HX-Trigger: done` header, which triggers an update of the UI to "Complete" state
with a restart button added to the UI (we are using the [`class-tools`](@/extensions/class-tools.md) extension in this example to add fade-in effect on the button):
with a restart button added to the UI (we are using the [`class-tools`](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/class-tools/README.md) extension in this example to add fade-in effect on the button):
```html
<div hx-trigger="done" hx-get="/job" hx-swap="outerHTML" hx-target="this">

2
www/content/examples/update-other-content.md
View File

@ -193,7 +193,7 @@ A final approach is to use REST-ful path dependencies to refresh the table. Int
to htmx, had [path-based dependencies](https://intercoolerjs.org/docs.html#dependencies) integrated into the
library.
htmx dropped this as a core feature, but supports an extension, [path deps](@/extensions/path-deps.md), that gives you
htmx dropped this as a core feature, but supports an extension, [path deps](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/path-deps/README.md), that gives you
similar functionality.
Updating our example to use the extension would involve loading the extension javascript and then

18
www/content/migration-guide-intercooler.md
View File

@ -18,7 +18,7 @@ It is worth noting the difference in approach between what Intercooler set out t
This capability is augmented in primarily 2 ways:
1. [Extensions](@/extensions/_index.md#reference). The htmx extension framework allows for custom extensions/plugins to achieve specific functionality. An example of this is the dependencies mechanism baked into Intercooler, which is not present in htmx core. but available via [an extension](@/extensions/path-deps.md). There are also other extensions which enables new behavior that Intercooler was not capable of out the box, e.g. the [`preload` extension](@/extensions/preload.md)
1. [Extensions](https://extensions.htmx.org#reference). The htmx extension framework allows for custom extensions/plugins to achieve specific functionality. An example of this is the dependencies mechanism baked into Intercooler, which is not present in htmx core. but available via [an extension](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/path-deps/README.md). There are also other extensions which enables new behavior that Intercooler was not capable of out the box, e.g. the [`preload` extension](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/preload/README.md)
2. Using the htmx events system with vanilla javascript, [alpine.js](https://github.com/alpinejs/alpine/) or [hyperscript](https://hyperscript.org). Hyperscript is a small, open scripting language designed to be embedded in HTML, inspired by HyperTalk and is a companion project of htmx.
@ -53,7 +53,7 @@ See the [htmx documentation on hyperscript](https://hyperscript.org) for practic
| [`ic-attr-src`](https://intercoolerjs.org/attributes/ic-attr-src.html) | None. No direct equivalent functionality exists (TBC)
| [`ic-confirm`](https://intercoolerjs.org/attributes/ic-confirm.html) | [`hx-confirm`](@/attributes/hx-confirm.md)
| [`ic-delete-from`](https://intercoolerjs.org/attributes/ic-delete-from.html) | [`hx-delete`](@/attributes/hx-delete.md)
| [`ic-deps`](https://intercoolerjs.org/attributes/ic-deps.html) | `hx-trigger="path-deps"` along with `path-deps="/foo/bar"`. (Requires the [`path-deps` extension](@/extensions/path-deps.md))
| [`ic-deps`](https://intercoolerjs.org/attributes/ic-deps.html) | `hx-trigger="path-deps"` along with `path-deps="/foo/bar"`. (Requires the [`path-deps` extension](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/path-deps/README.md))
| [`ic-disable-when-doc-hidden`](https://intercoolerjs.org/attributes/ic-disable-when-doc-hidden.html) | None. No direct equivalent functionality exists (TBC)
| [`ic-disable-when-doc-inactive`](https://intercoolerjs.org/attributes/ic-disable-when-doc-inactive.html) | None. No direct equivalent functionality exists (TBC)
| [`ic-enhance`](https://intercoolerjs.org/attributes/ic-enhance.html) | [`hx-boost`](@/attributes/hx-boost.md)
@ -88,18 +88,18 @@ See the [htmx documentation on hyperscript](https://hyperscript.org) for practic
| [`ic-scroll-offset`](https://intercoolerjs.org/attributes/ic-scroll-offset.html) | None. No direct equivalent functionality exists
| [`ic-scroll-to-target`](https://intercoolerjs.org/attributes/ic-scroll-to-target.html) | See the `scroll` and `show` modifiers on the [`hx-swap`](@/attributes/hx-swap.md) attribute
| [`ic-select-from-response`](https://intercoolerjs.org/attributes/ic-select-from-response.html) | [`hx-select`](@/attributes/hx-select.md)
| [`ic-src`](https://intercoolerjs.org/attributes/ic-src.html) | None. Use [`hx-get`](@/attributes/hx-get.md) in conjunction with triggers or the [`path-deps` extension](@/extensions/path-deps.md)
| [`ic-sse-src`](https://intercoolerjs.org/attributes/ic-sse-src.html) | [`hx-sse`](@/attributes/hx-sse.md)
| [`ic-src`](https://intercoolerjs.org/attributes/ic-src.html) | None. Use [`hx-get`](@/attributes/hx-get.md) in conjunction with triggers or the [`path-deps` extension](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/path-deps/README.md)
| [`ic-sse-src`](https://intercoolerjs.org/attributes/ic-sse-src.html) | `hx-sse`
| [`ic-style-src`](https://intercoolerjs.org/attributes/ic-style-src.html) | None. No direct equivalent functionality exists (TBC)
| [`ic-swap-style`](https://intercoolerjs.org/attributes/ic-swap-style.html) | [`hx-swap`](@/attributes/hx-swap.md)
| [`ic-switch-class`](https://intercoolerjs.org/attributes/ic-switch-class.html) | None. See the [htmx documentation on _hyperscript](https://hyperscript.org) for an example on how to implement it using [_hyperscript](https://hyperscript.org) and the [`htmx:beforeOnLoad` event](https://htmx.org/events#htmx:beforeOnLoad)
| [`ic-target`](https://intercoolerjs.org/attributes/ic-target.html) | [`hx-target`](@/attributes/hx-target.md)
| [`ic-transform-response`](https://intercoolerjs.org/attributes/ic-transform-response.html) | None. The [`client-side-templates` extension](@/extensions/client-side-templates.md) enables JSON response transformation via templating engines like [mustache](https://github.com/janl/mustache.js), [handlebars](https://handlebarsjs.com/) or [nunjucks](https://mozilla.github.io/nunjucks/)
| [`ic-transform-response`](https://intercoolerjs.org/attributes/ic-transform-response.html) | None. The [`client-side-templates` extension](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/client-side-templates/README.md) enables JSON response transformation via templating engines like [mustache](https://github.com/janl/mustache.js), [handlebars](https://handlebarsjs.com/) or [nunjucks](https://mozilla.github.io/nunjucks/)
| [`ic-transition-duration`](https://intercoolerjs.org/attributes/ic-transition-duration.html) | None. Equivalent functionality can be achieved by relying on the nature of [htmx's swapping mechanism and CSS transitions](@/docs.md#css_transitions)
| [`ic-trigger-delay`](https://intercoolerjs.org/attributes/ic-trigger-delay.html) | Use [`hx-trigger`](@/attributes/hx-trigger.md) with [modifiers](@/docs.md#trigger-modifiers)
| [`ic-trigger-from`](https://intercoolerjs.org/attributes/ic-trigger-from.html) | Use [`hx-trigger`](@/attributes/hx-trigger.md) with `from:` clause
| [`ic-trigger-on`](https://intercoolerjs.org/attributes/ic-trigger-on.html) | [`hx-trigger`](@/attributes/hx-trigger.md)
| [`ic-verb`](https://intercoolerjs.org/attributes/ic-verb.html) | None. By default htmx sends the actual http method. You can however non-`GET` verbs to `POST` via the [`method-override` extension](@/extensions/method-override.md)
| [`ic-verb`](https://intercoolerjs.org/attributes/ic-verb.html) | None. By default htmx sends the actual http method. You can however non-`GET` verbs to `POST` via the [`method-override` extension](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/method-override/README.md)
#### Request parameters
@ -107,7 +107,7 @@ See the [htmx documentation on hyperscript](https://hyperscript.org) for practic
| Intercooler | htmx |
|-----------|-------------|
| `ic-request` | None. Use `HX-Request` header
| `_method` | None. Use [`method-override`](@/extensions/method-override.md) extension and its provided `X-HTTP-Method-Override` header
| `_method` | None. Use [`method-override`](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/method-override/README.md) extension and its provided `X-HTTP-Method-Override` header
| `ic-element-id` | None
| `ic-element-name` | None
| `ic-target-id` | None. Use `HX-Target` header
@ -166,7 +166,7 @@ See the [htmx documentation on hyperscript](https://hyperscript.org) for practic
| Intercooler | htmx |
|-----------|-------------|
| `Intercooler.refresh(eltOrPath)` | `PathDeps.refresh()` (requires the [`path-deps`](@/extensions/path-deps.md) extension)
| `Intercooler.refresh(eltOrPath)` | `PathDeps.refresh()` (requires the [`path-deps`](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/path-deps/README.md) extension)
| `Intercooler.triggerRequest(elt, handler)` | [`htmx.trigger()`](@/api.md#trigger)
| `Intercooler.processNodes(elt)` | [`htmx.process()`](@/api.md#process)
| `Intercooler.closestAttrValue(elt, attr)` | [`htmx.closest()`](@/api.md#closest) can be used with any selector
@ -183,7 +183,7 @@ See the [htmx documentation on hyperscript](https://hyperscript.org) for practic
| Intercooler | htmx |
|-----------|-------------|
| `<meta name="intercoolerjs:use-data-prefix" content="true"/>` | None. You can simply use the `data-` prefix without specifying a meta tag. htmx will automatically recognize htmx attributes like this: `<a data-hx-post="/click">Click Me!</a>`
| `<meta name="intercoolerjs:use-actual-http-method" content="true"/>` | None. By default htmx sends the actual http method. You can however change the verb for all non-GET requests to POST via the [`method-override` extension](@/extensions/method-override.md)
| `<meta name="intercoolerjs:use-actual-http-method" content="true"/>` | None. By default htmx sends the actual http method. You can however change the verb for all non-GET requests to POST via the [`method-override` extension](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/method-override/README.md)
[Hyperscript]: https://hyperscript.org

2
www/content/posts/2020-10-27-htmx-0.3.0-is-released.md
View File

@ -23,7 +23,7 @@ me know if you see anything funny.
an event to be triggered after a given life cycle event (instead of before the swap)
* The `requestConfig` is now passed out to events surrounding the AJAX life cycle
* Evaluate `<script>` tags as javascript when no language is defined on them
* A new [`event-header`](@/extensions/event-header.md) extension, which will include a serialized JSON representation of
* A new [`event-header`](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/event-header/README.md) extension, which will include a serialized JSON representation of
the triggering event in requests
#### Bug Fixes

14
www/content/posts/2020-5-24-htmx-0.0.4-is-released.md
View File

@ -16,15 +16,15 @@ This one had a lot of code clean up along with two major features:
##### Extensions
First off, htmx now has a proper [extensions](@/extensions/_index.md) mechanism, allowing us to create extensions that plug
First off, htmx now has a proper [extensions](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/_index/README.md) mechanism, allowing us to create extensions that plug
in to the htmx life cycle and provide functionality that isn't in the core library. Some extensions that have shipped
with this release and that you might find useful include:
* [`morphdom-swap`](@/extensions/morphdom-swap.md) - allows you to use the morphdom library for swapping in new content
* [`class-tools`](@/extensions/class-tools.md) - replaces the retired `hx-classes` attribute
* [`json-enc`](@/extensions/json-enc.md) - allows you to encode AJAX request bodies in JSON
* [`morphdom-swap`](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/morphdom-swap/README.md) - allows you to use the morphdom library for swapping in new content
* [`class-tools`](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/class-tools/README.md) - replaces the retired `hx-classes` attribute
* [`json-enc`](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/json-enc/README.md) - allows you to encode AJAX request bodies in JSON
See the full list of included [extensions here](@/extensions/_index.md#included).
See the full list of included [extensions here](https://extensions.htmx.org#included).
This extension mechanism will allow us to introduce useful HTML-oriented features while keeping the core htmx code
focused on loading content.
@ -32,7 +32,7 @@ focused on loading content.
##### Web Socket & Reworked Server Sent Events Support
htmx now has experimental support for [Web Sockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications)
with the [hx-ws](@/attributes/hx-ws.md) attribute:
with the `hx-ws` attribute:
```html
<div hx-ws="connect wss:/chatroom">
@ -46,7 +46,7 @@ with the [hx-ws](@/attributes/hx-ws.md) attribute:
```
Additionally, the [Server Sent Event](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)
support attribute was renamed to [hx-sse](@/attributes/hx-sse.md) and the syntax was standardized with the new web socket support
support attribute was renamed to `hx-sse` and the syntax was standardized with the new web socket support
syntax:
```html

4
www/content/posts/2020-9-18-htmx-0.1.0-is-released.md
View File

@ -14,12 +14,12 @@ release [0.0.2 hyperscript](https://unpkg.com/hyperscript.org@0.0.2).
#### Breaking Changes
* The SSE attribute [`hx-sse`](@/attributes/hx-sse.md) and the Web Sockets attribute [`hx-ws`](@/attributes/hx-ws.md) have changed syntax to now use colon separators: `hx-sse='connect:/chat swap:message'`
* The SSE attribute `hx-sse` and the Web Sockets attribute `hx-ws` have changed syntax to now use colon separators: `hx-sse='connect:/chat swap:message'`
* Hyperscript no longer requires a `_hyperscript.start()` call to initialize.
#### New Features
* The SSE attribute [`hx-sse`](@/attributes/hx-sse.md) allows for swapping content directly on an event, in addition to triggering an htmx element,
* The SSE attribute `hx-sse` allows for swapping content directly on an event, in addition to triggering an htmx element,
with the new `swap:<event name>` syntax.
* [`hx-target`](@/attributes/hx-target.md) now supports a `find` syntax to find elements below the element by a CSS selector
* htmx plays better with deferred loading and many package managers

6
www/content/posts/2021-1-6-htmx-1.1.0-is-released.md
View File

@ -10,7 +10,7 @@ tag = ["posts", "announcements"]
I'm happy to announce the [1.1.0 release](https://unpkg.com/browse/htmx.org@1.1.0/) of htmx.
This is a surprisingly big release, but the star of the show isn't htmx itself, but rather the new
[preload extension](@/extensions/preload.md) which allows you to preload requests into the cache,
[preload extension](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/preload/README.md) which allows you to preload requests into the cache,
cutting down on latency. (This extension is used in the htmx website!)
There are also new examples, including [keyboard shortcuts](@/examples/keyboard-shortcuts.md) and
@ -18,7 +18,7 @@ There are also new examples, including [keyboard shortcuts](@/examples/keyboard-
### Changes
* Newly added [preload extension](@/extensions/preload.md) allows you to preload resources for lower
* Newly added [preload extension](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/preload/README.md) allows you to preload resources for lower
latency requests!
* Support the `ignore:` modifier for extensions
* Updated form variable order inclusion to include the enclosing form *last* so that, in the presence of multiple
@ -29,7 +29,7 @@ There are also new examples, including [keyboard shortcuts](@/examples/keyboard-
`HX-Active-Element-Name`, `HX-Active-Element-Value`
* Added the [`hx-preserve`](@/attributes/hx-preserve.md) attribute, which allows
you to preserve elements across requests (for example, to keep a video element playing properly)
* The [path-deps](@/extensions/path-deps.md#refresh) now surfaces a small api
* The [path-deps](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/path-deps/README.md#refresh) now surfaces a small api
for refreshing path dependencies manually in javascript
* Now support the `from:` clause on [`hx-trigger`](@/attributes/hx-trigger.md) to
allow an element to respond to events on other elements.

2
www/content/posts/2021-2-13-htmx-1.2.0-is-released.md
View File

@ -16,7 +16,7 @@ I'm happy to announce the [1.2.0 release](https://unpkg.com/browse/htmx.org@1.2.
* The new `hx-headers` attribute allows you to add headers to a request via an attribute. Like `hx-vals` it supports
JSON or javascript via the `javascript:` prefix
* `hx-include` will now include all inputs under an element, even if that element is not a form tag
* The [preload extension](@/extensions/preload.md) now offers a `preload-images="true"` attribute that will aggressively load images in preloaded content
* The [preload extension](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/preload/README.md) now offers a `preload-images="true"` attribute that will aggressively load images in preloaded content
* On requests driven by a history cache miss, the new `HX-History-Restore-Request` header is included so that the server
can differentiate between history requests and normal requests

8
www/content/posts/2022-02-22-htmx-1.7.0-is-released.md
View File

@ -14,7 +14,7 @@ I'm happy to announce the [1.7.0 release](https://unpkg.com/browse/htmx.org@1.7.
* The new [`hx-sync`](@/attributes/hx-sync.md) attribute allows you to synchronize multiple element requests on a single
element using various strategies (e.g. replace)
* You can also now abort an element making a request by sending it the `htmx:abort` event
* [Server Sent Events](@/extensions/server-sent-events.md) and [Web Sockets](@/extensions/web-sockets.md) are now available as
* [Server Sent Events](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/sse/README.md) and [Web Sockets](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/ws/README.md) are now available as
extensions, in addition to the normal core support. In htmx 2.0, the current `hx-sse` and `hx-ws` attributes will be
moved entirely out to these new extensions. By moving these features to extensions we will be able to add functionality
to both of them without compromising the core file size of htmx. You are encouraged to move over to the new
@ -22,10 +22,10 @@ I'm happy to announce the [1.7.0 release](https://unpkg.com/browse/htmx.org@1.7.
* You can now mask out [attribute inheritance](@/docs.md#inheritance) via the [`hx-disinherit`](@/attributes/hx-disinherit.md) attribute.
* The `HX-Push` header can now have the `false` value, which will prevent a history snapshot from occurring.
* Many new extensions, with a big thanks to all the contributors!
* A new [`alpine-morph`](@/extensions/alpine-morph.md) extension allows you to use Alpine's swapping engine, which preserves Alpine state when you have entire Alpine components swapped by htmx.
* A [restored](@/extensions/restored.md) extension was added that will trigger a `restore` event on all elements in the DOM
* A new [`alpine-morph`](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/alpine-morph/README.md) extension allows you to use Alpine's swapping engine, which preserves Alpine state when you have entire Alpine components swapped by htmx.
* A [restored](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/restored/README.md) extension was added that will trigger a `restore` event on all elements in the DOM
on history restoration.
* A [loading-states](@/extensions/loading-states.md) extension was added that allows you to easily manage loading states
* A [loading-states](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/loading-states/README.md) extension was added that allows you to easily manage loading states
while a request is in flight, including disabling elements, and adding and removing CSS classes.
* The `this` symbol now resolves properly for the [`hx-include`](@/attributes/hx-include.md) and [`hx-indicator`](@/attributes/hx-indicator.md)
attributes

4
www/content/posts/2022-11-04-htmx-1.8.3-is-released.md
View File

@ -13,9 +13,9 @@ I'm happy to announce the [1.8.3 release](https://unpkg.com/browse/htmx.org@1.8.
* A new [`htmx:confirm` event](@/events.md#htmx:confirm) was added that allows for asynchronous confirmation dialogs to
be integrated into htmx requests
* The new [head-support](@/extensions/head-support.md) extension allows for more elaborate head tag merging than standard htmx
* The new [head-support](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/head-support/README.md) extension allows for more elaborate head tag merging than standard htmx
supports. This functionality may be integrated into htmx 2.0, depending on feedback.
* The new [multi-swap](@/extensions/multi-swap.md) provides more elaborate swapping of multiple elements on a screen using
* The new [multi-swap](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/multi-swap/README.md) extension provides more elaborate swapping of multiple elements on a screen using
a custom swap strategy
### Improvements & Bug fixes

2
www/content/posts/2023-01-17-htmx-1.8.5-is-released.md
View File

@ -14,7 +14,7 @@ I'm happy to announce the [1.8.5 release](https://unpkg.com/browse/htmx.org@1.8.
* Support a new optional cache-busting configuration option, `getCacheBusterParam`, to allow browsers to disambiguate
between `GET` requests from htmx and from the raw browser
* Support new `hx-history='false'` attribute, to prevent sensitive data from being stored in the history cache. (Thank you @croxton!)
* Extensive new event-oriented features are available in the [Web Socket](@/extensions/web-sockets.md) extension (Thank you @Renerick!)
* Extensive new event-oriented features are available in the [Web Socket](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/ws/README.md) extension (Thank you @Renerick!)
### Improvements & Bug fixes

6
www/content/reference.md
View File

@ -65,11 +65,9 @@ All other attributes available in htmx.
| [`hx-put`](@/attributes/hx-put.md) | issues a `PUT` to the specified URL |
| [`hx-replace-url`](@/attributes/hx-replace-url.md) | replace the URL in the browser location bar |
| [`hx-request`](@/attributes/hx-request.md) | configures various aspects of the request |
| [`hx-sse`](@/extensions/server-sent-events.md) | has been moved to an extension. [Documentation for older versions](@/attributes/hx-sse.md) |
| [`hx-sync`](@/attributes/hx-sync.md) | control how requests made by different elements are synchronized |
| [`hx-validate`](@/attributes/hx-validate.md) | force elements to validate themselves before a request |
| [`hx-vars`](@/attributes/hx-vars.md) | adds values dynamically to the parameters to submit with the request (deprecated, please use [`hx-vals`](@/attributes/hx-vals.md)) |
| [`hx-ws`](@/extensions/web-sockets.md) | has been moved to an extension. [Documentation for older versions](@/attributes/hx-ws.md) |
</div>
@ -189,7 +187,7 @@ All other attributes available in htmx.
| [`htmx.config`](@/api.md#config) | A property that holds the current htmx config object
| [`htmx.createEventSource`](@/api.md#createEventSource) | A property holding the function to create SSE EventSource objects for htmx
| [`htmx.createWebSocket`](@/api.md#createWebSocket) | A property holding the function to create WebSocket objects for htmx
| [`htmx.defineExtension()`](@/api.md#defineExtension) | Defines an htmx [extension](@/extensions/_index.md)
| [`htmx.defineExtension()`](@/api.md#defineExtension) | Defines an htmx [extension](https://extensions.htmx.org)
| [`htmx.find()`](@/api.md#find) | Finds a single element matching the selector
| [`htmx.findAll()` `htmx.findAll(elt, selector)`](@/api.md#find) | Finds all elements matching a given selector
| [`htmx.logAll()`](@/api.md#logAll) | Installs a logger that will log all htmx events
@ -201,7 +199,7 @@ All other attributes available in htmx.
| [`htmx.process()`](@/api.md#process) | Processes the given element and its children, hooking up any htmx behavior
| [`htmx.remove()`](@/api.md#remove) | Removes the given element
| [`htmx.removeClass()`](@/api.md#removeClass) | Removes a class from the given element
| [`htmx.removeExtension()`](@/api.md#removeExtension) | Removes an htmx [extension](@/extensions/_index.md)
| [`htmx.removeExtension()`](@/api.md#removeExtension) | Removes an htmx [extension](https://extensions.htmx.org)
| [`htmx.swap()`](@/api.md#swap) | Performs swapping (and settling) of HTML content
| [`htmx.takeClass()`](@/api.md#takeClass) | Takes a class from other elements for the given element
| [`htmx.toggleClass()`](@/api.md#toggleClass) | Toggles a class from the given element