Refactor BigPipe to use HTMX

Created on 23 May 2025, 7 days ago

Problem/Motivation

BigPipe is a primary user of the Ajax API. To gain a common understanding of how we can use HTMX in Drupal, we will refactor BigPipe to use HTMX

Proposed resolution

TBD

Remaining tasks

TBD

User interface changes

No UI features in BigPipe.

Introduced terminology

None

API changes

TBD

Data model changes

TBD

Release notes snippet

๐Ÿ“Œ Task
Status

Active

Version

11.0 ๐Ÿ”ฅ

Component

big_pipe.module

Created by

๐Ÿ‡บ๐Ÿ‡ธUnited States fathershawn New York

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @fathershawn
  • First commit to issue fork.
  • Merge request !12230Resolve #3526267 "ajax commands with htmx" โ†’ (Open) created by nod_
  • Pipeline finished with Failed
    5 days ago
    Total: 586s
    #506139
  • Merge request !12255Draft: htmx.swap() placeholders โ†’ (Closed) created by fathershawn
  • Pipeline finished with Failed
    3 days ago
    Total: 128s
    #507788
  • Pipeline finished with Failed
    3 days ago
    #507816
  • Pipeline finished with Canceled
    3 days ago
    Total: 131s
    #507835
  • Pipeline finished with Failed
    3 days ago
    Total: 534s
    #507836
  • Pipeline finished with Canceled
    2 days ago
    Total: 97s
    #508139
  • Pipeline finished with Failed
    2 days ago
    Total: 487s
    #508140
  • Pipeline finished with Canceled
    2 days ago
    Total: 299s
    #508187
  • Pipeline finished with Success
    2 days ago
    Total: 537s
    #508193
  • Pipeline finished with Canceled
    2 days ago
    #508265
  • Pipeline finished with Success
    2 days ago
    #508277
  • Pipeline finished with Failed
    2 days ago
    #508304
  • Pipeline finished with Failed
    2 days ago
    #508327
  • Pipeline finished with Success
    2 days ago
    #508342
  • ๐Ÿ‡ซ๐Ÿ‡ทFrance nod_ Lille

    It's green:)

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States fathershawn New York

    All green is super - nice work! This is direction really simplifies the changes in big_pipe.js and thatโ€™s a real plus.

    Because bigPipe as we have it re-uses existing javascript from the ajax system, to remove the ajax system we need to replace that.
    @nod_ had this list in a Slack discussion:

    We need the equivalent of those 3 commands to implement bigpipe

    • use Drupal\Core\Ajax\MessageCommand;
    • use Drupal\Core\Ajax\RedirectCommand;
    • use Drupal\Core\Ajax\ReplaceCommand;
    • Add_css/add_js and the settings but thatโ€™s mostly available already

    I think we need to identify the pieces of this list that htmx is not going to do, and implement those in general scope. Then the items that htmx does just fine in an ajax context, we need to have as helper methods in big_pipe.js and leverage the htmx api where we can.

    I'm going to take them in order.

    MessageCommand
    In the ajax context, I would have implimented this in HTMX using a header and a custom event handler that calls our Drupal.Message function. This is actually the example in the trigger headers documentation.

    HX-Trigger: {"showMessage":{"level" : "info", "message" : "Here Is A Message"}}
    

    One thing that Drupal.Message does client-side is determine the selector for the message container. If there is a way to do that server-side then this could also be implemented as an extra out-of-band swap on the response without any additional javascript.

    We do need a helper method for this that we can use in big_pipe though.

    RedirectCommand
    HTMX has both the HX-Redirect and HX-Location response headers. We don't have a response so we need a function for that in bigPipe.

    ReplaceCommand
    We also just need the bigPipe use case for bigPipe. This is one of the core competencies of htmx in an ajax request context.

    addCSS and addJS
    In the ajax context using htmx, these feel like out of band swaps as well.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States fathershawn New York

    fathershawn โ†’ changed the visibility of the branch 3526267-bigpipe-with-htmx to hidden.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States fathershawn New York
  • Pipeline finished with Failed
    1 day ago
    Total: 143s
    #509289
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States fathershawn New York

    Here's an MR into @nod_'s branch moving the bigPipe command JS into bigPipe scope. It looks like the test setup scripts don't like MR's into a feature branch. The tests generally pass locally - 2 failures involving noJS exceptions. Not sure if that's a false negative as all of these changes are in JS.

    If this is an acceptable direction then I think the next level of refactoring is to create the needed bigPipe Command classes to replace the AjaxCommands and update BigPipe.php to work without the Ajax API classes.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States fathershawn New York
Production build 0.71.5 2024