Switch to SWC Vite plugin, ESLint rules

eslint.config.js

@@ -1,28 +1,42 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from "@eslint/js";
+import reactDOM from "eslint-plugin-react-dom";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import reactX from "eslint-plugin-react-x";
+import globals from "globals";
+import tseslint from "typescript-eslint";
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ["dist"] },
   {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.recommendedTypeChecked,
+      ...tseslint.configs.stylisticTypeChecked,
+    ],
+    files: ["**/*.{ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
+      parserOptions: {
+        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
+        tsconfigRootDir: import.meta.dirname,
+      },
     },
     plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+      "react-x": reactX,
+      "react-dom": reactDOM,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
+      ...reactX.configs["recommended-typescript"].rules,
+      ...reactDOM.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
         { allowConstantExport: true },
       ],
     },
-  },
-)
+  }
+);

package.json

@@ -22,10 +22,12 @@
     "@types/papaparse": "^5.3.16",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
-    "@vitejs/plugin-react": "^4.4.1",
+    "@vitejs/plugin-react-swc": "^3.9.0",
     "eslint": "^9.25.0",
+    "eslint-plugin-react-dom": "^1.49.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-react-x": "^1.49.0",
     "globals": "^16.0.0",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.30.1",

src/App.tsx

@@ -36,9 +36,9 @@ function App() {
       {entries.length} entries found
       {selectedCitation && (
         <CitationEntry
-          citation={
-            citations.find((citation) => citation.key === selectedCitation)!
-          }
+          citation={citations.find(
+            (citation) => citation.key === selectedCitation
+          )}
           onClose={() => setSelectedCitation(null)}
         />
       )}

src/components/AlphabeticalFilter/AlphabeticalFilter.tsx

@@ -1,9 +1,9 @@
 import { useState } from "react";
 import "./AlphabeticalFilter.css";
 
-type AlphabeticalFilterProps = {
+interface AlphabeticalFilterProps {
   onChange: (value: string) => void;
-};
+}
 
 function AlphabeticalFilter({ onChange }: AlphabeticalFilterProps) {
   const [selectedLetter, setSelectedLetter] = useState<string | null>(null);
@@ -24,6 +24,7 @@ function AlphabeticalFilter({ onChange }: AlphabeticalFilterProps) {
   const buttons = letters.map((letter) => (
     <button
       onClick={() => handleClick(letter)}
+      type="button"
       key={letter}
       className={[
         "alphabetical-filter-button",

src/components/CitationEntry/CitationEntry.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useRef } from "react";
 import type { Citation } from "../../lib/nist-api";
 import "./CitationEntry.css";
-type CitationEntryProps = {
+interface CitationEntryProps {
   citation?: Citation;
   onClose?: () => void;
-};
+}
 
 export default function CitationEntry({
   citation,

src/components/GlossaryEntry/GlossaryEntry.tsx

@@ -1,17 +1,18 @@
 import type { GlossaryTerm } from "../../lib/nist-api";
+import { hash } from "../../lib/util";
 import "./GlossaryEntry.css";
 
-type GlossaryEntryProps = {
+interface GlossaryEntryProps {
   term: GlossaryTerm;
   onSelectCitation?: (citationKey: string) => void;
-};
+}
 
 function GlossaryEntry({ term, onSelectCitation }: GlossaryEntryProps) {
   return (
     <>
       <dt key={term.term}>{term.term}</dt>
-      {term.definitions.map((def, index) => (
-        <dd key={term.term + index}>
+      {term.definitions.map((def) => (
+        <dd key={`${hash(def.definition)}-${hash(def.citationKey)}`}>
           {def.definition}
           <a
             className="citation"

src/lib/nist-api.ts

@@ -1,12 +1,12 @@
 import { Axios } from "axios";
 import Papa from "papaparse";
 
-export type Definition = {
+export interface Definition {
   definition: string;
   citationKey: string;
-};
+}
 
-export type Citation = {
+export interface Citation {
   key: string;
   title: string;
   authors: string;
@@ -16,19 +16,19 @@ export type Citation = {
   pages?: string;
   year: string;
   url: string;
-};
+}
 
-export type GlossaryTerm = {
+export interface GlossaryTerm {
   term: string;
   definitions: Definition[];
   relatedTerms: string;
   legalDefinition: string;
-};
+}
 
-export type Glossary = {
+export interface Glossary {
   definitions: GlossaryTerm[];
   citations: Citation[];
-};
+}
 
 const baseUrl =
   "https://docs.google.com/spreadsheets/d/e/2PACX-1vTRBYglcOtgaMrdF11aFxfEY3EmB31zslYI4q2_7ZZ8z_1lKm7OHtF0t4xIsckuogNZ3hRZAaDQuv_K/pub?output=csv";
@@ -45,7 +45,7 @@ const makeClient = () => {
 
 export const fetchCitations = async () => {
   const client = makeClient();
-  const resp = await client.get(baseUrl, {
+  const resp = await client.get<string>(baseUrl, {
     params: {
       gid: citationGid,
     },
@@ -55,7 +55,7 @@ export const fetchCitations = async () => {
 
 export const fetchDefinitions = async () => {
   const client = makeClient();
-  const resp = await client.get(baseUrl, {
+  const resp = await client.get<string>(baseUrl, {
     params: {
       gid: glossaryGid,
     },

src/lib/util.ts

@@ -0,0 +1,13 @@
+/**
+ * Generate a (non-cryptographic) hash value from a string.
+ * @param s string
+ * @returns string
+ */
+export function hash(s: string): string {
+  let hash = 0;
+  for (let i = 0; i < s.length; i++) {
+    hash = (hash << 5) - hash + s.charCodeAt(i);
+    hash |= 0; // Convert to 32bit integer
+  }
+  return hash.toString(16);
+}

vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import react from "@vitejs/plugin-react-swc";
+import { defineConfig } from "vite";
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+});