philly-js-club · JoshuaKGoldberg · Jul 18, 2024 · May 10, 2024 · May 10, 2024 · Jul 11, 2024
diff --git a/.eslintrc.js → .eslintrc.cjs b/.eslintrc.js → .eslintrc.cjs
diff --git a/.github/DEVELOPMENT.md b/.github/DEVELOPMENT.md
@@ -13,7 +13,7 @@ pnpm install
 
 ## Local Development
 
-You can run a [Remix](https://remix.run/docs) development server to start serving the app locally on `localhost:3000`:
+You can run a [Remix](https://remix.run/docs) development server to start serving the app locally on `localhost:5173`:
 
 ```shell
 pnpm dev

diff --git a/app/root.tsx b/app/root.tsx
@@ -1,14 +1,14 @@
+import "./root.css";
+
 import {
 	Links,
-	LiveReload,
 	Meta,
 	Outlet,
 	Scripts,
 	ScrollRestoration,
 } from "@remix-run/react";
 
 import { site } from "./config";
-import styles from "./root.css";
 
 const metaTags = [
 	{ charSet: "utf-8" },
@@ -34,15 +34,13 @@ export default function App() {
 					<meta key={JSON.stringify(meta)} {...meta} />
 				))}
 				<link href="https://fonts.googleapis.com" rel="preconnect" />
-				<link href={styles} rel="stylesheet" />
 				<Meta />
 				<Links />
 			</head>
 			<body>
 				<Outlet />
 				<ScrollRestoration />
 				<Scripts />
-				<LiveReload />
 			</body>
 		</html>
 	);

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -1,15 +1,17 @@
-import { json } from "@remix-run/node";
+import { unstable_defineLoader } from "@remix-run/node";
 import type { MetaFunction } from "@remix-run/react";
 import { useLoaderData } from "@remix-run/react";
 
 import { EventDetails } from "~/components/EventDetails";
 import { PageGrid } from "~/components/PageGrid";
 import { constructSiteTitle } from "~/utils/common";
 
-export const loader = async () => {
+import eventsJson from "../data/events.json";
+
+export const loader = unstable_defineLoader(() => {
 	// This assumes the events are always in sorted order, newest first.
 	// Surely this assumption on undocumented data behavior will never come back to haunt us.
-	const events = (await import("../data/events.json")).map((event) => ({
+	const events = eventsJson.map((event) => ({
 		...event,
 		date: new Date(event.date),
 	}));
@@ -21,13 +23,11 @@ export const loader = async () => {
 		now.getTime() + 6 * 7 * 24 * 60 * 60 * 1000,
 	);
 
-	return json(
-		// Filter and sort event date in ascending order.
-		events
-			.filter(({ date }) => date > now && date < sixWeeksInTheFuture)
-			.sort((a, b) => a.date.getTime() - b.date.getTime()),
-	);
-};
+	// Filter and sort event date in ascending order.
+	return events
+		.filter(({ date }) => date > now && date < sixWeeksInTheFuture)
+		.sort((a, b) => a.date.getTime() - b.date.getTime());
+});
 
 export const meta: MetaFunction = () => {
 	return [{ title: constructSiteTitle() }];

diff --git a/app/routes/about.tsx b/app/routes/about.tsx
@@ -1,24 +1,19 @@
-import type { LoaderFunction } from "@remix-run/node";
+import { unstable_defineLoader } from "@remix-run/node";
 import { type MetaFunction, useLoaderData } from "@remix-run/react";
 
 import { PageGrid } from "~/components/PageGrid";
 import { constructSiteTitle } from "~/utils/common";
 
+import team from "../data/team.json";
+
 export const meta: MetaFunction = () => {
 	return [{ title: constructSiteTitle("About") }];
 };
 
-interface LoaderData {
-	members: Record<"name" | "role", string>[];
-	organizersEmeritum: string[];
-}
-
-export const loader: LoaderFunction = async () => {
-	return await import("../data/team.json");
-};
+export const loader = unstable_defineLoader(() => team);
 
 export default function About() {
-	const data = useLoaderData<LoaderData>();
+	const data = useLoaderData<typeof loader>();
 
 	return (
 		<PageGrid
@@ -50,7 +45,7 @@ export default function About() {
 					</ul>
 					<h3 className="large">Organizers Emeritus</h3>
 					<ul className="body-text">
-						{(data.organizersEmeritum as string[]).map((name) => (
+						{data.organizersEmeritum.map((name) => (
 							<li key={name}>{name}</li>
 						))}
 					</ul>

diff --git a/app/routes/events.tsx b/app/routes/events.tsx
@@ -1,5 +1,4 @@
-import type { LoaderFunction } from "@remix-run/node";
-import { json } from "@remix-run/node";
+import { unstable_defineLoader } from "@remix-run/node";
 import type { MetaFunction } from "@remix-run/react";
 import { useLoaderData } from "@remix-run/react";
 
@@ -9,30 +8,18 @@ import { PageGrid } from "~/components/PageGrid";
 import { site } from "~/config";
 import { constructSiteTitle, groupBy } from "~/utils/common";
 
-export const loader: LoaderFunction = async () => {
-	return json(
-		groupBy(await import("../data/events.json"), (event) =>
-			new Date(event.date).getFullYear(),
-		),
-	);
-};
+import events from "../data/events.json";
+
+export const loader = unstable_defineLoader(() => {
+	return groupBy(events, (event) => new Date(event.date).getFullYear());
+});
 
 export const meta: MetaFunction = () => {
 	return [{ title: constructSiteTitle("Events") }];
 };
 
 export default function Events() {
-	const data = useLoaderData<
-		Record<
-			number,
-			{
-				date: string;
-				link: string;
-				location: string;
-				topics: string[];
-			}[]
-		>
-	>();
+	const data = useLoaderData<typeof loader>();
 
 	return (
 		<PageGrid

diff --git a/app/routes/ics-feed[.ics].ts b/app/routes/ics-feed[.ics].ts
@@ -1,12 +1,13 @@
-import type { LoaderFunction } from "@remix-run/node";
+import { unstable_defineLoader } from "@remix-run/node";
 import type { DurationObject, EventAttributes } from "ics";
-import { generateIcs } from "ics-service";
+import icsService from "ics-service";
 
 import { site } from "~/config";
 
-export const loader: LoaderFunction = async () => {
-	const eventData = (await import("../data/events.json")).default;
-	eventData.reverse();
+import eventJson from "../data/events.json";
+
+export const loader = unstable_defineLoader(() => {
+	const eventData = [...eventJson].reverse();
 	const events: EventAttributes[] = eventData.map((event, index) => {
 		const date = new Date(event.date);
 		return {
@@ -30,7 +31,7 @@ export const loader: LoaderFunction = async () => {
 	});
 	let ics = "";
 	try {
-		ics = generateIcs(site.title, events, site.baseURL);
+		ics = icsService.generateIcs(site.title, events, site.baseURL);
 	} catch (err) {
 		return new Response("Invalid ICS File", { status: 500 });
 	}
@@ -41,4 +42,4 @@ export const loader: LoaderFunction = async () => {
 			"Content-Disposition": `attachment; filename="phillyjs.ics"`,
 		},
 	});
-};
+});
diff --git a/app/routes/join-us.tsx b/app/routes/join-us.tsx
@@ -1,24 +1,20 @@
-import type { LoaderFunction } from "@remix-run/node";
+import { unstable_defineLoader } from "@remix-run/node";
 import { type MetaFunction, useLoaderData } from "@remix-run/react";
 
 import { Icons } from "~/components/Icons";
 import { PageGrid } from "~/components/PageGrid";
 import { constructSiteTitle } from "~/utils/common";
 
-interface LoaderData {
-	currentPlatforms: Record<"href" | "imageHref" | "name", string>[];
-}
+import platforms from "../data/platforms.json";
 
-export const loader: LoaderFunction = async () => {
-	return await import("../data/platforms.json");
-};
+export const loader = unstable_defineLoader(() => platforms);
 
 export const meta: MetaFunction = () => {
 	return [{ title: constructSiteTitle("Join Us") }];
 };
 
 export default function Socials() {
-	const platforms = useLoaderData<LoaderData>();
+	const platforms = useLoaderData<typeof loader>();
 
 	return (
 		<PageGrid

diff --git a/app/routes/sponsors.tsx b/app/routes/sponsors.tsx
@@ -1,27 +1,20 @@
-import type { LoaderFunction } from "@remix-run/node";
+import { unstable_defineLoader } from "@remix-run/node";
 import { type MetaFunction, useLoaderData } from "@remix-run/react";
 
 import { Icons } from "~/components/Icons";
 import { PageGrid } from "~/components/PageGrid";
 import { constructSiteTitle } from "~/utils/common";
 
-interface LoaderData {
-	currentSponsors: Record<
-		"darkModeImageHref" | "description" | "href" | "imageHref" | "name",
-		string
-	>[];
-}
+import sponsors from "../data/sponsors.json";
 
-export const loader: LoaderFunction = async () => {
-	return await import("../data/sponsors.json");
-};
+export const loader = unstable_defineLoader(() => sponsors);
 
 export const meta: MetaFunction = () => {
 	return [{ title: constructSiteTitle("Sponsors") }];
 };
 
 export default function Sponsors() {
-	const sponsors = useLoaderData<LoaderData>();
+	const sponsors = useLoaderData<typeof loader>();
 
 	return (
 		<PageGrid

diff --git a/remix.env.d.ts → env.d.ts b/remix.env.d.ts → env.d.ts
@@ -1,6 +1,3 @@
-/// <reference types="@remix-run/dev" />
-/// <reference types="@remix-run/node" />
-
 declare module "ics-service" {
 	const createAboutRoute: unknown;
 	const createFeedRoute: unknown;

diff --git a/package.json b/package.json
@@ -4,9 +4,10 @@
 	"description": "Website for the Philly JS Club. 🥳",
 	"license": "MIT",
 	"sideEffects": false,
+	"type": "module",
 	"scripts": {
-		"build": "remix build",
-		"dev": "remix dev",
+		"build": "remix vite:build",
+		"dev": "remix vite:dev",
 		"format": "prettier \"**/*\" --ignore-unknown",
 		"format:write": "pnpm format --write",
 		"lint": "eslint . --max-warnings 0 --report-unused-disable-directives",
@@ -75,6 +76,8 @@
 		"stylelint-config-standard": "^36.0.1",
 		"stylelint-order": "^6.0.4",
 		"typescript": "^5.5.3",
+		"vite": "^5.3.3",
+		"vite-tsconfig-paths": "^4.3.2",
 		"yaml-eslint-parser": "^1.2.3"
 	},
 	"engines": {

diff --git a/playwright.config.ts b/playwright.config.ts
@@ -11,7 +11,7 @@ export default {
 	fullyParallel: false,
 	reporter: process.env.CI ? "github" : "html",
 	use: {
-		baseURL: "http://localhost:3000",
+		baseURL: "http://localhost:5173",
 		trace: "on",
 	},
 	projects: [
@@ -27,6 +27,6 @@ export default {
 	webServer: {
 		command: "pnpm dev",
 		reuseExistingServer: true,
-		port: 3000,
+		port: 5173,
 	},
 } satisfies PlaywrightTestConfig;