chore: apply strict typescript checking (#6680)

Applying Typescript checks to the code, including strict null checks that raise errors on unhandled `null` or `undefined` types.
Also adding the typescript check to the build step, to raise error on TS errors.

Author: AlexandreGaubert

astro.config.ts

@@ -14,15 +14,15 @@ import { rehypeOptimizeStatic } from './plugins/rehype-optimize-static';
 import { rehypeTasklistEnhancer } from './plugins/rehype-tasklist-enhancer';
 import react from '@astrojs/react';
 import { remarkGraphvizPlugin } from './plugins/remark-graphviz';
-import dotenv from 'dotenv';
+import dotenv, { DotenvPopulateInput } from 'dotenv';
 import vue from '@astrojs/vue';
 import sitemap from '@astrojs/sitemap';
 import { remarkAlgolia } from './plugins/remark-algolia';
 
 dotenv.config({
 	path: `.env.${process.env.NODE_ENV}`,
 });
-dotenv.populate(process.env, {
+dotenv.populate(process.env as DotenvPopulateInput, {
 	PUBLIC_ALGOLIA_APP_ID: '81GKA2I1R0',
 	PUBLIC_ALGOLIA_INDEX_NAME: 'docs-pages-dev',
 	PUBLIC_ALGOLIA_SEARCH_KEY: '6fce1b6d8ccf82a6601a169c0167c0e3',

integrations/astro-asides.ts

@@ -48,19 +48,23 @@ function remarkAsides(): unified.Plugin<[], mdast.Root> {
 			let title: string | undefined;
 			remove(node, (child) => {
 				if ((child.data as { directiveLabel?: string })?.directiveLabel) {
-					if ('children' in child && 'value' in child.children[0]) {
-						title = child.children[0].value;
+					if ('children' in child && 'value' in (child.children as any)[0]) {
+						title = (child.children as any)[0].value;
 					}
 					return true;
 				}
 			});
 
-			// Replace this node with the aside component it represents.
-			parent.children[index] = makeComponentNode(
-				AsideTagname,
-				{ attributes: { type, title } },
-				...node.children as mdast.BlockContent[]
-			);
+			if (index !== undefined ) {
+				// Replace this node with the aside component it represents.
+				parent.children[index] = makeComponentNode(
+					AsideTagname,
+					{ attributes: { type, title } },
+					...node.children as mdast.BlockContent[]
+				);
+			} else {
+				throw new Error('Invalid index for parent node');
+			}
 		});
 	};
 

integrations/astro-youtube-embed.ts

@@ -28,19 +28,23 @@ function remarkYoutubeEmbed(): unified.Plugin<[], mdast.Root> {
 
 			remove(node, (child) => {
 				if ((child.data as { directiveLabel?: string })?.directiveLabel) {
-					if ('children' in child && 'value' in child.children[0]) {
-						title = child.children[0].value;
+					if ('children' in child && 'value' in (child.children as any)[0]) {
+						title = (child.children as any)[0].value;
 					}
 					return true;
 				}
 			});
 
-			// Replace this node with the aside component it represents.
-			parent.children[index] = makeComponentNode(
-				YoutubeTagname,
-				{ attributes: { title, video: node.attributes.v } },
-				...node.children as mdast.BlockContent[]
-			);
+			if (index !== undefined) {
+				// Replace this node with the aside component it represents.
+				parent.children[index] = makeComponentNode(
+					YoutubeTagname,
+					{ attributes: { title, video: node.attributes?.v } },
+					...node.children as mdast.BlockContent[]
+				);
+			} else {
+				throw new Error('Youtube directive has no parent');
+			}
 		});
 	};
 

package-lock.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
-    "build": "astro build",
+    "build": "tsc && astro build",
     "cf-build": "./cf-build.sh",
     "test": "vitest",
     "preview": "astro preview",
@@ -15,6 +15,7 @@
     "@actions/core": "^1.11.1",
     "@astrojs/mdx": "^4.2.3",
     "@astrojs/sitemap": "^3.3.0",
+    "@astrojs/ts-plugin": "^1.10.4",
     "@babel/core": "^7.26.10",
     "@types/hast": "^3.0.4",
     "@types/html-escaper": "^3.0.4",
@@ -148,4 +149,4 @@
     "@rollup/rollup-linux-arm64-gnu": "^4.39.0",
     "@rollup/rollup-linux-x64-gnu": "^4.39.0"
   }
-}
+}

