[chore] Upgrade to Remix 2.8 + Vite (#54)

.eslintrc.cjs

@@ -1,4 +1,83 @@
+/**
+ * This is intended to be a basic starting point for linting in your app.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-  extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
+  root: true,
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+  },
+
+  // Base config
+  extends: ["eslint:recommended"],
+
+  overrides: [
+    // React
+    {
+      files: ["**/*.{js,jsx,ts,tsx}"],
+      plugins: ["react", "jsx-a11y"],
+      extends: [
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended",
+      ],
+      settings: {
+        react: {
+          version: "detect",
+        },
+        formComponents: ["Form"],
+        linkComponents: [
+          { name: "Link", linkAttribute: "to" },
+          { name: "NavLink", linkAttribute: "to" },
+        ],
+        "import/resolver": {
+          typescript: {},
+        },
+      },
+    },
+
+    // Typescript
+    {
+      files: ["**/*.{ts,tsx}"],
+      plugins: ["@typescript-eslint", "import"],
+      parser: "@typescript-eslint/parser",
+      settings: {
+        "import/internal-regex": "^~/",
+        "import/resolver": {
+          node: {
+            extensions: [".ts", ".tsx"],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/recommended",
+        "plugin:import/typescript",
+      ],
+    },
+
+    // Node
+    {
+      files: [".eslintrc.cjs"],
+      env: {
+        node: true,
+      },
+    },
+  ],
 };

.gitignore

@@ -1,11 +1,11 @@
 node_modules
 
 /.cache
-/.wrangler
-/functions
-/public/build
+/build
 .env
-.dev.vars
-/test-results/
+
+.wrangler
+
 /playwright-report/
 /playwright/.cache/
+test-results

.node-version

@@ -1 +1 @@
-20.9
+20.9

app/components/box.tsx

