Switch to Vite and ESM (#1405)

* Switch to Vite

* Use standard Vite CSS import

* Switch to ESM

.eslintrc.js → .eslintrc.cjs

@@ -78,7 +78,7 @@ module.exports = {
 
   overrides: [
     {
-      files: ['.eslintrc.js', 'remix.config.js', 'stylelint.config.js'],
+      files: ['.eslintrc.cjs', 'stylelint.config.js'],
 
       env: {
         node: true,

Dockerfile

@@ -57,7 +57,6 @@ COPY --from=production-deps /app/node_modules /app/node_modules
 COPY --from=build /app/node_modules/.prisma /app/node_modules/.prisma
 
 COPY --from=build /app/build /app/build
-COPY --from=build /app/public /app/public
 COPY --from=build /app/package.json /app/package.json
 COPY --from=build /app/start.sh /app/start.sh
 COPY --from=build /app/prisma /app/prisma

app/components/ShowEnded/ShowEnded.tsx

@@ -1,14 +1,9 @@
-import type { LinksFunction } from '@remix-run/node';
+import '~/styles/show-ended.css';
+
 import type { FC } from 'react';
 import { useEffect } from 'react';
 import { toast } from 'react-toastify';
 
-import stylesUrl from '~/styles/show-ended.css';
-
-export const links: LinksFunction = () => [
-  { rel: 'stylesheet', href: stylesUrl },
-];
-
 interface ShowEndedProps {
   logoUrl: string;
 }

app/components/ShowIntro/ShowIntro.tsx

@@ -1,11 +1,6 @@
-import type { LinksFunction } from '@remix-run/node';
-import type { FC } from 'react';
-
-import stylesUrl from '~/styles/show-intro.css';
+import '~/styles/show-intro.css';
 
-export const links: LinksFunction = () => [
-  { rel: 'stylesheet', href: stylesUrl },
-];
+import type { FC } from 'react';
 
 interface ShowIntroProps {
   logoUrl: string;

app/components/ShowPlaying/ShowPlaying.tsx

@@ -1,28 +1,17 @@
-import type { LinksFunction } from '@remix-run/node';
+import '~/styles/show-playing.css';
+
 import type { FC } from 'react';
 import { useEffect } from 'react';
 import { toast } from 'react-toastify';
 
-import { links as spinnerLinks } from '~/components/Spinner';
-import {
-  links as toastLinks,
-  ToastContainer,
-} from '~/components/ToastContainer';
-import { links as volumeLinks, VolumeFab } from '~/components/VolumeFab';
-import stylesUrl from '~/styles/show-playing.css';
+import { ToastContainer } from '~/components/ToastContainer';
+import { VolumeFab } from '~/components/VolumeFab';
 import type { AudioStatus } from '~/types/AudioStatus';
 import type { ShowInfo } from '~/types/ShowInfo';
 
 import { AudioCanvas } from './AudioCanvas';
 import { CurrentTime } from './CurrentTime';
 
-export const links: LinksFunction = () => [
-  ...spinnerLinks(),
-  ...volumeLinks(),
-  ...toastLinks(),
-  { rel: 'stylesheet', href: stylesUrl },
-];
-
 export interface ShowPlayingProps {
   volume: number;
   audioStatus: AudioStatus;

app/components/Spinner/Spinner.tsx

@@ -1,11 +1,6 @@
-import type { LinksFunction } from '@remix-run/node';
-import type { FC } from 'react';
-
-import stylesUrl from './spinner.css';
+import './spinner.css';
 
-export const links: LinksFunction = () => [
-  { rel: 'stylesheet', href: stylesUrl },
-];
+import type { FC } from 'react';
 
 export const Spinner: FC = () => (
   <div className="spinner-container">

app/components/ToastContainer/ToastContainer.tsx

@@ -1,15 +1,9 @@
-import type { LinksFunction } from '@remix-run/node';
+import 'react-toastify/dist/ReactToastify.min.css';
+import './toast.css';
+
 import type { CloseButtonProps } from 'node_modules/react-toastify/dist/components';
 import type { FC } from 'react';
 import { cssTransition, ToastContainer as Container } from 'react-toastify';
-import toastStylesUrl from 'react-toastify/dist/ReactToastify.min.css';
-
-import stylesUrl from './toast.css';
-
-export const links: LinksFunction = () => [
-  { rel: 'stylesheet', href: toastStylesUrl },
-  { rel: 'stylesheet', href: stylesUrl },
-];
 
 const ToastClose: FC<CloseButtonProps> = ({ type, closeToast }) => {
   return (

app/components/VolumeFab/VolumeFab.tsx

@@ -1,19 +1,15 @@
-import type { LinksFunction } from '@remix-run/node';
+import './volume-fab.css';
+
 import type { FC, KeyboardEventHandler } from 'react';
 import { memo, useCallback, useRef, useState } from 'react';
 import { useOnClickOutside } from 'usehooks-ts';
 
 import { VolumeDownIcon, VolumeMuteIcon, VolumeUpIcon } from './icons';
-import stylesUrl from './volume-fab.css';
 
 const INPUT_MIN = 0;
 const INPUT_MAX = 100;
 const INPUT_STEP = 5;
 
-export const links: LinksFunction = () => [
-  { rel: 'stylesheet', href: stylesUrl },
-];
-
 export interface VolumeFabProps {
   volume: number;
   onVolumeInput: (volume: number) => void;

app/components/admin/AudioFileUpload.tsx

@@ -7,8 +7,8 @@ import { useControlField, useField } from 'remix-validated-form';
 import { UPLOAD_AUDIO_FORM_KEY } from '~/forms/upload-audio';
 import { useSse } from '~/hooks/useSse';
 import type { loader as audioUploadLoader } from '~/routes/admin.audio-upload.$id';
-import type { AudioFileUploadEvent } from '~/routes/admin.audio-upload.events';
 import type { action as newAudioUploadAction } from '~/routes/admin.audio-upload.new';
+import type { AudioFileUploadEvent } from '~/sse.server/audio-file-events';
 
 type PutFormResponse = SerializeFrom<typeof newAudioUploadAction>;
 

app/forms/show/forms.tsx

@@ -18,8 +18,8 @@ import { InputDateTime } from '~/components/admin/InputDateTime';
 import { SaveButton } from '~/components/admin/SaveButton';
 import { useOrigin } from '~/hooks/useOrigin';
 
-import type { schema, setSchema } from './validators';
-import { clientValidator } from './validators';
+import type { schema, setSchema } from './validator';
+import { clientValidator } from './validator';
 
 const SHOW_FORM_ID = 'show-form';
 

app/forms/show/validator.server.ts

@@ -0,0 +1,23 @@
+import { withZod } from '@remix-validated-form/with-zod';
+
+import { db } from '~/db/db.server';
+
+import { schema } from './validator';
+
+export function makeServerValidator({
+  previousId,
+}: { previousId?: string } = {}) {
+  return withZod(
+    schema.refine(
+      async ({ id }) => {
+        if (id === previousId) return true;
+        const existingShow = await db.show.findUnique({ where: { id } });
+        return !existingShow;
+      },
+      {
+        path: ['id'],
+        message: 'A show already exists with that URL.',
+      },
+    ),
+  );
+}

app/forms/show/validators.ts → app/forms/show/validator.ts

@@ -2,8 +2,6 @@ import { withZod } from '@remix-validated-form/with-zod';
 import { z } from 'zod';
 import { zfd } from 'zod-form-data';
 
-import { db } from '~/db/db.server';
-
 export const setSchema = z.object({
   id: zfd.text(),
   artist: zfd.text(),
@@ -30,20 +28,3 @@ export const schema = zfd.formData({
 });
 
 export const clientValidator = withZod(schema);
-
-export const makeServerValidator = ({
-  previousId,
-}: { previousId?: string } = {}) =>
-  withZod(
-    schema.refine(
-      async ({ id }) => {
-        if (id === previousId) return true;
-        const existingShow = await db.show.findUnique({ where: { id } });
-        return !existingShow;
-      },
-      {
-        path: ['id'],
-        message: 'A show already exists with that URL.',
-      },
-    ),
-  );

app/root.tsx

@@ -3,7 +3,6 @@ import { rootAuthLoader } from '@clerk/remix/ssr.server';
 import type { LoaderFunction, MetaFunction } from '@remix-run/node';
 import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   redirect,
@@ -51,7 +50,6 @@ function App() {
         <Outlet />
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
       </body>
     </html>
   );

app/routes/$show.tsx

@@ -1,22 +1,19 @@
-import type {
-  LinksFunction,
-  LoaderFunction,
-  MetaFunction,
-} from '@remix-run/node';
+import '~/styles/elevation.css';
+import '~/styles/show.css';
+
+import type { LoaderFunction, MetaFunction } from '@remix-run/node';
 import { json, redirect } from '@remix-run/node';
 import { useLoaderData } from '@remix-run/react';
 import { addSeconds, formatISO } from 'date-fns';
 import type { FC } from 'react';
 import useLocalStorageState from 'use-local-storage-state';
 
 import { AudioController } from '~/components/AudioController';
-import { links as endedLinks, ShowEnded } from '~/components/ShowEnded';
-import { links as introLinks, ShowIntro } from '~/components/ShowIntro';
-import { links as playingLinks, ShowPlaying } from '~/components/ShowPlaying';
+import { ShowEnded } from '~/components/ShowEnded';
+import { ShowIntro } from '~/components/ShowIntro';
+import { ShowPlaying } from '~/components/ShowPlaying';
 import { db } from '~/db/db.server';
 import { useShowInfo } from '~/hooks/useShowInfo';
-import elevationStylesUrl from '~/styles/elevation.css';
-import showStylesUrl from '~/styles/show.css';
 import type { ShowData } from '~/types/ShowData';
 
 export const meta: MetaFunction<typeof loader> = ({ data, params }) => {
@@ -29,14 +26,6 @@ export const meta: MetaFunction<typeof loader> = ({ data, params }) => {
   ];
 };
 
-export const links: LinksFunction = () => [
-  { rel: 'stylesheet', href: elevationStylesUrl },
-  { rel: 'stylesheet', href: showStylesUrl },
-  ...introLinks(),
-  ...playingLinks(),
-  ...endedLinks(),
-];
-
 export const loader = (async ({ params }) => {
   const id = params.show!;
 

app/routes/admin.audio-upload.events.ts

@@ -1,26 +1,11 @@
-import type { Prisma } from '@prisma/client';
-import type { LoaderFunction, SerializeFrom } from '@remix-run/node';
+import type { LoaderFunction } from '@remix-run/node';
 
 import { redirectToLogin } from '~/auth/redirect-to-login.server';
-import {
-  adminEventStream,
-  dispatchAdminEvent,
-} from '~/sse/admin-events.server';
-
-export type AudioFileUploadEvent = SerializeFrom<
-  Prisma.AudioFileUploadGetPayload<{
-    include: { audioFile: true };
-  }>
->;
-
-const EVENT_TYPE = 'audio file processing';
-
-export function emitAudioFileProcessingEvent(data: AudioFileUploadEvent) {
-  dispatchAdminEvent(EVENT_TYPE, data);
-}
+import { adminEventStream } from '~/sse.server/admin-events';
+import { AUDIO_FILE_EVENT_TYPE } from '~/sse.server/audio-file-events';
 
 export const loader = (async (args) => {
   await redirectToLogin(args);
 
-  return adminEventStream(args.request, EVENT_TYPE);
+  return adminEventStream(args.request, AUDIO_FILE_EVENT_TYPE);
 }) satisfies LoaderFunction;

app/routes/admin.audio-upload.new.ts

@@ -15,7 +15,7 @@ import { ffmpeg } from '~/ffmpeg/ffmpeg.server';
 import type { FFprobeOutput } from '~/ffmpeg/ffprobe.server';
 import { ffprobe } from '~/ffmpeg/ffprobe.server';
 import { UPLOAD_AUDIO_FORM_KEY } from '~/forms/upload-audio';
-import { emitAudioFileProcessingEvent } from '~/routes/admin.audio-upload.events';
+import { emitAudioFileProcessingEvent } from '~/sse.server/audio-file-events';
 
 const GIGABYTE = 1_000_000_000;
 const MICROSECONDS = 1 / 1_000_000;

app/routes/admin.shows.$show_.edit.tsx

@@ -10,7 +10,8 @@ import { validationError } from 'remix-validated-form';
 
 import { redirectToLogin } from '~/auth/redirect-to-login.server';
 import { db } from '~/db/db.server';
-import { EditShowForm, makeServerValidator } from '~/forms/show';
+import { EditShowForm } from '~/forms/show/forms';
+import { makeServerValidator } from '~/forms/show/validator.server';
 import { replaceNullsWithUndefined } from '~/forms/utils/replaceNullsWithUndefined';
 import { replaceUndefinedsWithNull } from '~/forms/utils/replaceUndefinedsWithNull';
 

app/routes/admin.shows.new.tsx

@@ -9,7 +9,8 @@ import { validationError } from 'remix-validated-form';
 
 import { redirectToLogin } from '~/auth/redirect-to-login.server';
 import { db } from '~/db/db.server';
-import { makeServerValidator, NewShowForm } from '~/forms/show';
+import { NewShowForm } from '~/forms/show/forms';
+import { makeServerValidator } from '~/forms/show/validator.server';
 
 export const meta: MetaFunction = () => [
   { title: 'New show | Festival admin' },

app/routes/admin.tsx

@@ -1,16 +1,12 @@
+import '~/styles/admin.css';
+
 import { UserButton } from '@clerk/remix';
-import type { LinksFunction, MetaFunction } from '@remix-run/node';
+import type { MetaFunction } from '@remix-run/node';
 import { Outlet } from '@remix-run/react';
 import type { FC } from 'react';
 
-import adminStylesUrl from '~/styles/admin.css';
-
 export const meta: MetaFunction = () => [{ title: 'Festival admin' }];
 
-export const links: LinksFunction = () => [
-  { rel: 'stylesheet', href: adminStylesUrl },
-];
-
 const Admin: FC = () => {
   return (
     <>

app/sse.server/audio-file-events.ts

@@ -0,0 +1,16 @@
+import type { Prisma } from '@prisma/client';
+import type { SerializeFrom } from '@remix-run/node';
+
+import { dispatchAdminEvent } from './admin-events';
+
+export type AudioFileUploadEvent = SerializeFrom<
+  Prisma.AudioFileUploadGetPayload<{
+    include: { audioFile: true };
+  }>
+>;
+
+export const AUDIO_FILE_EVENT_TYPE = 'audio file processing';
+
+export function emitAudioFileProcessingEvent(data: AudioFileUploadEvent) {
+  dispatchAdminEvent(AUDIO_FILE_EVENT_TYPE, data);
+}

env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />