use new react transform, i guess

Author: mlc

build.mjs

@@ -51,6 +51,7 @@ const ctx = await esbuild.context({
   target: resolveToEsbuildTarget(browserslist()),
   loader: { '.woff2': 'file' },
   metafile: !dev,
+  jsxDev: dev,
 });
 
 if (dev) {

src/About.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type React from 'react';
 
 const About: React.FC = () => (
   <>

src/Data.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useCallback } from 'react';
 import type { FeatureCollection, Point } from 'geojson';
 import FileInput from './FileInput';
 import MaybeError from './MaybeError';
@@ -12,7 +12,7 @@ const Data: React.FC = () => {
   const count = useAppSelector((state) => state.data.photos.features.length);
   const error = useAppSelector((state) => state.data.error);
 
-  const onFile = React.useCallback(
+  const onFile = useCallback(
     (file: File) => {
       parseData(file).then(
         (data) =>

src/FileInput.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useCallback, useRef } from 'react';
 
 type Kind = 'csv' | 'kml' | 'json';
 
@@ -21,11 +21,11 @@ const exts: Record<Kind, string> = {
 };
 
 const FileInput: React.FC<Props> = ({ kind, onFile, children }) => {
-  const inputRef = React.useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
 
-  const onLoadClick = React.useCallback(() => {
+  const onLoadClick = useCallback(() => {
     inputRef.current?.click();
-  }, [inputRef]);
+  }, []);
 
   const onFileChange: React.ChangeEventHandler<HTMLInputElement> =
     React.useCallback(

src/Game/BasicInput.tsx

@@ -1,15 +1,14 @@
-import * as React from 'react';
+import React, { useCallback } from 'react';
 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> =
-    React.useCallback(
-      (evt) => dispatch(setBasic(evt.target.value)),
-      [dispatch]
-    );
+  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(
+    (evt) => dispatch(setBasic(evt.target.value)),
+    [dispatch]
+  );
 
   return (
     <label>

src/Game/LineInput.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useCallback } from 'react';
 import FileInput from '../FileInput';
 import {
   setLine0,
@@ -18,22 +18,20 @@ const LineInput = () => {
     (state) => state.game.lineTarget.geometry.coordinates.length === 2
   );
   const wraparound = useAppSelector((state) => state.game.lineWraparound);
-  const onChange0: React.ChangeEventHandler<HTMLInputElement> =
-    React.useCallback(
-      (evt) => dispatch(setLine0(evt.target.value)),
-      [dispatch]
-    );
-  const onChange1: React.ChangeEventHandler<HTMLInputElement> =
-    React.useCallback(
-      (evt) => dispatch(setLine1(evt.target.value)),
-      [dispatch]
-    );
+  const onChange0: React.ChangeEventHandler<HTMLInputElement> = useCallback(
+    (evt) => dispatch(setLine0(evt.target.value)),
+    [dispatch]
+  );
+  const onChange1: React.ChangeEventHandler<HTMLInputElement> = useCallback(
+    (evt) => dispatch(setLine1(evt.target.value)),
+    [dispatch]
+  );
   const onChangeWraparound: React.ChangeEventHandler<HTMLInputElement> =
-    React.useCallback(
+    useCallback(
       (evt) => dispatch(setLineWraparound(evt.target.checked)),
       [dispatch]
     );
-  const onFile = React.useCallback(
+  const onFile = useCallback(
     async (file: File) => {
       try {
         const line = await parseLineString(file);

src/Game/MultiInput.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useCallback } from 'react';
 import { setMulti } from '../gameSlice';
 import { useAppDispatch, useAppSelector } from '../store';
 
@@ -7,28 +7,26 @@ 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> =
-    React.useCallback(
-      (evt) => {
-        dispatch(setMulti(evt.target.value));
-      },
-      [dispatch]
-    );
-  const onPaste: React.ClipboardEventHandler<HTMLTextAreaElement> =
-    React.useCallback(
-      (evt) => {
-        const data = evt.clipboardData.getData('text/plain');
-        let results: string[] = [];
-        for (const result of data.matchAll(COORDS_RE)) {
-          results.push(result[0]);
-        }
-        if (results.length > 0) {
-          evt.preventDefault();
-          dispatch(setMulti(results.join('\n')));
-        }
-      },
-      [dispatch]
-    );
+  const onChange: React.ChangeEventHandler<HTMLTextAreaElement> = useCallback(
+    (evt) => {
+      dispatch(setMulti(evt.target.value));
+    },
+    [dispatch]
+  );
+  const onPaste: React.ClipboardEventHandler<HTMLTextAreaElement> = useCallback(
+    (evt) => {
+      const data = evt.clipboardData.getData('text/plain');
+      let results: string[] = [];
+      for (const result of data.matchAll(COORDS_RE)) {
+        results.push(result[0]);
+      }
+      if (results.length > 0) {
+        evt.preventDefault();
+        dispatch(setMulti(results.join('\n')));
+      }
+    },
+    [dispatch]
+  );
   return (
     <label>
       Target coordinates (one per line):

src/Game/Params.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type React from 'react';
 import MaybeError from '../MaybeError';
 import { GameMode } from '../game-modes';
 import { useAppSelector } from '../store';

src/Game/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type React from 'react';
 import { Selector } from '../Radio';
 import { GameMode, Geoid } from '../game-modes';
 import { setGeoid, setMode } from '../gameSlice';

src/Icon.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type React from 'react';
 
 interface Props {
   name: string;