[Maintenance] Upgrade JS dependencies

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jekyll-theme-primer-spec",
-  "version": "1.6.4",
+  "version": "1.10.0",
   "description": "A Jekyll theme for sites with content-heavy pages, based on GitHub's Primer theme",
   "repository": {
     "url": "https://github.com/eecs485staff/primer-spec"
@@ -26,7 +26,7 @@
     "clsx": "^1.1.1",
     "jsx-dom": "*",
     "pig-latinizer": "^1.0.6",
-    "preact": "^10.5.14"
+    "preact": "^10.18.1"
   },
   "devDependencies": {
     "@primer/sync": "^2.0.0",
@@ -37,33 +37,34 @@
     "@types/listr": "^0.14.4",
     "@types/node": "^12.20.19",
     "@types/semver": "^7.3.8",
-    "@types/webpack": "^5.28.0",
+    "@types/webpack": "^5.28.4",
     "@types/webpack-dev-server": "^3.11.5",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
-    "babel-jest": "^27.0.0",
-    "babel-loader": "^8.2.2",
-    "eslint": "^7.32.0",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.1.3",
+    "eslint": "^8.52.0",
     "eslint-config-preact": "^1.1.4",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-compat": "^4.0.2",
-    "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-jest": "^26.1.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-compat": "^4.2.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jest": "^27.4.3",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "execa": "^5.1.1",
     "fs-extra": "^10.0.0",
-    "jest": "^27.0.6",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "listr": "^0.14.2",
-    "prettier": "2.0.2",
+    "prettier": "^3.0.3",
     "semver": "^7.3.4",
-    "ts-jest": "^27.0.4",
-    "ts-loader": "^9.2.5",
-    "ts-node": "^10.1.0",
-    "typescript": "^3.9.7",
-    "webpack": "^5.49.0",
+    "ts-jest": "^29.1.1",
+    "ts-loader": "^9.5.0",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.2.2",
+    "webpack": "^5.89.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.7.4",

script/cibuild

@@ -20,8 +20,8 @@ fi
 
 # Verify that all files are Prettified
 echo "Veryifying that all files are Prettified..."
-npx prettier@2.0.2 -l "src_js/**/*.ts"
-npx prettier@2.0.2 -l "_sass/spec/**/*.scss"
+npx prettier@3.0.3 -l "src_js/**/*.ts"
+npx prettier@3.0.3 -l "_sass/spec/**/*.scss"
 echo "Prettier check passed."
 
 # Run JS tests

src_js/Config.ts

@@ -51,9 +51,8 @@ export default {
 };
 
 function getHideSidebarOnLoad() {
-  const sidebar_hidden_stored_value: string | null = Storage.getForPage(
-    'sidebar_hidden',
-  );
+  const sidebar_hidden_stored_value: string | null =
+    Storage.getForPage('sidebar_hidden');
   let hideSidebar = false;
   if (sidebar_hidden_stored_value !== null) {
     hideSidebar = sidebar_hidden_stored_value === 'true';
@@ -86,7 +85,8 @@ function getDefaultCodeblockVariant(): CodeblockVariant {
     // just ensures backwards-compatibility.
     return CodeblockVariant.LEGACY;
   }
-  const maybeVariant = window.PrimerSpecConfig.defaultCodeblockVariant?.toLowerCase() as CodeblockVariant | null;
+  const maybeVariant =
+    window.PrimerSpecConfig.defaultCodeblockVariant?.toLowerCase() as CodeblockVariant | null;
   if (maybeVariant && Object.values(CodeblockVariant).includes(maybeVariant)) {
     return maybeVariant;
   }

src_js/components/PrimerSpec.tsx

@@ -170,9 +170,8 @@ function toggleItalicsInChrome(enableItalics: boolean) {
     '.highlight .cs, .highlight .cd, .highlight .ge, .primer-spec-toc-h4';
   const font_style = enableItalics ? 'italic' : 'inherit';
 
-  const nodes: NodeListOf<HTMLElement> = document.querySelectorAll(
-    all_italic_els,
-  );
+  const nodes: NodeListOf<HTMLElement> =
+    document.querySelectorAll(all_italic_els);
   Array.from(nodes).map((el) => {
     el.style.fontStyle = font_style;
   });

src_js/components/main_content/enhanced_code_blocks/createEnhancedCodeBlock.tsx

@@ -262,10 +262,9 @@ function selectLines(
   document.getSelection()?.addRange(range);
 }
 
-const MAGIC_COMMENT_REGEX = /^\s*<span class="c[mp1sd]?">.*primer-spec-highlight-(start|end)/i;
-function parseMagicComments(
-  lines: Array<string>,
-): {
+const MAGIC_COMMENT_REGEX =
+  /^\s*<span class="c[mp1sd]?">.*primer-spec-highlight-(start|end)/i;
+function parseMagicComments(lines: Array<string>): {
   linesWithoutMagicComments: Array<string>;
   removedLineNumbers: Array<number>;
   additionalHighlightRanges: string;

src_js/components/main_content/enhanced_code_blocks/parseCodeHighlightRanges.ts

@@ -18,10 +18,9 @@ export function parseCodeHighlightRanges(
   maxLineNumber: number,
   removedLineNumbers?: Array<number>,
 ): Set<number> {
-  const validRemovedLines = (
-    removedLineNumbers ?? []
-  ).filter((removedLineNumber) =>
-    isNumWithinInclusiveRange(removedLineNumber, 1, maxLineNumber),
+  const validRemovedLines = (removedLineNumbers ?? []).filter(
+    (removedLineNumber) =>
+      isNumWithinInclusiveRange(removedLineNumber, 1, maxLineNumber),
   );
   const normalizedMaxLineNumber = maxLineNumber - validRemovedLines.length;
 

src_js/components/sidebar/ResizeHandle.tsx

@@ -83,11 +83,8 @@ export function ResizeHandle({ sidebarRef }: PropsType): h.JSX.Element {
 
   useEffect(() => {
     const onMouseMove = (e: MouseEvent) => {
-      const {
-        startCursorScreenX,
-        startSidebarWidth,
-        startMainContentMargin,
-      } = resize_data_ref.current;
+      const { startCursorScreenX, startSidebarWidth, startMainContentMargin } =
+        resize_data_ref.current;
 
       if (startCursorScreenX) {
         const cursorScreenXDelta = e.screenX - startCursorScreenX;
@@ -141,16 +138,18 @@ export function ResizeHandle({ sidebarRef }: PropsType): h.JSX.Element {
         };
       }}
     >
-      {// We render a stylesheet for the content margin because when the
-      // Settings container renders, its margin is not auto-adjusted to match
-      // the custom sidebar width.
-      mainContentMarginLeft ? (
-        <style>
-          {'.primer-spec-content-margin-extra {'}
-          {`  margin-left: ${mainContentMarginLeft}px`}
-          {'}'}
-        </style>
-      ) : null}
+      {
+        // We render a stylesheet for the content margin because when the
+        // Settings container renders, its margin is not auto-adjusted to match
+        // the custom sidebar width.
+        mainContentMarginLeft ? (
+          <style>
+            {'.primer-spec-content-margin-extra {'}
+            {`  margin-left: ${mainContentMarginLeft}px`}
+            {'}'}
+          </style>
+        ) : null
+      }
     </div>
   );
 }

src_js/components/sidebar/SidebarContent.tsx

@@ -58,7 +58,7 @@ function Sitemap(props: {
   return (
     <details
       role="navigation"
-      aria-label={Config.SITEMAP_LABEL}
+      aria-label={Config.SITEMAP_LABEL ?? 'Sitemap'}
       open={props.sitemap.rootPage.current ? undefined : true}
     >
       <summary>{Config.SITEMAP_LABEL}</summary>
@@ -97,10 +97,12 @@ function SitemapPage(props: {
   return (
     <a href={props.page.url} tabIndex={-1}>
       <details class={props.dedent ? '' : 'primer-spec-toc-sitemap-item'}>
+        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
         <summary
           class={props.page.external ? 'primer-spec-toc-sitemap-external' : ''}
           data-order={props.page.external ? '' : props.page.sitemapOrder ?? ''}
           role="link"
+          tabIndex={0}
           onClick={(e) => {
             e.preventDefault();
             window.location.href = props.page.url;

src_js/components/sidebar/index.tsx

@@ -37,9 +37,10 @@ export default function Sidebar(props: SidebarProps): h.JSX.Element {
   const is_print_in_progress = usePrintInProgress();
   const sidebar_ref = useRef<HTMLElement>(null);
 
-  const sitemapUrls = useMemo(() => getSitemapUrls(props.sitemapEnabled), [
-    props.sitemapEnabled,
-  ]);
+  const sitemapUrls = useMemo(
+    () => getSitemapUrls(props.sitemapEnabled),
+    [props.sitemapEnabled],
+  );
 
   const saveScrollPositionThenToggleSidebar = useCallback(() => {
     // Before closing the sidebar, persist the scroll position within the

src_js/conditional_plugins/plugins/halloween.plugin.tsx

@@ -229,9 +229,8 @@ function insertShyEmojiImpl(subtheme_name: string) {
       onClick={() => {
         // If the emoji is still in the middle of peaking in, we want the
         // animation to begin from wherever it currently is.
-        shyEmoji.style[peakFromMargin] = window.getComputedStyle(shyEmoji)[
-          peakFromMargin
-        ];
+        shyEmoji.style[peakFromMargin] =
+          window.getComputedStyle(shyEmoji)[peakFromMargin];
         shyEmoji.style.animationDelay = '0s';
         shyEmoji.style.animationDuration = '3s';
         shyEmoji.style.animationName = 'fly';

src_js/subthemes/Subtheme.ts

@@ -92,7 +92,7 @@ export const SUBTHEME_VARS = [
 ] as const;
 
 // As described in: https://stackoverflow.com/a/45257357/5868796
-export type SubthemeDefinitionVariableType = typeof SUBTHEME_VARS[number];
+export type SubthemeDefinitionVariableType = (typeof SUBTHEME_VARS)[number];
 
 // Mapped type: https://www.typescriptlang.org/docs/handbook/advanced-types.html#mapped-types
 export type SubthemeModeDefinitionType = {
@@ -193,9 +193,9 @@ export const ROUGE_CLASS_NAMES = [
 ] as const;
 
 export type RougeStyle = {
-  [T in typeof ROUGE_STYLE_PROPS[number]]?: string;
+  [T in (typeof ROUGE_STYLE_PROPS)[number]]?: string;
 };
 
 export type RougeVarsType = {
-  [T in typeof ROUGE_CLASS_NAMES[number]]: RougeStyle;
+  [T in (typeof ROUGE_CLASS_NAMES)[number]]: RougeStyle;
 };

src_js/subthemes/definitions/bella.theme.ts

@@ -46,8 +46,10 @@ const bella_theme_vars: SubthemeDefinitionType = {
 
     '--sidebar-active-toc-section-bg-color': BELLA_DARK_PRIMARY_COLOR,
     '--sidebar-active-toc-section-link-color': BELLA_DARK_SIDEBAR_HEADING_COLOR,
-    '--sidebar-active-toc-h1-section-link-color': BELLA_DARK_SIDEBAR_HEADING_COLOR,
-    '--sidebar-active-toc-h2-section-link-color': BELLA_DARK_SIDEBAR_HEADING_COLOR,
+    '--sidebar-active-toc-h1-section-link-color':
+      BELLA_DARK_SIDEBAR_HEADING_COLOR,
+    '--sidebar-active-toc-h2-section-link-color':
+      BELLA_DARK_SIDEBAR_HEADING_COLOR,
     '--sidebar-toc-section-link-color': BELLA_DARK_SIDEBAR_HEADING_COLOR,
     '--sidebar-tt-active-text-color': BELLA_DARK_SIDEBAR_HEADING_COLOR,
 

src_js/subthemes/index.ts

@@ -24,10 +24,8 @@ export function updateTheme(
   { name, mode }: Partial<SubthemeSelectionType> = {},
   persistUpdate = true,
 ): void {
-  const {
-    name: stored_subtheme_name,
-    mode: stored_subtheme_mode,
-  } = getStoredSubtheme();
+  const { name: stored_subtheme_name, mode: stored_subtheme_mode } =
+    getStoredSubtheme();
 
   const normalized_name = verifySubthemeName(name ?? stored_subtheme_name);
 

src_js/subthemes/rouge_themes/createRougeTheme.ts

@@ -48,7 +48,7 @@ export default function createRougeTheme(
     name,
     // TODO: Figure out why TypeScript is not able to unify RougeVarsType and
     //       RougeVarsTypeInternal.
-    apply: () => apply((theme_vars as unknown) as RougeVarsTypeInternal),
+    apply: () => apply(theme_vars as unknown as RougeVarsTypeInternal),
     reset,
   };
 }