@@ -34,7 +34,7 @@ export function BoxContent({
   isLast = true,
   className,
 }: PropsWithChildren<{
-  readonly isLast: Boolean;
+  readonly isLast: boolean;
   readonly className?: string | undefined;
 }>) {
   return (
@@ -71,7 +71,7 @@ export function BoxOptions({
   children,
   className,
 }: PropsWithChildren<{
-  readonly isLast: Boolean;
+  readonly isLast: boolean;
   readonly className?: string | undefined;
 }>) {
   return (
@@ -87,7 +87,7 @@ export function BoxOptions({
   );
 }
 
-export function BoxInfo({ children }: PropsWithChildren<{}>) {
+export function BoxInfo({ children }: PropsWithChildren<object>) {
   return (
     <div className="px-3 py-2 flex border-t border-gray-600 rounded-b-lg text-sm items-center">
       {children}

app/components/button.tsx

@@ -17,7 +17,7 @@ export default function Button(props: Props) {
         className,
       )}
     >
-      {props.label}
+      {label}
     </button>
   );
 }

app/components/code.tsx

@@ -27,7 +27,9 @@ export default function Code({
   language = "javascript",
   placeholder = "Paste some JSON…",
 }: Props) {
-  const CodeEditor = (Editor as any).default;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const CodeEditor = (Editor as any).default || Editor;
+
   return (
     <CodeEditor
       value={value}

app/components/content-wrapper.tsx

@@ -2,7 +2,7 @@ import type { PropsWithChildren } from "react";
 import PopularUtilities from "~/components/popular-utilities";
 import GoogleAd from "~/components/google-ad";
 
-export default function ContentWrapper(props: PropsWithChildren<{}>) {
+export default function ContentWrapper(props: PropsWithChildren<object>) {
   return (
     <>
       {props.children}

app/components/google-ad.tsx

@@ -25,7 +25,7 @@ function GoogleAd() {
     scriptTag.setAttribute("crossorigin", "anonymous");
     document.body.appendChild(scriptTag);
 
-    // @ts-ignore
+    // @ts-expect-error ignore for now
     (window.adsbygoogle = window.adsbygoogle || []).push({});
 
     adsLoaded.current = true;

app/components/json-viewer.tsx

@@ -12,7 +12,7 @@ import type { ShouldExpandNodeInitially } from "react-json-tree/src/types";
 import Box, { BoxContent, BoxTitle } from "~/components/box";
 
 interface Props {
-  readonly json: Object;
+  readonly json: object | string;
 }
 
 export default function JsonViewer({ json }: Props) {

app/components/layout.tsx

@@ -14,7 +14,7 @@ import { Link, useLocation } from "@remix-run/react";
 import Sidebar from "~/components/sidebar";
 import { Dialog, Transition } from "@headlessui/react";
 import Search from "~/components/search";
-import useKeyboardShortcut from "use-keyboard-shortcut";
+import useKeyboardShortcut from "~/hooks/use-keyboard-shortcut";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { DndProvider } from "react-dnd";
 

app/components/popular-utilities.tsx

@@ -1,6 +1,6 @@
 import { Link } from "@remix-run/react";
-import { ArrowSmallRightIcon } from "@heroicons/react/24/solid";
-import React, { memo } from "react";
+import { ArrowRightIcon } from "@heroicons/react/20/solid";
+import { memo } from "react";
 import { utilities } from "~/utilities";
 import { ClientOnly } from "~/components/client-only";
 
@@ -84,7 +84,7 @@ function PopularUtility({ name, description, path }: PopularUtilityProps) {
           to={path}
         >
           Try
-          <ArrowSmallRightIcon
+          <ArrowRightIcon
             className="h-4 w-4 relative top-px -mr-1"
             aria-hidden="true"
           />

app/components/search.tsx

@@ -117,7 +117,7 @@ export default function Search({ open, setOpen }: Props) {
                 {query !== "" && filteredUtilities.length === 0 && (
                   <div className="py-14 px-6 text-center sm:px-14">
                     <p className="text-sm text-gray-200">
-                      We couldn't find any utilities with that term.
+                      We couldn&apos;t find any utilities with that term.
                     </p>
                   </div>
                 )}

app/components/sidebar.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { useLocation } from "react-router";
 import { Link } from "@remix-run/react";
 import { sidebar } from "~/utilities";

app/components/tooltip.tsx

@@ -109,6 +109,7 @@ export const TooltipTrigger = React.forwardRef<
   React.HTMLProps<HTMLElement> & { asChild?: boolean }
 >(function TooltipTrigger({ children, asChild = false, ...props }, propRef) {
   const context = useTooltipContext();
+  // eslint-disable-next-line
   const childrenRef = (children as any).ref;
   const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
 
@@ -162,6 +163,7 @@ export const TooltipContent = React.forwardRef<
             top: context.y ?? 0,
             left: context.x ?? 0,
             visibility: context.x == null ? "hidden" : "visible",
+            // eslint-disable-next-line react/prop-types
             ...props.style,
             ...styles,
           }}

app/components/utiliti.tsx

@@ -2,10 +2,11 @@ import Copy from "~/components/copy";
 import Button from "~/components/button";
 import { Transition } from "@headlessui/react";
 import type { ReactNode } from "react";
-import { useLayoutEffect, useState } from "react";
+import { useState } from "react";
 import Box, { BoxButtons, BoxContent, BoxTitle } from "~/components/box";
 import ContentWrapper from "~/components/content-wrapper";
 import { useLocalStorage } from "~/hooks/use-local-storage";
+import { useIsomorphicLayoutEffect } from "~/hooks/use-isomorphic-layout-effect";
 
 interface Props<T> {
   readonly label: string;
@@ -45,7 +46,7 @@ export default function Utiliti<T>({
 
   // using an effect to calculate the value after input has changed
   // this allows us to re-render when actions array has changed, which happens when options change
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const fn = actions[action];
 
     if (!fn || !input) {

app/entry.server.tsx

@@ -1,14 +1,13 @@
-import type { AppLoadContext, EntryContext } from "@remix-run/cloudflare";
+import type { EntryContext } from "@remix-run/cloudflare";
 import { RemixServer } from "@remix-run/react";
-import isbot from "isbot";
+import { isbot } from "isbot";
 import { renderToReadableStream } from "react-dom/server";
 
 export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
   remixContext: EntryContext,
-  loadContext: AppLoadContext,
 ) {
   const body = await renderToReadableStream(
     <RemixServer context={remixContext} url={request.url} />,
@@ -22,7 +21,7 @@ export default async function handleRequest(
     },
   );
 
-  if (isbot(request.headers.get("user-agent"))) {
+  if (isbot(request.headers.get("user-agent") || "")) {
     await body.allReady;
   }
 

app/hooks/use-hydrated.ts

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 let hydrating = true;
 
 export function useHydrated() {
-  let [hydrated, setHydrated] = useState(() => !hydrating);
+  const [hydrated, setHydrated] = useState(() => !hydrating);
 
   useEffect(function hydrate() {
     hydrating = false;

app/hooks/use-isomorphic-layout-effect.ts

@@ -0,0 +1,4 @@
+import { useEffect, useLayoutEffect } from "react";
+
+export const useIsomorphicLayoutEffect =
+  typeof window !== "undefined" ? useLayoutEffect : useEffect;