Fix type error if JSX is not defined

React 19 no longer defined `JSX`.
It prefers users to use `React.JSX` instead.
Without it,
it becomes impossible to infer what the types of props for particular
components are,
what the know tag names are,
what the “result” of `jsx()` is.

This PR is a patch to prevent errors when `JSX` is not there
while still *allowing* `JSX` to exist and for this package to be typed nicely.

Related-to GH-4.
Closes GH-6.

Author: wooorm

.gitignore

@@ -10,4 +10,3 @@ yarn.lock
 !/lib/types.d.ts
 !/index.d.ts
 !/types-esmsh.d.ts
-!/types-jsx.d.ts

lib/index.js

@@ -6,7 +6,7 @@
  * @import {MdxJsxFlowElementHast, MdxJsxTextElementHast} from 'mdast-util-mdx-jsx'
  * @import {MdxjsEsmHast} from 'mdast-util-mdxjs-esm'
  * @import {Position} from 'unist'
- * @import {Child, Create, Field, State, Style} from './types.js'
+ * @import {Child, Create, Field, JsxElement, State, Style} from './types.js'
  */
 
 import {stringify as commas} from 'comma-separated-tokens'
@@ -53,7 +53,7 @@ const docs = 'https://github.com/syntax-tree/hast-util-to-jsx-runtime'
  *   Tree to transform.
  * @param {Options} options
  *   Configuration (required).
- * @returns {JSX.Element}
+ * @returns {JsxElement}
  *   JSX element.
  */
 
@@ -733,8 +733,7 @@ function findComponentFromName(state, name, allowExpression) {
   // Only literals can be passed in `components` currently.
   // No identifiers / member expressions.
   if (result.type === 'Literal') {
-    const name = /** @type {keyof JSX.IntrinsicElements} */ (result.value)
-
+    const name = /** @type {PropertyKey} */ (result.value)
     return own.call(state.components, name) ? state.components[name] : name
   }
 

lib/types.d.ts

@@ -9,7 +9,7 @@ import type {Schema} from 'property-information'
 /**
  * Child.
  */
-export type Child = JSX.Element | string | null | undefined
+export type Child = JsxElement | string | null | undefined
 
 /**
  * Possible components to use.
@@ -24,16 +24,16 @@ export type Child = JSX.Element | string | null | undefined
 // Note: this type has to be in `.ts` or `.d.ts`, otherwise TSC hardcodes
 // react into the `.d.ts` file.
 export type Components = {
-  [TagName in keyof JSX.IntrinsicElements]:
-    | Component<JSX.IntrinsicElements[TagName] & ExtraProps>
-    | keyof JSX.IntrinsicElements
+  [TagName in keyof JsxIntrinsicElements]:
+    | Component<JsxIntrinsicElements[TagName] & ExtraProps>
+    | keyof JsxIntrinsicElements
 }
 
 /**
  * Function or class component.
  *
- * You can access props at `JSX.IntrinsicElements`.
- * For example, to find props for `a`, use `JSX.IntrinsicElements['a']`.
+ * You can access props at `JsxIntrinsicElements`.
+ * For example, to find props for `a`, use `JsxIntrinsicElements['a']`.
  *
  * @typeParam ComponentProps
  *   Props type.
@@ -55,7 +55,7 @@ export type Create = (
   type: unknown,
   props: Props,
   key: string | undefined
-) => JSX.Element
+) => JsxElement
 
 /**
  * Class component: given props, returns an instance.
@@ -69,7 +69,7 @@ export type Create = (
  */
 type ClassComponent<ComponentProps> = new (
   props: ComponentProps
-) => JSX.ElementClass
+) => JsxElementClass
 
 /**
  * Casing to use for attribute names.
@@ -135,18 +135,31 @@ export type Fragment = unknown
  */
 type FunctionComponent<ComponentProps> = (
   props: ComponentProps
-) => JSX.Element | string | null | undefined
+) => JsxElement | string | null | undefined
 
 /**
- * Create a production element.
+ * Conditional type for a class.
  */
-export type Jsx = (
-  // `any` because runtimes often have complex framework-specific types here.
-  // type-coverage:ignore-next-line
-  type: any,
-  props: Props,
-  key?: string | undefined
-) => JSX.Element
+// @ts-ignore: conditionally defined.
+export type JsxElementClass = any extends JSX.ElementClass
+  ? unknown
+  : // @ts-ignore: conditionally defined.
+    JSX.ElementClass
+
+/**
+ * Conditional type for a node object.
+ */
+// @ts-ignore: conditionally defined.
+export type JsxElement = any extends JSX.Element ? unknown : JSX.Element
+
+/**
+ * Conditional type for a record of tag names to corresponding props.
+ */
+// @ts-ignore: conditionally defined.
+export type JsxIntrinsicElements = any extends JSX.IntrinsicElements
+  ? Record<PropertyKey, any>
+  : // @ts-ignore: conditionally defined.
+    JSX.IntrinsicElements
 
 /**
  * Create a development element.
@@ -160,7 +173,18 @@ export type JsxDev = (
   isStaticChildren: boolean,
   source: Source,
   self: undefined
-) => JSX.Element
+) => JsxElement
+
+/**
+ * Create a production element.
+ */
+export type Jsx = (
+  // `any` because runtimes often have complex framework-specific types here.
+  // type-coverage:ignore-next-line
+  type: any,
+  props: Props,
+  key?: string | undefined
+) => JsxElement
 
 /**
  * Configuration.
@@ -232,10 +256,6 @@ export interface OptionsDevelopment extends OptionsBase {
    * Whether to use `jsxDEV` (when on) or `jsx` and `jsxs` (when off).
    */
   development: true
