[react19] JSX changes

Author: jamesgpearce

gulpfile.mjs

@@ -477,17 +477,20 @@ const compileModule = async (
       'prettier/plugins/typescript',
       'react',
       'react-dom',
+      'react/jsx-runtime',
       'url',
       'yjs',
       'tinybase/store',
       'tinybase/tools',
       '../ui-react',
     ],
+    jsx: 'react-jsx',
     input: inputFile,
     plugins: [
       esbuild({
         target,
         legalComments: 'inline',
+        jsx: 'automatic',
       }),
       replace({
         '/*!': '\n/*',
@@ -504,18 +507,16 @@ const compileModule = async (
       shebang(),
       image(),
       min
-        ? [
-            terser({
-              toplevel: true,
-              compress: {
-                unsafe: true,
-                passes: 3,
-                ...(module == 'tools'
-                  ? {reduce_vars: false, reduce_funcs: false}
-                  : {}),
-              },
-            }),
-          ]
+        ? terser({
+            toplevel: true,
+            compress: {
+              unsafe: true,
+              passes: 3,
+              ...(module == 'tools'
+                ? {reduce_vars: false, reduce_funcs: false}
+                : {}),
+            },
+          })
         : prettierPlugin(await getPrettierConfig()),
     ],
     onwarn: (warning, warn) => {

src/common/react.ts

@@ -8,9 +8,7 @@ import {isUndefined} from './other.ts';
 
 export const {
   PureComponent,
-  Fragment,
   createContext,
-  createElement,
   useCallback,
   useContext,
   useEffect,

src/tsconfig.json

@@ -7,7 +7,7 @@
     "removeComments": true,
     "target": "ESNext",
     "module": "NodeNext",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "moduleResolution": "NodeNext",
     "allowSyntheticDefaultImports": true,
     "types": ["node", "@cloudflare/workers-types"],

src/ui-react-dom/index.tsx

@@ -1,6 +1,3 @@
-/** @jsx createElement */
-/** @jsxFrag Fragment */
-
 import {
   BOOLEAN,
   CELL,
@@ -72,19 +69,18 @@ import type {
   ValuesInHtmlTable as ValuesInHtmlTableDecl,
   ValuesInHtmlTableProps,
 } from '../@types/ui-react-dom/index.d.ts';
+import type {Id, Ids} from '../@types/common/index.d.ts';
 import {
-  Fragment,
-  createElement,
   getIndexStoreTableId,
   getProps,
   getRelationshipsStoreTableIds,
   useCallback,
   useMemo,
   useState,
 } from '../common/react.ts';
-import type {Id, Ids} from '../@types/common/index.d.ts';
 import {isArray, isString, isUndefined, mathMin} from '../common/other.ts';
 import {objMap, objNew, objToArray} from '../common/obj.ts';
+import React from 'react';
 import type {Relationships} from '../@types/relationships/index.d.ts';
 import {arrayMap} from '../common/array.ts';
 

src/ui-react-inspector/Body.tsx

@@ -1,14 +1,11 @@
-/** @jsx createElement */
-
 import {arrayIsEmpty, arrayMap} from '../common/array.ts';
+import {isUndefined, mathFloor} from '../common/other.ts';
 import {
-  createElement,
   useCallback,
   useLayoutEffect,
   useRef,
   useState,
 } from '../common/react.ts';
-import {isUndefined, mathFloor} from '../common/other.ts';
 import {
   useIndexes,
   useIndexesIds,
@@ -26,6 +23,7 @@ import {CURRENT_TARGET} from '../common/strings.ts';
 import {IndexesView} from './IndexesView.tsx';
 import {MetricsView} from './MetricsView.tsx';
 import {QueriesView} from './QueriesView.tsx';
+import React from 'react';
 import {RelationshipsView} from './RelationshipsView.tsx';
 import type {StoreProp} from './types.ts';
 import {StoreView} from './StoreView.tsx';

src/ui-react-inspector/Details.tsx

@@ -1,12 +1,10 @@
-/** @jsx createElement */
-
 import {OPEN_CELL, STATE_TABLE} from './common.ts';
 import type {ReactNode, SyntheticEvent} from 'react';
 import {useCell, useSetCellCallback} from '../ui-react/index.ts';
 import {CURRENT_TARGET} from '../common/strings.ts';
 import type {Id} from '../@types/common/index.d.ts';
+import React from 'react';
 import type {StoreProp} from './types.ts';
-import {createElement} from '../common/react.ts';
 
 export const Details = ({
   uniqueId,

src/ui-react-inspector/ErrorBoundary.tsx

@@ -1,7 +1,6 @@
-/** @jsx createElement */
-
 import type {ErrorInfo, ReactNode} from 'react';
-import {PureComponent, createElement} from '../common/react.ts';
+import {PureComponent} from '../common/react.ts';
+import React from 'react';
 
 interface Props {
   readonly children: ReactNode;

src/ui-react-inspector/Header.tsx

@@ -1,12 +1,10 @@
-/** @jsx createElement */
-
 import {OPEN_VALUE, POSITIONS, POSITION_VALUE, TITLE} from './common.ts';
 import {useSetValueCallback, useValue} from '../ui-react/index.ts';
 import {CURRENT_TARGET} from '../common/strings.ts';
 import type {MouseEvent} from 'react';
+import React from 'react';
 import type {StoreProp} from './types.ts';
 import {arrayMap} from '../common/array.ts';
-import {createElement} from '../common/react.ts';
 
 export const Header = ({s}: StoreProp) => {
   const position = useValue(POSITION_VALUE, s) ?? 1;

src/ui-react-inspector/IndexesView.tsx

@@ -1,15 +1,13 @@
-/** @jsx createElement */
-
 import type {IndexProps, SliceProps} from '../@types/ui-react/index.d.ts';
 import {arrayIsEmpty, arrayMap} from '../common/array.ts';
 import {getUniqueId, sortedIdsMap, useEditable} from './common.ts';
 import {useIndexIds, useIndexes, useSliceIds} from '../ui-react/index.ts';
 import {DEFAULT} from '../common/strings.ts';
 import {Details} from './Details.tsx';
 import type {Id} from '../@types/common/index.d.ts';
+import React from 'react';
 import {SliceInHtmlTable} from '../ui-react-dom/index.tsx';
 import type {StoreProp} from './types.ts';
-import {createElement} from '../common/react.ts';
 import {isUndefined} from '../common/other.ts';
 
 const IndexView = ({

src/ui-react-inspector/MetricsView.tsx

@@ -1,14 +1,12 @@
-/** @jsx createElement */
-
 import {arrayIsEmpty, arrayMap} from '../common/array.ts';
 import {useMetric, useMetricIds, useMetrics} from '../ui-react/index.ts';
 import {DEFAULT} from '../common/strings.ts';
 import {Details} from './Details.tsx';
 import type {Id} from '../@types/common/index.d.ts';
 import type {MetricProps} from '../@types/ui-react/index.d.ts';
 import type {Metrics} from '../@types/metrics/index.d.ts';
+import React from 'react';
 import type {StoreProp} from './types.ts';
-import {createElement} from '../common/react.ts';
 import {getUniqueId} from './common.ts';
 import {isUndefined} from '../common/other.ts';