Extension docs: npm, bundler, min/unmin and SRI hash instructions #3078

marisst · 2024-12-14T20:07:04Z

Pull request should be viewed together with the corresponding PR in htmx-extensions repository bigskysoftware/htmx-extensions#123.

Documentation is updated to elaborate on extension installation and integration. Until now, extension installation instructions were limited to a CDN script tag. This change adds:

guidance on installation with npm
guidance on integration with bundlers
instructions to access minified and unminified extension versions
SRI hash in CDN script tag installation example
links to newest extension versions which were released with the [email protected] release
makes the need of hx-ext clearer Extensions documentation could make need for hx-ext clearer #2475

…umbers for links

marisst · 2024-12-15T08:39:52Z

@Telroshan please don't review it yet. I converted to draft. Unfortunately I realised it won't be as easy as this. When integrating an extension with import statement, we need to figure out how to inject htmx in the scope of the extension. I think we also need to update all extension package definitions to make htmx.org a required dependency. I will need to investigate how this is done in other JS libraries. If you have good examples let me know.

Telroshan · 2024-12-16T08:05:25Z

Don't worry @marisst , I'm terribly ignorant about this topic anyway so I will likely not be the one to review this 😆

…are#2939) * Update hx-headers.md Add an example of evaluated values passed to hx-headers. * Follow the example in hx-vals.

Update docs.md dead link

* Render toast as aria-live region on page load This tells the screen reader to announce updates that happen inside the `span#toast` element. * Update code sample in example text * Use <output> element to announce form action

Co-authored-by: scrhartley <[email protected]>

Telroshan · 2025-01-09T08:54:42Z

Finally caught up with issues & PRs I had missed during holidays, I'll be reviewing these PRs (this one, the other in the extensions repo as well as the other webpack/Vite PR open on this repo) over the next couple days @marisst , as there is no esm expert available among us unfortunately (I'll take some time to dive into this whole topic first 😄 )
I'll keep you informed!

Telroshan · 2025-01-10T08:54:34Z

www/content/docs.md

+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)


Likely a typo

Suggested change

- 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)

Telroshan · 2025-01-10T08:56:15Z

www/content/docs.md

+import `htmx-ext-extension-name`; // replace `extension-name` with the name of the extension 
+```
+
+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`.


