Htmx swap placeholders from templates

The experiment here is using the object wrapped template idea with a simplified mutation observer. The template content is used to replace the big pipe placeholder via htmx.swap(). A response containing the needed asset markup is attached as a data attribute. Existing htmx request attribute processing is called directly to move the assets into place.

core/misc/htmx/htmx-assets.js

@@ -7,60 +7,13 @@
  * page.
  */
 
-(function (Drupal, drupalSettings, loadjs, htmx) {
-  // Disable htmx loading of script tags since we're handling it.
-  htmx.config.allowScriptTags = false;
-
-  /**
-   * Used to hold the loadjs promise.
-   *
-   * It's declared in htmx:beforeSwap and checked in htmx:afterSettle to trigger
-   * the custom htmx:drupal:load event.
-   *
-   * @type {WeakMap<XMLHttpRequest, Promise>}
-   */
-  const requestAssetsLoaded = new WeakMap();
-
+(function (Drupal, drupalSettings, htmx) {
   /**
-   * Helper function to merge two objects recursively.
    *
-   * @param current
-   *   The object to receive the merged values.
-   * @param sources
-   *   The objects to merge into current.
-   *
-   * @return object
-   *   The merged object.
-   *
-   * @see https://youmightnotneedjquery.com/#deep_extend
    */
-  function mergeSettings(current, ...sources) {
-    if (!current) {
-      return {};
-    }
-
-    sources
-      .filter((obj) => Boolean(obj))
-      .forEach((obj) => {
-        Object.entries(obj).forEach(([key, value]) => {
-          switch (Object.prototype.toString.call(value)) {
-            case '[object Object]':
-              current[key] = current[key] || {};
-              current[key] = mergeSettings(current[key], value);
-              break;
-
-            case '[object Array]':
-              current[key] = mergeSettings(new Array(value.length), value);
-              break;
-
-            default:
-              current[key] = value;
-          }
-        });
-      });
-
-    return current;
-  }
+  htmx.on('htmx:beforeRequest', ({ detail }) => {
+    Drupal.htmx.assetsPromises.set(detail.xhr, Promise.resolve());
+  });
 
   /**
    * Send the current ajax page state with each request.
@@ -94,81 +47,24 @@
     // Custom event to detach behaviors.
     htmx.trigger(detail.elt, 'htmx:drupal:unload');
 
-    // We need to parse the response to find all the assets to load.
-    // htmx cleans up too many things to be able to rely on their dom fragment.
-    let responseHTML = Document.parseHTMLUnsafe(detail.serverResponse);
-
-    // Update drupalSettings
-    // Use direct child elements to harden against XSS exploits when CSP is on.
-    const settingsElement = responseHTML.querySelector(
-      ':is(head, body) > script[type="application/json"][data-drupal-selector="drupal-settings-json"]',
-    );
-    if (settingsElement !== null) {
-      mergeSettings(drupalSettings, JSON.parse(settingsElement.textContent));
-    }
-
-    // Load all assets files. We sent ajax_page_state in the request so this is only the diff with the current page.
-    const assetsTags = responseHTML.querySelectorAll(
-      'link[rel="stylesheet"][href], script[src]',
-    );
-    const bundleIds = Array.from(assetsTags)
-      .filter(({ href, src }) => !loadjs.isDefined(href ?? src))
-      .map(({ href, src, type, attributes }) => {
-        const bundleId = href ?? src;
-        let prefix = 'css!';
-        if (src) {
-          prefix = type === 'module' ? 'module!' : 'js!';
-        }
-
-        loadjs(prefix + bundleId, bundleId, {
-          // JS files are loaded in order, so this needs to be false when 'src'
-          // is defined.
-          async: !src,
-          // Copy asset tag attributes to the new element.
-          before(path, element) {
-            // This allows all attributes to be added, like defer, async and
-            // crossorigin.
-            Object.values(attributes).forEach((attr) => {
-              element.setAttribute(attr.name, attr.value);
-            });
-          },
-        });
-
-        return bundleId;
-      });
-
-    // Helps with memory management.
-    responseHTML = null;
-
-    // Nothing to load, we resolve the promise right away.
-    let assetsLoaded = Promise.resolve();
-    // If there are assets to load, use loadjs to manage this process.
-    if (bundleIds.length) {
-      // Trigger the event once all the dependencies have loaded.
-      assetsLoaded = new Promise((resolve, reject) => {
-        loadjs.ready(bundleIds, {
-          success: resolve,
-          error(depsNotFound) {
-            const message = Drupal.t(
-              `The following files could not be loaded: @dependencies`,
-              { '@dependencies': depsNotFound.join(', ') },
-            );
-            reject(message);
-          },
-        });
-      });
+    if (!detail.xhr) {
+      return;
     }
 
-    requestAssetsLoaded.set(detail.xhr, assetsLoaded);
+    // Load assets and remove the links and scripts tags so that htmx doesn't
+    // add them twice.
+    Drupal.htmx.processServerResponse(detail);
   });
 
   // Trigger the Drupal processing once all assets have been loaded.
   // @see https://htmx.org/events/#htmx:afterSettle
   htmx.on('htmx:afterSettle', ({ detail }) => {
-    requestAssetsLoaded.get(detail.xhr).then(() => {
-      htmx.trigger(detail.elt, 'htmx:drupal:load');
-      // This should be automatic but don't wait for the garbage collector.
-      requestAssetsLoaded.delete(detail.xhr);
-    });
+    (Drupal.htmx.assetsPromises.get(detail.xhr) || Promise.resolve()).then(
+      () => {
+        htmx.trigger(detail.elt, 'htmx:drupal:load');
+        // This should be automatic but don't wait for the garbage collector.
+        Drupal.htmx.assetsPromises.delete(detail.xhr);
+      },
+    );
   });
-})(Drupal, drupalSettings, loadjs, htmx);
+})(Drupal, drupalSettings, htmx);