From bb0df00d7f012ffce6cbd6f744c4e6812f9c03d7 Mon Sep 17 00:00:00 2001
From: Mathias Jakobsen <mathias.jakobsen@overleaf.com>
Date: Mon, 18 Aug 2025 09:58:04 +0100
Subject: [PATCH] Merge pull request #27905 from
 overleaf/mj-pug-frontend-helpers-ts

[web] Convert pug frontend helpers to typescript

GitOrigin-RevId: e74527306ded6bc7db992cd8ceaff34d0d26b1b7
---
 .../js/features/fallback-image/index.js       | 16 --------------
 .../js/features/fallback-image/index.ts       | 21 +++++++++++++++++++
 .../{slow-link.js => slow-link.ts}            |  2 +-
 3 files changed, 22 insertions(+), 17 deletions(-)
 delete mode 100644 services/web/frontend/js/features/fallback-image/index.js
 create mode 100644 services/web/frontend/js/features/fallback-image/index.ts
 rename services/web/frontend/js/features/link-helpers/{slow-link.js => slow-link.ts} (93%)

diff --git a/services/web/frontend/js/features/fallback-image/index.js b/services/web/frontend/js/features/fallback-image/index.js
deleted file mode 100644
index 8ab3ab5003..0000000000
--- a/services/web/frontend/js/features/fallback-image/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-function loadingFailed(imgEl) {
-  return imgEl.complete && imgEl.naturalWidth === 0
-}
-
-document.querySelectorAll('[data-ol-fallback-image]').forEach(imgEl => {
-  function showFallback() {
-    imgEl.src = imgEl.getAttribute('data-ol-fallback-image')
-  }
-  if (loadingFailed(imgEl)) {
-    // The image loading failed before the sprinkle ran.
-    showFallback()
-  } else {
-    // The image loading might fail in the future.
-    imgEl.addEventListener('error', showFallback)
-  }
-})
diff --git a/services/web/frontend/js/features/fallback-image/index.ts b/services/web/frontend/js/features/fallback-image/index.ts
new file mode 100644
index 0000000000..3a43dfe7a2
--- /dev/null
+++ b/services/web/frontend/js/features/fallback-image/index.ts
@@ -0,0 +1,21 @@
+function loadingFailed(imgEl: HTMLImageElement) {
+  return imgEl.complete && imgEl.naturalWidth === 0
+}
+
+document.querySelectorAll('[data-ol-fallback-image]').forEach(element => {
+  if (!(element instanceof HTMLImageElement)) {
+    // The sprinkle only applies to image elements.
+    return
+  }
+  const imgEl = element as HTMLImageElement
+  function showFallback() {
+    imgEl.src = imgEl.getAttribute('data-ol-fallback-image')!
+  }
+  if (loadingFailed(imgEl)) {
+    // The image loading failed before the sprinkle ran.
+    showFallback()
+  } else {
+    // The image loading might fail in the future.
+    imgEl.addEventListener('error', showFallback)
+  }
+})
diff --git a/services/web/frontend/js/features/link-helpers/slow-link.js b/services/web/frontend/js/features/link-helpers/slow-link.ts
similarity index 93%
rename from services/web/frontend/js/features/link-helpers/slow-link.js
rename to services/web/frontend/js/features/link-helpers/slow-link.ts
index 2f40d680cf..ef669cf6cb 100644
--- a/services/web/frontend/js/features/link-helpers/slow-link.js
+++ b/services/web/frontend/js/features/link-helpers/slow-link.ts
@@ -1,7 +1,7 @@
 import { inflightHelper } from '../form-helpers/hydrate-form'
 import { disableElement } from '../utils/disableElement'
 
-function setup(el) {
+function setup(el: Element) {
   // Make the element discoverable for multi-submit.
   el.setAttribute('data-ol-disabled-inflight', '')