Chris@0: /**
Chris@0:  * @file
Chris@0:  * Renders BigPipe placeholders using Drupal's Ajax system.
Chris@0:  */
Chris@0: 
Chris@17: (function($, Drupal, drupalSettings) {
Chris@0:   /**
Chris@14:    * Maps textContent of <script type="application/vnd.drupal-ajax"> to an AJAX response.
Chris@14:    *
Chris@14:    * @param {string} content
Chris@14:    *   The text content of a <script type="application/vnd.drupal-ajax"> DOM node.
Chris@14:    * @return {Array|boolean}
Chris@14:    *   The parsed Ajax response containing an array of Ajax commands, or false in
Chris@14:    *   case the DOM node hasn't fully arrived yet.
Chris@14:    */
Chris@14:   function mapTextContentToAjaxResponse(content) {
Chris@14:     if (content === '') {
Chris@14:       return false;
Chris@14:     }
Chris@14: 
Chris@14:     try {
Chris@14:       return JSON.parse(content);
Chris@17:     } catch (e) {
Chris@14:       return false;
Chris@14:     }
Chris@14:   }
Chris@14: 
Chris@14:   /**
Chris@17:    * Executes Ajax commands in <script type="application/vnd.drupal-ajax"> tag.
Chris@17:    *
Chris@17:    * These Ajax commands replace placeholders with HTML and load missing CSS/JS.
Chris@17:    *
Chris@17:    * @param {number} index
Chris@17:    *   Current index.
Chris@17:    * @param {HTMLScriptElement} placeholderReplacement
Chris@17:    *   Script tag created by BigPipe.
Chris@17:    */
Chris@17:   function bigPipeProcessPlaceholderReplacement(index, placeholderReplacement) {
Chris@17:     const placeholderId = placeholderReplacement.getAttribute(
Chris@17:       'data-big-pipe-replacement-for-placeholder-with-id',
Chris@17:     );
Chris@17:     const content = this.textContent.trim();
Chris@17:     // Ignore any placeholders that are not in the known placeholder list. Used
Chris@17:     // to avoid someone trying to XSS the site via the placeholdering mechanism.
Chris@17:     if (
Chris@17:       typeof drupalSettings.bigPipePlaceholderIds[placeholderId] !== 'undefined'
Chris@17:     ) {
Chris@17:       const response = mapTextContentToAjaxResponse(content);
Chris@17:       // If we try to parse the content too early (when the JSON containing Ajax
Chris@17:       // commands is still arriving), textContent will be empty or incomplete.
Chris@17:       if (response === false) {
Chris@17:         /**
Chris@17:          * Mark as unprocessed so this will be retried later.
Chris@17:          * @see bigPipeProcessDocument()
Chris@17:          */
Chris@17:         $(this).removeOnce('big-pipe');
Chris@17:       } else {
Chris@17:         // Create a Drupal.Ajax object without associating an element, a
Chris@17:         // progress indicator or a URL.
Chris@17:         const ajaxObject = Drupal.ajax({
Chris@17:           url: '',
Chris@17:           base: false,
Chris@17:           element: false,
Chris@17:           progress: false,
Chris@17:         });
Chris@17:         // Then, simulate an AJAX response having arrived, and let the Ajax
Chris@17:         // system handle it.
Chris@17:         ajaxObject.success(response, 'success');
Chris@17:       }
Chris@17:     }
Chris@17:   }
Chris@17: 
Chris@17:   // The frequency with which to check for newly arrived BigPipe placeholders.
Chris@17:   // Hence 50 ms means we check 20 times per second. Setting this to 100 ms or
Chris@17:   // more would cause the user to see content appear noticeably slower.
Chris@17:   const interval = drupalSettings.bigPipeInterval || 50;
Chris@17: 
Chris@17:   // The internal ID to contain the watcher service.
Chris@17:   let timeoutID;
Chris@17: 
Chris@17:   /**
Chris@0:    * Processes a streamed HTML document receiving placeholder replacements.
Chris@0:    *
Chris@0:    * @param {HTMLDocument} context
Chris@0:    *   The HTML document containing <script type="application/vnd.drupal-ajax">
Chris@0:    *   tags generated by BigPipe.
Chris@0:    *
Chris@0:    * @return {bool}
Chris@0:    *   Returns true when processing has been finished and a stop signal has been
Chris@0:    *   found.
Chris@0:    */
Chris@0:   function bigPipeProcessDocument(context) {
Chris@0:     // Make sure we have BigPipe-related scripts before processing further.
Chris@0:     if (!context.querySelector('script[data-big-pipe-event="start"]')) {
Chris@0:       return false;
Chris@0:     }
Chris@0: 
Chris@17:     $(context)
Chris@17:       .find('script[data-big-pipe-replacement-for-placeholder-with-id]')
Chris@0:       .once('big-pipe')
Chris@0:       .each(bigPipeProcessPlaceholderReplacement);
Chris@0: 
Chris@0:     // If we see the stop signal, clear the timeout: all placeholder
Chris@0:     // replacements are guaranteed to be received and processed.
Chris@0:     if (context.querySelector('script[data-big-pipe-event="stop"]')) {
Chris@0:       if (timeoutID) {
Chris@0:         clearTimeout(timeoutID);
Chris@0:       }
Chris@0:       return true;
Chris@0:     }
Chris@0: 
Chris@0:     return false;
Chris@0:   }
Chris@0: 
Chris@0:   function bigPipeProcess() {
Chris@0:     timeoutID = setTimeout(() => {
Chris@0:       if (!bigPipeProcessDocument(document)) {
Chris@0:         bigPipeProcess();
Chris@0:       }
Chris@0:     }, interval);
Chris@0:   }
Chris@0: 
Chris@0:   bigPipeProcess();
Chris@0: 
Chris@0:   // If something goes wrong, make sure everything is cleaned up and has had a
Chris@0:   // chance to be processed with everything loaded.
Chris@0:   $(window).on('load', () => {
Chris@0:     if (timeoutID) {
Chris@0:       clearTimeout(timeoutID);
Chris@0:     }
Chris@0:     bigPipeProcessDocument(document);
Chris@0:   });
Chris@17: })(jQuery, Drupal, drupalSettings);