Skip to content

Commit

Permalink
Make the need for hx-ext clearer
Browse files Browse the repository at this point in the history
  • Loading branch information
@marisst
marisst committed Dec 19, 2024
1 parent 4f9bd42 commit d6573ef
Show file tree
Hide file tree
Showing 8 changed files with 21 additions and 9 deletions.
4 changes: 3 additions & 1 deletion www/content/docs.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1133,12 +1133,14 @@ You can see all available extensions on the [Extensions](/extensions) page.

### Installing Extensions

The fastest way to install htmx extensions created by others is to load them via a CDN. Remember to always include the core htmx library before the extensions. For example, if you would like to use the [response-targets](/extensions/response-targets) extension, you can add this to your head tag:
The fastest way to install htmx extensions created by others is to load them via a CDN. Remember to always include the core htmx library before the extensions and [enable the extension](#enabling-extensions). For example, if you would like to use the [response-targets](/extensions/response-targets) extension, you can add this to your head tag:
```HTML
<head>
<script src="https://unpkg.com/[email protected]" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]" integrity="sha384-T41oglUPvXLGBVyRdZsVRxNWnOOqCynaPubjUVjxhsjFTKrFJGEMm3/0KGmNQ+Pg" crossorigin="anonymous"></script>
</head>
<body hx-ext="extension-name">
...
```
An unminified version is also available at `https://unpkg.com/htmx-ext-extension-name/dist/extension-name.js` (replace `extension-name` with the name of the extension).

Expand Down
4 changes: 3 additions & 1 deletion www/content/extensions/head-support.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,14 @@ a feature of the library. This extension addresses that shortcoming.

## Installing

The fastest way to install `head-support` is to load it via a CDN. Remember to always include the core htmx library before the extension.
The fastest way to install `head-support` is to load it via a CDN. Remember to always include the core htmx library before the extension and [enable the extension](#usage).
```HTML
<head>
<script src="https://unpkg.com/[email protected]" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]" integrity="sha384-cvMqHzjCJsOHgGuyB3sWXaUSv/Krm0BdzjuI1rtkjCbL1l1oHJx+cHyVRJhyuEz0" crossorigin="anonymous"></script>
</head>
<body hx-ext="head-support">
...
```
An unminified version is also available at https://unpkg.com/htmx-ext-head-support/dist/head-support.js.

Expand Down
4 changes: 3 additions & 1 deletion www/content/extensions/htmx-1-compat.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,14 @@ The `htmx-1-compat` extension allows you to almost seamlessly upgrade from htmx

## Installing

The fastest way to install `htmx-1-compat` is to load it via a CDN. Remember to always include the core htmx library before the extension.
The fastest way to install `htmx-1-compat` is to load it via a CDN. Remember to always include the core htmx library before the extension and enable the extension.
```HTML
<head>
<script src="https://unpkg.com/[email protected]" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]" integrity="sha384-lcvVWaNjF5zPPUeeWmC0OkJ2MLqoWLlkAabuGm+EuMSTfGo5WRyHrNaAp0cJr9Pg" crossorigin="anonymous"></script>
</head>
<body hx-ext="htmx-1-compat">
...
```
An unminified version is also available at https://unpkg.com/htmx-ext-htmx-1-compat/dist/htmx-1-compat.js.

Expand Down
3 changes: 2 additions & 1 deletion www/content/extensions/idiomorph.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,13 @@ extension.

## Installing

The fastest way to install `idiomorph` is to load it via a CDN. Remember to always include the core htmx library before the extension.
The fastest way to install `idiomorph` is to load it via a CDN. Remember to always include the core htmx library before the extension and [enable the extension](#usage).
```HTML
<head>
<script src="https://unpkg.com/[email protected]" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]" integrity="sha384-tg/2Ca9U/RohyxmGCb8qJVR3j9cswtKbdRSXOaPX/aDDOW1bfbeyV+7G9ifYF4bC" crossorigin="anonymous"></script>
</head>
<body hx-ext="morph">
```
An unminified version is also available at https://unpkg.com/idiomorph/dist/idiomorph.js.

Expand Down
5 changes: 3 additions & 2 deletions www/content/extensions/preload.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,14 @@ unused requests. Use this extension carefully!

## Installing

The fastest way to install `preload` is to load it via a CDN. Remember to always include the core htmx library before the extension.
The fastest way to install `preload` is to load it via a CDN. Remember to always include the core htmx library before the extension and [enable the extension](#usage).
```HTML
<head>
<script src="https://unpkg.com/[email protected]" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]" integrity="sha384-fkzubQiTB69M7XTToqW6tplvxAOJkqPl5JmLAbumV2EacmuJb8xEP9KnJafk/rg8" crossorigin="anonymous"></script>
</head>
<body hx-ext="preload">
...
```
An unminified version is also available at https://unpkg.com/htmx-ext-preload/dist/preload.js.

Expand All @@ -44,7 +46,6 @@ and `hx-get` elements you want to preload. By default, resources will be loaded
giving your application a roughly 100-200ms head start on serving responses. See configuration below for other options.

```html

<body hx-ext="preload">
<h1>What Works</h2>
<a href="/server/1" preload>WILL BE requested using a standard XMLHttpRequest() and default options (below)</a>
Expand Down
4 changes: 3 additions & 1 deletion www/content/extensions/response-targets.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,14 @@ The value of each attribute can be:

## Installing

The fastest way to install `response-targets` is to load it via a CDN. Remember to always include the core htmx library before the extension.
The fastest way to install `response-targets` is to load it via a CDN. Remember to always include the core htmx library before the extension and [enable the extension](#usage).
```HTML
<head>
<script src="https://unpkg.com/[email protected]" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]" integrity="sha384-T41oglUPvXLGBVyRdZsVRxNWnOOqCynaPubjUVjxhsjFTKrFJGEMm3/0KGmNQ+Pg" crossorigin="anonymous"></script>
</head>
<body hx-ext="response-targets">
...
```
An unminified version is also available at https://unpkg.com/htmx-ext-response-targets/dist/response-targets.js.

Expand Down
3 changes: 2 additions & 1 deletion www/content/extensions/sse.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,13 @@ Use the following attributes to configure how SSE connections behave:

## Installing

The fastest way to install `sse` is to load it via a CDN. Remember to always include the core htmx library before the extension.
The fastest way to install `sse` is to load it via a CDN. Remember to always include the core htmx library before the extension and [enable the extension](#usage).
```HTML
<head>
<script src="https://unpkg.com/[email protected]" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]" integrity="sha384-Y4gc0CK6Kg+hmulDc6rZPJu0tqvk7EWlih0Oh+2OkAi1ZDlCbBDCQEE2uVk472Ky" crossorigin="anonymous"></script>
</head>
<body hx-ext="sse">
```
An unminified version is also available at https://unpkg.com/htmx-ext-sse/dist/sse.js.

Expand Down
3 changes: 2 additions & 1 deletion www/content/extensions/ws.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,13 @@ Use the following attributes to configure how WebSockets behave:

## Installing

The fastest way to install `ws` is to load it via a CDN. Remember to always include the core htmx library before the extension.
The fastest way to install `ws` is to load it via a CDN. Remember to always include the core htmx library before the extension and [enable the extension](#usage).
```HTML
<head>
<script src="https://unpkg.com/[email protected]" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]" integrity="sha384-vuKxTKv5TX/b3lLzDKP2U363sOAoRo5wSvzzc3LJsbaQRSBSS+3rKKHcOx5J8doU" crossorigin="anonymous"></script>
</head>
<body hx-ext="ws">
```
An unminified version is also available at https://unpkg.com/htmx-ext-ws/dist/ws.js.

Expand Down

0 comments on commit d6573ef

Please sign in to comment.