Update webpack and Vite istallation instructions for htmx 2.0

[restless]

Description

The webpack installation instructions are no longer valid for htmx 2.0. There are also no installation instructions for Vite. This is affecting multiple people, judging from the issue tracker.

Corresponding issue:

• https://github.com/bigskysoftware/htmx/issues/2628
• https://github.com/bigskysoftware/htmx/issues/2657
• https://github.com/bigskysoftware/htmx/issues/2659

Testing

It's a documentation update and the only way to test it is to follow the new guidelines. These new guidelines are what works for me and other people (see issues listed above).

Checklist

• [x] I have read the contribution guidelines
• [x] I have targeted this PR against the correct branch (master for website changes, dev for source changes)
• [x] This is either a bugfix, a documentation update, or a new feature that has been explicitly approved via an issue
• [x] I ran the test suite locally (npm run test) and verified that it succeeded

[Darkproduct]

I think this should include

import inject from '@rollup/plugin-inject'

[Darkproduct]

Also see bigskysoftware/htmx-extensions#128

[restless]

Thanks @Darkproduct I've rewritten the docs to include your suggestions. To summarize there are the following options:

1. simply import htmx - it'll work then but won't allow you to use plugins or htmx.methods due to lack of the htmx global variable
2. import htmx and manually assign it to the window.htmx global variable
3. in case of webpack inject htmx via plugin
4. in case of Vite inject htmx via plugin

[1cg]

I am changing the main in package.json to be the esm file:

https://github.com/bigskysoftware/htmx/blob/52b357089db95cea13411999a6b7913f0f0bc39b/package.json#L23

Does this change these instructions at all? (Sorry I know nothing about Webpack or Vite)

[restless]

@1cg great to hear. Yes, the change allows us to simply inject/provide htmx.org instead of the dist/htmx.esm.js version. Let me push the updated docs version that reflects that change.

[jackielii]

Is this possible in esbuild?

I had to use a work around like so: https://discord.com/channels/725789699527933952/1252928586206154753/1252933134396428348

[restless]

Is this possible in esbuild?

I had to use a work around like so: https://discord.com/channels/725789699527933952/1252928586206154753/1252933134396428348

@jackielii I don't use esbuild directly, however define (https://esbuild.github.io/api/#define) looks promising. Have you tried it?

[alexpetros]

This is going to be related too: https://github.com/bigskysoftware/htmx/issues/2629#issuecomment-2226447245

[gitblit]

I have not yet had success getting HonoX+Vite+Htmx working with these instructions, but updated guidance is important. :+1:

Update:

Ok, I was able to get this working but not with the pretty import for htmx. (the separate shim file also worked, but so does this inline approach in my limited testing). Am I doing something wrong?

I am using htmx 2.0.4 and htmx-ext-preload 2.1.1.

Not working	Working
Pretty import htmx is undefined :(	Not as pretty import window.htmx is manually set htmx is defined :tada:

[1cg]

Hello all, does this PR need updating? I agree on removing "probably" and being firmer in what we recommend. Unfortunately, my JS build-fu is (intentionally) very weak. Looking for guidance!

[restless]

@1cg I've updated the PR. It now reflects changes implemented by @marisst in #123 and makes the docs much simpler.

I tested it with my Vite based setup and it works well. I believe it'll work with other bundlers, like webpack, too as there are no extra steps (providing/injecting htmx) needed anymore.