Merge branch 'preact'

mlc · mlc · commit 4ef60f064983 · 2025-07-08T22:45:26.000-04:00
diff --git a/build.mjs b/build.mjs
@@ -52,6 +52,12 @@ const ctx = await esbuild.context({
   loader: { '.woff2': 'file' },
   metafile: !dev,
   jsxDev: dev,
+  alias: {
+    react: 'preact/compat',
+    'react-dom/test-utils': 'preact/test-utils',
+    'react-dom': 'preact/compat',
+    'react/jsx-runtime': 'preact/jsx-runtime',
+  },
 });
 
 if (dev) {
diff --git a/package.json b/package.json
@@ -25,8 +25,6 @@
     "@types/geojson": "7946.0.16",
     "@types/node": "22.16.0",
     "@types/papaparse": "5.3.16",
-    "@types/react": "19.1.8",
-    "@types/react-dom": "19.1.6",
     "autoprefixer": "10.4.21",
     "aws-cdk-lib": "2.204.0",
     "browserslist": "4.25.1",
@@ -52,8 +50,7 @@
     "geographiclib-dms": "2.1.1",
     "geographiclib-geodesic": "patch:geographiclib-geodesic@npm%3A2.1.1#~/.yarn/patches/geographiclib-geodesic-npm-2.1.1-2da4df7f31.patch",
     "papaparse": "5.5.3",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
+    "preact": "10.26.9",
     "react-redux": "9.2.0",
     "redux": "5.0.1",
     "redux-persist": "6.0.0",
diff --git a/src/About.tsx b/src/About.tsx
@@ -1,6 +1,6 @@
-import type React from 'react';
+import type { FunctionComponent } from 'preact';
 
-const About: React.FC = () => (
+const About: FunctionComponent = () => (
   <>
     <h2>About</h2>
     <p className="hint">
diff --git a/src/Data.tsx b/src/Data.tsx
@@ -1,4 +1,5 @@
-import React, { useCallback } from 'react';
+import type { FunctionComponent } from 'preact';
+import { useCallback } from 'preact/compat';
 import type { FeatureCollection, Point } from 'geojson';
 import FileInput from './FileInput';
 import MaybeError from './MaybeError';
@@ -7,7 +8,7 @@ import { parseData } from './parseData';
 import { useAppDispatch, useAppSelector } from './store';
 import { stringifyError } from './util';
 
-const Data: React.FC = () => {
+const Data: FunctionComponent = () => {
   const dispatch = useAppDispatch();
   const count = useAppSelector((state) => state.data.photos.features.length);
   const error = useAppSelector((state) => state.data.error);
diff --git a/src/FileInput.tsx b/src/FileInput.tsx
@@ -1,4 +1,5 @@
-import React, { useCallback, useRef } from 'react';
+import type { FunctionComponent } from 'preact';
+import { ChangeEventHandler, useCallback, useRef } from 'preact/compat';
 
 type Kind = 'csv' | 'kml' | 'json';
 
@@ -20,23 +21,22 @@ const exts: Record<Kind, string> = {
   kml: '.kml',
 };
 
-const FileInput: React.FC<Props> = ({ kind, onFile, children }) => {
+const FileInput: FunctionComponent<Props> = ({ kind, onFile, children }) => {
   const inputRef = useRef<HTMLInputElement>(null);
 
   const onLoadClick = useCallback(() => {
     inputRef.current?.click();
   }, []);
 
-  const onFileChange: React.ChangeEventHandler<HTMLInputElement> =
-    React.useCallback(
-      (evt) => {
-        const files = evt.target.files;
-        if (files?.length === 1 && onFile) {
-          onFile(files[0]);
-        }
-      },
-      [onFile]
-    );
+  const onFileChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+    (evt) => {
+      const files = evt.currentTarget.files;
+      if (files?.length === 1 && onFile) {
+        onFile(files[0]);
+      }
+    },
+    [onFile]
+  );
 
   const accept = [mimes, exts]
     .flatMap((map) => kind.map((k) => map[k]))
diff --git a/src/Game/BasicInput.tsx b/src/Game/BasicInput.tsx
@@ -1,12 +1,12 @@
-import React, { useCallback } from 'react';
+import { ChangeEventHandler, useCallback } from 'preact/compat';
 import { setBasic } from '../gameSlice';
 import { useAppDispatch, useAppSelector } from '../store';
 
 const BasicInput = () => {
   const dispatch = useAppDispatch();
   const text = useAppSelector((state) => state.game.basicText);
-  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(
-    (evt) => dispatch(setBasic(evt.target.value)),
+  const onChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+    (evt) => dispatch(setBasic(evt.currentTarget.value)),
     [dispatch]
   );
 
diff --git a/src/Game/LineInput.tsx b/src/Game/LineInput.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { ChangeEventHandler, useCallback } from 'preact/compat';
 import FileInput from '../FileInput';
 import {
   setLine0,
@@ -18,19 +18,18 @@ const LineInput = () => {
     (state) => state.game.lineTarget.geometry.coordinates.length === 2
   );
   const wraparound = useAppSelector((state) => state.game.lineWraparound);
-  const onChange0: React.ChangeEventHandler<HTMLInputElement> = useCallback(
-    (evt) => dispatch(setLine0(evt.target.value)),
+  const onChange0: ChangeEventHandler<HTMLInputElement> = useCallback(
+    (evt) => dispatch(setLine0(evt.currentTarget.value)),
     [dispatch]
   );
-  const onChange1: React.ChangeEventHandler<HTMLInputElement> = useCallback(
-    (evt) => dispatch(setLine1(evt.target.value)),
+  const onChange1: ChangeEventHandler<HTMLInputElement> = useCallback(
+    (evt) => dispatch(setLine1(evt.currentTarget.value)),
+    [dispatch]
+  );
+  const onChangeWraparound: ChangeEventHandler<HTMLInputElement> = useCallback(
+    (evt) => dispatch(setLineWraparound(evt.currentTarget.checked)),
     [dispatch]
   );
-  const onChangeWraparound: React.ChangeEventHandler<HTMLInputElement> =
-    useCallback(
-      (evt) => dispatch(setLineWraparound(evt.target.checked)),
-      [dispatch]
-    );
   const onFile = useCallback(
     async (file: File) => {
       try {
diff --git a/src/Game/MultiInput.tsx b/src/Game/MultiInput.tsx
@@ -1,4 +1,8 @@
-import React, { useCallback } from 'react';
+import {
+  ChangeEventHandler,
+  ClipboardEventHandler,
+  useCallback,
+} from 'preact/compat';
 import { setMulti } from '../gameSlice';
 import { useAppDispatch, useAppSelector } from '../store';
 
@@ -7,15 +11,15 @@ const COORDS_RE = /[+-]?[0-9]+(?:\.?[0-9]+)?[,\s]+[+-]?[0-9]+(?:\.?[0-9]+)?/g;
 const MultiInput = () => {
   const dispatch = useAppDispatch();
   const text = useAppSelector((state) => state.game.multiText);
-  const onChange: React.ChangeEventHandler<HTMLTextAreaElement> = useCallback(
+  const onChange: ChangeEventHandler<HTMLTextAreaElement> = useCallback(
     (evt) => {
-      dispatch(setMulti(evt.target.value));
+      dispatch(setMulti(evt.currentTarget.value));
     },
     [dispatch]
   );
-  const onPaste: React.ClipboardEventHandler<HTMLTextAreaElement> = useCallback(
+  const onPaste: ClipboardEventHandler<HTMLTextAreaElement> = useCallback(
     (evt) => {
-      const data = evt.clipboardData.getData('text/plain');
+      const data = evt.clipboardData?.getData('text/plain') ?? '';
       let results: string[] = [];
       for (const result of data.matchAll(COORDS_RE)) {
         results.push(result[0]);
diff --git a/src/Game/Params.tsx b/src/Game/Params.tsx
@@ -1,12 +1,12 @@
-import type React from 'react';
+import { FunctionComponent } from 'preact';
 import MaybeError from '../MaybeError';
 import { GameMode } from '../game-modes';
 import { useAppSelector } from '../store';
 import BasicInput from './BasicInput';
 import LineInput from './LineInput';
 import MultiInput from './MultiInput';
 
-const GameInput: React.FC = () => {
+const GameInput: FunctionComponent = () => {
   const mode = useAppSelector((state) => state.game.mode);
 
   switch (mode) {
@@ -19,12 +19,12 @@ const GameInput: React.FC = () => {
   }
 };
 
-const GameError: React.FC = () => {
+const GameError: FunctionComponent = () => {
   const error = useAppSelector((state) => state.game.error);
   return <MaybeError error={error} />;
 };
 
-const GameParams: React.FC = () => (
+const GameParams: FunctionComponent = () => (
   <div id="game-params">
     <GameInput />
     <GameError />
diff --git a/src/Game/index.tsx b/src/Game/index.tsx
@@ -1,11 +1,11 @@
-import type React from 'react';
+import { FunctionComponent } from 'preact';
 import { Selector } from '../Radio';
 import { GameMode, Geoid } from '../game-modes';
 import { setGeoid, setMode } from '../gameSlice';
 import { useAppSelector } from '../store';
 import GameParams from './Params';
 
-const Game: React.FC = () => {
+const Game: FunctionComponent = () => {
   const mode = useAppSelector((state) => state.game.mode);
   const geoid = useAppSelector((state) => state.game.geoid);
 
diff --git a/src/Icon.tsx b/src/Icon.tsx
@@ -1,12 +1,12 @@
-import type React from 'react';
+import { FunctionComponent } from 'preact';
 
 interface Props {
   name: string;
   label: string;
   onClick?: () => void;
 }
 
-const Icon: React.FC<Props> = ({ name, label, onClick }) => (
+const Icon: FunctionComponent<Props> = ({ name, label, onClick }) => (
   <span
     className="icon"
     role={onClick ? 'button' : 'img'}
diff --git a/src/MaybeError.tsx b/src/MaybeError.tsx
@@ -1,10 +1,10 @@
-import type React from 'react';
+import { FunctionComponent } from 'preact';
 
 interface Props {
   error: string | null | undefined;
 }
 
-const MaybeError: React.FC<Props> = ({ error }) => {
+const MaybeError: FunctionComponent<Props> = ({ error }) => {
   if (error) {
     return <p className="error">{error}</p>;
   } else {
diff --git a/src/Providers.tsx b/src/Providers.tsx
@@ -1,9 +1,9 @@
-import type { FC, ReactNode } from 'react';
+import type { FunctionComponent } from 'preact';
 import { Provider as ReduxProvider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import { persistor, store } from './store';
 
-const Providers: FC<{ children: ReactNode }> = ({ children }) => (
+const Providers: FunctionComponent = ({ children }) => (
   <ReduxProvider store={store}>
     <PersistGate persistor={persistor}>{children}</PersistGate>
   </ReduxProvider>
diff --git a/src/Radio.tsx b/src/Radio.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { ChangeEventHandler, useCallback } from 'preact/compat';
 import { ActionCreator } from 'redux';
 import { useAppDispatch } from './store';
 
@@ -17,7 +17,7 @@ export function Radio<T extends string | number>({
   setMode,
   group,
 }: Props<T>) {
-  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(
+  const onChange: ChangeEventHandler<HTMLInputElement> = useCallback(
     (evt) => {
       setMode(thisMode);
     },
diff --git a/src/Results/DataCell.tsx b/src/Results/DataCell.tsx
@@ -1,4 +1,4 @@
-import type React from 'react';
+import type { FunctionComponent } from 'preact';
 import Icon from '../Icon';
 
 // https://stackoverflow.com/a/9284473
@@ -19,7 +19,7 @@ interface Props {
   data: any;
 }
 
-const Data: React.FC<Props> = ({ data }: Props) => {
+const Data: FunctionComponent<Props> = ({ data }: Props) => {
   const val = stringify(data);
   const isUrl = URL_REGEX.test(val);
   if (typeof data === 'boolean') {
@@ -31,7 +31,7 @@ const Data: React.FC<Props> = ({ data }: Props) => {
   }
 };
 
-const DataCell: React.FC<Props> = ({ data }) => (
+const DataCell: FunctionComponent<Props> = ({ data }) => (
   <td>
     <Data data={data} />
   </td>
diff --git a/src/Results/DistanceCell.tsx b/src/Results/DistanceCell.tsx
@@ -1,4 +1,4 @@
-import type React from 'react';
+import { FunctionComponent } from 'preact';
 import type { Point } from 'geojson';
 import { DistanceProps } from '../computation';
 import { gcFmtLine } from '../gcmap';
@@ -8,7 +8,7 @@ interface Props extends DistanceProps {
   extraGc?: string[];
 }
 
-const DistanceCell: React.FC<Props> = ({
+const DistanceCell: FunctionComponent<Props> = ({
   distance,
   dest,
   coord,
diff --git a/src/Results/Grid.tsx b/src/Results/Grid.tsx
@@ -1,4 +1,4 @@
-import type React from 'react';
+import { FunctionComponent } from 'preact';
 import type { FeatureCollection, Point } from 'geojson';
 import DataCell from './DataCell';
 import DistanceCell from './DistanceCell';
@@ -9,7 +9,7 @@ interface Props {
   extraGc?: string[];
 }
 
-const Grid: React.FC<Props> = ({ results: { features }, extraGc }) => {
+const Grid: FunctionComponent<Props> = ({ results: { features }, extraGc }) => {
   const headers = Object.keys(features[0].properties).filter(
     (h) => !['distance', 'dest'].includes(h)
   );
diff --git a/src/Results/PositionCell.tsx b/src/Results/PositionCell.tsx
@@ -1,4 +1,5 @@
-import type React from 'react';
+import type { FunctionComponent } from 'preact';
+import { useCallback } from 'preact/compat';
 import type { Point } from 'geojson';
 import Icon from '../Icon';
 import { formatCoord } from '../util';
@@ -7,23 +8,20 @@ interface Props {
   coord: Point;
 }
 
-const PositionCell: React.FC<Props> = ({ coord }) => {
+const PositionCell: FunctionComponent<Props> = ({ coord }) => {
   const stringCoord = formatCoord(coord);
   const params = new URLSearchParams({
     api: '1',
     query: [coord.coordinates[1], coord.coordinates[0]].join(','),
   });
   const url = 'https://www.google.com/maps/search/?' + params.toString();
+  const onCopyClick = useCallback(() => {
+    navigator.clipboard.writeText(stringCoord).catch(console.error);
+  }, [stringCoord]);
   return (
     <td className="position">
       <a href={url}>{stringCoord}</a>
-      <Icon
-        name="copy"
-        label="Copy coordinates"
-        onClick={() => {
-          navigator.clipboard.writeText(stringCoord).catch(console.error);
-        }}
-      />
+      <Icon name="copy" label="Copy coordinates" onClick={onCopyClick} />
     </td>
   );
 };
diff --git a/src/Results/index.tsx b/src/Results/index.tsx
@@ -1,20 +1,23 @@
-import React, { useMemo } from 'react';
+import { FunctionComponent } from 'preact';
 import { decorate } from '../computation';
 import { selectExtraGc, selectGameConfig } from '../gameConfig';
-import { useAppSelector } from '../store';
+import { createAppSelector, useAppSelector } from '../store';
 import Grid from './Grid';
 
-const Results: React.FC = () => {
-  const game = useAppSelector(selectGameConfig);
-  const extraGc = useAppSelector(selectExtraGc);
-  const photos = useAppSelector((state) => state.data.photos);
-  const results = useMemo(() => {
+const selectResults = createAppSelector(
+  [selectGameConfig, (state) => state.data.photos],
+  (game, photos) => {
     if (game && photos && photos.features.length > 0) {
       return decorate(game, photos);
     } else {
       return null;
     }
-  }, [game, photos]);
+  }
+);
+
+const Results: FunctionComponent = () => {
+  const extraGc = useAppSelector(selectExtraGc);
+  const results = useAppSelector(selectResults);
   if (results && results.features.length > 0) {
     return (
       <>
diff --git a/src/index.tsx b/src/index.tsx
diff --git a/src/parseData.ts b/src/parseData.ts
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/yarn.lock b/yarn.lock
