upgrade @types/react

somewhat of an experiment with vibecoding (Gemini CLI) - it didn't
go amazing so most of this got manually edited.

- it seems JSX.InstrinicElements now needs to be provided by a
  framework or something to go into the nitty gritty of each
  attribute allowed on an element - i think the decision to just
  type things as Record<string, unknown> is more or less reasonable
- it seems like Fragment needs to be explicitly required now
- the h function gets a lot more complicated. not sure if this is
  required but a little too hairy for me to care about

Author: scheibo

package.json

@@ -110,7 +110,7 @@
     "@types/minimist": "^1.2.5",
     "@types/mustache": "^4.2.6",
     "@types/node": "^25.0.6",
-    "@types/react": "<=18",
+    "@types/react": "^19.2.13",
     "@types/semver": "^7.7.1",
     "@types/vscode": "^1.108.1",
     "@vitest/coverage-v8": "^4.0.17",

src/tools/display/dom.ts

@@ -1,23 +1,18 @@
 /** @license MIT modified from Vadim Demedes's https://github.com/vadimdemedes/dom-chef */
-type Attributes = JSX.IntrinsicElements['div'];
-type DocumentFragmentFunction = (props?: any) => DocumentFragment;
-type ElementFunction = (props?: any) => HTMLElement;
 
 declare global {
   namespace JSX {
-    interface Element extends HTMLElement, DocumentFragment {
-      addEventListener: HTMLElement['addEventListener'];
-      removeEventListener: HTMLElement['removeEventListener'];
-      className: HTMLElement['className'];
+    type Element = HTMLElement | DocumentFragment;
+    interface IntrinsicElements {
+      [elemName: string]: Record<string, unknown>;
     }
   }
 }
 
-interface JSXElementClassDocumentFragment extends DocumentFragment, JSX.ElementClass { }
-interface Fragment {
-  prototype: JSXElementClassDocumentFragment;
-  new(): JSXElementClassDocumentFragment;
-}
+type Child = Node | string | number | boolean | null | undefined | Child[];
+
+type DocumentFragmentFunction = (props?: any) => DocumentFragment;
+type ElementFunction = (props?: any) => HTMLElement;
 
 // https://github.com/preactjs/preact/blob/1bbd687c/src/constants.js#L3
 const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
@@ -38,35 +33,55 @@ const setAttribute = (element: HTMLElement, name: string, value: string) => {
   if (value !== undefined && value !== null) element.setAttribute(name, value);
 };
 
-const addChildren = (parent: Element | DocumentFragment, children: Node[]) => {
+const addChildren = (parent: Node, children: Child[]) => {
   for (const child of children) {
     if (child instanceof Node) {
       parent.appendChild(child);
     } else if (Array.isArray(child)) {
       addChildren(parent, child);
     } else if (typeof child !== 'boolean' && typeof child !== 'undefined' && child !== null) {
-      parent.appendChild(document.createTextNode(child));
+      parent.appendChild(document.createTextNode(String(child)));
     }
   }
 };
 
 // https://github.com/facebook/react/blob/3f899089/packages/react-dom/src/shared/DOMProperty.js#L288-L322
 const FALSIFIABLE_ATTRIBUTES = ['contentEditable', 'draggable', 'spellCheck', 'value'];
 
-export const h = (
+export function h<K extends keyof HTMLElementTagNameMap>(
+  type: K,
+  attributes?: any,
+  ...children: Child[]
+): HTMLElementTagNameMap[K];
+export function h(
+  type: DocumentFragmentFunction,
+  attributes?: any,
+  ...children: Child[]
+): DocumentFragment;
+export function h<T extends HTMLElement>(
+  type: (props: any) => T,
+  attributes?: any,
+  ...children: Child[]
+): T;
+export function h(
+  type: string,
+  attributes?: any,
+  ...children: Child[]
+): HTMLElement;
+export function h(
   type: DocumentFragmentFunction | ElementFunction | string,
-  attributes?: Attributes,
-  ...children: Node[]
-) => {
+  attributes?: any,
+  ...children: Child[]
+): JSX.Element {
   if (typeof type !== 'string') {
     const element = type(attributes);
     addChildren(element, children);
-    return element;
+    return element as JSX.Element;
   }
 
   const element = document.createElement(type);
   addChildren(element, children);
-  if (!attributes) return element;
+  if (!attributes) return element as JSX.Element;
 
   for (let [name, value] of Object.entries(attributes)) {
     if (name === 'htmlFor') name = 'for';
@@ -75,19 +90,19 @@ export const h = (
       const existingClassname = element.getAttribute('class') ?? '';
       setAttribute(element, 'class', (existingClassname + ' ' + String(value)).trim());
     } else if (name === 'style') {
-      setCSSProps(element, value);
+      setCSSProps(element, value as CSSStyleDeclaration);
     } else if (name.startsWith('on')) {
       const eventName = name.slice(2).toLowerCase().replace(/^-/, '');
-      element.addEventListener(eventName, value);
-    } else if (name === 'dangerouslySetInnerHTML' && '__html' in value) {
-      element.innerHTML = value.__html;
+      element.addEventListener(eventName, value as EventListenerOrEventListenerObject);
+    } else if (name === 'dangerouslySetInnerHTML' && value && (value as any).__html) {
+      element.innerHTML = (value as any).__html;
     } else if (name !== 'key' && (FALSIFIABLE_ATTRIBUTES.includes(name) || value !== false)) {
-      setAttribute(element, name, value === true ? '' : value);
+      setAttribute(element, name, value === true ? '' : String(value));
     }
   }
 
-  return element;
-};
+  return element as JSX.Element;
+}
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Fragment = (unused: any) => document.createDocumentFragment();
+export const Fragment = (unused?: any) => document.createDocumentFragment();

src/tools/display/select.tsx

@@ -15,8 +15,8 @@ export const Select = ({options, unmount, placeholder, render}: {
     name='select'
     className='select'
     autoComplete='off'
-    placeholder={placeholder} /> as any as HTMLInputElement;
-  const container = <div className='select options' />;
+    placeholder={placeholder} /> as HTMLInputElement;
+  const container = <div className='select options' /> as HTMLDivElement;
 
   render ||= option => input.value
     // ? <span dangerouslySetInnerHTML={{__html: searcher.highlight(option)}}></span>
@@ -73,11 +73,11 @@ export const Select = ({options, unmount, placeholder, render}: {
     const val = input.value;
     cache[val] = data;
     if (data.length) {
-      const children: JSX.Element[] = [];
+      const children: Node[] = [];
       for (const option of data) {
         children.push(<div className='select option' data-value={option}>
           {render(option, val)}
-        </div>);
+        </div> as HTMLElement);
       }
       container.replaceChildren(...children);
       console.debug('suggest');
@@ -87,7 +87,7 @@ export const Select = ({options, unmount, placeholder, render}: {
     }
   };
 
-  const live = (e: MouseEvent, cls: string) => {
+  const live = (e: Event, cls: string) => {
     let found = false;
     let element = e.target as HTMLElement | null;
     while (element && !(found = element.classList.contains(cls))) element = element.parentElement;
@@ -97,15 +97,15 @@ export const Select = ({options, unmount, placeholder, render}: {
   container.addEventListener('mouseleave', e => {
     if (!live(e, '.option')) return;
     console.debug('mouseleave');
-    const selected = container.querySelector('.select.option.selected');
+    const selected = container.querySelector('.select.option.selected') as HTMLElement;
     if (selected) setTimeout(() => selected.classList.remove('selected'), FRAME_MS);
   });
 
   container.addEventListener('mouseover', e => {
     const element = live(e, '.option');
     if (!element) return;
     console.debug('mouseover');
-    const selected = container.querySelector('.select.option.selected');
+    const selected = container.querySelector('.select.option.selected') as HTMLElement;
     if (selected) setTimeout(() => selected.classList.remove('selected'), FRAME_MS);
     element.classList.add('selected');
   });

src/tools/display/ui.tsx

@@ -3,6 +3,7 @@ import * as adaptable from '@pkmn/img/adaptable';
 
 import * as engine from '../../pkg';
 
+import {Fragment} from './dom';
 import * as util from './util';
 
 declare const Sprites: adaptable.Sprites;
@@ -301,7 +302,7 @@ const HPBar = ({pokemon, last}: {
 };
 
 export const Status = ({pokemon}: {pokemon: engine.Data<engine.Pokemon>}) => {
-  if (!pokemon.status) return '';
+  if (!pokemon.status) return <></>;
   const classes = `status ${pokemon.status === 'tox' ? 'psn' : pokemon.status}`;
   let title = '';
   if (pokemon.statusData.sleep) title += `Sleep: ${pokemon.statusData.sleep}`;