Disqus module not working with BigPipe

ztl8702 created an issue. See original summary.

Yes, it looks like we should re-run the checking after each AJAX call. I am working on a patch now. I am not sure whether simply removing .once() will work. Probably needs more work.

I put the following debug code inside the disqus behavior, outside .once():

console.log("Disqus behavior called: ");
console.log(settings.disqus);

But when I load the page I got the following logs:

Disqus behavior called: 
undefined 
Disqus behavior called:  
undefined 

...

Disqus behavior called: 
undefined

It turns out the behavior is indeed called after each AJAX call, however even in the last call (when BigPipe should have already done loading), the disqus setting is still undefined.

This is strange.

Wim Leers, it turns out that drupalSettings.disqus is never set when BigPipe is enabled.

When BigPipe is enabled (logged in), console.log(drupalSettings) returns:

Object { path: Object, pluralDelimiter: "", ajaxPageState: Object, ajaxTrustedUrl: Array[0], bigPipePlaceholderIds: Object, disqusComments: "someid", toolbar: Object, user: Object, dialog: Object, editor: Object }

When BigPipe is NOT enabled, console.log(drupalSettings) returns:

Object { path: Object, pluralDelimiter: "", disqusComments: "someid", disqus: Object, user: Object }

If we look at the response, disqus settings are not included in both the initial drupalSettings object nor in the second flush by BigPipe.

The disqusComments object, however, does load no matter BigPipe is enabled or not.

@nod_ Adding core/drupalSettings to disqus.libraries.yml does not help, as far as I have tested.
What I find strange is that the disqusComments property is always set in drupalSettings, regardless of whether BigPipe is enabled or not.

Umm... Looks like the callback function for the placeholder of Disqus Element is not called, which is where the disqus settings are attached to drupalSettings.

Let me see why that happened.

Interestingly, the placeholder generated by Disqus module has been overridden by BigPipe, but somehow this placeholder does not appears in the final HTML. The Disqus Element is rendered as if it is not served via BigPipe, however its callback function is never called.

In my case, BigPipe replaced two HTML placeholders, StatusMessages, and DisqusComments; however, only StatusMessages one appears in the preBody.

OK. I think I have located where the error is.

In Disqus.php, it does this:

public function getInfo() {
    return array(
        
      '#title' => '',
      '#url' => '',
      '#identifier' => '',
      '#callbacks' => '',
      '#theme_wrappers' => ['disqus_noscript', 'container'],
      '#attributes' => ['id' => 'disqus_thread'],
      '#pre_render' => [
        get_class() . '::generatePlaceholder',
      ],
    );
  }

I think this causes the Disqus placeholder to be rendered instead of the BigPipe placeholder.

After changing this function to:

public function getInfo() {
    return array(
      '#pre_render' => [
        get_class() . '::generatePlaceholder',
      ],
    );
  }

The disqus object will appear in drupalSettings. Now we just need to fix the javascript.

So here is the patch.

What I did:

• Removed several properties from the array in getInfo(), as stated above;
• Fixed disqus.js so that it will check if Disqus should be loaded after every AJAX call. (while still ensuring that Disqus will only be loaded once)

The patch works for me. Please help with testing. Thanks.

@Fabianx
in src/Element/Disqus.php
function generatePlaceholder looks like this:

  public static function generatePlaceholder(array $element) {
    if (\Drupal::currentUser()->hasPermission('view disqus comments')) {
      $element[] = [
        '#lazy_builder' => [
          get_class() . '::displayDisqusComments',
          [
            $element['#title'],
            $element['#url'],
            $element['#identifier'],
          ]
        ],
        '#create_placeholder' => TRUE,
      ];
    }

    return $element;
  }

And function displayDisqusComments adds #theme_wrappers and #attributes.

  public static function displayDisqusComments($title, $url, $identifier) {
    $disqus_settings = \Drupal::config('disqus.settings');
    /** @var \Drupal\Core\Render\RendererInterface $renderer */
    $renderer = \Drupal::service('renderer');
    $element = [
      '#theme_wrappers' => ['disqus_noscript', 'container'],
      '#attributes' => ['id' => 'disqus_thread'],
    ];

and 'title', 'url', 'identifier' finally gets set in the callback function.

    $disqus = [
      'domain' => $disqus_settings->get('disqus_domain'),
      'url' => $url,
      'title' => $title,
      'identifier' => $identifier,
      'disable_mobile' => $disqus_settings->get('behavior.disqus_disable_mobile'),
    ];

That's why I don't think they need to be set in the first function. Tell me if I am wrong.

@slashrsm

I think you are right. What really matters is only '#theme_wrappers'.

@slashrsm,
Yes. So we only remove '#theme_wrappers'.
I will test it shortly.

@omlx
Sorry I forgot.
A simple fix. Could you try it out?