Problem/Motivation

As part of #3404409: [Plan] Gradually replace Drupal's AJAX system with HTMX and ongoing discussion in Drupal Slack copied below, there is strong support for adding the HTMX library to core as a first step towards building a functionally equivalent system to Drupal's jQuery based Ajax API.

Summary from Slack

[nod_] The scope of the existing issue shouldn't change, we can open a child issue that deals with adding the library...in that issue we'll need to do the dependency evaluation

[catch] Yeah everything @nod_ says is correct

Proposed resolution

  1. Complete the dependency evaluation
  2. Add the HTMX library to core.

Dependency Evalution

Maintainership of the package
HTMX is an open source project with about 100 maintainers. The lead maintainer is Carson Gross who also has created an account here on drupal.org specifically to support this effort.
Security policies of the package
The HTMX project published a security policy to support our use of the library.
Expected release and support cycles
Releases are expected quarterly.
Code quality
The source code is well maintained and includes automated tests.
Other dependencies it would add, if any (the full tree, not just direct dependencies), and evaluations for those dependencies as well
HTMX has no dependencies by design.
License
The license for HTMX is BSD Zero Clause License, which is listed as a GNU compatible license. It is a public domain equivalent license. The license provides all four freedoms without restriction.

Remaining tasks

  1. ✅ MR to add the library and update vendor-update.js script
  2. ✅ Framework manager sign-off
  3. ✅ Release manager sign-off
  4. Update Current JavaScript dependencies page
  5. Write release notes

Release notes snippet

In order to start replacing our custom ajax framework the htmx library was added to Drupal.

Issue fork drupal-3520723

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

fathershawn created an issue. See original summary.

fathershawn’s picture

Issue summary: View changes
fathershawn’s picture

Issue summary: View changes
fathershawn’s picture

Issue summary: View changes
fathershawn’s picture

Issue summary: View changes
fathershawn’s picture

Issue summary: View changes
fathershawn’s picture

Issue summary: View changes
catch’s picture

Version: 11.1.x-dev » 11.x-dev

nod_ made their first commit to this issue’s fork.

nod_’s picture

Status: Active » Needs work

few comments on the MR

fathershawn’s picture

Status: Needs work » Needs review
fathershawn’s picture

Status: Needs review » Active

MR is updated. Leaving as "active" until we have the security policy resolved

nod_’s picture

Status: Active » Postponed

Code is good to go for me, we can RTBC once the security issue is managed. To be more accurate the status should be postponed since we're waiting on external third party for a reply :)

fathershawn’s picture

Issue summary: View changes
fathershawn’s picture

Issue summary: View changes
fathershawn’s picture

Status: Postponed » Needs review
Issue tags: +Needs framework manager review

nod_ credited 1cg.

nod_’s picture

Crediting htmx maintainer for resolving the security policy issue

nicxvan’s picture

I confirmed the security policy was there as well.

I tried to follow the instructions to report a security issue, but the report a security vulnerability button was not there, I pinged @1cg on slack about it and he enabled the security reporting.

We should document this bit for future dependency evaluations so that it's easier to onboard projects.
It seems for github anyway there are two steps. Here is the documentation page on github: https://docs.github.com/en/code-security/security-advisories/working-wit...

After he configured it I confirmed that the button is now available and the security instructions are complete!

quietone’s picture

Issue summary: View changes

formatting change in the issue summary.

quietone’s picture

Also need release manager sign-off, which I don't see here.

catch’s picture

I very reluctantly worked on the jQuery 4 port of jquery.form.js because it was one of the last blockers to releasing Drupal 11. While the AJAX system works, it has a lot of custom and long-unmaintained JavaScript behind it and is one of our heaviest jQuery dependencies. There has been no progress in modernising any of that js in the past 10-15 years.

The plan to introduce HTMX alongside the AJAX system as a new API means we can ensure feature parity and improve APIs, but without having to try to implement complex JavaScript or BC layers - instead running both side by side until we can fully deprecate and remove the AJAX system.

catch’s picture

I very reluctantly worked on the jQuery 4 port of jquery.form.js because it was one of the last blockers to releasing Drupal 11. While the AJAX system works, it has a lot of custom and long-unmaintained JavaScript behind it and is one of our heaviest jQuery dependencies. There has been no progress in modernising any of that js in the past 10-15 years, instead we're left with a custom fork of an unmaintained GitHub repo.

The plan to introduce HTMX alongside the AJAX system as a new API means we can ensure feature parity and improve APIs, but without having to try to implement complex JavaScript or BC layers - instead running both side by side until we can fully deprecate and remove the AJAX system.

So from a release management point of view this will eventually be a large net reduction in our JavaScript dependencies and while there are details to figure out the transition plan is good.

I think this needs FEFM rather than FM review so switching the tags over.

nod_’s picture

nod_’s picture

Status: Needs review » Reviewed & tested by the community
nod_’s picture

fathershawn’s picture

Issue summary: View changes
fathershawn’s picture

