Upgrade to react-router@7, eslint@9, version bump the rest

.gitignore

@@ -10,6 +10,5 @@ yarn.lock
 *.log
 k8s-context
 *.sqlite3
-/cypress/screenshots
-/cypress/videos
 tsconfig.tsbuildinfo
+.react-router

.husky/pre-push

@@ -1,4 +1,2 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
 
 npm run validate

.lintstagedrc.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   "**/*.[tj]s?(x)": ["eslint --fix --max-warnings=0", "prettier --check"],
   "migrations/*.[tj]s": [
     "npm run start:migrate",

Dockerfile

@@ -1,10 +1,10 @@
 FROM node:20-alpine as build
 WORKDIR /app
 
 COPY package.json package-lock.json ./
 RUN npm install
 
-COPY remix.config.js tailwind.config.js kysely.config.ts tsconfig.json .eslint* .prettierignore ./
+COPY vite.config.ts tailwind.config.js kysely.config.ts tsconfig.json .eslint* .prettierignore ./
 COPY app ./app
 
 RUN npm run build
@@ -20,7 +20,6 @@
 RUN npm prune --production
 
 COPY --from=build /app/build ./build
-COPY --from=build /app/public ./public
 
 COPY kysely.config.ts ./
 COPY migrations ./migrations

app/commands/convene.tsx

@@ -82,7 +82,7 @@ export const handler = async (
                 staff,
                 extra: "✅ Restricted",
               }),
-              applyRestriction(message.member!),
+              applyRestriction(message.member),
               message.reply(
                 "After a vote by the mods, this member has had restrictions applied to them",
               ),
@@ -96,7 +96,7 @@ export const handler = async (
                 staff,
                 extra: "✅ Kicked",
               }),
-              kick(message.member!),
+              kick(message.member),
               message.reply(
                 "After a vote by the mods, this member has been kicked from the server to cool off",
               ),
@@ -110,13 +110,13 @@ export const handler = async (
                 staff,
                 extra: "✅ Banned",
               }),
-              ban(message.member!),
+              ban(message.member),
               message.reply(
                 "After a vote by the mods, this member has been permanently banned",
               ),
             ]);
             return;
