React Compiler

.github/workflows/lint.yaml

@@ -23,5 +23,8 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: ESLint
+        run: npm run lint
+
       - name: Prettier
         run: ./node_modules/.bin/prettier --check --ignore-path .gitignore .

app/components/copy.tsx

@@ -1,18 +1,18 @@
 import { copyText } from "~/utils/copy";
 import { DocumentDuplicateIcon } from "@heroicons/react/24/outline";
-import { useCallback, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/tooltip";
 
 interface Props {
-  readonly content: string;
+  readonly content: string | (() => string);
 }
 export default function Copy({ content }: Props) {
   const text = "Copy to clipboard";
   const [tooltipText, setTooltipText] = useState(text);
   const buttonRef = useRef<HTMLButtonElement>(null);
 
-  const onClick = useCallback(() => {
-    copyText(content)
+  const onClick = () => {
+    copyText(typeof content === "string" ? content : content())
       .then(() => setTooltipText("Copied"))
       .catch((e) => console.error("Could not copy to clipboard.", e));
 
@@ -23,7 +23,7 @@ export default function Copy({ content }: Props) {
       // re-set tooltip text
       setTooltipText(text);
     }, 1500);
-  }, [content]);
+  };
 
   return (
     <Tooltip>

app/components/dropdown.tsx

@@ -1,8 +1,4 @@
-import {
-  useCallback,
-  type ChangeEvent,
-  type SelectHTMLAttributes,
-} from "react";
+import { type ChangeEvent, type SelectHTMLAttributes } from "react";
 import { classNames } from "~/common";
 
 interface Props extends SelectHTMLAttributes<HTMLSelectElement> {
@@ -18,11 +14,6 @@ export default function Dropdown({
   defaultValue,
   value,
 }: Props) {
-  const onChange = useCallback(
-    (e: ChangeEvent<HTMLSelectElement>) => onOptionChange(e.target.value),
-    [onOptionChange],
-  );
-
   return (
     <select
       id={id}
@@ -33,7 +24,9 @@ export default function Dropdown({
       )}
       defaultValue={defaultValue}
       value={value}
-      onChange={onChange}
+      onChange={(e: ChangeEvent<HTMLSelectElement>) =>
+        onOptionChange(e.target.value)
+      }
     >
       {options.map((it) => (
         <option key={it.id} value={it.id}>

app/components/json-viewer.tsx

@@ -1,5 +1,5 @@
 import Copy from "~/components/copy";
-import { useCallback, useMemo, useState } from "react";
+import { useState } from "react";
 import { JSONTree } from "react-json-tree";
 import IconButton from "~/components/icon-button";
 import {
@@ -19,33 +19,26 @@ export default function JsonViewer({ json }: Props) {
   const [shouldExpand, setShouldExpand] = useState<boolean | null>(null);
   const [expandAfter, setExpandAfter] = useState(3);
 
-  const shouldExpandNodeInitially = useCallback<ShouldExpandNodeInitially>(
-    (keyPath, data, level) => {
-      if (shouldExpand !== null) {
-        return shouldExpand;
-      }
+  const shouldExpandNodeInitially: ShouldExpandNodeInitially = (
+    keyPath,
+    data,
+    level,
+  ) => {
+    if (shouldExpand !== null) {
+      return shouldExpand;
+    }
 
-      return level < expandAfter;
-    },
-    [shouldExpand, expandAfter],
-  );
-
-  const expandAll = useCallback(() => setShouldExpand(true), [setShouldExpand]);
-  const collapseALl = useCallback(
-    () => setShouldExpand(false),
-    [setShouldExpand],
-  );
+    return level < expandAfter;
+  };
 
-  const incrementExpandAfter = useCallback(() => {
+  const incrementExpandAfter = () => {
     setExpandAfter(Math.min(10, expandAfter + 1));
     setShouldExpand(null);
-  }, [expandAfter]);
-  const decrementExpandAfter = useCallback(() => {
+  };
+  const decrementExpandAfter = () => {
     setExpandAfter(Math.max(0, expandAfter - 1));
     setShouldExpand(null);
-  }, [expandAfter]);
-
-  const serialized = useMemo(() => JSON.stringify(json), [json]);
+  };
 
   return (
     <Box>
@@ -68,16 +61,16 @@ export default function JsonViewer({ json }: Props) {
             <IconButton
               icon={ArrowsPointingInIcon}
               label="Collapse all nodes"
-              onClick={collapseALl}
+              onClick={() => setShouldExpand(false)}
             />
             <IconButton
               icon={ArrowsPointingOutIcon}
               label="Expand all nodes"
-              onClick={expandAll}
+              onClick={() => setShouldExpand(true)}
             />
           </div>
           <div className="flex flex-wrap items-center space-x-1 sm:pl-4">
-            <Copy content={serialized} />
+            <Copy content={() => JSON.stringify(json)} />
           </div>
         </div>
       </BoxTitle>

app/components/layout.tsx

@@ -1,10 +1,4 @@
-import React, {
-  Fragment,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import React, { Fragment, useEffect, useRef, useState } from "react";
 import {
   Bars3BottomLeftIcon,
   MagnifyingGlassIcon,
@@ -31,14 +25,6 @@
   const location = useLocation();
   const prevPath = useRef(location.pathname);
 
-  const toggleSidebar = useCallback(() => {
-    setSidebarOpen(!sidebarOpen);
-  }, [sidebarOpen, setSidebarOpen]);
-
-  const toggleSearch = useCallback(() => {
-    setSearchOpen(!searchOpen);
-  }, [searchOpen, setSearchOpen]);
-
   // if url changes while the sidebar is open, close the sidebar
   useEffect(() => {
     if (sidebarOpen && prevPath.current !== location.pathname) {
@@ -49,6 +35,7 @@
   }, [location.pathname, sidebarOpen, setSidebarOpen]);
 
   // on command + k, open search bar
+  const toggleSearch = () => setSearchOpen(!searchOpen);
   useKeyboardShortcut(["Meta", "K"], toggleSearch, keyboardShortcutOptions);
   useKeyboardShortcut(["Control", "K"], toggleSearch, keyboardShortcutOptions);
 
@@ -73,14 +60,15 @@
             <div className="hidden lg:block lg:max-w-md lg:flex-auto">
               <button
                 type="button"
+                test-id="search-box"
                 className="hidden h-8 w-full items-center gap-2 rounded-full pl-2 pr-3 text-sm ring-1 transition bg-white/5 text-zinc-400 ring-inset ring-white/10 hover:ring-white/20 lg:flex outline-hidden"
                 onClick={toggleSearch}
               >
                 <MagnifyingGlassIcon
                   className="h-5 w-5 stroke-current"
                   aria-hidden="true"
                 />
-                Find something...
+                Find something…
                 <kbd className="ml-auto text-2xs text-zinc-500">
                   <kbd className="font-sans">⌘</kbd>
                   <kbd className="font-sans">K</kbd>
@@ -92,7 +80,7 @@
                 type="button"
                 className="flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-white/5"
                 aria-label="Toggle navigation"
-                onClick={toggleSidebar}
+                onClick={() => setSidebarOpen(!sidebarOpen)}
               >
                 {sidebarOpen ? (
                   <XMarkIcon
@@ -118,8 +106,9 @@
               <div className="contents lg:hidden">
                 <button
                   type="button"
+                  test-id="search-box"
                   className="flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-white/5 lg:hidden focus:not-focus-visible:outline-hidden"
-                  aria-label="Find something..."
+                  aria-label="Find something…"
                   onClick={toggleSearch}
                 >
                   <MagnifyingGlassIcon

app/components/popular-utilities.tsx

@@ -1,6 +1,5 @@
 import { Link } from "react-router";
 import { ArrowRightIcon } from "@heroicons/react/20/solid";
-import { memo } from "react";
 import { utilities } from "~/utilities";
 import { ClientOnly } from "~/components/client-only";
 
@@ -20,16 +19,14 @@ function shuffle<T>(arr: T[]) {
   return arr;
 }
 
-export default memo(PopularUtilities);
-
 /**
  * Since we are using a random() function to show popular utilities, react router fails to match server side
  * rendered content with what the client does and throws a bunch of errors. We wrap it with <ClientOnly />
  * to only render fully on the client side.
  *
  * @constructor
  */
-function PopularUtilities() {
+export default function PopularUtilities() {
   return (
     <ClientOnly
       fallback={
@@ -69,6 +66,7 @@ interface PopularUtilityProps {
   readonly description: string;
   readonly path: string;
 }
+
 function PopularUtility({ name, description, path }: PopularUtilityProps) {
   return (
     <div>

app/components/read-file.tsx

@@ -1,5 +1,4 @@
 import type { ChangeEvent } from "react";
-import { useCallback } from "react";
 import { PaperClipIcon } from "@heroicons/react/24/outline";
 import IconButton from "~/components/icon-button";
 
@@ -17,45 +16,38 @@ export default function ReadFile({
   onLoad,
   onError,
 }: Props) {
-  const onButtonClick = useCallback(
-    () => document.getElementById("file-input")?.click(),
-    [],
-  );
-  const onChange = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => {
-      const files = e.target.files || [];
+  const onChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files || [];
 
-      // stop, no file selected
-      if (files.length === 0) {
-        return;
-      }
+    // stop, no file selected
+    if (files.length === 0) {
+      return;
+    }
 
-      const filesArray = Array.from(files);
+    const filesArray = Array.from(files);
 
-      // ensure all files are under the size limit
-      filesArray.forEach((file) => {
-        const maxAllowedSize = 10 * 1024 * 1024;
+    // ensure all files are under the size limit
+    filesArray.forEach((file) => {
+      const maxAllowedSize = 10 * 1024 * 1024;
 
-        // stop if we are passed a certain limit
-        if (file.size > maxAllowedSize) {
-          if (onError) {
-            onError(`File is too large. Max size is ${maxAllowedSize} bytes.`);
-          }
-          return;
+      // stop if we are passed a certain limit
+      if (file.size > maxAllowedSize) {
+        if (onError) {
+          onError(`File is too large. Max size is ${maxAllowedSize} bytes.`);
         }
-      });
+        return;
+      }
+    });
 
-      onLoad(filesArray);
-    },
-    [onLoad, onError],
-  );
+    onLoad(filesArray);
+  };
 
   return (
     <>
       <IconButton
         icon={PaperClipIcon}
         label="Load file"
-        onClick={onButtonClick}
+        onClick={() => document.getElementById("file-input")?.click()}
         tooltipPlacement="bottom"
       />
       <input