package.json

@@ -0,0 +1,4 @@
+declare module '*.astro' {
+	const Component: any;
+	export default Component;
+}

src/@types/astro.d.ts

@@ -11,7 +11,7 @@ export interface Props {
 const { content, canonicalURL } = Astro.props;
 const ogImageUrl = getOgImageUrl(canonicalURL.pathname);
 const imageSrc = ogImageUrl;
-const canonicalImageSrc = new URL(imageSrc, Astro.site);
+const canonicalImageSrc = imageSrc ? new URL(imageSrc, Astro.site) : undefined;
 const imageAlt = imageSrc === ogImageUrl ? '' : "Mergify's logo with text Docs on blue background";
 const siteDescription =
 	'Learn how to use Mergify, the powerful pull request automation tool that helps teams merge code faster and more safely. Automate your entire pull request workflow, from code review to deployment, and save time and frustration.';

src/components/HeadSEO.astro

@@ -54,7 +54,11 @@ const { navGroup, currentPageMatch } = Astro.props as Props;
 			const uuid = this.dataset.uuid;
 			const storedNavState = window.localStorage.getItem('navState');
 			let isOpen = false;
-			if (storedNavState !== null) {
+			if (!uuid) {
+				console.warn('No uuid found for nav-group');
+				return;
+			}
+			if (storedNavState !== null && uuid) {
 				const navState = JSON.parse(storedNavState);
 				isOpen = navState[uuid];
 			}
@@ -65,12 +69,12 @@ const { navGroup, currentPageMatch } = Astro.props as Props;
 			);
 
 			if (isOpen) {
-				navGroupDetails.setAttribute('open', '');
+				navGroupDetails?.setAttribute('open', '');
 			} else {
-				navGroupDetails.removeAttribute('open');
+				navGroupDetails?.removeAttribute('open');
 			}
 
-			navGroupTitle.addEventListener('click', () => {
+			navGroupTitle?.addEventListener('click', () => {
 				const storedNavState = window.localStorage.getItem('navState');
 				let navState = { uuid: true };
 				if (storedNavState !== null) {

src/components/LeftSidebar/NavGroup.astro

@@ -9,7 +9,8 @@ export interface Props {
 const { currentPageMatch, navItem } = Astro.props as Props;
 const isHomepage = navItem.path === '/';
 const isHomepageMatch = isHomepage && currentPageMatch === '';
-const isPageMatch = !isHomepage && currentPageMatch.endsWith(removeLeadingSlash(navItem.path));
+const isPageMatch =
+	!isHomepage && currentPageMatch.endsWith(removeLeadingSlash(navItem.path ?? ''));
 ---
 
 <li class="nav-link">

src/components/LeftSidebar/NavLink.astro

@@ -8,14 +8,14 @@ import './MergeQueueCalculator.scss';
 import Stat from './Stat';
 
 function MergeQueueCalculator() {
-	const [ciTime, setCiTime] = useState(30);
-	const [prPerHour, setPrPerHour] = useState(10);
-	const [ciUsagePct, setCiUsagePct] = useState(100);
-	const [successRatio, setSuccessRatio] = useState(98);
-	const [throughput, setThroughput] = useState(null);
-	const [speculativeChecks, setSpeculativeChecks] = useState(null);
-	const [batchSize, setBatchSize] = useState(null);
-	const [latency, setLatency] = useState(null);
+	const [ciTime, setCiTime] = useState<number>(30);
+	const [prPerHour, setPrPerHour] = useState<number>(10);
+	const [ciUsagePct, setCiUsagePct] = useState<number>(100);
+	const [successRatio, setSuccessRatio] = useState<number>(98);
+	const [throughput, setThroughput] = useState<number | null>(null);
+	const [speculativeChecks, setSpeculativeChecks] = useState<number | null>(null);
+	const [batchSize, setBatchSize] = useState<number | null>(null);
+	const [latency, setLatency] = useState<number | null>(null);
 
 	const calculate = () => {
 		const calculatedBatchSize = Math.ceil(100 / ciUsagePct);

src/components/MergeQueueCalculator/MergeQueueCalculator.tsx

@@ -8,11 +8,11 @@ interface Props {
 
 export default function NumberInput({ label, onChange, value, min, max }: Props) {
 	const handleIncrement = () => {
-		onChange(value + 1 > max ? value : value + 1);
+		onChange(value + 1 > (max ?? Infinity) ? value : value + 1);
 	};
 
 	const handleDecrement = () => {
-		onChange(value - 1 < min ? value : value - 1);
+		onChange(value - 1 < (min ?? -Infinity) ? value : value - 1);
 	};
 
 	return (

src/components/MergeQueueCalculator/NumberInput.tsx

@@ -2,7 +2,7 @@ import { IconType } from 'react-icons';
 
 interface Props {
 	label: string;
-	stat: number;
+	stat: number | null;
 	helperText: string;
 	icon: IconType;
 }
@@ -15,7 +15,7 @@ export default function Stat({ helperText, label, stat, ...props }: Props) {
 				{label}
 			</label>
 			<div style={{ display: 'flex', alignItems: 'flex-end', margin: '8px 0', gap: 12 }}>
-				<h3 style={{ margin: 0 }}>{stat}</h3>
+				<h3 style={{ margin: 0 }}>{stat ?? 0}</h3>
 				<span style={{ color: 'var(--theme-text-light)' }}>{helperText}</span>
 			</div>
 		</div>

src/components/MergeQueueCalculator/Stat.tsx

@@ -98,7 +98,7 @@ const TableOfContents = ({ toc = [], labels, isMobile }: Props) => {
 		if (!isMobile) return;
 		setOpen(false);
 		setCurrentHeading({
-			slug: e.currentTarget.getAttribute('href').replace('#', ''),
+			slug: e.currentTarget.getAttribute('href')?.replace('#', '') ?? '',
 			text: e.currentTarget.textContent || '',
 		});
 	};

src/components/RightSidebar/TableOfContents.tsx

@@ -89,9 +89,9 @@ export default function Preview({
 				)
 				.map((table, index) =>
 					renderMdxTable({
-						data: table?.data?.value,
+						data: table?.data?.value ?? '',
 						node: tables[index].node,
-						content: table?.content?.value,
+						content: table?.content?.value ?? '',
 					})
 				)}
 			{_highlightResult?.headings && (

src/components/Search/PageDetails.tsx

@@ -105,9 +105,9 @@ export default function Results({ results }: ResultsProps) {
 				return newFocused;
 			});
 		} else if (e.key === 'Enter') {
-			const slug = focusedPage.objectID.substring(0, focusedPage.objectID.indexOf('.mdx'));
+			const slug = focusedPage?.objectID.substring(0, focusedPage.objectID.indexOf('.mdx'));
 
-			if (focusedPage) window.location.replace(slug);
+			if (focusedPage) window.location.replace(slug ?? '');
 		}
 	};
 

src/components/Search/Results.tsx

@@ -74,11 +74,11 @@ export default function SearchBar() {
 			}
 		};
 
-		button.addEventListener('click', openModal);
+		button?.addEventListener('click', openModal);
 		window.addEventListener('keypress', openModalKeypress);
 
 		return () => {
-			button.removeEventListener('click', openModal);
+			button?.removeEventListener('click', openModal);
 			window.removeEventListener('keypress', openModalKeypress);
 		};
 	}, []);

src/components/Search/SearchBar.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import jsonpointer from 'jsonpointer';
 import configSchema from '../../../public/mergify-configuration-schema.json';
 import { renderMarkdown } from './utils';
@@ -69,6 +69,9 @@ function getTypeLink(ref: string): string | undefined {
 		const refPath = splitRefPath(ref);
 		const refId = refPath.at(-1);
 
+		if (!refId) {
+			return undefined;
+		}
 		return valueTypeLinks[refId];
 	}
 
@@ -101,11 +104,11 @@ function getTitle(schema: object, ref: OptionDefinitionRef): string {
 	return item?.title || item?.name || '';
 }
 
-export function getValueType(schema: object, definition: any): React.ReactElement {
-	let valueType = null;
+export function getValueType(schema: object, definition: any): React.ReactElement | null {
+	let valueType: ReactElement | null = null;
 	if (definition.type === 'array') {
-		let typeLink: string;
-		let typeDescription: string | React.ReactElement;
+		let typeLink: string | undefined;
+		let typeDescription: string | React.ReactElement | null;
 
 		if ('$ref' in definition.items) {
 			typeLink = getTypeLink(definition.items.$ref);

src/components/Tables/ConfigOptions.tsx

@@ -4,7 +4,7 @@ import { getValueType } from './ConfigOptions';
 import { renderMarkdown } from './utils';
 
 interface Props {
-	staticAttributes: keyof typeof configSchema.$defs.PullRequestAttributes.properties;
+	staticAttributes: typeof configSchema.$defs.PullRequestAttributes.properties;
 }
 
 export default function PullRequestAttributes({ staticAttributes }: Props) {

src/components/Tables/PullRequestAttributes.tsx

@@ -3,6 +3,12 @@ import MainLayout from '../layouts/MainLayout.astro';
 import { Content, getHeadings, frontmatter } from '../content/docs/index.mdx';
 ---
 
-<MainLayout content={frontmatter} headings={getHeadings()}>
+<MainLayout
+	content={{
+		title: frontmatter.title,
+		description: frontmatter.description,
+	}}
+	headings={getHeadings()}
+>
 	<Content />
 </MainLayout>

src/pages/index.astro

@@ -16,7 +16,11 @@ interface TableType {
 	content: string | null;
 }
 
-export function stripHtmlFromkeys(jsonObject: { [s: string]: unknown }): { [s: string]: unknown } {
+type JSONObject = Record<string, unknown>;
+
+export function stripHtmlFromkeys(jsonObject: JSONObject | null): JSONObject {
+	console.log('stripHtmlFromkeys', jsonObject);
+
 	let stripped = {};
 	if (typeof jsonObject === 'string') {
 		return jsonObject;
@@ -25,7 +29,7 @@ export function stripHtmlFromkeys(jsonObject: { [s: string]: unknown }): { [s: s
 	if (Array.isArray(jsonObject)) {
 		stripped = jsonObject.map(stripHtmlFromkeys);
 	} else {
-		Object.entries(jsonObject).forEach(([key, value]) => {
+		Object.entries(jsonObject ?? {}).forEach(([key, value]) => {
 			const strippedKey = key.replace(/<\/?em>/g, '');
 
 			if (Array.isArray(value)) {
@@ -65,7 +69,7 @@ function extractHighlightsFromText(text: string | null): string[] {
 	const highlights: string[] = [];
 
 	const regex = /<em>(.*?)<\/em>/g;
-	let match: RegExpExecArray;
+	let match: RegExpExecArray | null;
 
 	while ((match = regex.exec(text)) !== null) {
 		highlights.push(match[1]);
@@ -130,7 +134,7 @@ export function renderMdxTable(table: TableType) {
 
 		case 'PullRequestAttributesTable': {
 			const attributes =
-				onlyHighlightedOptions as keyof typeof configSchema.$defs.PullRequestAttributes.properties;
+				onlyHighlightedOptions as typeof configSchema.$defs.PullRequestAttributes.properties;
 			return <PullRequestAttributesTable staticAttributes={attributes} />;
 		}