chore(eslint): update to v10

apps/site/components/Common/Supporters/index.tsx

@@ -11,12 +11,12 @@ type SupportersListProps = {
 
 const SupportersList: FC<SupportersListProps> = ({ supporters }) => (
   <div className="flex max-w-full flex-wrap items-center justify-center gap-1">
-    {supporters.map(({ name, image, profile }, i) => (
+    {supporters.map(({ name, image, profile }) => (
       <Avatar
         nickname={name}
         fallback={getAcronymFromString(name)}
         image={image}
-        key={`${name}-${i}`}
+        key={name}
         url={profile}
       />
     ))}

apps/site/components/Downloads/Release/BlogPostLink.tsx

@@ -1,14 +1,14 @@
 'use client';
 
-import { useContext } from 'react';
+import { use } from 'react';
 
 import Link from '#site/components/Link';
 import { ReleaseContext } from '#site/providers/releaseProvider';
 
 import type { FC, PropsWithChildren } from 'react';
 
 const BlogPostLink: FC<PropsWithChildren> = ({ children }) => {
-  const { release } = useContext(ReleaseContext);
+  const { release } = use(ReleaseContext);
   const version = release.versionWithPrefix;
 
   return <Link href={`/blog/release/${version}`}>{children}</Link>;

apps/site/components/Downloads/Release/ChangelogLink.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useContext } from 'react';
+import { use } from 'react';
 
 import LinkWithArrow from '#site/components/Common/LinkWithArrow';
 import { BASE_CHANGELOG_URL } from '#site/next.constants.mjs';
@@ -9,7 +9,7 @@ import { ReleaseContext } from '#site/providers/releaseProvider';
 import type { FC, PropsWithChildren } from 'react';
 
 const ChangelogLink: FC<PropsWithChildren> = ({ children }) => {
-  const { release } = useContext(ReleaseContext);
+  const { release } = use(ReleaseContext);
 
   return (
     <LinkWithArrow href={`${BASE_CHANGELOG_URL}${release.version}`}>

apps/site/components/Downloads/Release/DownloadLink.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useContext } from 'react';
+import { use } from 'react';
 
 import DownloadLinkBase from '#site/components/Downloads/DownloadLink';
 import { ReleaseContext } from '#site/providers/releaseProvider';
@@ -14,7 +14,7 @@ const DownloadLink: FC<PropsWithChildren<DownloadLinkProps>> = ({
   kind = 'installer',
   children,
 }) => {
-  const { release } = useContext(ReleaseContext);
+  const { release } = use(ReleaseContext);
 
   return (
     <DownloadLinkBase release={release} kind={kind}>

apps/site/components/Downloads/Release/InstallationMethodDropdown.tsx

@@ -2,7 +2,7 @@
 
 import Select from '@node-core/ui-components/Common/Select';
 import { useTranslations } from 'next-intl';
-import { useContext, useEffect, useMemo } from 'react';
+import { use, useEffect, useMemo } from 'react';
 
 import { ReleaseContext } from '#site/providers/releaseProvider';
 import { nextItem, INSTALL_METHODS, parseCompat } from '#site/util/download';
@@ -11,14 +11,13 @@ import type { InstallationMethod } from '#site/types/release';
 import type { FC } from 'react';
 
 const InstallationMethodDropdown: FC = () => {
-  const release = useContext(ReleaseContext);
+  const release = use(ReleaseContext);
   const t = useTranslations();
 
   // We parse the compatibility of the dropdown items
   const parsedInstallMethods = useMemo(
     () => parseCompat(INSTALL_METHODS, release),
     // We only want to react on the change of the OS and Version
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [release.os, release.version]
   );
 
@@ -36,7 +35,6 @@ const InstallationMethodDropdown: FC = () => {
       },
     ],
     // We only want to react on the change of the parsedPlatforms
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [parsedInstallMethods]
   );
 
@@ -55,7 +53,6 @@ const InstallationMethodDropdown: FC = () => {
       // when the OS has finished loading for a given installation method
       release.setInstallMethod(installationMethod as InstallationMethod);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [parsedInstallMethods, release.installMethod, release.os]);
 
   // We set the Platform to the next available platform when the current
@@ -69,7 +66,6 @@ const InstallationMethodDropdown: FC = () => {
       }
     },
     // We only want to react on the change of the OS and Version
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [release.os, release.version]
   );
 

apps/site/components/Downloads/Release/OperatingSystemDropdown.tsx

@@ -2,9 +2,9 @@
 
 import Select from '@node-core/ui-components/Common/Select';
 import { useTranslations } from 'next-intl';
-import { useContext, useEffect, useMemo } from 'react';
+import { use, useEffect, useMemo } from 'react';
 
-import { useClientContext } from '#site/hooks/client';
+import useClientContext from '#site/hooks/useClientContext';
 import { ReleaseContext } from '#site/providers/releaseProvider';
 import { nextItem, OPERATING_SYSTEMS, parseCompat } from '#site/util/download';
 
@@ -15,7 +15,7 @@ type OperatingSystemDropdownProps = { exclude?: Array<OperatingSystem> };
 
 const OperatingSystemDropdown: FC<OperatingSystemDropdownProps> = () => {
   const { os } = useClientContext();
-  const release = useContext(ReleaseContext);
+  const release = use(ReleaseContext);
   const t = useTranslations();
 
   useEffect(() => {
@@ -25,14 +25,12 @@ const OperatingSystemDropdown: FC<OperatingSystemDropdownProps> = () => {
     // Reacts on Client Context change of OS
     // Only this Hook is allowed to bypass the `setOS` from above
     // As this Hook is what defined the initial OS state
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [os]);
 
   // We parse the compatibility of the dropdown items
   const parsedOperatingSystems = useMemo(
     () => parseCompat(OPERATING_SYSTEMS, release),
     // We only want to react on the change of the Install Method and Version
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [release.installMethod, release.version]
   );
 
@@ -45,7 +43,6 @@ const OperatingSystemDropdown: FC<OperatingSystemDropdownProps> = () => {
       }
     },
     // We only want to react on the change of the Version, Install Method and OS
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [release.installMethod, release.version, release.os]
   );
 

apps/site/components/Downloads/Release/PackageManagerDropdown.tsx

@@ -2,7 +2,7 @@
 
 import Select from '@node-core/ui-components/Common/Select';
 import { useTranslations } from 'next-intl';
-import { useContext, useEffect, useMemo } from 'react';
+import { use, useEffect, useMemo } from 'react';
 
 import { ReleaseContext } from '#site/providers/releaseProvider';
 import { nextItem, PACKAGE_MANAGERS, parseCompat } from '#site/util/download';
@@ -11,14 +11,13 @@ import type { PackageManager } from '#site/types/release';
 import type { FC } from 'react';
 
 const PackageManagerDropdown: FC = () => {
-  const release = useContext(ReleaseContext);
+  const release = use(ReleaseContext);
   const t = useTranslations();
 
   // We parse the compatibility of the dropdown items
   const parsedPackageManagers = useMemo(
     () => parseCompat(PACKAGE_MANAGERS, release),
     // We only want to react on the change of the Version
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [release.version]
   );
 
@@ -30,7 +29,6 @@ const PackageManagerDropdown: FC = () => {
         nextItem(release.packageManager, parsedPackageManagers)
       ),
     // We only want to react on the change of the Version
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [release.version, release.packageManager]
   );
 

apps/site/components/Downloads/Release/PlatformDropdown.tsx

@@ -2,9 +2,9 @@
 
 import Select from '@node-core/ui-components/Common/Select';
 import { useTranslations } from 'next-intl';
-import { useEffect, useContext, useMemo } from 'react';
+import { useEffect, use, useMemo } from 'react';
 
-import { useClientContext } from '#site/hooks/client';
+import useClientContext from '#site/hooks/useClientContext';
 import { ReleaseContext } from '#site/providers/releaseProvider';
 import { PLATFORMS, nextItem, parseCompat } from '#site/util/download';
 import { getUserPlatform } from '#site/util/userAgent';
@@ -15,7 +15,7 @@ import type { FC } from 'react';
 const PlatformDropdown: FC = () => {
   const { architecture, bitness } = useClientContext();
 
-  const release = useContext(ReleaseContext);
+  const release = use(ReleaseContext);
   const t = useTranslations();
 
   useEffect(
@@ -27,7 +27,6 @@ const PlatformDropdown: FC = () => {
       }
     },
     // Only react on the change of the Client Context Architecture and Bitness
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [architecture, bitness]
   );
 
@@ -40,7 +39,6 @@ const PlatformDropdown: FC = () => {
         ? parseCompat(PLATFORMS[release.os], release)
         : [],
     // We only want to react on the change of the OS, Platform, and Version
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [release.os, release.version]
   );
 
@@ -53,7 +51,6 @@ const PlatformDropdown: FC = () => {
       }
     },
     // We only want to react on the change of the OS and Version
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [release.os, release.version, release.platform]
   );
 

apps/site/components/Downloads/Release/PrebuiltDownloadButtons.tsx

@@ -3,7 +3,7 @@
 import { CloudArrowDownIcon } from '@heroicons/react/24/outline';
 import Skeleton from '@node-core/ui-components/Common/Skeleton';
 import { useTranslations } from 'next-intl';
-import { useContext } from 'react';
+import { use } from 'react';
 
 import Button from '#site/components/Common/Button';
 import { ReleaseContext } from '#site/providers/releaseProvider';
@@ -20,7 +20,7 @@ const getExtension = (input: string) => String(input.split('.').slice(-1));
 
 const PrebuiltDownloadButtons: FC = () => {
   const t = useTranslations();
-  const { release, os, platform } = useContext(ReleaseContext);
+  const { release, os, platform } = use(ReleaseContext);
 
   const installerUrl = platform
     ? getNodeDownloadUrl({

apps/site/components/Downloads/Release/ReleaseCodeBox.tsx

@@ -4,7 +4,7 @@ import { highlightToHtml } from '@node-core/rehype-shiki/minimal';
 import AlertBox from '@node-core/ui-components/Common/AlertBox';
 import Skeleton from '@node-core/ui-components/Common/Skeleton';
 import { useTranslations } from 'next-intl';
-import { useContext, useMemo } from 'react';
+import { use, useMemo } from 'react';
 
 import CodeBox from '#site/components/Common/CodeBox';
 import LinkWithArrow from '#site/components/Common/LinkWithArrow';
@@ -114,8 +114,8 @@ const usePlatformInfo = (installMethod: string) => {
  * ReleaseCodeBox component displays installation instructions based on platform and context
  */
 const ReleaseCodeBox: FC = () => {
-  const { snippets } = useContext(ReleasesContext);
-  const context = useContext(ReleaseContext);
+  const { snippets } = use(ReleasesContext);
+  const context = use(ReleaseContext);
   const t = useTranslations();
 
   // Process platform information
@@ -164,6 +164,7 @@ const ReleaseCodeBox: FC = () => {
       {/* Code display with skeleton loading */}
       <Skeleton loading={isLoading}>
         <CodeBox language={displayLanguage} className="min-h-[19rem]">
+          {/* eslint-disable-next-line @eslint-react/dom/no-dangerously-set-innerhtml */}
           <code dangerouslySetInnerHTML={{ __html: parsedSnippets }} />
         </CodeBox>
       </Skeleton>

apps/site/components/Downloads/Release/VersionDropdown.tsx

@@ -2,7 +2,7 @@
 
 import WithNoScriptSelect from '@node-core/ui-components/Common/Select/NoScriptSelect';
 import { useLocale, useTranslations } from 'next-intl';
-import { useContext } from 'react';
+import { use } from 'react';
 
 import { redirect, usePathname } from '#site/navigation';
 import {
@@ -25,8 +25,8 @@ const getDropDownStatus = (version: string, status: string) => {
 };
 
 const VersionDropdown: FC = () => {
-  const { releases } = useContext(ReleasesContext);
-  const { release, setVersion } = useContext(ReleaseContext);
+  const { releases } = use(ReleasesContext);
+  const { release, setVersion } = use(ReleaseContext);
   const t = useTranslations();
   const locale = useLocale();
   const pathname = usePathname();

apps/site/components/EOL/EOLModal.tsx

@@ -34,7 +34,6 @@ const EOLModal: FC<EOLModalProps> = ({
           SEVERITY_ORDER.indexOf(b.severity)
       ),
     // Only change when the vulnerabilities change
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [vulnerabilities.length]
   );
 

apps/site/components/withBreadcrumbs.tsx

@@ -4,8 +4,9 @@ import Breadcrumbs from '@node-core/ui-components/Common/Breadcrumbs';
 import { useTranslations } from 'next-intl';
 
 import Link from '#site/components/Link';
-import { useClientContext, useMediaQuery } from '#site/hooks/client';
-import { useSiteNavigation } from '#site/hooks/generic';
+import useClientContext from '#site/hooks/useClientContext';
+import useMediaQuery from '#site/hooks/useMediaQuery';
+import useSiteNavigation from '#site/hooks/useSiteNavigation';
 import { dashToCamelCase } from '#site/util/string';
 
 import type { NavigationKeys } from '#site/types';

apps/site/components/withMetaBar.tsx

@@ -7,7 +7,8 @@ import { useFormatter, useLocale, useTranslations } from 'next-intl';
 
 import Link from '#site/components/Link';
 import WithAvatarGroup from '#site/components/withAvatarGroup';
-import { useClientContext, useMediaQuery } from '#site/hooks/client';
+import useClientContext from '#site/hooks/useClientContext';
+import useMediaQuery from '#site/hooks/useMediaQuery';
 import { DEFAULT_DATE_FORMAT } from '#site/next.calendar.constants.mjs';
 import { TRANSLATION_URL } from '#site/next.constants.mjs';
 import { getGitHubBlobUrl } from '#site/util/github';

apps/site/components/withNavBar.tsx

@@ -16,7 +16,7 @@ import SearchButton from '#site/components/Common/Searchbox';
 import Link from '#site/components/Link';
 import WithBanner from '#site/components/withBanner';
 import WithNodejsLogo from '#site/components/withNodejsLogo';
-import { useSiteNavigation } from '#site/hooks/generic';
+import useSiteNavigation from '#site/hooks/useSiteNavigation';
 import { useRouter, usePathname } from '#site/navigation.mjs';
 
 import type { Theme } from '@node-core/ui-components/Common/ThemeToggle';

apps/site/components/withSidebar.tsx

@@ -5,8 +5,9 @@ import { useTranslations } from 'next-intl';
 import { useRef } from 'react';
 
 import Link from '#site/components/Link';
-import { useClientContext, useScrollToElement } from '#site/hooks/client';
-import { useSiteNavigation } from '#site/hooks/generic';
+import useClientContext from '#site/hooks/useClientContext';
+import useScrollToElement from '#site/hooks/useScrollToElement';
+import useSiteNavigation from '#site/hooks/useSiteNavigation';
 import { useRouter, usePathname } from '#site/navigation.mjs';
 
 import type { NavigationKeys } from '#site/types';

apps/site/components/withSidebarCrossLinks.tsx

@@ -1,6 +1,6 @@
+import { getClientContext } from '#site/client-context';
 import CrossLink from '#site/components/Common/CrossLink';
-import { useSiteNavigation } from '#site/hooks/generic';
-import { useClientContext } from '#site/hooks/server';
+import useSiteNavigation from '#site/hooks/useSiteNavigation';
 
 import type { NavigationKeys } from '#site/types';
 import type { FC } from 'react';
@@ -9,7 +9,7 @@ type WithCrossLinksProps = { navKey: NavigationKeys };
 
 const WithSidebarCrossLinks: FC<WithCrossLinksProps> = ({ navKey }) => {
   const { getSideNavigation } = useSiteNavigation();
-  const { pathname } = useClientContext();
+  const { pathname } = getClientContext();
 
   const [[, sidebarNavigation]] = getSideNavigation([navKey]);