fix(theme): remove jQuery dependency from static JS - #1607
Open
AMD-melliott wants to merge 4 commits into
Open
Conversation
pydata-sphinx-theme dropped jQuery in v0.13.0 (Feb 2023, pydata/pydata-sphinx-theme#1029), but rocm_docs_theme's static JS still referenced the jQuery global $, throwing `ReferenceError: $ is not defined` from code_word_breaks.js, renameVersionLinks.js, rdcMisc.js, and theme_mode_captions.js on every page load. Rewrote all four to plain DOM APIs (querySelectorAll, classList, native event listeners): - code_word_breaks.js / renameVersionLinks.js: mechanical translation, same behavior. - rdcMisc.js: breadcrumb truncation math needed adjusting along the way. jQuery's .width()/.height() always normalized to content-box, while getComputedStyle() reflects box-sizing: border-box under pydata-sphinx-theme's Bootstrap 5 reset, inflating measured width and shifting the truncation threshold. Now computed via getBoundingClientRect() minus padding/border to match the original content-box semantics. - theme_mode_captions.js: drops the $(window).ajaxComplete(...) handler; there's no jQuery-driven AJAX left in this environment for it to observe, and the existing click listener already keeps the caption in sync on user-initiated theme toggles. A repo-wide check confirms these are the only four files in rocm_docs_theme's own static assets referencing jQuery syntax; search.js and instinct-design.js are already jQuery-free. All four affected behaviors are cosmetic UX affordances (code-cell copy + word-break formatting, version-dropdown label cleanup, breadcrumb truncation + sidebar auto-collapse, theme-toggle tooltip caption) -- none touch search, navigation, or content rendering, so functional risk is low. Verified via a standalone HTML harness with representative breadcrumb/table/version-dropdown/theme-switch markup, run through Playwright in a headless browser: zero console errors, and all four behaviors confirmed working. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue
rocm_docs_theme's static JS —code_word_breaks.js,renameVersionLinks.js,rdcMisc.js, andtheme_mode_captions.js— references the jQuery global$,but
pydata-sphinx-theme(arocm-docs-coredependency, currently pinned>=0.15.4) hasn't shipped jQuery since it was dropped upstream in v0.13.0(Feb 2023, [pydata/pydata-sphinx-theme#1029],
"Drop jQuery and use Bootstrap 5"). Every page load throws
ReferenceError: $ is not definedfrom all four files.I noticed these errors when testing via Playwright-based console validation during the
instinct-designflavor development.Fix
Rewrote all four files to plain DOM APIs, no jQuery:
code_word_breaks.js/renameVersionLinks.js— mechanical translation toquerySelectorAll/classList/native event listeners, same behavior.rdcMisc.js— breadcrumb truncation math needed adjusting along the way:jQuery's
.width()/.height()always normalized to content-box, whilegetComputedStyle()reflectsbox-sizing: border-boxunderpydata-sphinx-theme's Bootstrap 5 reset, which was inflating measured width
and shifting the truncation threshold. Now computed via
getBoundingClientRect()minus padding/border to match the originalcontent-box semantics.
theme_mode_captions.js— drops the$(window).ajaxComplete(...)handler;there's no jQuery-driven AJAX left in this environment for it to observe,
and the existing click listener already keeps the caption in sync on
user-initiated theme toggles.
Scope / risk
A repo-wide check confirms these are the only four files in
rocm_docs_theme's own static assets referencing jQuery syntax —search.jsand the newer
instinct-design.jsare already jQuery-free. All four affectedbehaviors are cosmetic UX affordances (code-cell copy + word-break
formatting, version-dropdown label cleanup, breadcrumb truncation + sidebar
auto-collapse, theme-toggle tooltip caption) — none touch search, navigation,
or content rendering, so functional risk from the rewrite is low.
A secondary
bootstrap.jsgetBoundingClientRectTypeErrorreportedalongside this is from pydata-sphinx-theme's own vendored Bootstrap bundle,
not this theme's code — out of scope here; worth a separate upstream report
against pydata-sphinx-theme if it still reproduces once this lands.
Verification
Exercised via a standalone HTML harness with representative
breadcrumb/table/version-dropdown/theme-switch markup, run through Playwright
in a headless browser: zero console errors, and all four behaviors confirmed
working (click-to-copy, word-break insertion, breadcrumb truncation,
version-link renaming, theme-mode caption update).