How do I properly define a library so that JS will execute after a certain condition is met?

Question

I'm creating a custom module to execute some JS AFTER the cache is cleared. Here is the structure of the module:

Module -> flush.info.yml

name: Flush
type: module
description: A very important module.
package: Custom
version: 1.0
core_version_requirement: ^8 || ^9

Module -> flush.libraries.yml

flush:
  version: 1.x
  js:
    js/flush.js: {}
  dependencies:
    - core/jquery
    - core/drupalSettings

Module -> flush.module

<?php

use Drupal\Core\Form\FormStateInterface;

/**
 * Implementation of hook_cache_flush()
 */

  function flush_cache_flush() {
    \Drupal::state()->set('flush_cache_cleared', TRUE);
  }

  function flush_page_attachments(array &$attachments) {
    if (\Drupal::state()->get('flush_cache_cleared')) {
      $attachments['#attached']['library'][] = 'flush/flush';
     \Drupal::state()->set('flush_cache_cleared', FALSE);
    }
  }

Module -> JS -> flush.js

(function ($, Drupal, drupalSettings) {
    'use strict';

    Drupal.behaviors.flush = {
      /**
       * Drupal attach behavior.
       */
      attach: function (context, settings) {
        this.settings = this.getSettings(settings);
        alert("flush!");
        console.log ("Hello World");
      },
    };
  })(jQuery, Drupal, drupalSettings);

Both functions in flush.module work properly, however the JS that is #attached which is simply supposed to use an alert() never runs. I believe the issue is related to this line specifically : $attachments['#attached']['library'][] = 'flush/flush';

Is there something obvious I'm doing wrong? I used page_attachments as the method to attach the JS because it does not necessarily have to be associated with a specific part of the page, or a render array, etc. Please let me know if you have any potential ideas as to what the issue could be, thanks!

Answer 1

I wouldn't use Drupal::state() or hook_page_attachments(), those are too static. Better use a session value and a block, see my comment in the previous question.

Set the session value in the hook when the cache is cleared and only if not running from the command line:

function flush_cache_flush() {
  if (PHP_SAPI !== 'cli') {
    \Drupal::request()->getSession()->set('run_flush_js', TRUE);
  }
}

In the block check the session value and remove it so that it doesn't persist after the redirect.

src/Plugin/Block/FlushBlock.php

<?php

namespace Drupal\flush\Plugin\Block;

use Drupal\Core\Block\BlockBase;

/**
 * Provides a flush block.
 *
 * @Block(
 *   id = "flush_flush",
 *   admin_label = @Translation("Flush"),
 *   category = @Translation("Custom")
 * )
 */
class FlushBlock extends BlockBase {

  /**
   * {@inheritdoc}
   */
  public function build() {
    $session = \Drupal::request()->getSession();  
    $build = [];
    if ($session->get('run_flush_js')) {
      $session->remove('run_flush_js');
      $build['content'] = [
        '#markup' => '<div class="run-flush-js"></div>',
        '#attached' => ['library' => ['flush/flush']],
      ];
    }
    $build['#cache']['max-age'] = 0;
    return $build;
  }
}

js/flush.js

(function ($, Drupal, once) {
  'use strict';

  Drupal.behaviors.flush = {
    /**
     * Drupal attach behavior.
     */
    attach: function (context, settings) {
      if (once('flush', '.run-flush-js', context).length) {
        alert("flush!");
      }
    }
  };
})(jQuery, Drupal, once);

flush.libraries.yml

flush:
  js:
    js/flush.js: {}
  dependencies:
    - core/drupal
    - core/jquery
    - core/once

Edit: Update js code, see How can I make this JavaScript code get executed when the BigPipe module is enabled?

Answer 2

I think you should approach this differently. Here's what I would do:

First, implement hook_cache_flush() and use it to store the last cache flush time to Drupal state.

function flush_cache_flush() {
  \Drupal::state()->set('flush_cache_cleared', time());
}

Next, use hook_page_attachments() to always attach your javascript on every page, but pass the the cache cleared timestamp to your javascript.

function flush_page_attachments(array &$attachments) {
  $attachments['#attached']['library'][] = 'flush/flush';
  $attachments['#attached']['drupalSettings']['flush_cache_cleared'] = \Drupal::state()->get('flush_cache_cleared');
}

Last, in your javascript, check if the new cache cleared time is more recent than the previous (you'll need to store this on the client side via local storage or something).

If the times are different, you know the cache was cleared.

(function ($, Drupal, drupalSettings) {
  'use strict';

  Drupal.behaviors.flush = {
    attach: function (context, settings) {

      let cacheFlushedTime = drupalSettings['flush_cache_cleared'];
      // Do stuff with the cache_flushed_time here, like
      // compare it to a previously known cache flushed time...

    },
  };
})(jQuery, Drupal, drupalSettings);