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:

• [2.0] Webpack installation, global HTMX properties undefined #2628
• 2.0: TypeError: import_htmx.default.config is undefined when defining config programmatically #2657
• htmx.logAll is not a function #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

• I have read the contribution guidelines
• I have targeted this PR against the correct branch (master for website changes, dev for
  source changes)
• This is either a bugfix, a documentation update, or a new feature that has been explicitly
  approved via an issue
• 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 #1690

[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:

htmx/package.json

Line 23 in 52b3570

"main": "dist/htmx.esm.js",

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: #2629 (comment)

[TeachMeHowToUse2FA]

👏

[tchoutri]

If I may offer a suggestion:

The use of "probably" is unclear to beginners; You give a very concrete example right after (the use of htmx plugins), but is this the only scenario?

[plooney81]

Wouldn't this be: 'htmx.org/dist/htmx.esm'?

[restless]

@plooney81 As per @1cg comment here: #2668 (comment) htmx.org uses htmx.esm.js by default now.
Please see: https://github.com/bigskysoftware/htmx/blob/master/package.json#L23C3-L23C30

In other words htmx.org should work (and works for me) well.

[databyte]

LGTM. This mimics my setup.

[marisst]

You are describing a workaround which requires creating htmx.js file to inject htmx into the window scope, so that the extensions can use it. It has to be done in a separate file, because ESM imports are asynchronous.

I have created a PR in the extensions repository, which eliminates the need of this workaround. With the new change extensions can be imported like this:

import `htmx.org`;
import `htmx-ext-extension-name`; // Replace `extension-name` with the extension name

It relies on the ESM import mechanism supported by most bundlers, including Webpack, Vite and Rollup.