refactor: use eslint-config-neon for packages. (#8579)

Co-authored-by: Noel <buechler.noel@outlook.com>

packages/website/src/components/CodeListing.tsx

@@ -37,15 +37,15 @@ export function CodeListing({
 	deprecation,
 	inheritanceData,
 }: PropsWithChildren<{
-	name: string;
-	separator?: CodeListingSeparatorType;
-	typeTokens: TokenDocumentation[];
-	readonly?: boolean;
-	optional?: boolean;
-	summary?: ApiItemJSON['summary'];
 	comment?: AnyDocNodeJSON | null;
 	deprecation?: AnyDocNodeJSON | null;
 	inheritanceData?: InheritanceData | null;
+	name: string;
+	optional?: boolean;
+	readonly?: boolean;
+	separator?: CodeListingSeparatorType;
+	summary?: ApiItemJSON['summary'];
+	typeTokens: TokenDocumentation[];
 }>) {
 	const { classes } = useStyles();
 	const matches = useMediaQuery('(max-width: 768px)');

packages/website/src/components/DocContainer.tsx

@@ -2,7 +2,6 @@ import type {
 	ApiItemJSON,
 	TokenDocumentation,
 	TypeParameterData,
-	AnyDocNodeJSON,
 	ApiClassJSON,
 	ApiInterfaceJSON,
 } from '@discordjs/api-extractor-utils';
@@ -40,16 +39,15 @@ import { TypeParamTable } from './TypeParamTable';
 import { TSDoc } from './tsdoc/TSDoc';
 
 type DocContainerProps = PropsWithChildren<{
-	name: string;
-	kind: string;
 	excerpt: string;
-	summary?: ApiItemJSON['summary'];
 	extendsTokens?: TokenDocumentation[] | null;
 	implementsTokens?: TokenDocumentation[][];
-	typeParams?: TypeParameterData[];
-	comment?: AnyDocNodeJSON | null;
+	kind: string;
 	methods?: ApiClassJSON['methods'] | ApiInterfaceJSON['methods'] | null;
+	name: string;
 	properties?: ApiClassJSON['properties'] | ApiInterfaceJSON['properties'] | null;
+	summary?: ApiItemJSON['summary'];
+	typeParams?: TypeParameterData[];
 }>;
 
 function generateIcon(kind: string) {
@@ -161,7 +159,7 @@ export function DocContainer({
 				<MediaQuery smallerThan="lg" styles={{ display: 'none' }}>
 					<Aside hiddenBreakpoint="lg" width={{ lg: 250 }} withBorder>
 						<ScrollArea p="sm" offsetScrollbars>
-							<TableOfContentItems properties={properties ?? []} methods={methods ?? []}></TableOfContentItems>
+							<TableOfContentItems properties={properties ?? []} methods={methods ?? []} />
 						</ScrollArea>
 					</Aside>
 				</MediaQuery>

packages/website/src/components/HyperlinkedText.tsx

@@ -2,13 +2,6 @@ import type { TokenDocumentation } from '@discordjs/api-extractor-utils';
 import { Anchor, Text } from '@mantine/core';
 import Link from 'next/link';
 
-/**
- * Constructs a hyperlinked html node based on token type references
- *
- * @param tokens An array of documentation tokens to construct the HTML
- *
- * @returns An array of JSX elements and string comprising the hyperlinked text
- */
 export function HyperlinkedText({ tokens }: { tokens: TokenDocumentation[] }) {
 	return (
 		<>

packages/website/src/components/Section.tsx

@@ -40,11 +40,11 @@ export function Section({
 	defaultClosed = false,
 	children,
 }: PropsWithChildren<{
-	title: string;
+	defaultClosed?: boolean;
+	dense?: boolean;
 	icon?: JSX.Element;
 	padded?: boolean;
-	dense?: boolean;
-	defaultClosed?: boolean;
+	title: string;
 }>) {
 	const [opened, setOpened] = useState(!defaultClosed);
 	const { colorScheme } = useMantineColorScheme();
@@ -57,7 +57,7 @@ export function Section({
 
 	return (
 		<Box sx={{ wordBreak: 'break-all' }}>
-			<UnstyledButton className={classes.control} onClick={() => setOpened((o) => !o)}>
+			<UnstyledButton className={classes.control} onClick={() => setOpened((isOpen) => !isOpen)}>
 				<Group position="apart">
 					<Group>
 						{icon ? (

packages/website/src/components/SidebarItems.tsx

@@ -61,7 +61,7 @@ function resolveIcon(item: keyof GroupedMembers) {
 			return <VscSymbolField size={20} />;
 		case 'Variables':
 			return <VscSymbolVariable size={20} />;
-		case 'Functions':
+		default:
 			return <VscSymbolMethod size={20} />;
 	}
 }
@@ -115,12 +115,12 @@ export function SidebarItems({
 				.filter((group) => groupItems[group].length)
 				.map((group, idx) => (
 					<Section key={idx} title={group} icon={resolveIcon(group)}>
-						{groupItems[group].map((member, i) => (
-							<Link key={i} href={member.path} passHref prefetch={false}>
+						{groupItems[group].map((member, index) => (
+							<Link key={index} href={member.path} passHref prefetch={false}>
 								<NavLink
 									className={classes.link}
 									component="a"
-									onClick={() => setOpened((o) => !o)}
+									onClick={() => setOpened((isOpened) => !isOpened)}
 									label={
 										<Group>
 											<Text sx={{ textOverflow: 'ellipsis', overflow: 'hidden' }} className="line-clamp-1">
@@ -135,7 +135,7 @@ export function SidebarItems({
 									}
 									active={asPathWithoutQueryAndAnchor === member.path}
 									variant="filled"
-								></NavLink>
+								/>
 							</Link>
 						))}
 					</Section>

packages/website/src/components/SidebarLayout.tsx

@@ -25,10 +25,10 @@ import {
 	Title,
 } from '@mantine/core';
 import { NextLink } from '@mantine/next';
-import type { MDXRemoteSerializeResult } from 'next-mdx-remote';
 import Image from 'next/future/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
+import type { MDXRemoteSerializeResult } from 'next-mdx-remote';
 import { type PropsWithChildren, useState, useEffect, useMemo } from 'react';
 import { VscChevronDown, VscGithubInverted, VscPackage, VscVersions } from 'react-icons/vsc';
 import { WiDaySunny, WiNightClear } from 'react-icons/wi';
@@ -37,16 +37,19 @@ import { SidebarItems } from './SidebarItems';
 import type { findMember } from '~/util/model.server';
 import { PACKAGES } from '~/util/packages';
 
-const fetcher = (url: string) => fetch(url).then((res) => res.json());
+const fetcher = async (url: string) => {
+	const res = await fetch(url);
+	return res.json();
+};
 
 export interface SidebarLayoutProps {
-	packageName: string;
 	branchName: string;
 	data: {
-		members: ReturnType<typeof getMembers>;
 		member: ReturnType<typeof findMember>;
+		members: ReturnType<typeof getMembers>;
 		source: MDXRemoteSerializeResult;
 	};
+	packageName: string;
 
 	selectedMember?: ApiItemJSON | undefined;
 }
@@ -55,8 +58,8 @@ export type Members = SidebarLayoutProps['data']['members'];
 
 export interface GroupedMembers {
 	Classes: Members;
-	Functions: Members;
 	Enums: Members;
+	Functions: Members;
 	Interfaces: Members;
 	Types: Members;
 	Variables: Members;
@@ -158,6 +161,7 @@ export function SidebarLayout({
 		fetcher,
 	);
 	const theme = useMantineTheme();
+	// eslint-disable-next-line @typescript-eslint/unbound-method
 	const { colorScheme, toggleColorScheme } = useMantineColorScheme();
 
 	const [opened, setOpened] = useState(false);
@@ -188,7 +192,7 @@ export function SidebarLayout({
 					{item}
 				</Menu.Item>
 			)) ?? [],
-		[versions],
+		[versions, packageName],
 	);
 
 	const breadcrumbs = useMemo(
@@ -302,7 +306,7 @@ export function SidebarLayout({
 							<MediaQuery largerThan="md" styles={{ display: 'none' }}>
 								<Burger
 									opened={opened}
-									onClick={() => (router.isFallback ? null : setOpened((o) => !o))}
+									onClick={() => (router.isFallback ? null : setOpened((isOpened) => !isOpened))}
 									size="sm"
 									color={theme.colors.gray![6]}
 									mr="xl"
@@ -346,7 +350,7 @@ export function SidebarLayout({
 				<Box className={classes.content} p="lg" pb={80}>
 					{children}
 				</Box>
-				<Box sx={(theme) => ({ height: 200, [theme.fn.smallerThan('sm')]: { height: 300 } })}></Box>
+				<Box sx={(theme) => ({ height: 200, [theme.fn.smallerThan('sm')]: { height: 300 } })} />
 				<Box
 					component="footer"
 					sx={{ paddingRight: data?.member?.kind !== 'Class' && data?.member?.kind !== 'Interface' ? 54 : 324 }}

packages/website/src/components/Table.tsx

@@ -6,8 +6,8 @@ export function Table({
 	columns,
 	columnStyles,
 }: {
-	columns: string[];
 	columnStyles?: Record<string, string>;
+	columns: string[];
 	rows: Record<string, ReactNode>[];
 }) {
 	return (

packages/website/src/components/TableOfContentItems.tsx

@@ -48,6 +48,7 @@ export function TableOfContentItems({
 					</Group>
 				</Box>
 			)),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[properties, colorScheme],
 	);
 
@@ -73,7 +74,7 @@ export function TableOfContentItems({
 					</Box>
 				);
 			}),
-		[methods, colorScheme],
+		[methods, classes.link],
 	);
 
 	return (

packages/website/src/components/model/Class.tsx

@@ -16,7 +16,6 @@ export function Class({ data }: { data: ApiClassJSON }) {
 			typeParams={data.typeParameters}
 			extendsTokens={data.extendsTokens}
 			implementsTokens={data.implementsTokens}
-			comment={data.comment}
 			methods={data.methods}
 			properties={data.properties}
 		>

packages/website/src/components/tsdoc/BlockComment.tsx

@@ -40,8 +40,8 @@ export function BlockComment({
 	tagName,
 	index,
 }: PropsWithChildren<{
-	tagName: string;
 	index?: number | undefined;
+	tagName: string;
 }>): JSX.Element {
 	switch (tagName.toUpperCase()) {
 		case StandardTags.example.tagNameWithUpperCase:

packages/website/src/components/tsdoc/TSDoc.tsx

@@ -63,6 +63,7 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
 
 					return null;
 				}
+
 				case DocNodeKind.CodeSpan: {
 					const { code } = node as DocFencedCodeJSON;
 					return (
@@ -71,6 +72,7 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
 						</Code>
 					);
 				}
+
 				case DocNodeKind.FencedCode: {
 					const { language, code } = node as DocFencedCodeJSON;
 					return (
@@ -86,6 +88,7 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
 						</SyntaxHighlighter>
 					);
 				}
+
 				case DocNodeKind.ParamBlock:
 				case DocNodeKind.Block: {
 					const { tag } = node as DocBlockJSON;
@@ -102,6 +105,7 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
 						</BlockComment>
 					);
 				}
+
 				case DocNodeKind.Comment: {
 					const comment = node as DocCommentJSON;
 					// Cheat a bit by finding out how many comments we have beforehand...
@@ -111,6 +115,7 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
 
 					return <Box key={idx}>{comment.customBlocks.map((node, idx) => createNode(node, idx))}</Box>;
 				}
+
 				default:
 					console.log(`Captured unknown node kind: ${node.kind}`);
 					break;

packages/website/src/contexts/member.tsx

@@ -3,7 +3,7 @@ import { createContext, useContext, type ReactNode } from 'react';
 
 export const MemberContext = createContext<ApiItemJSON | undefined>(undefined);
 
-export const MemberProvider = ({ member, children }: { member: ApiItemJSON | undefined; children: ReactNode }) => (
+export const MemberProvider = ({ member, children }: { children: ReactNode; member: ApiItemJSON | undefined }) => (
 	<MemberContext.Provider value={member}>{children}</MemberContext.Provider>
 );
 

packages/website/src/middleware.ts

@@ -1,5 +1,4 @@
-import { NextResponse } from 'next/server';
-import type { NextRequest } from 'next/server';
+import { NextResponse, type NextRequest } from 'next/server';
 
 export default function middleware(request: NextRequest) {
 	return NextResponse.redirect(new URL('/docs/packages', request.url));

packages/website/src/pages/_app.tsx

@@ -5,7 +5,7 @@ import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import { type NextRouter, useRouter } from 'next/router';
 import { VscPackage } from 'react-icons/vsc';
-import { RouterTransition } from '~/components/RouterTransition';
+import { RouterTransition } from '../components/RouterTransition';
 import '../styles/unocss.css';
 import '../styles/main.css';
 

packages/website/src/pages/docs/[...slug].tsx

@@ -1,6 +1,6 @@
 import { readFile } from 'node:fs/promises';
 import { join } from 'node:path';
-import { cwd } from 'node:process';
+import process, { cwd } from 'node:process';
 import {
 	findPackage,
 	getMembers,
@@ -15,11 +15,11 @@ import {
 import { ActionIcon, Affix, Box, LoadingOverlay, Transition } from '@mantine/core';
 import { useMediaQuery, useWindowScroll } from '@mantine/hooks';
 import { ApiFunction, ApiItemKind, type ApiPackage } from '@microsoft/api-extractor-model';
-import { MDXRemote } from 'next-mdx-remote';
-import { serialize } from 'next-mdx-remote/serialize';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import type { GetStaticPaths, GetStaticProps } from 'next/types';
+import { MDXRemote } from 'next-mdx-remote';
+import { serialize } from 'next-mdx-remote/serialize';
 import { VscChevronUp } from 'react-icons/vsc';
 import rehypeIgnore from 'rehype-ignore';
 import rehypePrettyCode from 'rehype-pretty-code';
@@ -46,7 +46,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
 					let data: any[] = [];
 					let versions: string[] = [];
 					if (process.env.NEXT_PUBLIC_LOCAL_DEV) {
-						const res = await readFile(join(cwd(), '..', packageName, 'docs', 'docs.api.json'), 'utf-8');
+						const res = await readFile(join(cwd(), '..', packageName, 'docs', 'docs.api.json'), 'utf8');
 						// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 						data = JSON.parse(res);
 					} else {
@@ -62,35 +62,33 @@ export const getStaticPaths: GetStaticPaths = async () => {
 					}
 
 					if (Array.isArray(data)) {
-						const models = data.map((d) => createApiModel(d));
+						const models = data.map((innerData) => createApiModel(innerData));
 						const pkgs = models.map((model) => findPackage(model, packageName)) as ApiPackage[];
 
 						return [
 							...versions.map((version) => ({ params: { slug: ['packages', packageName, version] } })),
-							...pkgs
-								.map((pkg, idx) =>
-									getMembers(pkg, versions[idx]!).map((member) => {
-										if (member.kind === ApiItemKind.Function && member.overloadIndex && member.overloadIndex > 1) {
-											return {
-												params: {
-													slug: [
-														'packages',
-														packageName,
-														versions[idx]!,
-														`${member.name}:${member.overloadIndex}:${member.kind}`,
-													],
-												},
-											};
-										}
-
+							...pkgs.flatMap((pkg, idx) =>
+								getMembers(pkg, versions[idx]!).map((member) => {
+									if (member.kind === ApiItemKind.Function && member.overloadIndex && member.overloadIndex > 1) {
 										return {
 											params: {
-												slug: ['packages', packageName, versions[idx]!, `${member.name}:${member.kind}`],
+												slug: [
+													'packages',
+													packageName,
+													versions[idx]!,
+													`${member.name}:${member.overloadIndex}:${member.kind}`,
+												],
 											},
 										};
-									}),
-								)
-								.flat(),
+									}
+
+									return {
+										params: {
+											slug: ['packages', packageName, versions[idx]!, `${member.name}:${member.kind}`],
+										},
+									};
+								}),
+							),
 						];
 					}
 
@@ -130,7 +128,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
 	const [memberName, overloadIndex] = member?.split(':') ?? [];
 
 	try {
-		const readme = await readFile(join(cwd(), '..', packageName, 'README.md'), 'utf-8');
+		const readme = await readFile(join(cwd(), '..', packageName, 'README.md'), 'utf8');
 
 		const mdxSource = await serialize(readme, {
 			mdxOptions: {
@@ -143,7 +141,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
 
 		let data;
 		if (process.env.NEXT_PUBLIC_LOCAL_DEV) {
-			const res = await readFile(join(cwd(), '..', packageName, 'docs', 'docs.api.json'), 'utf-8');
+			const res = await readFile(join(cwd(), '..', packageName, 'docs', 'docs.api.json'), 'utf8');
 			// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 			data = JSON.parse(res);
 		} else {
@@ -155,9 +153,10 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
 		const model = createApiModel(data);
 		const pkg = findPackage(model, packageName);
 
+		// eslint-disable-next-line prefer-const
 		let { containerKey, name } = findMember(model, packageName, memberName, branchName) ?? {};
-		if (name && overloadIndex && !Number.isNaN(parseInt(overloadIndex, 10))) {
-			containerKey = ApiFunction.getContainerKey(name, parseInt(overloadIndex, 10));
+		if (name && overloadIndex && !Number.isNaN(Number.parseInt(overloadIndex, 10))) {
+			containerKey = ApiFunction.getContainerKey(name, Number.parseInt(overloadIndex, 10));
 		}
 
 		return {
@@ -171,17 +170,17 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
 					source: mdxSource,
 				},
 			},
-			revalidate: 3600,
+			revalidate: 3_600,
 		};
-	} catch (e) {
-		const error = e as Error;
+	} catch (error_) {
+		const error = error_ as Error;
 		console.error(error);
 
 		return {
 			props: {
-				error: e,
+				error: error_,
 			},
-			revalidate: 3600,
+			revalidate: 3_600,
 		};
 	}
 };

packages/website/src/pages/docs/packages/[package]/index.tsx

@@ -18,10 +18,10 @@ import { VscArrowLeft, VscArrowRight, VscVersions } from 'react-icons/vsc';
 import { PACKAGES } from '~/util/packages';
 
 interface VersionProps {
-	packageName: string;
 	data: {
 		versions: string[];
 	};
+	packageName: string;
 }
 
 export const getStaticPaths: GetStaticPaths = () => {
@@ -48,7 +48,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
 				props: {
 					error: 'No tags',
 				},
-				revalidate: 3600,
+				revalidate: 3_600,
 			};
 		}
 
@@ -59,17 +59,17 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
 					versions: data,
 				},
 			},
-			revalidate: 3600,
+			revalidate: 3_600,
 		};
-	} catch (e) {
-		const error = e as Error;
+	} catch (error_) {
+		const error = error_ as Error;
 		console.error(error);
 
 		return {
 			props: {
-				error: e,
+				error: error_,
 			},
-			revalidate: 3600,
+			revalidate: 3_600,
 		};
 	}
 };