A few tweaks on proposed changes

.eslintrc.cjs

@@ -30,6 +30,14 @@ module.exports = {
 				argsIgnorePattern: '^_',
 			},
 		],
+		'@typescript-eslint/no-misused-promises': [
+			'error',
+			{
+				checksConditionals: true,
+				checksVoidReturn: false,
+				checksSpreads: true,
+			},
+		],
 	},
 	root: true,
 }

app/components/AudioInputSelector.tsx

@@ -29,7 +29,6 @@ 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/Button.tsx

@@ -1,6 +1,6 @@
 import type { LinkProps } from '@remix-run/react'
 import { Link } from '@remix-run/react'
-import { forwardRef } from 'react'
+import { forwardRef, type ComponentProps } from 'react'
 import { cn } from '~/utils/style'
 
 const displayTypeMap = {
@@ -26,7 +26,7 @@ const displayTypeMap = {
 	],
 }
 
-export type ButtonProps = Omit<React.JSX.IntrinsicElements['button'], 'ref'> & {
+export type ButtonProps = ComponentProps<'button'> & {
 	displayType?: keyof typeof displayTypeMap
 }
 

app/components/Icon/Icon.tsx

@@ -26,7 +26,7 @@ import {
 	WifiIcon,
 	XCircleIcon,
 } from '@heroicons/react/20/solid'
-import type { FC } from 'react'
+import type { ComponentProps, FC } from 'react'
 import { cn } from '~/utils/style'
 import { MicrophoneSlashIcon } from './custom/MicrophoneSlashIcon'
 
@@ -64,9 +64,11 @@ interface IconProps {
 	type: keyof typeof iconMap
 }
 
-export const Icon: FC<
-	IconProps & Omit<React.JSX.IntrinsicElements['svg'], 'ref'>
-> = ({ type, className, ...rest }) => {
+export const Icon: FC<IconProps & ComponentProps<'svg'>> = ({
+	type,
+	className,
+	...rest
+}) => {
 	const Component = iconMap[type]
 	return <Component className={cn('h-[1em]', className)} {...rest} />
 }

app/components/Icon/custom/MicrophoneSlashIcon.tsx

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

app/components/Input.tsx

@@ -1,27 +1,26 @@
-import { forwardRef } from 'react'
+import { forwardRef, type ComponentProps } from 'react'
 import { cn } from '~/utils/style'
 
-export const Input = forwardRef<
-	HTMLInputElement,
-	React.JSX.IntrinsicElements['input']
->(({ className, ...rest }, ref) => (
-	<input
-		className={cn(
-			'w-full',
-			'rounded',
-			'border-2',
-			'border-zinc-500',
-			'text-zinc-900',
-			'dark:text-zinc-50',
-			'bg-zinc-50',
-			'dark:bg-zinc-700',
-			'px-2',
-			'py-1',
-			className
-		)}
-		{...rest}
-		ref={ref}
-	/>
-))
+export const Input = forwardRef<HTMLInputElement, ComponentProps<'input'>>(
+	({ className, ...rest }, ref) => (
+		<input
+			className={cn(
+				'w-full',
+				'rounded',
+				'border-2',
+				'border-zinc-500',
+				'text-zinc-900',
+				'dark:text-zinc-50',
+				'bg-zinc-50',
+				'dark:bg-zinc-700',
+				'px-2',
+				'py-1',
+				className
+			)}
+			{...rest}
+			ref={ref}
+		/>
+	)
+)
 
 Input.displayName = 'Input'

app/components/Participant.tsx

@@ -1,5 +1,5 @@
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
-import { forwardRef, useEffect } from 'react'
+import { forwardRef, useEffect, type ComponentProps } from 'react'
 import { Flipped } from 'react-flip-toolkit'
 import { useDeadPulledTrackMonitor } from '~/hooks/useDeadPulledTrackMonitor'
 import { useRoomContext } from '~/hooks/useRoomContext'
@@ -19,7 +19,7 @@ import { VideoSrcObject } from './VideoSrcObject'
 
 export const Participant = forwardRef<
 	HTMLDivElement,
-	React.JSX.IntrinsicElements['div'] & {
+	ComponentProps<'div'> & {
 		flipId: string
 		isScreenShare?: boolean
 		user: User

app/components/TextArea.tsx

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

app/components/VideoSrcObject.tsx

@@ -1,10 +1,7 @@
-import { forwardRef, useEffect, useRef } from 'react'
+import { forwardRef, useEffect, useRef, type ComponentProps } from 'react'
 import { cn } from '~/utils/style'
 
-export type VideoSrcObjectProps = Omit<
-	React.JSX.IntrinsicElements['video'],
-	'ref'
-> & {
+export type VideoSrcObjectProps = ComponentProps<'video'> & {
 	videoTrack?: MediaStreamTrack
 }
 

app/hooks/useBroadcastStatus.ts

@@ -52,8 +52,7 @@ export default function useBroadcastStatus({
 				},
 			}
 
-			// eslint-disable-next-line no-inner-declarations
-			function sendUserUpdate() {
+			const sendUserUpdate = () => {
 				websocket.send(
 					JSON.stringify({
 						type: 'userUpdate',

app/utils/blurVideoTrack.ts

@@ -62,7 +62,6 @@ export default async function blurVideoTrack(
 	let t = -1
 	async function tick() {
 		await drawBlur()
-		// eslint-disable-next-line @typescript-eslint/no-misused-promises
 		t = window.setTimeout(tick, 1000 / 30) // 30fps
 	}
 

app/utils/rxjs/getUserMediaTrack$.ts

@@ -81,7 +81,6 @@ function acquireTrack(
 				const cleanup = () => {
 					console.log('🛑 Stopping track')
 					track.stop()
-					// eslint-disable-next-line @typescript-eslint/no-misused-promises
 					document.removeEventListener('visibilitychange', onVisibleHandler)
 				}
 				const onVisibleHandler = async () => {
@@ -92,7 +91,6 @@ function acquireTrack(
 					cleanup()
 					acquireTrack(subscriber, device, constraints, cleanupRef)
 				}
-				// eslint-disable-next-line @typescript-eslint/no-misused-promises
 				document.addEventListener('visibilitychange', onVisibleHandler)
 				cleanupRef.current = cleanup
 				subscriber.next(track)