Skip to content

Commit

Permalink
move general extension docs back to htmx.org/extensions and include c…
Browse files Browse the repository at this point in the history
…ore extension documentation on the site
  • Loading branch information
1cg committed Oct 4, 2024
1 parent f4e6786 commit 5b2fe2c
Show file tree
Hide file tree
Showing 43 changed files with 1,125 additions and 51 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
* Better degredation of `hx-boost` on forms with query parameters in their `action`
* Improved shadowRoot support
* Many smaller bug fixes
* Moved the core extension documentation back to <https://htmx.org/extensions>

## [2.0.2] - 2024-08-12
* no longer boost forms of type `dialog`
Expand Down
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ directly in HTML, using [attributes](https://htmx.org/reference#attributes), so

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](https://extensions.htmx.org/)
[extendable](https://htmx.org/extensions)

## motivation

Expand Down
2 changes: 1 addition & 1 deletion dist/ext/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@ These are legacy extensions for htmx 1.x and are **NOT** actively maintained or
They are here because we unfortunately linked to unversioned unpkg URLs in the installation guides for them
in 1.x, so we need to keep them here to preserve those URLs and not break existing users functionality.

If you are looking for extensions for htmx 2.x, please see the [htmx 2.0 extensions site](https://extensions.htmx.org),
If you are looking for extensions for htmx 2.x, please see the [htmx 2.0 extensions site](https://htmx.org/extensions),
which has links to the new extensions repos (They have all been moved to their own NPM projects and URLs, like
they should have been from the start!)
2 changes: 1 addition & 1 deletion dist/ext/ajax-header.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
if (htmx.version && !htmx.version.startsWith("1.")) {
console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
". It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
". It is recommended that you move to the version of this extension found on https://htmx.org/extensions")
}
htmx.defineExtension('ajax-header', {
onEvent: function (name, evt) {
Expand Down
2 changes: 1 addition & 1 deletion dist/ext/alpine-morph.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
if (htmx.version && !htmx.version.startsWith("1.")) {
console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
". It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
". It is recommended that you move to the version of this extension found on https://htmx.org/extensions")
}
htmx.defineExtension('alpine-morph', {
isInlineSwap: function (swapStyle) {
Expand Down
2 changes: 1 addition & 1 deletion dist/ext/class-tools.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

if (htmx.version && !htmx.version.startsWith("1.")) {
console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
". It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
". It is recommended that you move to the version of this extension found on https://htmx.org/extensions")
}

function splitOnWhitespace(trigger) {
Expand Down
2 changes: 1 addition & 1 deletion dist/ext/client-side-templates.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
if (htmx.version && !htmx.version.startsWith("1.")) {
console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
". It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
". It is recommended that you move to the version of this extension found on https://htmx.org/extensions")
}
htmx.defineExtension('client-side-templates', {
transformResponse : function(text, xhr, elt) {
Expand Down
2 changes: 1 addition & 1 deletion dist/ext/debug.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
if (htmx.version && !htmx.version.startsWith("1.")) {
console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
". It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
". It is recommended that you move to the version of this extension found on https://htmx.org/extensions")
}
htmx.defineExtension('debug', {
onEvent: function (name, evt) {
Expand Down
2 changes: 1 addition & 1 deletion dist/ext/disable-element.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
if (htmx.version && !htmx.version.startsWith("1.")) {
console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
". It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
". It is recommended that you move to the version of this extension found on https://htmx.org/extensions")
}
// Disable Submit Button
htmx.defineExtension('disable-element', {
Expand Down
2 changes: 1 addition & 1 deletion dist/ext/event-header.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
(function(){
if (htmx.version && !htmx.version.startsWith("1.")) {
console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
". It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
". It is recommended that you move to the version of this extension found on https://htmx.org/extensions")
}
function stringifyEvent(event) {
var obj = {};
Expand Down
2 changes: 1 addition & 1 deletion dist/ext/head-support.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

if (htmx.version && !htmx.version.startsWith("1.")) {
console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
". It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
". It is recommended that you move to the version of this extension found on https://htmx.org/extensions")
}

var api = null;
Expand Down
2 changes: 1 addition & 1 deletion dist/ext/include-vals.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
(function(){
if (htmx.version && !htmx.version.startsWith("1.")) {
console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
". It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
". It is recommended that you move to the version of this extension found on https://htmx.org/extensions")
}

function mergeObjects(obj1, obj2) {
Expand Down
2 changes: 1 addition & 1 deletion dist/ext/json-enc.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
if (htmx.version && !htmx.version.startsWith("1.")) {
console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
". It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
". It is recommended that you move to the version of this extension found on https://htmx.org/extensions")
}
htmx.defineExtension('json-enc', {
onEvent: function (name, evt) {
Expand Down
2 changes: 1 addition & 1 deletion dist/ext/loading-states.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

if (htmx.version && !htmx.version.startsWith("1.")) {
console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
". It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
". It is recommended that you move to the version of this extension found on https://htmx.org/extensions")
}

let loadingStatesUndoQueue = []
Expand Down
2 changes: 1 addition & 1 deletion dist/ext/method-override.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
if (htmx.version && !htmx.version.startsWith("1.")) {
console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
". It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
". It is recommended that you move to the version of this extension found on https://htmx.org/extensions")
}
htmx.defineExtension('method-override', {
onEvent: function (name, evt) {
Expand Down
2 changes: 1 addition & 1 deletion dist/ext/morphdom-swap.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
if (htmx.version && !htmx.version.startsWith("1.")) {
console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
". It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
". It is recommended that you move to the version of this extension found on https://htmx.org/extensions")
}
htmx.defineExtension('morphdom-swap', {
isInlineSwap: function(swapStyle) {
Expand Down
2 changes: 1 addition & 1 deletion dist/ext/multi-swap.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

if (htmx.version && !htmx.version.startsWith("1.")) {
console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
". It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
". It is recommended that you move to the version of this extension found on https://htmx.org/extensions")
}

/** @type {import("../htmx").HtmxInternalApi} */
Expand Down
2 changes: 1 addition & 1 deletion dist/ext/path-deps.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
'use strict';
if (htmx.version && !htmx.version.startsWith("1.")) {
console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
". It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
". It is recommended that you move to the version of this extension found on https://htmx.org/extensions")
}
// Save a reference to the global object (window in the browser)
var _root = this;
Expand Down
2 changes: 1 addition & 1 deletion dist/ext/path-params.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
if (htmx.version && !htmx.version.startsWith("1.")) {
console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
". It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
". It is recommended that you move to the version of this extension found on https://htmx.org/extensions")
}
htmx.defineExtension('path-params', {
onEvent: function(name, evt) {
Expand Down
2 changes: 1 addition & 1 deletion dist/ext/preload.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
if (htmx.version && !htmx.version.startsWith("1.")) {
console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
". It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
". It is recommended that you move to the version of this extension found on https://htmx.org/extensions")
}
// This adds the "preload" extension to htmx. By default, this will
// preload the targets of any tags with `href` or `hx-get` attributes
Expand Down
2 changes: 1 addition & 1 deletion dist/ext/rails-method.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
if (htmx.version && !htmx.version.startsWith("1.")) {
console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
". It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
". It is recommended that you move to the version of this extension found on https://htmx.org/extensions")
}
htmx.defineExtension('rails-method', {
onEvent: function (name, evt) {
Expand Down
2 changes: 1 addition & 1 deletion dist/ext/remove-me.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
(function(){
if (htmx.version && !htmx.version.startsWith("1.")) {
console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
". It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
". It is recommended that you move to the version of this extension found on https://htmx.org/extensions")
}
function maybeRemoveMe(elt) {
var timing = elt.getAttribute("remove-me") || elt.getAttribute("data-remove-me");
Expand Down
2 changes: 1 addition & 1 deletion dist/ext/response-targets.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

if (htmx.version && !htmx.version.startsWith("1.")) {
console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
". It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
". It is recommended that you move to the version of this extension found on https://htmx.org/extensions")
}

/** @type {import("../htmx").HtmxInternalApi} */
Expand Down
2 changes: 1 addition & 1 deletion dist/ext/restored.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
if (htmx.version && !htmx.version.startsWith("1.")) {
console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
". It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
". It is recommended that you move to the version of this extension found on https://htmx.org/extensions")
}
htmx.defineExtension('restored', {
onEvent : function(name, evt) {
Expand Down
2 changes: 1 addition & 1 deletion dist/ext/sse.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ This extension adds support for Server Sent Events to htmx. See /www/extensions

if (htmx.version && !htmx.version.startsWith("1.")) {
console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
". It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
". It is recommended that you move to the version of this extension found on https://htmx.org/extensions")
}

/** @type {import("../htmx").HtmxInternalApi} */
Expand Down
2 changes: 1 addition & 1 deletion dist/ext/ws.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ This extension adds support for WebSockets to htmx. See /www/extensions/ws.md f

if (htmx.version && !htmx.version.startsWith("1.")) {
console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version +
". It is recommended that you move to the version of this extension found on https://extensions.htmx.org")
". It is recommended that you move to the version of this extension found on https://htmx.org/extensions")
}

/** @type {import("../htmx").HtmxInternalApi} */
Expand Down
2 changes: 1 addition & 1 deletion www/content/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,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](https://extensions.htmx.org) & has **reduced** code base sizes by [67% when compared with react](@/essays/a-real-world-react-to-htmx-port.md)
[extendable](https://htmx.org/extensions) & has **reduced** code base sizes by [67% when compared with react](@/essays/a-real-world-react-to-htmx-port.md)

<h2>motivation</h2>

Expand Down
4 changes: 2 additions & 2 deletions www/content/api.md
Original file line number Diff line number Diff line change
Expand Up @@ -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](https://extensions.htmx.org) 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://htmx.org/extensions) 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.
Expand Down Expand Up @@ -183,7 +183,7 @@ to provide custom WebSocket setup.

### Method - `htmx.defineExtension()` {#defineExtension}

Defines a new htmx [extension](https://extensions.htmx.org).
Defines a new htmx [extension](https://htmx.org/extensions).

##### Parameters

Expand Down
2 changes: 1 addition & 1 deletion www/content/attributes/hx-ext.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title = "hx-ext"
+++

The `hx-ext` attribute enables an htmx [extension](https://extensions.htmx.org) for an element and all its children.
The `hx-ext` attribute enables an htmx [extension](https://htmx.org/extensions) for an element and all its children.

The value can be a single extension name or a comma separated list of extensions to apply.

Expand Down
50 changes: 38 additions & 12 deletions www/content/docs.md
Original file line number Diff line number Diff line change
Expand Up @@ -448,7 +448,7 @@ 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.
* [Idiomorph](/extensions/idiomorph) - A morphing algorithm created by the htmx developers.
* [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](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
Expand Down Expand Up @@ -841,7 +841,7 @@ As such, the normal HTML accessibility recommendations apply. For example:
## Web Sockets & SSE {#websockets-and-sse}

Web Sockets and Server Sent Events (SSE) are supported via extensions. Please see
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)
the [SSE extension](/extensions/sse) and [WebSocket extension](/extensions/ws)
pages to learn more.

## History Support {#history}
Expand Down Expand Up @@ -999,7 +999,7 @@ If you wanted to swap everything, regardless of HTTP response code, you could us
<meta name="htmx-config" content='{"responseHandling": [{"code":".*", "swap": true}]}' /> <!--all responses are swapped-->
```

Finally, it is worth considering using the [Response Targets](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/response-targets/README.md)
Finally, it is worth considering using the [Response Targets](/extensions/reponse-targets)
extension, which allows you to configure the behavior of response codes declaratively via attributes.

### CORS
Expand Down Expand Up @@ -1117,20 +1117,46 @@ 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](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:
htmx provides an [extensions](/extensions) mechanism that allows you to customize the libraries' behavior.
Extensions [are defined in javascript](/extensions/building) and then enabled via
the [`hx-ext`](@/attributes/hx-ext.md) attribute.

Here is how you would install the [idiomorph](@extension/idiomorph) extension, which allows you to use the
[Idiomorph](https://github.com/bigskysoftware/idiomorph) DOM morphing algorithms for htmx swaps:

```html
<div hx-ext="debug">
<button hx-post="/example">This button used the debug extension</button>
<button hx-post="/example" hx-ext="ignore:debug">This button does not</button>
</div>
<head>
<script src="https://unpkg.com/[email protected]/dist/idiomorph-ext.min.js"></script>
</head>
<body hx-ext="morph">
...
<button hx-post="/example" hx-swap="morph" hx-target="#content">
Update Content
</button>
...
</body>
```

For existing extensions, please [see the extensions site](https://extensions.htmx.org).
First the extension is included (it should be included *after* `htmx.js` is included), then the extension is referenced
by name via the `hx-ext` attribute. This enables you to then use the `morph` swap.

### Core Extensions

htmx supports a few "core" extensions, which are supported by the htmx development team:

* [head-support](/extensions/head-support) - support for merging head tag information (styles, etc.) in htmx requests |
* [htmx-1-compat](/extensions/htmx-1-compat) - restores htmx 1 defaults & functionality
* [idiomorph](/extensions/idiomorph) - supports the `morph` swap strategy using idiomorph
* [preload](/extensions/preload) - allows you to preload content for better performance
* [response-targets](/extensions/response-targets) - allows you to target elements based on HTTP response codes (e.g. `404`)
* [sse](/extensions/sse) - support for [Serve Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)
* [ws](/extensions/ws) - support for [Web Sockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications)

You can see all available extensions on the [Extensions](/extensions) page.

### Creating Extensions

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).
If you are interested in adding your own extension to htmx, please [see the extension docs](/extensions/building).

## Events & Logging {#events}

Expand Down
Loading

0 comments on commit 5b2fe2c

Please sign in to comment.