Issue summary: View changes
pdureau’s picture

Assigned: Unassigned » pdureau
fathershawn’s picture

We have test failures that seem unrelated to this work: https://git.drupalcode.org/issue/drupal-3520723/-/pipelines/481254

fathershawn’s picture

Tests passed 🎉

pdureau’s picture

Indeed, it is green now ✅ following @nod_ https://git.drupalcode.org/project/drupal/-/merge_requests/11928/diffs?c...

I will take care of this today.

mstrelan’s picture

Does this need a change record?

fathershawn’s picture

I would recommend that not this child issue, but #3521173: Process attachments (CSS/JS) for HTMX responses and add drupal asset libraries carry the change record. My reason is that although this adds the library, without the ability to bring in dependent CSS/JS it's not really usable yet. HTMX natively has properties to merge header tags but that clearly misses a lot of our JS.

If someone with more familiarity about the expectations around change records thinks that 2nd issue would be better place, I'll move the tag.

nicxvan’s picture

I would think both issues would get one.

Even if it's not strictly usable in this release it is a new dependency people should be notified that it will be installed.

Though I note #3352389: Add open-telemetry/sdk and open-telemetry/exporter-otlp as dev dependencies didn't have one.

I would think a simple one that said htmx is now a core dependency starting with htmx version xyz and a link to the github would suffice.

nod_’s picture

We didn't have a change notice to say a library was added (like sortable and such), only the issue when it's actually used has a change notice.

For now we don't want people to use it as-is, we need to integrate it to make sure things like security and performance are taken into account.

catch’s picture

Yeah agreed with #37, we can add the CR when it's more meaningful, but retrospectively add this issue to it then for context.

fathershawn’s picture

Issue tags: -Needs change record

  • pdureau committed d1842a23 on 11.x
    Issue #3520723 by fathershawn, nod_, catch, nicxvan, 1cg: Add HTMX...
pdureau’s picture

Assigned: pdureau » Unassigned
Status: Reviewed & tested by the community » Fixed

Committed 216a91c and pushed to 11.x. Thanks!

pdureau’s picture

fathershawn’s picture

Someone with more permissions must be needed to edit the JS Dependencies page. I don't know if someone edited source or there are other text filters available, but I can't add additional headers and rows to the existing table.

Here's the needed data:

Repository https://github.com/bigskysoftware/htmx
Release cycle Releases are expected quarterly.
Security policies https://github.com/bigskysoftware/htmx/security
Security issue reporting https://github.com/bigskysoftware/htmx/security/advisories/new
Contact(s) 1cg, fathershawn

quietone’s picture

Assigned: Unassigned » quietone

Assigning to myself to sort out the documentation.

quietone’s picture

Assigned: quietone » Unassigned

I made an entry for HTMX at Current JavaScript dependencies and completed it from the information in the issue summary. Update that entry as needed.

longwave’s picture

Locally when I run yarn vendor-update on 11.x I get some changes without changing anything in package.json or the lockfile:

  1. assets/vendor/htmx.org is created, which is a copy of assets/vendor/htmx
  2. htmx.debug is upgraded from 2.0.1 to 2.0.4
nod_’s picture

Status: Fixed » Needs work

let's remove the debug extension, it's not used yet and there is a built-in way of doing the same thing (htmx.logAll())

as for the folder that's my bad, I removed the "folder" key and we needed it

nod_’s picture

Status: Needs work » Needs review
quietone’s picture

Status: Needs review » Needs work

Using the latest changes there are still no changes to the package file or the lock file.

This also still needs a release note.

nod_’s picture

Issue summary: View changes
Status: Needs work » Needs review

The lock file is correct, latest version is 2.0.4: https://www.npmjs.com/package/htmx.org?activeTab=versions

The debug extension is in the package because of how they used to do things: https://github.com/bigskysoftware/htmx/blob/master/dist/ext/README.md

longwave’s picture

Status: Needs review » Needs work

@nod_ I think we also need to delete assets/vendor/htmx/debug.js from the repo?

After applying the patch:

$ cd core
$ rm -rf assets/vendor/htmx
$ yarn vendor-update
...
$ git status
On branch 11.x
Your branch is up-to-date with 'origin/11.x'.

Changes not staged for commit:
  (use "git add/rm <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
	deleted:    assets/vendor/htmx/debug.js
	modified:   core.libraries.yml
	modified:   scripts/js/vendor-update.js

Maybe vendor-update should delete the target directory first, to handle deleted files?

nod_’s picture

Status: Needs work » Needs review

that's a good idea, follow-up though

  • longwave committed 042eb55b on 11.x
    Issue #3520723 followup by nod_: Add HTMX dependency to core
    
longwave’s picture

Status: Needs review » Fixed

Committed 042eb55 and pushed to 11.x. Thanks!

andypost’s picture

maybe change record could be added here? that's very helpful

mstrelan’s picture

@andypost see #34-39

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

fathershawn’s picture

fathershawn’s picture

Issue tags: +HTMX initiative