back to Fragment

what i think happened was:

previously, TS didnt strongly type the `jsxFragmentFactory` function
meaning the minimal jsx runtime could abuse things by passing in the
`DocumentFragment` constructor as a sentinel to know when to call
`document.createDocumentFragment();`. even though `DocumentFragment`
didn't properly match an `ElementFunction`'s signature, we didn't
really care bc we just used it as a sentinel. now TS *does* complain
about this, so it really wants the function to actually be an
element function.

it seems like making `Fragment` just ignore props and do
`createDocumentFragment` kind of just works? only props that should
matter is `props.children`, only im pretty sure `children` still
gets passed to `h` anyway afaict?

src/tools/display/debug.tsx

@@ -2,6 +2,7 @@ import * as engine from '../../pkg';
 import {LAYOUT, LE} from '../../pkg/data';
 import * as gen1 from '../../pkg/gen1';
 
+import {Fragment} from './dom';
 import {Battle, Gen, Generation, adapt} from './ui';
 import * as util from './util';
 
@@ -99,11 +100,11 @@ const App = ({gen, data, error, seed}: {
   }
   frames.push(<Frame frame={partial || {}} gen={gen} showdown={showdown} last={last} />);
 
-  return <div>
+  return <>
     {!!seed && <h1>0x{seed.toString(16).toUpperCase()}</h1>}
     {frames}
     {error && <pre className='error'><code>{error}</code></pre>}
-  </div>;
+  </>;
 };
 
 const Frame = ({frame, gen, showdown, last}: {

src/tools/display/dom.ts

@@ -1,6 +1,6 @@
 /** @license MIT modified from Vadim Demedes's https://github.com/vadimdemedes/dom-chef */
 type Attributes = JSX.IntrinsicElements['div'];
-type DocumentFragmentConstructor = typeof DocumentFragment;
+type DocumentFragmentFunction = (props?: any) => DocumentFragment;
 type ElementFunction = (props?: any) => HTMLElement;
 
 declare global {
@@ -22,9 +22,6 @@ interface Fragment {
 // 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;
 
-const isFragment = (type: DocumentFragmentConstructor | ElementFunction):
-  type is DocumentFragmentConstructor => type === DocumentFragment;
-
 const setCSSProps = (element: HTMLElement, style: CSSStyleDeclaration) => {
   for (const [name, value] of Object.entries(style)) {
     if (name.startsWith('-')) {
@@ -57,12 +54,12 @@ const addChildren = (parent: Element | DocumentFragment, children: Node[]) => {
 const FALSIFIABLE_ATTRIBUTES = ['contentEditable', 'draggable', 'spellCheck', 'value'];
 
 export const h = (
-  type: DocumentFragmentConstructor | ElementFunction | string,
+  type: DocumentFragmentFunction | ElementFunction | string,
   attributes?: Attributes,
   ...children: Node[]
 ) => {
   if (typeof type !== 'string') {
-    const element = isFragment(type) ? document.createDocumentFragment() : type(attributes);
+    const element = type(attributes);
     addChildren(element, children);
     return element;
   }
@@ -92,5 +89,5 @@ export const h = (
   return element;
 };
 
-export const Fragment =
-  (typeof DocumentFragment === 'function' ? DocumentFragment : () => {}) as Fragment;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Fragment = (unused: any) => document.createDocumentFragment();

src/tools/display/select.tsx

@@ -1,4 +1,5 @@
 /** @license MIT modified from Pixabay's https://github.com/Pixabay/JavaScript-autoComplete */
+import {Fragment} from './dom';
 
 const FRAME_MS = 20;
 // const DELAY_MS = 150;
@@ -19,8 +20,8 @@ export const Select = ({options, unmount, placeholder, render}: {
 
   render ||= option => input.value
     // ? <span dangerouslySetInnerHTML={{__html: searcher.highlight(option)}}></span>
-    ? <span>{option}</span>
-    : <span>{option}</span>;
+    ? <>{option}</>
+    : <>{option}</>;
 
   let maxHeight = 0;
   let offsetHeight = 0;