-  /**
-   * Dynamic JSX (optional).
-   */
-  jsx?: Jsx | null | undefined
   /**
    * Development JSX.
    */
@@ -244,6 +264,10 @@ export interface OptionsDevelopment extends OptionsBase {
    * Static JSX (optional).
    */
   jsxs?: Jsx | null | undefined
+  /**
+   * Dynamic JSX (optional).
+   */
+  jsx?: Jsx | null | undefined
 }
 
 /**
@@ -258,10 +282,6 @@ export interface OptionsProduction extends OptionsBase {
    * Whether to use `jsxDEV` (when on) or `jsx` and `jsxs` (when off) (optional).
    */
   development?: false | null | undefined
-  /**
-   * Dynamic JSX.
-   */
-  jsx: Jsx
   /**
    * Development JSX (optional).
    */
@@ -270,6 +290,10 @@ export interface OptionsProduction extends OptionsBase {
    * Static JSX.
    */
   jsxs: Jsx
+  /**
+   * Dynamic JSX.
+   */
+  jsx: Jsx
 }
 
 /**

package.json

@@ -113,6 +113,7 @@
               "default": "generic"
             }
           ],
+          "@typescript-eslint/ban-ts-comment": 0,
           "@typescript-eslint/ban-types": [
             "error",
             {

readme.md

@@ -109,7 +109,7 @@ Yields:
 ```
 
 > **Note**:
-> To add proper type support in React 19,
+> to add better type support,
 > register a global JSX namespace:
 >
 > ```ts
@@ -163,13 +163,16 @@ with an automatic JSX runtime.
 
 ##### Returns
 
-Result from your configured JSX runtime (`JSX.Element`).
+Result from your configured JSX runtime
+(`JSX.Element` if defined,
+otherwise `unknown` which you can cast yourself).
 
 ### `Components`
 
 Possible components to use (TypeScript type).
 
-Each key is a tag name typed in `JSX.IntrinsicElements`.
+Each key is a tag name typed in `JSX.IntrinsicElements`,
+if defined.
 Each value is either a different tag name
 or a component accepting the corresponding props
 (and an optional `node` prop if `passNode` is on).
@@ -184,14 +187,14 @@ use `JSX.IntrinsicElements['a']`.
 ```ts
 import type {Element} from 'hast'
 
+type ExtraProps = {node?: Element | undefined}
+
 type Components = {
   [TagName in keyof JSX.IntrinsicElements]:
     | Component<JSX.IntrinsicElements[TagName] & ExtraProps>
     | keyof JSX.IntrinsicElements
 }
 
-type ExtraProps = {node?: Element | undefined}
-
 type Component<ComponentProps> =
   // Class component:
   | (new (props: ComponentProps) => JSX.ElementClass)
@@ -308,7 +311,9 @@ Create a production element (TypeScript type).
 
 ###### Returns
 
-Element from your framework (`JSX.Element`).
+Element from your framework
+(`JSX.Element` if defined,
+otherwise `unknown` which you can cast yourself).
 
 ### `JsxDev`
 
@@ -338,7 +343,9 @@ Create a development element (TypeScript type).
 
 ###### Returns
 
-Element from your framework (`JSX.Element`).
+Element from your framework
+(`JSX.Element` if defined,
+otherwise `unknown` which you can cast yourself).
 
 ### `Options`
 
@@ -348,12 +355,12 @@ Configuration (TypeScript type).
 
 * `Fragment` ([`Fragment`][api-fragment], required)
   — fragment
-* `jsx` ([`Jsx`][api-jsx], required in production)
-  — dynamic JSX
-* `jsxs` ([`Jsx`][api-jsx], required in production)
-  — static JSX
 * `jsxDEV` ([`JsxDev`][api-jsx-dev], required in development)
   — development JSX
+* `jsxs` ([`Jsx`][api-jsx], required in production)
+  — static JSX
+* `jsx` ([`Jsx`][api-jsx], required in production)
+  — dynamic JSX
 * `components` ([`Partial<Components>`][api-components], optional)
   — components to use
 * `createEvaluater` ([`CreateEvaluater`][api-create-evaluater], optional)
@@ -574,7 +581,7 @@ render(
 )
 ```
 
-To add proper type support,
+To add better type support,
 register a global JSX namespace:
 
 ```ts
@@ -642,7 +649,7 @@ function Component() {
 }
 ```
 
-To add proper type support,
+To add better type support,
 register a global JSX namespace:
 
 ```ts
@@ -736,7 +743,7 @@ function Component() {
 }
 ```
 
-To add proper type support,
+To add better type support,
 register a global JSX namespace:
 
 ```ts