code review

Author: avivkeller

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

@@ -7,10 +7,10 @@ import type { FC } from 'react';
 
 import { useClientContext } from '#site/hooks';
 import { ReleaseContext } from '#site/providers/releaseProvider';
-import type { UserOS } from '#site/types/userAgent';
+import type { OperatingSystem } from '#site/types/userAgent';
 import { nextItem, OPERATING_SYSTEMS, parseCompat } from '#site/util/download';
 
-type OperatingSystemDropdownProps = { exclude?: Array<UserOS> };
+type OperatingSystemDropdownProps = { exclude?: Array<OperatingSystem> };
 
 const OperatingSystemDropdown: FC<OperatingSystemDropdownProps> = () => {
   const { os } = useClientContext();
@@ -49,7 +49,7 @@ const OperatingSystemDropdown: FC<OperatingSystemDropdownProps> = () => {
   );
 
   return (
-    <Select<UserOS>
+    <Select<OperatingSystem>
       values={parsedOperatingSystems}
       defaultValue={release.os !== 'LOADING' ? release.os : undefined}
       loading={release.os === 'LOADING'}

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

@@ -7,7 +7,7 @@ import { useEffect, useContext, useMemo } from 'react';
 
 import { useClientContext } from '#site/hooks';
 import { ReleaseContext } from '#site/providers/releaseProvider';
-import type { UserPlatform } from '#site/types/userAgent';
+import type { Platform } from '#site/types/userAgent';
 import { PLATFORMS, nextItem, parseCompat } from '#site/util/download';
 import { getUserPlatform } from '#site/util/userAgent';
 
@@ -57,7 +57,7 @@ const PlatformDropdown: FC = () => {
   );
 
   return (
-    <Select<UserPlatform>
+    <Select<Platform>
       values={parsedPlatforms}
       defaultValue={release.platform !== '' ? release.platform : undefined}
       loading={release.os === 'LOADING' || release.platform === ''}

apps/site/hooks/react-client/useDetectOS.ts

@@ -3,16 +3,16 @@
 import { useEffect, useState } from 'react';
 
 import type {
-  UserArchitecture,
-  UserBitness,
-  UserOS,
+  Architecture,
+  Bitness,
+  OperatingSystem,
 } from '#site/types/userAgent';
 import { getHighEntropyValues, detectOS } from '#site/util/userAgent';
 
 type UserOSState = {
-  os: UserOS | 'LOADING';
-  bitness: UserBitness | '';
-  architecture: UserArchitecture | '';
+  os: OperatingSystem | 'LOADING';
+  bitness: Bitness | '';
+  architecture: Architecture | '';
 };
 
 const useDetectOS = () => {
@@ -45,8 +45,8 @@ const useDetectOS = () => {
       }) => {
         setUserOSState(current => ({
           ...current,
-          bitness: bitness as UserBitness,
-          architecture: architecture as UserArchitecture,
+          bitness: bitness as Bitness,
+          architecture: architecture as Architecture,
         }));
       }
     );

apps/site/types/release.ts

@@ -1,6 +1,6 @@
 import type { DownloadSnippet } from '#site/types/download';
 import type { NodeRelease } from '#site/types/releases';
-import type { UserOS, UserPlatform } from '#site/types/userAgent';
+import type { OperatingSystem, Platform } from '#site/types/userAgent';
 
 export type InstallationMethod =
   | 'NVM'
@@ -17,23 +17,23 @@ export type PackageManager = 'NPM' | 'YARN' | 'PNPM';
 // during runtime and do not have necessarily a consistent initial value
 export interface ReleaseState {
   version: string;
-  os: UserOS | 'LOADING';
-  platform: UserPlatform | '';
+  os: OperatingSystem | 'LOADING';
+  platform: Platform | '';
   installMethod: InstallationMethod | '';
   packageManager: PackageManager;
 }
 
 export type ReleaseAction =
   | { type: 'SET_VERSION'; payload: string }
-  | { type: 'SET_OS'; payload: UserOS }
-  | { type: 'SET_PLATFORM'; payload: UserPlatform }
+  | { type: 'SET_OS'; payload: OperatingSystem }
+  | { type: 'SET_PLATFORM'; payload: Platform }
   | { type: 'SET_INSTALL_METHOD'; payload: InstallationMethod }
   | { type: 'SET_MANAGER'; payload: PackageManager };
 
 export interface ReleaseDispatchActions {
   setVersion: (version: string) => void;
-  setOS: (os: UserOS) => void;
-  setPlatform: (bitness: UserPlatform) => void;
+  setOS: (os: OperatingSystem) => void;
+  setPlatform: (bitness: Platform) => void;
   setInstallMethod: (installMethod: InstallationMethod) => void;
   setPackageManager: (packageManager: PackageManager) => void;
 }

apps/site/types/userAgent.ts

@@ -1,14 +1,13 @@
 import type constants from '../util/download/constants.json';
 
 // Extract OS key type from the systems object
-export type UserOS = keyof typeof constants.systems;
+export type OperatingSystem = keyof typeof constants.systems;
 
 // Derive the union type of UserPlatform from the userOptions
-export type UserPlatform = (typeof constants.userOptions.platforms)[number];
+export type Platform = (typeof constants.userOptions.platforms)[number];
 
 // Derive the union type of UserBitness from the userOptions
-export type UserBitness = (typeof constants.userOptions.bitness)[number];
+export type Bitness = (typeof constants.userOptions.bitness)[number];
 
 // Derive the union type of UserArchitecture from the userOptions
-export type UserArchitecture =
-  (typeof constants.userOptions.architecture)[number];
+export type Architecture = (typeof constants.userOptions.architecture)[number];

apps/site/util/download/index.tsx

@@ -8,8 +8,8 @@ import satisfies from 'semver/functions/satisfies';
 import type {
   IntlMessageKeys,
   NodeReleaseStatus,
-  UserOS,
-  UserPlatform,
+  OperatingSystem,
+  Platform,
 } from '#site/types';
 import type * as Types from '#site/types/release';
 
@@ -29,9 +29,9 @@ export const OperatingSystemLabel = Object.fromEntries(
 
 // Base types for dropdown functionality
 type DownloadCompatibility = {
-  os?: Array<UserOS | 'LOADING'>;
+  os?: Array<OperatingSystem | 'LOADING'>;
   installMethod?: Array<string>;
-  platform?: Array<UserPlatform | ''>;
+  platform?: Array<Platform | ''>;
   semver?: Array<string>;
   releases?: Array<NodeReleaseStatus>;
 };
@@ -107,7 +107,7 @@ export const OPERATING_SYSTEMS = Object.entries(systems as ActualSystems)
   .filter(([key]) => key !== 'LOADING' && key !== 'OTHER')
   .map(([key, data]) => ({
     label: data.name as IntlMessageKeys,
-    value: key as UserOS,
+    value: key as OperatingSystem,
     compatibility: data.compatibility,
     iconImage: createIcon(OSIcons, data.icon),
   }));
@@ -123,7 +123,7 @@ export const INSTALL_METHODS = installMethods.map(method => ({
   info: method.info as IntlMessageKeys,
   compatibility: {
     ...method.compatibility,
-    os: method.compatibility?.os?.map(os => os as UserOS),
+    os: method.compatibility?.os?.map(os => os as OperatingSystem),
     releases: method.compatibility?.releases?.map(
       release => release as NodeReleaseStatus
     ),
@@ -148,8 +148,8 @@ export const PLATFORMS = Object.fromEntries(
     key,
     data.platforms.map(platform => ({
       label: platform.label,
-      value: platform.value as UserPlatform,
+      value: platform.value as Platform,
       compatibility: platform.compatibility || {},
     })),
   ])
-) as Record<UserOS | 'LOADING', Array<DownloadDropdownItem<UserPlatform>>>;
+) as Record<OperatingSystem | 'LOADING', Array<DownloadDropdownItem<Platform>>>;

apps/site/util/objects.ts

@@ -1,19 +1,19 @@
 type DebounceFunction<T = unknown> = (...args: Array<T>) => void;
 
-let timeoutId: NodeJS.Timeout;
+export const debounce = <T extends DebounceFunction>(
+  func: T,
+  delay: number
+): ((...args: Parameters<T>) => void) => {
+  let timeoutId: NodeJS.Timeout;
 
-export const debounce =
-  <T extends DebounceFunction>(
-    func: T,
-    delay: number
-  ): ((...args: Parameters<T>) => void) =>
-  (...args: Parameters<T>) => {
+  return (...args: Parameters<T>) => {
     clearTimeout(timeoutId);
 
     timeoutId = setTimeout(() => {
       func(...args);
     }, delay);
   };
+};
 
 export function deepMerge<Obj1 extends object, Obj2 extends object>(
   obj1: Obj1,

apps/site/util/url.ts

@@ -1,7 +1,7 @@
 import { satisfies } from 'semver';
 
 import { DOCS_URL, DIST_URL } from '#site/next.constants.mjs';
-import type { UserOS, UserPlatform, DownloadKind } from '#site/types';
+import type { OperatingSystem, Platform, DownloadKind } from '#site/types';
 
 export const getNodeApiUrl = (version: string) => {
   if (satisfies(version, '>=0.3.1 <0.5.1')) {
@@ -19,8 +19,8 @@ export const getNodeApiUrl = (version: string) => {
 
 export const getNodeDownloadUrl = (
   versionWithPrefix: string,
-  os: UserOS | 'LOADING',
-  platform: UserPlatform = 'x64',
+  os: OperatingSystem | 'LOADING',
+  platform: Platform = 'x64',
   kind: DownloadKind = 'installer'
 ) => {
   const baseURL = `${DIST_URL}${versionWithPrefix}`;

apps/site/util/userAgent.ts

@@ -1,10 +1,10 @@
 /// <reference types="user-agent-data-types" />
 
 import type {
-  UserOS,
-  UserArchitecture,
-  UserBitness,
-  UserPlatform,
+  OperatingSystem,
+  Architecture,
+  Bitness,
+  Platform,
 } from '#site/types';
 
 // Constants for better maintainability
@@ -16,27 +16,30 @@ const EMPTY_UA_DATA: UADataValues = {};
  * @param userAgent - The user agent string to parse
  * @returns The detected OS or 'OTHER' if not recognized
  */
-export const detectOsInUserAgent = (userAgent: string | undefined): UserOS => {
+export const detectOsInUserAgent = (
+  userAgent: string | undefined
+): OperatingSystem => {
   const osMatch = userAgent?.match(OS_PATTERNS);
-  return osMatch ? (osMatch[1].toUpperCase() as UserOS) : 'OTHER';
+  return osMatch ? (osMatch[1].toUpperCase() as OperatingSystem) : 'OTHER';
 };
 
 /**
  * Detects operating system using navigator.userAgent
  * Note: navigator.appVersion is deprecated, so we use userAgent instead
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Navigator/appVersion
  */
-export const detectOS = (): UserOS => detectOsInUserAgent(navigator?.userAgent);
+export const detectOS = (): OperatingSystem =>
+  detectOsInUserAgent(navigator?.userAgent);
 
 /**
  * Determines user platform based on architecture and bitness
  * Used for automatic platform detection with `useDetectOS`
  * @see https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUAData/getHighEntropyValues
  */
 export const getUserPlatform = (
-  userArchitecture: UserArchitecture | '',
-  userBitness: UserBitness | ''
-): UserPlatform => {
+  userArchitecture: Architecture | '',
+  userBitness: Bitness | ''
+): Platform => {
   if (userArchitecture === 'arm' && userBitness === '64') {
     return 'arm64';
   }