From e5816d087819f39ddc0229e6519dc0eca4ae6456 Mon Sep 17 00:00:00 2001 From: Mariss Tubelis Date: Sat, 14 Dec 2024 21:00:34 +0100 Subject: [PATCH 1/9] Extensions docs: add npm/bundler installation guide and up versions numbers for links --- www/content/docs.md | 30 ++++++++++++++-------- www/content/extensions/_index.md | 19 +++++++------- www/content/extensions/head-support.md | 11 +++++++- www/content/extensions/htmx-1-compat.md | 10 +++++++- www/content/extensions/idiomorph.md | 9 +++++++ www/content/extensions/preload.md | 11 +++++++- www/content/extensions/response-targets.md | 11 +++++++- www/content/extensions/sse.md | 11 +++++++- www/content/extensions/ws.md | 10 +++++++- 9 files changed, 96 insertions(+), 26 deletions(-) diff --git a/www/content/docs.md b/www/content/docs.md index e3e2d2cf8..43ee584d5 100644 --- a/www/content/docs.md +++ b/www/content/docs.md @@ -1114,27 +1114,35 @@ Please see the [Animation Guide](@/examples/animations.md) for more details on t ## Extensions 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 +Extensions [are defined in javascript](/extensions/building) and 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: - +Extensions can be installed using a ` + + - +``` +To install the extension using npm and a bundler (e.g. Rollup, Webpack), use this command: +``` +npm i htmx-ext-preload +``` +And then integrate the package in one of your scripts: +```JS +import 'htmx-ext-preload'; +``` + +To enable the extension, add a `hx-ext` attribute with its name. The following example enables you to load HTML fragments into your browser's cache before they are requested by the user. + +```html + ... - + Link which will be preloaded ... ``` -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 diff --git a/www/content/extensions/_index.md b/www/content/extensions/_index.md index 6da37dd53..756a3fb14 100644 --- a/www/content/extensions/_index.md +++ b/www/content/extensions/_index.md @@ -15,18 +15,19 @@ htmx extensions are split into two categories: ## Core Extensions -| Name | Description | -|--------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| [head-support](/extensions/head-support) | Provides support for merging head tag information (styles, etc.) in htmx requests | -| [htmx-1-compat](/extensions/htmx-1-compat) | Rolls back most of the behavioral changes of htmx 2 to the htmx 1 defaults. | -| [idiomorph](/extensions/idiomorph) | Provides a `morph` swap strategy based on the [idiomorph](https://github.com/bigskysoftware/idiomorph/) morphing library, which was created by the htmx team. | -| [preload](/extensions/preload) | This extension allows you to load HTML fragments into your browser's cache before they are requested by the user, so that additional pages appear to users to load nearly instantaneously. | -| [response-targets](/extensions/response-targets) | This extension allows you to specify different target elements to be swapped when different HTTP response codes are received. | -| [sse](/extensions/sse) | Provides support for [Server Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events) directly from HTML. | -| [ws](/extensions/ws) | Provides bi-directional communication with [Web Sockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications) servers directly from HTML | +| Name | Npm package name | Description | +|--------------------------------------------------|-------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------| +| [head-support](/extensions/head-support) | htmx-ext-head-support | Provides support for merging head tag information (styles, etc.) in htmx requests | +| [htmx-1-compat](/extensions/htmx-1-compat) | htmx-ext-htmx-1-compat | Rolls back most of the behavioral changes of htmx 2 to the htmx 1 defaults. | +| [idiomorph](/extensions/idiomorph) | idiomorph | Provides a `morph` swap strategy based on the [idiomorph](https://github.com/bigskysoftware/idiomorph/) morphing library, which was created by the htmx team. | +| [preload](/extensions/preload) | htmx-ext-preload | This extension allows you to load HTML fragments into your browser's cache before they are requested by the user, so that additional pages appear to users to load nearly instantaneously. | +| [response-targets](/extensions/response-targets) | htmx-ext-response-targets | This extension allows you to specify different target elements to be swapped when different HTTP response codes are received. | +| [sse](/extensions/sse) | htmx-ext-sse | Provides support for [Server Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events) directly from HTML. | +| [ws](/extensions/ws) | htmx-ext-ws | Provides bi-directional communication with [Web Sockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications) servers directly from HTML | ## Community Extensions +The npm package name of community extensions follows the pattern of `htmx-ext-extension-name`, where `extension-name` is replaced with the extension name. | Name | Description | |--------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | [ajax-header](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/ajax-header/README.md) | Adds an `X-Requested-With` header to all requests made by htmx | diff --git a/www/content/extensions/head-support.md b/www/content/extensions/head-support.md index dd034de76..c94053f0f 100644 --- a/www/content/extensions/head-support.md +++ b/www/content/extensions/head-support.md @@ -15,8 +15,17 @@ a feature of the library. This extension addresses that shortcoming. ## Install +From CDN with a script tag: ```html - + +``` + +From npm using a bundler (e.g. Rollup, Webpack): +``` +npm i htmx-ext-head-support +``` +```JS +import 'htmx-ext-head-support'; ``` ## Usage diff --git a/www/content/extensions/htmx-1-compat.md b/www/content/extensions/htmx-1-compat.md index 967377f7c..ecb119beb 100644 --- a/www/content/extensions/htmx-1-compat.md +++ b/www/content/extensions/htmx-1-compat.md @@ -6,11 +6,19 @@ The `htmx-1-compat` extension allows you to almost seamlessly upgrade from htmx ## Install +From CDN with a script tag: ```html - ``` +From npm using a bundler (e.g. Rollup, Webpack): +``` +npm i htmx-ext-htmx-1-compat +``` +```JS +import 'htmx-ext-htmx-1-compat'; +``` + ## What it covers Htmx 2 introduced a few [breaking changes](https://v2-0v2-0.htmx.org/migration-guide-htmx-1/). diff --git a/www/content/extensions/idiomorph.md b/www/content/extensions/idiomorph.md index ef7c84f15..ef563093d 100644 --- a/www/content/extensions/idiomorph.md +++ b/www/content/extensions/idiomorph.md @@ -12,10 +12,19 @@ extension. ## Install +From CDN with a script tag: ```html ``` +From npm using a bundler (e.g. Rollup, Webpack): +``` +npm i idiomorph +``` +```JS +import 'idiomorph'; +``` + ## Usage Once you have referenced the idiomorph extension, you can register it with the name `morph` on the body and then being diff --git a/www/content/extensions/preload.md b/www/content/extensions/preload.md index ed26f726c..167b36d74 100644 --- a/www/content/extensions/preload.md +++ b/www/content/extensions/preload.md @@ -12,8 +12,17 @@ unused requests. Use this extension carefully! ## Install +From CDN with a script tag: ```html - + +``` + +From npm using a bundler (e.g. Rollup, Webpack): +``` +npm i htmx-ext-preload +``` +```JS +import 'htmx-ext-preload'; ``` ## Usage diff --git a/www/content/extensions/response-targets.md b/www/content/extensions/response-targets.md index 3c1590cea..21f36ec30 100644 --- a/www/content/extensions/response-targets.md +++ b/www/content/extensions/response-targets.md @@ -24,8 +24,17 @@ The value of each attribute can be: ## Install +From CDN with a script tag: ```html - + +``` + +From npm using a bundler (e.g. Rollup, Webpack): +``` +npm i htmx-ext-response-targets +``` +```JS +import 'htmx-ext-response-targets'; ``` ## Configure (optional) diff --git a/www/content/extensions/sse.md b/www/content/extensions/sse.md index b479f91ce..d4534b846 100644 --- a/www/content/extensions/sse.md +++ b/www/content/extensions/sse.md @@ -26,11 +26,20 @@ Use the following attributes to configure how SSE connections behave: ## Install +From CDN with a script tag: ```html - ``` +From npm using a bundler (e.g. Rollup, Webpack): +``` +npm i htmx-ext-sse +``` +```JS +import 'htmx-ext-sse'; +``` + + ## Usage ```html diff --git a/www/content/extensions/ws.md b/www/content/extensions/ws.md index 88590e1ea..a419ce99f 100644 --- a/www/content/extensions/ws.md +++ b/www/content/extensions/ws.md @@ -20,9 +20,17 @@ Use the following attributes to configure how WebSockets behave: ## Install +From CDN with a script tag: ```html + +``` - +From npm using a bundler (e.g. Rollup, Webpack): +``` +npm i htmx-ext-ws +``` +```JS +import 'htmx-ext-ws'; ``` ## Usage From 4048ec50bbb8a70112cde2e9c1072376e2eab382 Mon Sep 17 00:00:00 2001 From: Mariss Tubelis Date: Thu, 19 Dec 2024 11:14:22 +0100 Subject: [PATCH 2/9] Revert extensions._index.md table change --- www/content/extensions/_index.md | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/www/content/extensions/_index.md b/www/content/extensions/_index.md index e468eccdd..c7b690233 100644 --- a/www/content/extensions/_index.md +++ b/www/content/extensions/_index.md @@ -15,19 +15,18 @@ htmx extensions are split into two categories: ## Core Extensions -| Name | Npm package name | Description | -|--------------------------------------------------|-------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------| -| [head-support](/extensions/head-support) | htmx-ext-head-support | Provides support for merging head tag information (styles, etc.) in htmx requests | -| [htmx-1-compat](/extensions/htmx-1-compat) | htmx-ext-htmx-1-compat | Rolls back most of the behavioral changes of htmx 2 to the htmx 1 defaults. | -| [idiomorph](/extensions/idiomorph) | idiomorph | Provides a `morph` swap strategy based on the [idiomorph](https://github.com/bigskysoftware/idiomorph/) morphing library, which was created by the htmx team. | -| [preload](/extensions/preload) | htmx-ext-preload | This extension allows you to load HTML fragments into your browser's cache before they are requested by the user, so that additional pages appear to users to load nearly instantaneously. | -| [response-targets](/extensions/response-targets) | htmx-ext-response-targets | This extension allows you to specify different target elements to be swapped when different HTTP response codes are received. | -| [sse](/extensions/sse) | htmx-ext-sse | Provides support for [Server Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events) directly from HTML. | -| [ws](/extensions/ws) | htmx-ext-ws | Provides bi-directional communication with [Web Sockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications) servers directly from HTML | +| Name | Description | +|--------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| [head-support](/extensions/head-support) | Provides support for merging head tag information (styles, etc.) in htmx requests | +| [htmx-1-compat](/extensions/htmx-1-compat) | Rolls back most of the behavioral changes of htmx 2 to the htmx 1 defaults. | +| [idiomorph](/extensions/idiomorph) | Provides a `morph` swap strategy based on the [idiomorph](https://github.com/bigskysoftware/idiomorph/) morphing library, which was created by the htmx team. | +| [preload](/extensions/preload) | This extension allows you to load HTML fragments into your browser's cache before they are requested by the user, so that additional pages appear to users to load nearly instantaneously. | +| [response-targets](/extensions/response-targets) | This extension allows you to specify different target elements to be swapped when different HTTP response codes are received. | +| [sse](/extensions/sse) | Provides support for [Server Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events) directly from HTML. | +| [ws](/extensions/ws) | Provides bi-directional communication with [Web Sockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications) servers directly from HTML | ## Community Extensions -The npm package name of community extensions follows the pattern of `htmx-ext-extension-name`, where `extension-name` is replaced with the extension name. | Name | Description | |--------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | [ajax-header](https://github.com/bigskysoftware/htmx-extensions/blob/main/src/ajax-header/README.md) | Adds an `X-Requested-With` header to all requests made by htmx | From 71660f1be2ad14af6963dc1764f2fd335640fb06 Mon Sep 17 00:00:00 2001 From: Mariss Tubelis Date: Thu, 19 Dec 2024 12:25:22 +0100 Subject: [PATCH 3/9] Update docs.md extension installation and integration instruction --- www/content/docs.md | 44 ++++++++++++++++++++++++++++---------------- 1 file changed, 28 insertions(+), 16 deletions(-) diff --git a/www/content/docs.md b/www/content/docs.md index 5aec2d692..6eb47e512 100644 --- a/www/content/docs.md +++ b/www/content/docs.md @@ -1114,32 +1114,44 @@ Please see the [Animation Guide](@/examples/animations.md) for more details on t ## Extensions htmx provides an [extensions](/extensions) mechanism that allows you to customize the libraries' behavior. -Extensions [are defined in javascript](/extensions/building) and enabled via +Extensions [are defined in javascript](/extensions/building) and then enabled via the [`hx-ext`](@/attributes/hx-ext.md) attribute. -Extensions can be installed using a ` - + + ``` -To install the extension using npm and a bundler (e.g. Rollup, Webpack), use this command: -``` -npm i htmx-ext-preload +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). + +While the CDN approach is simple, you may want to consider [not using CDNs in production](https://blog.wesleyac.com/posts/why-not-javascript-cdn). The next easiest way to install htmx extensions is to simply copy them into your project. Download the extension from `https://unpkg.com/htmx-ext-extension-name` (replace `extension-name` with the name of the extension) e.g., https://unpkg.com/htmx-ext-response-targets. Then add it to the appropriate directory in your project and include it where necessary with a ` - + ``` 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). diff --git a/www/content/extensions/head-support.md b/www/content/extensions/head-support.md index c94053f0f..9bd5e6875 100644 --- a/www/content/extensions/head-support.md +++ b/www/content/extensions/head-support.md @@ -13,19 +13,31 @@ The [`hx-boost`](@/attributes/hx-boost.md) attribute moved htmx closer to this w support for extracting the `title` tag out of head elements was eventually added, but full head tag support has never been a feature of the library. This extension addresses that shortcoming. -## Install +## Installation -From CDN with a script tag: -```html - +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. +```HTML + + + + ``` +An unminified version is also available at https://unpkg.com/htmx-ext-head-support/dist/head-support.js. -From npm using a bundler (e.g. Rollup, Webpack): -``` -npm i htmx-ext-head-support +While the CDN approach is simple, you may want to consider [not using CDNs in production](https://blog.wesleyac.com/posts/why-not-javascript-cdn). The next easiest way to install `head-support` is to simply copy it into your project. Download the extension from `https://unpkg.com/htmx-ext-head-support`, add it to the appropriate directory in your project and include it where necessary with a ` +## Installation + +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. +```HTML + + + + ``` +An unminified version is also available at https://unpkg.com/htmx-ext-htmx-1-compat/dist/htmx-1-compat.js. -From npm using a bundler (e.g. Rollup, Webpack): -``` -npm i htmx-ext-htmx-1-compat +While the CDN approach is simple, you may want to consider [not using CDNs in production](https://blog.wesleyac.com/posts/why-not-javascript-cdn). The next easiest way to install `htmx-1-compat` is to simply copy it into your project. Download the extension from `https://unpkg.com/htmx-ext-htmx-1-compat`, add it to the appropriate directory in your project and include it where necessary with a ` +## Installation + +The fastest way to install `preload` is to load it via a CDN. Remember to always include the core htmx library before the extension. +```HTML + + + + ``` +An unminified version is also available at https://unpkg.com/htmx-ext-preload/dist/preload.js. -From npm using a bundler (e.g. Rollup, Webpack): -``` -npm i htmx-ext-preload +While the CDN approach is simple, you may want to consider [not using CDNs in production](https://blog.wesleyac.com/posts/why-not-javascript-cdn). The next easiest way to install `preload` is to simply copy it into your project. Download the extension from `https://unpkg.com/htmx-ext-preload`, add it to the appropriate directory in your project and include it where necessary with a ` +## Installation + +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. +```HTML + + + + ``` +An unminified version is also available at https://unpkg.com/htmx-ext-response-targets/dist/response-targets.js. -From npm using a bundler (e.g. Rollup, Webpack): -``` -npm i htmx-ext-response-targets +While the CDN approach is simple, you may want to consider [not using CDNs in production](https://blog.wesleyac.com/posts/why-not-javascript-cdn). The next easiest way to install `response-targets` is to simply copy it into your project. Download the extension from `https://unpkg.com/htmx-ext-response-targets`, add it to the appropriate directory in your project and include it where necessary with a ` +## Installation + +The fastest way to install `sse` is to load it via a CDN. Remember to always include the core htmx library before the extension. +```HTML + + + + ``` +An unminified version is also available at https://unpkg.com/htmx-ext-sse/dist/sse.js. -From npm using a bundler (e.g. Rollup, Webpack): -``` -npm i htmx-ext-sse +While the CDN approach is simple, you may want to consider [not using CDNs in production](https://blog.wesleyac.com/posts/why-not-javascript-cdn). The next easiest way to install `sse` is to simply copy it into your project. Download the extension from `https://unpkg.com/htmx-ext-sse`, add it to the appropriate directory in your project and include it where necessary with a ` +## Installation + +The fastest way to install `ws` is to load it via a CDN. Remember to always include the core htmx library before the extension. +```HTML + + + + ``` +An unminified version is also available at https://unpkg.com/htmx-ext-ws/dist/ws.js. -From npm using a bundler (e.g. Rollup, Webpack): -``` -npm i htmx-ext-ws +While the CDN approach is simple, you may want to consider [not using CDNs in production](https://blog.wesleyac.com/posts/why-not-javascript-cdn). The next easiest way to install `ws` is to simply copy it into your project. Download the extension from `https://unpkg.com/htmx-ext-ws`, add it to the appropriate directory in your project and include it where necessary with a ` +The fastest way to install `idiomorph` is to load it via a CDN. Remember to always include the core htmx library before the extension. +```HTML + + + + ``` +An unminified version is also available at https://unpkg.com/idiomorph/dist/idiomorph.js. -From npm using a bundler (e.g. Rollup, Webpack): -``` -npm i idiomorph +While the CDN approach is simple, you may want to consider [not using CDNs in production](https://blog.wesleyac.com/posts/why-not-javascript-cdn). The next easiest way to install `idiomorph` is to simply copy it into your project. Download the extension from `https://unpkg.com/idiomorph`, add it to the appropriate directory in your project and include it where necessary with a ` + + ... ``` 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). diff --git a/www/content/extensions/head-support.md b/www/content/extensions/head-support.md index 38a21b19d..cb5024ce0 100644 --- a/www/content/extensions/head-support.md +++ b/www/content/extensions/head-support.md @@ -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 + +... ``` An unminified version is also available at https://unpkg.com/htmx-ext-head-support/dist/head-support.js. diff --git a/www/content/extensions/htmx-1-compat.md b/www/content/extensions/htmx-1-compat.md index 023b89eda..c7fb50d0a 100644 --- a/www/content/extensions/htmx-1-compat.md +++ b/www/content/extensions/htmx-1-compat.md @@ -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 + +... ``` An unminified version is also available at https://unpkg.com/htmx-ext-htmx-1-compat/dist/htmx-1-compat.js. diff --git a/www/content/extensions/idiomorph.md b/www/content/extensions/idiomorph.md index 7aa2f1464..bd75dad72 100644 --- a/www/content/extensions/idiomorph.md +++ b/www/content/extensions/idiomorph.md @@ -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 + ``` An unminified version is also available at https://unpkg.com/idiomorph/dist/idiomorph.js. diff --git a/www/content/extensions/preload.md b/www/content/extensions/preload.md index 030c8dc4d..a54128426 100644 --- a/www/content/extensions/preload.md +++ b/www/content/extensions/preload.md @@ -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 + +... ``` An unminified version is also available at https://unpkg.com/htmx-ext-preload/dist/preload.js. @@ -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 -

