oss/miniflux-v2
oss/miniflux-v2
1
0
Fork 0
mirror of https://github.com/miniflux/v2.git synced 2025-08-11 17:51:01 +00:00
Code Wiki Activity

feat(js): load app.js using JavaScript module

Browse source 
- The JS bundle has its own isolated scope
- There is no need to use IIFEs anymore (Immediately Invoked Function Expressions)
- Modules are executed after the HTML document is fully parsed, similar to `defer` attribute
- There is no need to use `DOMContentLoaded` anymore
- Module scripts inherently run in strict mode (no need to define `use strict` anymore)
This commit is contained in:
Frédéric Guillot 2025-08-02 10:50:00 -07:00
parent 50197c2be3
commit bfbc1c88c3
4 changed files with 172 additions and 187 deletions
Download patch file Download diff file Expand all files Collapse all files

2
internal/template/templates/common/layout.html
View file

@ -48,7 +48,7 @@
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src * data:; media-src *; frame-src *; require-trusted-types-for 'script'; trusted-types ttpolicy;">
{{ end }}
<script src="{{ route "javascript" "name" "app" "checksum" .app_js_checksum }}" defer></script>
<script src="{{ route "javascript" "name" "app" "checksum" .app_js_checksum }}" type="module"></script>
<script src="{{ route "javascript" "name" "service-worker" "checksum" .sw_js_checksum }}" defer id="service-worker-script"></script>
</head>
<body

3
internal/ui/static/js/app.js
View file