-          case resolutions.nudge:
+          case resolutions.nudge: {
             const [thread] = await Promise.all([
               originalChannel.threads.create({
                 name: message.author.username,
@@ -145,6 +145,7 @@ This isn't a formal warning, but your message concerned the moderators enough th
 
   ${quoteAndEscape(message.content)}`);
             return;
+          }
           case resolutions.warning:
             reportUser({
               reason: ReportReasons.mod,
@@ -172,7 +173,7 @@ This isn't a formal warning, but your message concerned the moderators enough th
               staff,
               extra: "✅ Timed out overnight",
             });
-            timeout(message.member!);
+            timeout(message.member);
 
             return;
         }

app/commands/reacord/ModResponse.tsx

@@ -1,4 +1,4 @@
-import type { UserInfo } from "reacord";
+import type { ComponentEventUser } from "reacord";
 import { Button } from "reacord";
 
 import type { Resolution } from "~/helpers/modResponse";
@@ -17,7 +17,7 @@ export const ModResponse = ({
   modRoleId,
 }: {
   votesRequired?: number;
-  onVote: (result: { vote: Resolution; user: UserInfo }) => void;
+  onVote: (result: { vote: Resolution; user: ComponentEventUser }) => void;
   onResolve: (result: Resolution) => Promise<void>;
   modRoleId: string;
 }) => {

app/commands/setupTickets.ts

@@ -15,7 +15,7 @@ import {
 import { REST } from "@discordjs/rest";
 import { Routes, TextInputStyle } from "discord-api-types/v10";
 
-import { discordToken } from "~/helpers/env";
+import { discordToken } from "~/helpers/env.server";
 import { SETTINGS, fetchSettings } from "~/models/guilds.server";
 import { format } from "date-fns";
 import type {
@@ -114,7 +114,7 @@ export default [
       await thread.send({
         content: "When you’ve finished, please close the ticket.",
         components: [
-          // @ts-ignore
+          // @ts-expect-error Types for this are super busted
           new ActionRowBuilder().addComponents(
             new ButtonBuilder()
               .setCustomId(`close-ticket||${user.id}`)

app/components/login.tsx

@@ -1,4 +1,4 @@
-import { Form } from "@remix-run/react";
+import { Form } from "react-router";
 import type { ButtonHTMLAttributes } from "react";
 
 interface LoginProps extends ButtonHTMLAttributes<Element> {
@@ -8,7 +8,7 @@ interface LoginProps extends ButtonHTMLAttributes<Element> {
 
 export function Login({
   children = "Log in with Discord",
-  errors,
+  // errors,
   redirectTo,
   ...props
 }: LoginProps) {

app/components/logout.tsx

@@ -1,17 +1,9 @@
-import { Form } from "@remix-run/react";
+import { Form } from "react-router";
 import type { ButtonHTMLAttributes } from "react";
 
-interface LoginProps extends ButtonHTMLAttributes<Element> {
-  errors?: { [k: string]: string };
-  redirectTo?: string;
-}
+type LoginProps = ButtonHTMLAttributes<Element>;
 
-export function Logout({
-  children = "Log out",
-  errors,
-  redirectTo,
-  ...props
-}: LoginProps) {
+export function Logout({ children = "Log out", ...props }: LoginProps) {
   return (
     <Form method="post" action="/logout" className="space-y-6">
       <button

app/db.d.ts

@@ -1,8 +1,9 @@
 import type { ColumnType } from "kysely";
 
-export type Generated<T> = T extends ColumnType<infer S, infer I, infer U>
-  ? ColumnType<S, I | undefined, U>
-  : ColumnType<T, T | undefined, T>;
+export type Generated<T> =
+  T extends ColumnType<infer S, infer I, infer U>
+    ? ColumnType<S, I | undefined, U>
+    : ColumnType<T, T | undefined, T>;
 
 export interface Guilds {
   id: string | null;

app/db.server.ts

@@ -1,7 +1,7 @@
 import SQLite from "better-sqlite3";
 import { Kysely, ParseJSONResultsPlugin, SqliteDialect } from "kysely";
 import type { DB } from "./db";
-import { databaseUrl } from "./helpers/env";
+import { databaseUrl } from "./helpers/env.server";
 
 export { SqliteError } from "better-sqlite3";
 

app/discord/activityTracker.ts

@@ -17,13 +17,16 @@ export async function startActivityTracking(client: Client) {
   client.on(Events.MessageCreate, async (msg) => {
     const info = await getMessageStats(msg);
     if (!info) return;
+    if (!msg.author || !msg.guildId) {
+      throw Error("Missing author or guild info when tracking message stats");
+    }
     await db
       .insertInto("message_stats")
       .values({
         ...info,
         message_id: msg.id,
-        author_id: msg.author!.id,
-        guild_id: msg.guildId!,
+        author_id: msg.author.id,
+        guild_id: msg.guildId,
         channel_id: msg.channelId,
         recipient_id: msg.mentions?.repliedUser?.id ?? null,
         channel_category: (await getOrFetchChannel(msg))?.parent?.name,
@@ -92,5 +95,5 @@ export async function reportByGuild(guildId: string) {
     .where("guild_id", "=", guildId)
     .groupBy("author_id")
     .execute();
-  return result
+  return result;
 }

app/discord/api.ts

@@ -1,4 +1,4 @@
 import { REST } from "discord.js";
-import { discordToken } from "~/helpers/env";
+import { discordToken } from "~/helpers/env.server";
 
 export const rest = new REST({ version: "10" }).setToken(discordToken);

app/discord/client.server.ts

@@ -1,6 +1,6 @@
 import { GatewayIntentBits, Client, Partials, ActivityType } from "discord.js";
 import { ReacordDiscordJs } from "reacord";
-import { discordToken } from "~/helpers/env";
+import { discordToken } from "~/helpers/env.server";
 
 export const client = new Client({
   intents: [

app/discord/deployCommands.server.ts

@@ -2,6 +2,7 @@ import type {
   APIApplicationCommand,
   Client,
   ContextMenuCommandBuilder,
+  OAuth2Guild,
   SlashCommandBuilder,
 } from "discord.js";
 import { InteractionType, Routes } from "discord.js";
@@ -15,7 +16,7 @@ import {
   isSlashCommand,
   isUserContextCommand,
 } from "~/helpers/discord";
-import { applicationId, isProd } from "~/helpers/env";
+import { applicationId, isProd } from "~/helpers/env.server";
 import { calculateChangedCommands } from "~/helpers/discordCommands";
 
 /**
@@ -71,12 +72,14 @@ export const deployCommands = async (client: Client) => {
         ) {
           config.handler(interaction);
         }
+        return;
       }
       case InteractionType.ModalSubmit: {
         const config = matchCommand(interaction.customId);
         if (isModalCommand(config) && interaction.isModalSubmit()) {
           config.handler(interaction);
         }
+        return;
       }
     }
   });
@@ -111,9 +114,16 @@ export const deployProdCommands = async (
   // This should only one once as a migration, but maybe stuff will get into
   // weird states.
   const guilds = await client.guilds.fetch();
-  const randomGuild = guilds.at(Math.floor(Math.random() * guilds.size));
+  const randomGuild = ((): OAuth2Guild => {
+    let g: OAuth2Guild | undefined;
+    // This is really just to appease TS
+    while (!g) {
+      g = guilds.at(Math.floor(Math.random() * guilds.size));
+    }
+    return g;
+  })();
   const randomGuildCommands = (await rest.get(
-    Routes.applicationGuildCommands(applicationId, randomGuild!.id),
+    Routes.applicationGuildCommands(applicationId, randomGuild.id),
   )) as APIApplicationCommand[];
   if (randomGuildCommands.length > 0) {
     await Promise.allSettled(

app/entry.client.tsx

@@ -1,4 +1,4 @@
-import { RemixBrowser } from "@remix-run/react";
-import { hydrate } from "react-dom";
+import { HydratedRouter } from "react-router/dom";
+import { hydrateRoot } from "react-dom/client";
 
-hydrate(<RemixBrowser />, document);
+hydrateRoot(document, <HydratedRouter />);

app/helpers/discordCommands.ts

@@ -29,9 +29,8 @@ export const compareCommands = (
     return result;
   }
   if (json.type === ApplicationCommandType.ChatInput || !json.type) {
-    const hasRemoteOptions =
-      "options" in remoteCommand && remoteCommand.options!.length > 0;
-    const hasLocalOptions = "options" in json && json.options!.length > 0;
+    const remoteOptions = remoteCommand.options;
+    const localOptions = json.options;
 
     const typeMatches = !json.type || json.type === remoteCommand.type;
     if (!typeMatches) {
@@ -44,29 +43,29 @@ export const compareCommands = (
     if (!descriptionMatches) {
       return false;
     }
-    const remoteOptionsMatch = hasRemoteOptions
-      ? remoteCommand.options!.every((o) =>
+    const remoteOptionsMatch = !remoteOptions
+      ? true
+      : remoteOptions.every((o) =>
           json.options?.some(
             (o2) =>
               o.name === o2.name &&
               o.description === o2.description &&
               o.type === o2.type,
           ),
-        )
-      : true;
+        );
     if (!remoteOptionsMatch) {
       return false;
     }
-    const localOptionsMatch = hasLocalOptions
-      ? json.options!.every((o) =>
+    const localOptionsMatch = !localOptions
+      ? true
+      : localOptions.every((o) =>
           remoteCommand.options?.some(
             (o2) =>
               o.name === o2.name &&
               o.description === o2.description &&
               o.type === o2.type,
           ),
-        )
-      : true;
+        );
     if (!localOptionsMatch) {
       return false;
     }

app/helpers/modResponse.ts

@@ -1,4 +1,4 @@
-import { uniq } from "lodash";
+import { uniq } from "lodash-es";
 import { useCallback, useMemo, useState } from "react";
 
 export const resolutions = {
@@ -19,7 +19,7 @@ export const humanReadableResolutions = {
   [resolutions.kick]: "Kick",
   [resolutions.ban]: "Ban",
 } as const;
-export type Resolution = typeof resolutions[keyof typeof resolutions];
+export type Resolution = (typeof resolutions)[keyof typeof resolutions];
 
 export const useVotes = () => {
   const [votes, setVotes] = useState({} as Record<Resolution, string[]>);