Bump the dependencies group across 1 directory with 6 updates (#1827)

.changeset/beige-rice-worry.md

@@ -0,0 +1,15 @@
+---
+'@guardian/source-development-kitchen': patch
+'@guardian/identity-auth-frontend': patch
+'@guardian/browserslist-config': patch
+'@guardian/newsletter-types': patch
+'@guardian/core-web-vitals': patch
+'@guardian/eslint-config': patch
+'@guardian/identity-auth': patch
+'@guardian/ab-react': patch
+'@guardian/ab-core': patch
+'@guardian/source': patch
+'@guardian/libs': patch
+---
+
+Fixes for new eslint config

libs/@guardian/browserslist-config/scripts/update-readme.mjs

@@ -9,7 +9,7 @@
 import { readFile, writeFile } from 'node:fs/promises';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-import prettier from 'prettier';
+import { format } from 'prettier';
 import { includedTable } from './included-table.mjs';
 import { usageTable } from './usage-table.mjs';
 
@@ -35,7 +35,7 @@ for (const { key, value } of replacements) {
 	readme = readme.replace(regex, `<!-- ${key} -->\n${value}\n<!-- /${key} -->`);
 }
 
-readme = await prettier.format(readme, {
+readme = await format(readme, {
 	parser: 'markdown',
 });
 

libs/@guardian/eslint-config/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @guardian/eslint-config
 
+## 10.0.0-beta.8
+
+### Breaking Changes
+
+- Dep bumps changes, including `||=` → `??=`
+
 ## 10.0.0-beta.7
 
 ### Breaking Changes

libs/@guardian/eslint-config/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@guardian/eslint-config",
-	"version": "10.0.0-beta.7",
+	"version": "10.0.0-beta.8",
 	"description": "ESLint config for Guardian JavaScript projects",
 	"type": "module",
 	"main": "index.js",
@@ -10,18 +10,18 @@
 	},
 	"dependencies": {
 		"@eslint-community/eslint-plugin-eslint-comments": "4.4.1",
-		"@eslint/js": "9.13.0",
-		"@stylistic/eslint-plugin": "2.9.0",
+		"@eslint/js": "9.16.0",
+		"@stylistic/eslint-plugin": "2.11.0",
 		"eslint-config-prettier": "9.1.0",
 		"eslint-import-resolver-typescript": "3.6.3",
-		"eslint-plugin-import-x": "4.3.1",
+		"eslint-plugin-import-x": "4.4.3",
 		"eslint-plugin-jsx-a11y": "6.10.2",
 		"eslint-plugin-react": "7.37.2",
 		"eslint-plugin-react-hooks": "5.0.0",
-		"eslint-plugin-storybook": "0.10.1",
-		"globals": "15.11.0",
+		"eslint-plugin-storybook": "0.11.1",
+		"globals": "15.13.0",
 		"read-package-up": "11.0.0",
-		"typescript-eslint": "8.11.0"
+		"typescript-eslint": "8.16.0"
 	},
 	"devDependencies": {
 		"eslint": "9.14.0",

libs/@guardian/identity-auth-frontend/src/index.ts

@@ -65,7 +65,7 @@ export const getIdentityAuth = () => {
 	} = window.guardian.config ?? {};
 	const stageOrDev = getStage(isDev, stage);
 
-	window.guardian.identityAuth ||= new IdentityAuth<
+	window.guardian.identityAuth ??= new IdentityAuth<
 		never,
 		FrontendIdTokenClaims
 	>({

libs/@guardian/libs/src/consent-management-platform/index.ts

@@ -94,7 +94,7 @@ const showPrivacyManager = () => {
 
 export const cmp: CMP = isServerSide
 	? serverCmp
-	: (window.guCmpHotFix.cmp ||= {
+	: (window.guCmpHotFix.cmp ??= {
 			init,
 			willShowPrivacyMessage,
 			willShowPrivacyMessageSync,
@@ -110,10 +110,10 @@ export const cmp: CMP = isServerSide
 
 export const onConsent = isServerSide
 	? serverOnConsent
-	: (window.guCmpHotFix.onConsent ||= clientOnConsent);
+	: (window.guCmpHotFix.onConsent ??= clientOnConsent);
 export const onConsentChange = isServerSide
 	? serverOnConsentChange
-	: (window.guCmpHotFix.onConsentChange ||= clientOnConsentChange);
+	: (window.guCmpHotFix.onConsentChange ??= clientOnConsentChange);
 export const getConsentFor = isServerSide
 	? serverGetConsentFor
-	: (window.guCmpHotFix.getConsentFor ||= clientGetConsentFor);
+	: (window.guCmpHotFix.getConsentFor ??= clientGetConsentFor);

libs/@guardian/libs/src/countries/getCountryByCountryCode.ts

@@ -2,11 +2,11 @@ import type { Country } from './@types/Country';
 import type { CountryCode } from './@types/CountryCode';
 import { countries } from './countries';
 
-export const getCountryByCountryCodeCache: {
-	[prop in CountryCode]?: Country;
-} = {};
+export const getCountryByCountryCodeCache: Partial<
+	Record<CountryCode, Country>
+> = {};
 
 export const getCountryByCountryCode = (countryCode: CountryCode): Country =>
-	(getCountryByCountryCodeCache[countryCode] ||= Object.values(countries).find(
+	(getCountryByCountryCodeCache[countryCode] ??= Object.values(countries).find(
 		(country) => country.countryCode === countryCode,
 	)) as Country;

libs/@guardian/libs/src/logger/logger.ts

@@ -97,8 +97,8 @@ export const log: LogCall = (subscription, ...args) => {
 // put the logger method on the window object so we can subscribe from the console
 /* istanbul ignore next */
 if (typeof window !== 'undefined') {
-	window.guardian ||= {};
-	window.guardian.logger ||= {
+	window.guardian ??= {};
+	window.guardian.logger ??= {
 		subscribeTo,
 		unsubscribeFrom,
 		teams: () => {

libs/@guardian/libs/src/storage/storage.ts

@@ -137,10 +137,10 @@ export const storage = new (class {
 	// when it's accessed i.e. we know we're going to use it
 
 	get local() {
-		return (this.#local ||= new StorageFactory('localStorage'));
+		return (this.#local ??= new StorageFactory('localStorage'));
 	}
 
 	get session() {
-		return (this.#session ||= new StorageFactory('sessionStorage'));
+		return (this.#session ??= new StorageFactory('sessionStorage'));
 	}
 })();

libs/@guardian/libs/src/switches/getSwitches.ts

@@ -26,6 +26,6 @@ let switches: Switches | undefined;
  */
 
 export const getSwitches = async (): Promise<Switches> =>
-	(switches ||= window.guardian?.config?.switches ?? (await fetchSwitches()));
+	(switches ??= window.guardian?.config?.switches ?? (await fetchSwitches()));
 
 export const __resetCachedValue = (): void => (switches = void 0);

libs/@guardian/react-crossword/.storybook/preview/viewport.ts

@@ -1,12 +1,13 @@
 import { breakpoints } from '@guardian/source/foundations';
 import type { Breakpoint } from '@guardian/source/foundations';
 
-type ViewportMeta = {
-	[key in Breakpoint]: {
+type ViewportMeta = Record<
+	Breakpoint,
+	{
 		name: string;
 		type: string;
-	};
-};
+	}
+>;
 const viewportMeta: ViewportMeta = {
 	mobile: {
 		name: 'Mobile',
@@ -42,15 +43,16 @@ const viewportMeta: ViewportMeta = {
 	},
 };
 
-type Viewports = {
-	[key in Breakpoint]: {
+type Viewports = Record<
+	Breakpoint,
+	{
 		styles: {
 			width: string;
 			height: string;
 		};
 		type: string;
-	};
-};
+	}
+>;
 
 const viewportEntries = Object.entries(breakpoints).map(([name, width]) => {
 	return [

libs/@guardian/react-crossword/src/@types/crossword.ts

@@ -4,9 +4,7 @@ import type { Entry, EntryID } from './Entry';
 
 export type Axis = 'x' | 'y';
 
-export type Coords = {
-	[k in Axis]: number;
-};
+export type Coords = Record<Axis, number>;
 
 export type Cell = Coords & {
 	/** Clue number */

libs/@guardian/source-development-kitchen/.storybook/preview/viewport.ts

@@ -1,12 +1,13 @@
 import { breakpoints } from '@guardian/source/foundations';
 import type { Breakpoint } from '@guardian/source/foundations';
 
-type ViewportMeta = {
-	[key in Breakpoint]: {
+type ViewportMeta = Record<
+	Breakpoint,
+	{
 		name: string;
 		type: string;
-	};
-};
+	}
+>;
 const viewportMeta: ViewportMeta = {
 	mobile: {
 		name: 'Mobile',
@@ -42,15 +43,16 @@ const viewportMeta: ViewportMeta = {
 	},
 };
 
-type Viewports = {
-	[key in Breakpoint]: {
+type Viewports = Record<
+	Breakpoint,
+	{
 		styles: {
 			width: string;
 			height: string;
 		};
 		type: string;
-	};
-};
+	}
+>;
 
 const viewportEntries = Object.entries(breakpoints).map(([name, width]) => {
 	return [

libs/@guardian/source-development-kitchen/src/react-components/file-input/styles.ts

@@ -45,17 +45,13 @@ export const warningText = (
 	margin: 2px 0 0;
 `;
 
-export const uploadSizes: {
-	[key in SizeType]: SerializedStyles;
-} = {
+export const uploadSizes: Record<SizeType, SerializedStyles> = {
 	default: defaultUpload,
 	small: smallUpload,
 	xsmall: xsmallUpload,
 };
 
-export const fontSizes: {
-	[key in SizeType]: SerializedStyles;
-} = {
+export const fontSizes: Record<SizeType, SerializedStyles> = {
 	default: css`
 		${textSans17};
 	`,

libs/@guardian/source-development-kitchen/src/react-components/numeric-input/NumericInput.tsx

@@ -30,9 +30,7 @@ export interface InputTheme extends Theme {
 
 export type Width = 30 | 10 | 4;
 
-const widths: {
-	[key in Width]: SerializedStyles;
-} = {
+const widths: Record<Width, SerializedStyles> = {
 	30: width30,
 	10: width10,
 	4: width4,

libs/@guardian/source-development-kitchen/src/react-components/numeric-input/sharedStyles.ts

@@ -19,9 +19,7 @@ const inputSizeSmall = css`
 	height: ${size.small}px;
 `;
 
-const inputSize: {
-	[key in InputSize]: SerializedStyles;
-} = {
+const inputSize: Record<InputSize, SerializedStyles> = {
 	medium: inputSizeDefault,
 	small: inputSizeSmall,
 };

libs/@guardian/source/.storybook/preview/viewport.ts

@@ -1,12 +1,13 @@
 import { breakpoints } from '@guardian/source/foundations';
 import type { Breakpoint } from '@guardian/source/foundations';
 
-type ViewportMeta = {
-	[key in Breakpoint]: {
+type ViewportMeta = Record<
+	Breakpoint,
+	{
 		name: string;
 		type: string;
-	};
-};
+	}
+>;
 const viewportMeta: ViewportMeta = {
 	mobile: {
 		name: 'Mobile',
@@ -42,15 +43,16 @@ const viewportMeta: ViewportMeta = {
 	},
 };
 
-type Viewports = {
-	[key in Breakpoint]: {
+type Viewports = Record<
+	Breakpoint,
+	{
 		styles: {
 			width: string;
 			height: string;
 		};
 		type: string;
-	};
-};
+	}
+>;
 
 const viewportEntries = Object.entries(breakpoints).map(([name, width]) => {
 	return [

libs/@guardian/source/src/foundations/mq/mq.ts

@@ -1,9 +1,7 @@
 import { breakpoints } from '../breakpoints/breakpoints';
 import type { Breakpoint } from '../breakpoints/breakpoints';
 
-export type BreakpointMap = {
-	[key in Breakpoint]: string;
-};
+export type BreakpointMap = Record<Breakpoint, string>;
 
 /**
  * Making this value much smaller than `1px` prevents

libs/@guardian/source/src/react-components/button/styles.ts

@@ -231,39 +231,32 @@ const iconNudgeAnimation = css`
 	}
 `;
 
-const priorities: {
-	[key in ButtonPriority]: (button: ThemeButton) => SerializedStyles;
-} = {
+const priorities: Record<
+	ButtonPriority,
+	(button: ThemeButton) => SerializedStyles
+> = {
 	primary,
 	secondary,
 	tertiary,
 	subdued,
 };
 
-const iconSides: {
-	[key in IconSide]: SerializedStyles;
-} = {
+const iconSides: Record<IconSide, SerializedStyles> = {
 	right: iconRight,
 	left: iconLeft,
 };
 
-const sizes: {
-	[key in Size]: SerializedStyles;
-} = {
+const sizes: Record<Size, SerializedStyles> = {
 	default: defaultSize,
 	small: smallSize,
 	xsmall: xsmallSize,
 };
-const iconSizes: {
-	[key in Size]: SerializedStyles;
-} = {
+const iconSizes: Record<Size, SerializedStyles> = {
 	default: iconDefault,
 	small: iconSmall,
 	xsmall: iconXsmall,
 };
-const iconOnlySizes: {
-	[key in Size]: SerializedStyles;
-} = {
+const iconOnlySizes: Record<Size, SerializedStyles> = {
 	default: iconOnlyDefault,
 	small: iconOnlySmall,
 	xsmall: iconOnlyXsmall,

libs/@guardian/source/src/react-components/choice-card/styles.ts

@@ -54,7 +54,7 @@ const gridColumnsStyle = (columns: ChoiceCardColumns): SerializedStyles => css`
 		grid-template-columns: repeat(${columns}, 1fr);
 	}
 `;
-export const gridColumns: { [key in ChoiceCardColumns]: SerializedStyles } = {
+export const gridColumns: Record<ChoiceCardColumns, SerializedStyles> = {
 	2: gridColumnsStyle(2),
 	3: gridColumnsStyle(3),
 	4: gridColumnsStyle(4),