@ -489,6 +489,9 @@ function appendIconLabel(element, labelTextContent) {
function toggleEntryStatus(element, toasting) {
const entryID = parseInt(element.dataset.id, 10);
const link = element.querySelector(":is(a, button)[data-toggle-status]");
if (!link) {
return;
}
const currentStatus = link.dataset.value;
const newStatus = currentStatus === "read" ? "unread" : "read";

88
internal/ui/static/js/bootstrap.js vendored
View file

@ -1,7 +1,6 @@
document.addEventListener("DOMContentLoaded", () => {
disableSubmitButtonsOnFormSubmit();
disableSubmitButtonsOnFormSubmit();
if (!document.querySelector("body[data-disable-keyboard-shortcuts=true]")) {
if (!document.querySelector("body[data-disable-keyboard-shortcuts=true]")) {
const keyboardHandler = new KeyboardHandler();
keyboardHandler.on("g u", () => goToPage("unread"));
keyboardHandler.on("g b", () => goToPage("starred"));
@ -46,12 +45,12 @@ document.addEventListener("DOMContentLoaded", () => {
});
keyboardHandler.on("Escape", () => ModalHandler.close());
keyboardHandler.listen();
}
}
const touchHandler = new TouchHandler();
touchHandler.listen();
const touchHandler = new TouchHandler();
touchHandler.listen();
if (WebAuthnHandler.isWebAuthnSupported()) {
if (WebAuthnHandler.isWebAuthnSupported()) {
const webauthnHandler = new WebAuthnHandler();
onClick("#webauthn-delete", () => { webauthnHandler.removeAllCredentials(); });
@ -80,15 +79,15 @@ document.addEventListener("DOMContentLoaded", () => {
webauthnHandler.conditionalLogin(abortController).catch(err => WebAuthnHandler.showErrorMessage(err));
}
}
}
onClick(":is(a, button)[data-save-entry]", (event) => handleSaveEntry(event.target));
onClick(":is(a, button)[data-toggle-bookmark]", (event) => handleBookmark(event.target));
onClick(":is(a, button)[data-fetch-content-entry]", handleFetchOriginalContent);
onClick(":is(a, button)[data-share-status]", handleShare);
onClick(":is(a, button)[data-action=markPageAsRead]", (event) => handleConfirmationMessage(event.target, markPageAsRead));
onClick(":is(a, button)[data-toggle-status]", (event) => handleEntryStatus("next", event.target));
onClick(":is(a, button)[data-confirm]", (event) => handleConfirmationMessage(event.target, (url, redirectURL) => {
onClick(":is(a, button)[data-save-entry]", (event) => handleSaveEntry(event.target));
onClick(":is(a, button)[data-toggle-bookmark]", (event) => handleBookmark(event.target));
onClick(":is(a, button)[data-fetch-content-entry]", handleFetchOriginalContent);
onClick(":is(a, button)[data-share-status]", handleShare);
onClick(":is(a, button)[data-action=markPageAsRead]", (event) => handleConfirmationMessage(event.target, markPageAsRead));
onClick(":is(a, button)[data-toggle-status]", (event) => handleEntryStatus("next", event.target));
onClick(":is(a, button)[data-confirm]", (event) => handleConfirmationMessage(event.target, (url, redirectURL) => {
const request = new RequestBuilder(url);
request.withCallback((response) => {
@ -102,38 +101,38 @@ document.addEventListener("DOMContentLoaded", () => {
});
request.execute();
}));
}));
onClick("a[data-original-link='true']", (event) => {
onClick("a[data-original-link='true']", (event) => {
handleEntryStatus("next", event.target, true);
}, true);
onAuxClick("a[data-original-link='true']", (event) => {
}, true);
onAuxClick("a[data-original-link='true']", (event) => {
if (event.button === 1) {
handleEntryStatus("next", event.target, true);
}
}, true);
}, true);
checkMenuToggleModeByLayout();
window.addEventListener("resize", checkMenuToggleModeByLayout, { passive: true });
checkMenuToggleModeByLayout();
window.addEventListener("resize", checkMenuToggleModeByLayout, { passive: true });
fixVoiceOverDetailsSummaryBug();
fixVoiceOverDetailsSummaryBug();
const logoElement = document.querySelector(".logo");
if (logoElement) {
const logoElement = document.querySelector(".logo");
if (logoElement) {
logoElement.addEventListener("click", toggleMainMenu);
logoElement.addEventListener("keydown", toggleMainMenu);
}
}
onClick(".header nav li", (event) => onClickMainMenuListItem(event));
onClick(".header nav li", (event) => onClickMainMenuListItem(event));
if ("serviceWorker" in navigator) {
if ("serviceWorker" in navigator) {
const scriptElement = document.getElementById("service-worker-script");
if (scriptElement) {
navigator.serviceWorker.register(ttpolicy.createScriptURL(scriptElement.src));
}
}
}
window.addEventListener('beforeinstallprompt', (e) => {
window.addEventListener('beforeinstallprompt', (e) => {
let deferredPrompt = e;
const promptHomeScreen = document.getElementById('prompt-home-screen');
if (promptHomeScreen) {
@ -151,20 +150,20 @@ document.addEventListener("DOMContentLoaded", () => {
});
}
}
});
});
// Save and resume media position
const lastPositionElements = document.querySelectorAll("audio[data-last-position],video[data-last-position]");
lastPositionElements.forEach((element) => {
// Save and resume media position
const lastPositionElements = document.querySelectorAll("audio[data-last-position],video[data-last-position]");
lastPositionElements.forEach((element) => {
if (element.dataset.lastPosition) {
element.currentTime = element.dataset.lastPosition;
}
element.ontimeupdate = () => handlePlayerProgressionSaveAndMarkAsReadOnCompletion(element);
});
});
// Set media playback rate
const playbackRateElements = document.querySelectorAll("audio[data-playback-rate],video[data-playback-rate]");
playbackRateElements.forEach((element) => {
// Set media playback rate
const playbackRateElements = document.querySelectorAll("audio[data-playback-rate],video[data-playback-rate]");
playbackRateElements.forEach((element) => {
if (element.dataset.playbackRate) {
element.playbackRate = element.dataset.playbackRate;
if (element.dataset.enclosureId){
@ -176,11 +175,10 @@ document.addEventListener("DOMContentLoaded", () => {
});
}
}
});
// Set enclosure media controls handlers
const mediaControlsElements = document.querySelectorAll("button[data-enclosure-action]");
mediaControlsElements.forEach((element) => {
element.addEventListener("click", () => handleMediaControl(element));
});
});
// Set enclosure media controls handlers
const mediaControlsElements = document.querySelectorAll("button[data-enclosure-action]");
mediaControlsElements.forEach((element) => {
element.addEventListener("click", () => handleMediaControl(element));
});

16
internal/ui/static/static.go
View file

@ -127,14 +127,6 @@ func GenerateJavascriptBundles() error {
},
}
var prefixes = map[string]string{
"app": "(function(){'use strict';",
}
var suffixes = map[string]string{
"app": "})();",
}
JavascriptBundles = make(map[string][]byte)
JavascriptBundleChecksums = make(map[string]string)
@ -146,10 +138,6 @@ func GenerateJavascriptBundles() error {
for bundle, srcFiles := range bundles {
var buffer bytes.Buffer
if prefix, found := prefixes[bundle]; found {
buffer.WriteString(prefix)
}
for _, srcFile := range srcFiles {
fileData, err := javascriptFiles.ReadFile(srcFile)
if err != nil {
@ -159,10 +147,6 @@ func GenerateJavascriptBundles() error {
buffer.Write(fileData)
}
if suffix, found := suffixes[bundle]; found {
buffer.WriteString(suffix)
}
minifiedData, err := minifier.Bytes("text/javascript", buffer.Bytes())
if err != nil {
return err