github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-19 18:22:45 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

DEV: Refactor stylesheet live-reloading (#13755)

Browse Source 
We have had reports of tabs freezing in Firefox, and reporting an error
in this line. I haven't been able to reproduce, but I suspect the
`forEach` loop is at the heart of the issue, so I have replaced it with
(hopefully) a safer call.

* More refactoring
* Do not reload stylesheets with unchanged filenames
* Select last matching stylesheet
This commit is contained in:
Penar Musaraj 2021-07-15 23:43:31 -04:00 committed by GitHub
parent 1cadae3879
commit 207c3085fc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
app/assets/javascripts/discourse/app/initializers/live-development.js
View File

@ -60,12 +60,22 @@ export default {
// Refresh if necessary
document.location.reload(true);
} else if (me.new_href && me.target) {
const link_target = me.theme_id
? `[data-target="${me.target}"][data-theme-id="${me.theme_id}"]`
: `[data-target="${me.target}"]`;
document.querySelectorAll(`link${link_target}`).forEach((link) => {
this.refreshCSS(link, me.new_href);
});
const link_target = !!me.theme_id
? `[data-target='${me.target}'][data-theme-id='${me.theme_id}']`
: `[data-target='${me.target}']`;
const links = document.querySelectorAll(`link${link_target}`);
if (links.length > 0) {
const lastLink = links[links.length - 1];
// this check is useful when message-bus has multiple file updates
// it avoids the browser doing a lot of work for nothing
// should the filenames be unchanged
if (
lastLink.href.split("/").pop() !== me.new_href.split("/").pop()
) {
this.refreshCSS(lastLink, me.new_href);
}
}
}
});
},
@ -74,21 +84,14 @@ export default {
},
refreshCSS(node, newHref) {
if (node.dataset.reloading) {
clearTimeout(node.dataset.timeout);
}
node.dataset.reloading = true;
let reloaded = node.cloneNode(true);
reloaded.href = newHref;
node.insertAdjacentElement("afterend", reloaded);
let timeout = setTimeout(() => {
node.parentNode.removeChild(node);
reloaded.dataset.reloading = false;
}, 2000);
node.dataset.timeout = timeout;
setTimeout(() => {
if (node && node.parentNode) {
node.parentNode.removeChild(node);
}
}, 500);
},
};