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;"> <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 }} {{ 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> <script src="{{ route "javascript" "name" "service-worker" "checksum" .sw_js_checksum }}" defer id="service-worker-script"></script>
</head> </head>
<body <body

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

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

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

@ -1,186 +1,184 @@
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(); const keyboardHandler = new KeyboardHandler();
keyboardHandler.on("g u", () => goToPage("unread")); keyboardHandler.on("g u", () => goToPage("unread"));
keyboardHandler.on("g b", () => goToPage("starred")); keyboardHandler.on("g b", () => goToPage("starred"));
keyboardHandler.on("g h", () => goToPage("history")); keyboardHandler.on("g h", () => goToPage("history"));
keyboardHandler.on("g f", goToFeedOrFeedsPage); keyboardHandler.on("g f", goToFeedOrFeedsPage);
keyboardHandler.on("g c", () => goToPage("categories")); keyboardHandler.on("g c", () => goToPage("categories"));
keyboardHandler.on("g s", () => goToPage("settings")); keyboardHandler.on("g s", () => goToPage("settings"));
keyboardHandler.on("g g", () => goToPreviousPage(TOP)); keyboardHandler.on("g g", () => goToPreviousPage(TOP));
keyboardHandler.on("G", () => goToNextPage(BOTTOM)); keyboardHandler.on("G", () => goToNextPage(BOTTOM));
keyboardHandler.on("ArrowLeft", goToPreviousPage); keyboardHandler.on("ArrowLeft", goToPreviousPage);
keyboardHandler.on("ArrowRight", goToNextPage); keyboardHandler.on("ArrowRight", goToNextPage);
keyboardHandler.on("k", goToPreviousPage); keyboardHandler.on("k", goToPreviousPage);
keyboardHandler.on("p", goToPreviousPage); keyboardHandler.on("p", goToPreviousPage);
keyboardHandler.on("j", goToNextPage); keyboardHandler.on("j", goToNextPage);
keyboardHandler.on("n", goToNextPage); keyboardHandler.on("n", goToNextPage);
keyboardHandler.on("h", () => goToPage("previous")); keyboardHandler.on("h", () => goToPage("previous"));
keyboardHandler.on("l", () => goToPage("next")); keyboardHandler.on("l", () => goToPage("next"));
keyboardHandler.on("z t", scrollToCurrentItem); keyboardHandler.on("z t", scrollToCurrentItem);
keyboardHandler.on("o", openSelectedItem); keyboardHandler.on("o", openSelectedItem);
keyboardHandler.on("Enter", () => openSelectedItem()); keyboardHandler.on("Enter", () => openSelectedItem());
keyboardHandler.on("v", () => openOriginalLink(false)); keyboardHandler.on("v", () => openOriginalLink(false));
keyboardHandler.on("V", () => openOriginalLink(true)); keyboardHandler.on("V", () => openOriginalLink(true));
keyboardHandler.on("c", () => openCommentLink(false)); keyboardHandler.on("c", () => openCommentLink(false));
keyboardHandler.on("C", () => openCommentLink(true)); keyboardHandler.on("C", () => openCommentLink(true));
keyboardHandler.on("m", () => handleEntryStatus("next")); keyboardHandler.on("m", () => handleEntryStatus("next"));
keyboardHandler.on("M", () => handleEntryStatus("previous")); keyboardHandler.on("M", () => handleEntryStatus("previous"));
keyboardHandler.on("A", markPageAsRead); keyboardHandler.on("A", markPageAsRead);
keyboardHandler.on("s", () => handleSaveEntry()); keyboardHandler.on("s", () => handleSaveEntry());
keyboardHandler.on("d", handleFetchOriginalContent); keyboardHandler.on("d", handleFetchOriginalContent);
keyboardHandler.on("f", () => handleBookmark()); keyboardHandler.on("f", () => handleBookmark());
keyboardHandler.on("F", goToFeedPage); keyboardHandler.on("F", goToFeedPage);
keyboardHandler.on("R", handleRefreshAllFeeds); keyboardHandler.on("R", handleRefreshAllFeeds);
keyboardHandler.on("?", showKeyboardShortcuts); keyboardHandler.on("?", showKeyboardShortcuts);
keyboardHandler.on("+", goToAddSubscriptionPage); keyboardHandler.on("+", goToAddSubscriptionPage);
keyboardHandler.on("#", unsubscribeFromFeed); keyboardHandler.on("#", unsubscribeFromFeed);
keyboardHandler.on("/", () => goToPage("search")); keyboardHandler.on("/", () => goToPage("search"));
keyboardHandler.on("a", () => { keyboardHandler.on("a", () => {
const enclosureElement = document.querySelector('.entry-enclosures'); const enclosureElement = document.querySelector('.entry-enclosures');
if (enclosureElement) { if (enclosureElement) {
enclosureElement.toggleAttribute('open'); enclosureElement.toggleAttribute('open');
} }
});
keyboardHandler.on("Escape", () => ModalHandler.close());
keyboardHandler.listen();
}
const touchHandler = new TouchHandler();
touchHandler.listen();
if (WebAuthnHandler.isWebAuthnSupported()) {
const webauthnHandler = new WebAuthnHandler();
onClick("#webauthn-delete", () => { webauthnHandler.removeAllCredentials(); });
const registerButton = document.getElementById("webauthn-register");
if (registerButton !== null) {
registerButton.disabled = false;
onClick("#webauthn-register", () => {
webauthnHandler.register().catch((err) => WebAuthnHandler.showErrorMessage(err));
}); });
keyboardHandler.on("Escape", () => ModalHandler.close());
keyboardHandler.listen();
} }
const touchHandler = new TouchHandler(); const loginButton = document.getElementById("webauthn-login");
touchHandler.listen(); if (loginButton !== null) {
const abortController = new AbortController();
loginButton.disabled = false;
if (WebAuthnHandler.isWebAuthnSupported()) { onClick("#webauthn-login", () => {
const webauthnHandler = new WebAuthnHandler(); const usernameField = document.getElementById("form-username");
if (usernameField !== null) {
onClick("#webauthn-delete", () => { webauthnHandler.removeAllCredentials(); }); abortController.abort();
webauthnHandler.login(usernameField.value).catch(err => WebAuthnHandler.showErrorMessage(err));
const registerButton = document.getElementById("webauthn-register");
if (registerButton !== null) {
registerButton.disabled = false;
onClick("#webauthn-register", () => {
webauthnHandler.register().catch((err) => WebAuthnHandler.showErrorMessage(err));
});
}
const loginButton = document.getElementById("webauthn-login");
if (loginButton !== null) {
const abortController = new AbortController();
loginButton.disabled = false;
onClick("#webauthn-login", () => {
const usernameField = document.getElementById("form-username");
if (usernameField !== null) {
abortController.abort();
webauthnHandler.login(usernameField.value).catch(err => WebAuthnHandler.showErrorMessage(err));
}
});
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) => {
const request = new RequestBuilder(url);
request.withCallback((response) => {
if (redirectURL) {
window.location.href = redirectURL;
} else if (response && response.redirected && response.url) {
window.location.href = response.url;
} else {
window.location.reload();
} }
}); });
request.execute(); webauthnHandler.conditionalLogin(abortController).catch(err => WebAuthnHandler.showErrorMessage(err));
})); }
}
onClick("a[data-original-link='true']", (event) => { 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) => {
if (redirectURL) {
window.location.href = redirectURL;
} else if (response && response.redirected && response.url) {
window.location.href = response.url;
} else {
window.location.reload();
}
});
request.execute();
}));
onClick("a[data-original-link='true']", (event) => {
handleEntryStatus("next", event.target, true);
}, true);
onAuxClick("a[data-original-link='true']", (event) => {
if (event.button === 1) {
handleEntryStatus("next", event.target, true); handleEntryStatus("next", event.target, true);
}, true);
onAuxClick("a[data-original-link='true']", (event) => {
if (event.button === 1) {
handleEntryStatus("next", event.target, true);
}
}, true);
checkMenuToggleModeByLayout();
window.addEventListener("resize", checkMenuToggleModeByLayout, { passive: true });
fixVoiceOverDetailsSummaryBug();
const logoElement = document.querySelector(".logo");
if (logoElement) {
logoElement.addEventListener("click", toggleMainMenu);
logoElement.addEventListener("keydown", toggleMainMenu);
} }
}, true);
onClick(".header nav li", (event) => onClickMainMenuListItem(event)); checkMenuToggleModeByLayout();
window.addEventListener("resize", checkMenuToggleModeByLayout, { passive: true });
if ("serviceWorker" in navigator) { fixVoiceOverDetailsSummaryBug();
const scriptElement = document.getElementById("service-worker-script");
if (scriptElement) { const logoElement = document.querySelector(".logo");
navigator.serviceWorker.register(ttpolicy.createScriptURL(scriptElement.src)); if (logoElement) {
logoElement.addEventListener("click", toggleMainMenu);
logoElement.addEventListener("keydown", toggleMainMenu);
}
onClick(".header nav li", (event) => onClickMainMenuListItem(event));
if ("serviceWorker" in navigator) {
const scriptElement = document.getElementById("service-worker-script");
if (scriptElement) {
navigator.serviceWorker.register(ttpolicy.createScriptURL(scriptElement.src));
}
}
window.addEventListener('beforeinstallprompt', (e) => {
let deferredPrompt = e;
const promptHomeScreen = document.getElementById('prompt-home-screen');
if (promptHomeScreen) {
promptHomeScreen.style.display = "block";
const btnAddToHomeScreen = document.getElementById('btn-add-to-home-screen');
if (btnAddToHomeScreen) {
btnAddToHomeScreen.addEventListener('click', (e) => {
e.preventDefault();
deferredPrompt.prompt();
deferredPrompt.userChoice.then(() => {
deferredPrompt = null;
promptHomeScreen.style.display = "none";
});
});
} }
} }
});
window.addEventListener('beforeinstallprompt', (e) => {
let deferredPrompt = e; // Save and resume media position
const promptHomeScreen = document.getElementById('prompt-home-screen'); const lastPositionElements = document.querySelectorAll("audio[data-last-position],video[data-last-position]");
if (promptHomeScreen) { lastPositionElements.forEach((element) => {
promptHomeScreen.style.display = "block"; if (element.dataset.lastPosition) {
element.currentTime = element.dataset.lastPosition;
const btnAddToHomeScreen = document.getElementById('btn-add-to-home-screen'); }
if (btnAddToHomeScreen) { element.ontimeupdate = () => handlePlayerProgressionSaveAndMarkAsReadOnCompletion(element);
btnAddToHomeScreen.addEventListener('click', (e) => { });
e.preventDefault();
deferredPrompt.prompt(); // Set media playback rate
deferredPrompt.userChoice.then(() => { const playbackRateElements = document.querySelectorAll("audio[data-playback-rate],video[data-playback-rate]");
deferredPrompt = null; playbackRateElements.forEach((element) => {
promptHomeScreen.style.display = "none"; if (element.dataset.playbackRate) {
}); element.playbackRate = element.dataset.playbackRate;
}); if (element.dataset.enclosureId){
} // In order to display properly the speed we need to do it on bootstrap.
} // Could not do it backend side because I didn't know how to do it because of the template inclusion and
}); // the way the initial playback speed is handled. See enclosure_media_controls.html if you want to try to fix this
document.querySelectorAll(`span.speed-indicator[data-enclosure-id="${element.dataset.enclosureId}"]`).forEach((speedI)=>{
// Save and resume media position speedI.innerText = `${parseFloat(element.dataset.playbackRate).toFixed(2)}x`;
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 enclosure media controls handlers
}); const mediaControlsElements = document.querySelectorAll("button[data-enclosure-action]");
mediaControlsElements.forEach((element) => {
// Set media playback rate element.addEventListener("click", () => handleMediaControl(element));
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){
// In order to display properly the speed we need to do it on bootstrap.
// Could not do it backend side because I didn't know how to do it because of the template inclusion and
// the way the initial playback speed is handled. See enclosure_media_controls.html if you want to try to fix this
document.querySelectorAll(`span.speed-indicator[data-enclosure-id="${element.dataset.enclosureId}"]`).forEach((speedI)=>{
speedI.innerText = `${parseFloat(element.dataset.playbackRate).toFixed(2)}x`;
});
}
}
});
// 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) JavascriptBundles = make(map[string][]byte)
JavascriptBundleChecksums = make(map[string]string) JavascriptBundleChecksums = make(map[string]string)
@ -146,10 +138,6 @@ func GenerateJavascriptBundles() error {
for bundle, srcFiles := range bundles { for bundle, srcFiles := range bundles {
var buffer bytes.Buffer var buffer bytes.Buffer
if prefix, found := prefixes[bundle]; found {
buffer.WriteString(prefix)
}
for _, srcFile := range srcFiles { for _, srcFile := range srcFiles {
fileData, err := javascriptFiles.ReadFile(srcFile) fileData, err := javascriptFiles.ReadFile(srcFile)
if err != nil { if err != nil {
@ -159,10 +147,6 @@ func GenerateJavascriptBundles() error {
buffer.Write(fileData) buffer.Write(fileData)
} }
if suffix, found := suffixes[bundle]; found {
buffer.WriteString(suffix)
}
minifiedData, err := minifier.Bytes("text/javascript", buffer.Bytes()) minifiedData, err := minifier.Bytes("text/javascript", buffer.Bytes())
if err != nil { if err != nil {
return err return err