WIP: more eslint rules and fixes. lots more.

.eslintignore

@@ -0,0 +1,16 @@
+node_modules
+.DS_STORE
+.wrangler
+
+/.cache
+/build
+/dist
+/public/build
+/.mf
+.env
+.dev.vars
+.sentryclirc
+public/mockServiceWorker.js
+
+tailwind.config.js 
+remix.config.js

.eslintrc.cjs

@@ -1,8 +1,25 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-	extends: ['@remix-run/eslint-config', '@remix-run/eslint-config/node'],
+	reportUnusedDisableDirectives: true,
+	parser: '@typescript-eslint/parser',
+	parserOptions: {
+		ecmaVersion: 2020,
+		EXPERIMENTAL_useProjectService: true,
+		sourceType: 'module',
+	},
+	plugins: ['@typescript-eslint'],
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:@typescript-eslint/recommended-requiring-type-checking',
+		'plugin:react/jsx-runtime',
+		'plugin:react-hooks/recommended',
+		'plugin:jsx-a11y/recommended',
+		'plugin:deprecation/recommended',
+	],
 	ignorePatterns: ['/public/noise/*'],
 	rules: {
+		'no-mixed-spaces-and-tabs': ['error', 'smart-tabs'],
 		'@typescript-eslint/no-extra-semi': ['off'],
 		'@typescript-eslint/no-unused-vars': [
 			'warn',
@@ -14,4 +31,5 @@ module.exports = {
 			},
 		],
 	},
+	root: true,
 }

app/components/AudioGlow.tsx

@@ -23,7 +23,9 @@ export const AudioGlow: FC<AudioGlowProps> = ({
 				'opacity-[--opacity] transition-opacity',
 				className
 			)}
-			style={{ '--opacity': Math.min(1, audioLevel * 4) } as any}
+			style={
+				{ '--opacity': Math.min(1, audioLevel * 4) } as React.CSSProperties
+			}
 			aria-hidden
 		>
 			{children}

app/components/AudioIndicator.tsx

@@ -17,7 +17,7 @@ export const AudioIndicator: FC<AudioIndicatorProps> = ({ audioTrack }) => {
 				style={
 					{
 						'--scale': Math.max(minSize, audioLevel + scaleModifier),
-					} as any
+					} as React.CSSProperties
 				}
 			></div>
 			<div
@@ -27,7 +27,7 @@ export const AudioIndicator: FC<AudioIndicatorProps> = ({ audioTrack }) => {
 				style={
 					{
 						'--scale': Math.max(minSize, audioLevel + scaleModifier),
-					} as any
+					} as React.CSSProperties
 				}
 			></div>
 		</div>

app/components/AudioInputSelector.tsx

