Unverified Commit 6da66e99 authored by lauriii's avatar lauriii
Browse files

Issue #3196973 by casey, nod_, andypost, yogeshmpawar, droplet, Wim Leers,...

Issue #3196973 by casey, nod_, andypost, yogeshmpawar, droplet, Wim Leers, justafish, finnsky: Use Mutation observer for BigPipe replacements
parent 5496d64a
......@@ -5,6 +5,5 @@ big_pipe:
drupalSettings:
bigPipePlaceholderIds: []
dependencies:
- core/once
- core/drupal.ajax
- core/drupalSettings
......@@ -3,15 +3,39 @@
* Renders BigPipe placeholders using Drupal's Ajax system.
*/
(function (Drupal, drupalSettings) {
((Drupal, drupalSettings) => {
/**
* Maps textContent of <script type="application/vnd.drupal-ajax"> to an AJAX response.
* CSS selector for script elements to process on page load.
*
* @type {string}
*/
const replacementsSelector = `script[data-big-pipe-replacement-for-placeholder-with-id]`;
/**
* Ajax object that will process all the BigPipe responses.
*
* Create a Drupal.Ajax object without associating an element, a progress
* indicator or a URL.
*
* @type {Drupal.Ajax}
*/
const ajaxObject = Drupal.ajax({
url: '',
base: false,
element: false,
progress: false,
});
/**
* Maps textContent of <script type="application/vnd.drupal-ajax"> to an AJAX
* response.
*
* @param {string} content
* The text content of a <script type="application/vnd.drupal-ajax"> DOM node.
* The text content of a <script type="application/vnd.drupal-ajax"> DOM
* node.
* @return {Array|boolean}
* The parsed Ajax response containing an array of Ajax commands, or false in
* case the DOM node hasn't fully arrived yet.
* The parsed Ajax response containing an array of Ajax commands, or false
* in case the DOM node hasn't fully arrived yet.
*/
function mapTextContentToAjaxResponse(content) {
if (content === '') {
......@@ -30,108 +54,85 @@
*
* These Ajax commands replace placeholders with HTML and load missing CSS/JS.
*
* @param {HTMLScriptElement} placeholderReplacement
* @param {HTMLScriptElement} replacement
* Script tag created by BigPipe.
*/
function bigPipeProcessPlaceholderReplacement(placeholderReplacement) {
const placeholderId = placeholderReplacement.getAttribute(
'data-big-pipe-replacement-for-placeholder-with-id',
);
const content = placeholderReplacement.textContent.trim();
function processReplacement(replacement) {
const id = replacement.dataset.bigPipeReplacementForPlaceholderWithId;
// Because we use a mutation observer the content is guaranteed to be
// complete at this point.
const content = replacement.textContent.trim();
// Ignore any placeholders that are not in the known placeholder list. Used
// to avoid someone trying to XSS the site via the placeholdering mechanism.
if (
typeof drupalSettings.bigPipePlaceholderIds[placeholderId] !== 'undefined'
) {
const response = mapTextContentToAjaxResponse(content);
// If we try to parse the content too early (when the JSON containing Ajax
// commands is still arriving), textContent will be empty or incomplete.
if (response === false) {
/**
* Mark as unprocessed so this will be retried later.
* @see bigPipeProcessDocument()
*/
once.remove('big-pipe', placeholderReplacement);
} else {
// Create a Drupal.Ajax object without associating an element, a
// progress indicator or a URL.
const ajaxObject = Drupal.ajax({
url: '',
base: false,
element: false,
progress: false,
});
// Then, simulate an AJAX response having arrived, and let the Ajax
// system handle it.
ajaxObject.success(response, 'success');
}
if (typeof drupalSettings.bigPipePlaceholderIds[id] === 'undefined') {
return;
}
}
// The frequency with which to check for newly arrived BigPipe placeholders.
// Hence 50 ms means we check 20 times per second. Setting this to 100 ms or
// more would cause the user to see content appear noticeably slower.
const interval = drupalSettings.bigPipeInterval || 50;
// Immediately remove the replacement to prevent it being processed twice.
delete drupalSettings.bigPipePlaceholderIds[id];
const response = mapTextContentToAjaxResponse(content);
// The internal ID to contain the watcher service.
let timeoutID;
if (response === false) {
return;
}
// Then, simulate an AJAX response having arrived, and let the Ajax system
// handle it.
ajaxObject.success(response, 'success');
}
/**
* Processes a streamed HTML document receiving placeholder replacements.
*
* @param {HTMLDocument} context
* The HTML document containing <script type="application/vnd.drupal-ajax">
* tags generated by BigPipe.
* Check that the element is valid to process and process it.
*
* @return {bool}
* Returns true when processing has been finished and a stop signal has been
* found.
* @param {HTMLElement} node
* The node added to the body element.
*/
function bigPipeProcessDocument(context) {
// Make sure we have BigPipe-related scripts before processing further.
if (!context.querySelector('script[data-big-pipe-event="start"]')) {
return false;
function checkMutationAndProcess(node) {
if (
node.nodeType === Node.ELEMENT_NODE &&
node.nodeName === 'SCRIPT' &&
node.dataset &&
node.dataset.bigPipeReplacementForPlaceholderWithId
) {
processReplacement(node);
}
}
// Attach Drupal behaviors early, if possible.
once('big-pipe-early-behaviors', 'body', context).forEach((el) => {
Drupal.attachBehaviors(el);
/**
* Handles the mutation callback.
*
* @param {MutationRecord[]} mutations
* The list of mutations registered by the browser.
*/
function processMutations(mutations) {
mutations.forEach(({ addedNodes }) => {
addedNodes.forEach(checkMutationAndProcess);
});
}
once(
'big-pipe',
'script[data-big-pipe-replacement-for-placeholder-with-id]',
context,
).forEach(bigPipeProcessPlaceholderReplacement);
// If we see the stop signal, clear the timeout: all placeholder
// replacements are guaranteed to be received and processed.
if (context.querySelector('script[data-big-pipe-event="stop"]')) {
if (timeoutID) {
clearTimeout(timeoutID);
}
return true;
}
const observer = new MutationObserver(processMutations);
return false;
}
// Attach behaviors early, if possible.
Drupal.attachBehaviors(document.body);
function bigPipeProcess() {
timeoutID = setTimeout(() => {
if (!bigPipeProcessDocument(document)) {
bigPipeProcess();
}
}, interval);
}
// If loaded asynchronously there might already be replacement elements
// in the DOM before the mutation observer is started.
document.querySelectorAll(replacementsSelector).forEach(processReplacement);
bigPipeProcess();
// Start observing the body element for new children.
observer.observe(document.body, { childList: true });
// If something goes wrong, make sure everything is cleaned up and has had a
// chance to be processed with everything loaded.
window.addEventListener('load', () => {
if (timeoutID) {
clearTimeout(timeoutID);
// As soon as the document is loaded, no more replacements will be added.
// Immediately fetch and process all pending mutations and stop the observer.
window.addEventListener('DOMContentLoaded', () => {
const mutations = observer.takeRecords();
observer.disconnect();
if (mutations.length) {
processMutations(mutations);
}
bigPipeProcessDocument(document);
// No more mutations will be processed, remove the leftover Ajax object.
Drupal.ajax.instances[ajaxObject.instanceIndex] = null;
});
})(Drupal, drupalSettings);
......@@ -530,69 +530,71 @@
*/
Drupal.behaviors.ckeditor5Admin = {
attach(context) {
once('ckeditor5-admin-toolbar', '#ckeditor5-toolbar-app').forEach(
(container) => {
const selectedTextarea = context.querySelector(
'#ckeditor5-toolbar-buttons-selected',
);
const available = Object.entries(
JSON.parse(
context.querySelector('#ckeditor5-toolbar-buttons-available')
.innerHTML,
),
).map(([name, attrs]) => ({ name, id: name, ...attrs }));
const dividers = [
{
id: 'divider',
name: '|',
label: Drupal.t('Divider'),
},
{
id: 'wrapping',
name: '-',
label: Drupal.t('Wrapping'),
},
];
once(
'ckeditor5-admin-toolbar',
'#ckeditor5-toolbar-app',
context,
).forEach((container) => {
const selectedTextarea = context.querySelector(
'#ckeditor5-toolbar-buttons-selected',
);
const available = Object.entries(
JSON.parse(
context.querySelector('#ckeditor5-toolbar-buttons-available')
.innerHTML,
),
).map(([name, attrs]) => ({ name, id: name, ...attrs }));
const dividers = [
{
id: 'divider',
name: '|',
label: Drupal.t('Divider'),
},
{
id: 'wrapping',
name: '-',
label: Drupal.t('Wrapping'),
},
];
// Selected is used for managing the state. Sortable is handling updates
// to the state when the system is operated by mouse. There are
// functions making direct modifications to the state when system is
// operated by keyboard.
const selected = new Observable(
JSON.parse(selectedTextarea.innerHTML).map((name) => {
return [...dividers, ...available].find((button) => {
return button.name === name;
}).id;
}),
);
// Selected is used for managing the state. Sortable is handling updates
// to the state when the system is operated by mouse. There are
// functions making direct modifications to the state when system is
// operated by keyboard.
const selected = new Observable(
JSON.parse(selectedTextarea.innerHTML).map((name) => {
return [...dividers, ...available].find((button) => {
return button.name === name;
}).id;
}),
);
const mapSelection = (selection) => {
return selection.map((id) => {
return [...dividers, ...available].find((button) => {
return button.id === id;
}).name;
});
};
// Whenever the state is changed, update the textarea with the changes.
// This will also trigger re-render of the admin UI to reinitialize the
// Sortable state.
selected.subscribe((selection) => {
updateSelectedButtons(mapSelection(selection), selectedTextarea);
render(container, selected, available, dividers);
const mapSelection = (selection) => {
return selection.map((id) => {
return [...dividers, ...available].find((button) => {
return button.id === id;
}).name;
});
};
// Whenever the state is changed, update the textarea with the changes.
// This will also trigger re-render of the admin UI to reinitialize the
// Sortable state.
selected.subscribe((selection) => {
updateSelectedButtons(mapSelection(selection), selectedTextarea);
render(container, selected, available, dividers);
});
[
context.querySelector('#ckeditor5-toolbar-buttons-available'),
context.querySelector('[class*="editor-settings-toolbar-items"]'),
]
.filter((el) => el)
.forEach((el) => {
el.classList.add('visually-hidden');
});
[
context.querySelector('#ckeditor5-toolbar-buttons-available'),
context.querySelector('[class*="editor-settings-toolbar-items"]'),
]
.filter((el) => el)
.forEach((el) => {
el.classList.add('visually-hidden');
});
render(container, selected, available, dividers);
},
);
render(container, selected, available, dividers);
});
// Safari's focus outlines take into account absolute positioned elements.
// When a toolbar option is blurred, the portion of the focus outline
// surrounding the absolutely positioned tooltip does not go away. To
......
......@@ -54,7 +54,8 @@ protected function assertBigPipePlaceholderReplacementCount($expected_count): vo
$web_assert = $this->assertSession();
$web_assert->waitForElement('css', 'script[data-big-pipe-event="stop"]');
$page = $this->getSession()->getPage();
$this->assertCount($expected_count, $this->getDrupalSettings()['bigPipePlaceholderIds']);
// Settings are removed as soon as they are processed.
$this->assertCount(0, $this->getDrupalSettings()['bigPipePlaceholderIds']);
$this->assertCount($expected_count, $page->findAll('css', 'script[data-big-pipe-replacement-for-placeholder-with-id]'));
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment