Update JS syntax to Baseline 2025 using esupgrade

.pre-commit-config.yaml

@@ -19,6 +19,10 @@ repos:
     hooks:
     -   id: django-upgrade
         args: [--target-version, "4.2"]
+-   repo: https://github.com/codingjoe/esupgrade
+    rev: 2025.15.0
+    hooks:
+    -   id: esupgrade
 -   repo: https://github.com/adamchainz/djade-pre-commit
     rev: "1.9.0"
     hooks:

debug_toolbar/static/debug_toolbar/js/toolbar.js

@@ -43,7 +43,7 @@ const djdt = {
                 if (requestId && inner.children.length === 0) {
                     const url = new URL(
                         djDebug.dataset.renderPanelUrl,
-                        window.location
+                        globalThis.location
                     );
                     url.searchParams.append("request_id", requestId);
                     url.searchParams.append("panel_id", panelId);
@@ -166,8 +166,8 @@ const djdt = {
 
                 if (top < 0) {
                     top = 0;
-                } else if (top + handle.offsetHeight > window.innerHeight) {
-                    top = window.innerHeight - handle.offsetHeight;
+                } else if (top + handle.offsetHeight > globalThis.innerHeight) {
+                    top = globalThis.innerHeight - handle.offsetHeight;
                 }
 
                 handle.style.top = `${top}px`;
@@ -212,19 +212,20 @@ const djdt = {
             djdt.updateOnAjax();
         }
 
-        const prefersDark = window.matchMedia(
+        const prefersDark = globalThis.matchMedia(
             "(prefers-color-scheme: dark)"
         ).matches;
         const themeList = prefersDark
             ? ["auto", "light", "dark"]
             : ["auto", "dark", "light"];
-        const setTheme = (theme) => {
+
+        function setTheme(theme) {
             djDebug.setAttribute(
                 "data-theme",
                 theme === "auto" ? (prefersDark ? "dark" : "light") : theme
             );
             djDebug.setAttribute("data-user-theme", theme);
-        };
+        }
 
         // Updates the theme using user settings
         let userTheme = localStorage.getItem("djdt.user-theme") || "auto";
@@ -253,7 +254,7 @@ const djdt = {
         // set handle position
         const handleTop = Math.min(
             localStorage.getItem("djdt.top") || 265,
-            window.innerHeight - handle.offsetWidth
+            globalThis.innerHeight - handle.offsetWidth
         );
         handle.style.top = `${handleTop}px`;
     },
@@ -265,7 +266,7 @@ const djdt = {
         const handle = document.getElementById("djDebugToolbarHandle");
         $$.show(handle);
         djdt.ensureHandleVisibility();
-        window.addEventListener("resize", djdt.ensureHandleVisibility);
+        globalThis.addEventListener("resize", djdt.ensureHandleVisibility);
         document.removeEventListener("keydown", onKeyDown);
 
         localStorage.setItem("djdt.show", "false");
@@ -289,7 +290,7 @@ const djdt = {
         $$.hide(document.getElementById("djDebugToolbarHandle"));
         $$.show(document.getElementById("djDebugToolbar"));
         localStorage.setItem("djdt.show", "true");
-        window.removeEventListener("resize", djdt.ensureHandleVisibility);
+        globalThis.removeEventListener("resize", djdt.ensureHandleVisibility);
     },
     updateOnAjax() {
         const handleAjaxResponse = debounce(async (requestId) => {
@@ -328,8 +329,8 @@ const djdt = {
             origOpen.apply(this, args);
         };
 
-        const origFetch = window.fetch;
-        window.fetch = function (...args) {
+        const origFetch = globalThis.fetch;
+        globalThis.fetch = function (...args) {
             // Heads up! Before modifying this code, please be aware of the
             // possible unhandled errors that might arise from changing this.
             // For details, see
@@ -384,7 +385,7 @@ const djdt = {
         },
     },
 };
-window.djdt = {
+globalThis.djdt = {
     show_toolbar: djdt.showToolbar,
     hide_toolbar: djdt.hideToolbar,
     init: djdt.init,

debug_toolbar/static/debug_toolbar/js/utils.js

@@ -1,4 +1,4 @@
-const $$ = {
+export const $$ = {
     on(root, eventName, selector, fn) {
         root.removeEventListener(eventName, fn);
         root.addEventListener(eventName, (event) => {
@@ -8,15 +8,15 @@ const $$ = {
             }
         });
     },
+    /**
+     * This is a helper function to attach a handler for a `djdt.panel.render`
+     * event of a specific panel.
+     *
+     * root: The container element that the listener should be attached to.
+     * panelId: The Id of the panel.
+     * fn: A function to execute when the event is triggered.
+     */
     onPanelRender(root, panelId, fn) {
-        /*
-        This is a helper function to attach a handler for a `djdt.panel.render`
-        event of a specific panel.
-
-        root: The container element that the listener should be attached to.
-        panelId: The Id of the panel.
-        fn: A function to execute when the event is triggered.
-         */
         root.addEventListener("djdt.panel.render", (event) => {
             if (event.detail.panelId === panelId) {
                 fn.call(event);
@@ -48,12 +48,12 @@ const $$ = {
             document.head.appendChild(el);
         }
     },
+    /**
+     * Given a container element, apply styles set via data-djdt-styles attribute.
+     * The format is data-djdt-styles="styleName1:value;styleName2:value2"
+     * The style names should use the CSSStyleDeclaration camel cased names.
+     */
     applyStyles(container) {
-        /*
-         * Given a container element, apply styles set via data-djdt-styles attribute.
-         * The format is data-djdt-styles="styleName1:value;styleName2:value2"
-         * The style names should use the CSSStyleDeclaration camel cased names.
-         */
         for (const element of container.querySelectorAll(
             "[data-djdt-styles]"
         )) {
@@ -70,33 +70,31 @@ const $$ = {
     },
 };
 
-function ajax(url, init) {
-    return fetch(url, Object.assign({ credentials: "same-origin" }, init))
-        .then((response) => {
-            if (response.ok) {
-                return response
-                    .json()
-                    .catch((error) =>
-                        Promise.reject(
-                            new Error(
-                                `The response  is a invalid Json object : ${error}`
-                            )
-                        )
-                    );
-            }
-            return Promise.reject(
-                new Error(`${response.status}: ${response.statusText}`)
-            );
-        })
-        .catch((error) => {
-            const win = document.getElementById("djDebugWindow");
-            win.innerHTML = `<div class="djDebugPanelTitle"><h3>${error.message}</h3><button type="button" class="djDebugClose">»</button></div>`;
-            $$.show(win);
-            throw error;
+export async function ajax(url, init) {
+    try {
+        const response = await fetch(url, {
+            credentials: "same-origin",
+            ...init,
         });
+        if (response.ok) {
+            try {
+                return response.json();
+            } catch (error) {
+                throw new Error(
+                    `The response is a invalid Json object : ${error}`
+                );
+            }
+        }
+        throw new Error(`${response.status}: ${response.statusText}`);
+    } catch (error) {
+        const win = document.getElementById("djDebugWindow");
+        win.innerHTML = `<div class="djDebugPanelTitle"><h3>${error.message}</h3><button type="button" class="djDebugClose">»</button></div>`;
+        $$.show(win);
+        throw error;
+    }
 }
 
-function ajaxForm(element) {
+export function ajaxForm(element) {
     const form = element.closest("form");
     const url = new URL(form.action);
     const formData = new FormData(form);
@@ -109,7 +107,7 @@ function ajaxForm(element) {
     return ajax(url, ajaxData);
 }
 
-function replaceToolbarState(newRequestId, data) {
+export function replaceToolbarState(newRequestId, data) {
     const djDebug = document.getElementById("djDebug");
     djDebug.setAttribute("data-request-id", newRequestId);
     // Check if response is empty, it could be due to an expired requestId.
@@ -139,5 +137,3 @@ export function debounce(func, timeout) {
         timer = setTimeout(() => Promise.try(func, ...args), timeout);
     };
 }
-
-export { $$, ajax, ajaxForm, replaceToolbarState };

docs/changes.rst

@@ -8,6 +8,8 @@ Pending
   fetch requests.
 * Added a note to the prerequisites section of the installation docs
   about requiring an up-to-date browser.
+* Upgraded the JavaScript code to use modern ECMAScript features using
+  ``esupgrade``.
 
 6.3.0 (2026-04-01)
 ------------------