@@ -29,6 +29,7 @@ export const AudioInputSelector: FC<{ id?: string }> = ({ id }) => {
 
 	return (
 		<div className="max-w-[40ch]">
+			{/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
 			<Select id={id} value={audioDeviceId} onValueChange={setAudioDeviceId}>
 				{audioInputDevices.map((d) => (
 					<Option key={d.deviceId} value={d.deviceId}>

app/components/AudioStream.tsx

@@ -32,12 +32,19 @@ export const AudioStream: FC<AudioStreamProps> = ({
 		// need to set srcObject again in Chrome and call play() again for Safari
 		// https://www.youtube.com/live/Tkx3OGrwVk8?si=K--P_AzNnAGrjraV&t=2533
 		// calling play() this way to make Chrome happy otherwise it throws an error
-		audio.addEventListener('canplay', () => audio.play(), { once: true })
+		audio.addEventListener(
+			'canplay',
+			() => {
+				audio.play().catch(console.error)
+			},
+			{ once: true }
+		)
 		audio.srcObject = mediaStream
 	}
 
 	return (
 		<>
+			{/* eslint-disable-next-line jsx-a11y/media-has-caption */}
 			<audio ref={ref} autoPlay />
 			{tracksToPull.map((track) => (
 				<AudioTrack
@@ -98,7 +105,7 @@ function AudioTrack({
 			mediaStream.removeTrack(audioTrack)
 			onTrackRemovedRef.current(track, audioTrack)
 		}
-	}, [audioTrack])
+	}, [audioTrack, mediaStream, track])
 
 	return null
 }

app/components/Button.tsx

@@ -26,7 +26,7 @@ const displayTypeMap = {
 	],
 }
 
-export type ButtonProps = Omit<JSX.IntrinsicElements['button'], 'ref'> & {
+export type ButtonProps = Omit<React.JSX.IntrinsicElements['button'], 'ref'> & {
 	displayType?: keyof typeof displayTypeMap
 }
 
@@ -59,7 +59,6 @@ export const ButtonLink = forwardRef<
 		displayType?: keyof typeof displayTypeMap
 	}
 >(({ className, displayType = 'primary', ...rest }, ref) => (
-	// eslint-disable-next-line jsx-a11y/anchor-has-content
 	<Link
 		className={cn(
 			'inline-block',

app/components/CopyButton.tsx

@@ -26,9 +26,15 @@ export const CopyButton: FC<CopyButtonProps> = () => {
 			<Button
 				displayType="secondary"
 				onClick={() => {
-					navigator.clipboard.writeText(roomUrl)
-					setCopied(true)
-					reset()
+					navigator.clipboard.writeText(roomUrl).then(
+						() => {
+							setCopied(true)
+							reset()
+						},
+						(err) => {
+							console.error('Failed to copy to clipboard', err)
+						}
+					)
 				}}
 			>
 				<Icon

app/components/EnsurePermissions.tsx

@@ -10,7 +10,7 @@ type PermissionState = 'denied' | 'granted' | 'prompt' | 'unable-to-determine'
 async function getExistingPermissionState(): Promise<PermissionState> {
 	try {
 		const query = await navigator.permissions.query({
-			name: 'microphone' as any,
+			name: 'microphone' as PermissionName,
 		})
 		return query.state
 	} catch (error) {
@@ -27,7 +27,7 @@ export function EnsurePermissions(props: EnsurePermissionsProps) {
 	useEffect(() => {
 		getExistingPermissionState().then((result) => {
 			if (mountedRef.current) setPermissionState(result)
-		})
+		}, console.error)
 		return () => {
 			mountedRef.current = false
 		}

app/components/HoverFade.tsx

@@ -17,7 +17,7 @@ export const HoverFade: FC<HoverFadeProps> = ({
 	const [visible, setVisible] = useState(false)
 
 	useEffect(() => {
-		let mounted = true
+		const mounted = true
 		if (visible) {
 			const t = setTimeout(() => {
 				if (mounted) setVisible(false)

app/components/Icon/Icon.tsx

@@ -65,7 +65,7 @@ interface IconProps {
 }
 
 export const Icon: FC<
-	IconProps & Omit<JSX.IntrinsicElements['svg'], 'ref'>
+	IconProps & Omit<React.JSX.IntrinsicElements['svg'], 'ref'>
 > = ({ type, className, ...rest }) => {
 	const Component = iconMap[type]
 	return <Component className={cn('h-[1em]', className)} {...rest} />

app/components/Icon/custom/MicrophoneSlashIcon.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react'
 
-export const MicrophoneSlashIcon: FC<JSX.IntrinsicElements['svg']> = (
+export const MicrophoneSlashIcon: FC<React.JSX.IntrinsicElements['svg']> = (
 	props
 ) => {
 	return (

app/components/Input.tsx

@@ -3,7 +3,7 @@ import { cn } from '~/utils/style'
 
 export const Input = forwardRef<
 	HTMLInputElement,
-	JSX.IntrinsicElements['input']
+	React.JSX.IntrinsicElements['input']
 >(({ className, ...rest }, ref) => (
 	<input
 		className={cn(

app/components/Participant.tsx

@@ -19,7 +19,7 @@ import { VideoSrcObject } from './VideoSrcObject'
 
 export const Participant = forwardRef<
 	HTMLDivElement,
-	JSX.IntrinsicElements['div'] & {
+	React.JSX.IntrinsicElements['div'] & {
 		flipId: string
 		isScreenShare?: boolean
 		user: User

app/components/ReportBugDialog.tsx

@@ -32,7 +32,7 @@ export const ReportBugDialog: FC<ReportBugDialogProps> = ({ onOpenChange }) => {
 	)
 }
 
-const ReportBugForm: FC<{}> = () => {
+const ReportBugForm: FC = () => {
 	const { Form, data, state } = useFetcher()
 	const { room, roomHistory } = useRoomContext()
 	const { roomName } = useParams()

app/components/TextArea.tsx

@@ -3,7 +3,7 @@ import { cn } from '~/utils/style'
 
 export const TextArea = forwardRef<
 	HTMLTextAreaElement,
-	JSX.IntrinsicElements['textarea']
+	React.JSX.IntrinsicElements['textarea']
 >(({ className, ...rest }, ref) => (
 	<textarea
 		ref={ref}

app/components/VideoInputSelector.tsx

@@ -47,7 +47,13 @@ export const VideoInputSelector: FC<{ id?: string }> = ({ id }) => {
 
 	return (
 		<div className="max-w-[40ch]">
-			<Select value={shownDeviceId} onValueChange={setVideoDeviceId} id={id}>
+			<Select
+				value={shownDeviceId}
+				onValueChange={(id) => {
+					setVideoDeviceId(id).catch(console.error)
+				}}
+				id={id}
+			>
 				{videoInputDevices.map((d) => (
 					<Option key={d.deviceId} value={d.deviceId}>
 						{d.label}

app/components/VideoSrcObject.tsx

@@ -2,7 +2,7 @@ import { forwardRef, useEffect, useRef } from 'react'
 import { cn } from '~/utils/style'
 
 export type VideoSrcObjectProps = Omit<
-	JSX.IntrinsicElements['video'],
+	React.JSX.IntrinsicElements['video'],
 	'ref'
 > & {
 	videoTrack?: MediaStreamTrack
@@ -29,6 +29,7 @@ export const VideoSrcObject = forwardRef<HTMLVideoElement, VideoSrcObjectProps>(
 		}, [videoTrack])
 
 		return (
+			// eslint-disable-next-line jsx-a11y/media-has-caption
 			<video
 				className={cn('bg-zinc-700', className)}
 				ref={(v) => {

app/durableObjects/ChatRoom.server.ts

@@ -34,9 +34,11 @@ export class ChatRoom extends Server<Env> {
 			)
 		)
 
-		if (!this.ctx.storage.getAlarm()) {
+		if (!(await this.ctx.storage.getAlarm())) {
 			// start the alarm to broadcast state every 30 seconds
-			this.ctx.storage.setAlarm(30000)
+			this.ctx.storage.setAlarm(Date.now() + 30000).catch(() => {
+				console.warn('Failed to set alarm')
+			})
 		}
 
 		// cleaning out storage used by older versions of this code
@@ -86,17 +88,14 @@ export class ChatRoom extends Server<Env> {
 		)
 	}
 
-	async onMessage(
-		connection: Connection<User>,
-		message: WSMessage
-	): Promise<void> {
+	onMessage(connection: Connection<User>, message: WSMessage): void {
 		try {
 			if (typeof message !== 'string') {
 				console.warn('Received non-string message')
 				return
 			}
 
-			let data: ClientMessage = JSON.parse(message)
+			const data = JSON.parse(message) as ClientMessage
 
 			switch (data.type) {
 				case 'userLeft':
@@ -106,7 +105,7 @@ export class ChatRoom extends Server<Env> {
 					connection.setState(data.user)
 					this.broadcastState()
 					break
-				case 'directMessage':
+				case 'directMessage': {
 					const { to, message } = data
 
 					for (const otherConnection of this.getConnections<User>()) {
@@ -123,7 +122,7 @@ export class ChatRoom extends Server<Env> {
 						`User with id "${to}" not found, cannot send DM from "${connection.state!.name}"`
 					)
 					break
-
+				}
 				case 'muteUser':
 					{
 						let mutedUser = false
@@ -187,6 +186,8 @@ export class ChatRoom extends Server<Env> {
 		// technically we don't need to broadcast state on an alarm,
 		// but let's keep it for a while and see if it's useful
 		this.broadcastState()
-		this.ctx.storage.setAlarm(30000)
+		this.ctx.storage.setAlarm(Date.now() + 30000).catch(() => {
+			console.warn('Failed to set alarm')
+		})
 	}
 }

app/entry.server.tsx

@@ -10,7 +10,7 @@ export default function handleRequest(
 	remixContext: EntryContext
 ) {
 	try {
-		let markup = renderToString(
+		const markup = renderToString(
 			<RemixServer context={remixContext} url={request.url} />
 		).replace(
 			'__CLIENT_ENV__',

app/hooks/useBroadcastStatus.ts

@@ -52,6 +52,7 @@ export default function useBroadcastStatus({
 				},
 			}
 
+			// eslint-disable-next-line no-inner-declarations
 			function sendUserUpdate() {
 				websocket.send(
 					JSON.stringify({

app/hooks/useConditionForAtLeast.ts

@@ -4,7 +4,7 @@ export function useConditionForAtLeast(condition: boolean, time: number) {
 	const [value, setValue] = useState(condition)
 
 	useEffect(() => {
-		let timeout = window.setTimeout(() => {
+		const timeout = window.setTimeout(() => {
 			setValue(condition)
 		}, time)
 		return () => {

app/hooks/useDeadPulledTrackMonitor.tsx

@@ -37,7 +37,7 @@ export function useDeadPulledTrackMonitor(
 			// reset this to -1 for the check above
 			timeoutRef.current = -1
 		}
-	}, [deadTrack, enabled, feedbackEnabled, peer, track])
+	}, [deadTrack, enabled, feedbackEnabled, peer, peerConnection, track])
 
 	useEffect(() => {
 		if (!sessionId || !deadTrack || !feedbackEnabled) return
@@ -56,7 +56,7 @@ export function useDeadPulledTrackMonitor(
 			fetch('/api/deadTrack', {
 				method: 'POST',
 				body: JSON.stringify(info),
-			})
+			}).catch(console.error)
 		}
 	}, [
 		deadTrack,
@@ -65,7 +65,6 @@ export function useDeadPulledTrackMonitor(
 		name,
 		sessionId,
 		room.identity?.name,
-		sessionId,
 		traceLink,
 		trackInfo,
 	])

app/hooks/useIsSpeaking.tsx

@@ -14,7 +14,7 @@ export default function useIsSpeaking(mediaStreamTrack?: MediaStreamTrack) {
 	useEffect(() => {
 		isSpeakingRef.current = isSpeaking
 		const interval = window.setInterval(() => {
-			// state is already in sync — do nothing
+			// state is already in sync — do nothing
 			if (isSpeaking === isSpeakingRef.current) {
 				return
 			}

app/hooks/useRoom.ts

@@ -18,7 +18,7 @@ export default function useRoom({
 		party: 'rooms',
 		room: roomName,
 		onMessage: (e) => {
-			const message = JSON.parse(e.data) as ServerMessage
+			const message = JSON.parse(e.data as string) as ServerMessage
 			switch (message.type) {
 				case 'roomState':
 					// prevent updating state if nothing has changed