fix: Preact types

src/web/client/components/generic/basics.tsx

@@ -145,12 +145,12 @@ export function TextField(props: {
     onNewValue === undefined
       ? undefined
       : (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
-          onNewValue(e.target.value);
+          onNewValue(e.currentTarget.value);
   const width = "calc(100% - 12px)";
   const baseProps = {
     id: props.id,
     className: "text md textField",
-    spellCheck: false,
+    spellcheck: false,
     autoCapitalize: "none",
     autoComplete: "off",
     defaultValue: props.defaultValue,

src/web/client/components/generic/overlays.tsx

@@ -3,7 +3,7 @@ import {
   SpanButton,
   type ClickableCoreProps,
 } from "@/web/client/components/generic/basics";
-import { PropsWithChildren, useEffect, useRef } from "react";
+import { PropsWithChildren, useEffect, useRef, JSX } from "react";
 
 export type OverlayProps = ClickableCoreProps;
 

src/web/client/components/generic/search.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from "react";
+import { useRef, useState, useEffect, JSX } from "react";
 
 import Popper from "@mui/base/PopperUnstyled";
 import { IconButton, SvgIcon } from "@/web/client/components/generic/icons";
@@ -168,12 +168,12 @@ export function SearchBox<T>(props: SearchBoxProps<T>) {
             ref={inputRef}
             type="text"
             className="customSearchBox text md"
-            spellCheck="false"
+            spellcheck={false}
             autoCapitalize="none"
             autoComplete="off"
             aria-label={props.ariaLabel}
             value={input}
-            onChange={async (e) => onInput(e.target.value)}
+            onChange={async (e) => onInput(e.currentTarget.value)}
             onKeyUp={(event) => {
               if (event.key !== "Enter") {
                 return;

src/web/client/components/single_page_app.tsx

@@ -1,4 +1,4 @@
-import { useState, useContext, useEffect } from "react";
+import { useState, useContext, useEffect, JSX } from "react";
 
 import { ResponsiveAppBar } from "@/web/client/components/app_bar";
 import { ReportIssueDialog } from "@/web/client/components/report_issue_dialog";

src/web/client/offline/offline_settings_ui.tsx

@@ -88,7 +88,7 @@ function OfflineSettingsCheckbox(props: {
           checked={setting === true}
           disabled={disabled}
           onChange={async (e) => {
-            const checked = e.target.checked;
+            const checked = e.currentTarget.checked;
             setProgress("In progress: please wait");
             const status = await registerServiceWorker();
             if (status === -1) {

src/web/client/pages/dictionary/dictionary_utils.test.tsx

@@ -6,7 +6,7 @@ import { XmlNode } from "@/common/xml/xml_node";
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import user from "@testing-library/user-event";
-import { forwardRef } from "react";
+import { forwardRef, JSX } from "react";
 
 import {
   ClickableTooltip,

src/web/client/pages/dictionary/dictionary_utils.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { JSX } from "react";
 
 import { checkPresent } from "@/common/assert";
 import { XmlNode } from "@/common/xml/xml_node";

src/web/client/pages/dictionary/search/dictionary_search.tsx

@@ -96,7 +96,7 @@ function SearchSettingsDialog(props: {
                 disabled={shouldDisable[dict.key]}
                 onChange={(e) => {
                   const dicts = new Set(props.dicts);
-                  if (e.target.checked) {
+                  if (e.currentTarget.checked) {
                     dicts.add(dict);
                   } else {
                     dicts.delete(dict);

src/web/client/pages/library/base_reader.tsx

@@ -15,6 +15,7 @@ import React, {
   useEffect,
   useState,
   useCallback,
+  JSX,
 } from "react";
 import { ContentBox } from "@/web/client/pages/dictionary/sections";
 import { Footer } from "@/web/client/components/footer";

src/web/client/pages/library/external_content_reader.tsx

@@ -8,7 +8,7 @@ import {
   ReaderInternalTabConfig,
 } from "@/web/client/pages/library/reader_sidebar_components";
 
-import { PropsWithChildren, useEffect, useState } from "react";
+import { PropsWithChildren, useEffect, useState, JSX } from "react";
 import { exhaustiveGuard } from "@/common/misc_utils";
 import React from "react";
 import { ContentBox } from "@/web/client/pages/dictionary/sections";

src/web/client/pages/library/reader.tsx

@@ -9,7 +9,7 @@ import { XmlNode } from "@/common/xml/xml_node";
 import { ContentBox } from "@/web/client/pages/dictionary/sections";
 import { ClientPaths } from "@/web/client/routing/client_paths";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, JSX } from "react";
 import * as React from "react";
 import {
   areArraysEqual,
@@ -516,7 +516,7 @@ function JumpToSection() {
         className="bgColor text"
         aria-label="jump to id"
         value={value}
-        onChange={(e) => setValue(e.target.value ?? "")}
+        onChange={(e) => setValue(e.currentTarget.value ?? "")}
         onKeyUp={(e) => {
           if (e.key === "Enter" && value.length > 0) {
             nav.to((old) => ({

src/web/client/pages/library/reader_sidebar_components.tsx

@@ -8,7 +8,7 @@ import { exhaustiveGuard } from "@/common/misc_utils";
 import { NumberSelector } from "@/web/client/components/generic/selectors";
 import { SvgIcon } from "@/web/client/components/generic/icons";
 import { StyleContext } from "@/web/client/styling/style_context";
-import { useContext } from "react";
+import { useContext, JSX } from "react";
 
 export interface EmbeddedDictionaryProps {
   /** The word to look up in the dictionary, if any. */
@@ -84,7 +84,7 @@ export function MobileReaderSettingsSections(props: MobileReaderSettings) {
             id="swipeNav"
             name="swipeNav"
             checked={swipeNavigation}
-            onChange={(e) => setSwipeNavigation(e.target.checked)}
+            onChange={(e) => setSwipeNavigation(e.currentTarget.checked)}
           />
           <label htmlFor="swipeNav" className="text md">
             Swipe to change page
@@ -98,7 +98,7 @@ export function MobileReaderSettingsSections(props: MobileReaderSettings) {
             id="tapNav"
             name="tapNav"
             checked={tapNavigation}
-            onChange={(e) => setTapNavigation(e.target.checked)}
+            onChange={(e) => setTapNavigation(e.currentTarget.checked)}
           />
           <label htmlFor="tapNav" className="text md">
             Tap edge to change page [Beta]

src/web/client/pages/library/reader_utils.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { CSSProperties } from "react";
+import { CSSProperties, JSX } from "react";
 import { IconButton, SvgIcon } from "@/web/client/components/generic/icons";
 
 export function SettingsText(props: { message: string }) {

src/web/client/pages/site_settings.tsx

@@ -38,7 +38,7 @@ function DropDown(props: {
       <select
         name={props.id}
         id={props.id}
-        onChange={(e) => props.onSelected(e.target.value)}
+        onChange={(e) => props.onSelected(e.currentTarget.value)}
         defaultValue={props.default}>
         {props.options.map((o) => (
           <option value={o} key={o}>

src/web/client/pages/tooltips.tsx

@@ -1,5 +1,5 @@
 import Popper from "@mui/base/PopperUnstyled";
-import React, { RefObject } from "react";
+import React, { RefObject, JSX } from "react";
 import { exhaustiveGuard, singletonOf } from "@/common/misc_utils";
 import { RouteInfo } from "@/web/client/router/router_v2";
 import { ClientPaths } from "@/web/client/routing/client_paths";

src/web/client/router/paths.ts

@@ -1,3 +1,5 @@
+import { JSX } from "react";
+
 export interface ContentPage {
   /** The content to display for this page. */
   Content: (props: Partial<Record<string, any>>) => JSX.Element;

tsconfig.json

@@ -19,7 +19,7 @@
     // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
     // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
     // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
-    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+    "jsxImportSource": "preact",                         /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
     // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
     // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
     // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
@@ -36,10 +36,10 @@
       "@/*": [
         "*"
       ],
-      "react": ["./node_modules/preact/compat/"],
-      "react/jsx-runtime": ["./node_modules/preact/jsx-runtime"],
-      "react-dom": ["./node_modules/preact/compat/"],
-      "react-dom/*": ["./node_modules/preact/compat/*"]
+      "react": ["../node_modules/preact/compat/"],
+      "react/jsx-runtime": ["../node_modules/preact/jsx-runtime"],
+      "react-dom": ["../node_modules/preact/compat/"],
+      "react-dom/*": ["../node_modules/preact/compat/*"]
     },
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
     // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */