Compatibility with BigPipe

Created on 18 May 2023, about 1 year ago
Updated 28 May 2024, 18 days ago

Problem/Motivation

BigPipe has a long standing issue:
🐛 Fix AJAX add_css – insert the needed CSS assets after the already-inserted ones Needs work

Basically, assets (JS and CSS) are being re-ordered, causing issues as identified below.

Drupal 9.2 has deprecated jQuery.Once in favor of core/once:

To ensure compatibility between the still-supported D9.2 below, Blazy copied core/once library into dBlazy.once. Unfortunately during the implementation, we have many issues related to the BigPipe issue above:

Specific to JS issue, current workarounds are by providing the old jQuery.Once approach, that is by adding a kind of processed class. This means we have to update each sub-modules. We need to figure out avoiding this in the first place to be more efficient and hopefully minimize unnecessary DOM mutations, useless extra bytes, and ugly unnecessary classes.

Steps to reproduce

Install BigPipe along with the older Slick 2.7 before the fix at 2.8, etc. Notice the console errors.

Proposed resolution

Update core/once copy to account for BigPipe assets re-ordering specific to some known issues above. This wouldn't solve any other issues, e.g. related to CSS and other JS weirdos, but will at least fix this particular one.

Remaining tasks

Write a patch.

User interface changes

None.

API changes

None.

Data model changes

None.

📌 Task
Status

Postponed

Version

3.0

Component

JavaScript

Created by

🇮🇩Indonesia gausarts

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

Comments & Activities

  • Issue created by @gausarts
  • Status changed to Postponed about 1 year ago
  • 🇮🇩Indonesia gausarts

    Postponed till everybody got enough snacks to spare.

  • 🇮🇩Indonesia gausarts

    Another problem with BigPipe:
    Before blazy:2.17, Masonry with Flexbox and Native Grid, although not so great implementations, had been made to play nice with BigPipe until we have VIS or IO infinite pagers. Once we have infinite pagers along with BigPipe, they stopped working.

    Since 2.17 we had to remove supporting BigPipe for infinite pagers to work with a heads up that BigPipe will now screw up Masonry:
    https://git.drupalcode.org/project/blazy/-/blob/8.x-2.17/docs/TROUBLESHO...

  • 🇺🇸United States mortona2k Seattle

    This seems like a major issue, and a reason to avoid the current version of this module. I am using Splide 2.0.1 and it's broken when big pipe is enabled.

    The purpose of this module is optimize loading of static content. Having to disable big pipe is not worth it in many cases.

    Is the fix implemented in Slick 2.8? Is the issue in Blazy or the other dependent modules?

    Blazy copied core/once, but the proposed fix is to update core/once? Are we waiting for that to happen, or can we implement in dBlazy.once?

    I have a hunch that it's possible to implement this differently without duplicating/modifying once. If the issue is with loading the css in order, is it possible to load the required css on the first page load, instead of via ajax?

  • 🇮🇩Indonesia gausarts

    It is a bit problematic, indeed.

    Details are in the links of the OP under Problem/Motivation for most of your questions.

    It is not about Blazy. It is BigPipe.

    You already proved it yourself;

    • Enabling BigPipe caused Blazy broken.
    • Disabling BigPipe Blazy works fine.

    The underlying issue is the assets, JS and CSS, reorders as noted in the link above.

    You will have issues when assets are re-ordered. It is a public knowledge.

    For years, we tried to be compatible, but when we did, it also broke some other behaviors noted in #4.

    That is why it is a bit problematic, and the issue is intentionally left open to avoid more similar dup issues.

    The fix should be in the core. Blazy just tried to minimize it with some fragile workarounds while core issue is still not fixed.

    For now, your preference is the way to go, if you want BigPipe, uninstall Blazy, and vice versa.

  • 🇮🇩Indonesia gausarts

    In case misunderstood, the current workarounds as noted in the OP makes Blazy compatible with BigPipe for almost 99%.
    For normal usages, both should be compatible with those workarounds.

    The remaining 1%, as noted in #4 and likely few more edge cases, are still screwed up, normally due to dynamic contents like AJAX which makes the workarounds screwed up, too.

    The two reasons this issue is left open are:

    • to avoid dup reports seen anywhere else.
    • to remove workarounds if core fixes it in the linked issue.
    • gausarts committed 93262a64 on 3.0.x
      - Issue #3361143: Compatibility with BigPipe
      - Renamed .is-b-native to ....
  • 🇮🇩Indonesia gausarts

    The latest fix should remove the needs for the OP workarounds, i.e.: adding processed class ala jQuery.once.
    With or without current workarounds should work without issues as seen at grids (without workarounds) and the rest left intact (with some workarounds).

    We'll not backport this to avoid potential regressions.
    Leaving this open till the next few releases to verify if regressions.

    If anyone found any regressions or misses, feel free to update or report.

    Thank you.

Production build 0.69.0 2024