What Works

WILL BE requested using a standard XMLHttpRequest() and default options (below) diff --git a/www/content/extensions/response-targets.md b/www/content/extensions/response-targets.md index 2c9a4930b..05856aa63 100644 --- a/www/content/extensions/response-targets.md +++ b/www/content/extensions/response-targets.md @@ -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 + +... ``` An unminified version is also available at https://unpkg.com/htmx-ext-response-targets/dist/response-targets.js. diff --git a/www/content/extensions/sse.md b/www/content/extensions/sse.md index c59875dbc..3b7048c78 100644 --- a/www/content/extensions/sse.md +++ b/www/content/extensions/sse.md @@ -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 + ``` An unminified version is also available at https://unpkg.com/htmx-ext-sse/dist/sse.js. diff --git a/www/content/extensions/ws.md b/www/content/extensions/ws.md index c61ddcd34..f95d825cf 100644 --- a/www/content/extensions/ws.md +++ b/www/content/extensions/ws.md @@ -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 + ``` An unminified version is also available at https://unpkg.com/htmx-ext-ws/dist/ws.js. From f0817e80de5da30ec4671d147d27202cc26f1913 Mon Sep 17 00:00:00 2001 From: Mariss Tubelis Date: Sun, 12 Jan 2025 22:42:31 +0100 Subject: [PATCH 9/9] Fix typos and note for community repos not hosted outside this repo --- www/content/docs.md | 4 +++- www/content/extensions/head-support.md | 2 +- www/content/extensions/htmx-1-compat.md | 2 +- www/content/extensions/preload.md | 2 +- www/content/extensions/response-targets.md | 2 +- www/content/extensions/sse.md | 2 +- www/content/extensions/ws.md | 2 +- 7 files changed, 9 insertions(+), 7 deletions(-) diff --git a/www/content/docs.md b/www/content/docs.md index 87d4fbe21..d27c65b1f 100644 --- a/www/content/docs.md +++ b/www/content/docs.md @@ -1156,7 +1156,7 @@ npm install htmx-ext-extension-name After installing, you'll need to use appropriate tooling to bundle `node_modules/htmx-ext-extension-name/dist/extension-name.js` (or `.min.js`). For example, you might bundle the extension with htmx core from `node_modules/htmx.org/dist/htmx.js` and project-specific code. If you are using a bundler to manage your javascript (e.g. Webpack, Rollup): -- Install `htmx.org` and `htx-ext-extension-name` via npm (replace `extension-name` with the name of the extension) +- Install `htmx.org` and `htmx-ext-extension-name` via npm (replace `extension-name` with the name of the extension) - Import both packages to your `index.js` ```JS import `htmx.org`; @@ -1165,6 +1165,8 @@ import `htmx-ext-extension-name`; // replace `extension-name` with the name of t Note: [Idiomorph](/extensions/idiomorph) does not follow the naming convention of htmx extensions. Use `idiomorph` instead of `htmx-ext-idiomorph`. For example, `https://unpkg.com/idiomorph` or `npm install idiomorph`. +Note: Community extensions hosted outside this repository might have different installation instructions. Please check the corresponding repository for set-up guidance. + ### Enabling Extensions To enable an extension, add a `hx-ext="extension-name"` attribute to `` or another HTML element (replace `extension-name` with the name of the extension). The extension will be applied to all child elements. diff --git a/www/content/extensions/head-support.md b/www/content/extensions/head-support.md index cb5024ce0..67c1aaef7 100644 --- a/www/content/extensions/head-support.md +++ b/www/content/extensions/head-support.md @@ -35,7 +35,7 @@ npm install htmx-ext-head-support After installing, you'll need to use appropriate tooling to bundle `node_modules/htmx-ext-head-support/dist/head-support.js` (or `.min.js`). For example, you might bundle the extension with htmx core from `node_modules/htmx.org/dist/htmx.js` and project-specific code. If you are using a bundler to manage your javascript (e.g. Webpack, Rollup): -- Install `htmx.org` and `htx-ext-head-support` via npm +- Install `htmx.org` and `htmx-ext-head-support` via npm - Import both packages to your `index.js` ```JS import `htmx.org`; diff --git a/www/content/extensions/htmx-1-compat.md b/www/content/extensions/htmx-1-compat.md index c7fb50d0a..2e157c023 100644 --- a/www/content/extensions/htmx-1-compat.md +++ b/www/content/extensions/htmx-1-compat.md @@ -26,7 +26,7 @@ npm install htmx-ext-htmx-1-compat After installing, you'll need to use appropriate tooling to bundle `node_modules/htmx-ext-htmx-1-compat/dist/htmx-1-compat.js` (or `.min.js`). For example, you might bundle the extension with htmx core from `node_modules/htmx.org/dist/htmx.js` and project-specific code. If you are using a bundler to manage your javascript (e.g. Webpack, Rollup): -- Install `htmx.org` and `htx-ext-htmx-1-compat` via npm +- Install `htmx.org` and `htmx-ext-htmx-1-compat` via npm - Import both packages to your `index.js` ```JS import `htmx.org`; diff --git a/www/content/extensions/preload.md b/www/content/extensions/preload.md index a54128426..9afa70e1e 100644 --- a/www/content/extensions/preload.md +++ b/www/content/extensions/preload.md @@ -32,7 +32,7 @@ npm install htmx-ext-preload After installing, you'll need to use appropriate tooling to bundle `node_modules/htmx-ext-preload/dist/preload.js` (or `.min.js`). For example, you might bundle the extension with htmx core from `node_modules/htmx.org/dist/htmx.js` and project-specific code. If you are using a bundler to manage your javascript (e.g. Webpack, Rollup): -- Install `htmx.org` and `htx-ext-preload` via npm +- Install `htmx.org` and `htmx-ext-preload` via npm - Import both packages to your `index.js` ```JS import `htmx.org`; diff --git a/www/content/extensions/response-targets.md b/www/content/extensions/response-targets.md index 05856aa63..8b2ac954f 100644 --- a/www/content/extensions/response-targets.md +++ b/www/content/extensions/response-targets.md @@ -44,7 +44,7 @@ npm install htmx-ext-response-targets After installing, you'll need to use appropriate tooling to bundle `node_modules/htmx-ext-response-targets/dist/response-targets.js` (or `.min.js`). For example, you might bundle the extension with htmx core from `node_modules/htmx.org/dist/htmx.js` and project-specific code. If you are using a bundler to manage your javascript (e.g. Webpack, Rollup): -- Install `htmx.org` and `htx-ext-response-targets` via npm +- Install `htmx.org` and `htmx-ext-response-targets` via npm - Import both packages to your `index.js` ```JS import `htmx.org`; diff --git a/www/content/extensions/sse.md b/www/content/extensions/sse.md index 3b7048c78..bf1ae2e99 100644 --- a/www/content/extensions/sse.md +++ b/www/content/extensions/sse.md @@ -45,7 +45,7 @@ npm install htmx-ext-sse After installing, you'll need to use appropriate tooling to bundle `node_modules/htmx-ext-sse/dist/sse.js` (or `.min.js`). For example, you might bundle the extension with htmx core from `node_modules/htmx.org/dist/htmx.js` and project-specific code. If you are using a bundler to manage your javascript (e.g. Webpack, Rollup): -- Install `htmx.org` and `htx-ext-sse` via npm +- Install `htmx.org` and `htmx-ext-sse` via npm - Import both packages to your `index.js` ```JS import `htmx.org`; diff --git a/www/content/extensions/ws.md b/www/content/extensions/ws.md index f95d825cf..3e247783b 100644 --- a/www/content/extensions/ws.md +++ b/www/content/extensions/ws.md @@ -39,7 +39,7 @@ npm install htmx-ext-ws After installing, you'll need to use appropriate tooling to bundle `node_modules/htmx-ext-ws/dist/ws.js` (or `.min.js`). For example, you might bundle the extension with htmx core from `node_modules/htmx.org/dist/htmx.js` and project-specific code. If you are using a bundler to manage your javascript (e.g. Webpack, Rollup): -- Install `htmx.org` and `htx-ext-ws` via npm +- Install `htmx.org` and `htmx-ext-ws` via npm - Import both packages to your `index.js` ```JS import `htmx.org`;