Add cache busting query string to drupalSettings and use it for ES modules

app/modules/niklan/assets/js/hljs.init.js

@@ -1,5 +1,4 @@
 ((Drupal, once, drupalSettings) => {
-
   let worker;
   let requestId = 0;
   const pendingRequests = new Map();
@@ -9,9 +8,9 @@
       detail: {
         element,
         originalCode: element.textContent,
-        highlightedHTML: html
+        highlightedHTML: html,
       },
-      bubbles: true
+      bubbles: true,
     });
 
   const handleIntersection = (entries) => {
@@ -29,7 +28,8 @@
         requestId: currentRequestId,
         code: codeElement.textContent,
         language: preElement.dataset.language,
-        esModulesBasePath: drupalSettings.highlightJs.esModulesBasePath
+        esModulesBasePath: drupalSettings.highlightJs.esModulesBasePath,
+        cacheBustingQueryString: drupalSettings.cacheQueryBustingString,
       });
     });
   };
@@ -57,8 +57,11 @@
       .from(once('code-highlight', 'pre > code'))
       .forEach(code => observer.observe(code));
 
-    worker = new Worker(drupalSettings.highlightJs.workerPath, { type: 'module' });
-    worker.addEventListener('message', handleWorkerMessage);
+    worker = new Worker(
+      `${drupalSettings.highlightJs.workerPath}?${drupalSettings.cacheQueryBustingString}`,
+      { type: "module" },
+    );
+    worker.addEventListener("message", handleWorkerMessage);
   };
 
 

app/modules/niklan/assets/js/hljs.worker.js

@@ -14,13 +14,13 @@ const supportedLanguages = {
 
 onmessage = async (event) => {
   try {
-    const { requestId, code, language, esModulesBasePath } = event.data;
+    const { requestId, code, language, esModulesBasePath, cacheBustingQueryString } = event.data;
 
-    const hljsModule = await import(`${esModulesBasePath}/highlight.min.js`);
+    const hljsModule = await import(`${esModulesBasePath}/highlight.min.js?${cacheBustingQueryString}`);
     const hljs = hljsModule.default;
 
     if (language && supportedLanguages[language]) {
-      const langModule = await import(`${esModulesBasePath}/${supportedLanguages[language]}`);
+      const langModule = await import(`${esModulesBasePath}/${supportedLanguages[language]}?${cacheBustingQueryString}`);
       hljs.registerLanguage(language, langModule.default);
     }
 

app/modules/niklan/src/Hook/Asset/CacheBustingQuerySetting.php

@@ -0,0 +1,21 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\niklan\Hook\Asset;
+
+use Drupal\Core\Asset\AssetQueryStringInterface;
+use Drupal\Core\Hook\Attribute\Hook;
+
+#[Hook('js_settings_build')]
+final readonly class CacheBustingQuerySetting {
+
+  public function __construct(
+    private AssetQueryStringInterface $queryString,
+  ) {}
+
+  public function __invoke(array &$settings): void {
+    $settings['cacheQueryBustingString'] = $this->queryString->get();
+  }
+
+}