Might be worth it to add another note here, to explain that community extensions might have different installation instructions (for the ones that aren't hosted on our extensions repo)?
And that the reader should check the extension's repo where the owner would have added documentation as to how to set it up, which may differ from ours

Telroshan · 2025-01-10T09:00:37Z

www/content/extensions/head-support.md

+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


Likely a typo

Suggested change

- Install `htmx.org` and `htx-ext-head-support` via npm

- Install `htmx.org` and `htmx-ext-head-support` via npm

Telroshan · 2025-01-10T09:01:14Z

www/content/extensions/htmx-1-compat.md

+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


Likely a typo

Suggested change

- Install `htmx.org` and `htx-ext-htmx-1-compat` via npm

- Install `htmx.org` and `htmx-ext-htmx-1-compat` via npm

Telroshan · 2025-01-10T09:02:24Z

www/content/extensions/preload.md

+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


Likely a typo

Suggested change

- Install `htmx.org` and `htx-ext-preload` via npm

- Install `htmx.org` and `htmx-ext-preload` via npm

Telroshan · 2025-01-10T09:02:44Z

www/content/extensions/response-targets.md

+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


Likely a typo

Suggested change

- Install `htmx.org` and `htx-ext-response-targets` via npm

- Install `htmx.org` and `htmx-ext-response-targets` via npm

Telroshan · 2025-01-10T09:03:09Z

www/content/extensions/sse.md

+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


Likely a typo

Suggested change

- Install `htmx.org` and `htx-ext-sse` via npm

- Install `htmx.org` and `htmx-ext-sse` via npm

Telroshan · 2025-01-10T09:03:48Z

www/content/extensions/ws.md

+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


Likely a typo

Suggested change

- Install `htmx.org` and `htx-ext-ws` via npm

- Install `htmx.org` and `htmx-ext-ws` via npm

* added wasm to htmx port essay * changed wasm-to-htmx essay * added image and changed author

marisst · 2025-01-12T21:33:45Z

Apologies, I did something wrong in Git and messed up the PR. I opened a new PR for this. #3127

@Telroshan Thank you for the comments. I fixed them in the new PR, in this commit.

marisst added 2 commits December 14, 2024 21:00

Extensions docs: add npm/bundler installation guide and up versions n…

e5816d0

…umbers for links

Merge branch 'bigskysoftware:master' into ext-npm-doc

9bca90c

marisst changed the title ~~Extension documentation: add npm/bundler installation guides and up versions~~ Extension documentation: add npm/bundler installation and up versions Dec 14, 2024

marisst mentioned this pull request Dec 14, 2024

Add htmx extensions to npm to allow installing via package manager bigskysoftware/htmx-extensions#86

Open

Telroshan added the documentation Improvements or additions to documentation label Dec 15, 2024

marisst marked this pull request as draft December 15, 2024 08:36

marisst added 8 commits December 16, 2024 19:08

Merge branch 'master' into ext-npm-doc

9bfa30b

Revert extensions._index.md table change

4048ec5

Merge branch 'bigskysoftware:master' into ext-npm-doc

39dc28b

Update docs.md extension installation and integration instruction

71660f1

Move extension installation and enabling to new sections in docs.md

8ba7ca5

Update extension installation guidelines

a32aa79

Update idiomorph installation guidelines

a4abca4

Minor consistency edits

4f9bd42

marisst changed the title ~~Extension documentation: add npm/bundler installation and up versions~~ Update extension installation documentation: npm, esm, min Dec 19, 2024

marisst changed the title ~~Update extension installation documentation: npm, esm, min~~ Update extension installation documentation: npm, esm, min, sri hash Dec 19, 2024

marisst changed the title ~~Update extension installation documentation: npm, esm, min, sri hash~~ Extension installation documentation: add instructions for npm and bundlers, provide SRI hash Dec 19, 2024

marisst changed the title ~~Extension installation documentation: add instructions for npm and bundlers, provide SRI hash~~ Extension docs: add npm installation, bundler integration and SRI hash instructions Dec 19, 2024

marisst changed the title ~~Extension docs: add npm installation, bundler integration and SRI hash instructions~~ Extension docs: add npm, bundler and SRI hash instructions Dec 19, 2024

marisst mentioned this pull request Dec 19, 2024

Provide ESM and minified versions bigskysoftware/htmx-extensions#123

Open

marisst marked this pull request as ready for review December 19, 2024 19:59

marisst changed the title ~~Extension docs: add npm, bundler and SRI hash instructions~~ Extension docs: add npm installation, bundler integration, min/unmin access and SRI hash instructions Dec 19, 2024

marisst changed the title ~~Extension docs: add npm installation, bundler integration, min/unmin access and SRI hash instructions~~ Extension docs: add npm, bundler, min/unmin version and SRI hash instructions Dec 19, 2024

marisst changed the title ~~Extension docs: add npm, bundler, min/unmin version and SRI hash instructions~~ Extension docs: npm, bundler, min/unmin version and SRI hash instructions Dec 19, 2024

Make the need for hx-ext clearer

d6573ef

marisst mentioned this pull request Dec 19, 2024

Extensions documentation could make need for hx-ext clearer #2475

Open

alexpetros and others added 2 commits December 19, 2024 22:37

Fix escaped quotes in titles (bigskysoftware#3086)

eab4f77

christmas gift request

51c603e

1cg and others added 16 commits January 4, 2025 17:53

fix quirks

3080b41

Add an example of evaluated values passed to hx-headers. (bigskysoftw…

1e844f6

…are#2939) * Update hx-headers.md Add an example of evaluated values passed to hx-headers. * Follow the example in hx-vals.

add copy & paste components as a Con for htmx

9a4483e

Merge remote-tracking branch 'origin/master'

667e07f

Update docs.md to fix dead link (bigskysoftware#3090)

c6679b1

Update docs.md dead link

fix QUIRKS.md typo (bigskysoftware#3095)

3455ebe

retrospective-essay

b7a3221

Merge remote-tracking branch 'origin/master'

d3996e1

Add example for form reset pattern (bigskysoftware#3100)

5f3cb58

Add 404 page (bigskysoftware#3105)

9f0de81

Fix error in quirks documentation for htmx config (bigskysoftware#3098)

e64dd0f

[Documentation] Make htmx:beforeSwap more complete (bigskysoftware#3110)

9062996

Co-authored-by: scrhartley <[email protected]>

add ACM Newsletter paper

69edc99

Merge remote-tracking branch 'origin/master'

bc95b40

Fix broken docs links on quirks page (bigskysoftware#3111)

e0905ff

1cg added 2 commits January 9, 2025 16:57

sponsor update

1a38467

Merge remote-tracking branch 'origin/master'

65145db

Telroshan reviewed Jan 10, 2025

View reviewed changes

jafioti and others added 2 commits January 10, 2025 12:17

added wasm to htmx port essay (bigskysoftware#3119)

c802494

* added wasm to htmx port essay * changed wasm-to-htmx essay * added image and changed author

fix link

02bc415

This was linked to issues Jan 11, 2025

how to enable extensions in a es6 module using importmap #2398

Open

Npm module for extensions #2464

Open

Add minified versions of extensions #1089

Open

1cg and others added 3 commits January 11, 2025 17:30

alternatives

29ace83

alternatives

aeeb216

Merge branch 'ext-npm-doc'

8e8e187

marisst closed this Jan 12, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Extension docs: npm, bundler, min/unmin and SRI hash instructions #3078

Extension docs: npm, bundler, min/unmin and SRI hash instructions #3078

marisst commented Dec 14, 2024 •

edited

Loading

marisst commented Dec 15, 2024

Telroshan commented Dec 16, 2024

Telroshan commented Jan 9, 2025

Telroshan Jan 10, 2025

Telroshan Jan 10, 2025

Telroshan Jan 10, 2025

Telroshan Jan 10, 2025

Telroshan Jan 10, 2025

Telroshan Jan 10, 2025

Telroshan Jan 10, 2025

Telroshan Jan 10, 2025

marisst commented Jan 12, 2025 •

edited

Loading

	- 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)

	- Install `htmx.org` and `htx-ext-head-support` via npm
	- Install `htmx.org` and `htmx-ext-head-support` via npm

	- Install `htmx.org` and `htx-ext-htmx-1-compat` via npm
	- Install `htmx.org` and `htmx-ext-htmx-1-compat` via npm

	- Install `htmx.org` and `htx-ext-preload` via npm
	- Install `htmx.org` and `htmx-ext-preload` via npm

	- Install `htmx.org` and `htx-ext-response-targets` via npm
	- Install `htmx.org` and `htmx-ext-response-targets` via npm

	- Install `htmx.org` and `htx-ext-sse` via npm
	- Install `htmx.org` and `htmx-ext-sse` via npm

	- Install `htmx.org` and `htx-ext-ws` via npm
	- Install `htmx.org` and `htmx-ext-ws` via npm

Extension docs: npm, bundler, min/unmin and SRI hash instructions #3078

Extension docs: npm, bundler, min/unmin and SRI hash instructions #3078

Conversation

marisst commented Dec 14, 2024 • edited Loading

marisst commented Dec 15, 2024

Telroshan commented Dec 16, 2024

Telroshan commented Jan 9, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

marisst commented Jan 12, 2025 • edited Loading

marisst commented Dec 14, 2024 •

edited

Loading

marisst commented Jan 12, 2025 •

edited

Loading