diff options
| author | Mariss Tubelis <mariss@mariss.no> | 2025-02-14 22:37:21 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-02-14 22:37:21 +0100 |
| commit | 90a91a60e0fcd2d7c42e04c615177cba89c33151 (patch) | |
| tree | 294b8e9db60d721d5ac57017b00fa5877d631bdb /www/content/extensions/sse.md | |
| parent | 0f9c4202ba5c0dd7bd6e6fb430b176b0c9bdba18 (diff) | |
| download | htmx-90a91a60e0fcd2d7c42e04c615177cba89c33151.tar.gz htmx-90a91a60e0fcd2d7c42e04c615177cba89c33151.zip | |
Extension docs: npm, bundler, min/unmin and SRI hash instructions (#3127)
* Extensions docs: add npm/bundler installation guide and up versions numbers for links
* Revert extensions._index.md table change
* Update docs.md extension installation and integration instruction
* Move extension installation and enabling to new sections in docs.md
* Update extension installation guidelines
* Update idiomorph installation guidelines
* Minor consistency edits
* Make the need for hx-ext clearer
* Fix typos and note for community repos not hosted outside this repo
Diffstat (limited to 'www/content/extensions/sse.md')
| -rw-r--r-- | www/content/extensions/sse.md | 27 |
1 files changed, 24 insertions, 3 deletions
diff --git a/www/content/extensions/sse.md b/www/content/extensions/sse.md index c5939bcf..bf1ae2e9 100644 --- a/www/content/extensions/sse.md +++ b/www/content/extensions/sse.md @@ -24,11 +24,32 @@ Use the following attributes to configure how SSE connections behave: * `sse-close=<message-name>` - To close the EventStream gracefully when that message is received. This might be helpful if you want to send information to a client that will eventually stop. -## Install +## 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 and [enable the extension](#usage). +```HTML +<head> + <script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script> + <script src="https://unpkg.com/htmx-ext-sse@2.2.2" 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. -```html +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 `<script>` tag. -<script src="https://unpkg.com/htmx-ext-sse@2.2.2/sse.js"></script> +For npm-style build systems, you can install `sse` via [npm](https://www.npmjs.com/): +```shell +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 `htmx-ext-sse` via npm +- Import both packages to your `index.js` +```JS +import `htmx.org`; +import `htmx-ext-sse`; ``` ## Usage |