Disable cache for one JS file / library

Question

I'm using Drupal 8.1.7 and use group module. When a user display a group or an article linked to a group (/group/... or node/...), I want to specify some specific CSS for each group.

I develop a module that do the trick (verify if we display a group or an article, get the group and load a JS file that modify the CSS style of the page). Work great on my dev drupal with no cache, but when I test the module in production with cache active, the JS file seems to be load only once. Have to do a drush cr to load again the file.

There is any way to tell Drupal to load the file everytime, or don't put it in cache ? In the mymodule.libraries.yml maybe ?

color:
  js:
    js/mymodule.js: {}
  dependencies:
    - core/jquery
    - core/drupalSettings
    - core/drupal

Answer 1

With the current approach, you want your JS file to be loaded globally so either custom module, or directly in the theme.

However this is not the best solution. What you want is to preprocess the node, check if it belongs to any group and add identifying classes. With that you can then target with CSS.

If you really want to go the difficult, look at #lazy_builder placeholders. This blog post has a nice explanation.

Answer 2

I can not believe that you will have one different JS for every group. So caching is cool, and I assume your problem is the triggering of a function in the JS.

You can use the Drupal.behaviors to call a function in your JS everytime a page is loaded, i.e.

(function ($, Drupal) {

  Drupal.behaviors.anyInit = {
      attach: function () {
        myInitFunction();
      }
  }
})(jQuery, Drupal);

function myInitFunction() { do something }

And you can pass variables to the JS (like your group name), by attaching them to your rendering array, like so:

$build['#attached']['library'][] = 'bootasde/asdejs';
$build['#attached']['drupalSettings']['bootasde']['proreos_server'] = SystemTools::getProreosServer();
$build['#attached']['drupalSettings']['bootasde']['checktyp'] = 'a';
$build['#attached']['drupalSettings']['bootasde']['id'] = $id;

Then you access that variables in your JS like:

  var server = drupalSettings.bootasde.proreos_server;
  var id = drupalSettings.bootasde.id;
  var tp = drupalSettings.bootasde.checktyp;

Hope that helps.

Another way could be to add the group names to the CSS classes in your twig template and have some special selectors for each groupname.